@thaut/claude-ide 0.0.0-stage → 1.0.0

package/web/src/main.tsx

@@ -0,0 +1,27 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { createBrowserRouter, RouterProvider } from "react-router";
+import { App } from "./App.tsx";
+import { queryClient } from "./queryClient.ts";
+import "./styles.css";
+import { registerServiceWorker } from "./pwa.ts";
+import { ConfirmationProvider } from "./components/Confirmation.tsx";
+import { UnsavedNavigationGuard } from "./unsaved.tsx";
+
+const router = createBrowserRouter([{ path: "*", element: (
+  <ConfirmationProvider>
+    <UnsavedNavigationGuard />
+    <App />
+  </ConfirmationProvider>
+) }]);
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>
+  </StrictMode>,
+);
+
+void registerServiceWorker();

package/web/src/markdown-assets.test.ts

@@ -0,0 +1,70 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { resolveMarkdownAsset, type MarkdownAssetContext } from "./markdown-assets.ts";
+
+const context: MarkdownAssetContext = { projectId: "project 1", filePath: "docs/readme.md", root: "/home/me/project" };
+function resolved(src: string, overrides?: Partial<MarkdownAssetContext>) {
+  const value = resolveMarkdownAsset(src, { ...context, ...overrides });
+  return value ? new URL(value, "https://ide.test") : undefined;
+}
+
+test("Markdown images resolve relative to their document or project root", () => {
+  assert.equal(resolved("../assets/a.png")?.searchParams.get("path"), "assets/a.png");
+  assert.equal(resolved("./images/a.png")?.searchParams.get("path"), "docs/images/a.png");
+  assert.equal(resolved("/assets/a.png")?.searchParams.get("path"), "assets/a.png");
+  assert.equal(resolved("a.png", { filePath: "readme.md" })?.searchParams.get("path"), "a.png");
+  assert.equal(resolved("a.png")?.pathname, "/api/projects/project%201/file");
+});
+
+test("paths retain Unicode, spaces, encoded filename delimiters, query and fragment", () => {
+  const url = resolved("../assets/图 片%23v%3F1.png?download=1#preview", { version: 4 })!;
+  assert.equal(url.searchParams.get("path"), "assets/图 片#v?1.png");
+  assert.equal(url.searchParams.get("download"), "1");
+  assert.equal(url.searchParams.get("v"), "4");
+  assert.equal(url.hash, "#preview");
+  assert.equal(resolved("100%25.png")?.searchParams.get("path"), "docs/100%.png");
+  assert.equal(resolved("a.png?path=outside&v=1", { version: 5 })?.searchParams.get("path"), "docs/a.png");
+  assert.equal(resolved("a.png?path=outside&v=1", { version: 5 })?.searchParams.get("v"), "5");
+});
+
+test("filesystem paths and file URLs map only to the supplied project root", () => {
+  for (const src of ["/home/me/project/assets/a.png", "file:///home/me/project/assets/a.png", "file://localhost/home/me/project/assets/a.png"]) {
+    assert.equal(resolved(src)?.searchParams.get("path"), "assets/a.png");
+  }
+  assert.equal(resolved("file:///home/me/project/图%20片%23a.png")?.searchParams.get("path"), "图 片#a.png");
+  for (const src of ["file:///etc/a.png", "file:///home/me/project-other/a.png", "file://server/home/me/project/a.png", "file:assets/a.png"]) {
+    assert.equal(resolved(src), undefined, src);
+  }
+  assert.equal(resolved("file:///home/me/project/a.png", { root: undefined }), undefined);
+  assert.equal(resolveMarkdownAsset("file:///home/me/project/a.png"), undefined);
+});
+
+test("local traversal, malformed encoding and ambiguous separators are rejected", () => {
+  for (const src of ["../../outside.png", "/../outside.png", "%2e%2e/%2e%2e/outside.png", "/home/me/project/../outside.png", "file:///home/me/project/../outside.png", "a%00.png", "a%5cb.png", "bad%zz.png"]) {
+    assert.equal(resolved(src), undefined, src);
+  }
+  assert.equal(resolved("../assets/../a.png")?.searchParams.get("path"), "a.png");
+});
+
+test("network images and context-free relative images retain their URLs", () => {
+  for (const src of ["https://example.com/a.png?x=1#y", "http://example.com/a.png", "//example.com/a.png"]) {
+    assert.equal(resolveMarkdownAsset(src, context), src);
+  }
+  assert.equal(resolveMarkdownAsset("../assets/a.png"), "../assets/a.png");
+  assert.equal(resolveMarkdownAsset("/assets/a.png"), "/assets/a.png");
+  assert.equal(resolveMarkdownAsset(undefined), undefined);
+  assert.equal(resolveMarkdownAsset(""), undefined);
+});
+
+test("only recognized image data URLs and permitted network schemes are accepted", () => {
+  for (const type of ["png", "jpeg", "gif", "webp", "avif", "bmp", "ico", "svg+xml"]) {
+    const src = `data:image/${type};base64,PHN2Zy8+`;
+    assert.equal(resolveMarkdownAsset(src, context), src);
+  }
+  const svg = "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3C%2Fsvg%3E";
+  assert.equal(resolveMarkdownAsset(svg), svg);
+  for (const src of ["javascript:alert(1)", "JaVaScRiPt:alert(1)", "java\nscript:alert(1)", "blob:https://example.com/1", "ftp://example.com/a.png", "custom:a.png", "data:text/html;base64,PHN2Zy8+", "data:image/unknown;base64,AAAA", "data:image/png,abcd", "data:image/png;base64,***", "data:image/svg+xml,%zz", "data:image/svg+xml,%3Cscript%3E"]) {
+    assert.equal(resolveMarkdownAsset(src, context), undefined, src);
+    assert.equal(resolveMarkdownAsset(src), undefined, src);
+  }
+});

