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/app/(dashboard)/messages/page.tsx

@@ -6,6 +6,7 @@ import { useCallback, useEffect, useState } from "react";
 import { GlassCard } from "@/components/glass/card";
 import { GlassPanel } from "@/components/glass/panel";
 import { SubNav } from "@/components/layout/sub-nav";
+import { Lightbox } from "@/components/messages/lightbox";
 import { extractFirstImage } from "@/components/messages/message-card";
 import { MessageDetailView } from "@/components/messages/message-detail-view";
 import { MessageList } from "@/components/messages/message-list";
@@ -53,6 +54,10 @@ export default function MessagesPage() {
     (searchParams.get("tab") as MessagesTab) || "all",
   );
   const [searchOpen, setSearchOpen] = useState(false);
+  const [lightbox, setLightbox] = useState<{
+    images: Array<{ src: string; alt?: string }>;
+    index: number;
+  } | null>(null);
 
   const ws = useWebSocket();
   const { data: channels = [] } = useTextChannels(guildId);
@@ -228,6 +233,17 @@ export default function MessagesPage() {
                   <MessageDetailView
                     message={detailMessage}
                     attachments={detailAttachments}
+                    onImageClick={(index) => {
+                      const imgs = (detailAttachments ?? [])
+                        .filter((a) => a.type?.startsWith("image/"))
+                        .map((a) => ({
+                          src: a.uploaded_url || a.discord_url,
+                          alt: a.filename,
+                        }));
+                      if (imgs.length > 0) {
+                        setLightbox({ images: imgs, index });
+                      }
+                    }}
                   />
                 </div>
               ) : null}
@@ -245,6 +261,16 @@ export default function MessagesPage() {
           setTab("all");
         }}
       />
+
+      {/* ── Lightbox ── */}
+      {lightbox && (
+        <Lightbox
+          images={lightbox.images}
+          initialIndex={lightbox.index}
+          open
+          onClose={() => setLightbox(null)}
+        />
+      )}
     </div>
   );
 }