fix(web): show minimap previews as plain text, not raw markdown

apps/web/package.json

@@ -59,7 +59,9 @@
     "rehype-sanitize": "^6.0.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
+    "remark-parse": "^11.0.0",
     "tailwind-merge": "^3.4.0",
+    "unified": "^11.0.5",
     "zustand": "^5.0.11"
   },
   "devDependencies": {
@@ -82,7 +84,6 @@
     "jsdom": "^30.0.1",
     "react-test-renderer": "19.2.6",
     "tailwindcss": "^4.0.0",
-    "unified": "^11.0.5",
     "vite": "catalog:",
     "vite-plus": "catalog:"
   }

apps/web/src/components/chat/timelineMinimapItems.test.ts

@@ -64,6 +64,56 @@ describe("timeline minimap previews", () => {
     expect(resolveTimelineMinimapPreview(null)).toBeNull();
   });
 
+  it("previews assistant markdown as plain text", () => {
+    const [item] = deriveTimelineMinimapItems(
+      rows([
+        ["user", "what **model** are we using?"],
+        [
+          "assistant",
+          [
+            "## Models",
+            "We use **two** models, see [the docs](https://example.com/docs):",
+            "",
+            "| Used for | Model |",
+            "| --- | :---: |",
+            "| Titles | `@cf/meta/llama` |",
+            "",
+            "- [x] Set in `config/ai.ts`",
+            "> Note: ~~old~~ new",
+            "```ts",
+            "const snake_case = a * b;",
+            "```",
+          ].join("\n"),
+        ],
+      ]),
+    );
+    expect(resolveTimelineMinimapPreview(item!)).toMatchObject({
+      userText: "what **model** are we using?",
+      assistantText:
+        "Models We use two models, see the docs: Used for Model Titles @cf/meta/llama Set in config/ai.ts Note: old new const snake_case = a * b;",
+    });
+  });
+
+  it("keeps code, escaped table pipes, and literal checkboxes as written", () => {
+    const preview = (markdown: string) =>
+      resolveTimelineMinimapPreview(
+        deriveTimelineMinimapItems(
+          rows([
+            ["user", "Q"],
+            ["assistant", markdown],
+          ]),
+        )[0]!,
+      )?.assistantText;
+
+    expect(preview("Match `**/*.ts` files\n\n```sh\n# install deps\n- **not bold**\n```")).toBe(
+      "Match **/*.ts files # install deps - **not bold**",
+    );
+    expect(preview("| Operator | Meaning |\n| --- | --- |\n| `a \\| b` | either |")).toBe(
+      "Operator Meaning a | b either",
+    );
+    expect(preview("[x] deployment complete")).toBe("[x] deployment complete");
+  });
+
   it("shows fresh streaming text without changing the jump target", () => {
     const first = deriveTimelineMinimapItems(
       rows([

apps/web/src/components/chat/timelineMinimapItems.ts

@@ -1,3 +1,8 @@
+import type { Nodes } from "mdast";
+import remarkGfm from "remark-gfm";
+import remarkParse from "remark-parse";
+import { unified } from "unified";
+
 import type { MessagesTimelineRow } from "./MessagesTimeline.logic";
 
 export interface TimelineMinimapItem {
@@ -48,6 +53,33 @@ function resolveFinalAssistantTextForTurn(
   return finalAssistantText;
 }
 
+const markdownPreviewParser = unified().use(remarkParse).use(remarkGfm).freeze();
+
+const INLINE_PARENT_TYPES = new Set<Nodes["type"]>([
+  "paragraph",
+  "heading",
+  "tableCell",
+  "emphasis",
+  "strong",
+  "delete",
+  "link",
+  "linkReference",
+]);
+
+function markdownNodeText(node: Nodes): string {
+  if (node.type === "html") return "";
+  if ("value" in node) return node.value;
+  if (node.type === "image" || node.type === "imageReference") return node.alt ?? "";
+  if (!("children" in node)) return "";
+  const separator = INLINE_PARENT_TYPES.has(node.type) ? "" : " ";
+  return node.children.map((child: Nodes) => markdownNodeText(child)).join(separator);
+}
+
+/** Reads assistant markdown as rendered text so previews never show table pipes or link syntax. */
+function markdownPreviewText(markdown: string) {
+  return markdownNodeText(markdownPreviewParser.parse(markdown));
+}
+
 function compactMinimapPreview(text: string | null | undefined) {
   const compact = text?.replace(/\s+/g, " ").trim() ?? "";
   return compact.length > 0 ? compact : null;
@@ -61,6 +93,8 @@ export function resolveTimelineMinimapPreview(
     : {
         ...item,
         userText: compactMinimapPreview(item.userText),
-        assistantText: compactMinimapPreview(item.assistantText),
+        assistantText: compactMinimapPreview(
+          item.assistantText === null ? null : markdownPreviewText(item.assistantText),
+        ),
       };
 }