package/web/src/markdown-assets.ts

@@ -0,0 +1,78 @@
+export type MarkdownAssetContext = {
+  projectId: string;
+  filePath: string;
+  root?: string;
+  version?: number;
+};
+
+/** Normalize project paths without silently clamping attempts to escape their root. */
+function normalizePath(path: string): string | undefined {
+  const parts: string[] = [];
+  for (const part of path.split("/")) {
+    if (!part || part === ".") continue;
+    if (part === "..") {
+      if (!parts.length) return undefined;
+      parts.pop();
+    } else parts.push(part);
+  }
+  return parts.join("/");
+}
+
+function imageData(src: string): boolean {
+  if (/^data:image\/(?:png|jpeg|gif|webp|avif|bmp|ico|x-icon|vnd\.microsoft\.icon|svg\+xml);base64,[a-z0-9+/]+={0,2}$/i.test(src)) return true;
+  const svg = /^data:image\/svg\+xml(?:;charset=utf-8)?,(.+)$/i.exec(src);
+  if (!svg) return false;
+  try {
+    return /^\s*(?:<\?xml[^>]*>\s*)?<svg\b/i.test(decodeURIComponent(svg[1]!));
+  } catch { return false; }
+}
+
+/** Map image URLs in a file preview to the project's authenticated file endpoint. */
+export function resolveMarkdownAsset(src: string | undefined, context?: MarkdownAssetContext): string | undefined {
+  if (!src) return undefined;
+  const value = src.trim();
+  if (!value || /[\u0000-\u001f\u007f]/.test(value)) return undefined;
+  if (/^https?:/i.test(value) || value.startsWith("//")) return value;
+  if (/^data:/i.test(value)) return imageData(value) ? value : undefined;
+  const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(value)?.[1]?.toLowerCase();
+  if (scheme && scheme !== "file") return undefined;
+  if (scheme === "file" && (!context?.root || !/^file:\/\//i.test(value))) return undefined;
+  if (!context) return value;
+
+  // Split URL syntax before decoding so encoded # and ? remain filename characters.
+  const hashAt = value.indexOf("#");
+  const hash = hashAt < 0 ? "" : value.slice(hashAt);
+  const withoutHash = hashAt < 0 ? value : value.slice(0, hashAt);
+  const queryAt = withoutHash.indexOf("?");
+  const query = queryAt < 0 ? "" : withoutHash.slice(queryAt + 1);
+  let pathname = queryAt < 0 ? withoutHash : withoutHash.slice(0, queryAt);
+  if (scheme === "file") {
+    // Remote file hosts are not project-local paths (localhost is conventional).
+    const file = /^file:\/\/([^/]*)(\/.*)$/i.exec(pathname);
+    if (!file || (file[1] && file[1].toLowerCase() !== "localhost")) return undefined;
+    pathname = file[2]!;
+  }
+  try { pathname = decodeURIComponent(pathname); } catch { return undefined; }
+  if (!pathname || /[\\\u0000-\u001f\u007f]/.test(pathname)) return undefined;
+
+  const root = context.root?.startsWith("/") ? normalizePath(context.root) : undefined;
+  const absoluteRoot = root ? `/${root}` : context.root === "/" ? "" : undefined;
+  let relative: string | undefined;
+  if (absoluteRoot !== undefined && pathname.startsWith("/") &&
+    (pathname === absoluteRoot || pathname.startsWith(`${absoluteRoot}/`))) {
+    // Strip first, so /project/../outside cannot be mistaken for a project path.
+    relative = normalizePath(pathname.slice(absoluteRoot.length));
+  } else if (scheme === "file") return undefined;
+  else if (pathname.startsWith("/")) relative = normalizePath(pathname);
+  else {
+    const document = normalizePath(context.filePath);
+    if (document === undefined) return undefined;
+    const directory = document.includes("/") ? document.slice(0, document.lastIndexOf("/") + 1) : "";
+    relative = normalizePath(directory + pathname);
+  }
+  if (!relative) return undefined;
+  const params = new URLSearchParams(query);
+  params.set("path", relative);
+  if (context.version !== undefined) params.set("v", String(context.version));
+  return `/api/projects/${encodeURIComponent(context.projectId)}/file?${params}${hash}`;
+}

package/web/src/markdown-html.test.ts

@@ -0,0 +1,84 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { Markdown } from "./components/Markdown.tsx";
+import { markdownUrlTransform } from "./markdown-html.ts";
+
+function render(text: string) {
+  return renderToStaticMarkup(createElement(Markdown, { text }));
+}
+
+test("common HTML renders real semantic elements with table layout and details", () => {
+  const html = render('<details open><summary>More</summary><table><caption>Totals</caption><thead><tr><th colspan="2">Header</th></tr></thead><tbody><tr><td rowspan="2" align="right">Cell</td><td><strong>Bold</strong><br>Next</td></tr></tbody></table></details>');
+  assert.match(html, /<details open=""><summary>More<\/summary>/);
+  assert.match(html, /<caption>Totals<\/caption>/);
+  assert.match(html, /<th colSpan="2">Header<\/th>/);
+  assert.match(html, /<td rowSpan="2" style="text-align:right">Cell<\/td>/);
+  assert.match(html, /<strong>Bold<\/strong><br\/>Next/);
+  assert.match(html, /data-testid="markdown-table-block"/);
+});
+
+test("Markdown and HTML images preserve network sources and common size attributes", () => {
+  const html = render('![Remote](https://example.com/a.png)\n\n<div><img src="https://example.com/b.png" width="160" height="80" alt="HTML"></div>');
+  assert.match(html, /src="https:\/\/example.com\/a.png"/);
+  assert.match(html, /src="https:\/\/example.com\/b.png" width="160" height="80" alt="HTML"/);
+  assert.match(html, /loading="lazy"/);
+});
+
+test("both Markdown and HTML image paths resolve once against the document context", () => {
+  const html = renderToStaticMarkup(createElement(Markdown, {
+    text: '![Markdown](../assets/a.png)\n\n<div><img src="file:///project/assets/b.png" alt="HTML"></div>',
+    assetContext: { projectId: "p1", filePath: "docs/readme.md", root: "/project", version: 7 },
+  }));
+  assert.match(html, /src="\/api\/projects\/p1\/file\?path=assets%2Fa.png&amp;v=7"/);
+  assert.match(html, /src="\/api\/projects\/p1\/file\?path=assets%2Fb.png&amp;v=7"/);
+  assert.doesNotMatch(html, /path=api|file:\/\/\//);
+});
+
+test("scripts, events, styles, embedded documents and srcset never reach the rendered document", () => {
+  const html = render('<div onclick="alert(1)" style="position:fixed"><script>alert(2)</script><iframe src="https://example.com">secret</iframe><object data="https://example.com">secret</object><embed src="https://example.com"><style>body{display:none}</style><img src="javascript:alert(3)" onerror="alert(4)" srcset="https://example.com/tracker.png 2x"><a href="javascript:alert(5)">Unsafe</a><p>Visible</p></div>');
+  assert.doesNotMatch(html, /onclick|onerror|style=|<script|<iframe|<object|<embed|<style|srcSet|srcset|javascript:|alert\(|secret/);
+  assert.match(html, /<p>Visible<\/p>/);
+  const alignment = render('<table><tr><td align="right;position:fixed">Cell</td></tr></table>');
+  assert.doesNotMatch(alignment, /position:fixed|style=/);
+});
+
+test("standalone, inline and HTML-nested SVG all stay on the isolated image preview route", () => {
+  for (const source of [
+    '<svg width="20"><rect width="10" height="10"/></svg>',
+    'Before <svg><rect/></svg> after',
+    '<div><svg onload="alert(1)"><script>alert(2)</script><foreignObject><iframe src="https://example.com"/></foreignObject><svg><circle r="2"/></svg></svg></div>',
+  ]) {
+    const html = render(source);
+    assert.match(html, /data-testid="inline-svg-preview"/);
+    assert.doesNotMatch(html, /<svg|<rect|<circle|<script|<iframe|onload|alert\(/);
+  }
+});
+
+test("GFM table copy metadata, task lists and SVG/code block previews survive sanitizing", () => {
+  const html = render('| Name | Value |\n| --- | --- |\n| One | Two |\n\n- [x] Done\n\n```svg\n<svg><rect/></svg>\n```\n\n```ts\nconst answer = 42;\n```');
+  assert.match(html, /aria-label="复制表格"/);
+  assert.match(html, /class="contains-task-list"/);
+  assert.match(html, /type="checkbox"/);
+  assert.match(html, /data-testid="inline-svg-preview"/);
+  assert.match(html, /SVG 源码/);
+  assert.match(html, /class="language-ts"/);
+  assert.match(html, /const answer = 42;/);
+});
+
+test("allowed image data survives while dangerous link and image protocols are rejected", () => {
+  const html = render('<img src="data:image/png;base64,iVBORw0KGgo="><img src="data:text/html;base64,PHNjcmlwdD4="><a href="data:image/png;base64,eA==">Link</a>');
+  assert.match(html, /src="data:image\/png;base64,iVBORw0KGgo="/);
+  assert.doesNotMatch(html, /data:text|href="data:/);
+  assert.equal(markdownUrlTransform("javascript:alert(1)", "src"), "");
+  assert.equal(markdownUrlTransform("file:///tmp/image.png", "src"), "file:///tmp/image.png");
+  assert.equal(markdownUrlTransform("file:///tmp/image.png", "href"), "");
+});
+
+test("code examples remain text and unknown XML never becomes executable DOM", () => {
+  const html = render('```html\n<script>alert(1)</script>\n```\n\n<custom-widget onclick="run()">Readable</custom-widget>');
+  assert.match(html, /&lt;script&gt;alert\(1\)&lt;\/script&gt;/);
+  assert.match(html, /Readable/);
+  assert.doesNotMatch(html, /<script|<custom-widget|onclick/);
+});

package/web/src/markdown-html.ts

@@ -0,0 +1,60 @@
+import type { Element, Root } from "hast";
+import { toHtml } from "hast-util-to-html";
+import { defaultSchema } from "rehype-sanitize";
+import { defaultUrlTransform } from "react-markdown";
+
+/** Keep SVGs in an isolated image document, including SVGs nested in raw HTML.
+ * Run after the HTML parser and before sanitizing the surrounding document. */
+export function rehypeSvgImages() {
+  return (tree: Root) => {
+    const visit = (parent: Root | Element) => {
+      for (let i = 0; i < parent.children.length; i++) {
+        const child = parent.children[i]!;
+        if (child.type !== "element") continue;
+        if (child.tagName === "svg") {
+          parent.children[i] = {
+            type: "element", tagName: "img", children: [],
+            properties: { alt: "SVG 图像", dataInlineSvg: toHtml(child) },
+          };
+        } else visit(child);
+      }
+    };
+    visit(tree);
+  };
+}
+
+/** GitHub's HTML allowlist, with layout attributes and our private copy/image
+ * metadata. CSS, event handlers, srcset and active embedded documents stay out. */
+export const markdownHtmlSchema = {
+  ...defaultSchema,
+  tagNames: [
+    ...defaultSchema.tagNames!.filter((tag) => tag !== "picture" && tag !== "source"),
+    "caption", "col", "colgroup", "figure", "figcaption", "mark", "u", "time",
+  ],
+  attributes: {
+    ...defaultSchema.attributes,
+    "*": [
+      ...defaultSchema.attributes!["*"]!.filter((attribute) => attribute !== "align"),
+      // ReactMarkdown turns table alignment into CSS, so constrain the values.
+      ["align", "left", "center", "right", "justify", "char"],
+    ],
+    img: [...defaultSchema.attributes!.img!, "dataInlineSvg", "data-inline-svg"],
+    table: [...defaultSchema.attributes!.table!, "dataCopyMarkdown", "data-copy-markdown"],
+  },
+  protocols: {
+    ...defaultSchema.protocols,
+    // Image URLs pass through markdownUrlTransform and the asset resolver too.
+    src: ["http", "https", "data", "file"],
+  },
+  strip: [...defaultSchema.strip!, "iframe", "object", "embed", "style", "svg", "math", "template"],
+};
+
+/** ReactMarkdown's defaults for links; image-only exceptions are checked again
+ * by the asset resolver before a URL can reach an actual img element. */
+export function markdownUrlTransform(value: string, key: string): string | undefined {
+  if (key === "src") {
+    if (/^data:image\/(?:png|jpe?g|gif|webp|avif|bmp|ico|x-icon|vnd\.microsoft\.icon|svg\+xml)(?:;[^,]*)?,/i.test(value)) return value;
+    if (/^file:/i.test(value)) return value;
+  }
+  return defaultUrlTransform(value);
+}

package/web/src/markdown-svg.test.ts

@@ -0,0 +1,37 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { unified } from "unified";
+import remarkParse from "remark-parse";
+import type { Nodes, Image, Root } from "mdast";
+import { remarkInlineSvg } from "./markdown-svg.ts";
+
+const parser = unified().use(remarkParse).use(remarkInlineSvg);
+async function images(text: string) {
+  const tree = await parser.run(parser.parse(text), { value: text }) as Root;
+  const found: Image[] = [];
+  const visit = (node: Nodes) => {
+    if (node.type === "image") found.push(node);
+    else if ("children" in node) node.children.forEach(visit);
+  };
+  visit(tree);
+  return { found, tree };
+}
+
+test("embedded SVGs retain their exact markup across Markdown blocks and nested SVG tags", async () => {
+  const svg = '<svg width="40" height="40">\n\n<svg><rect width="10" height="10" /></svg>\n</svg>';
+  const { found, tree } = await images(`# Test\n\n${svg}\n\nAfter SVG.`);
+  assert.equal(found.length, 1);
+  assert.equal(found[0]!.data?.hProperties?.["data-inline-svg"], svg);
+  assert.equal(tree.children.at(-1)?.type, "paragraph");
+  assert.match(JSON.stringify(tree.children.at(-1)), /After SVG/);
+});
+
+test("inline SVGs remain inline, ordinary HTML is not enabled, and code is not reinterpreted", async () => {
+  const svg = '<svg width="20"><rect /></svg>';
+  const { found, tree } = await images(`Before ${svg} after.\n\n<script>alert(1)</script>\n\n\`\`\`xml\n${svg}\n\`\`\``);
+  assert.equal(found.length, 1);
+  assert.equal(tree.children[0]?.type, "paragraph");
+  assert.match(JSON.stringify(tree.children[0]), /Before/);
+  assert.match(JSON.stringify(tree.children[0]), /after/);
+  assert.equal(tree.children.at(-1)?.type, "code");
+});

package/web/src/markdown-svg.ts

@@ -0,0 +1,42 @@
+import type { Image, Nodes, Root } from "mdast";
+
+/** Find the complete outer SVG, including nested SVGs and blank lines that
+ * Markdown may otherwise split into multiple nodes. This plugin only converts
+ * SVGs; common HTML goes through the subsequent raw parsing and sanitizing chain. */
+function svgLength(text: string): number | undefined {
+  if (!/^<svg(?:\s|>|\/)/i.test(text)) return;
+  const tags = /<!--[\s\S]*?-->|<!\[CDATA\[[\s\S]*?\]\]>|<\/?svg\b(?:[^>"']|"[^"]*"|'[^']*')*>/gi;
+  let depth = 0;
+  for (const match of text.matchAll(tags)) {
+    const tag = match[0];
+    if (tag.startsWith("<!")) continue;
+    if (/^<\//.test(tag)) depth--;
+    else if (!/\/\s*>$/.test(tag)) depth++;
+    if (depth === 0) return match.index! + tag.length;
+  }
+}
+
+export function remarkInlineSvg() {
+  return (tree: Root, file: { value: unknown }) => {
+    const source = String(file.value);
+    const visit = (parent: Nodes) => {
+      if (!("children" in parent)) return;
+      const children = parent.children as Nodes[];
+      for (let i = 0; i < children.length; i++) {
+        const node = children[i]!;
+        const start = node.type === "html" ? node.position?.start.offset : undefined;
+        const length = start === undefined ? undefined : svgLength(source.slice(start));
+        if (start === undefined || length === undefined) { visit(node); continue; }
+        const end = start + length;
+        let last = i;
+        while (last + 1 < children.length && (children[last + 1]!.position?.start.offset ?? Infinity) < end) last++;
+        const tailEnd = children[last]!.position?.end.offset ?? end;
+        const image: Image = { type: "image", url: "", alt: "SVG 图像", data: { hProperties: { "data-inline-svg": source.slice(start, end) } } };
+        const replacement: Nodes = parent.type === "paragraph" ? image : { type: "paragraph", children: [image] };
+        const tail: Nodes[] = tailEnd > end ? [{ type: "html", value: source.slice(end, tailEnd) }] : [];
+        children.splice(i, last - i + 1, replacement, ...tail);
+      }
+    };
+    visit(tree);
+  };
+}

package/web/src/markdown-tables.test.ts

@@ -0,0 +1,34 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { unified } from "unified";
+import remarkParse from "remark-parse";
+import remarkGfm from "remark-gfm";
+import type { Root, Table, Nodes } from "mdast";
+import { remarkCopyTables } from "./markdown-tables.ts";
+
+const parser = unified().use(remarkParse).use(remarkGfm);
+function findTables(node: Nodes): Table[] {
+  return node.type === "table" ? [node] : "children" in node ? node.children.flatMap(findTables) : [];
+}
+function shape(node: unknown): unknown {
+  if (Array.isArray(node)) return node.map(shape);
+  if (!node || typeof node !== "object") return node;
+  return Object.fromEntries(Object.entries(node).filter(([key]) => !["position", "data"].includes(key)).map(([key, value]) => [key, shape(value)]));
+}
+const table = "| Name | Value |\n| :--- | ---: |\n| `a` | escaped \\| pipe, **bold**, ~~old~~, [link](https://example.org) |";
+for (const [name, text] of [
+  ["plain", table],
+  ["blockquote", table.split("\n").map((line) => `> ${line}`).join("\n")],
+  ["list", table.split("\n").map((line, i) => `${i ? "  " : "- "}${line}`).join("\n")],
+  ["quoted list", table.split("\n").map((line, i) => `> ${i ? "  " : "- "}${line}`).join("\n")],
+]) test(`copied ${name} table remains a standalone Markdown table with intact cells/alignment`, () => {
+  const tree = parser.parse(text!) as Root;
+  const original = findTables(tree)[0]!;
+  remarkCopyTables()(tree);
+  const copy = original.data?.hProperties?.["data-copy-markdown"];
+  assert.equal(typeof copy, "string");
+  const parsed = parser.parse(copy as string);
+  assert.equal(parsed.children.length, 1);
+  assert.equal(parsed.children[0]?.type, "table");
+  assert.deepEqual(shape(parsed.children[0]), shape(original));
+});

package/web/src/markdown-tables.ts

@@ -0,0 +1,17 @@
+import type { Nodes, Root } from "mdast";
+import { toMarkdown } from "mdast-util-to-markdown";
+import { gfmToMarkdown } from "mdast-util-gfm";
+
+/** Serialize the table itself. Source offsets include quote/list markers on
+ * continuation lines, so slicing the original Markdown is not a standalone table. */
+export function remarkCopyTables() {
+  return (tree: Root) => {
+    const visit = (node: Nodes) => {
+      if (node.type === "table") {
+        const text = toMarkdown(node, { extensions: [gfmToMarkdown()] }).trimEnd();
+        node.data = { ...node.data, hProperties: { ...node.data?.hProperties, "data-copy-markdown": text } };
+      } else if ("children" in node) node.children.forEach(visit);
+    };
+    visit(tree);
+  };
+}

package/web/src/message-bodies.ts

@@ -0,0 +1,117 @@
+import type { SdkMessageLike } from "@shared/protocol.ts";
+import type { ToolResult } from "./transcript.ts";
+
+/** REST normalizes attribution. Replace presentation bodies without changing the
+ * retained live envelope (including parent ownership and stream settlement). */
+export function mergeMessageBody(retained: SdkMessageLike, full: SdkMessageLike): SdkMessageLike {
+  const next: SdkMessageLike = { ...retained, message: full.message, _hydrated: true };
+  for (const key of ["content", "tool_use_result"]) {
+    if (key in full) next[key] = full[key];
+    else delete next[key];
+  }
+  delete next._deferred;
+  return next;
+}
+
+export function hydrateMessageBody(retained: SdkMessageLike, full: SdkMessageLike, uuid: string): SdkMessageLike {
+  if (retained.uuid === uuid) return mergeMessageBody(retained, full);
+  const linked = retained.linkedToolResults as Record<string, ToolResult> | undefined;
+  if (!linked || !Object.values(linked).some((result) => result.deferredUuid === uuid)) return retained;
+  const results = { ...linked };
+  const origins = { ...retained._hydratedToolResultUuids as Record<string, string> | undefined };
+  let changed = false;
+  const blocks = (full.message as { content?: unknown[] })?.content;
+  for (const block of Array.isArray(blocks) ? blocks : []) {
+    const b = block as { type: string; tool_use_id: string; content: unknown; is_error?: boolean };
+    if (b.type === "tool_result" && results[b.tool_use_id]?.deferredUuid === uuid) {
+      results[b.tool_use_id] = { content: b.content, isError: !!b.is_error, structured: full.tool_use_result };
+      origins[b.tool_use_id] = uuid;
+      changed = true;
+    }
+  }
+  if (!changed) return retained;
+  return { ...retained, _hydrated: true, linkedToolResults: results, _hydratedToolResultUuids: origins,
+    _hydratedMessageUuids: [...new Set([...(retained._hydratedMessageUuids as string[] ?? []), uuid])] };
+}
+
+export function matchesMessageTarget(message: SdkMessageLike, uuid: string): boolean {
+  return message.uuid === uuid || (message._hydratedMessageUuids as string[] | undefined)?.includes(uuid) === true;
+}
+
+/** A result can live on its tool call or on its original user record. Keep its
+ * own identity after loading; the owner's UUID cannot identify several results. */
+export function toolResultSourceUuid(message: SdkMessageLike, id: string, result: ToolResult): string | undefined {
+  return result.deferredUuid ?? (message._toolResultUuids as Record<string, string> | undefined)?.[id]
+    ?? (message._hydratedToolResultUuids as Record<string, string> | undefined)?.[id];
+}
+
+function resultBlocks(message: SdkMessageLike): { tool_use_id: string; content: unknown; is_error?: boolean }[] {
+  const blocks = (message.message as { content?: unknown[] } | undefined)?.content;
+  return Array.isArray(blocks) ? blocks.filter((b): b is { type: string; tool_use_id: string; content: unknown; is_error?: boolean } =>
+    !!b && typeof b === "object" && (b as { type?: string }).type === "tool_result") : [];
+}
+
+/** Keep the frozen browsing range/order while adopting bodies hydrated during
+ * the request. Full tool results follow their UUID across linked/standalone
+ * representations, including when paging trims away their original tool call. */
+export function preserveHydratedBodies(items: SdkMessageLike[], current: SdkMessageLike[]): SdkMessageLike[] {
+  const hydrated = new Map(current.filter((m) => m.uuid && m._hydrated).map((m) => [m.uuid, m]));
+  const results = new Map<string, Map<string, ToolResult>>();
+  const remember = (uuid: string, id: string, result: ToolResult) => {
+    let byTool = results.get(uuid);
+    if (!byTool) results.set(uuid, byTool = new Map());
+    byTool.set(id, result);
+  };
+  for (const message of current) {
+    if (!message._hydrated) continue;
+    if (message.uuid && !message._deferred) {
+      for (const block of resultBlocks(message)) remember(message.uuid, block.tool_use_id,
+        { content: block.content, isError: !!block.is_error, structured: message.tool_use_result });
+    }
+    for (const [id, result] of Object.entries(message.linkedToolResults as Record<string, ToolResult> ?? {})) {
+      const uuid = toolResultSourceUuid(message, id, result);
+      if (uuid && !result.deferredUuid) remember(uuid, id, result);
+    }
+  }
+  return items.map((item) => {
+    const full = hydrated.get(item.uuid);
+    // Linked hydration fills just a result; its owner's body may still be deferred.
+    let next = full && !full._deferred ? mergeMessageBody(item, full) : item;
+    let linked = next.linkedToolResults as Record<string, ToolResult> | undefined;
+    let origins = next._hydratedToolResultUuids as Record<string, string> | undefined;
+    let copied = false;
+    const adopt = (id: string, uuid: string, result: ToolResult) => {
+      if (!copied) { linked = { ...linked }; origins = { ...origins }; copied = true; }
+      linked![id] = result;
+      origins![id] = uuid;
+    };
+    // Overlapping owner records can omit a previously linked result altogether.
+    // Retain only exact hydrated results, and never replace a different result UUID.
+    for (const [id, result] of Object.entries(full?.linkedToolResults as Record<string, ToolResult> ?? {})) {
+      const uuid = full && toolResultSourceUuid(full, id, result);
+      if (uuid && !result.deferredUuid && !linked?.[id]) adopt(id, uuid, result);
+    }
+    for (const [id, result] of Object.entries(linked ?? {})) {
+      const uuid = toolResultSourceUuid(next, id, result);
+      const body = uuid && results.get(uuid)?.get(id);
+      // An ordinary complete page response is authoritative too. Keep its exact
+      // provenance so a later deferred page can still find the loaded result.
+      if (body) adopt(id, uuid!, result.deferredUuid ? body : result);
+    }
+    const uuid = next.uuid;
+    if (uuid && next._deferred) {
+      // Display previews can omit whole blocks. The complete results already have
+      // exact provenance, so transfer every known result for this record UUID.
+      for (const [id, body] of results.get(uuid) ?? []) adopt(id, uuid, body);
+    } else if (uuid && !next._hydrated && resultBlocks(next).some((block) => results.get(uuid)?.has(block.tool_use_id))) {
+      next = { ...next, _hydrated: true };
+    }
+    if (copied) {
+      // The rest of a deferred user record (text/images/other results) is still a
+      // preview. Store complete results in the overlay without claiming a full body.
+      next = { ...next, _hydrated: true, linkedToolResults: linked, _hydratedToolResultUuids: origins,
+        _hydratedMessageUuids: [...new Set(Object.values(origins!))] };
+    }
+    return next;
+  });
+}