@kabmo-labs/kabmo 0.0.0-stage → 0.1.0

package/src/client/components/common/CopyButton.tsx

@@ -0,0 +1,97 @@
+import type { TargetedMouseEvent } from 'preact';
+import { Check, Copy } from 'lucide-preact';
+import { copyToClipboard } from '@/client/hooks/ui/clipboard';
+import { useCopyFlag } from '@/client/hooks/ui/copy-flag';
+
+export interface CopyButtonProps {
+  /** Text written to the clipboard. */
+  text: string;
+  /** Full button className. Defaults to the shared compact toolbar style. */
+  className?: string;
+  /** Copy (idle) icon size. Default 10. */
+  iconSize?: number;
+  /** Optional className applied to the idle Copy icon (e.g. a colour). */
+  iconClassName?: string;
+  /** Optional className applied to the success Check icon (default text-success). */
+  copiedIconClassName?: string;
+  /** Visible idle label. Omit for an icon-only button. */
+  label?: string;
+  /** Visible label while copied. Default 'Copied'. */
+  copiedLabel?: string;
+  /** Wrap the label text in a <span> (call sites that style the label). */
+  wrapLabel?: boolean;
+  /** className for the copied label span (requires wrapLabel). */
+  copiedLabelClassName?: string;
+  /** Native title / tooltip. */
+  title?: string;
+  /**
+   * Accessible name. An icon-only button needs one — `title` alone is not a
+   * reliable accessible name across screen readers. Defaults to the title.
+   */
+  ariaLabel?: string;
+  /** Extra click handler run before copying (e.g. stopPropagation). */
+  onClick?: (event: TargetedMouseEvent<HTMLButtonElement>) => void;
+  /** Copied-state reset delay in ms. Default 2000. */
+  resetMs?: number;
+  /**
+   * Tooltip while there is nothing to copy. The button is disabled rather than
+   * silently doing nothing: an empty payload (a run whose last row is a tool
+   * call, a message whose answer landed in `notice`) used to swallow the click
+   * with no feedback at all.
+   */
+  emptyTitle?: string;
+}
+
+const DEFAULT_CLASSNAME =
+  'flex cursor-pointer items-center gap-1 rounded px-1.5 py-0.5 text-[10px] text-ink/45 transition-colors hover:bg-ink/5 hover:text-ink';
+
+/** Clipboard copy control: idle Copy icon → success Check, with a timed revert. */
+export function CopyButton({
+  text,
+  className = DEFAULT_CLASSNAME,
+  iconSize = 10,
+  iconClassName,
+  copiedIconClassName = 'text-success',
+  label,
+  copiedLabel = 'Copied',
+  wrapLabel = false,
+  copiedLabelClassName,
+  title,
+  ariaLabel,
+  onClick,
+  resetMs = 2000,
+  emptyTitle,
+}: CopyButtonProps) {
+  const { copied, flagCopied } = useCopyFlag(resetMs);
+  // No text is not a copy — say so instead of accepting a click that does
+  // nothing (the previous `if (!text) return` left the button looking live).
+  const isEmpty = !text;
+
+  const handleClick = async (event: TargetedMouseEvent<HTMLButtonElement>) => {
+    onClick?.(event);
+    if (isEmpty) return;
+    const ok = await copyToClipboard(text);
+    if (ok) flagCopied();
+  };
+
+  const labelText = copied ? copiedLabel : label;
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      className={`${className} ${isEmpty ? 'disabled:opacity-40 disabled:cursor-not-allowed' : ''}`}
+      title={isEmpty ? emptyTitle ?? 'Nothing to copy' : title}
+      aria-label={isEmpty ? emptyTitle ?? 'Nothing to copy' : ariaLabel ?? title}
+      disabled={isEmpty}
+    >
+      {copied ? (
+        <Check size={iconSize} className={copiedIconClassName} />
+      ) : (
+        <Copy size={iconSize} className={iconClassName} />
+      )}
+      {labelText !== undefined &&
+        (wrapLabel ? <span className={copied ? copiedLabelClassName : undefined}>{labelText}</span> : labelText)}
+    </button>
+  );
+}

package/src/client/components/common/FolderPicker.tsx

