feat(desktop): inline rich embeds, diagrams & alerts in assistant markdown

[OutThisLife]

Summary

Inline rich rendering for the desktop chat markdown surface. A bare autolinked
URL unfurls to a provider embed; ```mermaid / ```svg fences render as
diagrams; > [!NOTE]-style blockquotes become GFM alert callouts. Diagrams open
into a reusable pan/zoom viewer. Embeds are privacy-gated — nothing reaches a
third party until the user consents. Detection is pure and testable; each
renderer is a lazy split chunk pulled only when first used.

Renderers

• YouTube / Vimeo — plain iframe, 16:9, capped at 33dvh.
• Google Maps / OpenStreetMap — plain iframe; a ScrollGate blocks wheel until ⌘ is held (zoom), so maps never hijack transcript scroll.
• X / Instagram — the provider's official blockquote + embed script rendered in-document so it self-sizes (no measuring); X is theme-aware + transparent.
• TikTok — the official dark video player (player/v1), 9:16.
• Pinterest — assets.pinterest.com/ext/embed.html iframe at the small pin size.
• Spotify — theme=0 dark player.
• Mermaid — lazy mermaid, theme-aware; click to open the diagram in the pan/zoom viewer (copy-as-PNG). Falls back to source while streaming/on error.
• Inline SVG — lazy, DOMPurify-sanitised, left-aligned and size-capped.
• GFM alerts — note / tip / important / warning / caution.

Privacy consent (per @ethernet8023's review)

• Embeds don't fetch until the user consents. Default ask: a placeholder sized to the embed shows a commit-style split button — Load (this embed) with a caret for Always allow (persisted per service).
• Appearance → Inline Embeds global control: Ask / Always / Off (Off keeps plain links), with a one-click reset for the allowed-services list.
• Purely client-side (persistentAtom: $embedMode + per-service allowlist) — the renderer makes the request, so it never touches the gateway/config.yaml.
• Local renderers (Mermaid, SVG, alerts) make no outbound request and are never gated.

Zoom/pan primitive

• components/ui/use-zoom-pan.ts — headless transform hook: wheel zooms toward the cursor, drag pans, buttons zoom/reset (clamped 0.25×–8×).
• components/ui/zoomable.tsx — <Zoomable>: click any content to open a full overlay with the pan/zoom stage, a toolbar, and an optional copy/export action. Content-agnostic.
• lib/svg-image.ts — copySvgAsPng() rasterises an SVG to PNG for the clipboard (text fallback).

Sizing & theming (pure CSS, no measuring)

• Ratio embeds cap their WIDTH off the ratio (min(maxW, 100%, calc(33dvh * ratio))) so height tops out at 33dvh while scaling.
• Plain iframes let the wheel chain to the transcript; only maps gate scroll.
• Embeds are color-scheme-matched to their content to avoid the browser's opaque white Canvas backdrop (the white-corner artifact).

Structure

• embeds/providers/* — pure URL → descriptor matchers (+ detect.test.ts).
• embeds/registry.tsx — fenced-language → lazy renderer table.
• embeds/url-embed.tsx — consent gate + inline card dispatch + content-visibility virtualization.
• embeds/embed-consent.tsx + store/embed-consent.ts — the placeholder + consent state.
• embeds/<provider>-embed.tsx — one lazy renderer per kind.
• embeds/{rich-boundary,fail,scroll-gate,escape-html,use-is-dark,embed-size} — shared primitives.
• electron/embed-referer.cjs — YouTube Referer stamp on the embed webview partition.

Test plan

• npm run typecheck (apps/desktop)
• eslint clean
• vitest run src/components/assistant-ui/embeds (27 tests)
• Paste bare YouTube / Vimeo / maps / X / Instagram / Pinterest / TikTok / Spotify URLs → placeholder, then Load / Always allow
• ```mermaid + ```svg fences and > [!NOTE] blockquotes render
• Click a mermaid diagram → pan/zoom viewer, copy-as-PNG
• Appearance → Inline Embeds: Ask / Always / Off behave; Always-allow persists per service; reset clears it

[ethernet8023]

i know a lot of people would be upset to see hermes agent sending traffic to youtube/etc without asking first. wdyt about an "allow embeds" setting, and a button that says "load youtube embed" that's like the size of the player, until it's turned on? maybe with an "always allow embeds" setting..?

other than that, this looks fine, i'm just hesitant about reaching out to third party websites (and thus giving em info they can use to track me as a user) without explicitly enabling it

[OutThisLife]

Great call — fully agree, shipped a consent gate in 6cd84f9.

Modeled on the tool-approval UX so it feels native:

• Default is ask: each embed renders a placeholder sized exactly like the player (no layout shift) with Load (this embed only) and a dropdown with Always allow (persisted), Open in browser, and Never show embeds.
• Per-service, not just global: "Always allow YouTube" won't allow X, etc.
• Appearance → Inline Embeds setting for the global default: Ask / Always / Off (Off keeps plain links).
• Purely client-side (desktop-local persistentAtom: $embedMode + per-service allowlist) — the renderer is what makes the request, so it never touches the gateway/config.yaml and gates with zero round-trip.
• Local renderers (Mermaid, inline SVG, GFM alerts) are never gated — they make no outbound request.

So nothing reaches a third party until the user opts in, per-embed or per-service. Thanks for the nudge.

[OutThisLife]

Polished the consent UI a bit since the first pass: the placeholder now uses the same SplitButton primitive as the commit button — primary Load , caret for Always allow — sized to the embed's footprint, with the global Ask/Always/Off in Appearance settings. Behavior is unchanged from my earlier comment; just wanted it to match the rest of the app rather than a one-off control.