feat(frontend): lazy-load images, add lightbox viewer, polish AI panel

- Add loading=lazy + decoding=async to all <img> (message card preview,
  attachments grid, image grid, avatars via ui/avatar)
- New Lightbox component: fullscreen image viewer with keyboard nav
  (←/→/Esc), counter, click-to-close; wired into messages page + detail
- Attachments grid: click image to open, image counter badge, grouped
  non-image attachments
- AI analysis panel: line-clamp-3 with Show more/less toggle
- Message card: preview image is now a clickable button opening detail

services/frontend/src/components/messages/attachments-grid.tsx

@@ -1,35 +1,69 @@
 "use client";
 
+import { ImageIcon } from "lucide-react";
 import type { AttachmentRecord } from "@/lib/types";
 
 interface AttachmentsGridProps {
   attachments: AttachmentRecord[];
+  onImageClick?: (index: number) => void;
 }
 
-export function AttachmentsGrid({ attachments }: AttachmentsGridProps) {
+export function AttachmentsGrid({
+  attachments,
+  onImageClick,
+}: AttachmentsGridProps) {
   if (attachments.length === 0) return null;
 
+  const images = attachments.filter((a) => a.type?.startsWith("image/"));
+  const others = attachments.filter((a) => !a.type?.startsWith("image/"));
+
   return (
-    <div className="grid grid-cols-2 gap-2">
-      {attachments.map((att) => (
-        <div
-          key={att.id}
-          className="glass rounded-lg overflow-hidden group relative"
-        >
-          {att.type?.startsWith("image/") ? (
-            <img
-              src={att.uploaded_url || att.discord_url}
-              alt={att.filename}
-              className="w-full h-32 object-cover transition-transform group-hover:scale-105"
-              loading="lazy"
-            />
-          ) : (
-            <div className="flex items-center gap-2 p-3 text-xs text-text-secondary">
-              <span className="font-mono truncate">{att.filename}</span>
+    <div className="space-y-2">
+      {images.length > 0 && (
+        <div className="grid grid-cols-2 gap-2">
+          {images.map((att, i) => (
+            <div
+              key={att.id}
+              className="glass relative overflow-hidden rounded-lg group"
+            >
+              <button
+                type="button"
+                onClick={() => onImageClick?.(i)}
+                className="block w-full cursor-zoom-in"
+                aria-label={`Open ${att.filename}`}
+              >
+                <img
+                  src={att.uploaded_url || att.discord_url}
+                  alt={att.filename}
+                  className="h-32 w-full object-cover transition-transform duration-300 group-hover:scale-105"
+                  loading="lazy"
+                  decoding="async"
+                />
+              </button>
+              {images.length > 1 && (
+                <span className="absolute bottom-1 right-1 rounded bg-black/50 px-1.5 py-0.5 font-mono text-[10px] text-white/80">
+                  {i + 1}/{images.length}
+                </span>
+              )}
             </div>
-          )}
+          ))}
         </div>
-      ))}
+      )}
+      {others.length > 0 && (
+        <div className="flex flex-wrap gap-1.5">
+          {others.map((att) => (
+            <div
+              key={att.id}
+              className="flex items-center gap-1.5 rounded-md bg-white/5 px-2 py-1 text-xs text-text-secondary"
+            >
+              <ImageIcon className="size-3 text-text-secondary/50" />
+              <span className="font-mono max-w-40 truncate">
+                {att.filename}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 }