@@ -0,0 +1,254 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * FolderPicker — modal directory browser used by "New Workspace" to choose a
+ * project path. Lists subdirectories via /api/fs/browse (server-side, starts
+ * at the OS home), supports manual path entry and parent navigation, and
+ * returns the selected absolute path.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import type { FormEvent } from 'preact/compat';
+import { ChevronRight, Folder, FolderOpen, Home, Loader2, RefreshCw, X } from 'lucide-preact';
+import { fetchDirectories, type DirectoryEntry } from '@/shared/lib/fs/browse';
+
+interface FolderPickerProps {
+  /** The folder to start browsing from (defaults to home). */
+  initialPath?: string;
+  /** Called when the user confirms a folder. */
+  onSelect: (path: string) => void;
+  /** Called when the user dismisses the picker. */
+  onClose: () => void;
+}
+
+/**
+ * `/api/fs/browse` is read through the shared fetcher (`@/shared/lib/fs/browse`)
+ * rather than a local one, because the New Workspace modal renders the same
+ * listing and a second copy of the response shape is how the two drift.
+ */
+
+export function FolderPicker({ initialPath, onSelect, onClose }: FolderPickerProps) {
+  const [currentPath, setCurrentPath] = useState(initialPath ?? '');
+  const [pathInput, setPathInput] = useState('');
+  const [directories, setDirectories] = useState<DirectoryEntry[]>([]);
+  const [parentPath, setParentPath] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedPath, setSelectedPath] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const navigate = useCallback(async (target?: string) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await fetchDirectories(target);
+      setCurrentPath(data.path ?? target ?? '');
+      setParentPath(data.parentPath ?? null);
+      setPathInput(data.path ?? target ?? '');
+      setDirectories(data.directories ?? []);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void navigate(initialPath);
+  }, [initialPath, navigate]);
+
+  const handleGoUp = () => {
+    if (parentPath) void navigate(parentPath);
+  };
+
+  const handlePathSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    const candidate = pathInput.trim();
+    if (candidate) void navigate(candidate);
+  };
+
+  const handleOpenDir = (dir: DirectoryEntry) => {
+    void navigate(dir.path);
+  };
+
+  const handlePick = (dir: DirectoryEntry) => {
+    setSelectedPath(dir.path);
+    onSelect(dir.path);
+  };
+
+  const handlePickCurrent = () => {
+    if (currentPath) {
+      setSelectedPath(currentPath);
+      onSelect(currentPath);
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 bg-ink/30 z-[60] flex items-center justify-center p-4"
+      onClick={onClose}
+    >
+      <div
+        className="bg-paper border border-ink/15 rounded-lg shadow-2xl w-full max-w-lg flex flex-col overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-ink/10">
+          <h3 className="font-semibold text-sm flex items-center space-x-2">
+            <FolderOpen size={15} className="text-ink/70" />
+            <span>Choose Project Folder</span>
+          </h3>
+          <button
+            type="button"
+            onClick={onClose}
+            className="p-1 rounded hover:bg-ink/10 text-ink/60 hover:text-ink transition-colors"
+            aria-label="Close picker"
+          >
+            <X size={15} />
+          </button>
+        </div>
+
+        {/* Path bar */}
+        <div className="px-4 py-2 border-b border-ink/10 bg-canvas/50">
+          <form onSubmit={handlePathSubmit} className="flex items-center space-x-2">
+            <Home size={14} className="text-ink/40 flex-shrink-0" />
+            <input
+              ref={inputRef}
+              type="text"
+              value={pathInput}
+              onChange={(e) => setPathInput(e.currentTarget.value)}
+              placeholder="~ or /absolute/path"
+              className="flex-1 bg-transparent outline-none text-xs font-mono text-ink placeholder-ink/30 py-1"
+              spellcheck={false}
+            />
+            <button
+              type="submit"
+              className="px-2 py-1 rounded bg-ink/5 border border-ink/10 text-[11px] font-medium hover:bg-ink/10 transition-colors"
+            >
+              Go
+            </button>
+          </form>
+          <div className="flex items-center space-x-1 mt-1 text-[11px] text-ink/40 truncate">
+            <button
+              type="button"
+              onClick={() => void navigate()}
+              className="hover:text-ink transition-colors flex items-center"
+            >
+              <Home size={11} className="mr-0.5" /> home
+            </button>
+            {currentPath.split('/').filter(Boolean).map((seg, idx, arr) => {
+              const pathUpTo = '/' + currentPath.split('/').filter(Boolean).slice(0, idx + 1).join('/');
+              const isLast = idx === arr.length - 1;
+              return (
+                <span key={pathUpTo} className="flex items-center space-x-1 min-w-0">
+                  <ChevronRight size={10} className="text-ink/20 flex-shrink-0" />
+                  {isLast ? (
+                    <span className="text-ink/70 truncate">{seg}</span>
+                  ) : (
+                    <button
+                      type="button"
+                      onClick={() => void navigate(pathUpTo)}
+                      className="hover:text-ink transition-colors truncate max-w-[120px]"
+                    >
+                      {seg}
+                    </button>
+                  )}
+                </span>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Directory list */}
+        <div className="flex-1 min-h-[240px] max-h-[360px] scrollbar-overlay-container p-2">
+          {loading ? (
+            <div className="flex items-center justify-center h-40 text-ink/40">
+              <Loader2 size={18} className="animate-spin" />
+            </div>
+          ) : error ? (
+            <div className="flex flex-col items-center justify-center h-40 text-xs text-red-600 space-y-2 px-4">
+              <span>{error}</span>
+              <button
+                type="button"
+                onClick={() => void navigate(currentPath || undefined)}
+                className="px-2 py-1 rounded bg-ink/5 border border-ink/10 text-ink/70 hover:bg-ink/10 flex items-center space-x-1"
+              >
+                <RefreshCw size={11} /> Retry
+              </button>
+            </div>
+          ) : directories.length === 0 ? (
+            <div className="text-center py-16 text-xs text-ink/40">No subfolders</div>
+          ) : (
+            directories.map((dir) => (
+              <div
+                key={dir.path}
+                className={`group flex items-center justify-between px-2.5 py-2 rounded cursor-pointer transition-colors ${
+                  selectedPath === dir.path ? 'bg-ink/10' : 'hover:bg-ink/5'
+                }`}
+                onDblClick={() => handleOpenDir(dir)}
+              >
+                <button
+                  type="button"
+                  onClick={() => handleOpenDir(dir)}
+                  className="flex items-center space-x-2 min-w-0 flex-1 text-left"
+                >
+                  <Folder size={15} className="text-ink/50 flex-shrink-0" />
+                  <span className="text-xs truncate text-ink/85">{dir.name}</span>
+                </button>
+                <button
+                  type="button"
+                  onClick={() => handlePick(dir)}
+                  className="touch-shown-flex hidden group-hover:flex px-2 py-0.5 rounded bg-ink text-canvas text-[10px] font-semibold hover:bg-ink/80 transition-colors flex-shrink-0"
+                >
+                  Choose
+                </button>
+              </div>
+            ))
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-between px-4 py-3 border-t border-ink/10">
+          <div className="flex items-center space-x-2 min-w-0">
+            <button
+              type="button"
+              onClick={handleGoUp}
+              disabled={!parentPath}
+              className="px-2.5 py-1.5 rounded bg-ink/5 border border-ink/10 text-[11px] font-medium hover:bg-ink/10 disabled:opacity-40 transition-colors flex items-center space-x-1"
+            >
+              <span>↑</span>
+              <span>Up</span>
+            </button>
+            <button
+              type="button"
+              onClick={() => void navigate()}
+              className="px-2.5 py-1.5 rounded bg-ink/5 border border-ink/10 text-[11px] font-medium hover:bg-ink/10 transition-colors"
+            >
+              Home
+            </button>
+          </div>
+          <div className="flex items-center space-x-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-3 py-1.5 text-xs font-medium text-ink/60 hover:text-ink transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={handlePickCurrent}
+              disabled={!currentPath}
+              className="px-3.5 py-1.5 text-xs font-medium bg-ink text-canvas rounded hover:bg-ink/90 disabled:opacity-50 transition-colors"
+            >
+              Use This Folder
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/client/components/common/MarkdownRenderer.tsx

@@ -0,0 +1,299 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Markdown renderer for the chat timeline, editor previews and the wiki reader.
+ *
+ * Pipeline: remend (heal streaming) → marked (GFM, autolink, KaTeX) →
+ * DOMPurify (sanitize). Renders as sanitized HTML. Raw HTML in the source is
+ * escaped by DOMPurify (default profile) rather than executed. A single
+ * delegated click handler manages the per-block "Copy" buttons. Mermaid
+ * fences hydrate async into sanitized SVGs after mount.
+ *
+ * Three source kinds, one pipeline: agent output (default), a workspace file's
+ * preview (`document`), and a wiki page (`wikiScope`). The last two differ only
+ * in what they let through — a document's own HTML is markup, and a wiki page
+ * additionally gets gollum's `[[Page]]` links expanded and its references
+ * resolved into the wiki's own tree.
+ */
+
+import type { TargetedMouseEvent } from 'preact';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { renderMarkdown } from '@/shared/lib/markdown/marked';
+import { rewriteDocumentReferences, type DocumentScope } from '@/shared/lib/markdown/document-urls';
+import { rewriteWikiReferences, type WikiRenderScope } from '@/shared/lib/wiki/document-urls';
+import { expandGollumLinks } from '@/shared/lib/wiki/pages';
+import { hydrateMathBlocks, MATH_PENDING_CLASS, preloadKatex } from '@/shared/lib/markdown/katex';
+import { sanitizeHtml } from '@/shared/lib/markdown/sanitize';
+import { hydrateMermaidBlocks } from '@/shared/lib/markdown/mermaid';
+import { DIRECTIVE_BLOCK_CLASS } from '@/shared/lib/markdown/directives';
+import { hydrateDirectiveBlocks, unmountDirectiveBlocks } from '@/client/lib/plugins/directives';
+import { useDirectiveContext, useDirectiveRenderer } from '@/client/hooks/workspace/directives';
+import { copyToClipboard } from '@/client/hooks/ui/clipboard';
+import { openFileInEditor } from '@/client/hooks/ui/open-file';
+import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
+import { DiagramViewer } from '@/client/components/common/diagram-viewer';
+import { readDiagramBlock, type DiagramSnapshot } from '@/client/components/common/diagram-viewer/read-block';
+
+
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+
+interface MarkdownRendererProps {
+  content: string;
+  className?: string;
+  /**
+   * Render the content as the document it IS (an opened file's preview) rather
+   * than as agent output: the source's own HTML renders as markup instead of
+   * showing its tags, and relative references resolve against `scope`.
+   */
+  document?: boolean;
+  /** Where the document lives, so its relative links and images resolve. */
+  scope?: DocumentScope;
+  /**
+   * Render the content as a wiki page: its own HTML is markup, its `[[Page]]`
+   * links expand, and its references resolve against the wiki's tree. Keep the
+   * object identity stable (memoize it) — a new one re-parses the page.
+   */
+  wikiScope?: WikiRenderScope;
+  /** Follow a wiki link to another page of the same wiki. */
+  onWikiNavigate?: (path: string) => void;
+}
+
+export function MarkdownRenderer({ content, className = '', document: isDocument = false, scope, wikiScope, onWikiNavigate }: MarkdownRendererProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  /** Block the open viewer was read from, so a theme re-render can refresh it. */
+  const diagramBlockRef = useRef<HTMLElement | null>(null);
+  const [diagram, setDiagram] = useState<DiagramSnapshot | null>(null);
+
+  const syntaxReady = useSyntaxReady();
+
+  // Primitive deps: call sites build `scope` inline, and a new object identity
+  // per render would re-run marked + DOMPurify over the whole document.
+  const scopePath = scope?.path;
+  const scopeRoot = scope?.root;
+  const scopeRepo = scope?.repo;
+  const wikiPath = wikiScope?.path;
+  const wikiEntries = wikiScope?.entries;
+  const wikiRoot = wikiScope?.root;
+  const wikiRepo = wikiScope?.repo;
+  /** Presence, not identity: this drives the click handler, never the parse. */
+  const isWiki = wikiScope !== undefined;
+
+  const html = useMemo(() => {
+    if (!content) return '';
+    // Gollum's `[[Page]]` is invisible to a markdown parser, so it is expanded
+    // before parsing rather than patched afterwards.
+    const source = wikiPath ? expandGollumLinks(content) : content;
+    const rendered = renderMarkdown(source, { allowHtml: isDocument || isWiki });
+    const scoped = wikiPath && wikiEntries
+      ? rewriteWikiReferences(rendered, { path: wikiPath, entries: wikiEntries, root: wikiRoot, repo: wikiRepo })
+      : isDocument && scopePath
+        ? rewriteDocumentReferences(rendered, { path: scopePath, root: scopeRoot, repo: scopeRepo })
+        : rendered;
+    // If the message contains math, start fetching KaTeX during parse rather
+    // than waiting for the post-mount hydration effect — the request overlaps
+    // sanitization and the rest of the render instead of following it.
+    if (scoped.includes(MATH_PENDING_CLASS)) preloadKatex();
+    return sanitizeHtml(scoped);
+    // Primitives, never the `wikiScope` object: the panel memoizes it, but a
+    // call site that builds one inline must not re-parse the page per render.
+  }, [content, syntaxReady, isDocument, scopePath, scopeRoot, scopeRepo, isWiki, wikiPath, wikiEntries, wikiRoot, wikiRepo]);
+
+  const hasMermaid = html.includes('mermaid-block');
+  const hasMath = html.includes(MATH_PENDING_CLASS);
+  const hasDirective = html.includes(DIRECTIVE_BLOCK_CLASS);
+
+  // A claimed fence renders the plugin's component. The placeholder holds the
+  // ordinary code block, so an unclaimed one needs no work at all.
+  const directive = useDirectiveRenderer();
+  const slotContext = useDirectiveContext();
+  useIsomorphicLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!hasDirective || !container || typeof window === 'undefined') return;
+    hydrateDirectiveBlocks(container, directive, slotContext);
+    // `html` is a dep so a re-parse re-hydrates; the call itself is idempotent,
+    // so a re-render with the same markup does nothing.
+    //
+    // The cleanup is not optional: `render()` mounts a real Preact tree, and a
+    // timeline that drops a message (a rewind, a session switch) would leave
+    // that tree's hooks and effects alive against a detached host. The markup
+    // itself is the container's own, so the next render re-creates it — only
+    // the plugin tree has to be taken down here.
+    return () => unmountDirectiveBlocks(container);
+  }, [hasDirective, html, directive, slotContext]);
+
+  // KaTeX is ~522 kB of JS fetched only when a message contains math; the
+  // placeholders emitted by `marked.ts` are swapped for real markup here.
+  useEffect(() => {
+    if (!hasMath || typeof window === 'undefined') return;
+    const container = containerRef.current;
+    if (!container) return;
+
+    let cancelled = false;
+    const hydrate = async () => {
+      if (!container.isConnected) return;
+      await hydrateMathBlocks(container);
+      if (cancelled) return;
+    };
+    void hydrate();
+    // Same reason as the mermaid observer: a timeline re-render can replace the
+    // container's innerHTML with an identical string without this effect
+    // re-running, stranding new placeholders. hydrate() only writes inside the
+    // placeholder elements, so it never re-triggers this observer.
+    const observer = new MutationObserver(() => {
+      const current = containerRef.current;
+      if (current?.isConnected) void hydrateMathBlocks(current);
+    });
+    observer.observe(container, { childList: true });
+
+    return () => {
+      cancelled = true;
+      observer.disconnect();
+    };
+  }, [hasMath, html]);
+
+  useIsomorphicLayoutEffect(() => {
+    if (!hasMermaid || typeof window === 'undefined') return;
+    const container = containerRef.current;
+    if (!container) return;
+
+    let timer: number | undefined;
+    const hydrate = async () => {
+      const current = containerRef.current;
+      if (!current || !current.isConnected) return;
+      await hydrateMermaidBlocks(current);
+    };
+
+    void hydrate();
+    // React can rewrite the container's innerHTML with an identical html
+    // string (timeline re-renders) without this effect re-running, which
+    // would strand freshly-inserted pending blocks. Re-hydrate on any
+    // direct-child replacement; hydrate writes only to grandchildren, so it
+    // never re-triggers this observer.
+    const observer = new MutationObserver(() => {
+      const current = containerRef.current;
+      if (current?.isConnected) void hydrateMermaidBlocks(current, { cachedOnly: true });
+      window.clearTimeout(timer);
+      timer = window.setTimeout(() => void hydrate(), 120);
+    });
+    observer.observe(container, { childList: true });
+
+    // Diagrams bake the palette into their SVG, so every theme write must
+    // re-render them. The trigger is the `data-theme` attribute itself rather
+    // than the `omp:theme-changed` event: the navbar toggle and the settings
+    // modal are both writers, and observing the attribute catches all of them
+    // the moment the document changes. Vacuously cheap for a same-palette write
+    // (blocks already matching the new theme key are skipped).
+    const rehydrateForTheme = async () => {
+      await hydrate();
+      const block = diagramBlockRef.current;
+      // A timeline re-render can replace the block under an open viewer; keep
+      // the last snapshot then rather than closing the viewer on the user.
+      if (!block?.isConnected) return;
+      const snapshot = readDiagramBlock(block);
+      if (snapshot) setDiagram(snapshot);
+    };
+    const themeObserver = new MutationObserver(() => void rehydrateForTheme());
+    themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+
+    return () => {
+      window.clearTimeout(timer);
+      observer.disconnect();
+      themeObserver.disconnect();
+    };
+  }, [hasMermaid, html]);
+
+  const handleContainerClick = useCallback((e: TargetedMouseEvent<HTMLDivElement>) => {
+    const target = (e.target as HTMLElement).closest<HTMLButtonElement>('button.code-copy-float');
+    if (target) {
+      const text = target.dataset.copy ?? '';
+      if (!text) return;
+      e.preventDefault();
+      e.stopPropagation();
+      void copyToClipboard(text).then((ok) => {
+        if (!ok) return;
+        target.setAttribute('data-copied', 'true');
+        target.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
+        setTimeout(() => {
+          target.removeAttribute('data-copied');
+          target.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+        }, 2000);
+      });
+      return;
+    }
+
+    // A rendered diagram is a door into the zoom/pan viewer; pending, failed,
+    // and still-streaming blocks stay inert. It is checked before the document
+    // links below so a diagram's own anchors never steal its click.
+    const block = (e.target as HTMLElement).closest<HTMLElement>('.mermaid-block[data-mermaid-state="done"]');
+    if (block) {
+      const snapshot = readDiagramBlock(block);
+      if (!snapshot) return;
+      e.preventDefault();
+      diagramBlockRef.current = block;
+      setDiagram(snapshot);
+      return;
+    }
+
+    if (isWiki) {
+      // A wiki page's own links. The RAW attribute is what classifies them, not
+      // `link.href`: that property is always absolutised by the DOM, so a
+      // relative path which named no page of this wiki read as external and
+      // every such link opened a browser tab instead of doing nothing.
+      const link = (e.target as HTMLElement).closest<HTMLAnchorElement>('a[href]');
+      if (!link) return;
+      const raw = link.getAttribute('href') ?? '';
+      // An in-page anchor is the browser's own business — the heading it names
+      // carries the id the wiki's table of contents wrote. Letting the default
+      // through is the whole point; preventing it made every TOC entry inert.
+      if (raw.startsWith('#')) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const target = link.dataset.wikiPath;
+      if (target && onWikiNavigate) {
+        onWikiNavigate(target);
+        return;
+      }
+      if (/^https?:/i.test(raw)) window.open(raw, '_blank', 'noopener,noreferrer');
+      // A relative href that resolved to nothing in this wiki is inert.
+      return;
+    }
+
+    if (!isDocument) return;
+
+    // A document's own links: a relative one is rewritten to the workspace
+    // file it names, so it belongs in an editor tab rather than in a top-level
+    // navigation off the console; an external one leaves the console.
+    const link = (e.target as HTMLElement).closest<HTMLAnchorElement>('a[href]');
+    if (!link) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const filePath = link.dataset.filePath;
+    if (filePath) {
+      openFileInEditor({ path: filePath, root: scopeRoot, repo: scopeRepo });
+    } else if (/^https?:/i.test(link.href)) {
+      window.open(link.href, '_blank', 'noopener,noreferrer');
+    }
+  }, [isDocument, scopeRoot, scopeRepo, isWiki, onWikiNavigate]);
+
+  const closeDiagram = useCallback(() => {
+    diagramBlockRef.current = null;
+    setDiagram(null);
+  }, []);
+
+  if (!content) return null;
+
+  return (
+    <>
+      <div
+        ref={containerRef}
+        className={`prose-content text-[13px] text-ink leading-relaxed select-text ${className}`}
+        onClick={handleContainerClick}
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+      {diagram && <DiagramViewer {...diagram} onClose={closeDiagram} />}
+    </>
+  );
+}