Draw the picture a link preview brought

Capped rather than sized to the card. A preview image is often a 1200px
banner, and a card as wide as the conversation would turn every posted
link into the loudest thing in the room.

Only where the daemon fetched one of its own - a Discord embed's
thumbnail still comes through the message's media sniffing and is paired
with the card below, which is a different mechanism for a different
protocol.

Co-Authored-By: Claude Opus 5 <[email protected]>

src/renderer/src/app.css

@@ -6676,6 +6676,21 @@ video.lightbox-media {
   color: var(--error);
 }
 
+/* --- Link previews ---------------------------------------------------- */
+
+/* The picture a homeserver found behind a link. Capped rather than sized to
+   the card: a preview image is often a 1200px banner, and a card as wide as
+   the conversation would turn every posted link into the loudest thing in the
+   room. */
+.rich-embed-image {
+  max-width: 100%;
+  max-height: 220px;
+  margin-top: var(--spacing-xs);
+  border-radius: var(--corner-radius-small);
+  object-fit: cover;
+  cursor: pointer;
+}
+
 /* --- Jump to a date --------------------------------------------------- */
 
 /* Under the search box, because it answers the same question by a different

src/renderer/src/components/MessageRow.tsx

@@ -877,8 +877,20 @@ function MessageRowBody({
                   />
                 </div>
               )}
-              {/* The thing the embed is about, inside the card describing it
-                  rather than repeated below it. */}
+              {/* The picture the card is about, where the card brought one
+                  of its own. A Matrix link preview is unfurled by the
+                  homeserver and arrives as a file the daemon has already
+                  fetched - so there is nothing to sniff and nothing to pair
+                  it with, unlike Discord's below. */}
+              {embed.imageUrl && !embedMedia.claimed.has(i) && (
+                <img
+                  className="rich-embed-image"
+                  src={resolveMediaUrl(embed.imageUrl)}
+                  alt=""
+                  loading="lazy"
+                  onClick={() => embed.url && void window.moho.openExternal(embed.url)}
+                />
+              )}
               {embedMedia.claimed.has(i) && (
                 <div className="rich-embed-media">
                   <MediaEmbed

src/shared/wire.ts

@@ -400,6 +400,16 @@ export interface Embed {
   color?: number
   timestamp?: string
   url?: string
+  /**
+   * The picture on the card, as a local path.
+   *
+   * A link preview is mostly its picture. Matrix's homeserver-side unfurling
+   * answers with an mxc URI needing a token no window holds, so the daemon
+   * fetches it and what arrives here is the file. Discord's own embeds carry
+   * none of these - their thumbnails come through the message's media
+   * sniffing and are paired with the card separately.
+   */
+  imageUrl?: string
 }
 
 /**