diff --git a/crates/plugin-manager/src/lib.rs b/crates/plugin-manager/src/lib.rs
index 72c2f776..cc5c97ca 100644
--- a/crates/plugin-manager/src/lib.rs
+++ b/crates/plugin-manager/src/lib.rs
@@ -55,6 +55,8 @@ pub fn bundled_manifests() -> Vec<Manifest> {
             .expect("terminal manifest"),
         serde_json::from_str(include_str!("../../../src/bundled/profiles/manifest.json"))
             .expect("valid bundled Profiles manifest"),
+        serde_json::from_str(include_str!("../../../src/bundled/links/manifest.json"))
+            .expect("links manifest"),
         serde_json::from_str(include_str!("../../../src/bundled/mentions/manifest.json"))
             .expect("mentions manifest"),
         serde_json::from_str(include_str!("../../../src/bundled/emoji/manifest.json"))
diff --git a/crates/plugin-manager/tests/management.rs b/crates/plugin-manager/tests/management.rs
index 678b7f06..15dbc1e5 100644
--- a/crates/plugin-manager/tests/management.rs
+++ b/crates/plugin-manager/tests/management.rs
@@ -278,6 +278,7 @@ fn bundled_plugins_have_independent_flags_and_all_ids_are_reserved() {
         "buzz.agents",
         "buzz.emoji",
         "buzz.mentions",
+        "buzz.links",
     ] {
         assert!(
             manager
diff --git a/docs/plugin-architecture.md b/docs/plugin-architecture.md
index 530760c4..e979998c 100644
--- a/docs/plugin-architecture.md
+++ b/docs/plugin-architecture.md
@@ -92,7 +92,7 @@ render failures and remounts on target or revision changes. Unloading a plugin
 removes its contributions and closes its panel. Other pages can use these same
 contracts with their own layout and local navigation.
 
-The initial distribution contains Channels, Projects, Agents, GitHub, Bestie, Emoji, Mentions, Profiles and Terminal. Projects
+The initial distribution contains Channels, Projects, Agents, GitHub, Bestie, Emoji, Mentions, Profiles, Terminal and Links. Projects
 is an enabled-by-default scaffold with only a centered title and no relay dependency.
 GitHub recognizes repository,
 pull request, issue, and commit URLs and loads public object details on demand.
@@ -281,12 +281,17 @@ into versioned route parameters. These are host-matched preview types through
 
 Browser `#buzz=` addresses and session history support reload and Back/Forward.
 `targetLink`/`parseTargetLink` define a `buzz://open` locator codec that omits the
-sender's viewer; `bindSharedTarget` pins it for an admitted recipient. **This slice
-does not install native OS deep-link or notification-click ingress or migrate legacy
-Buzz links.** Message-addressed conversations show the selected verified row in a
-bounded detail surface, ignoring optional `threadRootId` hints. Completion requires
-the exact row to be visible and focused; unavailable targets never fall back to the
-channel head. Ingress adapters must reuse this validated target/completion lifecycle.
+sender's viewer; `bindSharedTarget` pins it for an admitted recipient. Messages also
+recognize legacy `buzz://channel/<id>` and
+`buzz://message?channel=<id>&id=<event>&thread=<optional-root>` links. Legacy links
+use the receiving conversation's community and viewer; shared versioned links
+retain their community and use the recipient's viewer. Both pass through existing
+navigation admission and session ownership checks. Message targets open their
+verified thread, reveal the exact message after bounded history loading, and only
+then acknowledge navigation. Supplied root hints do not override verified events.
+Missing or unavailable messages report failure. Ingress adapters must reuse this
+validated target/completion lifecycle. Native OS deep-link and notification-click
+ingress remain outside this slice.
 
 Drafts, reading geometry and sidebar view intent remain domain-owned, outside
 visit history. Saved sidebar preferences live in the relay session, not in the
@@ -294,6 +299,39 @@ mounted page; see [sidebar ownership](channels.md#ownership).
 
 ## Conversation contributions
 
+`registerLink({ id, title, matches, className?, component })` contributes optional
+presentation for links already recognized by messages. The host retains the anchor,
+destination, new-tab/modifier behavior and panel activation. Components receive
+`{ url }` and render non-interactive inline content inside that anchor. They must
+not nest links or buttons. The first active matching renderer wins; throwing
+matchers are skipped. A render failure or plugin removal restores the ordinary
+link, including its styling. Registration follows the existing plugin lifetime.
+
+The bundled Links plugin uses blue text, a blue fill only on hover, 2px padding
+4px corners, and service icons for GitHub, Google Drive, Figma, Notion, Slack,
+Dropbox, OneDrive, GitLab, YouTube, Loom, Zoom and Teams. Google Docs, Sheets and
+Slides use distinct file-type icons; unknown websites use a globe. Host matching
+does not fetch metadata or infer a service from names in paths or query strings.
+It does not fetch titles. Messages currently recognize
+credential-free HTTPS and supported Buzz links. Markdown labels preserve their
+formatting, escaped pasted wrappers are normalized outside code, and paired `<…>`
+autolink wrappers are hidden in display. Buzz links use known channel names with corresponding icons, falling back
+to Channel, Message or Thread when that name is unavailable in the current community;
+the full destination remains on the anchor. Buzz activation stays inside the host,
+including modifier/middle clicks, even when the optional Links plugin is disabled.
+Unsupported Buzz formats remain plain text. The host-matched author preview exports `LinkRenderer`; older hosts do not
+provide `registerLink`.
+
+Message hover/focus previews are host-owned. The entire card is a keyboard-accessible
+link to the same destination, routed through the same host navigation handler. Opening a preview allocates the current
+session's bounded thread reader; closing disposes it. The reader supplies verified
+message content, author and timestamp and preserves edit/deletion/access handling.
+Previewing never acknowledges reading or switches community. The host offers a
+resolved label to the bundled presentation via `LinkLabelContext`; no author API
+contract or relay protocol changes are required. Known channel references and
+unambiguous signed person/agent mentions share the inline hover styling. Names in
+ordinary prose never create notification intent or establish an identity.
+
 The conversation preview exposes top-level `registerTool`, `registerCompletion` and `registerInline`
 methods and stable `conversation.ui.Composer` / `.Message` components. Generated
 type-only `@buzz/author` declarations support the independent Composer Lab example.
@@ -311,6 +349,15 @@ same `registerTool` contract. No page imports their implementations. Optional nu
 keyboard order stable across asynchronous activation and re-enable. Mentions uses
 `-10` to retain its position before default-order tools such as Emoji.
 
+Links, channel references, selected mentions and custom emoji render through shared
+message components directly in the editable draft. Display tokens retain the exact authored source;
+copying and sending preserve that source. Arrow keys and deletion open adjacent
+links for ordinary text editing. Partially deleting a link keeps it plain during
+the editing session; double-click selects the link and triple-click selects its
+whole paragraph. The host owns source offsets, plain-text paste, composition, undo and
+selected recipient metadata. Token renderers are display-only while editing.
+Names pasted as text never create notification intent.
+
 Tools receive `insertText`, `insertMention({ pubkey, name })` and `focus` commands.
 Mention insertion atomically records visible text and exact notification intent;
 `true` means the edit was accepted, **not** that membership or delivery succeeded.
diff --git a/src/app/pages.integration.test.mjs b/src/app/pages.integration.test.mjs
index 73823f3e..1f9860e9 100644
--- a/src/app/pages.integration.test.mjs
+++ b/src/app/pages.integration.test.mjs
@@ -34,6 +34,19 @@ test("the app runtime exposes ready bundled pages and removes them on disable",
       assert.equal(services.conversation.tools.snapshot().length, 2),
     );
     assert.equal(services.conversation.inline.snapshot().length, 1);
+    await vi.waitFor(() =>
+      assert.equal(services.conversation.links.snapshot().length, 1),
+    );
+    assert.equal(
+      services.conversation.links.snapshot()[0].pluginId,
+      "buzz.links",
+    );
+    await services.plugins.change("disable", "buzz.links");
+    assert.equal(services.conversation.links.snapshot().length, 0);
+    await services.plugins.change("enable", "buzz.links");
+    await vi.waitFor(() =>
+      assert.equal(services.conversation.links.snapshot().length, 1),
+    );
     await services.plugins.change("disable", "buzz.emoji");
     assert.deepEqual(
       services.conversation.tools.snapshot().map((tool) => tool.pluginId),
diff --git a/src/bundled/channels/ChannelsPage.tsx b/src/bundled/channels/ChannelsPage.tsx
index fdcca17f..97a6c53b 100644
--- a/src/bundled/channels/ChannelsPage.tsx
+++ b/src/bundled/channels/ChannelsPage.tsx
@@ -1,6 +1,10 @@
 import { useChannelPanels } from "./useChannelPanels";
 import type { PageNavigation } from "../../features/navigation/service";
 import type { Navigation } from "../../features/navigation/controller";
+import {
+  buzzLinkTarget,
+  isBuzzLink,
+} from "../../features/navigation/buzz-links";
 import { UnreadBadge, UnreadOptions } from "./UnreadBadge";
 import { SidebarUnread } from "./SidebarUnread";
 import type { ConversationExtensions } from "../../features/conversation/contracts";
@@ -379,6 +383,23 @@ function ChannelWorkspace({
   }, [currentId, showingThread?.navigation]);
   const openLink = useCallback(
     (url: string) => {
+      if (isBuzzLink(url)) {
+        if (!navigator || !viewer) return false;
+        const target = buzzLinkTarget(url, {
+          viewer,
+          communityOrigin: scope.slice(0, -(viewer.length + 1)),
+        });
+        if (!target) return false;
+        if (target.kind === "conversation" && target.messageId)
+          threadTrigger.current =
+            document.activeElement instanceof HTMLElement
+              ? document.activeElement
+              : null;
+        setThread(undefined);
+        open(undefined);
+        void navigator.open(target);
+        return true;
+      }
       const candidate = panels.resolve(url);
       const context = linkContext.current;
       if (context.channelId && candidate) {
@@ -397,7 +418,7 @@ function ChannelWorkspace({
       }
       return false;
     },
-    [panels, open, select],
+    [panels, open, select, navigator, viewer, scope],
   );
   const panelActive = () => {
     const connection = relay.snapshot();
diff --git a/src/bundled/index.ts b/src/bundled/index.ts
index 8e4959a4..ec42f01c 100644
--- a/src/bundled/index.ts
+++ b/src/bundled/index.ts
@@ -21,11 +21,14 @@ import * as projects from "./projects";
 import workflowsManifest from "./workflows/manifest.json";
 import * as workflows from "./workflows";
 import type { BundledPlugin } from "../plugins/manager";
+import linksManifest from "./links/manifest.json";
+import * as links from "./links";
 
 export const bundledPlugins: readonly BundledPlugin[] = [
   { manifest: { ...activityManifest, apiVersion: 1 }, module: activity },
   { manifest: { ...terminalManifest, apiVersion: 1 }, module: terminal },
   { manifest: { ...profilesManifest, apiVersion: 1 }, module: profiles },
+  { manifest: { ...linksManifest, apiVersion: 1 }, module: links },
   { manifest: { ...mentionsManifest, apiVersion: 1 }, module: mentions },
   { manifest: { ...emojiManifest, apiVersion: 1 }, module: emoji },
   { manifest: { ...channelsManifest, apiVersion: 1 }, module: channels },
diff --git a/src/bundled/link-lab/LinkLab.module.css b/src/bundled/link-lab/LinkLab.module.css
new file mode 100644
index 00000000..6855a344
--- /dev/null
+++ b/src/bundled/link-lab/LinkLab.module.css
@@ -0,0 +1,51 @@
+.page {
+  max-width: 760px;
+  margin: 0 auto;
+  padding: 48px 24px;
+  font-family: var(--font-sans);
+  color: var(--text-primary);
+}
+
+.page h1 {
+  margin: 0 0 12px;
+}
+
+.intro,
+.status {
+  color: var(--text-secondary);
+}
+
+.samples {
+  margin-block: 40px;
+  display: grid;
+  gap: 32px;
+}
+
+.samples p {
+  margin: 8px 0 0;
+  font-size: var(--text-body-lg);
+  line-height: 1.8;
+}
+
+.label {
+  font-size: var(--text-body-sm);
+  color: var(--text-secondary);
+}
+
+.services {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px 18px;
+  margin-top: 12px;
+}
+
+.page input {
+  width: 100%;
+  margin: 10px 0;
+  padding: 10px 12px;
+  border: 1px solid var(--border-primary);
+  border-radius: 6px;
+  background: var(--bg-panel);
+  color: inherit;
+  font: inherit;
+}
diff --git a/src/bundled/link-lab/README.md b/src/bundled/link-lab/README.md
new file mode 100644
index 00000000..0242848d
--- /dev/null
+++ b/src/bundled/link-lab/README.md
@@ -0,0 +1,46 @@
+# Link Lab
+
+First visual experiment for link rendering, activated as a page plugin in the
+isolated `/tests/fixtures/link-lab.html` preview. Add `?theme=dark` for dark mode.
+Uses the design system's blue 11 text, blue 4 hover fill and Tabler icons.
+Links are transparent by default. Padding stays 2px on every side, including
+wrapped line fragments, with -2px inline margins so it adds no horizontal gap
+to surrounding text. Hovering does not move the surrounding text.
+Hover backgrounds have 4px corners. GitHub, Google Drive, Figma, Notion, Slack,
+Dropbox, OneDrive, GitLab, YouTube, Loom, Zoom and Teams use their service icons.
+Google Docs, Sheets and Slides use document, spreadsheet and presentation icons.
+Other websites use a globe. Icons use the same blue foreground and do not fetch
+favicons, titles or remote metadata.
+
+Recognition uses host boundaries and known short-link domains. OneDrive also
+recognizes Microsoft's documented
+[`<tenant>-my.sharepoint.com` hosts](https://learn.microsoft.com/en-us/sharepoint/list-onedrive-urls).
+Unknown or self-hosted service domains retain the globe icon.
+
+Sample activation stays in the preview. The separate bundled `buzz.links` plugin
+now applies the same component and CSS to HTTPS and supported Buzz links in messages.
+Buzz channel, message and thread links have distinct icons and use known channel
+names from the current community. Generic labels remain when names are unavailable.
+Hover or keyboard focus opens a clickable message preview with author and timestamp on one
+row beside the author's avatar, the channel below, and an excerpt clamped to four
+lines, ending early before a blank paragraph. The card opens the same destination
+with pointer or keyboard activation. Recency follows Buzz desktop's thread-summary ladder: just now, minutes,
+hours under 24 hours, days under seven days, then a short date. Hovering the time
+shows its full date and time. Hidden channels and
+DMs use a lock; other known channels use a hash. This creates a disposable, bounded session thread reader only while open;
+it does not mark messages read. Other-community previews do not connect or switch
+communities on hover. Mentions with signed recipient IDs and unambiguous loaded
+names share the hover styling; known local agent identities use a robot icon.
+Known channel names in `#channel` text open through the same host link path.
+Both legacy channel/message links and versioned `buzz://open` links are supported.
+The host opens them through scoped navigation; message links reveal the selected
+message in its verified thread after bounded history loading. Missing targets
+report navigation failure. The lab only previews their appearance.
+It uses `registerLink`, leaving the existing inline-text contract unchanged.
+The lab remains separate from the default catalog. No relay reads, signing, or
+persistence are involved in the preview.
+
+`/tests/fixtures/link-messages.html` exercises real message rows, plugin removal,
+failed rendering, labeled Markdown links, clickable previews, and plain fallback.
+`tests/browser/buzz-links.spec.mjs` covers scoped navigation and card activation in
+Chromium and WebKit. Run the contribution workflow's full batch scan before integration.
diff --git a/src/bundled/link-lab/index.tsx b/src/bundled/link-lab/index.tsx
new file mode 100644
index 00000000..6ed7b3d5
--- /dev/null
+++ b/src/bundled/link-lab/index.tsx
@@ -0,0 +1,166 @@
+import { useState } from "react";
+import type { PluginModule } from "../../plugins/api";
+import { targetLink } from "../../features/navigation/targets";
+import { InlineLink, linkKind } from "../links/InlineLink";
+import styles from "./LinkLab.module.css";
+
+export const inject = ["pages"];
+export const apply: PluginModule["apply"] = (ctx) => {
+  ctx.pages.register({ id: "link-lab", title: "Link Lab", component: LinkLab });
+};
+
+const buzz = targetLink({ version: 1, kind: "home" });
+const legacyChannel = "buzz://channel/c89a3185-29c5-40db-8284-054536d98b09";
+const legacyMessage =
+  "buzz://message?channel=c89a3185-29c5-40db-8284-054536d98b09&id=9a77911a6e94147b1ce2cdb3c4e87046c67a29f29f3dd25626134621a5f6924b";
+const thread = targetLink({
+  version: 1,
+  kind: "conversation",
+  scope: {
+    viewer: "1".repeat(64),
+    communityOrigin: "wss://buzz.block.builderlab.xyz",
+  },
+  channelId: "general",
+  messageId: "2".repeat(64),
+  threadRootId: "2".repeat(64),
+});
+
+const serviceSamples = [
+  ["Figma", "https://www.figma.com/design/example"],
+  ["Notion", "https://www.notion.so/example"],
+  ["Slack", "https://example.slack.com/archives/example"],
+  ["Dropbox", "https://www.dropbox.com/scl/fo/example"],
+  ["OneDrive", "https://1drv.ms/f/example"],
+  ["GitLab", "https://gitlab.com/example/project"],
+  ["YouTube", "https://youtu.be/example"],
+  ["Loom", "https://www.loom.com/share/example"],
+  ["Zoom", "https://us02web.zoom.us/j/example"],
+  ["Teams", "https://teams.microsoft.com/l/meetup-join/example"],
+] as const;
+
+function LinkLab() {
+  const [url, setUrl] = useState("https://github.com/block/buzz/pull/1234");
+  const [selected, setSelected] = useState(
+    "Select a sample to try its focus and hover states.",
+  );
+  const preview = (href: string, label?: string) => (
+    <InlineLink
+      href={href}
+      onClick={(event) => {
+        event.preventDefault();
+        setSelected(
+          `Selected: ${label ?? href}. This preview stays on the page.`,
+        );
+      }}
+    >
+      {label ?? href}
+    </InlineLink>
+  );
+  return (
+    <main className={styles.page}>
+      <h1 className="text-title">Link Lab</h1>
+      <p className={styles.intro}>
+        Blue text, a soft background on hover, and a little context from the
+        icon.
+      </p>
+      <div className={styles.samples}>
+        <section>
+          <span className={styles.label}>Web</span>
+          <p>
+            The details are on {preview("https://example.com", "example.com")}{" "}
+            if you want to take a look.
+          </p>
+        </section>
+        <section>
+          <span className={styles.label}>GitHub</span>
+          <p>
+            Ready for a look at{" "}
+            {preview(
+              "https://github.com/block/buzz/pull/1234",
+              "block/buzz #1234",
+            )}
+            ? The spacing is updated.
+          </p>
+        </section>
+        <section>
+          <span className={styles.label}>Google Drive</span>
+          <p>
+            Files live in{" "}
+            {preview(
+              "https://drive.google.com/drive/folders/example",
+              "the shared folder",
+            )}
+            , including{" "}
+            {preview(
+              "https://docs.google.com/document/d/example/edit",
+              "the project notes",
+            )}
+            ,{" "}
+            {preview(
+              "https://docs.google.com/spreadsheets/d/example/edit",
+              "the tracker",
+            )}
+            , and{" "}
+            {preview(
+              "https://docs.google.com/presentation/d/example/edit",
+              "the slide deck",
+            )}
+            .
+          </p>
+        </section>
+        <section>
+          <span className={styles.label}>More services</span>
+          <div className={styles.services}>
+            {serviceSamples.map(([label, href]) => (
+              <span key={href}>{preview(href, label)}</span>
+            ))}
+          </div>
+        </section>
+        <section>
+          <span className={styles.label}>
+            Buzz channels, messages and threads
+          </span>
+          <p>
+            Head back to {preview(buzz, "Buzz")} or pick up{" "}
+            {preview(thread, "the design discussion")}.
+          </p>
+          <p>
+            Older shared links work too: {preview(legacyChannel)},{" "}
+            {preview(legacyMessage)}, and{" "}
+            {preview(`${legacyMessage}&thread=${"2".repeat(64)}`)}.
+          </p>
+        </section>
+        <section>
+          <span className={styles.label}>Full URLs and wrapping</span>
+          <p>
+            Here's the reference:{" "}
+            {preview(
+              "https://github.com/block/buzz/issues/1234?view=conversation&filter=design-feedback",
+            )}
+            . Let me know what you think.
+          </p>
+        </section>
+        <section>
+          <label className={styles.label} htmlFor="link-url">
+            Try a URL
+          </label>
+          <input
+            id="link-url"
+            value={url}
+            onChange={(event) => setUrl(event.target.value)}
+            spellCheck={false}
+          />
+          <p>Take a look at {preview(url)}.</p>
+          {!linkKind(url) && (
+            <p className={styles.label}>
+              Enter an HTTP, HTTPS, or supported Buzz link.
+            </p>
+          )}
+        </section>
+      </div>
+      <p className={styles.status} role="status">
+        {selected}
+      </p>
+    </main>
+  );
+}
diff --git a/src/bundled/link-lab/manifest.json b/src/bundled/link-lab/manifest.json
new file mode 100644
index 00000000..1257c220
--- /dev/null
+++ b/src/bundled/link-lab/manifest.json
@@ -0,0 +1 @@
+{ "id": "buzz.link-lab", "name": "Link Lab", "apiVersion": 1 }
diff --git a/src/bundled/links/InlineLink.test.tsx b/src/bundled/links/InlineLink.test.tsx
new file mode 100644
index 00000000..3f6b0844
--- /dev/null
+++ b/src/bundled/links/InlineLink.test.tsx
@@ -0,0 +1,163 @@
+import { expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { targetLink } from "../../features/navigation/targets";
+import { InlineLink, LinkLabel, linkKind } from "./InlineLink";
+import {
+  LinkLabelContext,
+  LinkContentContext,
+} from "../../features/conversation/LinkLabelContext";
+
+it("identifies exact GitHub hosts, ordinary websites, and valid Buzz locators", () => {
+  expect(linkKind("https://github.com/block/buzz")).toBe("github");
+  expect(linkKind("https://github.com.example.com/block/buzz")).toBe("web");
+  expect(linkKind("https://example.com/github.com")).toBe("web");
+  expect(linkKind(targetLink({ version: 1, kind: "home" }))).toBe("buzz");
+  expect(
+    linkKind(
+      targetLink({
+        version: 1,
+        kind: "conversation",
+        scope: {
+          viewer: "1".repeat(64),
+          communityOrigin: "https://example.com",
+        },
+        channelId: "general",
+        messageId: "2".repeat(64),
+        threadRootId: "2".repeat(64),
+      }),
+    ),
+  ).toBe("thread");
+});
+
+it.each([
+  ["buzz://channel/general", "channel", "Channel"],
+  [`buzz://message?channel=general&id=${"a".repeat(64)}`, "message", "Message"],
+  [
+    `buzz://message?channel=general&id=${"a".repeat(64)}&thread=${"b".repeat(64)}`,
+    "thread",
+    "Thread",
+  ],
+])("renders semantic Buzz labels for %s", (href, kind, label) => {
+  const html = renderToStaticMarkup(<InlineLink href={href} />);
+  expect(html).toContain(`data-link-kind="${kind}"`);
+  expect(html.replace(/<[^>]+>/g, "")).toBe(label);
+  expect(html).toContain('href="buzz://');
+});
+
+it.each([
+  "javascript:alert(1)",
+  "data:text/html,hello",
+  "buzz://unknown",
+  "not a URL",
+])("leaves unsupported destinations as plain text: %s", (href) => {
+  expect(
+    renderToStaticMarkup(<InlineLink href={href}>Reference</InlineLink>),
+  ).toBe("Reference");
+});
+
+it("preserves the destination and readable full label", () => {
+  const href = "https://github.com/block/buzz/issues/1234";
+  const markup = renderToStaticMarkup(
+    <InlineLink href={href} target="_blank" rel="noreferrer" />,
+  );
+  expect(markup).toContain(`href="${href}"`);
+  expect(markup).toContain('data-kind="github"');
+  expect(markup).toContain('aria-hidden="true"');
+  expect(markup.replace(/<[^>]+>/g, "")).toBe(href);
+});
+
+it.each([
+  ["https://drive.google.com/drive/folders/example", "drive"],
+  ["https://docs.google.com/document/d/example/edit", "document"],
+  ["https://docs.google.com/spreadsheets/d/example/edit", "spreadsheet"],
+  ["https://docs.google.com/presentation/d/example/edit", "presentation"],
+  ["https://docs.google.com/forms/d/example/edit", "drive"],
+])("recognizes Google Drive file types: %s", (url, kind) => {
+  expect(linkKind(url)).toBe(kind);
+});
+
+it.each([
+  ["https://www.figma.com/design/example", "figma"],
+  ["https://www.notion.so/example", "notion"],
+  ["https://team.notion.site/example", "notion"],
+  ["https://workspace.slack.com/archives/example", "slack"],
+  ["https://app.slack.com/client/example", "slack"],
+  ["https://www.dropbox.com/scl/fi/example", "dropbox"],
+  ["https://db.tt/example", "dropbox"],
+  ["https://onedrive.live.com/?id=example", "onedrive"],
+  ["https://1drv.ms/w/example", "onedrive"],
+  ["https://example-my.sharepoint.com/personal/example", "onedrive"],
+  ["https://example.sharepoint.com/sites/example", "web"],
+  ["https://example-my.sharepoint.com.evil.test/personal/example", "web"],
+  ["https://gitlab.com/example/project", "gitlab"],
+  ["https://www.youtube.com/watch?v=example", "youtube"],
+  ["https://youtu.be/example", "youtube"],
+  ["https://www.loom.com/share/example", "loom"],
+  ["https://us02web.zoom.us/j/example", "zoom"],
+  ["https://zoom.com/j/example", "zoom"],
+  ["https://teams.microsoft.com/l/meetup-join/example", "teams"],
+  ["https://teams.live.com/meet/example", "teams"],
+  ["https://teams.cloud.microsoft/l/meetup-join/example", "teams"],
+])("renders the service icon for %s", (href, kind) => {
+  expect(linkKind(href)).toBe(kind);
+  const markup = renderToStaticMarkup(<InlineLink href={href} />);
+  expect(markup).toContain(`data-link-kind="${kind}"`);
+  expect(markup).toContain(`href="${href}"`);
+});
+
+it.each([44, 45, 46, 200])(
+  "caps raw URL labels at 45 characters (source length %i)",
+  (length) => {
+    const href = "https://figma.com/design/".padEnd(length, "a");
+    const markup = renderToStaticMarkup(<InlineLink href={href} />);
+    const text = markup.replace(/<[^>]+>/g, "");
+    expect(markup).toContain(`href="${href}"`);
+    expect(text).toBe(length <= 45 ? href : `${href.slice(0, 44)}…`);
+  },
+);
+
+it("preserves authored labels on long URLs", () => {
+  const href = `https://figma.com/design/${"a".repeat(100)}`;
+  const label = "View the full design and all of the discussion notes";
+  const markup = renderToStaticMarkup(
+    <InlineLink href={href}>{label}</InlineLink>,
+  );
+  expect(markup.replace(/<[^>]+>/g, "")).toBe(label);
+  expect(markup).toContain(`href="${href}"`);
+});
+
+it("truncates a Unicode URL when Markdown encodes its destination", () => {
+  const label =
+    "https://www.figma.com/design/example/Builderlab-—-Branding?node-id=1119-21207";
+  const href = new URL(label).href;
+  const markup = renderToStaticMarkup(
+    <LinkLabelContext value={label}>
+      <LinkContentContext value={[label]}>
+        <LinkLabel href={href} />
+      </LinkContentContext>
+    </LinkLabelContext>,
+  );
+  expect(markup.replace(/<[^>]+>/g, "")).toBe(`${label.slice(0, 44)}…`);
+});
+
+it.each([
+  "figma.com",
+  "notion.so",
+  "slack.com",
+  "dropbox.com",
+  "onedrive.live.com",
+  "gitlab.com",
+  "youtube.com",
+  "loom.com",
+  "zoom.us",
+  "teams.microsoft.com",
+])("does not brand lookalike destinations for %s", (host) => {
+  expect(linkKind(`https://${host}.example.com/file`)).toBe("web");
+  expect(linkKind(`https://fake${host}/file`)).toBe("web");
+  expect(linkKind(`https://example.com/${host}`)).toBe("web");
+  expect(linkKind(`https://${host}@example.com/file`)).toBe("web");
+});
+it("does not mistake lookalike hosts or URL paths for Google Drive", () => {
+  expect(linkKind("https://drive.google.com.example.com/file")).toBe("web");
+  expect(linkKind("https://example.com/drive.google.com")).toBe("web");
+});
diff --git a/src/bundled/links/InlineLink.tsx b/src/bundled/links/InlineLink.tsx
new file mode 100644
index 00000000..b7696989
--- /dev/null
+++ b/src/bundled/links/InlineLink.tsx
@@ -0,0 +1,171 @@
+import {
+  IconBrandGithub,
+  IconBrandGoogleDrive,
+  IconBrandFigma,
+  IconBrandNotion,
+  IconBrandSlack,
+  IconBrandDropbox,
+  IconBrandOnedrive,
+  IconBrandGitlab,
+  IconBrandYoutube,
+  IconBrandLoom,
+  IconBrandZoom,
+  IconBrandTeams,
+  IconFileText,
+  IconFileSpreadsheet,
+  IconPresentation,
+  IconWorld,
+  IconMessageCircle,
+  IconMessages,
+  IconHash,
+} from "@tabler/icons-react";
+import { useContext, type ComponentProps } from "react";
+import {
+  LinkLabelContext,
+  LinkContentContext,
+} from "../../features/conversation/LinkLabelContext";
+import { buzzLinkKind } from "../../features/navigation/buzz-links";
+import styles from "../../shared/InlineReference.module.css";
+
+// Match actual host boundaries, never a service name found in a path or query.
+const serviceHosts = {
+  github: ["github.com"],
+  figma: ["figma.com"],
+  notion: ["notion.so", "notion.site"],
+  slack: ["slack.com"],
+  dropbox: ["dropbox.com", "dropboxusercontent.com", "db.tt"],
+  onedrive: ["onedrive.live.com", "1drv.ms"],
+  gitlab: ["gitlab.com"],
+  youtube: ["youtube.com", "youtu.be"],
+  loom: ["loom.com"],
+  zoom: ["zoom.us", "zoom.com"],
+  teams: ["teams.microsoft.com", "teams.live.com", "teams.cloud.microsoft"],
+} as const;
+
+export function linkKind(href: string) {
+  try {
+    const url = new URL(href);
+    if (url.protocol === "buzz:") {
+      return buzzLinkKind(href);
+    }
+    if (url.protocol !== "https:" && url.protocol !== "http:") return null;
+    // Microsoft's OneDrive for Business host shape; ordinary SharePoint stays generic.
+    if (/^[a-z0-9-]+-my\.sharepoint\.com$/.test(url.hostname))
+      return "onedrive";
+    if (url.hostname === "drive.google.com") return "drive";
+    if (url.hostname === "docs.google.com") {
+      const product = url.pathname.split("/")[1];
+      if (product === "document") return "document";
+      if (product === "spreadsheets") return "spreadsheet";
+      if (product === "presentation") return "presentation";
+      return "drive";
+    }
+    for (const kind of Object.keys(
+      serviceHosts,
+    ) as (keyof typeof serviceHosts)[]) {
+      if (
+        serviceHosts[kind].some(
+          (host) => url.hostname === host || url.hostname.endsWith(`.${host}`),
+        )
+      )
+        return kind;
+    }
+    return "web";
+  } catch {
+    return null;
+  }
+}
+
+const icons = {
+  web: IconWorld,
+  github: IconBrandGithub,
+  drive: IconBrandGoogleDrive,
+  figma: IconBrandFigma,
+  notion: IconBrandNotion,
+  slack: IconBrandSlack,
+  dropbox: IconBrandDropbox,
+  onedrive: IconBrandOnedrive,
+  gitlab: IconBrandGitlab,
+  youtube: IconBrandYoutube,
+  loom: IconBrandLoom,
+  zoom: IconBrandZoom,
+  teams: IconBrandTeams,
+  document: IconFileText,
+  spreadsheet: IconFileSpreadsheet,
+  presentation: IconPresentation,
+  buzz: IconMessageCircle,
+  channel: IconHash,
+  message: IconMessageCircle,
+  thread: IconMessages,
+};
+
+/** Anchor wrapper for the isolated lab; messages use LinkLabel in a host-owned anchor. */
+export function InlineLink({
+  href,
+  children,
+  ...props
+}: Omit<ComponentProps<"a">, "className" | "children"> & {
+  href: string;
+  children?: string;
+}) {
+  const kind = linkKind(href);
+  if (!kind) return <>{children ?? href}</>;
+  return (
+    <a {...props} href={href} className={styles.link} data-kind={kind}>
+      <LinkLabel href={href} label={children ?? href} />
+    </a>
+  );
+}
+
+export function LinkLabel({
+  href,
+  label = href,
+}: {
+  href: string;
+  label?: string;
+}) {
+  const contextualLabel = useContext(LinkLabelContext);
+  const content = useContext(LinkContentContext);
+  const kind = linkKind(href);
+  if (!kind) return <>{label}</>;
+  if (label === href && contextualLabel) label = contextualLabel;
+  if (label === href) {
+    if (kind === "channel") label = "Channel";
+    else if (kind === "message") label = "Message";
+    else if (kind === "thread") label = "Thread";
+    else if (kind === "buzz") label = "Buzz";
+  }
+  // The channel icon already supplies the visual hash.
+  if (kind === "channel" && label.startsWith("#")) label = label.slice(1);
+  // Markdown encodes Unicode in destinations while retaining it in visible text.
+  const rawDestination =
+    label === href ||
+    (linkKind(label) !== null && new URL(label).href === new URL(href).href);
+  const Icon = icons[kind];
+  if (content !== undefined && !rawDestination)
+    return (
+      <span data-link-kind={kind}>
+        <Icon aria-hidden="true" className={styles.icon} />
+        {content}
+      </span>
+    );
+  // Shorten only raw destinations; authored labels and resolved channel names stay intact.
+  if (rawDestination) {
+    const characters = Array.from(label);
+    if (characters.length > 45) label = `${characters.slice(0, 44).join("")}…`;
+  }
+  // Keep the icon with the start of its label.
+  const lead = (label.match(/^(?:https?:\/\/)?[^/\s]+/)?.[0] ?? label).slice(
+    0,
+    24,
+  );
+  return (
+    <span data-link-kind={kind}>
+      <span className={styles.lead}>
+        <Icon aria-hidden="true" className={styles.icon} />
+        {lead}
+      </span>
+      {label.slice(lead.length)}
+    </span>
+  );
+}
diff --git a/src/bundled/links/index.tsx b/src/bundled/links/index.tsx
new file mode 100644
index 00000000..d728093e
--- /dev/null
+++ b/src/bundled/links/index.tsx
@@ -0,0 +1,14 @@
+import type { PluginModule } from "../../plugins/api";
+import { LinkLabel, linkKind } from "./InlineLink";
+import styles from "../../shared/InlineReference.module.css";
+
+export const inject = ["conversation"];
+export const apply: PluginModule["apply"] = (ctx) => {
+  ctx.conversation.registerLink({
+    id: "links",
+    title: "Links",
+    matches: (url) => linkKind(url) !== null,
+    className: styles.link,
+    component: ({ url }) => <LinkLabel href={url} />,
+  });
+};
diff --git a/src/bundled/links/manifest.json b/src/bundled/links/manifest.json
new file mode 100644
index 00000000..139231a0
--- /dev/null
+++ b/src/bundled/links/manifest.json
@@ -0,0 +1 @@
+{ "id": "buzz.links", "name": "Links", "apiVersion": 1 }
diff --git a/src/features/conversation/BuzzLinkPreview.test.tsx b/src/features/conversation/BuzzLinkPreview.test.tsx
new file mode 100644
index 00000000..e47db2a5
--- /dev/null
+++ b/src/features/conversation/BuzzLinkPreview.test.tsx
@@ -0,0 +1,253 @@
+import { beforeEach, expect, it, vi } from "vitest";
+import { isValidElement, type ReactElement, type ReactNode } from "react";
+import { BuzzLinkPreview } from "./BuzzLinkPreview";
+import type { RelaySession } from "../relay/session";
+import type { ThreadSnapshot, ThreadView } from "../relay/threads";
+import type { ChannelMessage } from "../relay/contracts";
+
+// Shallow production-boundary checks. These invoke returned handlers and effect
+// lifetimes; they do not claim browser layout, focus, or React StrictMode validation.
+const hooks = vi.hoisted(() => ({
+  refs: [] as { current: unknown }[],
+  ref: 0,
+  states: [] as unknown[],
+  index: 0,
+  effects: [] as {
+    deps: readonly unknown[];
+    cleanup?: (() => void) | undefined;
+  }[],
+  effect: 0,
+  pending: [] as (() => void)[],
+}));
+vi.mock("react", async (original) => ({
+  ...(await original<typeof import("react")>()),
+  useRef(initial: unknown) {
+    const index = hooks.ref++;
+    hooks.refs[index] ??= { current: initial };
+    return hooks.refs[index];
+  },
+  useState(initial: unknown) {
+    const index = hooks.index++;
+    if (!(index in hooks.states)) hooks.states[index] = initial;
+    return [
+      hooks.states[index],
+      (next: unknown) => {
+        hooks.states[index] =
+          typeof next === "function" ? next(hooks.states[index]) : next;
+      },
+    ];
+  },
+  useEffect(create: () => (() => void) | undefined, deps: readonly unknown[]) {
+    const index = hooks.effect++;
+    const old = hooks.effects[index];
+    if (!old || deps.some((value, i) => value !== old.deps[i]))
+      hooks.pending.push(() => {
+        old?.cleanup?.();
+        hooks.effects[index] = { deps, cleanup: create() };
+      });
+  },
+  useSyncExternalStore: (_subscribe: unknown, snapshot: () => unknown) =>
+    snapshot(),
+}));
+beforeEach(() =>
+  Object.assign(hooks, {
+    refs: [],
+    ref: 0,
+    states: [],
+    index: 0,
+    effects: [],
+    effect: 0,
+    pending: [],
+  }),
+);
+function elements(node: ReactNode): ReactElement<Record<string, unknown>>[] {
+  if (Array.isArray(node)) return node.flatMap(elements);
+  if (!isValidElement<Record<string, unknown>>(node)) return [];
+  return [node, ...elements(node.props.children as ReactNode)];
+}
+function text(node: ReactNode) {
+  return elements(node)
+    .filter((e) => e.props.role === "status")
+    .map((e) => e.props.children)
+    .join("");
+}
+const root: ChannelMessage = {
+  id: "a".repeat(64),
+  channelId: "channel",
+  authorId: "b".repeat(64),
+  content: "reconciled body",
+  createdAt: 1,
+  mentions: [],
+  participants: [],
+  attachments: [],
+  reactions: [],
+  replyCount: 0,
+};
+function setup(snapshot: ThreadSnapshot, messageId = root.id) {
+  Object.assign(hooks, {
+    refs: [],
+    ref: 0,
+    states: [],
+    index: 0,
+    effects: [],
+    effect: 0,
+    pending: [],
+  });
+  const view = {
+    snapshot: () => snapshot,
+    subscribe: () => () => {},
+    refresh: vi.fn(async () => {}),
+    loadMore: vi.fn(async () => {}),
+    dispose: vi.fn(),
+  } satisfies ThreadView;
+  const thread = vi.fn(() => view);
+  const session = {
+    thread,
+    profiles: {
+      subscribe: () => () => {},
+      snapshot: () => new Map(),
+      ensure: vi.fn(async () => {}),
+    },
+    channels: {
+      subscribeList: () => () => {},
+      list: () => ({ channels: [{ id: "channel", name: "General" }] }),
+    },
+    media: () => undefined,
+  } as unknown as RelaySession;
+  hooks.ref = hooks.index = hooks.effect = 0;
+  BuzzLinkPreview({
+    session,
+    channelId: "channel",
+    messageId,
+  });
+  for (const effect of hooks.pending.splice(0)) effect();
+  // Re-render the outer component now that the effect allocated the view, then
+  // drive the inner PreviewContent with the shared hook registers.
+  hooks.ref = hooks.index = hooks.effect = 0;
+  const rendered = BuzzLinkPreview({
+    session,
+    channelId: "channel",
+    messageId,
+  }) as ReactElement;
+  const child = elements(rendered).find((e) => typeof e.type === "function");
+  if (!child) throw new Error("Missing preview content");
+  hooks.ref = hooks.index = hooks.effect = 0;
+  const render = child.type as (props: unknown) => ReactElement;
+  const tree = render(child.props);
+  for (const effect of hooks.pending.splice(0)) effect();
+  return { tree, thread };
+}
+const base: ThreadSnapshot = {
+  status: "idle",
+  root: undefined,
+  replies: [],
+  error: undefined,
+  canLoadMore: false,
+  limited: false,
+};
+it("does not paint the seed root until the snapshot reconciles edits and deletions", () => {
+  // A seeded but still-loading view exposes the raw root; a cached deletion or
+  // edit is a different event that only folds in once the read reaches "ready".
+  const seeded = setup({
+    ...base,
+    status: "loading",
+    root,
+    canLoadMore: true,
+  }).tree;
+  expect(text(seeded)).toBe("Loading message…");
+  expect(elements(seeded).some((e) => e.type === "strong")).toBe(false);
+  const idleSeed = setup({ ...base, status: "idle", root }).tree;
+  expect(text(idleSeed)).toBe("Loading message…");
+  const ready = setup({ ...base, status: "ready", root }).tree;
+  expect(elements(ready).some((e) => e.type === "strong")).toBe(true);
+});
+it("reports terminal unavailability instead of loading forever", () => {
+  // purge() on a denied or revoked channel publishes idle + an error string,
+  // never status "error"; the card must still stop.
+  const denied = setup({
+    ...base,
+    status: "idle",
+    error: "This channel is no longer available.",
+  }).tree;
+  expect(text(denied)).toBe("Message preview unavailable.");
+  const failed = setup({
+    ...base,
+    status: "error",
+    error: "read failed",
+  }).tree;
+  expect(text(failed)).toBe("Message preview unavailable.");
+  const exhausted = setup({
+    ...base,
+    status: "ready",
+    root: undefined,
+  }).tree;
+  expect(text(exhausted)).toBe("Message preview unavailable.");
+});
+it("keeps loading while a read is genuinely in flight", () => {
+  const loading = setup({
+    ...base,
+    status: "loading",
+    canLoadMore: true,
+  }).tree;
+  expect(text(loading)).toBe("Loading message…");
+});
+it("renders the exact target independently of bounded thread replies", () => {
+  const target = {
+    ...root,
+    id: "c".repeat(64),
+    content: "reply beyond bounded traversal",
+    threadRootId: root.id,
+  };
+  const result = setup(
+    {
+      ...base,
+      status: "ready",
+      root,
+      target,
+      targetStatus: "ready",
+    },
+    target.id,
+  );
+  expect(result.thread).toHaveBeenCalledWith("channel", target.id, {
+    exact: true,
+  });
+  expect(
+    elements(result.tree).some(
+      (element) => element.props.children === "reply beyond bounded traversal",
+    ),
+  ).toBe(true);
+});
+it("renders a reconciled exact target when its thread root is unavailable", () => {
+  const target = {
+    ...root,
+    id: "c".repeat(64),
+    content: "reply with unavailable root",
+    threadRootId: root.id,
+  };
+  const result = setup(
+    {
+      ...base,
+      status: "error",
+      error: "Thread root is unavailable.",
+      target,
+      targetStatus: "ready",
+    },
+    target.id,
+  );
+  expect(
+    elements(result.tree).some(
+      (element) => element.props.children === "reply with unavailable root",
+    ),
+  ).toBe(true);
+});
+it("fails safely when an exact target timestamp is outside Date range", () => {
+  const target = { ...root, createdAt: 8_640_000_000_001 };
+  const result = setup({
+    ...base,
+    status: "ready",
+    root,
+    target,
+    targetStatus: "ready",
+  });
+  expect(text(result.tree)).toBe("Message preview unavailable.");
+});
diff --git a/src/features/conversation/BuzzLinkPreview.tsx b/src/features/conversation/BuzzLinkPreview.tsx
new file mode 100644
index 00000000..f81b21e6
--- /dev/null
+++ b/src/features/conversation/BuzzLinkPreview.tsx
@@ -0,0 +1,144 @@
+import { useEffect, useState, useSyncExternalStore } from "react";
+import type { RelaySession } from "../relay/session";
+import type { ThreadView } from "../relay/threads";
+import { IconHash, IconLock } from "@tabler/icons-react";
+import { Avatar } from "../../shared/design-system/ui/Avatar";
+import { relativeTimestamp } from "../../shared/relative-timestamp";
+import styles from "./LinkPreview.module.css";
+import { messagePreviewText } from "./message-preview-text";
+
+/** Mounted only while a preview is open. The session owns access, edits and deletion. */
+export function BuzzLinkPreview({
+  session,
+  channelId,
+  messageId,
+}: {
+  session: RelaySession;
+  channelId: string;
+  messageId: string;
+}) {
+  const [view, setView] = useState<ThreadView>();
+  const [error, setError] = useState(false);
+  useEffect(() => {
+    try {
+      const owned = session.thread(channelId, messageId, { exact: true });
+      setView(owned);
+      void owned.refresh();
+      return () => owned.dispose();
+    } catch {
+      setError(true);
+    }
+  }, [session, channelId, messageId]);
+  if (error) return <span role="status">Message preview unavailable.</span>;
+  return view ? (
+    <PreviewContent view={view} session={session} messageId={messageId} />
+  ) : (
+    <span role="status">Loading message…</span>
+  );
+}
+
+function PreviewContent({
+  view,
+  session,
+  messageId,
+}: {
+  view: ThreadView;
+  session: RelaySession;
+  messageId: string;
+}) {
+  const snapshot = useSyncExternalStore(
+    view.subscribe,
+    view.snapshot,
+    view.snapshot,
+  );
+  const target =
+    snapshot.target?.id === messageId ? snapshot.target : undefined;
+  const message =
+    target ??
+    [snapshot.root, ...snapshot.replies].find((row) => row?.id === messageId);
+  const profiles = useSyncExternalStore(
+    session.profiles.subscribe,
+    session.profiles.snapshot,
+    session.profiles.snapshot,
+  );
+  const channels = useSyncExternalStore(
+    session.channels.subscribeList,
+    session.channels.list,
+    session.channels.list,
+  );
+  const authorId = message?.authorId;
+  useEffect(() => {
+    if (authorId)
+      void session.profiles.ensure([authorId], "background").catch(() => {});
+  }, [session, authorId]);
+  // Only paint reconciled content: a ready exact target is independent of its
+  // thread root, while an idle/loading root seed is still the raw event.
+  // A terminal state (read error, denied/interrupted purge, or an exhausted
+  // read that never found the target) fails honestly instead of loading forever.
+  const stopped =
+    snapshot.status === "error" ||
+    snapshot.targetStatus === "error" ||
+    snapshot.targetStatus === "unavailable" ||
+    (snapshot.status === "idle" && snapshot.error !== undefined) ||
+    (snapshot.status === "ready" && !message && !snapshot.canLoadMore);
+  const ready = target
+    ? snapshot.targetStatus === "ready"
+    : snapshot.status === "ready";
+  if (!ready || !message)
+    return (
+      <span role="status">
+        {stopped ? "Message preview unavailable." : "Loading message…"}
+      </span>
+    );
+  const profile = profiles.get(message.authorId);
+  const name = profile?.name ?? message.authorId.slice(0, 10);
+  const date = new Date(message.createdAt * 1000);
+  if (!Number.isFinite(date.getTime()))
+    return <span role="status">Message preview unavailable.</span>;
+  const channel = channels.channels.find(
+    (item) => item.id === message.channelId,
+  );
+  const channelName =
+    channel?.channelType === "dm" && channel.participants
+      ? channel.participants
+          .map((id) => profiles.get(id)?.name ?? id.slice(0, 10))
+          .join(", ") || "Notes to self"
+      : (channel?.name ?? "Channel unavailable");
+  const ChannelIcon =
+    channel?.hidden || channel?.channelType === "dm" ? IconLock : IconHash;
+  return (
+    <>
+      <span className={styles.byline}>
+        <Avatar
+          alt={name}
+          fallback={name}
+          src={
+            profile?.picture ? (session.media(profile.picture) ?? null) : null
+          }
+        />
+        <span className={styles.metadata}>
+          <span className={styles.author}>
+            <strong>{name}</strong>
+            <time
+              dateTime={date.toISOString()}
+              title={date.toLocaleString(undefined, {
+                dateStyle: "full",
+                timeStyle: "short",
+              })}
+            >
+              {relativeTimestamp(message.createdAt)}
+            </time>
+          </span>
+          <span className={styles.channel}>
+            {channel && <ChannelIcon aria-hidden="true" size={13} />}
+            <span>{channelName}</span>
+          </span>
+        </span>
+      </span>
+      <span className={styles.message}>
+        {messagePreviewText(message.content) ||
+          (message.attachments.length ? "Attachment" : "Empty message")}
+      </span>
+    </>
+  );
+}
diff --git a/src/features/conversation/ComposerCompletions.tsx b/src/features/conversation/ComposerCompletions.tsx
index cdb9ed45..b13e0386 100644
--- a/src/features/conversation/ComposerCompletions.tsx
+++ b/src/features/conversation/ComposerCompletions.tsx
@@ -1,3 +1,4 @@
+import type { ComposerInputElement } from "../messages/composer-dom";
 import { createPortal } from "react-dom";
 import { useCompletionPosition } from "./useCompletionPosition";
 import {
@@ -36,7 +37,7 @@ export function ComposerCompletions({
 }: CompletionContext & {
   registry: ContributionReader<ComposerCompletion>;
   editor: CompletionEditor;
-  input: RefObject<HTMLTextAreaElement | null>;
+  input: RefObject<ComposerInputElement | null>;
   replace(
     edit: CompletionEdit,
     query: CompletionQuery,
@@ -94,7 +95,7 @@ function OwnedCompletion({
   query: CompletionQuery;
   observation: ComposerObservation;
   editor: CompletionEditor;
-  input: RefObject<HTMLTextAreaElement | null>;
+  input: RefObject<ComposerInputElement | null>;
   replace(
     edit: CompletionEdit,
     query: CompletionQuery,
diff --git a/src/features/conversation/LinkLabelContext.ts b/src/features/conversation/LinkLabelContext.ts
new file mode 100644
index 00000000..df1fcc78
--- /dev/null
+++ b/src/features/conversation/LinkLabelContext.ts
@@ -0,0 +1,7 @@
+import { createContext, type ReactNode } from "react";
+
+/** Optional host-resolved display label; presentation never resolves a destination. */
+export const LinkLabelContext = createContext<string | undefined>(undefined);
+
+/** Authored Markdown formatting stays inside the host anchor. */
+export const LinkContentContext = createContext<ReactNode>(undefined);
diff --git a/src/features/conversation/LinkPreview.module.css b/src/features/conversation/LinkPreview.module.css
new file mode 100644
index 00000000..6b3bc43a
--- /dev/null
+++ b/src/features/conversation/LinkPreview.module.css
@@ -0,0 +1,71 @@
+.popup {
+  /* Content layout; the shared PreviewCard owns surface, border and elevation. */
+  --radius-control: var(--corner-control);
+  width: min(340px, calc(100vw - 24px));
+  max-width: calc(100vw - 24px);
+  max-height: min(320px, var(--available-height));
+  overflow: auto;
+  padding: var(--space-3);
+  gap: var(--space-2);
+  color: var(--text-primary);
+  font-size: var(--text-body);
+  line-height: var(--text-body--line-height);
+  letter-spacing: var(--text-body--letter-spacing);
+  font-weight: var(--text-body--font-weight);
+}
+.byline {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.metadata {
+  flex: 1;
+  min-width: 0;
+}
+.author {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-1);
+}
+.byline strong {
+  font-weight: var(--type-weight-semibold);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.byline time {
+  flex-shrink: 0;
+  font-size: var(--text-body-sm);
+  line-height: var(--text-body-sm--line-height);
+  letter-spacing: var(--text-body-sm--letter-spacing);
+  font-weight: var(--text-body-sm--font-weight);
+  color: var(--text-secondary);
+}
+.channel {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  margin-top: -2px;
+  font-size: var(--text-body-sm);
+  line-height: var(--text-body-sm--line-height);
+  letter-spacing: var(--text-body-sm--letter-spacing);
+  font-weight: var(--text-body-sm--font-weight);
+  color: var(--text-secondary);
+}
+.channel svg {
+  flex-shrink: 0;
+}
+.channel > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.message {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
diff --git a/src/features/conversation/MessageLink.test.tsx b/src/features/conversation/MessageLink.test.tsx
new file mode 100644
index 00000000..9836b5a5
--- /dev/null
+++ b/src/features/conversation/MessageLink.test.tsx
@@ -0,0 +1,44 @@
+import { expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import type { Contribution } from "../../plugins/contributions";
+import type { LinkRenderer } from "./contracts";
+import { MessageLink, resolveLink } from "./MessageLink";
+
+const entry: Contribution<LinkRenderer> = {
+  id: "link",
+  title: "Link",
+  key: "test/link",
+  pluginId: "test",
+  revision: "one",
+  matches: () => true,
+  className: "link-style",
+  component: () => <span>Link face</span>,
+};
+const url = "https://example.com/path?query=yes";
+it("keeps anchor destination and host semantics with and without presentation", () => {
+  const registry = { snapshot: () => [entry], subscribe: () => () => {} };
+  const html = renderToStaticMarkup(
+    <MessageLink url={url} registry={registry} onOpenLink={() => true} />,
+  );
+  expect(html).toContain(`href="${url}"`);
+  expect(html).toContain('target="_blank"');
+  expect(html).toContain('rel="noopener noreferrer"');
+  expect(html).toContain('class="link-style"');
+  expect(html).toContain("Link face");
+  const fallback = renderToStaticMarkup(
+    <MessageLink url={url} registry={undefined} onOpenLink={() => true} />,
+  );
+  expect(fallback).toContain(`>${url}</a>`);
+  expect(fallback).not.toContain("data-link-renderer");
+});
+it("skips throwing and unmatched renderers, with first matching presentation winning", () => {
+  const broken = {
+    ...entry,
+    matches() {
+      throw new Error("matcher failed");
+    },
+  };
+  const miss = { ...entry, matches: () => false };
+  expect(resolveLink(url, [broken, miss, entry, { ...entry }])).toBe(entry);
+  expect(resolveLink(url, [broken, miss])).toBeUndefined();
+});
diff --git a/src/features/conversation/MessageLink.tsx b/src/features/conversation/MessageLink.tsx
new file mode 100644
index 00000000..37dbcabb
--- /dev/null
+++ b/src/features/conversation/MessageLink.tsx
@@ -0,0 +1,184 @@
+import {
+  useRef,
+  useState,
+  useSyncExternalStore,
+  type ReactNode,
+  type MouseEvent,
+} from "react";
+import type { Contribution } from "../../plugins/contributions";
+import type { ContributionReader, LinkRenderer } from "./contracts";
+import { ContributionBoundary, contributionKey } from "./ContributionBoundary";
+import { PreviewCard } from "../../shared/design-system/ui/PreviewCard";
+import type { RelaySession } from "../relay/session";
+import { parseBuzzLink, isBuzzLink } from "../navigation/buzz-links";
+import { LinkLabelContext, LinkContentContext } from "./LinkLabelContext";
+import { BuzzLinkPreview } from "./BuzzLinkPreview";
+import { messageViewKey } from "../messages/view-key";
+import styles from "./LinkPreview.module.css";
+
+const empty: readonly Contribution<LinkRenderer>[] = [];
+const snapshot = () => empty;
+const subscribe = () => () => {};
+
+/** First active match wins, like panels. A broken matcher leaves other candidates eligible. */
+export function resolveLink(
+  url: string,
+  renderers: readonly Contribution<LinkRenderer>[],
+) {
+  for (const renderer of renderers) {
+    try {
+      if (renderer.matches(url)) return renderer;
+    } catch {
+      // An optional renderer must not prevent opening a link.
+    }
+  }
+  return undefined;
+}
+
+export function MessageLink({
+  url,
+  children,
+  registry,
+  onOpenLink,
+  label,
+  session,
+  scope,
+  interactive = true,
+}: {
+  url: string;
+  children?: ReactNode;
+  registry: ContributionReader<LinkRenderer> | undefined;
+  onOpenLink(url: string): boolean;
+  label?: string | undefined;
+  session?: RelaySession | undefined;
+  scope?: string | undefined;
+  interactive?: boolean;
+}) {
+  const renderers = useSyncExternalStore(
+    registry?.subscribe ?? subscribe,
+    registry?.snapshot ?? snapshot,
+    registry?.snapshot ?? snapshot,
+  );
+  const renderer = resolveLink(url, renderers);
+  const [unavailable, setUnavailable] = useState(false);
+  const [previewOpen, setPreviewOpen] = useState(false);
+  const trigger = useRef<HTMLAnchorElement>(null);
+  const internal = isBuzzLink(url);
+  const parsed = internal ? parseBuzzLink(url) : null;
+  const destination =
+    parsed?.format === "legacy"
+      ? parsed
+      : parsed?.target.kind === "conversation" &&
+          scope?.slice(0, -65) === parsed.target.scope.communityOrigin
+        ? parsed.target
+        : undefined;
+  const preview =
+    session && destination?.messageId
+      ? { channelId: destination.channelId, messageId: destination.messageId }
+      : undefined;
+  const navigation = {
+    target: "_blank",
+    rel: "noopener noreferrer",
+    onClick: (event: MouseEvent<HTMLAnchorElement>) => {
+      if (internal) {
+        event.preventDefault();
+        if (trigger.current?.isConnected)
+          trigger.current.focus({ preventScroll: true });
+        const opened = onOpenLink(url);
+        setUnavailable(!opened);
+        if (opened) setPreviewOpen(false);
+        return;
+      }
+      if (
+        !event.metaKey &&
+        !event.ctrlKey &&
+        !event.shiftKey &&
+        !event.altKey &&
+        onOpenLink(url)
+      )
+        event.preventDefault();
+    },
+    onAuxClick: internal
+      ? (event: MouseEvent<HTMLAnchorElement>) => {
+          if (event.button === 1) {
+            event.preventDefault();
+            if (trigger.current?.isConnected)
+              trigger.current.focus({ preventScroll: true });
+            const opened = onOpenLink(url);
+            setUnavailable(!opened);
+            if (opened) setPreviewOpen(false);
+          }
+        }
+      : undefined,
+  };
+  const anchor = (entry?: Contribution<LinkRenderer>) => {
+    const Content = entry?.component;
+    const content = Content ? (
+      <Content url={url} />
+    ) : (
+      (children ?? label ?? url)
+    );
+    const element = interactive ? (
+      <a
+        ref={trigger}
+        href={url}
+        aria-label={label}
+        title={!preview ? url : undefined}
+        className={entry?.className}
+        data-link-renderer={entry?.key}
+        {...navigation}
+      >
+        {content}
+      </a>
+    ) : (
+      <span className={entry?.className} data-link-renderer={entry?.key}>
+        {content}
+      </span>
+    );
+    return interactive && preview && session ? (
+      <PreviewCard
+        trigger={element}
+        link={<a href={url} {...navigation} />}
+        open={previewOpen}
+        onOpenChange={setPreviewOpen}
+        side="top"
+        className={styles.popup ?? ""}
+        aria-label="Message preview"
+      >
+        {previewOpen && (
+          <BuzzLinkPreview
+            key={messageViewKey(session, scope, url)}
+            session={session}
+            channelId={preview.channelId}
+            messageId={preview.messageId}
+          />
+        )}
+      </PreviewCard>
+    ) : (
+      element
+    );
+  };
+  const link = renderer ? (
+    <ContributionBoundary
+      key={`${contributionKey(renderer)}:${url}`}
+      fallback={anchor()}
+    >
+      {anchor(renderer)}
+    </ContributionBoundary>
+  ) : (
+    anchor()
+  );
+  const result = (
+    <>
+      {link}
+      {unavailable && (
+        <span role="status"> This Buzz link couldn’t be opened here.</span>
+      )}
+    </>
+  );
+  return (
+    <LinkLabelContext value={label}>
+      <LinkContentContext value={children}>{result}</LinkContentContext>
+    </LinkLabelContext>
+  );
+}
diff --git a/src/features/conversation/contracts.ts b/src/features/conversation/contracts.ts
index ac7b47b6..98e83dd9 100644
--- a/src/features/conversation/contracts.ts
+++ b/src/features/conversation/contracts.ts
@@ -51,6 +51,14 @@ export type InlineRenderer = Readonly<{
     media(url: string): string | undefined;
   }>;
 }>;
+/** Link presentation only. The host retains the anchor, destination and activation. */
+export type LinkRenderer = Readonly<{
+  id: string;
+  title: string;
+  matches(url: string): boolean;
+  className?: string | undefined;
+  component: ComponentType<{ url: string }>;
+}>;
 export type ContributionReader<T> = Readonly<{
   snapshot(): readonly Contribution<T>[];
   subscribe(listener: () => void): () => void;
@@ -59,6 +67,7 @@ export type ConversationExtensions = Readonly<{
   tools: ContributionReader<ComposerTool>;
   inline: ContributionReader<InlineRenderer>;
   completions?: ContributionReader<ComposerCompletion>;
+  links?: ContributionReader<LinkRenderer>;
 }>;
 
 /** Immutable host-issued evidence, scoped to one live editor observation. */
diff --git a/src/features/conversation/message-preview-text.test.ts b/src/features/conversation/message-preview-text.test.ts
new file mode 100644
index 00000000..6ed0cff5
--- /dev/null
+++ b/src/features/conversation/message-preview-text.test.ts
@@ -0,0 +1,23 @@
+import { expect, it } from "vitest";
+import { messagePreviewText } from "./message-preview-text";
+
+it("ends the excerpt before blank lines, with an ellipsis beside the text", () => {
+  expect(
+    messagePreviewText("Watch at 2x if you must lol\n\n\nVideo details"),
+  ).toBe("Watch at 2x if you must lol…");
+  expect(messagePreviewText("First paragraph\r\n \t\r\nMore text")).toBe(
+    "First paragraph…",
+  );
+});
+
+it("preserves single line breaks and leaves visual wrapping to the four-line clamp", () => {
+  const text = "First line\nSecond line";
+  expect(messagePreviewText(text)).toBe(text);
+  const longParagraph = "A long message. ".repeat(100).trim();
+  expect(messagePreviewText(longParagraph)).toBe(longParagraph);
+});
+
+it("ignores surrounding blank lines without implying missing content", () => {
+  expect(messagePreviewText("\n\nShort message\n \n")).toBe("Short message");
+  expect(messagePreviewText("\r\n \t\n")).toBe("");
+});
diff --git a/src/features/conversation/message-preview-text.ts b/src/features/conversation/message-preview-text.ts
new file mode 100644
index 00000000..859c918c
--- /dev/null
+++ b/src/features/conversation/message-preview-text.ts
@@ -0,0 +1,8 @@
+/** A compact excerpt: stop before an empty paragraph rather than clamping a blank line. */
+export function messagePreviewText(content: string): string {
+  const text = content.trim();
+  const paragraphBreak = /\r?\n[^\S\r\n]*\r?\n/.exec(text);
+  return paragraphBreak
+    ? `${text.slice(0, paragraphBreak.index).trimEnd()}…`
+    : text;
+}
diff --git a/src/features/conversation/service.test.tsx b/src/features/conversation/service.test.tsx
index 84d88f24..1cbc93e4 100644
--- a/src/features/conversation/service.test.tsx
+++ b/src/features/conversation/service.test.tsx
@@ -9,6 +9,7 @@ import type { InlineRenderer } from "./contracts";
 import type { Contribution } from "../../plugins/contributions";
 import * as emoji from "../../bundled/emoji";
 import * as mentions from "../../bundled/mentions";
+import * as links from "../../bundled/links";
 
 const Component = () => null;
 const cleanups: (() => Promise<unknown>)[] = [];
@@ -166,6 +167,41 @@ it("bundled Mentions registers only a chooser and removal leaves the host UI ava
   expect(h.service.ui.Composer).toBe(composer);
 });
 
+it("bundled Links registers, withdraws, and restores a fresh renderer", async () => {
+  const h = harness(links);
+  h.runtime.reconcile([h.plugin]);
+  await vi.waitFor(() => expect(h.service.links.snapshot()).toHaveLength(1));
+  const first = h.service.links.snapshot()[0];
+  expect(first?.matches("https://github.com/block/buzz")).toBe(true);
+  expect(first?.matches("javascript:alert(1)")).toBe(false);
+  h.runtime.reconcile([]);
+  await vi.waitFor(() => expect(h.service.links.snapshot()).toHaveLength(0));
+  h.runtime.reconcile([{ ...h.plugin, revision: "two" }]);
+  await vi.waitFor(() => expect(h.service.links.snapshot()).toHaveLength(1));
+  expect(h.service.links.snapshot()[0]).not.toBe(first);
+  expect(h.service.links.snapshot()[0]?.revision).toBe("two");
+});
+
+it("withdraws link presentation when plugin activation fails", async () => {
+  const h = harness({
+    inject: ["conversation"],
+    apply(ctx) {
+      ctx.conversation.registerLink({
+        id: "link",
+        title: "Link",
+        matches: () => true,
+        component: Component,
+      });
+      throw new Error("failed link plugin");
+    },
+  });
+  h.runtime.reconcile([h.plugin]);
+  await vi.waitFor(() =>
+    expect(h.runtime.snapshot()[h.plugin.manifest.id]?.status).toBe("failed"),
+  );
+  expect(h.service.links.snapshot()).toHaveLength(0);
+});
+
 it("owns completion registration through disable, replacement and failed activation", async () => {
   const h = harness({
     inject: ["conversation"],
diff --git a/src/features/conversation/service.tsx b/src/features/conversation/service.tsx
index 48a05f77..46c6f9ce 100644
--- a/src/features/conversation/service.tsx
+++ b/src/features/conversation/service.tsx
@@ -11,6 +11,7 @@ import type {
   ComposerTool,
   ComposerCompletion,
   InlineRenderer,
+  LinkRenderer,
   ContributionReader,
 } from "./contracts";
 
@@ -21,6 +22,8 @@ export type Conversation = {
   registerCompletion(provider: ComposerCompletion): void;
   inline: ContributionReader<InlineRenderer>;
   registerInline(renderer: InlineRenderer): void;
+  links: ContributionReader<LinkRenderer>;
+  registerLink(renderer: LinkRenderer): void;
   ui: {
     Composer: (props: Omit<MessageComposerProps, "extensions">) => ReactNode;
     Message: (props: Omit<MessageRowProps, "extensions">) => ReactNode;
@@ -31,7 +34,9 @@ declare module "@deepseek-ai/cordis" {
     conversation: Conversation;
   }
 }
-function validate(value: ComposerTool | InlineRenderer | ComposerCompletion) {
+function validate(
+  value: ComposerTool | InlineRenderer | ComposerCompletion | LinkRenderer,
+) {
   if (
     !value ||
     !/^[a-z0-9][a-z0-9._-]*$/.test(value.id) ||
@@ -50,6 +55,8 @@ export class ConversationService extends Service implements Conversation {
   readonly inline;
   private readonly toolEntries;
   private readonly inlineEntries;
+  readonly links;
+  private readonly linkEntries;
   constructor(ctx: Context) {
     super(ctx, "conversation");
     const tools = createContributions<ComposerTool>(ctx);
@@ -64,6 +71,9 @@ export class ConversationService extends Service implements Conversation {
     this.inlineEntries = inline;
     this.tools = { snapshot: tools.snapshot, subscribe: tools.subscribe };
     this.inline = { snapshot: inline.snapshot, subscribe: inline.subscribe };
+    const links = createContributions<LinkRenderer>(ctx);
+    this.linkEntries = links;
+    this.links = { snapshot: links.snapshot, subscribe: links.subscribe };
   }
   registerTool(value: ComposerTool) {
     validate(value);
@@ -81,6 +91,14 @@ export class ConversationService extends Service implements Conversation {
       throw new Error("An inline renderer needs a matcher");
     this.inlineEntries.register(this.ctx, value);
   }
+  registerLink(value: LinkRenderer) {
+    validate(value);
+    if (typeof value.matches !== "function")
+      throw new Error("A link renderer needs a matcher");
+    if (value.className !== undefined && typeof value.className !== "string")
+      throw new Error("A link renderer class must be a string");
+    this.linkEntries.register(this.ctx, value);
+  }
   readonly ui = {
     Composer: (props: Omit<MessageComposerProps, "extensions">) => (
       <MessageComposer {...props} extensions={this} />
diff --git a/src/features/conversation/useCompletionEditor.ts b/src/features/conversation/useCompletionEditor.ts
index f3414a49..2f605101 100644
--- a/src/features/conversation/useCompletionEditor.ts
+++ b/src/features/conversation/useCompletionEditor.ts
@@ -1,3 +1,4 @@
+import type { ComposerInputElement } from "../messages/composer-dom";
 import {
   useLayoutEffect,
   useCallback,
@@ -10,7 +11,7 @@ import type { ComposerObservation } from "./contracts";
 
 /** One synchronous invalidation owner; stale React closures cannot revive an edit. */
 export function useCompletionEditor(
-  input: RefObject<HTMLTextAreaElement | null>,
+  input: RefObject<ComposerInputElement | null>,
   enabled: boolean,
 ) {
   const [observation, setObservation] = useState<ComposerObservation>();
@@ -19,7 +20,7 @@ export function useCompletionEditor(
   const last = useRef<ComposerObservation | undefined>(undefined);
   const composing = useRef(false);
   const keys = useRef<
-    ((event: KeyboardEvent<HTMLTextAreaElement>) => boolean) | undefined
+    ((event: KeyboardEvent<ComposerInputElement>) => boolean) | undefined
   >(undefined);
   const invalidate = useCallback(() => {
     ++revision.current;
diff --git a/src/features/conversation/useCompletionPosition.ts b/src/features/conversation/useCompletionPosition.ts
index b671d0ef..3ade3d79 100644
--- a/src/features/conversation/useCompletionPosition.ts
+++ b/src/features/conversation/useCompletionPosition.ts
@@ -1,9 +1,10 @@
+import type { ComposerInputElement } from "../messages/composer-dom";
 import { useLayoutEffect, useRef, type RefObject } from "react";
 
 /** Portal positioning belongs to the host, not provider previews. The available
  * visual viewport bounds the menu even inside clipped/narrow conversation panels. */
 export function useCompletionPosition(
-  input: RefObject<HTMLTextAreaElement | null>,
+  input: RefObject<ComposerInputElement | null>,
   widthRatio = 1,
 ) {
   const popup = useRef<HTMLElement>(null);
diff --git a/src/features/messages/ChannelTimeline.tsx b/src/features/messages/ChannelTimeline.tsx
index 715c5c0d..464b441b 100644
--- a/src/features/messages/ChannelTimeline.tsx
+++ b/src/features/messages/ChannelTimeline.tsx
@@ -485,10 +485,10 @@ function Timeline({
               />
             ) : (
               <MessageRow
-                key={row.id}
-                row={row}
                 session={queries}
                 scope={scope}
+                key={row.id}
+                row={row}
                 unread={queries.unread}
                 extensions={extensions}
                 profile={profiles.get(row.authorId)}
diff --git a/src/features/messages/EditableInput.module.css b/src/features/messages/EditableInput.module.css
new file mode 100644
index 00000000..9da5b9a9
--- /dev/null
+++ b/src/features/messages/EditableInput.module.css
@@ -0,0 +1,56 @@
+.input {
+  width: 100%;
+  min-height: 3rem;
+  max-height: 12rem;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  font: inherit;
+  line-height: 1.5;
+  cursor: text;
+  outline: none;
+}
+.input[data-empty]::before {
+  content: attr(data-placeholder);
+  color: var(--text-muted);
+  pointer-events: none;
+  position: absolute;
+}
+.token {
+  display: inline;
+}
+.input::selection,
+.input ::selection {
+  background-color: Highlight;
+  color: HighlightText;
+}
+.input:focus .token[data-editor-selected] {
+  background-color: Highlight;
+  color: HighlightText;
+}
+.input:focus .token[data-editor-selected] * {
+  background-color: transparent;
+  color: inherit;
+}
+.input .token :is(div, p) {
+  display: inline;
+  margin: 0;
+  min-height: 0;
+  font: inherit;
+  line-height: inherit;
+}
+.token img {
+  display: inline-block;
+  width: calc(22px * var(--buzz-text-scale, 1));
+  height: calc(22px * var(--buzz-text-scale, 1));
+  object-fit: contain;
+  vertical-align: -0.25em;
+}
+.input[data-single-emoji] {
+  font-size: calc(42px * var(--buzz-text-scale, 1));
+  line-height: calc(48px * var(--buzz-text-scale, 1));
+}
+.input[data-single-emoji] img {
+  width: calc(42px * var(--buzz-text-scale, 1));
+  height: calc(42px * var(--buzz-text-scale, 1));
+}
diff --git a/src/features/messages/EditableInput.tsx b/src/features/messages/EditableInput.tsx
new file mode 100644
index 00000000..7e244d49
--- /dev/null
+++ b/src/features/messages/EditableInput.tsx
@@ -0,0 +1,575 @@
+import {
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ReactNode,
+  type KeyboardEvent,
+  type InputEvent as ReactInputEvent,
+  type CompositionEvent,
+  type RefObject,
+  type HTMLAttributes,
+} from "react";
+import { createPortal } from "react-dom";
+import {
+  editorSelection,
+  editorText,
+  setEditorSelection,
+  sourceOffset,
+  editAdjacentLink,
+  normalizeTokenCaret,
+  highlightEditorSelection,
+  type ComposerInputElement,
+} from "./composer-dom";
+import styles from "./EditableInput.module.css";
+import { messageLinkParts } from "./message-link-parts";
+import {
+  updatePlainLinks,
+  type PlainLink,
+  type ComposerEdit,
+} from "./composer-link-edit";
+
+export type EditorDecoration = {
+  start: number;
+  end: number;
+  content: ReactNode;
+  editAsText?: boolean;
+};
+export type EditableInputProps = Omit<
+  HTMLAttributes<ComposerInputElement>,
+  "onChange"
+> & {
+  ref: RefObject<ComposerInputElement | null>;
+  value: string;
+  disabled: boolean;
+  placeholder: string;
+  maxLength: number;
+  onUndo(redo: boolean): void;
+};
+
+/** The DOM owns native editing/IME; React only owns the noneditable token contents. */
+export function EditableInput({
+  ref,
+  value,
+  disabled,
+  placeholder,
+  maxLength,
+  onUndo,
+  decorations,
+  ...events
+}: EditableInputProps & { decorations: readonly EditorDecoration[] }) {
+  const element = useRef<ComposerInputElement>(null);
+  const composing = useRef(false);
+  const pendingEdit = useRef<ComposerEdit | undefined>(undefined);
+  const linkEdits = useRef({
+    text: value,
+    links: [] as { start: number; end: number }[],
+    plain: [] as PlainLink[],
+  });
+  const pendingSelection =
+    useRef<ReturnType<typeof editorSelection>>(undefined);
+  const current = useRef({ onUndo, maxLength, insertText });
+  current.current = { onUndo, maxLength, insertText };
+  const [revision, refresh] = useState(0);
+  const [hosts, setHosts] = useState<
+    { start: number; end: number; element: HTMLSpanElement }[]
+  >([]);
+  const shape = JSON.stringify(
+    decorations.map(({ start, end, editAsText }) => [start, end, editAsText]),
+  );
+  useLayoutEffect(() => {
+    const root = element.current;
+    if (!root) return;
+    let last = { start: 0, end: 0, backward: false };
+    const selection = () => editorSelection(root) ?? last;
+    Object.defineProperties(root, {
+      value: {
+        configurable: true,
+        get: () => editorText(root),
+        set: (text: string) => {
+          root.textContent = text;
+        },
+      },
+      selectionStart: { configurable: true, get: () => selection().start },
+      selectionEnd: { configurable: true, get: () => selection().end },
+      selectionDirection: {
+        configurable: true,
+        get: () => (selection().backward ? "backward" : "forward"),
+      },
+      disabled: {
+        configurable: true,
+        get: () => root.getAttribute("aria-disabled") === "true",
+      },
+      readOnly: {
+        configurable: true,
+        get: () =>
+          root.getAttribute("aria-readonly") === "true" ||
+          root.contentEditable === "false",
+        set: (value: boolean) => {
+          root.setAttribute("aria-readonly", String(value));
+          root.contentEditable = String(!value && !root.disabled);
+        },
+      },
+      setSelectionRange: {
+        configurable: true,
+        value: (start: number, end: number, direction?: string) => {
+          pendingSelection.current = undefined;
+          last = { start, end, backward: direction === "backward" };
+          setEditorSelection(root, start, end, last.backward);
+        },
+      },
+    });
+    ref.current = root;
+    const focus = () =>
+      setEditorSelection(root, last.start, last.end, last.backward);
+    root.addEventListener("focus", focus);
+    const select = () => {
+      if (!composing.current) normalizeTokenCaret(root);
+      highlightEditorSelection(root);
+      const next = editorSelection(root);
+      if (!next) return;
+      last = next;
+      root.dispatchEvent(new Event("select"));
+    };
+    const before = (event: InputEvent) => {
+      if (event.inputType.startsWith("history")) {
+        event.preventDefault();
+        current.current.onUndo(event.inputType === "historyRedo");
+        return;
+      }
+      // Native edit commands (including WebKit's Delete menu action) can arrive
+      // without keydown. Do not spend the first deletion on our caret marker.
+      if (
+        event.cancelable &&
+        !event.isComposing &&
+        !root.disabled &&
+        !root.readOnly &&
+        ["deleteContentBackward", "deleteContentForward"].includes(
+          event.inputType,
+        )
+      ) {
+        normalizeTokenCaret(root);
+        const backward = event.inputType === "deleteContentBackward";
+        if (editAdjacentLink(root, backward, false, false) === false) {
+          event.preventDefault();
+          event.stopImmediatePropagation();
+          if (root.selectionStart === root.selectionEnd) {
+            const caret = root.selectionStart;
+            const segments = new Intl.Segmenter(undefined, {
+              granularity: "grapheme",
+            }).segment(root.value);
+            const character = segments.containing(backward ? caret - 1 : caret);
+            if (!character) return;
+            root.setSelectionRange(
+              character.index,
+              character.index + character.segment.length,
+            );
+          }
+          current.current.insertText("", event.inputType);
+          return;
+        }
+      }
+      const target = event.getTargetRanges?.()[0];
+      if (
+        target &&
+        root.contains(target.startContainer) &&
+        root.contains(target.endContainer) &&
+        !event.isComposing
+      ) {
+        const start = sourceOffset(
+          root,
+          target.startContainer,
+          target.startOffset,
+        );
+        const end = sourceOffset(root, target.endContainer, target.endOffset);
+        // Expose the browser's real deletion range to mention tracking.
+        if (event.inputType.startsWith("delete") && start !== end)
+          root.setSelectionRange(start, end);
+      }
+      if (
+        event.data &&
+        root.value.length -
+          (root.selectionEnd - root.selectionStart) +
+          event.data.length >
+          current.current.maxLength
+      )
+        event.preventDefault();
+      if (!event.defaultPrevented)
+        pendingEdit.current = {
+          text: root.value,
+          start: root.selectionStart,
+          end: root.selectionEnd,
+        };
+    };
+    const openToken = (event: MouseEvent) => {
+      const target =
+        event.target instanceof Element
+          ? event.target.closest<HTMLElement>("[data-source]")
+          : null;
+      if (root.disabled || root.readOnly || !target || !root.contains(target))
+        return;
+      const index = [...root.childNodes].indexOf(target);
+      const start = sourceOffset(root, root, index);
+      const end = start + editorText(target).length;
+      root.focus();
+      root.setSelectionRange(start, end);
+    };
+    const placeAfterToken = (event: MouseEvent) => {
+      if (root.disabled || root.readOnly) return;
+      if (event.detail >= 3) {
+        // Browsers stop paragraph selection at contenteditable=false islands.
+        const position = root.selectionStart;
+        const start =
+          position === 0 ? 0 : root.value.lastIndexOf("\n", position - 1) + 1;
+        const newline = root.value.indexOf("\n", position);
+        root.setSelectionRange(
+          start,
+          newline < 0 ? root.value.length : newline + 1,
+        );
+        return;
+      }
+      const token =
+        event.target instanceof Element
+          ? event.target.closest<HTMLElement>("[data-source]")
+          : null;
+      if (
+        !token?.parentNode ||
+        !root.contains(token) ||
+        root.disabled ||
+        root.readOnly ||
+        event.shiftKey ||
+        event.detail !== 1 ||
+        !root.ownerDocument.getSelection()?.isCollapsed
+      )
+        return;
+      const index = [...token.parentNode.childNodes].indexOf(token);
+      const end =
+        sourceOffset(root, token.parentNode, index) + editorText(token).length;
+      root.focus();
+      root.setSelectionRange(end, end);
+    };
+    root.addEventListener("click", placeAfterToken);
+    root.addEventListener("dblclick", openToken);
+    root.addEventListener("beforeinput", before, true);
+    root.ownerDocument.addEventListener("selectionchange", select);
+    return () => {
+      root.removeEventListener("focus", focus);
+      root.removeEventListener("click", placeAfterToken);
+      root.removeEventListener("dblclick", openToken);
+      root.removeEventListener("beforeinput", before, true);
+      root.ownerDocument.removeEventListener("selectionchange", select);
+      ref.current = null;
+    };
+  }, [ref]);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: only source/ranges rebuild the editing DOM; content changes stay in portals.
+  useLayoutEffect(() => {
+    const root = element.current;
+    if (!root || composing.current) return;
+    const previous = linkEdits.current;
+    const plain = updatePlainLinks(
+      previous.text,
+      value,
+      previous.links,
+      previous.plain,
+      pendingEdit.current,
+    );
+    pendingEdit.current = undefined;
+    const visible = decorations.filter(
+      (item) =>
+        !item.editAsText ||
+        !plain.some(
+          (range) => item.start < range.end && item.end > range.start,
+        ),
+    );
+    linkEdits.current = {
+      text: value,
+      plain,
+      links: visible
+        .filter((item) => item.editAsText)
+        .map(({ start, end }) => ({ start, end })),
+    };
+    const selection = editorSelection(root);
+    const fragment = root.ownerDocument.createDocumentFragment();
+    const next = [];
+    let offset = 0;
+    const appendText = (text: string, afterToken: boolean) => {
+      if (!afterToken) {
+        fragment.append(root.ownerDocument.createTextNode(text));
+        return;
+      }
+      // A real text position after an inline object gives WebKit a caret box.
+      // editorText/source offsets exclude this rendering-only boundary character.
+      const span = root.ownerDocument.createElement("span");
+      span.dataset.editorText = "";
+      span.append(root.ownerDocument.createTextNode(`\u200B${text}`));
+      fragment.append(span);
+    };
+    for (const decoration of visible) {
+      appendText(value.slice(offset, decoration.start), next.length > 0);
+      const host = root.ownerDocument.createElement("span");
+      host.contentEditable = "false";
+      host.dataset.source = value.slice(decoration.start, decoration.end);
+      if (decoration.editAsText) host.dataset.editAsText = "";
+      host.className = styles.token ?? "";
+      fragment.append(host);
+      next.push({
+        start: decoration.start,
+        end: decoration.end,
+        element: host,
+      });
+      offset = decoration.end;
+    }
+    appendText(value.slice(offset), next.length > 0);
+    const tail = root.ownerDocument.createElement("br");
+    tail.dataset.placeholder = "true";
+    fragment.append(tail);
+    root.replaceChildren(fragment);
+    pendingSelection.current = selection;
+    setHosts(next);
+    // Only changes to source/ranges rebuild editing DOM; profile/icon updates stay in portals.
+  }, [value, shape, revision]);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: restore once after the portal hosts have committed their children.
+  useLayoutEffect(() => {
+    const root = element.current;
+    const selection = pendingSelection.current;
+    pendingSelection.current = undefined;
+    // Portals now contain their rendered link/mention. Restore against its final
+    // layout, without overriding a newer selection from a composer command.
+    if (root && selection && root.ownerDocument.activeElement === root)
+      setEditorSelection(
+        root,
+        Math.min(root.value.length, selection.start),
+        Math.min(root.value.length, selection.end),
+        selection.backward,
+      );
+    if (
+      root?.hasAttribute("data-single-emoji") &&
+      root.selectionStart === root.value.length &&
+      root.selectionEnd === root.value.length
+    )
+      root.scrollTop = Math.max(0, root.scrollHeight - root.clientHeight);
+  }, [hosts]);
+
+  function insertText(text: string, inputType = "insertFromPaste") {
+    const root = element.current;
+    if (!root || root.disabled || root.readOnly) return;
+    if (!composing.current) normalizeTokenCaret(root);
+    text = text.replace(/\r\n?/g, "\n");
+    if (
+      root.value.length -
+        (root.selectionEnd - root.selectionStart) +
+        text.length >
+      current.current.maxLength
+    )
+      return;
+    const event = new InputEvent("beforeinput", {
+      bubbles: true,
+      cancelable: true,
+      inputType,
+      data: text,
+    });
+    if (!root.dispatchEvent(event)) return;
+    const selection = root.ownerDocument.getSelection();
+    if (!selection?.rangeCount) return;
+    const range = selection.getRangeAt(0);
+    if (!root.contains(range.commonAncestorContainer)) return;
+    range.deleteContents();
+    const node = root.ownerDocument.createTextNode(text);
+    range.insertNode(node);
+    selection.setBaseAndExtent(node, text.length, node, text.length);
+    root.dispatchEvent(
+      new InputEvent("input", { bubbles: true, inputType, data: text }),
+    );
+    return true;
+  }
+  return (
+    <>
+      {/* biome-ignore lint/a11y/useSemanticElements: rich content needs a contenteditable textbox. */}
+      <div
+        {...events}
+        ref={element}
+        role="textbox"
+        aria-multiline="true"
+        aria-label={placeholder}
+        aria-disabled={disabled || undefined}
+        contentEditable={!disabled}
+        suppressContentEditableWarning
+        tabIndex={disabled ? -1 : 0}
+        className={styles.input}
+        data-placeholder={placeholder}
+        data-empty={!value || undefined}
+        onPaste={(event) => {
+          event.preventDefault();
+          const root = element.current;
+          if (!root || root.disabled || root.readOnly) return;
+          let text = event.clipboardData.getData("text/plain");
+          let link = false;
+          messageLinkParts(text, undefined, (start, end) => {
+            if (start === 0 && end === text.length) link = true;
+          });
+          const reuseSpace = link && root.value[root.selectionEnd] === " ";
+          if (
+            link &&
+            !reuseSpace &&
+            root.value.length -
+              (root.selectionEnd - root.selectionStart) +
+              text.length <
+              maxLength
+          )
+            text += " ";
+          if (insertText(text) && reuseSpace) {
+            const caret = root.selectionStart + 1;
+            root.setSelectionRange(caret, caret);
+          }
+        }}
+        onCopy={(event) => {
+          const root = element.current;
+          if (!root) return;
+          event.preventDefault();
+          event.clipboardData.setData(
+            "text/plain",
+            root.value.slice(root.selectionStart, root.selectionEnd),
+          );
+        }}
+        onCut={(event) => {
+          const root = element.current;
+          if (!root) return;
+          event.preventDefault();
+          event.clipboardData.setData(
+            "text/plain",
+            root.value.slice(root.selectionStart, root.selectionEnd),
+          );
+          insertText("", "deleteByCut");
+        }}
+        onDrop={(event) => {
+          event.preventDefault();
+        }}
+        onInput={(event) => {
+          const root = element.current;
+          if (root && root.value.length > maxLength) {
+            if (!composing.current) {
+              root.value = value;
+              root.setSelectionRange(value.length, value.length);
+              refresh((value) => value + 1);
+            }
+            return;
+          }
+          events.onInput?.(event as ReactInputEvent<ComposerInputElement>);
+          if (!composing.current && root?.value === value)
+            refresh((revision) => revision + 1);
+        }}
+        onKeyDown={(event) => {
+          if (
+            composing.current ||
+            event.nativeEvent.isComposing ||
+            event.nativeEvent.keyCode === 229
+          ) {
+            events.onKeyDown?.(event as KeyboardEvent<ComposerInputElement>);
+            return;
+          }
+          // A key can arrive before the native selectionchange notification.
+          if (element.current) normalizeTokenCaret(element.current);
+          if (
+            (event.metaKey || event.ctrlKey) &&
+            !event.altKey &&
+            ["z", "y"].includes(event.key.toLowerCase())
+          ) {
+            event.preventDefault();
+            onUndo(event.shiftKey || event.key.toLowerCase() === "y");
+            return;
+          }
+          events.onKeyDown?.(event as KeyboardEvent<ComposerInputElement>);
+          const root = element.current;
+          if (
+            root &&
+            !root.disabled &&
+            !root.readOnly &&
+            !event.defaultPrevented &&
+            ["ArrowLeft", "ArrowRight"].includes(event.key)
+          )
+            if (
+              editAdjacentLink(
+                root,
+                event.key === "ArrowLeft",
+                true,
+                event.shiftKey,
+              )
+            ) {
+              event.preventDefault();
+              return;
+            }
+          if (
+            root &&
+            !event.defaultPrevented &&
+            !event.altKey &&
+            ["Home", "End"].includes(event.key)
+          ) {
+            event.preventDefault();
+            const selection = editorSelection(root);
+            const anchor = selection?.backward
+              ? root.selectionEnd
+              : root.selectionStart;
+            const focus = selection?.backward
+              ? root.selectionStart
+              : root.selectionEnd;
+            const end = root.value.indexOf("\n", focus);
+            const next =
+              event.key === "Home"
+                ? event.metaKey || event.ctrlKey
+                  ? 0
+                  : focus === 0
+                    ? 0
+                    : root.value.lastIndexOf("\n", focus - 1) + 1
+                : event.metaKey || event.ctrlKey || end < 0
+                  ? root.value.length
+                  : end;
+            root.setSelectionRange(
+              event.shiftKey ? Math.min(anchor, next) : next,
+              event.shiftKey ? Math.max(anchor, next) : next,
+              event.shiftKey && next < anchor ? "backward" : "forward",
+            );
+            return;
+          }
+          if (
+            !event.defaultPrevented &&
+            event.key === "Enter" &&
+            !composing.current
+          ) {
+            event.preventDefault();
+            insertText("\n", "insertLineBreak");
+          }
+        }}
+        onCompositionStart={(event) => {
+          composing.current = true;
+          events.onCompositionStart?.(
+            event as CompositionEvent<ComposerInputElement>,
+          );
+        }}
+        onCompositionEnd={(event) => {
+          composing.current = false;
+          const root = element.current;
+          if (root && root.value.length > maxLength) {
+            root.value = value;
+            root.setSelectionRange(value.length, value.length);
+          }
+          events.onCompositionEnd?.(
+            event as CompositionEvent<ComposerInputElement>,
+          );
+          refresh((value) => value + 1);
+        }}
+      />
+      {hosts.map((host) => {
+        const decoration = decorations.find(
+          (item) => item.start === host.start && item.end === host.end,
+        );
+        return (
+          decoration &&
+          createPortal(
+            decoration.content,
+            host.element,
+            `${host.start}:${host.end}`,
+          )
+        );
+      })}
+    </>
+  );
+}
diff --git a/src/features/messages/MessageComposer.test.tsx b/src/features/messages/MessageComposer.test.tsx
index 85acc855..f528c799 100644
--- a/src/features/messages/MessageComposer.test.tsx
+++ b/src/features/messages/MessageComposer.test.tsx
@@ -2,6 +2,7 @@ import { assert, afterEach, beforeEach, expect, it, vi } from "vitest";
 import { isValidElement, type ReactNode, type ReactElement } from "react";
 import { ComposerTools } from "../conversation/ComposerTools";
 import type { ConversationExtensions } from "../conversation/contracts";
+import { RichComposerInput } from "./RichComposerInput";
 import { MessageComposer } from "./MessageComposer";
 import {
   isEmojiOnly,
@@ -132,7 +133,9 @@ function mount(
         props: typeof scoped.props,
       ) => ReactElement<Record<string, unknown>>
     )(scoped.props);
-    const field = elements(tree).find((element) => element.type === "textarea");
+    const field = elements(tree).find(
+      (element) => element.type === RichComposerInput,
+    );
     if (field) {
       const ref = field.props.ref as { current: HTMLTextAreaElement };
       const length = (field.props.value as string).length;
@@ -145,7 +148,7 @@ function mount(
     return tree;
   };
   const input = () => {
-    const field = elements(render()).find((e) => e.type === "textarea");
+    const field = elements(render()).find((e) => e.type === RichComposerInput);
     if (!field) throw new Error("No composer input");
     return field;
   };
@@ -237,8 +240,12 @@ it("keeps the draft on synchronous rejection and clears only after the outbox ac
 it("gives the channel and thread separate input/label identities, and gates unsupported writes", () => {
   const channel = mount().render(),
     thread = mount("root").render();
-  const channelInput = elements(channel).find((e) => e.type === "textarea");
-  const threadInput = elements(thread).find((e) => e.type === "textarea");
+  const channelInput = elements(channel).find(
+    (e) => e.type === RichComposerInput,
+  );
+  const threadInput = elements(thread).find(
+    (e) => e.type === RichComposerInput,
+  );
   expect(threadInput?.props.id).not.toBe(channelInput?.props.id);
   expect(threadInput?.props.placeholder).toBe("Reply to thread");
   expect(elements(thread).find((e) => e.type === "label")?.props.htmlFor).toBe(
@@ -246,7 +253,7 @@ it("gives the channel and thread separate input/label identities, and gates unsu
   );
   expect(
     elements(mount("root", "scope", false).render()).some(
-      (e) => e.type === "textarea",
+      (e) => e.type === RichComposerInput,
     ),
   ).toBe(false);
 });
@@ -389,12 +396,12 @@ it("keeps custom emoji shortcode text readable in the draft and sends it unchang
   const insertText = tools.props.insertText as (text: string) => boolean;
   expect(insertText(":party:")).toBe(true);
   expect(h.input().props.value).toBe(":party:");
-  expect(h.input().props["data-custom-emoji-only"]).toBe(true);
+  expect(h.input().props["data-single-emoji"]).toBe(true);
   expect(insertText(":party:")).toBe(true);
   expect(h.input().props.value).toBe(":party::party:");
-  expect(
-    elements(h.render()).filter((element) => element.type === "img"),
-  ).toHaveLength(2);
+  expect(h.input().props.emoji).toEqual([
+    { shortcode: "party", url: "https://emoji.test/party.png" },
+  ]);
   h.submit();
   expect(h.messages.send).toHaveBeenCalledExactlyOnceWith(
     "channel",
@@ -408,11 +415,10 @@ it("renders a leading custom emoji inline when text follows it", () => {
     { shortcode: "bufo", url: "https://emoji.test/bufo.png" },
   ]);
   h.type(":bufo:lakjsdlkjflakjsdf");
-  expect(h.input().props["data-custom-emoji-only"]).toBeUndefined();
-  expect(h.input().props["data-leading-custom-emoji"]).toBe(true);
-  expect(
-    elements(h.render()).filter((element) => element.type === "img"),
-  ).toHaveLength(1);
+  expect(h.input().props["data-single-emoji"]).toBeUndefined();
+  expect(h.input().props.emoji).toEqual([
+    { shortcode: "bufo", url: "https://emoji.test/bufo.png" },
+  ]);
   h.submit();
   expect(h.messages.send).toHaveBeenCalledExactlyOnceWith(
     "channel",
diff --git a/src/features/messages/MessageComposer.tsx b/src/features/messages/MessageComposer.tsx
index 30e44ffa..0d031cbd 100644
--- a/src/features/messages/MessageComposer.tsx
+++ b/src/features/messages/MessageComposer.tsx
@@ -35,6 +35,8 @@ import type {
 } from "../conversation/contracts";
 import { ComposerCompletions } from "../conversation/ComposerCompletions";
 import { useCompletionEditor } from "../conversation/useCompletionEditor";
+import { RichComposerInput } from "./RichComposerInput";
+import type { ComposerInputElement } from "./composer-dom";
 
 export type MessageComposerProps = {
   extensions?: ConversationExtensions | undefined;
@@ -82,7 +84,34 @@ function Composer({
   const draft = value.text;
   const valueRef = useRef(value);
   const caret = useRef<number | undefined>(undefined);
-  const saveDraft = (next: MentionDraft) => {
+  const input = useRef<ComposerInputElement>(null);
+  const restoreSelection = useRef<{ start: number; end: number } | undefined>(
+    undefined,
+  );
+  const compositionSaved = useRef(false);
+  const history = useRef<{
+    past: { draft: MentionDraft; start: number; end: number }[];
+    future: { draft: MentionDraft; start: number; end: number }[];
+  }>({ past: [], future: [] });
+  const saveDraft = (
+    next: MentionDraft,
+    before?: { start: number; end: number },
+  ) => {
+    if (
+      next.text === valueRef.current.text &&
+      JSON.stringify(next.recipients) ===
+        JSON.stringify(valueRef.current.recipients)
+    )
+      return;
+    if (!compositionSaved.current)
+      history.current.past.push({
+        draft: valueRef.current,
+        start: before?.start ?? input.current?.selectionStart ?? 0,
+        end: before?.end ?? input.current?.selectionEnd ?? 0,
+      });
+    if (completion.composing.current) compositionSaved.current = true;
+    history.current.past = history.current.past.slice(-100);
+    history.current.future = [];
     valueRef.current = next;
     updateDraft(next);
     writeView(scope, draftKey, next);
@@ -90,8 +119,6 @@ function Composer({
   const setDraft = (text: string) =>
     saveDraft(editMentionDraft(valueRef.current, text));
   const [error, setError] = useState<string>();
-  const [failedCustomEmoji, setFailedCustomEmoji] = useState<string>();
-  const [selection, setSelection] = useState({ start: 0, end: 0 });
   const outbox = session.outbox;
   const emojiCatalog = useSyncExternalStore(
     session.emoji.subscribe,
@@ -99,83 +126,15 @@ function Composer({
     session.emoji.snapshot,
   );
   const customEmojiOnly = customEmojiOnlySpans(draft, emojiCatalog.entries);
-  const leadingCustomEmoji = customEmojiOnly.length
-    ? { spans: [], end: 0 }
-    : leadingCustomEmojiSpans(draft, emojiCatalog.entries);
-  const customEmoji = customEmojiOnly.length
-    ? customEmojiOnly
-    : leadingCustomEmoji.spans;
-  const customEmojiSources = customEmoji.map(({ emoji, start, end }) => ({
-    start,
-    end,
-    key: `${start}:${emoji.shortcode}`,
-    source: session.media(emoji.url),
-  }));
-  const showCustomEmoji =
-    !!customEmojiSources.length &&
-    customEmojiSources.every(
-      ({ source }) => !!source && source !== failedCustomEmoji,
-    );
-  const showCustomEmojiOnly = showCustomEmoji && customEmojiOnly.length > 0;
-  const showLeadingCustomEmoji =
-    showCustomEmoji &&
-    !customEmojiOnly.length &&
-    !!leadingCustomEmoji.spans.length;
-  const input = useRef<HTMLTextAreaElement>(null);
-  const customEmojiMirror = useRef<HTMLSpanElement>(null);
-  const customEmojiGroup = useRef<HTMLSpanElement>(null);
-  const [customEmojiLayout, setCustomEmojiLayout] = useState({
-    left: 0,
-    top: 0,
-    height: 48,
-  });
-  useLayoutEffect(() => {
-    if (!showCustomEmojiOnly) return;
-    const group = customEmojiGroup.current;
-    const last = group?.children[customEmojiOnly.length - 1];
-    if (!group || !last || !(last instanceof HTMLElement)) return;
-    const resize = () => {
-      const lineHeight = Number.parseFloat(
-        getComputedStyle(input.current ?? group).lineHeight,
-      );
-      const next = {
-        left: Math.min(
-          last.offsetLeft + last.offsetWidth + 2,
-          Math.max(0, group.clientWidth - 2),
-        ),
-        top: last.offsetTop,
-        height: last.offsetTop + lineHeight,
-      };
-      setCustomEmojiLayout((current) =>
-        current.left === next.left &&
-        current.top === next.top &&
-        current.height === next.height
-          ? current
-          : next,
-      );
-    };
-    resize();
-    if (typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(resize);
-    observer.observe(group);
-    return () => observer.disconnect();
-  }, [showCustomEmojiOnly, customEmojiOnly.length]);
-  useLayoutEffect(() => {
-    const element = input.current;
-    if (
-      showCustomEmojiOnly &&
-      element &&
-      element.selectionStart === draft.length &&
-      element.selectionEnd === draft.length
-    )
-      element.scrollTop = Math.max(
-        0,
-        customEmojiLayout.height - element.clientHeight,
-      );
-  }, [showCustomEmojiOnly, customEmojiLayout.height, draft.length]);
-  const inlineEmojiGroup = useRef<HTMLSpanElement>(null);
-  const inlinePrefixMeasure = useRef<HTMLSpanElement>(null);
-  const [inlineTextIndent, setInlineTextIndent] = useState(0);
+  const customEmojiSpans = (
+    customEmojiOnly.length
+      ? customEmojiOnly
+      : leadingCustomEmojiSpans(draft, emojiCatalog.entries).spans
+  ).filter(({ emoji }) => !!session.media(emoji.url));
+  const largeEmojiDraft = usesLargeEmojiPresentation(
+    draft,
+    emojiCatalog.entries,
+  );
   const edit = useRef<MentionEdit | undefined>(undefined);
   const completion = useCompletionEditor(
     input,
@@ -201,51 +160,36 @@ function Composer({
     if (outbox?.supports(9)) void session.emoji.ensure();
   }, [session, outbox]);
   useLayoutEffect(() => {
+    if (restoreSelection.current) {
+      const { start, end } = restoreSelection.current;
+      input.current?.focus();
+      input.current?.setSelectionRange(start, end);
+      restoreSelection.current = undefined;
+      return;
+    }
     if (caret.current === undefined) return;
     input.current?.focus();
     input.current?.setSelectionRange(caret.current, caret.current);
     caret.current = undefined;
   });
-  useLayoutEffect(() => {
-    if (!showLeadingCustomEmoji) {
-      setInlineTextIndent(0);
+  function undo(redo: boolean) {
+    if (disabled || input.current?.readOnly || completion.composing.current)
       return;
-    }
-    const emoji = inlineEmojiGroup.current;
-    const prefix = inlinePrefixMeasure.current;
-    if (
-      !emoji ||
-      !prefix ||
-      typeof emoji.getBoundingClientRect !== "function" ||
-      typeof prefix.getBoundingClientRect !== "function"
-    )
-      return;
-    const resize = () => {
-      const next =
-        emoji.getBoundingClientRect().width -
-        prefix.getBoundingClientRect().width;
-      setInlineTextIndent((current) =>
-        Math.abs(current - next) < 0.25 ? current : next,
-      );
-    };
-    resize();
-    if (typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(resize);
-    observer.observe(emoji);
-    observer.observe(prefix);
-    return () => observer.disconnect();
-  }, [showLeadingCustomEmoji]);
-  useLayoutEffect(() => {
-    const mirror = customEmojiMirror.current;
-    if (mirror) mirror.scrollTop = input.current?.scrollTop ?? 0;
-    if (customEmojiGroup.current)
-      customEmojiGroup.current.style.transform = `translateY(-${input.current?.scrollTop ?? 0}px)`;
-  });
-  function syncCustomEmojiScroll(element: HTMLTextAreaElement) {
-    if (customEmojiMirror.current)
-      customEmojiMirror.current.scrollTop = element.scrollTop;
-    if (customEmojiGroup.current)
-      customEmojiGroup.current.style.transform = `translateY(-${element.scrollTop}px)`;
+    const source = redo ? history.current.future : history.current.past;
+    const destination = redo ? history.current.past : history.current.future;
+    const next = source.pop();
+    if (!next) return;
+    destination.push({
+      draft: valueRef.current,
+      start: input.current?.selectionStart ?? 0,
+      end: input.current?.selectionEnd ?? 0,
+    });
+    valueRef.current = next.draft;
+    updateDraft(next.draft);
+    writeView(scope, draftKey, next.draft);
+    caret.current = undefined;
+    restoreSelection.current = { start: next.start, end: next.end };
+    completion.invalidate();
   }
   function insert(
     text: string,
@@ -323,7 +267,14 @@ function Composer({
     );
   }
   function send() {
-    if (disabled || !draft.trim() || !outbox) return;
+    if (
+      disabled ||
+      input.current?.readOnly ||
+      input.current?.disabled ||
+      !draft.trim() ||
+      !outbox
+    )
+      return;
     try {
       const id = threadRootId
         ? session.messages.reply(
@@ -340,6 +291,7 @@ function Composer({
       onSend?.(id);
       completion.invalidate();
       setDraft("");
+      history.current = { past: [], future: [] };
       input.current?.focus();
       setError(undefined);
     } catch (reason) {
@@ -379,51 +331,39 @@ function Composer({
         />
       )}
       <div className={styles.composerInput}>
-        <textarea
+        <RichComposerInput
           ref={input}
           id={inputId}
           disabled={disabled}
           value={draft}
-          data-single-emoji={usesLargeEmojiPresentation(draft) || undefined}
-          data-custom-emoji-only={showCustomEmojiOnly || undefined}
-          data-leading-custom-emoji={showLeadingCustomEmoji || undefined}
-          style={
-            showCustomEmojiOnly
-              ? {
-                  paddingLeft: customEmojiLayout.left,
-                  paddingTop: customEmojiLayout.top,
-                  height: customEmojiLayout.height,
-                }
-              : showLeadingCustomEmoji
-                ? { textIndent: `${inlineTextIndent}px` }
-                : undefined
-          }
+          draft={value}
+          session={session}
+          scope={scope}
+          channelId={channelId}
+          extensions={extensions}
+          emoji={emojiCatalog.entries}
+          onUndo={undo}
+          data-single-emoji={largeEmojiDraft || undefined}
           maxLength={16000}
-          rows={2}
           placeholder={label}
           onFocus={() => completion.observe(true)}
-          onScroll={(event) => syncCustomEmojiScroll(event.currentTarget)}
           onBlur={() => {
-            setSelection({ start: 0, end: 0 });
             completion.invalidate();
           }}
-          onSelect={(event) => {
-            setSelection({
-              start: event.currentTarget.selectionStart,
-              end: event.currentTarget.selectionEnd,
-            });
+          onSelect={() => {
             completion.observe();
           }}
           onCompositionStart={() => {
+            compositionSaved.current = false;
             completion.composing.current = true;
             completion.invalidate();
           }}
           onCompositionEnd={() => {
+            compositionSaved.current = false;
             completion.composing.current = false;
             completion.observe(true);
           }}
           // onInput also observes same-text replacements, which onChange omits.
-          onChange={() => {}}
           onInput={(event) => {
             const range = edit.current;
             edit.current = undefined;
@@ -433,8 +373,8 @@ function Composer({
                 event.currentTarget.value,
                 range,
               ),
+              range,
             );
-            setSelection({ start: 0, end: 0 });
             completion.observe(true);
           }}
           onKeyDown={(event) => {
@@ -450,14 +390,14 @@ function Composer({
             ) {
               completion.invalidate();
               if (
-                showCustomEmoji &&
+                customEmojiSpans.length &&
                 !event.altKey &&
                 !event.ctrlKey &&
                 !event.metaKey &&
                 (event.key === "ArrowLeft" || event.key === "ArrowRight")
               ) {
                 const next = extendEmojiSelection(
-                  customEmojiSources,
+                  customEmojiSpans,
                   event.currentTarget,
                   event.key,
                 );
@@ -468,7 +408,6 @@ function Composer({
                     next.end,
                     next.direction,
                   );
-                  setSelection({ start: next.start, end: next.end });
                 }
               }
               return;
@@ -486,63 +425,6 @@ function Composer({
             }
           }}
         />
-        {showCustomEmojiOnly && (
-          <span
-            ref={customEmojiGroup}
-            className={styles.composerCustomEmojiGroup}
-            aria-hidden="true"
-          >
-            {customEmojiSources.map(({ start, end, key, source }) => (
-              <img
-                key={key}
-                className={styles.composerCustomEmoji}
-                data-selected={
-                  (selection.start < end && selection.end > start) || undefined
-                }
-                src={source}
-                alt=""
-                onError={() => setFailedCustomEmoji(source)}
-              />
-            ))}
-          </span>
-        )}
-        {showLeadingCustomEmoji && (
-          <span
-            ref={customEmojiMirror}
-            className={styles.composerCustomEmojiMirror}
-            aria-hidden="true"
-          >
-            <span
-              ref={inlineEmojiGroup}
-              className={styles.composerInlineCustomEmojiGroup}
-              data-composer-inline-emoji=""
-            >
-              {customEmojiSources.map(({ start, end, key, source }) => (
-                <img
-                  key={key}
-                  className={styles.composerCustomEmoji}
-                  data-selected={
-                    (selection.start < end && selection.end > start) ||
-                    undefined
-                  }
-                  src={source}
-                  alt=""
-                  onError={() => setFailedCustomEmoji(source)}
-                />
-              ))}
-            </span>
-            <span data-composer-inline-text="">
-              {draft.slice(leadingCustomEmoji.end)}
-            </span>
-            <span
-              ref={inlinePrefixMeasure}
-              className={styles.composerCustomEmojiPrefixMeasure}
-              data-composer-custom-emoji-prefix=""
-            >
-              {draft.slice(0, leadingCustomEmoji.end)}
-            </span>
-          </span>
-        )}
       </div>
       {!!value.recipients.length && (
         <section
diff --git a/src/features/messages/MessageMarkdown.test.tsx b/src/features/messages/MessageMarkdown.test.tsx
index 4ae65206..a21a32cf 100644
--- a/src/features/messages/MessageMarkdown.test.tsx
+++ b/src/features/messages/MessageMarkdown.test.tsx
@@ -16,6 +16,7 @@ import { CustomEmoji } from "../../bundled/emoji/CustomEmoji";
 import { emojiMatches } from "../relay/emoji";
 import { profileTarget } from "../profiles/target";
 import styles from "./Messages.module.css";
+import { LinkLabel } from "../../bundled/links/InlineLink";
 import { MessageMarkdown } from "./MessageMarkdown";
 import { safeMessageUrl } from "../relay/message-content";
 import type { ChannelMessage } from "../relay/contracts";
@@ -72,18 +73,21 @@ function elements(node: ReactNode): ReactElement<Record<string, unknown>>[] {
   return [node, ...elements(node.props.children as ReactNode)];
 }
 function profileButtons(content: string, options: RenderOptions = {}) {
-  const markdown = elements(MessageMarkdown(props(content, options))).find(
-    (node) => node.type === Markdown,
-  );
+  const rendered = elements(MessageMarkdown(props(content, options)));
+  const markdown = rendered.find((node) => node.type === Markdown);
   if (!markdown) throw new Error("Missing Markdown");
   const parsed = Markdown(markdown.props as ComponentProps<typeof Markdown>);
-  const Span = (markdown.props.components as Components).span as (
-    props: ComponentProps<"span">,
-  ) => ReactNode;
-  if (typeof Span !== "function") throw new Error("Missing inline renderer");
+  const Span = (markdown.props.components as Components).span;
+  const renderSpan = (
+    rendered.find((node) =>
+      Boolean((node.props.value as Components | undefined)?.span),
+    )?.props.value as Components | undefined
+  )?.span as (props: ComponentProps<"span">) => ReactNode;
+  if (typeof renderSpan !== "function")
+    throw new Error("Missing inline renderer");
   return elements(parsed)
     .filter((node) => node.type === Span)
-    .flatMap((node) => elements(Span(node.props)))
+    .flatMap((node) => elements(renderSpan(node.props)))
     .filter((node) => node.type === "button");
 }
 
@@ -208,9 +212,9 @@ second
 describe("Markdown profile mentions", () => {
   it("binds exact signed names longest-first through surrounding emphasis", () => {
     const html = render("**@Mic Smith**, _@Mic_! @Other @Missing @Microscopic");
-    expect(html).toContain(
-      `<strong><button type="button" class="${styles.mention}" aria-label="View Mic Smith profile">@Mic Smith</button></strong>`,
-    );
+    expect(html).toContain("<strong><button");
+    expect(html).toContain('aria-label="View Mic Smith profile"');
+    expect(html).toContain("</svg>Mic Smith</button></strong>");
     // The raw helper conservatively treats trailing underscore as a name suffix.
     expect(html.match(/<button/g)).toHaveLength(1);
     expect(html).toContain("<em>@Mic</em>");
@@ -226,9 +230,8 @@ describe("Markdown profile mentions", () => {
       emoji: [party],
       extensions,
     });
-    expect(html).toContain(
-      `aria-label="View ${name} profile">@${name}</button></strong>`,
-    );
+    expect(html).toContain(`aria-label="View ${name} profile"`);
+    expect(html).toContain(`</svg>${name}</button></strong>`);
     expect(html).not.toContain("<em>");
     expect(html).not.toContain("<img");
   });
@@ -425,3 +428,71 @@ describe("Markdown inline extensions", () => {
     );
   });
 });
+
+it.each([false, true])(
+  "retains formatting inside labeled links (plugin enabled: %s)",
+  (enabled) => {
+    const links = {
+      snapshot: () =>
+        enabled
+          ? [
+              {
+                id: "link",
+                title: "Links",
+                key: "links/link",
+                pluginId: "links",
+                revision: "one",
+                matches: () => true,
+                component: ({ url }: { url: string }) => (
+                  <LinkLabel href={url} />
+                ),
+              },
+            ]
+          : [],
+      subscribe: () => () => {},
+    };
+    const html = render(
+      "[**Important** or `code`](https://github.com/block/buzz-app)",
+      { extensions: { ...extensions, links } },
+    );
+    expect(html).toContain("<strong>Important</strong>");
+    expect(html).toContain("<code>code</code>");
+    expect(html).toContain('href="https://github.com/block/buzz-app"');
+    expect(html.includes('data-link-kind="github"')).toBe(enabled);
+  },
+);
+
+it("keeps resolved channel labels for Buzz autolinks", () => {
+  const entry = {
+    id: "link",
+    title: "Links",
+    key: "links/link",
+    pluginId: "links",
+    revision: "one",
+    matches: () => true,
+    component: ({ url }: { url: string }) => <LinkLabel href={url} />,
+  };
+  const href = `buzz://message?channel=design&id=${"a".repeat(64)}`;
+  const html = render(`<${href}> <buzz://channel/design>`, {
+    directory: {
+      profiles: new Map(),
+      agents: [],
+      channels: [
+        {
+          id: "design",
+          name: "design",
+          channelType: "forum",
+        },
+      ],
+    },
+    extensions: {
+      ...extensions,
+      links: { snapshot: () => [entry], subscribe: () => () => {} },
+    },
+  });
+  expect(html).toContain('data-link-kind="message"');
+  expect(html).toContain('data-link-kind="channel"');
+  const text = html.replace(/<[^>]*>/g, "");
+  expect(text).toContain("design");
+  expect(text).not.toContain("buzz://");
+});
diff --git a/src/features/messages/MessageMarkdown.tsx b/src/features/messages/MessageMarkdown.tsx
index b6284e5d..08e48c0a 100644
--- a/src/features/messages/MessageMarkdown.tsx
+++ b/src/features/messages/MessageMarkdown.tsx
@@ -1,5 +1,28 @@
-import type { AnchorHTMLAttributes, MouseEvent } from "react";
-import Markdown, { type Components, type UrlTransform } from "react-markdown";
+import {
+  Children,
+  createContext,
+  isValidElement,
+  useContext,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+import type { RelaySession } from "../relay/session";
+import { MessageLink } from "../conversation/MessageLink";
+import { parseBuzzLink } from "../navigation/buzz-links";
+import { messageLinkParts, normalizeWrappedLinks } from "./message-link-parts";
+import {
+  ReferenceText,
+  channelLinkLabel,
+  emptyReferenceDirectory,
+} from "./ReferenceText";
+import { IconAt, IconRobot } from "@tabler/icons-react";
+import { profileKey } from "../profiles/target";
+import referenceStyles from "../../shared/InlineReference.module.css";
+import Markdown, {
+  type Components,
+  type ExtraProps,
+  type UrlTransform,
+} from "react-markdown";
 import remarkBreaks from "remark-breaks";
 import remarkGfm from "remark-gfm";
 import type { ConversationExtensions } from "../conversation/contracts";
@@ -201,69 +224,138 @@ function remarkInlineContent(protectedContent: ProtectedContent) {
   };
 }
 
-const transformUrl: UrlTransform = (value) => safeMessageUrl(value);
+const transformUrl: UrlTransform = (value) =>
+  parseBuzzLink(value) ? value : safeMessageUrl(value);
+const labelText = (children: ReactNode): string =>
+  Children.toArray(children)
+    .map((child) =>
+      isValidElement<{ children?: ReactNode }>(child)
+        ? labelText(child.props.children)
+        : String(child),
+    )
+    .join("");
 
-function MessageLink({
-  href,
-  onOpenLink,
-  children,
-  ...props
-}: AnchorHTMLAttributes<HTMLAnchorElement> & {
-  onOpenLink(url: string): boolean;
-}) {
-  const url = href ? safeMessageUrl(href) : undefined;
-  if (!url) return <span>{children}</span>;
-  return (
-    <a
-      {...props}
-      href={url}
-      title={url}
-      target="_blank"
-      rel="noopener noreferrer"
-      onClick={(event: MouseEvent<HTMLAnchorElement>) => {
-        if (
-          !event.metaKey &&
-          !event.ctrlKey &&
-          !event.shiftKey &&
-          onOpenLink(url)
-        )
-          event.preventDefault();
-      }}
-    >
-      {children}
-    </a>
-  );
+type MessageComponents = {
+  [Tag in "p" | "a" | "img" | "span"]: (
+    props: ComponentPropsWithoutRef<Tag> & ExtraProps,
+  ) => ReactNode;
+};
+const MessageComponentsContext = createContext<MessageComponents | null>(null);
+function useMessageComponents() {
+  const components = useContext(MessageComponentsContext);
+  if (!components) throw new Error("Missing message rendering context");
+  return components;
 }
+// Keep component types stable: profile/directory updates must not remount a
+// focused link or discard its pending preview timer.
+const markdownComponents: Components = {
+  p: (props) => useMessageComponents().p(props),
+  a: (props) => useMessageComponents().a(props),
+  img: (props) => useMessageComponents().img(props),
+  span: (props) => useMessageComponents().span(props),
+};
 
 export function MessageMarkdown({
   row,
+  directory = emptyReferenceDirectory,
+  session,
+  scope,
   extensions,
   media,
   onOpenLink,
   canOpenLink,
   participantProfiles,
   largeEmoji = false,
+  interactive = true,
 }: {
   row: ChannelMessage;
+  directory?: typeof emptyReferenceDirectory;
+  session?: RelaySession | undefined;
+  scope?: string | undefined;
   extensions?: ConversationExtensions | undefined;
   media(url: string): string | undefined;
   onOpenLink(url: string): boolean;
   canOpenLink?: ((target: string) => boolean) | undefined;
   participantProfiles?: ReadonlyMap<string, Profile> | undefined;
   largeEmoji?: boolean | undefined;
+  interactive?: boolean;
 }) {
   if (row.content.length > MAX_MARKDOWN_LENGTH)
     return <div className={styles.plainText}>{row.content}</div>;
-  const scan = scanMarkdown(row.content);
+  let scan = scanMarkdown(row.content);
   if (scan.tooDeep)
     return <div className={styles.plainText}>{row.content}</div>;
 
+  const literalRanges: { start: number; end: number }[] = [];
+  const collectLiterals = (node: MarkdownNode) => {
+    if (literalContext(node.type) && node.type !== "link") {
+      const start = node.position?.start.offset,
+        end = node.position?.end.offset;
+      if (start !== undefined && end !== undefined)
+        literalRanges.push({ start, end });
+    } else for (const child of node.children ?? []) collectLiterals(child);
+  };
+  collectLiterals(scan.tree);
+  const normalized = normalizeWrappedLinks(row.content, (start, end) =>
+    literalRanges.some((range) => start < range.end && end > range.start),
+  );
+  if (normalized !== row.content) {
+    row = { ...row, content: normalized };
+    scan = scanMarkdown(normalized);
+  }
+  const renderLink = (url: string, label?: string, children?: ReactNode) => (
+    <MessageLink
+      url={url}
+      label={label ?? channelLinkLabel(url, scope, directory.channels)}
+      registry={extensions?.links}
+      onOpenLink={onOpenLink}
+      session={session}
+      scope={scope}
+      interactive={interactive}
+    >
+      {children}
+    </MessageLink>
+  );
+  const renderInline = (text: string) =>
+    extensions ? (
+      <InlineText
+        registry={extensions.inline}
+        content={{ text, message: row }}
+        media={media}
+      />
+    ) : (
+      text
+    );
+  const renderText = (text: string) => {
+    let offset = 0;
+    return messageLinkParts(text).map((part) => {
+      const key = `${offset}:${part.text}`;
+      offset += part.text.length;
+      return part.url ? (
+        <span key={key}>{renderLink(part.url, part.label)}</span>
+      ) : (
+        <ReferenceText
+          key={key}
+          text={part.text}
+          mentions={[]}
+          directory={directory}
+          renderText={renderInline}
+          onOpenLink={onOpenLink}
+          extensions={extensions}
+          session={session}
+          scope={scope}
+          interactive={interactive}
+        />
+      );
+    });
+  };
+
   const protectedContent = protectInlineContent(
     row,
-    participantProfiles,
+    participantProfiles ?? directory.profiles,
     scan.tree,
   );
-  const components: Components = {
+  const components: MessageComponents = {
     p: ({ node: _node, ...props }) => (
       <p
         {...props}
@@ -271,9 +363,16 @@ export function MessageMarkdown({
         data-single-emoji={largeEmoji || undefined}
       />
     ),
-    a: ({ node: _node, ...props }) => (
-      <MessageLink {...props} onOpenLink={onOpenLink} />
-    ),
+    a: ({ href, children }) =>
+      href ? (
+        renderLink(
+          href,
+          labelText(children) === href ? undefined : labelText(children),
+          labelText(children) === href ? undefined : children,
+        )
+      ) : (
+        <span>{children}</span>
+      ),
     img: ({ node: _node, alt }) =>
       alt ? <span className={styles.imageAlt}>{alt}</span> : null,
     span: ({ node: _node, children, ...props }) => {
@@ -285,32 +384,37 @@ export function MessageMarkdown({
       if (
         typeof text === "string" &&
         typeof target === "string" &&
-        canOpenLink?.(target)
+        (!interactive || canOpenLink?.(target))
       ) {
+        const agent = directory.agents.some(
+          (agent) => agent.pubkey === profileKey(target),
+        );
+        const Icon = agent ? IconRobot : IconAt;
+        const Mention = interactive ? "button" : "span";
         return (
-          <button
-            type="button"
-            className={styles.mention}
-            aria-label={`View ${text.slice(1)} profile`}
-            onClick={(event) => {
-              event.currentTarget.focus();
-              onOpenLink(target);
-            }}
+          <Mention
+            type={interactive ? "button" : undefined}
+            className={referenceStyles.link}
+            data-mention-kind={agent ? "agent" : "person"}
+            aria-label={
+              interactive ? `View ${text.slice(1)} profile` : undefined
+            }
+            onClick={
+              interactive
+                ? (event) => {
+                    event.currentTarget.focus();
+                    onOpenLink(target);
+                  }
+                : undefined
+            }
           >
-            {text}
-          </button>
+            <Icon aria-hidden="true" className={referenceStyles.icon} />
+            {text.slice(1)}
+          </Mention>
         );
       }
       return typeof text === "string" ? (
-        extensions ? (
-          <InlineText
-            registry={extensions.inline}
-            content={{ text, message: row }}
-            media={media}
-          />
-        ) : (
-          text
-        )
+        renderText(text)
       ) : (
         <span {...props}>{children}</span>
       );
@@ -318,18 +422,20 @@ export function MessageMarkdown({
   };
 
   const markdown = (
-    <Markdown
-      remarkPlugins={[
-        remarkGfm,
-        remarkBreaks,
-        [remarkInlineContent, protectedContent],
-      ]}
-      components={components}
-      skipHtml
-      urlTransform={transformUrl}
-    >
-      {protectedContent.content}
-    </Markdown>
+    <MessageComponentsContext value={components}>
+      <Markdown
+        remarkPlugins={[
+          remarkGfm,
+          remarkBreaks,
+          [remarkInlineContent, protectedContent],
+        ]}
+        components={markdownComponents}
+        skipHtml
+        urlTransform={transformUrl}
+      >
+        {protectedContent.content}
+      </Markdown>
+    </MessageComponentsContext>
   );
   return largeEmoji ? markdown : <div className={styles.text}>{markdown}</div>;
 }
diff --git a/src/features/messages/MessageRow.test.tsx b/src/features/messages/MessageRow.test.tsx
index 82bfd704..224d9ffd 100644
--- a/src/features/messages/MessageRow.test.tsx
+++ b/src/features/messages/MessageRow.test.tsx
@@ -5,6 +5,7 @@ import { keypair, message, signed } from "../relay/testing";
 import { MessageRow } from "./MessageRow";
 import type { ChannelMessage } from "../relay/contracts";
 import type { UnreadCapability, UnreadSnapshot } from "../relay/unread";
+import { LinkLabel } from "../../bundled/links/InlineLink";
 
 const row: ChannelMessage = {
   id: "root",
@@ -18,6 +19,61 @@ const row: ChannelMessage = {
   reactions: [],
   replyCount: 23,
 };
+it.each(["bare", "angle", "markdown", "escaped"] as const)(
+  "renders link contributions inside message prose, preserving punctuation and plain-link fallback (%s)",
+  (format) => {
+    const url = "https://github.com/block/buzz/issues/1234";
+    const label =
+      format === "markdown" || format === "escaped" ? "Repository" : url;
+    const content = {
+      bare: url,
+      angle: `<${url}>`,
+      markdown: `[Repository](${url})`,
+      escaped: `[Repository]\\([${url}](${url}))`,
+    }[format];
+    const entry = {
+      id: "link",
+      title: "Link",
+      key: "buzz.links/link",
+      pluginId: "buzz.links",
+      revision: "one",
+      matches: () => true,
+      component: ({ url }: { url: string }) => <LinkLabel href={url} />,
+    };
+    const render = (enabled: boolean) =>
+      renderToStaticMarkup(
+        <MessageRow
+          row={{
+            ...row,
+            content: `Before ${content}. After`,
+            replyCount: 0,
+          }}
+          profile={undefined}
+          media={() => undefined}
+          onOpenLink={() => false}
+          day={false}
+          retry={undefined}
+          extensions={{
+            tools: { snapshot: () => [], subscribe: () => () => {} },
+            inline: { snapshot: () => [], subscribe: () => () => {} },
+            links: {
+              snapshot: () => (enabled ? [entry] : []),
+              subscribe: () => () => {},
+            },
+          }}
+        />,
+      );
+    const enabled = render(true);
+    expect(enabled).toContain(`href="${url}"`);
+    expect(enabled).toContain('data-link-kind="github"');
+    expect(enabled.replace(/<[^>]+>/g, "")).toContain(`Before ${label}. After`);
+    expect(enabled).not.toContain("&lt;");
+    expect(enabled).not.toContain("&gt;");
+    expect(render(false)).not.toContain("data-link-kind");
+    expect(render(false)).toContain(`>${label}</a>`);
+  },
+);
+
 it.each([
   ["😀 🙏 👏 😄", [], true],
   ["😀".repeat(40), [], true],
diff --git a/src/features/messages/MessageRow.tsx b/src/features/messages/MessageRow.tsx
index 9df2eb1d..f112d9e0 100644
--- a/src/features/messages/MessageRow.tsx
+++ b/src/features/messages/MessageRow.tsx
@@ -1,4 +1,5 @@
 import { memo, useCallback, useSyncExternalStore } from "react";
+import type { RelaySession } from "../relay/session";
 import type { UnreadCapability } from "../relay/unread";
 import { profileTarget } from "../profiles/target";
 import { InlineText } from "../conversation/InlineText";
@@ -6,12 +7,12 @@ import type { ConversationExtensions } from "../conversation/contracts";
 import type { ChannelMessage, Profile } from "../relay/contracts";
 import { AttachmentImage } from "./AttachmentImage";
 import { DeliveryNotice } from "./DeliveryNotice";
+import { useReferenceDirectory } from "./ReferenceText";
 import { MessageMarkdown } from "./MessageMarkdown";
 import { safeMessageUrl } from "../relay/message-content";
 import styles from "./Messages.module.css";
 import { usesLargeEmojiPresentation } from "./emoji-size";
 import { ReactionTool } from "../conversation/ReactionTool";
-import type { RelaySession } from "../relay/session";
 
 const emptySubscribe = () => () => {};
 const EMPTY_CHANNEL_LIST = Object.freeze({
@@ -53,6 +54,7 @@ export const MessageRow = memo(function MessageRow({
   onOpenThread,
   participantProfiles,
 }: MessageRowProps) {
+  const directory = useReferenceDirectory(session, row.mentions.length > 0);
   const threadUnread = useThreadUnread(
     row.replyCount > 0 && onOpenThread ? unread : undefined,
     row.channelId,
@@ -131,6 +133,9 @@ export const MessageRow = memo(function MessageRow({
             </time>
           </div>
           <MessageMarkdown
+            directory={directory}
+            session={session}
+            scope={scope}
             row={row}
             extensions={extensions}
             media={media}
diff --git a/src/features/messages/Messages.module.css b/src/features/messages/Messages.module.css
index 37511088..b45d913e 100644
--- a/src/features/messages/Messages.module.css
+++ b/src/features/messages/Messages.module.css
@@ -129,12 +129,12 @@
   font-size: calc(42px * var(--buzz-text-scale, 1));
   line-height: calc(42px * var(--buzz-text-scale, 1));
 }
-.text a {
+.text a:not([data-link-renderer]) {
   color: inherit;
   text-decoration: underline;
   text-underline-offset: 2px;
 }
-.text a:hover {
+.text a:not([data-link-renderer]):hover {
   text-decoration: underline;
 }
 .reactions {
@@ -233,95 +233,6 @@
   position: relative;
   width: 100%;
 }
-.composerInput:has(textarea[data-custom-emoji-only]) {
-  overflow: hidden;
-}
-.composer textarea {
-  position: relative;
-  z-index: 1;
-  display: block;
-  width: 100%;
-  resize: none;
-  min-height: 3rem;
-  max-height: 12rem;
-  border: 0;
-  padding: 0;
-  font: inherit;
-  line-height: 1.5;
-  background: transparent;
-  color: inherit;
-}
-.composer textarea[data-single-emoji] {
-  height: calc(48px * var(--buzz-text-scale, 1));
-  min-height: calc(48px * var(--buzz-text-scale, 1));
-  font-size: calc(42px * var(--buzz-text-scale, 1));
-  line-height: calc(48px * var(--buzz-text-scale, 1));
-}
-.composer textarea[data-custom-emoji-only] {
-  height: calc(48px * var(--buzz-text-scale, 1));
-  min-height: calc(48px * var(--buzz-text-scale, 1));
-  color: transparent;
-  /* Collapse hidden shortcode advances without collapsing the native caret. */
-  font-family: monospace;
-  font-size: inherit;
-  letter-spacing: -1ch;
-  line-height: calc(48px * var(--buzz-text-scale, 1));
-  caret-color: var(--text);
-}
-.composer textarea[data-leading-custom-emoji] {
-  color: transparent;
-  caret-color: var(--text);
-}
-.composerCustomEmojiGroup {
-  position: absolute;
-  top: 3px;
-  left: 0;
-  right: 0;
-  display: flex;
-  flex-wrap: wrap;
-  gap: calc(6px * var(--buzz-text-scale, 1))
-    calc(2px * var(--buzz-text-scale, 1));
-  pointer-events: none;
-}
-.composerCustomEmoji {
-  flex-shrink: 0;
-  width: calc(42px * var(--buzz-text-scale, 1));
-  height: calc(42px * var(--buzz-text-scale, 1));
-  object-fit: contain;
-}
-.composerCustomEmoji[data-selected] {
-  border-radius: 2px;
-  outline: 2px solid color-mix(in srgb, var(--primary) 35%, transparent);
-  opacity: 0.65;
-}
-.composerCustomEmojiMirror {
-  position: absolute;
-  z-index: 0;
-  inset: 0;
-  overflow: auto;
-  scrollbar-width: none;
-  white-space: pre-wrap;
-  overflow-wrap: break-word;
-  color: var(--text);
-  font: inherit;
-  line-height: 1.5;
-  pointer-events: none;
-}
-.composerInlineCustomEmojiGroup {
-  display: inline-flex;
-  gap: calc(2px * var(--buzz-text-scale, 1));
-  vertical-align: middle;
-}
-.composerInlineCustomEmojiGroup .composerCustomEmoji {
-  width: calc(22px * var(--buzz-text-scale, 1));
-  height: calc(22px * var(--buzz-text-scale, 1));
-}
-.composerCustomEmojiPrefixMeasure {
-  position: absolute;
-  visibility: hidden;
-  white-space: pre;
-  font: inherit;
-}
 .composerActions {
   position: relative;
   display: flex;
@@ -357,12 +268,6 @@
   border-radius: 999px;
   padding: 6px 14px;
 }
-.composer textarea::placeholder {
-  color: var(--text-muted);
-}
-.composer textarea:focus-visible {
-  outline: none;
-}
 .composer:focus-within {
   border-color: var(--focus);
   box-shadow: 0 0 0 1px var(--focus);
@@ -640,13 +545,13 @@
   vertical-align: middle;
   accent-color: var(--primary);
 }
-.text a {
+.text a:not([data-link-renderer]) {
   color: var(--link);
   text-decoration: underline;
   text-decoration-thickness: 1px;
   text-underline-offset: 2px;
 }
-.text a:hover {
+.text a:not([data-link-renderer]):hover {
   text-decoration-thickness: 2px;
 }
 .imageAlt {
diff --git a/src/features/messages/ReferenceText.tsx b/src/features/messages/ReferenceText.tsx
new file mode 100644
index 00000000..20ae0e02
--- /dev/null
+++ b/src/features/messages/ReferenceText.tsx
@@ -0,0 +1,143 @@
+import { useEffect, useSyncExternalStore, type ReactNode } from "react";
+import { IconAt, IconRobot } from "@tabler/icons-react";
+import type { RelaySession } from "../relay/session";
+import type { Profile, ChannelSummary } from "../relay/contracts";
+import { messageReferences } from "./message-references";
+import { MessageLink } from "../conversation/MessageLink";
+import type { ConversationExtensions } from "../conversation/contracts";
+import { parseBuzzLink } from "../navigation/buzz-links";
+import type { AgentLibrary } from "../agents/library";
+import styles from "../../shared/InlineReference.module.css";
+
+const emptyProfiles: ReadonlyMap<string, Profile> = new Map();
+const emptyChannels: readonly ChannelSummary[] = [];
+const emptyAgents: AgentLibrary["identities"] = [];
+export const emptyReferenceDirectory = {
+  profiles: emptyProfiles,
+  channels: emptyChannels,
+  agents: emptyAgents,
+};
+const noop = () => () => {};
+const profilesSnapshot = () => emptyProfiles;
+const channelsSnapshot = () => undefined;
+const agentsSnapshot = () => undefined;
+
+export function useReferenceDirectory(
+  session: RelaySession | undefined,
+  hasMentions: boolean,
+) {
+  const profiles = useSyncExternalStore(
+    session?.profiles?.subscribe ?? noop,
+    session?.profiles?.snapshot ?? profilesSnapshot,
+    profilesSnapshot,
+  );
+  const channels = useSyncExternalStore(
+    session?.channels?.subscribeList ?? noop,
+    session?.channels?.list ?? channelsSnapshot,
+    channelsSnapshot,
+  );
+  const agents = useSyncExternalStore(
+    session?.agentLibrary?.subscribe ?? noop,
+    session?.agentLibrary?.snapshot ?? agentsSnapshot,
+    agentsSnapshot,
+  );
+  useEffect(() => {
+    if (hasMentions && agents?.status === "idle")
+      void session?.agentLibrary.refresh();
+  }, [session, hasMentions, agents?.status]);
+  return {
+    profiles,
+    channels: channels?.channels ?? emptyChannels,
+    agents: agents?.identities ?? emptyAgents,
+  };
+}
+
+export function channelLinkLabel(
+  url: string,
+  scope: string | undefined,
+  channels: readonly ChannelSummary[],
+) {
+  const parsed = parseBuzzLink(url);
+  const target =
+    parsed?.format === "legacy"
+      ? parsed
+      : parsed?.target.kind === "conversation" &&
+          parsed.target.scope.communityOrigin === scope?.slice(0, -65)
+        ? parsed.target
+        : undefined;
+  const channel =
+    target && channels.find((item) => item.id === target.channelId);
+  return channel
+    ? `${channel.channelType === "dm" || target.messageId ? "" : "#"}${channel.name}`
+    : undefined;
+}
+
+export function ReferenceText({
+  text,
+  mentions,
+  directory,
+  renderText,
+  onOpenLink,
+  extensions,
+  session,
+  scope,
+  interactive = true,
+}: {
+  text: string;
+  mentions: readonly string[];
+  directory: ReturnType<typeof useReferenceDirectory>;
+  renderText(text: string): ReactNode;
+  onOpenLink(url: string): boolean;
+  extensions?: ConversationExtensions | undefined;
+  session?: RelaySession | undefined;
+  scope?: string | undefined;
+  interactive?: boolean;
+}) {
+  const references = messageReferences(
+    text,
+    mentions,
+    directory.profiles,
+    directory.channels,
+    directory.agents,
+  );
+  if (!references.length) return renderText(text);
+  const parts: ReactNode[] = [];
+  let offset = 0;
+  for (const reference of references) {
+    parts.push(
+      <span key={`text:${offset}`}>
+        {renderText(text.slice(offset, reference.start))}
+      </span>,
+    );
+    const Icon = reference.kind === "agent" ? IconRobot : IconAt;
+    parts.push(
+      reference.kind === "channel" ? (
+        <MessageLink
+          key={reference.start}
+          url={`buzz://channel/${encodeURIComponent(reference.id)}`}
+          label={reference.label}
+          registry={extensions?.links}
+          onOpenLink={onOpenLink}
+          session={session}
+          scope={scope}
+          interactive={interactive}
+        />
+      ) : (
+        <span
+          key={reference.start}
+          className={styles.link}
+          data-mention-kind={reference.kind}
+          title={`${reference.kind === "agent" ? "Agent" : "Person"}: ${reference.label.slice(1)}\n${reference.id}`}
+        >
+          <Icon aria-hidden="true" className={styles.icon} />
+          {reference.label.slice(1)}
+        </span>
+      ),
+    );
+    offset = reference.end;
+  }
+  parts.push(
+    <span key={`text:${offset}`}>{renderText(text.slice(offset))}</span>,
+  );
+  return <>{parts}</>;
+}
diff --git a/src/features/messages/RichComposerInput.tsx b/src/features/messages/RichComposerInput.tsx
new file mode 100644
index 00000000..909c3b3f
--- /dev/null
+++ b/src/features/messages/RichComposerInput.tsx
@@ -0,0 +1,131 @@
+import type { ConversationExtensions } from "../conversation/contracts";
+import type { CustomEmoji } from "../relay/emoji";
+import type { RelaySession } from "../relay/session";
+import { scanMarkdown } from "../relay/message-content";
+import { MessageMarkdown } from "./MessageMarkdown";
+import type { MentionDraft } from "./mention-draft";
+import { useReferenceDirectory } from "./ReferenceText";
+import { messageLinkParts } from "./message-link-parts";
+import { messageReferences } from "./message-references";
+import { EditableInput, type EditableInputProps } from "./EditableInput";
+
+/** Decorations never change source text or infer notification recipients from names. */
+export function RichComposerInput({
+  draft,
+  session,
+  scope,
+  channelId,
+  extensions,
+  emoji,
+  ...input
+}: EditableInputProps & {
+  draft: MentionDraft;
+  session: RelaySession;
+  scope: string;
+  channelId: string;
+  extensions: ConversationExtensions | undefined;
+  emoji: readonly CustomEmoji[];
+}) {
+  const directory = useReferenceDirectory(session, draft.recipients.length > 0);
+  const profiles = new Map(directory.profiles);
+  for (const recipient of draft.recipients)
+    profiles.set(recipient.pubkey, {
+      ...profiles.get(recipient.pubkey),
+      name: recipient.name,
+    });
+  const { tree, tooDeep } = scanMarkdown(draft.text);
+  const literals: { start: number; end: number }[] = [];
+  const pending = [tree];
+  while (pending.length) {
+    const node = pending.pop();
+    if (!node) continue;
+    if (
+      [
+        "code",
+        "inlineCode",
+        "image",
+        "imageReference",
+        "definition",
+        "html",
+      ].includes(node.type)
+    ) {
+      const start = node.position?.start.offset,
+        end = node.position?.end.offset;
+      if (start !== undefined && end !== undefined)
+        literals.push({ start, end });
+    } else pending.push(...(node.children ?? []));
+  }
+  const ranges: {
+    start: number;
+    end: number;
+    mention?: string;
+    editAsText?: boolean;
+  }[] = [];
+  const add = (
+    start: number,
+    end: number,
+    mention?: string,
+    editAsText = false,
+  ) => {
+    if (
+      !tooDeep &&
+      ![...literals, ...ranges].some(
+        (range) => start < range.end && end > range.start,
+      )
+    )
+      ranges.push({ start, end, editAsText, ...(mention ? { mention } : {}) });
+  };
+  messageLinkParts(draft.text, undefined, (start, end) =>
+    add(start, end, undefined, true),
+  );
+  for (const recipient of draft.recipients)
+    add(recipient.start, recipient.end, recipient.pubkey);
+  for (const reference of messageReferences(
+    draft.text,
+    [],
+    profiles,
+    directory.channels,
+    directory.agents,
+  ))
+    add(reference.start, reference.end, undefined, true);
+  const renderableEmoji = emoji.filter((entry) => !!session.media(entry.url));
+  const shortcodes = new Set(
+    renderableEmoji.map((entry) => entry.shortcode.toLowerCase()),
+  );
+  for (const match of draft.text.matchAll(/:([a-z0-9_-]{1,64}):/gi))
+    if (shortcodes.has(match[1]?.toLowerCase() ?? ""))
+      add(match.index, match.index + match[0].length);
+  const decorations = ranges
+    .sort((a, b) => a.start - b.start)
+    .map(({ start, end, mention, editAsText }) => ({
+      start,
+      end,
+      editAsText: !!editAsText,
+      content: (
+        <MessageMarkdown
+          row={{
+            id: "composer",
+            authorId: "",
+            createdAt: 0,
+            channelId,
+            content: draft.text.slice(start, end),
+            mentions: mention ? [mention] : [],
+            emoji: renderableEmoji,
+            participants: [],
+            attachments: [],
+            reactions: [],
+            replyCount: 0,
+          }}
+          directory={directory}
+          participantProfiles={profiles}
+          session={session}
+          scope={scope}
+          extensions={extensions}
+          media={session.media}
+          onOpenLink={() => false}
+          interactive={false}
+        />
+      ),
+    }));
+  return <EditableInput {...input} decorations={decorations} />;
+}
diff --git a/src/features/messages/ThreadPanel.test.tsx b/src/features/messages/ThreadPanel.test.tsx
index 399ff569..f1a84d19 100644
--- a/src/features/messages/ThreadPanel.test.tsx
+++ b/src/features/messages/ThreadPanel.test.tsx
@@ -525,6 +525,15 @@ it("uses the resolved root with the shared composer and reveals an own send even
     channelName: "General",
     threadRootId: "resolved-root",
   });
+  const rootRow = elements(h.tree()).find(
+    (element) =>
+      element.type === MessageRow &&
+      (element.props.row as ChannelMessage).id === "resolved-root",
+  );
+  expect(rootRow?.props).toMatchObject({
+    session: h.session,
+    scope: "scope",
+  });
   expect(elements(h.tree()).some((e) => e.type === "footer")).toBe(false);
   h.scroll(500);
   if (!composer) throw new Error("Missing composer");
@@ -539,7 +548,11 @@ it("uses the resolved root with the shared composer and reveals an own send even
       e.type === MessageRow &&
       (e.props.row as ChannelMessage).id === "own-reply",
   );
-  expect(reply?.props.retry).toBe(h.session.messages.retry);
+  expect(reply?.props).toMatchObject({
+    session: h.session,
+    scope: "scope",
+    retry: h.session.messages.retry,
+  });
   h.snapshot.root = undefined;
   h.render();
   expect(elements(h.tree()).some((e) => e.type === MessageComposer)).toBe(
diff --git a/src/features/messages/ThreadPanel.tsx b/src/features/messages/ThreadPanel.tsx
index 0f2ba70d..e22d0380 100644
--- a/src/features/messages/ThreadPanel.tsx
+++ b/src/features/messages/ThreadPanel.tsx
@@ -320,9 +320,9 @@ function ThreadMessages({
         {snapshot.root ? (
           <MessageRow
             extensions={extensions}
-            row={snapshot.root}
             session={session}
             scope={scope}
+            row={snapshot.root}
             profile={profiles.get(snapshot.root.authorId)}
             participantProfiles={profiles}
             media={session.media}
@@ -345,9 +345,9 @@ function ThreadMessages({
             <li key={row.id}>
               <MessageRow
                 extensions={extensions}
-                row={row}
                 session={session}
                 scope={scope}
+                row={row}
                 profile={profiles.get(row.authorId)}
                 participantProfiles={profiles}
                 media={session.media}
diff --git a/src/features/messages/composer-dom.ts b/src/features/messages/composer-dom.ts
new file mode 100644
index 00000000..30e8798f
--- /dev/null
+++ b/src/features/messages/composer-dom.ts
@@ -0,0 +1,220 @@
+/** Text offsets remain the editor contract, including the source behind inline tokens. */
+export type ComposerInputElement = HTMLDivElement & {
+  value: string;
+  selectionStart: number;
+  selectionEnd: number;
+  selectionDirection: "forward" | "backward" | "none";
+  disabled: boolean;
+  readOnly: boolean;
+  setSelectionRange(start: number, end: number, direction?: string): void;
+};
+
+export function editorText(node: Node): string {
+  if (node.nodeType === Node.TEXT_NODE) return node.textContent ?? "";
+  if (node instanceof HTMLElement) {
+    if (node.dataset.source !== undefined) return node.dataset.source;
+    if (node.tagName === "BR") return node.dataset.placeholder ? "" : "\n";
+  }
+  let text = "";
+  for (const child of node.childNodes) {
+    if (
+      child instanceof HTMLElement &&
+      /^(DIV|P)$/.test(child.tagName) &&
+      text &&
+      !text.endsWith("\n")
+    )
+      text += "\n";
+    text += editorText(child);
+  }
+  if (
+    node instanceof HTMLElement &&
+    node.hasAttribute("data-editor-text") &&
+    text.startsWith("\u200B")
+  )
+    return text.slice(1);
+  return text;
+}
+
+export function sourceOffset(root: HTMLElement, node: Node, offset: number) {
+  const range = root.ownerDocument.createRange();
+  range.selectNodeContents(root);
+  // WebKit can briefly retain the old offset when an input/portal commit replaces
+  // the selected text node. Normalize that transient position before making a Range.
+  const limit =
+    node.nodeType === Node.TEXT_NODE
+      ? (node.textContent?.length ?? 0)
+      : node.childNodes.length;
+  range.setEnd(node, Math.max(0, Math.min(offset, limit)));
+  return editorText(range.cloneContents()).length;
+}
+
+export function editorSelection(root: HTMLElement) {
+  const selection = root.ownerDocument.getSelection();
+  if (
+    !selection?.anchorNode ||
+    !selection.focusNode ||
+    !root.contains(selection.anchorNode) ||
+    !root.contains(selection.focusNode)
+  )
+    return undefined;
+  const anchor = sourceOffset(
+    root,
+    selection.anchorNode,
+    selection.anchorOffset,
+  );
+  const focus = sourceOffset(root, selection.focusNode, selection.focusOffset);
+  return {
+    start: Math.min(anchor, focus),
+    end: Math.max(anchor, focus),
+    backward: anchor > focus,
+  };
+}
+
+/** Noneditable inline content does not reliably receive the browser's selection paint. */
+export function highlightEditorSelection(root: HTMLElement) {
+  const selection = editorSelection(root);
+  let offset = 0;
+  for (const node of root.childNodes) {
+    const length = editorText(node).length;
+    if (node instanceof HTMLElement && node.dataset.source !== undefined)
+      node.toggleAttribute(
+        "data-editor-selected",
+        !!selection &&
+          selection.start < selection.end &&
+          selection.start <= offset &&
+          selection.end >= offset + length,
+      );
+    offset += length;
+  }
+}
+
+/** Native paste/selection restoration can leave a caret inside a noneditable
+ * label. Its source offset is valid, but the browser refuses subsequent typing. */
+export function normalizeTokenCaret(root: ComposerInputElement) {
+  const selection = root.ownerDocument.getSelection();
+  if (
+    !selection?.isCollapsed ||
+    root.ownerDocument.activeElement !== root ||
+    root.disabled ||
+    root.readOnly
+  )
+    return;
+  const node = selection.anchorNode;
+  const token = (
+    node instanceof Element ? node : node?.parentElement
+  )?.closest<HTMLElement>("[data-source]");
+  if (!token?.parentNode || !root.contains(token)) return;
+  const index = [...token.parentNode.childNodes].indexOf(token);
+  const end =
+    sourceOffset(root, token.parentNode, index) + editorText(token).length;
+  root.setSelectionRange(end, end);
+}
+
+export function setEditorSelection(
+  root: HTMLElement,
+  start: number,
+  end: number,
+  backward = false,
+) {
+  // A programmatic selection into a token opens its exact source for editing.
+  let offset = 0;
+  for (const node of [...root.childNodes]) {
+    const length = editorText(node).length;
+    if (
+      node instanceof HTMLElement &&
+      node.dataset.source !== undefined &&
+      ((start > offset && start < offset + length) ||
+        (end > offset && end < offset + length))
+    )
+      node.replaceWith(root.ownerDocument.createTextNode(node.dataset.source));
+    offset += length;
+  }
+  const point = (position: number): [Node, number] => {
+    let offset = 0;
+    for (let index = 0; index < root.childNodes.length; index++) {
+      const node = root.childNodes[index];
+      if (!node) continue;
+      const length = editorText(node).length;
+      if (position <= offset + length) {
+        if (node.nodeType === Node.TEXT_NODE)
+          return [node, Math.max(0, position - offset)];
+        if (
+          node instanceof HTMLElement &&
+          node.hasAttribute("data-editor-text") &&
+          node.firstChild
+        ) {
+          // Pasting can split this editable span before React rebuilds it.
+          node.normalize();
+          return [node.firstChild, Math.max(0, position - offset) + 1];
+        }
+        // Keep the caret in editable text after the rendered item, not in the
+        // parent element at a boundary that browsers can paint before the item.
+        if (
+          position === offset + length &&
+          node.nextSibling?.nodeType === Node.TEXT_NODE
+        )
+          return [node.nextSibling, 0];
+        if (
+          position === offset + length &&
+          node.nextSibling instanceof HTMLElement &&
+          node.nextSibling.hasAttribute("data-editor-text") &&
+          node.nextSibling.firstChild
+        )
+          return [node.nextSibling.firstChild, 1];
+        return [root, position <= offset ? index : index + 1];
+      }
+      offset += length;
+    }
+    return [root, root.childNodes.length];
+  };
+  const first = point(start),
+    last = point(end);
+  root.ownerDocument
+    .getSelection()
+    ?.setBaseAndExtent(
+      ...(backward ? last : first),
+      ...(backward ? first : last),
+    );
+  highlightEditorSelection(root);
+}
+
+/** Open a link's source before the browser performs ordinary text navigation or deletion. */
+export function editAdjacentLink(
+  root: ComposerInputElement,
+  backward: boolean,
+  arrow: boolean,
+  extend: boolean,
+) {
+  if (root.selectionStart !== root.selectionEnd) return;
+  const caret = root.selectionStart;
+  let offset = 0;
+  for (const node of [...root.childNodes]) {
+    const length = editorText(node).length;
+    if (
+      node instanceof HTMLElement &&
+      node.dataset.source !== undefined &&
+      caret === (backward ? offset + length : offset)
+    ) {
+      if (!node.hasAttribute("data-edit-as-text")) {
+        if (arrow && !extend) {
+          const next = backward ? offset : offset + length;
+          root.setSelectionRange(next, next);
+        } else
+          root.setSelectionRange(
+            offset,
+            offset + length,
+            backward ? "backward" : "forward",
+          );
+        return arrow;
+      }
+      const text = root.ownerDocument.createTextNode(node.dataset.source ?? "");
+      node.replaceWith(text);
+      const position = backward ? text.length : 0;
+      root.ownerDocument
+        .getSelection()
+        ?.setBaseAndExtent(text, position, text, position);
+      return false;
+    }
+    offset += length;
+  }
+}
diff --git a/src/features/messages/composer-link-edit.ts b/src/features/messages/composer-link-edit.ts
new file mode 100644
index 00000000..81475f50
--- /dev/null
+++ b/src/features/messages/composer-link-edit.ts
@@ -0,0 +1,67 @@
+type Range = { start: number; end: number };
+export type PlainLink = Range;
+export type ComposerEdit = Range & { text: string };
+
+/** Keep partially deleted links plain while shifting their ranges with other draft edits. */
+export function updatePlainLinks(
+  previous: string,
+  text: string,
+  links: readonly Range[],
+  plain: readonly PlainLink[],
+  edit?: ComposerEdit,
+): PlainLink[] {
+  if (previous === text)
+    return plain.filter(
+      (range) =>
+        !(
+          edit?.text === previous &&
+          edit.start <= range.start &&
+          edit.end >= range.end
+        ),
+    );
+  let start = 0;
+  let end = previous.length;
+  let insertedEnd = text.length;
+  if (edit?.text === previous) {
+    start = edit.start;
+    end = edit.end;
+    insertedEnd = end + text.length - previous.length;
+  } else {
+    // Programmatic edits and undo do not necessarily emit beforeinput.
+    while (
+      start < Math.min(previous.length, text.length) &&
+      previous[start] === text[start]
+    )
+      start++;
+    while (
+      end > start &&
+      insertedEnd > start &&
+      previous[end - 1] === text[insertedEnd - 1]
+    ) {
+      end--;
+      insertedEnd--;
+    }
+  }
+  const delta = text.length - previous.length;
+  const changed = links.filter(
+    (link) =>
+      end > start &&
+      start < link.end &&
+      end > link.start &&
+      !(start <= link.start && end >= link.end),
+  );
+  return [...plain, ...changed].flatMap((range) => {
+    if (start <= range.start && end >= range.end) return [];
+    const next =
+      end <= range.start
+        ? { ...range, start: range.start + delta, end: range.end + delta }
+        : start >= range.end
+          ? range
+          : {
+              ...range,
+              start: Math.min(range.start, start),
+              end: Math.max(insertedEnd, range.end + delta),
+            };
+    return next.start < next.end ? [next] : [];
+  });
+}
diff --git a/src/features/messages/message-link-parts.test.ts b/src/features/messages/message-link-parts.test.ts
new file mode 100644
index 00000000..60878005
--- /dev/null
+++ b/src/features/messages/message-link-parts.test.ts
@@ -0,0 +1,200 @@
+import { expect, it } from "vitest";
+import { messageLinkParts } from "./message-link-parts";
+import { targetLink } from "../navigation/targets";
+
+it("recognizes bare and wrapped Buzz channel, message, thread and shared links", () => {
+  const urls = [
+    "buzz://channel/general",
+    `buzz://message?channel=general&id=${"a".repeat(64)}`,
+    `buzz://message?channel=general&id=${"a".repeat(64)}&thread=${"b".repeat(64)}`,
+    targetLink({ version: 1, kind: "home" }),
+  ];
+  for (const url of urls) {
+    for (const text of [url, `<${url}>`]) {
+      const parts = messageLinkParts(`See ${text}.`);
+      expect(parts.filter((part) => part.url)).toEqual([{ text: url, url }]);
+      expect(parts.map((part) => part.text).join("")).toBe(`See ${url}.`);
+    }
+  }
+});
+it("does not turn malformed Buzz addresses into links", () => {
+  const content = "<buzz://message?channel=general&id=bad>";
+  expect(messageLinkParts(content).some((part) => part.url)).toBe(false);
+  expect(
+    messageLinkParts(content)
+      .map((part) => part.text)
+      .join(""),
+  ).toBe(content);
+});
+
+it("recognizes bare and wrapped URL schemes case-insensitively", () => {
+  const urls = ["BUZZ://channel/general", "HTTPS://example.com/docs"];
+  for (const url of urls) {
+    for (const text of [url, `<${url}>`]) {
+      const parts = messageLinkParts(`See ${text}.`);
+      expect(parts.filter((part) => part.url)).toEqual([{ text: url, url }]);
+      expect(parts.map((part) => part.text).join("")).toBe(`See ${url}.`);
+    }
+  }
+});
+
+it("removes only paired autolink brackets and preserves surrounding punctuation", () => {
+  const parts = messageLinkParts(
+    "See <https://drive.google.com/file/d/example>, then <https://example.com/path?q=hello!>.",
+  );
+  expect(parts.filter((part) => part.url).map((part) => part.url)).toEqual([
+    "https://drive.google.com/file/d/example",
+    "https://example.com/path?q=hello!",
+  ]);
+  expect(parts.map((part) => part.text).join("")).toBe(
+    "See https://drive.google.com/file/d/example, then https://example.com/path?q=hello!.",
+  );
+});
+
+it.each([
+  "a < b > c",
+  "<https://>",
+  "<https://example.com",
+  "https://example.com>",
+  "<javascript:alert(1)>",
+])("preserves non-autolink brackets: %s", (content) => {
+  expect(
+    messageLinkParts(content)
+      .map((part) => part.text)
+      .join(""),
+  ).toBe(content);
+});
+
+it("keeps ordinary link punctuation outside the destination and leaves prose available to inline renderers", () => {
+  const parts = messageLinkParts(":party: https://example.com. After");
+  expect(parts.filter((part) => part.url)).toEqual([
+    { text: "https://example.com", url: "https://example.com" },
+  ]);
+  expect(parts.map((part) => part.text).join("")).toBe(
+    ":party: https://example.com. After",
+  );
+});
+
+it("keeps balanced bare URL delimiters in the decorated range and trims only unmatched closers", () => {
+  const balanced = "https://en.wikipedia.org/wiki/Function_(mathematics)";
+  const unmatched = "https://example.com/docs)";
+  const content = `See ${balanced}, then ${unmatched}.`;
+  const ranges: { start: number; end: number; url: string }[] = [];
+  const parts = messageLinkParts(content, undefined, (start, end, url) =>
+    ranges.push({ start, end, url }),
+  );
+  expect(parts.filter((part) => part.url)).toEqual([
+    { text: balanced, url: balanced },
+    {
+      text: "https://example.com/docs",
+      url: "https://example.com/docs",
+    },
+  ]);
+  expect(ranges.map(({ start, end }) => content.slice(start, end))).toEqual([
+    balanced,
+    "https://example.com/docs",
+  ]);
+  expect(parts.map((part) => part.text).join("")).toBe(content);
+});
+
+it.each([
+  "[this shadcdn/ui clone](https://github.com/duobaseio/forui)",
+  "[this shadcdn/ui clone](<https://github.com/duobaseio/forui>)",
+  String.raw`[this shadcdn/ui clone]\(https://github.com/duobaseio/forui\)`,
+  String.raw`[this shadcdn/ui clone]\([https://github.com/duobaseio/forui](https://github.com/duobaseio/forui))`,
+])("renders a labeled link without exposing wrappers: %s", (link) => {
+  const parts = messageLinkParts(`See ${link}. Thanks!`);
+  expect(parts.filter((part) => part.url)).toEqual([
+    {
+      text: "this shadcdn/ui clone",
+      label: "this shadcdn/ui clone",
+      url: "https://github.com/duobaseio/forui",
+    },
+  ]);
+  expect(parts.map((part) => part.text).join("")).toBe(
+    "See this shadcdn/ui clone. Thanks!",
+  );
+});
+
+it("keeps balanced and escaped URL parentheses inside labeled destinations", () => {
+  for (const link of [
+    "[Docs](https://example.com/wiki/Function_(math))",
+    String.raw`[Docs](https://example.com/wiki/Function_\(math\))`,
+  ]) {
+    expect(messageLinkParts(link).filter((part) => part.url)).toEqual([
+      {
+        text: "Docs",
+        label: "Docs",
+        url: "https://example.com/wiki/Function_(math)",
+      },
+    ]);
+  }
+});
+
+it.each([
+  '[Docs](https://example.com "Guide")',
+  "[Docs](https://example.com 'Guide')",
+  "[Docs](https://example.com (Guide))",
+  '[Docs](<https://example.com> "Guide")',
+])(
+  "separates a Markdown title from its labeled link destination: %s",
+  (link) => {
+    const ranges: { start: number; end: number; url: string }[] = [];
+    const parts = messageLinkParts(link, undefined, (start, end, url) =>
+      ranges.push({ start, end, url }),
+    );
+    expect(parts.filter((part) => part.url)).toEqual([
+      { text: "Docs", label: "Docs", url: "https://example.com" },
+    ]);
+    expect(ranges).toEqual([
+      { start: 0, end: link.length, url: "https://example.com" },
+    ]);
+  },
+);
+
+it("supports Buzz labels, escaped label punctuation, and multiple links in prose", () => {
+  const parts = messageLinkParts(
+    String.raw`Ask [design](buzz://channel/design), then [Docs \[new\]](https://example.com/docs).`,
+  );
+  expect(parts.filter((part) => part.url)).toEqual([
+    { text: "design", label: "design", url: "buzz://channel/design" },
+    {
+      text: "Docs [new]",
+      label: "Docs [new]",
+      url: "https://example.com/docs",
+    },
+  ]);
+  expect(parts.map((part) => part.text).join("")).toBe(
+    "Ask design, then Docs [new].",
+  );
+});
+
+it.each([
+  "[unsafe](javascript:alert(1))",
+  "[bad](buzz://message?channel=general&id=bad)",
+  "[unfinished](https://example.com",
+  "[not a link] (just prose)",
+])("preserves unsupported or unfinished syntax: %s", (content) => {
+  expect(
+    messageLinkParts(content)
+      .map((part) => part.text)
+      .join(""),
+  ).toBe(content);
+});
+
+it("bounds repeated unfinished wrappers while retaining a later valid link", () => {
+  for (const prefix of [
+    "[".repeat(80_000),
+    String.raw`\[`.repeat(40_000),
+    "[x](".repeat(20_000),
+    String.raw`[x]\(`.repeat(16_000),
+  ]) {
+    const parts = messageLinkParts(
+      `${prefix} [Docs](https://example.com/docs)`,
+    );
+    expect(parts.filter((part) => part.url)).toEqual([
+      { text: "Docs", label: "Docs", url: "https://example.com/docs" },
+    ]);
+    expect(parts.map((part) => part.text).join("")).toBe(`${prefix} Docs`);
+  }
+});
diff --git a/src/features/messages/message-link-parts.ts b/src/features/messages/message-link-parts.ts
new file mode 100644
index 00000000..e253ce03
--- /dev/null
+++ b/src/features/messages/message-link-parts.ts
@@ -0,0 +1,163 @@
+import { parseBuzzLink } from "../navigation/buzz-links";
+
+type LinkPart = { text: string; url?: string; label?: string };
+
+function validUrl(url: string): boolean {
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === "buzz:"
+      ? !!parseBuzzLink(url)
+      : parsed.protocol === "https:" && !parsed.username && !parsed.password;
+  } catch {
+    return false;
+  }
+}
+
+const unescapeLink = (text: string) => text.replace(/\\([[\]()\\])/g, "$1");
+
+function markdownDestination(value: string) {
+  const title =
+    /[ \t]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^()\\])*\))$/.exec(
+      value,
+    );
+  return (title ? value.slice(0, title.index) : value).trim();
+}
+
+function trimBareUrl(candidate: string) {
+  const balance = new Map([
+    [")", { open: 0, close: 0 }],
+    ["]", { open: 0, close: 0 }],
+    ["}", { open: 0, close: 0 }],
+  ]);
+  for (const char of candidate) {
+    const pair =
+      char === "(" || char === ")"
+        ? balance.get(")")
+        : char === "[" || char === "]"
+          ? balance.get("]")
+          : char === "{" || char === "}"
+            ? balance.get("}")
+            : undefined;
+    if (pair)
+      pair[char === "(" || char === "[" || char === "{" ? "open" : "close"]++;
+  }
+  let end = candidate.length;
+  while (end > 0) {
+    const char = candidate[end - 1] ?? "";
+    if (/[.,;:!?]/.test(char)) {
+      end--;
+      continue;
+    }
+    const pair = balance.get(char);
+    if (!pair || pair.close <= pair.open) break;
+    pair.close--;
+    end--;
+  }
+  return candidate.slice(0, end);
+}
+
+/** Find the wrapper's end without cutting parentheses out of a URL. */
+function closingParenthesis(content: string, start: number, escaped: boolean) {
+  let depth = 1;
+  let delimiters = 0;
+  for (let index = start; index < content.length; index++) {
+    const char = content[index];
+    // Bound repeated malformed wrappers without limiting ordinary URL length.
+    // A candidate cannot repeatedly rescan an unbounded number of later openers.
+    if ((char === "(" || char === ")" || char === "\\") && ++delimiters > 100)
+      return undefined;
+    if (char === "\n" || char === "\r") return undefined;
+    if (char === "\\") {
+      // Some pasted links escape the outer parentheses as well as URL syntax.
+      if (escaped && content[index + 1] === ")" && depth === 1)
+        return { close: index, end: index + 2 };
+      index++;
+      continue;
+    }
+    if (char === "(") depth++;
+    if (char === ")" && --depth === 0) return { close: index, end: index + 1 };
+  }
+  return undefined;
+}
+
+/** Display-only link syntax. Message storage and navigation keep the original destination. */
+export function messageLinkParts(
+  content: string,
+  onLabeledLink?: (
+    start: number,
+    end: number,
+    label: string,
+    url: string,
+  ) => void,
+  onLink?: (start: number, end: number, url: string) => void,
+): LinkPart[] {
+  const parts: LinkPart[] = [];
+  let offset = 0;
+  for (const match of content.matchAll(
+    /(?<!\\)\[((?:\\[^\r\n]|[^[\]\\\r\n])+)\]\\?\(|<(?:https?|buzz):\/\/[^\s<>"`]+>|(?:https?|buzz):\/\/[^\s<>"`]+/gi,
+  )) {
+    if (match.index < offset) continue;
+    if (match[1] !== undefined) {
+      const start = match.index + match[0].length;
+      const closing = closingParenthesis(
+        content,
+        start,
+        match[0].endsWith("\\("),
+      );
+      if (!closing) continue;
+      let url = markdownDestination(content.slice(start, closing.close));
+      // A pasted autolink can itself be Markdown: [label]([url](url)).
+      const nested = /^\[([^\]\r\n]+)\]\((.+)\)$/.exec(url);
+      if (nested && nested[1] === nested[2]) url = nested[1] ?? url;
+      if (url.startsWith("<") && url.endsWith(">")) url = url.slice(1, -1);
+      url = unescapeLink(url);
+      const label = unescapeLink(match[1]).trim();
+      if (!label || /\s/.test(url) || !validUrl(url)) continue;
+      parts.push({ text: content.slice(offset, match.index) });
+      parts.push({ text: label, label, url });
+      onLabeledLink?.(match.index, closing.end, label, url);
+      onLink?.(match.index, closing.end, url);
+      offset = closing.end;
+      continue;
+    }
+    parts.push({ text: content.slice(offset, match.index) });
+    const wrapped = match[0].startsWith("<");
+    const candidate = wrapped ? match[0].slice(1, -1) : match[0];
+    const url = wrapped ? candidate : trimBareUrl(candidate);
+    if (validUrl(url)) {
+      onLink?.(
+        match.index,
+        match.index + (wrapped ? match[0].length : url.length),
+        url,
+      );
+      parts.push({ text: url, url });
+      if (!wrapped) parts.push({ text: candidate.slice(url.length) });
+    } else {
+      parts.push({ text: match[0] });
+    }
+    offset = match.index + match[0].length;
+  }
+  parts.push({ text: content.slice(offset) });
+  return parts;
+}
+
+/** Repair pasted escaped/nested wrappers before Markdown, except in literal contexts. */
+export function normalizeWrappedLinks(
+  content: string,
+  isLiteral: (start: number, end: number) => boolean,
+) {
+  let result = "";
+  let offset = 0;
+  messageLinkParts(content, (start, end, label, url) => {
+    const source = content.slice(start, end);
+    if (
+      isLiteral(start, end) ||
+      (!source.includes("]\\(") && !source.includes("](["))
+    )
+      return;
+    result += content.slice(offset, start);
+    result += `[${label.replace(/[\\[\]]/g, "\\$&")}](${url.replace(/[()]/g, (char) => (char === "(" ? "%28" : "%29"))})`;
+    offset = end;
+  });
+  return result + content.slice(offset);
+}
diff --git a/src/features/messages/message-references.test.ts b/src/features/messages/message-references.test.ts
new file mode 100644
index 00000000..3f9d15da
--- /dev/null
+++ b/src/features/messages/message-references.test.ts
@@ -0,0 +1,69 @@
+import { expect, it } from "vitest";
+import { messageReferences } from "./message-references";
+import { channelLinkLabel } from "./ReferenceText";
+import { targetLink } from "../navigation/targets";
+
+const person = "a".repeat(64);
+const agent = "b".repeat(64);
+const profiles = new Map([
+  [person, { name: "Alex Chen" }],
+  [agent, { name: "Build Bot" }],
+]);
+const channels = [{ id: "design", name: "design" }];
+const agents = [{ pubkey: agent, name: "Build Bot" }];
+it("styles channels and only explicitly mentioned people and agents, including names with spaces", () => {
+  const refs = messageReferences(
+    "Ask @Alex Chen and @Build Bot in #design.",
+    [person, agent],
+    profiles,
+    channels,
+    agents,
+  );
+  expect(refs.map(({ label, kind, id }) => ({ label, kind, id }))).toEqual([
+    { label: "@Alex Chen", kind: "person", id: person },
+    { label: "@Build Bot", kind: "agent", id: agent },
+    { label: "#design", kind: "channel", id: "design" },
+  ]);
+  expect(
+    messageReferences("@Alex Chen", [], profiles, channels, agents),
+  ).toEqual([]);
+});
+it("leaves ambiguous names, partial matches and ordinary email text unchanged", () => {
+  const duplicate = new Map(profiles).set(agent, { name: "Alex Chen" });
+  expect(
+    messageReferences(
+      "@Alex Chen",
+      [person, agent],
+      duplicate,
+      channels,
+      agents,
+    ),
+  ).toEqual([]);
+  expect(
+    messageReferences(
+      "x@Alex Chen #designer @Alex Chens",
+      [person],
+      profiles,
+      channels,
+      agents,
+    ),
+  ).toEqual([]);
+});
+it("resolves channel labels only in the receiving community", () => {
+  const scope = `https://local.example:${person}`;
+  expect(
+    channelLinkLabel(
+      `buzz://message?channel=design&id=${agent}`,
+      scope,
+      channels,
+    ),
+  ).toBe("design");
+  const shared = targetLink({
+    version: 1,
+    kind: "conversation",
+    channelId: "design",
+    scope: { communityOrigin: "https://other.example", viewer: person },
+    messageId: agent,
+  });
+  expect(channelLinkLabel(shared, scope, channels)).toBeUndefined();
+});
diff --git a/src/features/messages/message-references.ts b/src/features/messages/message-references.ts
new file mode 100644
index 00000000..afead5d8
--- /dev/null
+++ b/src/features/messages/message-references.ts
@@ -0,0 +1,70 @@
+import type { ChannelSummary, Profile } from "../relay/contracts";
+import type { AgentLibrary } from "../agents/library";
+
+export type MessageReference = {
+  start: number;
+  end: number;
+  label: string;
+  kind: "channel" | "person" | "agent";
+  id: string;
+};
+
+/** Names are display evidence only. People must also have an explicit signed mention. */
+export function messageReferences(
+  text: string,
+  mentions: readonly string[],
+  profiles: ReadonlyMap<string, Profile>,
+  channels: readonly ChannelSummary[],
+  agents: AgentLibrary["identities"],
+): MessageReference[] {
+  const candidates = [
+    ...channels
+      .filter((channel) => !channel.archived)
+      .map((channel) => ({
+        label: `#${channel.name}`,
+        kind: "channel" as const,
+        id: channel.id,
+      })),
+    ...mentions.flatMap((id) => {
+      const agent = agents.find((entry) => entry.pubkey === id);
+      const name = profiles.get(id)?.name ?? agent?.name;
+      return name
+        ? [
+            {
+              label: `@${name}`,
+              id,
+              kind: agent ? ("agent" as const) : ("person" as const),
+            },
+          ]
+        : [];
+    }),
+  ];
+  const unique = candidates
+    .filter((candidate) => text.includes(candidate.label))
+    .filter(
+      (candidate) =>
+        !candidates.some(
+          (other) =>
+            other.label === candidate.label && other.id !== candidate.id,
+        ),
+    )
+    .sort((a, b) => b.label.length - a.label.length);
+  const result: MessageReference[] = [];
+  for (const candidate of unique) {
+    let from = 0;
+    while (from < text.length) {
+      const start = text.indexOf(candidate.label, from);
+      if (start < 0) break;
+      const end = start + candidate.label.length;
+      from = end;
+      if (
+        (start > 0 && !/[\s([{]/u.test(text[start - 1] ?? "")) ||
+        (end < text.length && !/[\s.,!?;:)\]}]/u.test(text[end] ?? "")) ||
+        result.some((entry) => start < entry.end && end > entry.start)
+      )
+        continue;
+      result.push({ ...candidate, start, end });
+    }
+  }
+  return result.sort((a, b) => a.start - b.start);
+}
diff --git a/src/features/navigation/buzz-links.test.ts b/src/features/navigation/buzz-links.test.ts
new file mode 100644
index 00000000..e6f871aa
--- /dev/null
+++ b/src/features/navigation/buzz-links.test.ts
@@ -0,0 +1,84 @@
+import { expect, it } from "vitest";
+import {
+  buzzLinkKind,
+  buzzLinkTarget,
+  isBuzzLink,
+  parseBuzzLink,
+} from "./buzz-links";
+import { targetLink } from "./targets";
+
+const scope = {
+  viewer: "a".repeat(64),
+  communityOrigin: "https://community.example",
+};
+const example =
+  "buzz://message?channel=c89a3185-29c5-40db-8284-054536d98b09&id=9a77911a6e94147b1ce2cdb3c4e87046c67a29f29f3dd25626134621a5f6924b";
+it("recognizes the reported message link and binds it to the receiving community and viewer", () => {
+  expect(buzzLinkKind(example)).toBe("message");
+  expect(buzzLinkTarget(example, scope)).toEqual({
+    version: 1,
+    kind: "conversation",
+    scope,
+    channelId: "c89a3185-29c5-40db-8284-054536d98b09",
+    messageId:
+      "9a77911a6e94147b1ce2cdb3c4e87046c67a29f29f3dd25626134621a5f6924b",
+  });
+  expect(buzzLinkKind(`${example}&thread=${"b".repeat(64)}`)).toBe("thread");
+});
+it("supports channels and leaves shared-link community ownership intact", () => {
+  expect(buzzLinkKind("buzz://channel/general")).toBe("channel");
+  expect(buzzLinkTarget("buzz://channel/general", scope)).toEqual({
+    version: 1,
+    kind: "conversation",
+    scope,
+    channelId: "general",
+  });
+  const shared = targetLink({
+    version: 1,
+    kind: "conversation",
+    scope: {
+      ...scope,
+      viewer: "b".repeat(64),
+      communityOrigin: "https://other.example",
+    },
+    channelId: "general",
+  });
+  expect(buzzLinkKind(shared)).toBe("channel");
+  expect(buzzLinkTarget(shared, scope)).toEqual({
+    version: 1,
+    kind: "conversation",
+    scope: { ...scope, communityOrigin: "https://other.example" },
+    channelId: "general",
+  });
+});
+it.each([
+  "buzz://channel/",
+  "buzz://channel/general/extra",
+  "buzz://channel/general?relay=evil",
+  "buzz://channel/%2Fprivate",
+  "buzz://channel/%ZZ",
+  "buzz://user@channel/general",
+  "buzz://channel:443/general",
+  "buzz://message?channel=general&id=bad",
+  `${example}&id=${"b".repeat(64)}`,
+  `${example}&thread=bad`,
+  `${example}&viewer=${"b".repeat(64)}`,
+  `${example}#fragment`,
+  "buzz://message/extra?channel=general",
+  "buzz://join?relay=example",
+  "javascript:alert(1)",
+])("leaves unsupported or malformed links inert: %s", (href) => {
+  expect(parseBuzzLink(href)).toBeNull();
+});
+it("classifies the buzz scheme case-insensitively, matching URL normalization", () => {
+  // The activation boundaries must agree with parseBuzzLink, which normalizes
+  // the scheme via `new URL`; a mixed-case link must not fall through to
+  // external `_blank` handling.
+  expect(isBuzzLink("buzz://channel/general")).toBe(true);
+  expect(isBuzzLink("BUZZ://channel/general")).toBe(true);
+  expect(isBuzzLink("Buzz://message?channel=general&id=x")).toBe(true);
+  expect(isBuzzLink(example)).toBe(true);
+  expect(isBuzzLink("https://example.com")).toBe(false);
+  expect(isBuzzLink("javascript:alert(1)")).toBe(false);
+  expect(isBuzzLink("not a url")).toBe(false);
+});
diff --git a/src/features/navigation/buzz-links.ts b/src/features/navigation/buzz-links.ts
new file mode 100644
index 00000000..72c070d7
--- /dev/null
+++ b/src/features/navigation/buzz-links.ts
@@ -0,0 +1,106 @@
+import {
+  bindSharedTarget,
+  parseOpenTarget,
+  parseTargetLink,
+  type NavigationScope,
+  type SharedTarget,
+} from "./targets";
+
+type BuzzLink =
+  | { format: "shared"; target: SharedTarget }
+  | {
+      format: "legacy";
+      channelId: string;
+      messageId?: string;
+      threadRootId?: string;
+    };
+
+/** True for any `buzz:` scheme link, regardless of case. Classification must
+ * match `parseBuzzLink`, which normalizes the scheme via `URL`; a lowercase-only
+ * `startsWith` check would misroute `BUZZ://…` to external handling. */
+export function isBuzzLink(href: string): boolean {
+  try {
+    return new URL(href).protocol === "buzz:";
+  } catch {
+    return false;
+  }
+}
+
+/** Legacy links are relative to the receiving conversation's community, never an access grant. */
+export function parseBuzzLink(href: string): BuzzLink | null {
+  try {
+    if (href.length > 32768) return null;
+    const url = new URL(href);
+    if (
+      url.protocol !== "buzz:" ||
+      url.username ||
+      url.password ||
+      url.port ||
+      url.hash
+    )
+      return null;
+    if (url.hostname === "open")
+      return { format: "shared", target: parseTargetLink(href) };
+    const channelPattern = /^[a-zA-Z0-9][a-zA-Z0-9._-]{0,255}$/;
+    const eventPattern = /^[a-f0-9]{64}$/i;
+    if (url.hostname === "channel" && !url.search) {
+      const channelId = decodeURIComponent(url.pathname.slice(1));
+      return channelPattern.test(channelId)
+        ? { format: "legacy", channelId }
+        : null;
+    }
+    if (url.hostname !== "message" || url.pathname) return null;
+    const keys = [...url.searchParams.keys()];
+    if (
+      new Set(keys).size !== keys.length ||
+      keys.some((key) => !["channel", "id", "thread"].includes(key))
+    )
+      return null;
+    const channelId = url.searchParams.get("channel") ?? "";
+    const messageId = url.searchParams.get("id") ?? "";
+    const threadRootId = url.searchParams.get("thread");
+    if (
+      !channelPattern.test(channelId) ||
+      !eventPattern.test(messageId) ||
+      (threadRootId !== null && !eventPattern.test(threadRootId))
+    )
+      return null;
+    return {
+      format: "legacy",
+      channelId,
+      messageId: messageId.toLowerCase(),
+      ...(threadRootId ? { threadRootId: threadRootId.toLowerCase() } : {}),
+    };
+  } catch {
+    return null;
+  }
+}
+
+export function buzzLinkKind(href: string) {
+  const link = parseBuzzLink(href);
+  if (!link) return null;
+  const target =
+    link.format === "shared"
+      ? link.target
+      : { ...link, kind: "conversation" as const };
+  if (target.kind !== "conversation") return "buzz";
+  return target.threadRootId
+    ? "thread"
+    : target.messageId
+      ? "message"
+      : "channel";
+}
+
+export function buzzLinkTarget(href: string, scope: NavigationScope) {
+  const link = parseBuzzLink(href);
+  if (!link) return null;
+  if (link.format === "shared")
+    return bindSharedTarget(link.target, scope.viewer);
+  const { format: _format, ...destination } = link;
+  return parseOpenTarget({
+    version: 1,
+    kind: "conversation",
+    scope,
+    ...destination,
+  });
+}
diff --git a/src/plugins/author.ts b/src/plugins/author.ts
index fdec5590..d00925d4 100644
--- a/src/plugins/author.ts
+++ b/src/plugins/author.ts
@@ -23,6 +23,7 @@ export type {
   InlineContent,
   InlineRange,
   InlineRenderer,
+  LinkRenderer,
 } from "../features/conversation/contracts";
 export type { RelayData, RelaySnapshot } from "../features/relay/service";
 
diff --git a/src/shared/InlineReference.module.css b/src/shared/InlineReference.module.css
new file mode 100644
index 00000000..e9617e57
--- /dev/null
+++ b/src/shared/InlineReference.module.css
@@ -0,0 +1,49 @@
+.link {
+  --link-text: var(--blue-11);
+  --link-hover: var(--blue-4);
+  --link-focus: var(--blue-8);
+  padding: 2px;
+  /* Keep hover padding outside the surrounding text's normal spacing. */
+  margin-inline: -2px;
+  border-radius: 4px;
+  color: var(--link-text);
+  background: transparent;
+  text-decoration: none;
+  overflow-wrap: anywhere;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
+.link:hover {
+  background: var(--link-hover);
+}
+
+.link:focus-visible {
+  outline: 2px solid var(--link-focus);
+  outline-offset: 2px;
+}
+
+.icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  margin-right: 3px;
+  vertical-align: -0.125em;
+}
+
+.lead {
+  white-space: nowrap;
+}
+
+[data-link-kind="channel"] .icon,
+[data-mention-kind="person"] > .icon {
+  margin-right: 0;
+}
+
+button.link {
+  border: 0;
+  font: inherit;
+  /* Inline anchors paint around the font box, without the prose line leading. */
+  line-height: normal;
+  cursor: pointer;
+}
diff --git a/src/shared/design-system/styles/components.css b/src/shared/design-system/styles/components.css
index 9236a4bd..1016e738 100644
--- a/src/shared/design-system/styles/components.css
+++ b/src/shared/design-system/styles/components.css
@@ -144,7 +144,7 @@
     background: var(--neutral-3);
   }
 
-  /* A preview is supplemental context, never a second interactive surface.
+  /* A preview is supplemental context; destination cards can also open it.
      It is portal-rendered by Base UI so a clipped parent cannot hide it. */
   .buzz-preview-card {
     z-index: 1000;
@@ -164,6 +164,13 @@
       transform var(--duration-state) var(--easing-state);
   }
 
+  .buzz-preview-card[data-destination] {
+    pointer-events: auto;
+    cursor: pointer;
+    color: inherit;
+    text-decoration: none;
+  }
+
   .buzz-preview-card[data-starting-style],
   .buzz-preview-card[data-ending-style] {
     opacity: 0;
diff --git a/src/shared/design-system/ui/PreviewCard.tsx b/src/shared/design-system/ui/PreviewCard.tsx
index 7e336f62..370ae8f3 100644
--- a/src/shared/design-system/ui/PreviewCard.tsx
+++ b/src/shared/design-system/ui/PreviewCard.tsx
@@ -1,11 +1,18 @@
 import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
-import type { ReactElement, ReactNode } from "react";
+import { useRef, type ReactElement, type ReactNode } from "react";
 
 export type PreviewCardProps = {
   /** The one interactive element that anchors and reveals this preview. */
   trigger: ReactElement;
   /** Context that supplements, but never replaces, the trigger's destination. */
   children: ReactNode;
+  open?: boolean;
+  onOpenChange?: BasePreviewCard.Root.Props["onOpenChange"];
+  side?: BasePreviewCard.Positioner.Props["side"];
+  className?: string;
+  "aria-label"?: string;
+  /** Optional anchor that makes the whole card open the trigger's destination. */
+  link?: ReactElement;
 };
 
 /**
@@ -13,18 +20,61 @@ export type PreviewCardProps = {
  *
  * Base UI owns the hover/focus timing, anchored positioning, viewport collision,
  * and portal lifecycle. The preview stays supplemental: it does not take focus
- * or contain an action of its own.
+ * automatically. A destination card can be reached with Tab.
  */
-export function PreviewCard({ trigger, children }: PreviewCardProps) {
+export function PreviewCard({
+  trigger,
+  children,
+  open,
+  onOpenChange,
+  side = "bottom",
+  className,
+  link,
+  "aria-label": label,
+}: PreviewCardProps) {
+  const triggerRef = useRef<HTMLAnchorElement>(null);
+  const popupRef = useRef<HTMLDivElement>(null);
   return (
-    <BasePreviewCard.Root>
-      <BasePreviewCard.Trigger render={trigger} delay={250} closeDelay={150} />
+    <BasePreviewCard.Root open={open} onOpenChange={onOpenChange}>
+      <BasePreviewCard.Trigger
+        render={trigger}
+        delay={250}
+        closeDelay={150}
+        ref={triggerRef}
+        onKeyDown={(event) => {
+          if (
+            link &&
+            event.key === "Tab" &&
+            !event.shiftKey &&
+            popupRef.current
+          ) {
+            event.preventDefault();
+            popupRef.current.focus();
+          }
+        }}
+      />
       <BasePreviewCard.Portal>
-        <BasePreviewCard.Positioner side="bottom" align="start" sideOffset={8}>
+        <BasePreviewCard.Positioner side={side} align="start" sideOffset={8}>
           <BasePreviewCard.Popup
             data-buzz-ui=""
-            className="buzz-preview-card"
-            role="tooltip"
+            ref={popupRef}
+            onKeyDown={(event) => {
+              if (link && event.key === "Tab") {
+                // The portal is at the end of the document. Resume from its
+                // trigger so Tab order follows the link's position in prose.
+                triggerRef.current?.focus();
+                if (event.shiftKey) event.preventDefault();
+              }
+              if (link && event.key === "Escape") triggerRef.current?.focus();
+            }}
+            className={["buzz-preview-card", className]
+              .filter(Boolean)
+              .join(" ")}
+            render={link}
+            role={link ? "link" : "tooltip"}
+            tabIndex={link ? 0 : undefined}
+            data-destination={link ? "" : undefined}
+            aria-label={label}
           >
             {children}
           </BasePreviewCard.Popup>
diff --git a/src/shared/design-system/ui/registry.ts b/src/shared/design-system/ui/registry.ts
index 1b9f43ee..4cd26ef2 100644
--- a/src/shared/design-system/ui/registry.ts
+++ b/src/shared/design-system/ui/registry.ts
@@ -193,8 +193,9 @@ export const COMPONENTS: readonly ComponentDefinition[] = [
     name: "PreviewCard",
     purpose:
       "A portal-rendered, non-modal preview of an object's already-available context.",
-    behavior: "Base UI Preview Card",
-    variants: ["default"],
+    behavior:
+      "Base UI Preview Card; optional destination anchor supports pointer and keyboard activation",
+    variants: ["default", "destination"],
     status: "proposed",
     collection: "components",
     owner: "desktop-new Messages",
diff --git a/src/shared/relative-timestamp.test.ts b/src/shared/relative-timestamp.test.ts
new file mode 100644
index 00000000..a69223cb
--- /dev/null
+++ b/src/shared/relative-timestamp.test.ts
@@ -0,0 +1,17 @@
+import { expect, it } from "vitest";
+import { relativeTimestamp } from "./relative-timestamp";
+
+const now = new Date(2026, 8, 13, 12).getTime() / 1000;
+it.each([
+  [-60, "just now"],
+  [59, "just now"],
+  [60, "1 minute ago"],
+  [3599, "59 minutes ago"],
+  [3600, "1 hour ago"],
+  [86399, "23 hours ago"],
+  [86400, "1 day ago"],
+  [604799, "6 days ago"],
+  [604800, "on Sep 6"],
+] as const)("matches Buzz's recency boundary at %s seconds", (age, label) => {
+  expect(relativeTimestamp(now - age, now)).toBe(label);
+});
diff --git a/src/shared/relative-timestamp.ts b/src/shared/relative-timestamp.ts
new file mode 100644
index 00000000..1f2a67e5
--- /dev/null
+++ b/src/shared/relative-timestamp.ts
@@ -0,0 +1,14 @@
+/** Matches Buzz desktop's thread-summary recency ladder (dateFormatters.ts). */
+export function relativeTimestamp(
+  unixSeconds: number,
+  nowSeconds = Date.now() / 1000,
+) {
+  const age = Math.max(0, nowSeconds - unixSeconds);
+  const ago = (value: number, unit: string) =>
+    `${value} ${unit}${value === 1 ? "" : "s"} ago`;
+  if (age < 60) return "just now";
+  if (age < 3600) return ago(Math.floor(age / 60), "minute");
+  if (age < 86400) return ago(Math.floor(age / 3600), "hour");
+  if (age < 604800) return ago(Math.floor(age / 86400), "day");
+  return `on ${new Date(unixSeconds * 1000).toLocaleDateString("en-US", { month: "short", day: "numeric" })}`;
+}
diff --git a/tests/browser/appearance.spec.mjs b/tests/browser/appearance.spec.mjs
index bc945ca2..cb2d3ab6 100644
--- a/tests/browser/appearance.spec.mjs
+++ b/tests/browser/appearance.spec.mjs
@@ -138,7 +138,7 @@ test("storage denial is visible and retryable; another window updates a live con
     );
     await expect(emojiSearch).toHaveValue("grinning");
     expect(await emojiNode.evaluate((el) => el.isConnected)).toBe(true);
-    await expect(composer).toHaveValue("Unsent appearance draft");
+    await expect(composer).toHaveJSProperty("value", "Unsent appearance draft");
     expect(await node.evaluate((el) => el.isConnected)).toBe(true);
     await expectAnchor(page, before);
     // The second window legitimately creates its own session; a mode change must not add a third.
diff --git a/tests/browser/buzz-links.spec.mjs b/tests/browser/buzz-links.spec.mjs
new file mode 100644
index 00000000..b3d4720c
--- /dev/null
+++ b/tests/browser/buzz-links.spec.mjs
@@ -0,0 +1,223 @@
+import { test, expect } from "./fixture.mjs";
+import { open } from "./timeline.mjs";
+
+test.use({
+  productionBroker: true,
+  readState: true,
+  threadUnread: true,
+  pluginFixtures: true,
+});
+const button = (page, name) => page.getByRole("button", { name, exact: true });
+const state = (page) =>
+  page.evaluate(() => window.fixtureNavigation.snapshot());
+
+test("Buzz channel and message links render, reveal verified targets, and preserve navigation history", async ({
+  page,
+  app,
+}) => {
+  app.relay.holdProfiles([app.viewer]);
+  await open(page, app);
+  const history = app.histories.get("primary/alpha");
+  const target = history.find((row) => row.content === "Broadcast reply");
+  const href = `buzz://message?channel=alpha&id=${target.id}`;
+  const message = app.append(
+    "primary",
+    "alpha",
+    `Open <${href}> or <buzz://channel/beta>.`,
+  );
+  const row = page.locator(
+    `[data-channel-timeline] [data-message-id="${message.id}"]`,
+  );
+  await expect(
+    row.getByRole("link", { name: "Alpha", exact: true }),
+  ).toBeVisible();
+  await expect(
+    row.getByRole("link", { name: "#Beta", exact: true }),
+  ).toBeVisible();
+  await expect(row).not.toContainText("<buzz:");
+  const link = row.getByRole("link", { name: "Alpha", exact: true });
+  await expect(link).toHaveCSS("text-decoration-line", "none");
+  await expect(link).toHaveCSS("color", "rgb(13, 116, 206)");
+  await link.hover();
+  const preview = page.getByLabel("Message preview", { exact: true });
+  await expect(
+    preview.getByText("Broadcast reply", { exact: true }),
+  ).toBeVisible();
+  await expect(preview).toHaveClass(/buzz-preview-card/);
+  await expect(preview.getByRole("img")).toHaveClass(/buzz-avatar/);
+  await expect(preview).toHaveCSS("font-size", "14px");
+  await expect(preview.locator("strong")).not.toBeEmpty();
+  await expect(preview.locator("time")).toHaveAttribute(
+    "datetime",
+    new Date(target.created_at * 1000).toISOString(),
+  );
+  await expect(preview).toHaveRole("link");
+  await expect(preview).toHaveAttribute("href", href);
+  // Crossing the trigger-to-card gap must keep the destination clickable.
+  await preview.hover();
+  await expect(preview).toBeVisible();
+  await page.screenshot({
+    path: test.info().outputPath("buzz-link-preview.png"),
+  });
+  await preview.click();
+  const panel = page.getByRole("complementary", {
+    name: "Thread",
+    exact: true,
+  });
+  await expect(
+    panel.locator(`[data-message-id="${target.id}"]`),
+  ).toBeInViewport();
+  await expect.poll(async () => (await state(page)).status).toBe("opened");
+  expect((await state(page)).entry.target.messageId).toBe(target.id);
+  await expect(panel.getByText("Thread root 0", { exact: true })).toBeVisible();
+  await button(page, "Close thread").click();
+  await expect(panel).toHaveCount(0);
+  await button(page, "Go back").click();
+  await expect(
+    panel.locator(`[data-message-id="${target.id}"]`),
+  ).toBeInViewport();
+  await button(page, "Go back").click();
+  await expect(panel).toHaveCount(0);
+  await page.mouse.move(1400, 10);
+  await row.getByRole("link", { name: "#Beta", exact: true }).focus();
+  await page.keyboard.press("Shift+Tab");
+  // WebKit follows macOS's tab-to-links preference; retain keyboard modality
+  // while focusing the specific trigger under test.
+  await link.focus();
+  await expect(link).toBeFocused();
+  expect(
+    await link.evaluate((element) => element.matches(":focus-visible")),
+  ).toBe(true);
+  const focusedTrigger = await link.elementHandle();
+  app.relay.releaseProfiles();
+  await expect(
+    row.getByRole("button", {
+      name: "View Fixture Reader profile",
+      exact: true,
+    }),
+  ).toBeVisible();
+  expect(await focusedTrigger.evaluate((element) => element.isConnected)).toBe(
+    true,
+  );
+  await expect(link).toBeFocused();
+  await expect(preview).toBeVisible();
+  expect(
+    app.report.brokerRequests.some(({ url }) => url.endsWith("/agent-library")),
+  ).toBe(false);
+  await link.press("Tab");
+  await expect(preview).toBeFocused();
+  await preview.press("Enter");
+  await expect(
+    panel.locator(`[data-message-id="${target.id}"]`),
+  ).toBeInViewport();
+  await button(page, "Close thread").click();
+  await expect(link).toBeFocused();
+  await row.getByRole("link", { name: "#Beta", exact: true }).click();
+  await expect(
+    page.getByRole("textbox", { name: "Message #Beta", exact: true }),
+  ).toBeVisible();
+  await expect.poll(async () => (await state(page)).status).toBe("opened");
+  expect((await state(page)).entry.target.channelId).toBe("beta");
+});
+
+test("activating a panel from a linked thread retires the navigation-owned thread instead of splitting the rail", async ({
+  page,
+  app,
+}) => {
+  await open(page, app);
+  const history = app.histories.get("primary/alpha");
+  const target = history.find((row) => row.content === "Broadcast reply");
+  const href = `buzz://message?channel=alpha&id=${target.id}`;
+  const message = app.append("primary", "alpha", `Open <${href}>.`);
+  const row = page.locator(
+    `[data-channel-timeline] [data-message-id="${message.id}"]`,
+  );
+  const link = row.getByRole("link", { name: "Alpha", exact: true });
+  await expect(link).toBeVisible();
+  await link.click();
+  const thread = page.getByRole("complementary", {
+    name: "Thread",
+    exact: true,
+  });
+  await expect(
+    thread.locator(`[data-message-id="${target.id}"]`),
+  ).toBeInViewport();
+  await expect.poll(async () => (await state(page)).status).toBe("opened");
+  // Open a panel while the linked thread is showing. Navigation still owns the
+  // thread target, so it must be retired rather than share the rail slot with
+  // the newly activated panel. (The fixture registers a catch-all panel.)
+  await row
+    .getByRole("button", { name: "View Fixture Reader profile", exact: true })
+    .click();
+  await expect(
+    page.getByRole("complementary", { name: "Wrong panel", exact: true }),
+  ).toBeVisible();
+  await expect(thread).toHaveCount(0);
+  // Exactly the sidebar plus one panel: the thread does not survive alongside it.
+  await expect(page.getByRole("complementary")).toHaveCount(2);
+});
+
+test("a mixed-case Buzz scheme activates in-app instead of falling through to an external tab", async ({
+  page,
+  app,
+}) => {
+  await open(page, app);
+  // parseBuzzLink normalizes the scheme via URL, so a BUZZ:// link is a valid
+  // internal destination; activation must classify it the same way rather than
+  // treating it as an external _blank link.
+  const message = app.append(
+    "primary",
+    "alpha",
+    "Jump to <BUZZ://channel/beta>.",
+  );
+  const row = page.locator(
+    `[data-channel-timeline] [data-message-id="${message.id}"]`,
+  );
+  const link = row.getByRole("link", { name: "#Beta", exact: true });
+  await expect(link).toBeVisible();
+  await link.click();
+  await expect(
+    page.getByRole("textbox", { name: "Message #Beta", exact: true }),
+  ).toBeVisible();
+  await expect.poll(async () => (await state(page)).status).toBe("opened");
+  expect((await state(page)).entry.target.channelId).toBe("beta");
+});
+
+test("unavailable messages fail honestly and legacy links still open when Links is disabled", async ({
+  page,
+  app,
+}) => {
+  await open(page, app);
+  const target = app.histories
+    .get("primary/alpha")
+    .find((row) => row.content === "Thread root 0");
+  const href = `buzz://message?channel=alpha&id=${target.id}&thread=${"f".repeat(64)}`;
+  const message = app.append(
+    "primary",
+    "alpha",
+    `<${href}> <buzz://message?channel=alpha&id=${"0".repeat(64)}>`,
+  );
+  const row = page.locator(
+    `[data-channel-timeline] [data-message-id="${message.id}"]`,
+  );
+  await expect(
+    row.getByRole("link", { name: "Alpha", exact: true }).first(),
+  ).toBeVisible();
+  await button(page, "Your profile").click();
+  await button(page, "Settings").click();
+  await button(page, "Plugins").click();
+  await page
+    .getByRole("switch", { name: "Enable Links", exact: true })
+    .uncheck();
+  await button(page, "Messages").first().click();
+  await row.locator("a").first().click();
+  const targetRow = page.locator(`[data-message-id="${target.id}"]`);
+  await expect(targetRow).toBeFocused();
+  await expect(targetRow).toBeInViewport();
+  await expect.poll(async () => (await state(page)).status).toBe("opened");
+  // The deliberately wrong hint must not select a different root or force a
+  // visible root out of the ordinary timeline.
+  await row.locator("a").nth(1).click();
+  await expect(button(page, "Retry navigation")).toBeVisible();
+  expect((await state(page)).status).toBe("failed");
+});
diff --git a/tests/browser/channel-opening.spec.mjs b/tests/browser/channel-opening.spec.mjs
index add4ed87..118ddd16 100644
--- a/tests/browser/channel-opening.spec.mjs
+++ b/tests/browser/channel-opening.spec.mjs
@@ -98,7 +98,7 @@ test("cold opening bypasses held DM labels; warm switching paints within 100ms w
               );
               const check = () => {
                 const composer = document.querySelector(
-                  `textarea[placeholder="Message #${name}"]`,
+                  `[role="textbox"][aria-label="Message #${name}"]`,
                 );
                 const history = document.querySelector(
                   '[aria-label="Channel message history"]',
diff --git a/tests/browser/completion-layout.spec.mjs b/tests/browser/completion-layout.spec.mjs
index d995edc2..7a727a12 100644
--- a/tests/browser/completion-layout.spec.mjs
+++ b/tests/browser/completion-layout.spec.mjs
@@ -38,7 +38,7 @@ test("completion menu stays reachable in the production channel layout", async (
     });
     await option.click();
     await expect(input).toBeFocused();
-    await expect(input).not.toHaveValue(":sm");
+    await expect(input).not.toHaveJSProperty("value", ":sm");
   }
 });
 
@@ -70,10 +70,10 @@ test("host shortcuts coexist with an open completion menu and preserve its draft
       ),
     )
     .toBe("1.1");
-  await expect(input).toHaveValue(":smile");
+  await expect(input).toHaveJSProperty("value", ":smile");
   await expect(input).toBeFocused();
   await input.press("Tab");
-  await expect(input).toHaveValue("😄");
+  await expect(input).toHaveJSProperty("value", "😄");
   await input.fill(":smile");
   await expect(page.getByRole("option").first()).toBeVisible();
   await input.press(`${modifier}+,`);
@@ -82,7 +82,7 @@ test("host shortcuts coexist with an open completion menu and preserve its draft
   ).toBeVisible();
   await expect(page.getByRole("listbox")).toHaveCount(0);
   await messages.click();
-  await expect(input).toHaveValue(":smile");
+  await expect(input).toHaveJSProperty("value", ":smile");
   // Draft persistence restores text, not selection: a remounted textarea may
   // focus at offset zero. Move to the query before expecting its suggestions.
   await input.press(modifier === "Meta" ? "Meta+ArrowRight" : "End");
@@ -93,5 +93,5 @@ test("host shortcuts coexist with an open completion menu and preserve its draft
   await expect(page.getByRole("option").first()).toContainText(":smile:");
   await input.press("Escape");
   await expect(page.getByRole("listbox")).toHaveCount(0);
-  await expect(input).toHaveValue(":smile");
+  await expect(input).toHaveJSProperty("value", ":smile");
 });
diff --git a/tests/browser/composer-links.spec.mjs b/tests/browser/composer-links.spec.mjs
new file mode 100644
index 00000000..f0a6703f
--- /dev/null
+++ b/tests/browser/composer-links.spec.mjs
@@ -0,0 +1,489 @@
+import { test, expect } from "@playwright/test";
+import { createServer } from "./vite-server.mjs";
+import react from "@vitejs/plugin-react";
+import { fileURLToPath } from "node:url";
+
+test("editable composer renders links and mentions while preserving source and notification intent", async ({
+  page,
+  browserName,
+}) => {
+  const server = await createServer({
+    root: fileURLToPath(new URL("../../", import.meta.url)),
+    configFile: false,
+    envFile: false,
+    plugins: [react()],
+    logLevel: "error",
+    server: { host: "127.0.0.1", port: 0 },
+  });
+  await server.listen();
+  try {
+    await page.goto(
+      `http://127.0.0.1:${server.httpServer.address().port}/tests/fixtures/link-messages.html`,
+    );
+    const input = page.getByRole("textbox", {
+      name: "Message #design",
+      exact: true,
+    });
+    const preview = input;
+    await expect(
+      page.getByRole("region", { name: "Draft preview" }),
+    ).toHaveCount(0);
+    await expect(preview.locator('[data-link-kind="github"]')).toHaveCount(2);
+    await expect(preview.locator('[data-mention-kind="person"]')).toHaveText(
+      "Alex Chen",
+    );
+    await expect(preview.locator('[data-mention-kind="agent"]')).toHaveText(
+      "Build Bot",
+    );
+    await expect(preview.getByRole("link")).toHaveCount(0);
+    await expect(preview.getByRole("button")).toHaveCount(0);
+
+    // Select-all includes the full painted token, not only its text label.
+    const initialSource = await input.evaluate((el) => el.value);
+    const tokenCount = await input.locator("[data-source]").count();
+    await input.focus();
+    await page.keyboard.press("ControlOrMeta+a");
+    await expect(input.locator("[data-editor-selected]")).toHaveCount(
+      tokenCount,
+    );
+    const selectedSource = await input.evaluate((el) => {
+      const clipboardData = new DataTransfer();
+      el.dispatchEvent(
+        new ClipboardEvent("copy", {
+          bubbles: true,
+          cancelable: true,
+          clipboardData,
+        }),
+      );
+      return clipboardData.getData("text/plain");
+    });
+    expect(selectedSource).toBe(initialSource);
+    await page.keyboard.press("ArrowRight");
+    await expect(input.locator("[data-editor-selected]")).toHaveCount(0);
+    await page.keyboard.press("ControlOrMeta+a");
+    await expect(input.locator("[data-editor-selected]")).toHaveCount(
+      tokenCount,
+    );
+    await page.keyboard.type("Replaced selection");
+    await expect(input).toHaveJSProperty("value", "Replaced selection");
+    await expect(input.locator("[data-editor-selected]")).toHaveCount(0);
+
+    const mouseSource = "Before https://github.com/block/buzz-app/pulls after";
+    await input.fill(mouseSource);
+    for (const target of [input, input.locator("[data-source]")]) {
+      await page.keyboard.press("ArrowRight");
+      await target.click({ clickCount: 3, position: { x: 4, y: 8 } });
+      await expect(input.locator("[data-editor-selected]")).toHaveCount(1);
+      expect(
+        await input.evaluate((el) => [el.selectionStart, el.selectionEnd]),
+      ).toEqual([0, mouseSource.length]);
+      await expect(input).toHaveJSProperty("value", mouseSource);
+    }
+    await page.keyboard.press("ArrowRight");
+    const drag = await input.evaluate((el) => {
+      const text = el.querySelector("[data-editor-text]");
+      const range = document.createRange();
+      range.selectNodeContents(text);
+      const end = range.getBoundingClientRect();
+      return {
+        start: el.getBoundingClientRect().left,
+        end: end.right,
+        y: end.top + end.height / 2,
+      };
+    });
+    await page.mouse.move(drag.end, drag.y);
+    await page.mouse.down();
+    await page.mouse.move(drag.start, drag.y, { steps: 12 });
+    await page.mouse.up();
+    await expect(input.locator("[data-editor-selected]")).toHaveCount(1);
+    expect(
+      await input.evaluate((el) => [el.selectionStart, el.selectionEnd]),
+    ).toEqual([0, mouseSource.length]);
+
+    const text =
+      "Review [**GitHub**](https://github.com/block/buzz-app) in #design with ";
+    await input.fill(text);
+    await input.press("End");
+    await page
+      .getByRole("button", { name: "Mention Alex Chen", exact: true })
+      .click();
+    await page
+      .getByRole("button", { name: "Mention Build Bot", exact: true })
+      .click();
+    const expected = `${text}@Alex Chen @Build Bot `;
+    await expect(input).toHaveJSProperty("value", expected);
+    await expect(input).toBeFocused();
+    expect(await input.evaluate((el) => el.selectionStart)).toBe(
+      expected.length,
+    );
+    await expect(preview.locator("strong")).toHaveText("GitHub");
+    await expect(preview.locator('[data-mention-kind="agent"]')).toHaveText(
+      "Build Bot",
+    );
+    await input.press("Enter");
+    expect(await page.evaluate(() => window.linkComposerFixture.sent)).toEqual([
+      { text: expected, mentions: ["a".repeat(64), "b".repeat(64)] },
+    ]);
+    await expect(input).toHaveJSProperty("value", "");
+    await expect(preview.locator("[data-source]")).toHaveCount(0);
+
+    const pasted = "@Alex Chen [Drive](https://drive.google.com/file/example)";
+    await input.fill(pasted);
+    await expect(preview.locator("[data-mention-kind]")).toHaveCount(0);
+    await expect(preview.locator('[data-link-kind="drive"]')).toHaveText(
+      "Drive",
+    );
+    await page.reload();
+    await expect(input).toHaveJSProperty("value", pasted);
+    await expect(preview.locator("[data-mention-kind]")).toHaveCount(0);
+    // A rendered item at the end must have a real caret box after its label.
+    const linkSource = "See https://github.com/block/buzz-app";
+    await input.fill(linkSource);
+    const caretBox = await input.evaluate((el) => {
+      const caret = getSelection().getRangeAt(0).getBoundingClientRect();
+      const link = el.querySelector("[data-source]").getBoundingClientRect();
+      return {
+        x: caret.x,
+        y: caret.y,
+        height: caret.height,
+        right: link.right,
+        top: link.top,
+      };
+    });
+    expect(caretBox.height).toBeGreaterThan(10);
+    expect(Math.abs(caretBox.x - caretBox.right)).toBeLessThan(2);
+    expect(Math.abs(caretBox.y - caretBox.top)).toBeLessThan(2);
+    await input.press("Backspace");
+    await expect(input).toHaveJSProperty("value", linkSource.slice(0, -1));
+    await expect(input.locator("[data-source]")).toHaveCount(0);
+    await input.pressSequentially("p after");
+    await expect(input).toHaveJSProperty("value", `${linkSource} after`);
+    await expect(input.locator("[data-source]")).toHaveCount(0);
+
+    const secondLink = "https://drive.google.com/file/example";
+    await input.fill("");
+    await input.fill(`${linkSource} ${secondLink}`);
+    await input.evaluate(
+      (el, end) => el.setSelectionRange(end, end),
+      linkSource.length,
+    );
+    await page.keyboard.press("Backspace");
+    await expect(input.locator("[data-source]")).toHaveCount(1);
+    await expect(input.locator('[data-link-kind="drive"]')).toHaveCount(1);
+    await input.evaluate((el) => el.setSelectionRange(0, 0));
+    await page.keyboard.type("Note: ");
+    await expect(input.locator("[data-source]")).toHaveCount(1);
+    await input.evaluate((el) => el.blur());
+    await input.focus();
+    await expect(input.locator("[data-source]")).toHaveCount(1);
+
+    await input.fill("");
+    await input.fill(`${linkSource} after`);
+    await input.locator("[data-source]").click();
+    await input.pressSequentially("!");
+    await expect(input).toHaveJSProperty("value", `${linkSource}! after`);
+    await input.fill(linkSource);
+    await input.press("ArrowLeft");
+    expect(await input.evaluate((el) => el.selectionStart)).toBe(
+      linkSource.length - 1,
+    );
+    await input.press("Delete");
+    await expect(input).toHaveJSProperty("value", linkSource.slice(0, -1));
+    await input.pressSequentially("p");
+    const copied = await input.evaluate((el) => {
+      el.setSelectionRange(0, el.value.length);
+      const clipboardData = new DataTransfer();
+      el.dispatchEvent(
+        new ClipboardEvent("copy", {
+          bubbles: true,
+          cancelable: true,
+          clipboardData,
+        }),
+      );
+      return clipboardData.getData("text/plain");
+    });
+    expect(copied).toBe(linkSource);
+
+    // Paste, Space and continued typing must not require refocusing the field.
+    const pastedUrl = "https://github.com/block/buzz-app/pulls";
+    // Delete at a rendered boundary is a text edit, including native commands
+    // without keydown. It must not consume only the invisible caret marker.
+    for (const nativeCommand of browserName === "webkit"
+      ? [false, true]
+      : [false]) {
+      await input.fill(pastedUrl);
+      for (let count = 1; count <= 3; count++) {
+        if (nativeCommand)
+          await input.evaluate(() => document.execCommand("delete"));
+        else await page.keyboard.press("Backspace");
+        await expect(input).toHaveJSProperty(
+          "value",
+          pastedUrl.slice(0, -count),
+        );
+        expect(await input.evaluate((el) => el.selectionStart)).toBe(
+          pastedUrl.length - count,
+        );
+      }
+      await page.keyboard.press("ControlOrMeta+z");
+      await expect(input).toHaveJSProperty("value", pastedUrl.slice(0, -2));
+    }
+    await input.fill(pastedUrl);
+    await input.evaluate((el) => el.setSelectionRange(0, 0));
+    await page.keyboard.press("Delete");
+    await expect(input).toHaveJSProperty("value", pastedUrl.slice(1));
+
+    for (const source of [pastedUrl, `[${pastedUrl}](${pastedUrl})`]) {
+      for (const restoredInsideLabel of [false, true]) {
+        await input.fill("");
+        await input.evaluate((el, source) => {
+          const clipboardData = new DataTransfer();
+          clipboardData.setData("text/plain", source);
+          el.dispatchEvent(
+            new ClipboardEvent("paste", {
+              bubbles: true,
+              cancelable: true,
+              clipboardData,
+            }),
+          );
+        }, source);
+        await expect(input.locator("[data-source]")).toHaveCount(1);
+        await expect(input).toHaveJSProperty("value", `${source} `);
+        if (restoredInsideLabel) {
+          // Some native WebKit selection restorations land inside the uneditable
+          // label even though its logical offset is the end of the pasted URL.
+          await input.evaluate((el) => {
+            const token = el.querySelector("[data-source]");
+            getSelection().setBaseAndExtent(
+              token,
+              token.childNodes.length,
+              token,
+              token.childNodes.length,
+            );
+            // Exercise the key path before a queued selectionchange can repair it.
+            el.dispatchEvent(
+              new KeyboardEvent("keydown", {
+                key: " ",
+                bubbles: true,
+                cancelable: true,
+              }),
+            );
+          });
+          await page.keyboard.press("Space");
+        }
+        await expect(input).toBeFocused();
+        // Use the keyboard directly: locator.press would refocus and hide this bug.
+        await page.keyboard.type("next thought");
+        await expect(input).toHaveJSProperty(
+          "value",
+          `${source} next thought${restoredInsideLabel ? " " : ""}`,
+        );
+        await expect(input).toBeFocused();
+        expect(await input.evaluate((el) => el.selectionStart)).toBe(
+          `${source} next thought`.length,
+        );
+      }
+    }
+
+    for (const { source, initial, expected, caret = 0 } of [
+      {
+        source: pastedUrl,
+        initial: "[First](https://example.com)  after",
+        caret: "[First](https://example.com) ".length,
+        expected: `[First](https://example.com) ${pastedUrl} next after`,
+      },
+      {
+        source: pastedUrl,
+        initial: " after",
+        expected: `${pastedUrl} next after`,
+      },
+      { source: `${pastedUrl} `, initial: "", expected: `${pastedUrl} next ` },
+      { source: "plain", initial: "", expected: "plainnext " },
+      {
+        source: `\`${pastedUrl}\``,
+        initial: "",
+        expected: `\`${pastedUrl}\`next `,
+      },
+    ]) {
+      await input.fill(initial);
+      await input.evaluate(
+        (el, { source, caret }) => {
+          el.setSelectionRange(caret, caret);
+          const clipboardData = new DataTransfer();
+          clipboardData.setData("text/plain", source);
+          el.dispatchEvent(
+            new ClipboardEvent("paste", {
+              bubbles: true,
+              cancelable: true,
+              clipboardData,
+            }),
+          );
+        },
+        { source, caret },
+      );
+      await page.keyboard.type("next ");
+      await expect(input).toHaveJSProperty("value", expected);
+    }
+
+    // Markdown titles stay in the authored source while the composer decorates
+    // only the destination and label, matching the delivered message renderer.
+    const titledSource = '[Docs](https://example.com "Guide")';
+    await input.fill(titledSource);
+    await expect(input.locator("[data-source]")).toHaveText("Docs");
+    await expect(input).toHaveJSProperty("value", titledSource);
+    await input.press("Enter");
+    expect(
+      (await page.evaluate(() => window.linkComposerFixture.sent)).at(-1),
+    ).toEqual({ text: titledSource, mentions: [] });
+
+    // A compact label still copies, edits, and sends the full destination.
+    const longUrl =
+      "https://www.figma.com/design/example/Builderlab-—-Branding?node-id=1119-21207";
+    for (const source of [longUrl, `[${longUrl}](${longUrl})`]) {
+      await input.fill("");
+      await input.fill(source);
+      await expect(input.locator("[data-link-kind=figma]")).toHaveText(
+        `${longUrl.slice(0, 44)}…`,
+      );
+      const longCopy = await input.evaluate((el) => {
+        el.setSelectionRange(0, el.value.length);
+        const clipboardData = new DataTransfer();
+        el.dispatchEvent(
+          new ClipboardEvent("copy", {
+            bubbles: true,
+            cancelable: true,
+            clipboardData,
+          }),
+        );
+        return clipboardData.getData("text/plain");
+      });
+      expect(longCopy).toBe(source);
+      await page.keyboard.press("ArrowRight");
+      await page.keyboard.press("Backspace");
+      await expect(input).toHaveJSProperty("value", source.slice(0, -1));
+      await expect(input.locator("[data-source]")).toHaveCount(0);
+      await input.fill("");
+      await input.fill(source);
+      await page.keyboard.press("Enter");
+      expect(
+        (await page.evaluate(() => window.linkComposerFixture.sent)).at(-1),
+      ).toEqual({ text: source, mentions: [] });
+    }
+
+    // Undo restores the pre-edit caret, including edits before rendered tokens.
+    await input.fill("ABC");
+    await input.evaluate((el) => el.setSelectionRange(1, 1));
+    await input.pressSequentially("X");
+    await input.press("ControlOrMeta+z");
+    await expect(input).toHaveJSProperty("value", "ABC");
+    expect(await input.evaluate((el) => el.selectionStart)).toBe(1);
+    await input.pressSequentially("Y");
+    await expect(input).toHaveJSProperty("value", "AYBC");
+    await input.press("Shift+Enter");
+    await input.pressSequentially("next");
+    await expect(input).toHaveJSProperty("value", "AY\nnextBC");
+
+    await input.fill("");
+    await input.pressSequentially("https://github.com/block/buzz-app");
+    await expect(input.locator('[data-link-kind="github"]')).toHaveCount(1);
+    await input.pressSequentially(" after");
+    await expect(input).toHaveJSProperty(
+      "value",
+      "https://github.com/block/buzz-app after",
+    );
+    await input.locator("[data-source]").dblclick();
+    await input.pressSequentially("https://drive.google.com/file/edited");
+    await expect(input).toHaveJSProperty(
+      "value",
+      "https://drive.google.com/file/edited after",
+    );
+    await expect(input.locator('[data-link-kind="drive"]')).toHaveCount(1);
+
+    await input.fill("Before ");
+    await input.press("End");
+    await page
+      .getByRole("button", { name: "Mention Alex Chen", exact: true })
+      .click();
+    await page
+      .getByRole("button", { name: "Mention Build Bot", exact: true })
+      .click();
+    await input.evaluate((el) => el.setSelectionRange(7, 17));
+    await input.press("Backspace");
+    await expect(input.locator('[data-mention-kind="person"]')).toHaveCount(0);
+    await expect(input.locator('[data-mention-kind="agent"]')).toHaveCount(1);
+    await input.press("ControlOrMeta+z");
+    await expect(input.locator('[data-mention-kind="person"]')).toHaveCount(1);
+    expect(
+      await input.evaluate((el) => [el.selectionStart, el.selectionEnd]),
+    ).toEqual([7, 17]);
+    await input.press("ControlOrMeta+Shift+z");
+    await expect(input.locator('[data-mention-kind="person"]')).toHaveCount(0);
+    await input.press("Enter");
+    expect(
+      (await page.evaluate(() => window.linkComposerFixture.sent)).at(-1),
+    ).toEqual({ text: "Before  @Build Bot ", mentions: ["b".repeat(64)] });
+
+    await input.fill("IME");
+    const compositionKeys = await input.evaluate((el) => {
+      el.setSelectionRange(1, 1);
+      el.dispatchEvent(
+        new CompositionEvent("compositionstart", { bubbles: true }),
+      );
+      const results = ["Home", "End", "Enter"].map((key) => {
+        const event = new KeyboardEvent("keydown", {
+          key,
+          isComposing: true,
+          keyCode: 229,
+          bubbles: true,
+          cancelable: true,
+        });
+        el.dispatchEvent(event);
+        return { prevented: event.defaultPrevented, caret: el.selectionStart };
+      });
+      el.dispatchEvent(
+        new CompositionEvent("compositionend", { bubbles: true }),
+      );
+      return results;
+    });
+    expect(compositionKeys).toEqual(
+      Array(3).fill({ prevented: false, caret: 1 }),
+    );
+
+    // IME input can be noncancelable; enforce the source limit when it commits.
+    await input.fill("A".repeat(16000));
+    await input.evaluate((el) => {
+      el.dispatchEvent(
+        new CompositionEvent("compositionstart", { bubbles: true }),
+      );
+      el.dispatchEvent(
+        new InputEvent("beforeinput", {
+          bubbles: true,
+          cancelable: false,
+          inputType: "insertCompositionText",
+          data: "你",
+          isComposing: true,
+        }),
+      );
+      el.value += "你";
+      el.dispatchEvent(
+        new InputEvent("input", {
+          bubbles: true,
+          inputType: "insertCompositionText",
+          data: "你",
+          isComposing: true,
+        }),
+      );
+      el.dispatchEvent(
+        new CompositionEvent("compositionend", { bubbles: true, data: "你" }),
+      );
+    });
+    await expect(input).toHaveJSProperty("value", "A".repeat(16000));
+
+    await input.fill(pasted);
+    await page.getByRole("button", { name: "Plugin off", exact: true }).click();
+    await expect(preview.locator("[data-link-renderer]")).toHaveCount(0);
+    await expect(preview).toContainText("Drive");
+    await expect(input).toHaveJSProperty("value", pasted);
+  } finally {
+    await server.close();
+  }
+});
diff --git a/tests/browser/conversation.spec.mjs b/tests/browser/conversation.spec.mjs
index 6fc908c1..5d11fbd3 100644
--- a/tests/browser/conversation.spec.mjs
+++ b/tests/browser/conversation.spec.mjs
@@ -199,20 +199,22 @@ test("independent packed author consumer and native-installed contribution survi
     await page
       .getByRole("button", { name: "Insert timestamp", exact: true })
       .click();
-    await expect(draft).toHaveValue(/T.*Z/);
+    await expect
+      .poll(() => draft.evaluate((element) => element.value))
+      .toMatch(/T.*Z/);
     await draft.fill("base");
     await draft.evaluate((el) => el.setSelectionRange(1, 3));
     await page
       .getByRole("button", { name: "Insert twice", exact: true })
       .click();
-    await expect(draft).toHaveValue("bONETWOe");
+    await expect(draft).toHaveJSProperty("value", "bONETWOe");
     await expect(draft).toBeFocused();
     expect(await draft.evaluate((el) => el.selectionStart)).toBe(7);
     await draft.fill("");
     await page
       .getByRole("button", { name: "Insert mixed", exact: true })
       .click();
-    await expect(draft).toHaveValue("Hi @Member and @Member ");
+    await expect(draft).toHaveJSProperty("value", "Hi @Member and @Member ");
     await expect(
       page
         .getByRole("region", { name: "Notification recipients" })
@@ -228,7 +230,7 @@ test("independent packed author consumer and native-installed contribution survi
         window.conversationFixture.removedMentionResult(),
       ),
     ).toBe(false);
-    await expect(draft).toHaveValue("Hi @Member and @Member ");
+    await expect(draft).toHaveJSProperty("value", "Hi @Member and @Member ");
     await page.evaluate(() => window.conversationFixture.enableProbe());
     await expect(
       page.getByRole("button", { name: "Insert twice", exact: true }),
@@ -247,7 +249,7 @@ test("independent packed author consumer and native-installed contribution survi
     await expect(
       page.getByRole("heading", { name: "Composer Lab" }),
     ).toBeVisible();
-    await expect(draft).toHaveValue("Channels draft");
+    await expect(draft).toHaveJSProperty("value", "Channels draft");
     // The independently built page consumes the host's registered Mentions tool.
     await page
       .getByRole("button", { name: "Mention a member", exact: true })
@@ -260,7 +262,7 @@ test("independent packed author consumer and native-installed contribution survi
       name: "Notification recipients",
     });
     await expect(recipients.getByRole("button")).toHaveCount(1);
-    const withMention = await draft.inputValue();
+    const withMention = await draft.evaluate((element) => element.value);
     const textarea = await draft.elementHandle();
     await page.evaluate(() =>
       window.conversationFixture.change("disable", "buzz.mentions"),
@@ -268,12 +270,12 @@ test("independent packed author consumer and native-installed contribution survi
     await expect(
       page.getByRole("button", { name: "Mention a member", exact: true }),
     ).toHaveCount(0);
-    await expect(draft).toHaveValue(withMention);
+    await expect(draft).toHaveJSProperty("value", withMention);
     await expect(recipients.getByRole("button")).toHaveCount(1);
     expect(await textarea.evaluate((el) => el.isConnected)).toBe(true);
     await recipients.getByRole("button").click();
     await expect(recipients).toHaveCount(0);
-    await expect(draft).toHaveValue(withMention);
+    await expect(draft).toHaveJSProperty("value", withMention);
     await page.evaluate(() =>
       window.conversationFixture.change("enable", "buzz.mentions"),
     );
@@ -325,7 +327,7 @@ test("independent packed author consumer and native-installed contribution survi
       page.getByText("History :party:", { exact: true }),
     ).toBeVisible();
     expect(await textarea.evaluate((el) => el.isConnected)).toBe(true);
-    await expect(draft).toHaveValue("Channels draft");
+    await expect(draft).toHaveJSProperty("value", "Channels draft");
     // Plugin-independent recovery when the catalog is unavailable.
     await page.evaluate(() => window.conversationFixture.fail(true));
     await draft.fill(":party:");
@@ -340,7 +342,7 @@ test("independent packed author consumer and native-installed contribution survi
     await expect(
       page.getByRole("button", { name: "Retry message preparation" }),
     ).toHaveCount(0);
-    await expect(draft).toHaveValue(":party:");
+    await expect(draft).toHaveJSProperty("value", ":party:");
     await draft.press("Enter");
     await expect
       .poll(() =>
@@ -388,7 +390,7 @@ test("independent packed author consumer and native-installed contribution survi
     await search.fill("party");
     await page.evaluate(() => window.conversationFixture.saveEdit());
     await page.evaluate(() => window.conversationFixture.switch());
-    await expect(draft).toHaveValue("");
+    await expect(draft).toHaveJSProperty("value", "");
     await expect(page.locator("em-emoji-picker")).toHaveCount(0);
     await draft.fill("B draft");
     expect(
@@ -397,7 +399,7 @@ test("independent packed author consumer and native-installed contribution survi
     expect(
       await page.evaluate(() => window.conversationFixture.callSavedMention()),
     ).toBe(false);
-    await expect(draft).toHaveValue("B draft");
+    await expect(draft).toHaveJSProperty("value", "B draft");
     await page.evaluate(() => window.conversationFixture.update());
     await expect(
       page.getByRole("button", {
@@ -405,7 +407,7 @@ test("independent packed author consumer and native-installed contribution survi
         exact: true,
       }),
     ).toHaveCount(1);
-    await expect(draft).toHaveValue("B draft");
+    await expect(draft).toHaveJSProperty("value", "B draft");
     const updated = native("catalog").catalog.plugins.find(
       (p) => p.manifest.id === id,
     );
@@ -423,7 +425,7 @@ test("independent packed author consumer and native-installed contribution survi
         exact: true,
       }),
     ).toHaveCount(0);
-    await expect(draft).toHaveValue("B draft");
+    await expect(draft).toHaveJSProperty("value", "B draft");
     await page.evaluate(() =>
       window.conversationFixture.change("disable", "test.timestamp"),
     );
@@ -443,7 +445,7 @@ test("independent packed author consumer and native-installed contribution survi
       .getByRole("navigation", { name: "Proof pages" })
       .getByRole("button", { name: "Channels" })
       .click();
-    await expect(draft).toHaveValue("B draft");
+    await expect(draft).toHaveJSProperty("value", "B draft");
     expect(errors).toEqual([]);
     await writeFile(
       test.info().outputPath("boundary-proof.json"),
diff --git a/tests/browser/emoji.spec.mjs b/tests/browser/emoji.spec.mjs
index 27c43d7e..c36d7f8a 100644
--- a/tests/browser/emoji.spec.mjs
+++ b/tests/browser/emoji.spec.mjs
@@ -221,7 +221,7 @@ test("community picker uses keyboard, proxy thumbnails, event-local history and
     await page.keyboard.press("ControlOrMeta+c");
     await draft().fill("");
     await page.keyboard.press("ControlOrMeta+v");
-    await expect(draft()).toHaveValue(":party:");
+    await expect(draft()).toHaveJSProperty("value", ":party:");
     // One Shift+Left selects one rendered custom emoji, not its trailing colon.
     await draft().press("Shift+ArrowLeft");
     expect(
@@ -232,7 +232,7 @@ test("community picker uses keyboard, proxy thumbnails, event-local history and
     await page.keyboard.press("ControlOrMeta+c");
     await draft().fill("");
     await page.keyboard.press("ControlOrMeta+v");
-    await expect(draft()).toHaveValue(":party:");
+    await expect(draft()).toHaveJSProperty("value", ":party:");
     await draft().fill(":party::party:");
     const selectedDraftText = () =>
       draft().evaluate((element) =>
@@ -262,7 +262,7 @@ test("community picker uses keyboard, proxy thumbnails, event-local history and
     await draft().press("Shift+ArrowLeft");
     expect(await selectedDraftText()).toBe(":party:");
     await draft().press("Backspace");
-    await expect(draft()).toHaveValue("hello");
+    await expect(draft()).toHaveJSProperty("value", "hello");
     // Visible source text and unavailable emoji retain ordinary character selection.
     for (const literal of [":unknown:", ":nosource:"]) {
       await draft().fill(literal);
@@ -273,7 +273,7 @@ test("community picker uses keyboard, proxy thumbnails, event-local history and
       main.style.width = "300px";
     });
     await draft().fill(Array(24).fill(":party:").join(" "));
-    const largeCustom = page.locator('[class*="composerCustomEmojiGroup"]');
+    const largeCustom = draft();
     await expect(largeCustom.locator("img")).toHaveCount(24);
     await expect(largeCustom.locator("img").last()).toHaveCSS("width", "42px");
     expect(
@@ -775,7 +775,7 @@ test("community picker uses keyboard, proxy thumbnails, event-local history and
     }
     await search.fill("aonly");
     await search.press("Enter");
-    await expect(draft()).toHaveValue(":aonly:");
+    await expect(draft()).toHaveJSProperty("value", ":aonly:");
     await picker.click();
     await search.fill("");
     await expect(
@@ -788,14 +788,14 @@ test("community picker uses keyboard, proxy thumbnails, event-local history and
       page.getByRole("button", { name: ":grinning:", exact: true }),
     ).toBeVisible();
     await page.getByRole("button", { name: "😀", exact: true }).click();
-    await expect(draft()).toHaveValue(":aonly:😀");
+    await expect(draft()).toHaveJSProperty("value", ":aonly:😀");
     await draft().fill("before after");
     await draft().evaluate((el) => el.setSelectionRange(7, 7));
     await picker.press("Enter");
     await search.focus();
     await search.fill("party");
     await search.press("Enter");
-    await expect(draft()).toHaveValue("before :party:after");
+    await expect(draft()).toHaveJSProperty("value", "before :party:after");
     await expect(draft()).toBeFocused();
     await draft().press("Enter");
     await expect
@@ -821,7 +821,7 @@ test("community picker uses keyboard, proxy thumbnails, event-local history and
     await search.press("Escape");
     await draft().fill("A draft");
     await page.getByRole("button", { name: "Switch community" }).click();
-    await expect(draft()).toHaveValue("");
+    await expect(draft()).toHaveJSProperty("value", "");
     await expect
       .poll(() => page.evaluate(() => window.emojiFixture.status("b")))
       .toBe("ready");
@@ -843,7 +843,7 @@ test("community picker uses keyboard, proxy thumbnails, event-local history and
       /emoji-media\/b\/.*1.png/,
     );
     await insert.click();
-    await expect(draft()).toHaveValue(":party:");
+    await expect(draft()).toHaveJSProperty("value", ":party:");
     await expect(draft()).toBeFocused();
     await draft().press("Enter");
     await expect
@@ -855,7 +855,7 @@ test("community picker uses keyboard, proxy thumbnails, event-local history and
     await picker.click();
     await search.fill("party");
     await insert.click();
-    await expect(draft()).toHaveValue(":party:");
+    await expect(draft()).toHaveJSProperty("value", ":party:");
     await expect(draft()).toBeFocused();
     await draft().press("Enter");
     await expect
@@ -879,7 +879,7 @@ test("community picker uses keyboard, proxy thumbnails, event-local history and
     ).toBe(true);
     await page.getByRole("button", { name: "Toggle thread" }).click();
     await page.getByRole("button", { name: "Switch community" }).click();
-    await expect(draft()).toHaveValue("A draft");
+    await expect(draft()).toHaveJSProperty("value", "A draft");
     await picker.click();
     await page.evaluate(async () => {
       window.emojiFixture.fail(true);
@@ -890,10 +890,10 @@ test("community picker uses keyboard, proxy thumbnails, event-local history and
     );
     await search.fill("grinning");
     await page.getByRole("button", { name: "😀", exact: true }).click();
-    await expect(draft()).toHaveValue("😀A draft");
+    await expect(draft()).toHaveJSProperty("value", "😀A draft");
     await draft().fill(":party:");
     await draft().press("Enter");
-    await expect(draft()).toHaveValue(":party:");
+    await expect(draft()).toHaveJSProperty("value", ":party:");
     await expect(page.getByRole("alert")).toContainText(
       "Community emoji unavailable",
     );
@@ -930,28 +930,27 @@ test("community picker uses keyboard, proxy thumbnails, event-local history and
     await search.fill("party");
     await expect(insert).toBeVisible();
     await draft().fill(":broken: readable");
-    await expect(draft()).not.toHaveAttribute(
-      "data-leading-custom-emoji",
-      "true",
-    );
+    await expect(draft()).toContainText(":broken: readable");
     await draft().fill(":broken: :nosource:");
-    await expect(draft()).not.toHaveAttribute(
-      "data-leading-custom-emoji",
-      "true",
-    );
+    await expect(draft()).toContainText(":broken: :nosource:");
     await expect(draft()).not.toHaveCSS("color", "rgba(0, 0, 0, 0)");
-    await draft().fill(`:party: ${"long text ".repeat(80)}`);
-    await expect(draft()).toHaveAttribute("data-leading-custom-emoji", "true");
+    const longDraft = `:party: ${"long text ".repeat(160)}`;
+    await draft().fill(longDraft);
+    await expect(draft()).toHaveJSProperty("value", longDraft);
+    await expect(draft()).toContainText("long text long text");
+    await expect(draft().locator("img")).toHaveCount(1);
+    await expect
+      .poll(() =>
+        draft().evaluate(
+          (element) => element.scrollHeight - element.clientHeight,
+        ),
+      )
+      .toBeGreaterThan(0);
     await draft().evaluate((element) => {
       element.scrollTop = element.scrollHeight;
-      element.dispatchEvent(new Event("scroll"));
     });
     await expect
-      .poll(() =>
-        page
-          .locator('[class*="composerCustomEmojiMirror"]')
-          .evaluate((element) => element.scrollTop),
-      )
+      .poll(() => draft().evaluate((element) => element.scrollTop))
       .toBeGreaterThan(0);
     await draft().fill("");
     await page.evaluate(() => window.emojiFixture.remove());
diff --git a/tests/browser/external-links.spec.mjs b/tests/browser/external-links.spec.mjs
index 8ba12b0f..8ff97b8c 100644
--- a/tests/browser/external-links.spec.mjs
+++ b/tests/browser/external-links.spec.mjs
@@ -4,7 +4,8 @@ const github = "https://github.com/block/buzz/pull/1";
 const ordinary = "https://example.test/external-link";
 const unsupported = "https://github.com/block/buzz/blob/main/README.md";
 const button = (page, name) => page.getByRole("button", { name, exact: true });
-const link = (page, url) => page.getByRole("link", { name: url, exact: true });
+// Presentation plugins may shorten a raw URL label; the destination remains the contract.
+const link = (page, url) => page.locator(`a[href=${JSON.stringify(url)}]`);
 
 async function openMessages(page) {
   await page
diff --git a/tests/browser/fixture.mjs b/tests/browser/fixture.mjs
index b4ecb916..52d3d7f0 100644
--- a/tests/browser/fixture.mjs
+++ b/tests/browser/fixture.mjs
@@ -742,6 +742,7 @@ export const test = base.extend({
                   relayUrl: fixtureRelayUrl,
                   communityAliases: fixtureAliases,
                   identity: () => userKey.slice(),
+                  agentLibrary: () => [],
                   ...(readState
                     ? {}
                     : {
diff --git a/tests/browser/gifs.spec.mjs b/tests/browser/gifs.spec.mjs
index 5f16a340..cf2c07de 100644
--- a/tests/browser/gifs.spec.mjs
+++ b/tests/browser/gifs.spec.mjs
@@ -223,7 +223,7 @@ test("relay-backed GIF tab searches KLIPY and inserts URL-only media", async ({
     prevented: true,
     submits: 0,
   });
-  await expect(draft).toHaveValue("unfinished draft");
+  await expect(draft).toHaveJSProperty("value", "unfinished draft");
   expect(signRequests).toBe(0);
   await draft.evaluate((element) => {
     element.value = "";
@@ -234,7 +234,7 @@ test("relay-backed GIF tab searches KLIPY and inserts URL-only media", async ({
       }),
     );
   });
-  await expect(draft).toHaveValue("");
+  await expect(draft).toHaveJSProperty("value", "");
   const composer = draft.locator("xpath=ancestor::form");
   await expect(composer).toHaveCSS("border-top-color", "rgb(138, 148, 152)");
   await expect(composer).toHaveCSS("box-shadow", "none");
@@ -384,7 +384,8 @@ test("relay-backed GIF tab searches KLIPY and inserts URL-only media", async ({
   await page.screenshot({ path: testInfo.outputPath("gif-picker.png") });
 
   await page.getByRole("button", { name: "Choose Hello", exact: true }).click();
-  await expect(draft).toHaveValue(
+  await expect(draft).toHaveJSProperty(
+    "value",
     "![Hello](https://gif.fixture.invalid/1.gif)",
   );
   await expect(
diff --git a/tests/browser/layout.spec.mjs b/tests/browser/layout.spec.mjs
index 6f0495a5..f5820ff5 100644
--- a/tests/browser/layout.spec.mjs
+++ b/tests/browser/layout.spec.mjs
@@ -167,7 +167,7 @@ test("bento surfaces, centered tabs, real link panel and compact community navig
   near(dock.height, main.height);
   near(dock.x - main.x - main.width, 16);
   near(dock.x + dock.width, 1264);
-  await expect(composer).toHaveValue("Layout draft");
+  await expect(composer).toHaveJSProperty("value", "Layout draft");
   await expect(composer).toBeInViewport();
   await page.screenshot({ path: testInfo.outputPath("bento-one-panel.png") });
   const timeline = page.getByRole("region", {
@@ -191,7 +191,7 @@ test("bento surfaces, centered tabs, real link panel and compact community navig
   await button(page, "Beta").click();
   await expect(panel(page)).toHaveCount(0);
   await button(page, "Alpha").click();
-  await expect(composer).toHaveValue("Layout draft");
+  await expect(composer).toHaveJSProperty("value", "Layout draft");
   await button(page, "Switch community").click();
   await expect(
     page.getByRole("dialog", { name: "Communities", exact: true }),
@@ -210,10 +210,10 @@ test("bento surfaces, centered tabs, real link panel and compact community navig
   await expect(button(page, "Switch community")).toBeFocused();
   await button(page, "Switch community").click();
   await button(page, "Switch to Secondary").click();
-  await expect(composer).toHaveValue("");
+  await expect(composer).toHaveJSProperty("value", "");
   await button(page, "Switch community").click();
   await button(page, "Switch to Primary").click();
-  await expect(composer).toHaveValue("Layout draft");
+  await expect(composer).toHaveJSProperty("value", "Layout draft");
   for (const [width, height] of [
     [1200, 800],
     [800, 600],
@@ -232,7 +232,7 @@ test("bento surfaces, centered tabs, real link panel and compact community navig
       .getByRole("navigation", { name: "Pages", exact: true })
       .getByRole("button", { name: "Messages" })
       .click();
-    await expect(composer).toHaveValue("Layout draft");
+    await expect(composer).toHaveJSProperty("value", "Layout draft");
     await expect(page.locator("[data-message-id]").last()).toBeInViewport();
   }
   await page.screenshot({ path: testInfo.outputPath("bento-narrow.png") });
@@ -480,7 +480,7 @@ test("Bestie owns the launcher and the reusable companion card across pages and
   await expect(launch).toBeVisible();
   await expect(bestie).toHaveCount(0);
   await launch.click();
-  await expect(composer).toHaveValue("Companion draft");
+  await expect(composer).toHaveJSProperty("value", "Companion draft");
   await button(page, "Close Bestie panel").click();
   near((await box(panel(page))).height, (await box(conversation)).height);
   await launch.click();
@@ -489,7 +489,7 @@ test("Bestie owns the launcher and the reusable companion card across pages and
   await button(page, "Beta").click();
   await expect(bestie).toHaveCount(1);
   await button(page, "Alpha").click();
-  await expect(composer).toHaveValue("Companion draft");
+  await expect(composer).toHaveJSProperty("value", "Companion draft");
   await button(page, "Switch community").click();
   await button(page, "Personal space").click();
   await expect(
diff --git a/tests/browser/live.spec.mjs b/tests/browser/live.spec.mjs
index 2108b5b4..c879de78 100644
--- a/tests/browser/live.spec.mjs
+++ b/tests/browser/live.spec.mjs
@@ -97,7 +97,7 @@ test("production WS → broker → mounted UI delivers messages and retries a pa
   await expectAnchor(page, reading);
   await expect(
     page.getByRole("textbox", { name: "Message #Alpha", exact: true }),
-  ).toHaveValue("Keep my draft");
+  ).toHaveJSProperty("value", "Keep my draft");
   await end(page);
   await expect(
     history(page).locator(`[data-message-id="${missed.id}"]`),
diff --git a/tests/browser/mention-edit.spec.mjs b/tests/browser/mention-edit.spec.mjs
index c42fee27..1cbb2ab6 100644
--- a/tests/browser/mention-edit.spec.mjs
+++ b/tests/browser/mention-edit.spec.mjs
@@ -64,7 +64,7 @@ test("editing selected name plus pasting same name cannot transfer notification
       await page
         .getByRole("button", { name: `Honey ${first}`, exact: true })
         .click();
-      await expect(input).toHaveValue("@Honey ");
+      await expect(input).toHaveJSProperty("value", "@Honey ");
       // The picker restores focus/caret on the next animation frame. Let that
       // finish before establishing the selection this edit is meant to replace.
       await page.evaluate(() => new Promise(requestAnimationFrame));
@@ -74,7 +74,8 @@ test("editing selected name plus pasting same name cannot transfer notification
         scenario,
       );
       await page.keyboard.insertText(scenario.inserted);
-      await expect(input).toHaveValue(
+      await expect(input).toHaveJSProperty(
+        "value",
         scenario.expected + (scenario.expected.endsWith("help") ? "" : " "),
       );
       await page
diff --git a/tests/browser/mentions.spec.mjs b/tests/browser/mentions.spec.mjs
index fe7cbe1f..f3f0fea1 100644
--- a/tests/browser/mentions.spec.mjs
+++ b/tests/browser/mentions.spec.mjs
@@ -64,7 +64,7 @@ test("actual composer selects namesakes by exact key, publishes channel/reply ta
     );
     await search.fill("grinning");
     await page.getByRole("button", { name: "😀", exact: true }).click();
-    await expect(input).toHaveValue("@Honey @Honey 😀");
+    await expect(input).toHaveJSProperty("value", "@Honey @Honey 😀");
     await expect(
       page
         .getByRole("region", { name: "Notification recipients" })
@@ -146,7 +146,7 @@ test("actual composer selects namesakes by exact key, publishes channel/reply ta
     );
     await expect(
       page.getByRole("textbox", { name: "Reply to thread" }),
-    ).toHaveValue("@Honey ");
+    ).toHaveJSProperty("value", "@Honey ");
     expect(
       await page.evaluate(() => window.mentionFixture.publications.length),
     ).toBe(2);
@@ -163,7 +163,7 @@ test("actual composer selects namesakes by exact key, publishes channel/reply ta
     ).toEqual([{ inputDisabled: true, text: false, mention: false }]);
     await expect(
       page.getByRole("textbox", { name: "Reply to thread" }),
-    ).toHaveValue("@Honey ");
+    ).toHaveJSProperty("value", "@Honey ");
     await expect(
       page
         .getByRole("region", { name: "Notification recipients" })
@@ -175,7 +175,7 @@ test("actual composer selects namesakes by exact key, publishes channel/reply ta
     await choose(keys.second);
     await expect(
       page.getByRole("textbox", { name: "Reply to thread" }),
-    ).toHaveValue("@Honey @Honey ");
+    ).toHaveJSProperty("value", "@Honey @Honey ");
     expect(errors).toEqual([]);
   } finally {
     await server.close();
diff --git a/tests/browser/message-navigation.spec.mjs b/tests/browser/message-navigation.spec.mjs
index 0f9a7e46..86d4a189 100644
--- a/tests/browser/message-navigation.spec.mjs
+++ b/tests/browser/message-navigation.spec.mjs
@@ -93,6 +93,8 @@ test("old root and reply beyond the first thread page open exactly; reclick and
   await page
     .getByRole("button", { name: "Close channel panel", exact: true })
     .click();
+  // Opening a panel retires the navigation-owned thread so the rail continues
+  // to hold one surface. A fresh navigation can open another exact target.
   await expect(thread(page)).toHaveCount(0);
   expect(await openTarget(page, target(app))).toEqual({ status: "opened" });
   await page.getByRole("button", { name: "Close thread", exact: true }).click();
@@ -465,7 +467,10 @@ liveTest(
     release();
     await expect(region.getByText("Loading thread…")).toHaveCount(0);
     await expect(composer).toBeFocused();
-    await expect(composer).toHaveValue("Preserve my thread draft");
+    await expect(composer).toHaveJSProperty(
+      "value",
+      "Preserve my thread draft",
+    );
     expect(await region.evaluate((element) => element.scrollTop)).toBeCloseTo(
       before,
       0,
diff --git a/tests/browser/messages.spec.mjs b/tests/browser/messages.spec.mjs
index f95a7aec..ce55d5cd 100644
--- a/tests/browser/messages.spec.mjs
+++ b/tests/browser/messages.spec.mjs
@@ -209,14 +209,14 @@ test("shared thread UI auto-loads, follows live replies, retries and isolates re
     await expect.poll(() => history.evaluate((el) => el.scrollTop)).toBe(100);
     await draft.fill("keep first draft");
     await choose("Second root");
-    await expect(draft).toHaveValue("");
+    await expect(draft).toHaveJSProperty("value", "");
     await expect(
       panel.getByText("60 replies shown", { exact: true }),
     ).toBeVisible();
     await expect.poll(gap).toBeLessThan(2);
     await draft.fill("reject second reply");
     await draft.press("Enter");
-    await expect(draft).toHaveValue("");
+    await expect(draft).toHaveJSProperty("value", "");
     await expect(
       panel.getByText("Couldn’t send this message.", { exact: true }),
     ).toBeVisible({ timeout: 15_000 });
@@ -238,24 +238,24 @@ test("shared thread UI auto-loads, follows live replies, retries and isolates re
     expect(delivery.publications).toHaveLength(2);
     expect(delivery.publications[0]).toEqual(delivery.publications[1]);
     await choose("First root");
-    await expect(draft).toHaveValue("keep first draft");
+    await expect(draft).toHaveJSProperty("value", "keep first draft");
     await page
       .getByRole("textbox", { name: "Message #one", exact: true })
       .fill("keep channel draft");
     await choose("Other channel root");
-    await expect(draft).toHaveValue("");
+    await expect(draft).toHaveJSProperty("value", "");
     await expect(
       page.getByRole("textbox", { name: "Message #two", exact: true }),
-    ).toHaveValue("");
+    ).toHaveJSProperty("value", "");
     await choose("First root");
-    await expect(draft).toHaveValue("keep first draft");
+    await expect(draft).toHaveJSProperty("value", "keep first draft");
     await expect(
       page.getByRole("textbox", { name: "Message #one", exact: true }),
-    ).toHaveValue("keep channel draft");
+    ).toHaveJSProperty("value", "keep channel draft");
     await choose("Switch scope");
-    await expect(draft).toHaveValue("");
+    await expect(draft).toHaveJSProperty("value", "");
     await choose("Switch scope");
-    await expect(draft).toHaveValue("keep first draft");
+    await expect(draft).toHaveJSProperty("value", "keep first draft");
     for (const [index, kind] of [9, 40002].entries()) {
       await page.evaluate((value) => window.messagesFixture.deep(value), kind);
       await expect(
diff --git a/tests/browser/navigation-boundaries.spec.mjs b/tests/browser/navigation-boundaries.spec.mjs
index 7b54e171..e3510556 100644
--- a/tests/browser/navigation-boundaries.spec.mjs
+++ b/tests/browser/navigation-boundaries.spec.mjs
@@ -103,7 +103,7 @@ test("Alt arrows preserve composer editing while deliberate history shortcuts st
   for (const arrow of ["ArrowLeft", "ArrowRight"]) {
     await page.keyboard.press(`Alt+${arrow}`);
     await expect(composer).toBeFocused();
-    await expect(composer).toHaveValue("one two three");
+    await expect(composer).toHaveJSProperty("value", "one two three");
     expect(
       await page.evaluate(() => window.fixtureNavigation.snapshot().entry.id),
     ).toBe(visit);
@@ -114,5 +114,5 @@ test("Alt arrows preserve composer editing while deliberate history shortcuts st
   await page.keyboard.press(`${apple ? "Meta" : "Control"}+[`);
   await expect(composer).toHaveCount(0);
   await page.keyboard.press(`${apple ? "Meta" : "Control"}+]`);
-  await expect(composer).toHaveValue("one two three");
+  await expect(composer).toHaveJSProperty("value", "one two three");
 });
diff --git a/tests/browser/scroll.spec.mjs b/tests/browser/scroll.spec.mjs
index 3e73dfba..3cd8148e 100644
--- a/tests/browser/scroll.spec.mjs
+++ b/tests/browser/scroll.spec.mjs
@@ -110,11 +110,17 @@ readingTest(
       await button(page, "Switch community").click();
       await button(page, "Switch to Secondary").click();
       await composer(page, "Alpha").waitFor();
-      await expect(composer(page, "Alpha")).toHaveValue(cycle ? "B draft" : "");
+      await expect(composer(page, "Alpha")).toHaveJSProperty(
+        "value",
+        cycle ? "B draft" : "",
+      );
       await composer(page, "Alpha").fill("B draft");
       await button(page, "Switch community").click();
       await button(page, "Switch to Primary").click();
-      await expect(composer(page, "Alpha")).toHaveValue("A draft");
+      await expect(composer(page, "Alpha")).toHaveJSProperty(
+        "value",
+        "A draft",
+      );
       await settle(page);
       await expectAnchor(page, saved);
     }
@@ -141,7 +147,7 @@ readingTest(
       before: saved,
       after: reloadedAnchor,
     });
-    await expect(composer(page, "Alpha")).toHaveValue("A draft");
+    await expect(composer(page, "Alpha")).toHaveJSProperty("value", "A draft");
 
     await observeWork(page);
     const held = app.append("primary", "alpha");
diff --git a/tests/browser/shortcuts.spec.mjs b/tests/browser/shortcuts.spec.mjs
index a88104fa..4a4de409 100644
--- a/tests/browser/shortcuts.spec.mjs
+++ b/tests/browser/shortcuts.spec.mjs
@@ -45,7 +45,7 @@ test("real Settings keys respect dialogs and modifiers, focus main, and preserve
   ).toBeVisible();
   await expect(page.getByRole("main")).toBeFocused();
   await button(page, "Messages").first().click();
-  await expect(composer).toHaveValue("Keep my draft");
+  await expect(composer).toHaveJSProperty("value", "Keep my draft");
 });
 
 test("zoom keys resize real message/composer text, not window or spacing, and persist/reset", async ({
@@ -108,7 +108,7 @@ test("zoom keys resize real message/composer text, not window or spacing, and pe
   await page.keyboard.press(`${modifier}+=`);
   await scale(page, 1.1);
   expect(await node.evaluate((el) => el.isConnected)).toBe(true);
-  await expect(composer).toHaveValue("Unsent zoom draft");
+  await expect(composer).toHaveJSProperty("value", "Unsent zoom draft");
   expect((await page.locator(".shell-header").boundingBox()).height).toBe(
     header.height,
   );
@@ -116,7 +116,7 @@ test("zoom keys resize real message/composer text, not window or spacing, and pe
   await page.reload();
   await scale(page, 1.1);
   await button(page, "Messages").first().click();
-  await expect(composer).toHaveValue("Unsent zoom draft");
+  await expect(composer).toHaveJSProperty("value", "Unsent zoom draft");
   await composer.focus();
   for (let i = 0; i < 15; i++) await page.keyboard.press(`${modifier}+=`);
   await scale(page, 2);
diff --git a/tests/browser/terminal.spec.mjs b/tests/browser/terminal.spec.mjs
index be8c4466..b8913a15 100644
--- a/tests/browser/terminal.spec.mjs
+++ b/tests/browser/terminal.spec.mjs
@@ -29,7 +29,7 @@ test("web hides the unusable terminal and does not consume its shortcut, includi
   await page.keyboard.press(`${modifier}+j`);
   expect(await page.evaluate(() => window.terminalChordPrevented)).toBe(false);
   await expect(drawer).toHaveCount(0);
-  await expect(composer).toHaveValue("Keep this draft");
+  await expect(composer).toHaveJSProperty("value", "Keep this draft");
   await button(page, "Beta").click();
   await expect(launcher).toHaveCount(0);
   await page.keyboard.press(`${modifier}+,`);
diff --git a/tests/browser/typeahead.spec.mjs b/tests/browser/typeahead.spec.mjs
index 9776da3d..187536cd 100644
--- a/tests/browser/typeahead.spec.mjs
+++ b/tests/browser/typeahead.spec.mjs
@@ -46,7 +46,7 @@ test("typeahead replaces only the query and publishes selected namesake identity
   await expect(option).toBeVisible();
   await option.click();
   await expect(input).toBeFocused();
-  await expect(input).toHaveValue("Before @Honey  after");
+  await expect(input).toHaveJSProperty("value", "Before @Honey  after");
   await expect(
     page
       .getByRole("region", { name: "Notification recipients" })
@@ -89,7 +89,7 @@ test("emoji keyboard, Escape, selected text, blur, IME and plugin disable preser
   await input.fill(":smile");
   await expect(page.getByRole("option").first()).toContainText(":smile:");
   await input.press("Tab");
-  await expect(input).toHaveValue("😄");
+  await expect(input).toHaveJSProperty("value", "😄");
   await expect(input).toBeFocused();
   await input.press("Shift+ArrowLeft");
   expect(
@@ -107,7 +107,7 @@ test("emoji keyboard, Escape, selected text, blur, IME and plugin disable preser
   await input.press("Escape");
   await expect(page.getByRole("listbox")).toHaveCount(0);
   await input.press("Shift+Enter");
-  await expect(input).toHaveValue(":smile\n");
+  await expect(input).toHaveJSProperty("value", ":smile\n");
   await input.fill(":smile");
   await expect(page.getByRole("option").first()).toBeVisible();
   await input.evaluate((el) => {
@@ -138,7 +138,7 @@ test("emoji keyboard, Escape, selected text, blur, IME and plugin disable preser
     window.mentionFixture.change("disable", "buzz.emoji"),
   );
   await expect(page.getByRole("listbox")).toHaveCount(0);
-  await expect(input).toHaveValue(":smile");
+  await expect(input).toHaveJSProperty("value", ":smile");
 });
 test("completion resumes after selection collapses to the original caret", async ({
   page,
@@ -157,7 +157,7 @@ test("completion resumes after selection collapses to the original caret", async
   ).toEqual([6, 6]);
   await expect(page.getByRole("option").first()).toContainText(":smile:");
   await input.press("Tab");
-  await expect(input).toHaveValue("😄");
+  await expect(input).toHaveJSProperty("value", "😄");
   await expect(input).toBeFocused();
 });
 test("selection recovery requires fresh results and preserves Escape dismissal", async ({
@@ -200,12 +200,12 @@ test("selection recovery requires fresh results and preserves Escape dismissal",
   await expect(page.getByRole("listbox")).toHaveCount(0);
   expect(await requests()).toBe(after);
   expect(await publish(after - 1)).toBe(false);
-  await expect(input).toHaveValue("!selection");
+  await expect(input).toHaveJSProperty("value", "!selection");
   expect(
     await page.evaluate(() => window.completionFixture.publications.length),
   ).toBe(0);
 });
-test("textarea exposes its listbox popup relationship only while suggestions are open", async ({
+test("editable composer exposes its listbox popup relationship only while suggestions are open", async ({
   page,
 }) => {
   const input = await open(page);
@@ -222,7 +222,7 @@ test("textarea exposes its listbox popup relationship only while suggestions are
     const list = page.getByRole("listbox", { name: "Emoji suggestions" });
     await expect(list).toBeVisible();
     await expect(input).toHaveRole("textbox");
-    expect(await input.evaluate((el) => el.tagName)).toBe("TEXTAREA");
+    await expect(input).toHaveAttribute("contenteditable", "true");
     await expect(input).toHaveAttribute("aria-autocomplete", "list");
     await expect(input).toHaveAttribute("aria-haspopup", "listbox");
     await expect(input).toHaveAttribute(
@@ -299,7 +299,7 @@ test("late publications cannot cross edits, ABA, Escape, blur, plugin replacemen
   expect(await publish(scoped)).toBe(false);
   await expect(
     page.getByRole("textbox", { name: "Message #Test" }),
-  ).toHaveValue("");
+  ).toHaveJSProperty("value", "");
 });
 test("selection follows IDs through reordering and rejected replacement never falls through to send", async ({
   page,
@@ -335,7 +335,7 @@ test("selection follows IDs through reordering and rejected replacement never fa
     "true",
   );
   await input.press("Enter");
-  await expect(input).toHaveValue("B ");
+  await expect(input).toHaveJSProperty("value", "B ");
   await input.fill("!limit");
   const next = await page.evaluate(
     () => window.completionFixture.queries().length - 1,
@@ -350,7 +350,7 @@ test("selection follows IDs through reordering and rejected replacement never fa
     next,
   );
   await input.press("Enter");
-  await expect(input).toHaveValue("!limit");
+  await expect(input).toHaveJSProperty("value", "!limit");
   await expect(page.getByRole("alert")).toContainText("too long");
   expect(
     await page.evaluate(() => window.completionFixture.publications.length),
@@ -503,12 +503,12 @@ test("current custom catalog drives typeahead and signed tags across community r
     ),
   ).toBeLessThan(1);
   await page.getByRole("option", { name: ":smirk:", exact: true }).click();
-  await expect(input).toHaveValue("😏");
+  await expect(input).toHaveJSProperty("value", "😏");
   expect(await input.evaluate((element) => element.selectionStart)).toBe(
     "😏".length,
   );
   await input.pressSequentially("hello");
-  await expect(input).toHaveValue("😏hello");
+  await expect(input).toHaveJSProperty("value", "😏hello");
   await input.fill(":party-par");
   const first = page.getByRole("option", {
     name: ":party-parrot:",
@@ -521,12 +521,8 @@ test("current custom catalog drives typeahead and signed tags across community r
   const suggestionBox = await suggestions.boundingBox();
   const composerBox = await composer.boundingBox();
   expect(suggestionBox.width).toBeCloseTo(composerBox.width * 0.375, 1);
-  const regularTextSize = await input.evaluate(
-    (element) => getComputedStyle(element).fontSize,
-  );
   await first.click();
-  await expect(input).toHaveValue(":party-parrot:");
-  await expect(input).toHaveCSS("font-size", regularTextSize);
+  await expect(input).toHaveJSProperty("value", ":party-parrot:");
   await expect(composer.locator("img")).toHaveCSS("width", "42px");
   await input.press("Shift+ArrowLeft");
   expect(
@@ -544,16 +540,16 @@ test("current custom catalog drives typeahead and signed tags across community r
     caret: "initial",
   });
   await page.evaluate(() => window.emojiFixture.remove());
-  await expect(input).toHaveValue(":party-parrot:");
+  await expect(input).toHaveJSProperty("value", ":party-parrot:");
   await page.evaluate(() => window.emojiFixture.replace());
   await input.press("Backspace");
-  await expect(input).toHaveValue(":party-parrot");
+  await expect(input).toHaveJSProperty("value", "");
   await input.press("ControlOrMeta+z");
-  await expect(input).toHaveValue(":party-parrot:");
+  await expect(input).toHaveJSProperty("value", ":party-parrot:");
   // macOS End scrolls the document; use its caret shortcut when overscroll is off.
   await input.press(process.platform === "darwin" ? "Meta+ArrowRight" : "End");
   await input.pressSequentially(" hello");
-  await expect(input).toHaveValue(":party-parrot: hello");
+  await expect(input).toHaveJSProperty("value", ":party-parrot: hello");
   await input.press("Enter");
   await expect
     .poll(() =>
@@ -575,75 +571,51 @@ test("current custom catalog drives typeahead and signed tags across community r
     ),
   ).toBe(":party-parrot: hello");
   await input.fill(":party-parrot:");
-  await expect(input).toHaveAttribute("data-custom-emoji-only", "true");
-  const renderedEmoji = composer.locator("img");
+  await expect(input).toHaveAttribute("data-single-emoji", "true");
+  const renderedEmoji = input.locator("img");
   await expect(renderedEmoji).toHaveCount(1);
   await expect(renderedEmoji).toHaveCSS("width", "42px");
   await expect(renderedEmoji).toHaveCSS("height", "42px");
   await input.evaluate((element) => {
     const pasted = element.value.repeat(2);
     element.setSelectionRange(0, element.value.length);
+    const clipboardData = new DataTransfer();
+    clipboardData.setData("text/plain", pasted);
     element.dispatchEvent(
-      new InputEvent("beforeinput", {
+      new ClipboardEvent("paste", {
         bubbles: true,
         cancelable: true,
-        data: pasted,
-        inputType: "insertFromPaste",
-      }),
-    );
-    element.setRangeText(
-      pasted,
-      element.selectionStart,
-      element.selectionEnd,
-      "end",
-    );
-    element.dispatchEvent(
-      new InputEvent("input", {
-        bubbles: true,
-        data: pasted,
-        inputType: "insertFromPaste",
+        clipboardData,
       }),
     );
   });
-  await expect(input).toHaveValue(":party-parrot::party-parrot:");
-  await expect(input).toHaveAttribute("data-custom-emoji-only", "true");
+  await expect(input).toHaveJSProperty("value", ":party-parrot::party-parrot:");
+  await expect(input).toHaveAttribute("data-single-emoji", "true");
   await expect(renderedEmoji).toHaveCount(2);
   for (const image of await renderedEmoji.all()) {
     await expect(image).toHaveCSS("width", "42px");
     await expect(image).toHaveCSS("height", "42px");
   }
   await input.fill(":party-parrot:lakjsdlkjflakjsdf");
-  await expect(input).toHaveAttribute("data-leading-custom-emoji", "true");
-  await expect(input).not.toHaveAttribute("data-custom-emoji-only", "true");
+  await expect(input.locator("[data-source]")).toHaveCount(1);
+  await expect(input).not.toHaveAttribute("data-single-emoji", "true");
   await expect(renderedEmoji).toHaveCount(1);
   await expect(renderedEmoji).toHaveCSS("width", "22px");
   await expect(renderedEmoji).toHaveCSS("height", "22px");
   await expect(composer).toContainText("lakjsdlkjflakjsdf");
-  await expect
-    .poll(() =>
-      input.evaluate((element) =>
-        Number.parseFloat(getComputedStyle(element).textIndent),
-      ),
-    )
-    .toBeLessThan(0);
-  const inlineAlignment = await composer.evaluate((element) => {
-    const input = element.querySelector("textarea");
-    const emoji = element.querySelector("[data-composer-inline-emoji]");
-    const prefix = element.querySelector("[data-composer-custom-emoji-prefix]");
-    if (!input || !emoji || !prefix) throw new Error("Missing inline emoji");
+  const inlineAlignment = await input.evaluate((element) => {
+    const token = element.querySelector("[data-source]");
+    const range = document.createRange();
+    range.selectNodeContents(token.nextSibling);
     return {
-      emoji: emoji.getBoundingClientRect().width,
-      prefix: prefix.getBoundingClientRect().width,
-      indent: Number.parseFloat(getComputedStyle(input).textIndent),
+      right: token.getBoundingClientRect().right,
+      textLeft: range.getBoundingClientRect().left,
     };
   });
-  expect(inlineAlignment.prefix + inlineAlignment.indent).toBeCloseTo(
-    inlineAlignment.emoji,
-    1,
-  );
+  expect(inlineAlignment.textLeft).toBeCloseTo(inlineAlignment.right, 0);
   await input.fill("hello :party");
   await page.getByRole("option", { name: ":party:", exact: true }).click();
-  await expect(input).toHaveValue("hello :party:");
+  await expect(input).toHaveJSProperty("value", "hello :party:");
   await input.fill(":party");
   await expect(
     page.getByRole("option", { name: ":party:", exact: true }),
@@ -656,7 +628,7 @@ test("current custom catalog drives typeahead and signed tags across community r
   await page.getByRole("button", { name: "Switch community" }).click();
   await input.fill(":party");
   await page.getByRole("option", { name: ":party:", exact: true }).click();
-  await expect(input).toHaveValue(":party:");
+  await expect(input).toHaveJSProperty("value", ":party:");
   await input.press("Enter");
   await expect
     .poll(() =>
@@ -705,7 +677,7 @@ test("mention choices survive unrelated list updates but revoke removed membersh
   await expect(first).toHaveCount(0);
   await expect(second).toBeVisible();
   await second.click();
-  await expect(input).toHaveValue("@Honey ");
+  await expect(input).toHaveJSProperty("value", "@Honey ");
   await input.press("Enter");
   await expect
     .poll(() => page.evaluate(() => window.mentionFixture.publications.length))
@@ -732,7 +704,7 @@ test("cold multi-word mention query wakes when profiles arrive without another k
   const choice = page.getByRole("option", { name: /^Mary Jane / });
   await expect(choice).toBeVisible();
   await input.press("Enter");
-  await expect(input).toHaveValue("@Mary Jane ");
+  await expect(input).toHaveJSProperty("value", "@Mary Jane ");
   await expect(page.getByRole("listbox")).toHaveCount(0);
 });
 
@@ -762,9 +734,9 @@ test("recovery is a keyboard-selectable action without transferring editor focus
     await input.press("Enter");
     await expect(page.getByRole("option", { name: "Recovered" })).toBeVisible();
     await expect(input).toBeFocused();
-    await expect(input).toHaveValue(`!retry-${withChoice}`);
+    await expect(input).toHaveJSProperty("value", `!retry-${withChoice}`);
     await input.press("Tab");
-    await expect(input).toHaveValue("recovered ");
+    await expect(input).toHaveJSProperty("value", "recovered ");
   }
   expect(await page.evaluate(() => window.completionFixture.retries())).toBe(2);
   expect(
@@ -792,13 +764,13 @@ test("channel and actual ThreadPanel composers keep separate completion and draf
   expect(await thread.getAttribute("aria-controls")).not.toBe(mainControls);
   await option.click();
   await expect(thread).toBeFocused();
-  await expect(thread).toHaveValue("@Fixture Reader ");
-  await expect(main).toHaveValue(":smile");
+  await expect(thread).toHaveJSProperty("value", "@Fixture Reader ");
+  await expect(main).toHaveJSProperty("value", ":smile");
   await main.focus();
   await expect(page.getByRole("option").first()).toContainText(":smile:");
   await main.press("Tab");
-  await expect(main).toHaveValue("😄");
-  await expect(thread).toHaveValue("@Fixture Reader ");
+  await expect(main).toHaveJSProperty("value", "😄");
+  await expect(thread).toHaveJSProperty("value", "@Fixture Reader ");
 });
 
 test("disabled and read-only DOM state reject late publications and displayed choices", async ({
@@ -840,7 +812,7 @@ test("disabled and read-only DOM state reject late publications and displayed ch
     el.readOnly = true;
   });
   await input.press("Enter");
-  await expect(input).toHaveValue("!readonly");
+  await expect(input).toHaveJSProperty("value", "!readonly");
   expect(
     await page.evaluate(() => window.completionFixture.publications.length),
   ).toBe(0);
@@ -856,7 +828,7 @@ test("a later emoji trigger wins after a mention without discarding recipient in
   await input.pressSequentially(":smile");
   await expect(page.getByRole("option").first()).toContainText(":smile:");
   await input.press("Tab");
-  await expect(input).toHaveValue("@Honey 😄");
+  await expect(input).toHaveJSProperty("value", "@Honey 😄");
   await input.press("Enter");
   await expect
     .poll(() => page.evaluate(() => window.mentionFixture.publications.length))
@@ -869,7 +841,7 @@ test("a later emoji trigger wins after a mention without discarding recipient in
   await input.fill("@Honey :smile");
   await expect(page.getByRole("option").first()).toContainText(":smile:");
   await input.press("Tab");
-  await expect(input).toHaveValue("@Honey 😄");
+  await expect(input).toHaveJSProperty("value", "@Honey 😄");
   await expect(
     page.getByRole("region", { name: "Notification recipients" }),
   ).toHaveCount(0);
diff --git a/tests/fixtures/link-lab.css b/tests/fixtures/link-lab.css
new file mode 100644
index 00000000..c6245734
--- /dev/null
+++ b/tests/fixtures/link-lab.css
@@ -0,0 +1,4 @@
+/* Judge inline links on the conversation's panel surface. */
+body {
+  background: var(--bg-panel);
+}
diff --git a/tests/fixtures/link-lab.html b/tests/fixtures/link-lab.html
new file mode 100644
index 00000000..b4de5c13
--- /dev/null
+++ b/tests/fixtures/link-lab.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Link Lab · Buzz</title></head><body><div id="root"></div><script type="module" src="./link-lab.tsx"></script></body></html>
diff --git a/tests/fixtures/link-lab.tsx b/tests/fixtures/link-lab.tsx
new file mode 100644
index 00000000..daed3522
--- /dev/null
+++ b/tests/fixtures/link-lab.tsx
@@ -0,0 +1,42 @@
+import { Context } from "@deepseek-ai/cordis";
+import { createRoot } from "react-dom/client";
+import { useSyncExternalStore } from "react";
+import { PluginRuntime } from "../../src/plugins/runtime";
+import { PagesService } from "../../src/features/pages/service";
+import { PageView } from "../../src/features/pages/PageView";
+import { useKeyboardFocusVisibility } from "../../src/shared/design-system/useKeyboardFocusVisibility";
+import * as plugin from "../../src/bundled/link-lab";
+import manifest from "../../src/bundled/link-lab/manifest.json";
+import "../../src/shared/design-system/styles/globals.css";
+import "./link-lab.css";
+
+// Isolated visual preview: real plugin activation, no relay or identity services.
+document.documentElement.classList.toggle(
+  "dark",
+  new URLSearchParams(location.search).get("theme") === "dark",
+);
+const root = new Context();
+const runtime = new PluginRuntime(root, async () => plugin);
+const pages = new PagesService(root);
+runtime.reconcile([
+  {
+    manifest: { ...manifest, apiVersion: 1 },
+    enabled: true,
+    source: "bundled",
+    revision: "preview",
+    previous: null,
+    error: null,
+  },
+]);
+function Preview() {
+  useKeyboardFocusVisibility();
+  const entries = useSyncExternalStore(pages.subscribe, pages.snapshot);
+  return entries[0] ? <PageView page={entries[0]} /> : <p>Opening Link Lab…</p>;
+}
+const mount = document.getElementById("root");
+if (!mount) throw new Error("Missing preview root");
+createRoot(mount).render(<Preview />);
+import.meta.hot?.dispose(() => {
+  void runtime.dispose();
+  void root.fiber.dispose();
+});
diff --git a/tests/fixtures/link-messages.html b/tests/fixtures/link-messages.html
new file mode 100644
index 00000000..3ebb3d52
--- /dev/null
+++ b/tests/fixtures/link-messages.html
@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Message link checks</title></head><body><div id="root"></div><script type="module" src="./link-messages.tsx"></script></body></html>
diff --git a/tests/fixtures/link-messages.tsx b/tests/fixtures/link-messages.tsx
new file mode 100644
index 00000000..dc909c5b
--- /dev/null
+++ b/tests/fixtures/link-messages.tsx
@@ -0,0 +1,255 @@
+import { Context } from "@deepseek-ai/cordis";
+import { useState } from "react";
+import { createRoot } from "react-dom/client";
+import { PluginRuntime } from "../../src/plugins/runtime";
+import { ConversationService } from "../../src/features/conversation/service";
+import type { PluginModule } from "../../src/plugins/api";
+import type { ChannelMessage } from "../../src/features/relay/contracts";
+import type { RelaySession } from "../../src/features/relay/session";
+import * as links from "../../src/bundled/links";
+import { readView, writeView } from "../../src/shared/view-state";
+import "../../src/shared/styles/globals.css";
+
+// Real MessageRow + plugin lifecycle, with no relay, identity or writes.
+const broken: PluginModule = {
+  inject: ["conversation"],
+  apply(ctx) {
+    ctx.conversation.registerLink({
+      id: "broken",
+      title: "Broken",
+      matches: () => true,
+      component: () => {
+        throw new Error("Expected test renderer failure");
+      },
+    });
+  },
+};
+const root = new Context();
+const runtime = new PluginRuntime(root, async (plugin) =>
+  plugin.manifest.id === "fixture.mentions"
+    ? mentionTools
+    : plugin.revision === "broken"
+      ? broken
+      : links,
+);
+const conversation = new ConversationService(root);
+const mentionTools: PluginModule = {
+  inject: ["conversation"],
+  apply(ctx) {
+    ctx.conversation.registerTool({
+      id: "fixture-mentions",
+      title: "Example mentions",
+      component: ({ insertMention }) => (
+        <>
+          <button
+            type="button"
+            onClick={() =>
+              insertMention({ pubkey: "a".repeat(64), name: "Alex Chen" })
+            }
+          >
+            Mention Alex Chen
+          </button>
+          <button
+            type="button"
+            onClick={() =>
+              insertMention({ pubkey: "b".repeat(64), name: "Build Bot" })
+            }
+          >
+            Mention Build Bot
+          </button>
+        </>
+      ),
+    });
+  },
+};
+function mode(revision: string) {
+  runtime.reconcile([
+    {
+      manifest: {
+        id: "fixture.mentions",
+        name: "Example mentions",
+        apiVersion: 1,
+      },
+      enabled: true,
+      source: "bundled",
+      revision: "1",
+      previous: null,
+      error: null,
+    },
+    ...(revision === "off"
+      ? []
+      : [
+          {
+            manifest: { id: "buzz.links", name: "Links", apiVersion: 1 },
+            enabled: true,
+            source: "bundled",
+            revision,
+            previous: null,
+            error: null,
+          },
+        ]),
+  ]);
+}
+mode("on");
+const row: ChannelMessage = {
+  id: "link-row",
+  channelId: "test",
+  authorId: "test",
+  createdAt: 1,
+  content: `Looks like Material 3 or [this shadcdn/ui clone]\\([https://github.com/duobaseio/forui](https://github.com/duobaseio/forui)).\nReview <https://github.com/block/buzz/issues/1234>. Files: <https://drive.google.com/drive/folders/example>.\nAsk @Alex Chen and @Build Bot in #design.\nA message: <buzz://message?channel=design&id=${"1".repeat(64)}>. A thread: <buzz://message?channel=planning&id=${"1".repeat(64)}&thread=${"2".repeat(64)}>.`,
+  mentions: ["a".repeat(64), "b".repeat(64)],
+  participants: [],
+  attachments: [],
+  reactions: [],
+  replyCount: 0,
+};
+const profiles = new Map([
+  ["a".repeat(64), { name: "Alex Chen" }],
+  ["b".repeat(64), { name: "Build Bot" }],
+]);
+const directory = {
+  status: "ready",
+  channels: [
+    { id: "design", name: "design" },
+    { id: "planning", name: "planning", hidden: true },
+  ],
+};
+const library = {
+  status: "ready",
+  definitions: [],
+  identities: [{ pubkey: "b".repeat(64), name: "Build Bot" }],
+};
+const emoji = { status: "ready", entries: [] };
+const sent: Array<{ text: string; mentions: readonly string[] }> = [];
+Object.assign(window, { linkComposerFixture: { sent } });
+const previewSession = {
+  outbox: { supports: () => true },
+  emoji: {
+    snapshot: () => emoji,
+    subscribe: () => () => {},
+    ensure: async () => {},
+  },
+  messages: {
+    send: (_channelId: string, text: string, mentions: readonly string[]) => {
+      sent.push({ text, mentions });
+      return `preview-${sent.length}`;
+    },
+  },
+  channels: { list: () => directory, subscribeList: () => () => {} },
+  profiles: {
+    snapshot: () => profiles,
+    subscribe: () => () => {},
+    ensure: async () => {},
+  },
+  agentLibrary: { snapshot: () => library, subscribe: () => () => {} },
+  media: () => undefined,
+  thread: (channelId: string) => {
+    const snapshot = {
+      status: "ready",
+      root: {
+        ...row,
+        id: "1".repeat(64),
+        channelId,
+        authorId: "a".repeat(64),
+        createdAt: 1789290300,
+        content:
+          channelId === "design"
+            ? "Kk, so I mapped the two topologies I think we’re considering. Watch at 2x if you must lol\n\n\nMore details and the video follow here."
+            : "The updated links are ready to try. Channel names keep the conversation readable, and a quick hover gives you the context before you open it. Longer messages stop after four lines so the preview stays compact. Open the conversation to read the rest and join the discussion.",
+      },
+      replies: [],
+      canLoadMore: false,
+    };
+    return {
+      snapshot: () => snapshot,
+      subscribe: () => () => {},
+      refresh: async () => {},
+      loadMore: async () => {},
+      dispose: () => {},
+    };
+  },
+} as unknown as RelaySession;
+const composerScope = "link-composer-preview-v1";
+if (readView(composerScope, "draft:design", null) === null) {
+  writeView(composerScope, "draft:design", {
+    text: row.content,
+    recipients: [...profiles].map(([pubkey, profile]) => ({
+      pubkey,
+      name: profile.name,
+      start: row.content.indexOf(`@${profile.name}`),
+      end: row.content.indexOf(`@${profile.name}`) + profile.name.length + 1,
+    })),
+  });
+}
+function Preview() {
+  const [opened, setOpened] = useState("No link opened");
+  const [enabled, setEnabled] = useState("on");
+  return (
+    <main
+      style={{
+        maxWidth: 760,
+        margin: "24px auto",
+        padding: 24,
+        background: "var(--surface)",
+      }}
+    >
+      <h1>Message links</h1>
+      <div>
+        {["on", "off", "broken"].map((value) => (
+          <button
+            type="button"
+            key={value}
+            onClick={() => {
+              mode(value);
+              setEnabled(value);
+            }}
+          >
+            Plugin {value}
+          </button>
+        ))}
+        <button
+          type="button"
+          onClick={() => {
+            document.documentElement.dataset.colorMode =
+              document.documentElement.dataset.colorMode === "dark"
+                ? "light"
+                : "dark";
+          }}
+        >
+          Toggle theme
+        </button>
+      </div>
+      <p>Plugin mode: {enabled}</p>
+      <conversation.ui.Message
+        row={row}
+        session={previewSession}
+        scope={`https://preview.example:${"a".repeat(64)}`}
+        profile={{ name: "Preview" }}
+        media={() => undefined}
+        onOpenLink={(url) => {
+          setOpened(url);
+          return true;
+        }}
+        canOpenLink={() => true}
+        day={false}
+        retry={undefined}
+      />
+      <p role="status">{opened}</p>
+      <h2>Try composing</h2>
+      <conversation.ui.Composer
+        scope={composerScope}
+        session={previewSession}
+        channelId="design"
+        channelName="design"
+        onSend={() => setOpened(`Preview only: ${sent.at(-1)?.text}`)}
+      />
+    </main>
+  );
+}
+const mount = document.getElementById("root");
+if (!mount) throw new Error("Missing root");
+createRoot(mount).render(<Preview />);
+import.meta.hot?.dispose(() => {
+  void runtime.dispose();
+  void root.fiber.dispose();
+});
diff --git a/tests/fixtures/mentions.tsx b/tests/fixtures/mentions.tsx
index 4bfa9da8..2b0f6ca5 100644
--- a/tests/fixtures/mentions.tsx
+++ b/tests/fixtures/mentions.tsx
@@ -102,7 +102,10 @@ const plugins = createPluginManager(context, {
               useLayoutEffect(() => {
                 if (disabled)
                   disabledCalls.push({
-                    inputDisabled: document.querySelector("textarea")?.disabled,
+                    inputDisabled:
+                      document
+                        .querySelector('[role="textbox"]')
+                        ?.getAttribute("aria-disabled") === "true",
                     text: insertText("STALE"),
                     mention: insertMention({
                       pubkey: second.pubkey,