feat(link-preview): frontend interface for Telegram-style URL preview

Adds the front-end side of the link-preview feature so the back-end
team has a fixed contract to implement against.

- docs/link-preview.md: full spec for the `/api/link-preview` proxy
  and the preferred inline-on-Post integration. Covers caching, SSRF
  guards, metadata-extraction precedence, provider quirks, and the
  front-end rendering rules. Scope is the first URL only.
- types/post.ts: new `LinkPreview` type and optional `linkPreview`
  field on `Post`.
- LinkPreviewCard: clickable card with a themeColor accent bar,
  siteName / title / description (line-clamped), and an optional
  1.91:1 thumbnail. Whole card is an `<a target="_blank">` to the
  canonical URL.
- MessageBubble: render the card between the bubble body and the
  timestamp, with padding that matches visual vs. text-only bubbles.
- mockPosts: example `linkPreview` payloads on p-005 and p-010 so
  the visual works when running with VITE_USE_MOCK_POSTS=true,
  and so the back-end has concrete reference values.

src/components/messageStream/LinkPreviewCard.tsx

@@ -0,0 +1,65 @@
+import type { LinkPreview } from "../../types/post";
+
+/**
+ * Telegram-style rich preview card for a single URL embedded in a post.
+ *
+ * Renders an accent bar on the left, then site name → title → description,
+ * with an optional thumbnail at the bottom. The whole card is one anchor
+ * that opens `canonicalUrl` in a new tab.
+ */
+export function LinkPreviewCard({ preview }: { preview: LinkPreview }) {
+  const accent = preview.themeColor || "#EEB726";
+  const hasUsefulText =
+    preview.title.length > 0 || preview.description.length > 0;
+  if (!hasUsefulText && !preview.imageUrl) return null;
+
+  return (
+    <a
+      href={preview.canonicalUrl || preview.url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="group block overflow-hidden rounded-lg bg-white/[0.04] transition hover:bg-white/[0.07]"
+    >
+      <div className="flex">
+        <div
+          aria-hidden
+          className="w-[3px] shrink-0 rounded-l-lg"
+          style={{ backgroundColor: accent }}
+        />
+        <div className="min-w-0 flex-1 px-3 py-2.5">
+          {preview.siteName ? (
+            <div
+              className="truncate text-[12px] leading-4"
+              style={{ color: accent }}
+            >
+              {preview.siteName}
+            </div>
+          ) : null}
+          {preview.title ? (
+            <div className="mt-0.5 line-clamp-2 break-words text-[14px] font-semibold leading-5 text-neutral-100">
+              {preview.title}
+            </div>
+          ) : null}
+          {preview.description ? (
+            <div className="mt-1 line-clamp-3 break-words text-[13px] leading-[18px] text-neutral-300">
+              {preview.description}
+            </div>
+          ) : null}
+          {preview.imageUrl ? (
+            <div className="mt-2 overflow-hidden rounded-md bg-black/30">
+              <img
+                src={preview.imageUrl}
+                alt=""
+                loading="lazy"
+                decoding="async"
+                width={preview.imageWidth}
+                height={preview.imageHeight}
+                className="block aspect-[1.91/1] w-full object-cover transition duration-300 group-hover:scale-[1.02]"
+              />
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </a>
+  );
+}