and [a script](javascript:alert(2)) and .',
+].join("\n");
+
+test.beforeAll(async () => {
+ ({ home, repo } = seedHome());
+ ({ app, page } = await launch(home));
+ page.on("dialog", (dialog) => { dialogs.push(dialog.message()); void dialog.dismiss(); });
+ const script = path.join(home, "rendering-script.json");
+ fs.writeFileSync(script, JSON.stringify([{ content: REPLY }]));
+ await page.evaluate((mock_script) => window.modex!.invoke("settings:update", { mock_script }), script);
+ await page.keyboard.press("Meta+n");
+ await expect(tid(page, "composer-input")).toBeFocused();
+ await tid(page, "composer-input").fill("summarize the change");
+ await page.keyboard.press("Meta+Enter");
+ await expect(tid(page, "thread-view")).toBeVisible({ timeout: 15_000 });
+ await expect(items(page, "assistant")).toHaveCount(1);
+ await expect(currentRow(page)).toHaveAttribute("data-status", "idle");
+});
+
+test.afterAll(async () => {
+ await app?.close();
+ fs.rmSync(home, { recursive: true, force: true });
+ fs.rmSync(repo, { recursive: true, force: true });
+});
+
+test("a reply's tables, quotes, task lists and code render as elements", async () => {
+ const answer = items(page, "assistant").first();
+ await expect(answer.getByRole("heading", { name: "Result" })).toBeVisible();
+ const table = answer.locator("table");
+ await expect(table.getByRole("columnheader")).toHaveText(["File", "Lines"]);
+ await expect(table.getByRole("cell")).toHaveText(["a.ts", "12"]);
+ await expect(answer.locator("blockquote")).toHaveText("Run the suite before pushing.");
+ const boxes = answer.getByRole("checkbox");
+ await expect(boxes).toHaveCount(2);
+ await expect(boxes.nth(0)).toBeChecked();
+ await expect(boxes.nth(1)).not.toBeChecked();
+ await expect(boxes.nth(0)).toBeDisabled();
+ await expect(answer.locator("li ol li")).toHaveText("nested step");
+ await expect(answer.locator('pre.code[data-lang="ts"]')).toHaveText("export const answer = 42;");
+});
+
+test("raw HTML, script links and images in a reply stay inert", async () => {
+ const answer = items(page, "assistant").first();
+ await expect(answer).toContainText('{code.join("\n")});
- continue;
+ // Text that changed in the last moment is still streaming: parse only its last block again, and
+ // the whole text once it has rested, so the settled rendering is always the exact one.
+ const [settled, setSettled] = useState(text);
+ useEffect(() => {
+ if (text === settled) return;
+ const timer = setTimeout(() => setSettled(text), STREAM_SETTLE_MS);
+ return () => clearTimeout(timer);
+ }, [text, settled]);
+ if (text === settled) return {settledBlocks(text)}
;
+ return {streamingChunks(text).map((chunk, i) =>
;
+});
+
+/** How long text must stop changing before it is parsed whole again. */
+const STREAM_SETTLE_MS = 300;
+
+const Blocks = memo(function Blocks({ text }: { text: string }) {
+ return <>{render(text)};
+});
+
+function render(text: string): ReactNode[] {
+ const tree = fromMarkdown(text, { extensions: [gfm()], mdastExtensions: [gfmFromMarkdown()] });
+ const definitions = new Map{content}
: level === 2 ?{content}
:{content}
); - i++; - continue; + const made = make(); + this.kept.set(text, made); + if (this.kept.size > this.entries) this.kept.delete(this.kept.keys().next().value!); + return made; + } +} + +/** + * Settled text, rendered once per app session: reopening a thread or switching back to one reuses + * the elements instead of parsing every message again. Streaming pieces are never cached, nor is + * very long text such as a fetched page. + */ +const settledRenders = new RenderCache(400, 64_000); +function settledBlocks(text: string): ReactNode[] { + return settledRenders.get(text, () => render(text)); +} + +/** + * Splits text after each blank line that is outside a fenced code block, so a streaming reply + * re-parses only its last piece. Joining the pieces gives the text back. A piece can read slightly + * differently from the whole (a loose list shows as two lists) until the text settles. + */ +export function streamingChunks(text: string): string[] { + const chunks: string[] = []; + let start = 0; + let fence: { char: string; length: number } | null = null; + for (let at = 0; at < text.length;) { + const newline = text.indexOf("\n", at); + const end = newline < 0 ? text.length : newline + 1; + const line = text.slice(at, newline < 0 ? text.length : newline); + const marker = /^ {0,3}(`{3,}|~{3,})(.*)$/.exec(line); + if (fence) { + if (marker && marker[1]![0] === fence.char && marker[1]!.length >= fence.length && !marker[2]!.trim()) fence = null; + } else if (marker && !(marker[1]![0] === "`" && marker[2]!.includes("`"))) { + fence = { char: marker[1]![0]!, length: marker[1]!.length }; + } else if (!line.trim() && at > start) { + chunks.push(text.slice(start, end)); + start = end; } - if (/^\s*([-*]|\d+\.)\s+/.test(line)) { - const items: ReactNode[] = []; - const ordered = /^\s*\d+\./.test(line); - while (i < lines.length && /^\s*([-*]|\d+\.)\s+/.test(lines[i]!)) items.push(- {items}
- {items}
{inline(node.children, ctx)}
; + case "heading": { + // The transcript's own titles sit above a reply's headings: `#` reads as a section, not the page. + const Tag = (["h2", "h3", "h4", "h5", "h6", "h6"] as const)[node.depth - 1]!; + return{blocks(node.children, { ...ctx, tight: false })}; + case "list": { + const items = node.children.map((item, i) => listItem(item, i, { ...ctx, tight: !node.spread && !item.spread })); + return node.ordered ?
- {items}
- {items}
{inline(para.join(" "))}
); + case "thematicBreak": + return; + case "table": { + const [head, ...body] = node.children; + const align = node.align ?? []; + const row = (r: TableRow, i: number, Cell: "th" | "td") => ( +
+
+ {head && {row(head, 0, "th")}}
+ {body.length > 0 && {body.map((r, i) => row(r, i, "td"))}}
+
+
+ );
+ }
+ case "html":
+ // Raw HTML is shown, never interpreted.
+ return {node.value}
; + case "footnoteDefinition": + return{node.label ?? node.identifier} {blocks(node.children, { ...ctx, tight: true })}
;
+ case "definition":
+ return null;
+ default:
+ return "children" in node ? {blocks((node as Parents).children as RootContent[], ctx)}
: null;
}
- return {blocks}
;
-});
+}
+
+function listItem(item: ListItem, key: number, ctx: Context): ReactNode {
+ const children = blocks(item.children, ctx);
+ if (typeof item.checked !== "boolean") return {node.value};
+ case "break":
+ return ; + case "html": + return node.value; + case "link": + return link(node.url, inline(node.children, ctx), node, key, ctx); + case "linkReference": { + const target = ctx.definitions.get(node.identifier); + return target ? link(target.url, inline(node.children, ctx), node, key, ctx) : written(node, ctx); + } + case "image": + return image(node.url, node.alt, node, key, ctx); + case "imageReference": { + const target = ctx.definitions.get(node.identifier); + return target ? image(target.url, node.alt, node, key, ctx) : written(node, ctx); + } + case "footnoteReference": + return [{node.label ?? node.identifier}]; + default: + return written(node, ctx); + } +} -function inline(s: string): ReactNode[] { - return nodes(tokenizeInline(s)); +/** Links open in the system browser: main denies the new window and hands http(s) URLs to the OS. Other targets stay as written. */ +function link(url: string, children: ReactNode, node: Nodes, key: number, ctx: Context): ReactNode { + const href = safeHref(url); + if (!href) return written(node, ctx); + return {children}; } -/** Links open in the system browser: main denies the new window and hands http(s) URLs to the OS. */ -function nodes(tokens: InlineToken[]): ReactNode[] { - return tokens.map((t, k) => - t.type === "text" ? t.text - : t.type === "code" ?
{t.text}
- : t.type === "bold" ? {nodes(t.children)}
- : {nodes(t.children)},
- );
+/** An image is a link to it, named by its alt text: nothing is fetched while reading. */
+function image(url: string, alt: string | null | undefined, node: Nodes, key: number, ctx: Context): ReactNode {
+ const href = safeHref(url);
+ if (!href) return written(node, ctx);
+ return {alt ? `Image: ${alt}` : "Image"};
}
diff --git a/apps/desktop/src/renderer/components/transcript/CodeBlock.tsx b/apps/desktop/src/renderer/components/transcript/CodeBlock.tsx
new file mode 100644
index 00000000..5ccf862c
--- /dev/null
+++ b/apps/desktop/src/renderer/components/transcript/CodeBlock.tsx
@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+import { bridge } from "../../bridge";
+
+/**
+ * A fenced code block in the transcript: its language, the code, and Copy. Copy puts the code on the
+ * clipboard through main and does nothing else; nothing in a reply runs from here.
+ */
+export function CodeBlock({ code, lang }: { code: string; lang?: string }) {
+ const [copied, setCopied] = useState(false);
+ const [failed, setFailed] = useState(false);
+ useEffect(() => {
+ if (!copied) return;
+ const timer = setTimeout(() => setCopied(false), 1500);
+ return () => clearTimeout(timer);
+ }, [copied]);
+ const name = lang ? `${lang} code` : "code";
+ const copy = async () => {
+ setFailed(false);
+ try { await bridge.invoke("clipboard:write", { text: code }); setCopied(true); }
+ catch { setFailed(true); }
+ };
+ return (
+
+
+ );
+}
diff --git a/apps/desktop/src/renderer/styles.css b/apps/desktop/src/renderer/styles.css
index 5d7c13d1..3e14ccac 100644
--- a/apps/desktop/src/renderer/styles.css
+++ b/apps/desktop/src/renderer/styles.css
@@ -530,11 +530,32 @@ a.thread-pr:hover { text-decoration: underline; }
.msg.user { display: flex; flex-direction: column; align-items: flex-end; }
.msg.user .bubble { max-width: 70%; padding: 8px 16px; border: 1px solid var(--bubble-border); border-radius: 12px; background: var(--bg-user-bubble); white-space: pre-wrap; overflow-wrap: anywhere; }
.md p { margin: 0 0 12px; }
-.md h2, .md h3, .md h4 { margin: 18px 0 8px; font-weight: var(--weight-semibold); }
+.md h2, .md h3, .md h4, .md h5, .md h6 { margin: 18px 0 8px; font-weight: var(--weight-semibold); }
+.md h5, .md h6 { font-size: var(--text-md); }
.md ul, .md ol { margin: 0 0 12px; padding-left: 28px; }
+.md li > ul, .md li > ol { margin-bottom: 0; }
+.md li.task { list-style: none; }
+.md li.task > input { margin: 0 6px 0 -20px; vertical-align: -1px; }
+.md blockquote { margin: 0 0 12px; padding: 0 0 0 12px; border-left: 3px solid var(--border-strong); color: var(--text-3); }
+.md hr { margin: 16px 0; border: 0; border-top: 1px solid var(--border-pane); }
+.md .md-table { margin: 0 0 12px; overflow-x: auto; }
+.md table { border-collapse: collapse; font-size: var(--text-sm); }
+/* A cell is never narrower than about ten characters, and a long path or URL wraps inside it: in a
+ narrow transcript the table scrolls sideways in its box instead of squeezing one column to a word. */
+.md th, .md td { min-width: 10em; padding: 5px 10px; border: 1px solid var(--border-pane); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
+.md th { font-weight: var(--weight-semibold); background: var(--bg-sunken); }
+.md .footnote { margin: 0 0 6px; color: var(--text-3); font-size: var(--text-sm); }
+.md sup { font-size: 0.75em; }
.md strong { font-weight: var(--weight-semibold); }
.md code { padding: 1px 5px; border-radius: 5px; background: var(--bg-row-selected); font-size: 12.5px; }
.md pre.code { margin: 8px 0 14px; padding: 12px 14px; overflow: auto; border: 1px solid var(--border-pane); border-radius: var(--radius-md); background: var(--bg-sunken); }
+.md .code-block { position: relative; margin: 8px 0 14px; }
+.md .code-block pre.code { margin: 0; padding-top: 30px; }
+.md .code-head { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 0 8px 0 14px; color: var(--text-3); font-size: var(--text-xs); }
+.md .code-copy { padding: 2px 8px; border: 1px solid transparent; border-radius: 5px; background: none; color: var(--text-3); font: inherit; cursor: pointer; }
+.md .code-copy:hover { border-color: var(--border-pane); color: var(--text-1); }
+.md .code-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.md .code-copy-error { display: block; margin-top: 4px; color: var(--text-3); font-size: var(--text-xs); }
.md pre.code code { padding: 0; background: none; }
.md a, .tool-link { color: var(--accent); text-decoration: none; overflow-wrap: anywhere; }
.md a:hover, .tool-link:hover { text-decoration: underline; }
diff --git a/apps/desktop/test/markdown-render.test.ts b/apps/desktop/test/markdown-render.test.ts
new file mode 100644
index 00000000..d14e0fc4
--- /dev/null
+++ b/apps/desktop/test/markdown-render.test.ts
@@ -0,0 +1,168 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { fileURLToPath } from "node:url";
+import { createElement, type ComponentType } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import react from "@vitejs/plugin-react";
+import { createServer, type ViteDevServer } from "vite";
+
+// The transcript's Markdown (#277): CommonMark with GitHub's extensions, rendered as React elements only.
+const appDir = fileURLToPath(new URL("../../", import.meta.url));
+let server: ViteDevServer | undefined;
+let Markdown: ComponentType<{ text: string }>;
+
+async function render(text: string): Promise
+ {lang || "text"}
+
+
+ {code}![]*>Image<\/a>/); +}); + +// While a reply streams, only its last block is parsed again (see streamingChunks). +async function chunksOf(text: string): Promise { + await render(""); + const { streamingChunks } = await server!.ssrLoadModule("/src/renderer/components/Markdown.tsx") as { streamingChunks: (text: string) => string[] }; + return streamingChunks(text); +} + +test("a streaming reply splits at blank lines outside code fences, and the pieces join back to the text", async () => { + const text = "Intro line\nstill intro\n\n```py\nfirst\n\nsecond\n```\n\n~~~\na\n\n~~~~\nclosed by a longer fence\n\n- item\n\nTail"; + const chunks = await chunksOf(text); + assert.equal(chunks.join(""), text); + assert.deepEqual(chunks, ["Intro line\nstill intro\n\n", "```py\nfirst\n\nsecond\n```\n\n", "~~~\na\n\n~~~~\nclosed by a longer fence\n\n", "- item\n\n", "Tail"]); + // An unclosed fence keeps everything after it in one piece, blank lines included. + assert.deepEqual(await chunksOf("Before\n\n```js\nconst a = 1;\n\nconst b"), ["Before\n\n", "```js\nconst a = 1;\n\nconst b"]); + assert.deepEqual(await chunksOf(""), []); +}); + +test("rendering a reply piece by piece shows the same text as rendering it whole", async () => { + const reply = "Fix **the `parse()` call** in [the docs](https://example.com/d).\n\n- [ ] add a test\n- ~~old~~ new\n\n| a | b |\n| - | - |\n| 1 | 2 |\n\n```py\nprint('hi')\n\nprint('there')\n```\n\n> quoted\n\nDone 日本語 ✓"; + // Blocks sit side by side in the page, so compare the text without the whitespace between them. + const whole = visible(await render(reply)).replace(/\s+/g, ""); + const pieces = (await Promise.all((await chunksOf(reply)).map(render))).map(visible).join("").replace(/\s+/g, ""); + assert.equal(pieces, whole); +}); + +test("the settled cache keeps recent renders, drops the oldest past its limit, and never holds very long text", async () => { + await render(""); + const { RenderCache } = await server!.ssrLoadModule("/src/renderer/components/Markdown.tsx") as { RenderCache: new (entries: number, maxChars: number) => { get(text: string, make: () => T): T; size: number } }; + const cache = new RenderCache(2, 10); + let made = 0; + const make = () => ++made; + assert.equal(cache.get("a", make), 1); + assert.equal(cache.get("a", make), 1, "a hit renders nothing again"); + cache.get("b", make); + cache.get("a", make); // "a" is now the most recent + cache.get("c", make); // past the limit: "b", the least recent, goes + assert.equal(cache.size, 2); + assert.equal(cache.get("a", make), 1); + assert.equal(cache.get("b", make), 4, "b was rendered again"); + const long = "x".repeat(11); + assert.equal(cache.get(long, make), 5); + assert.equal(cache.get(long, make), 6, "text past the size limit is rendered each time, never kept"); + assert.equal(cache.size, 2); +}); + +test("a code block names its language and offers Copy", async () => { + const html = await render("```ts\nconst a = 1;\n```\n\n```\nplain\n```"); + assert.match(html, /ts<\/span>](https:\/\/example\.com\/n\.png){kind=link}