web: add lightweight inline link preview cards in messages

docs/core-checklist-status.md

@@ -41,7 +41,7 @@ Legend:
 32. Security - `DONE` (sessions + revoke + 2FA + access-session visibility; integration tests cover single-session revoke, revoke-all invalidation/force-disconnect, 2FA setup guard, recovery-code normalization/lifecycle, and disable-2FA cleanup; web auth supports recovery-code login; settings provides recovery-code warning/copy/download)
 33. Realtime Events - `DONE` (connect/disconnect/send/receive/typing/read/delivered/online/offline + chat/message updates + chat_deleted)
 34. Sync - `DONE` (cross-device via backend state + realtime; reconciliation for loaded chats/messages; `chat_updated` covers profile/membership/delete-for-self/archive/unarchive/pin/unpin/mute/clear and create-chat fanout to members; full-chat delete emits `chat_deleted`; web Chat Info also has 15s polling fallback to self-heal missed realtime updates; integration tests cover user-scoped archive/pin, member-side visibility after create, and user-scoped clear behavior; chat list and migration `0026_deduplicate_saved_chats` handle historical duplicate Saved Messages)
-35. Additional - `PARTIAL` (drafts/link preview partial/autoload media basic)
+35. Additional - `PARTIAL` (drafts/link preview partial/autoload media basic; web text messages now render lightweight inline link cards (domain + URL) for first HTTP(S) link)
 
 ## Current Focus beyond P1
 

web/src/components/MessageList.tsx

@@ -1264,7 +1264,23 @@ function renderMessageContent(
   if (!text) {
     return <p className="opacity-80">[empty]</p>;
   }
-  return <p className="whitespace-pre-wrap break-words" dangerouslySetInnerHTML={{ __html: formatMessageHtml(text) }} />;
+  const firstUrl = extractFirstUrl(text);
+  return (
+    <div className="space-y-1.5">
+      <p className="whitespace-pre-wrap break-words" dangerouslySetInnerHTML={{ __html: formatMessageHtml(text) }} />
+      {firstUrl ? (
+        <a
+          className="block rounded-xl border border-slate-600/70 bg-slate-900/55 px-3 py-2 transition-colors hover:bg-slate-800/70"
+          href={firstUrl}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <p className="truncate text-[11px] uppercase tracking-wide text-slate-400">{extractDomain(firstUrl)}</p>
+          <p className="truncate text-sm font-medium text-sky-300">{truncateLink(firstUrl, 88)}</p>
+        </a>
+      ) : null}
+    </div>
+  );
 }
 
 function renderStatus(status: string | undefined): string {
@@ -1295,6 +1311,38 @@ function isStickerOrGifMedia(url: string): boolean {
   return /\.gif($|\?)/.test(value);
 }
 
+function extractFirstUrl(text: string): string | null {
+  const match = text.match(/\bhttps?:\/\/[^\s<>"')]+/i);
+  if (!match) {
+    return null;
+  }
+  const candidate = match[0].trim();
+  try {
+    const parsed = new URL(candidate);
+    if (parsed.protocol === "http:" || parsed.protocol === "https:") {
+      return parsed.toString();
+    }
+  } catch {
+    return null;
+  }
+  return null;
+}
+
+function extractDomain(url: string): string {
+  try {
+    return new URL(url).hostname;
+  } catch {
+    return "Link";
+  }
+}
+
+function truncateLink(url: string, limit: number): string {
+  if (url.length <= limit) {
+    return url;
+  }
+  return `${url.slice(0, Math.max(0, limit - 1))}…`;
+}
+
 function chatLabel(chat: { display_title?: string | null; title: string | null; type: "private" | "group" | "channel"; is_saved?: boolean }): string {
   if (chat.display_title?.trim()) return chat.display_title;
   if (chat.title?.trim()) return chat.title;