Expand direct image links instead of showing nothing (#43 follow-up)

A URL that points straight at an image file (Content-Type: image/*) has
no HTML to scrape Open Graph tags from, so the fetch found nothing and
the message showed no preview at all -- reported against
https://imgs.xkcd.com/comics/creepy.png.

link_preview_service now recognizes an allowed image content-type (same
list storage.py uses for uploads) before falling through to the HTML/og:
path, and returns the URL itself as the preview (LinkPreview.is_image).
No need to download the body -- the already-SSRF-validated URL is the
image. The frontend renders that case as a real expandable image
(message-image + lightbox, same as an actual attachment) instead of the
small title+description card, which would have nothing to show anyway.

Verified end-to-end against the reported URL.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/src/components/ChatPane.tsx

@@ -158,6 +158,7 @@ export function ChatPane({
             description: envelope.description,
             image_url: envelope.image_url,
             site_name: envelope.site_name,
+            is_image: envelope.is_image,
           }
           setHistory((prev) => prev.map((m) => (m.id === envelope.id ? { ...m, link_preview: linkPreview } : m)))
           setLive((prev) => prev.map((m) => (m.id === envelope.id ? { ...m, link_preview: linkPreview } : m)))

frontend/src/components/LinkPreviewCard.tsx

@@ -3,13 +3,30 @@ import './LinkPreviewCard.css'
 
 interface LinkPreviewCardProps {
   preview: LinkPreviewInfo
+  onImageClick: (src: string) => void
 }
 
 // Slack/Discord-style unfurl card, rendered under a message's text when the
 // backend found a URL in it and successfully fetched Open Graph data for it
 // (see link_preview_service.py -- title/description/image_url/site_name are
 // all independently optional, since not every page sets every og: tag).
-export function LinkPreviewCard({ preview }: LinkPreviewCardProps) {
+export function LinkPreviewCard({ preview, onImageClick }: LinkPreviewCardProps) {
+  // A direct link to an image file has no title/description/site_name to
+  // show (there's no HTML page to scrape them from) -- render it the same
+  // way a real image attachment renders (message-image + lightbox) rather
+  // than the small unfurl card, which would otherwise show just a tiny
+  // thumbnail with no text to go with it.
+  if (preview.is_image && preview.image_url) {
+    return (
+      <img
+        src={preview.image_url}
+        alt=""
+        className="message-image"
+        onClick={() => onImageClick(preview.image_url!)}
+      />
+    )
+  }
+
   return (
     <a
       href={preview.url}

frontend/src/components/MessageList.tsx

@@ -172,7 +172,9 @@ export function MessageList({ roomId, messages, members, onEdit, onReact }: Mess
                       {msg.edited_at && <span className="message-edited"> (edited)</span>}
                     </div>
                   )}
-                  {msg.link_preview && <LinkPreviewCard preview={msg.link_preview} />}
+                  {msg.link_preview && (
+                    <LinkPreviewCard preview={msg.link_preview} onImageClick={setLightboxSrc} />
+                  )}
                   {msg.reactions.length > 0 && (
                     <div className="message-reaction-pills">
                       {msg.reactions.map((r) => {

frontend/src/types.ts

@@ -114,6 +114,9 @@ export interface LinkPreviewInfo {
   description: string | null
   image_url: string | null
   site_name: string | null
+  // A direct link to an image file -- render the image itself (like a real
+  // attachment) rather than the small title+description unfurl card.
+  is_image: boolean
 }
 
 export interface Message {
@@ -166,6 +169,7 @@ export interface ChatLinkPreviewEnvelope {
   description: string | null
   image_url: string | null
   site_name: string | null
+  is_image: boolean
 }
 
 export interface ChatReactionUpdateEnvelope {