perf(web): Markdown parses 8-20x faster and pull request comments mount 3x faster

apps/web/package.json

@@ -60,6 +60,7 @@
     "fast-xml-parser": "5.7.3",
     "hast-util-to-html": "^9.0.5",
     "hast-util-to-jsx-runtime": "^2.3.6",
+    "hastscript": "^9.0.1",
     "heic-to": "^1.5.2",
     "html-url-attributes": "^3.0.1",
     "jose": "catalog:",
@@ -73,6 +74,7 @@
     "morphicons": "^1.7.1",
     "pdfjs-dist": "6.4.299",
     "pele": "^1.8.0",
+    "property-information": "^7.2.0",
     "react": "catalog:",
     "react-dom": "catalog:",
     "react-markdown": "^10.1.0",
@@ -106,6 +108,7 @@
     "@vercel/config": "^0.3.0",
     "@vitejs/plugin-react": "^6.1.2",
     "@vitest/browser-playwright": "5.0.5",
+    "commonmark-spec": "0.31.2",
     "compression": "^1.8.2",
     "micromark-util-types": "catalog:",
     "oxc-transform-react": "~0.152.0",

apps/web/src/components/ChatMarkdown.browser.test.tsx

@@ -17,14 +17,14 @@ const { workspaceSearch, filesystemMetadata } = vi.hoisted(() => ({
   filesystemMetadata: vi.fn(),
 }));
 const parsedSources = vi.hoisted(() => [] as string[]);
-vi.mock(import("mdast-util-from-markdown"), async (original) => {
+vi.mock(import("../markdown/parseMarkdown"), async (original) => {
   const actual = await original();
   return {
     ...actual,
-    fromMarkdown: ((source: string, ...rest: never[]) => {
-      parsedSources.push(String(source));
-      return (actual.fromMarkdown as (...args: unknown[]) => unknown)(source, ...rest);
-    }) as typeof actual.fromMarkdown,
+    parseMarkdown: (source, options) => {
+      parsedSources.push(source);
+      return actual.parseMarkdown(source, options);
+    },
   };
 });
 
@@ -201,6 +201,45 @@ describe("ChatMarkdown favicon privacy", () => {
   });
 });
 
+describe("ChatMarkdown link tooltips", () => {
+  it("shows each link's address on one shared tooltip as the pointer moves between links", async () => {
+    setup();
+    await using screen = await render(
+      <ChatMarkdown
+        cwd="/tmp/project"
+        text="[First](https://example.com/a) and [Second](https://example.org/b)"
+      />,
+    );
+    await userEvent.hover(screen.getByRole("link", { name: /First/ }));
+    await expect.element(page.getByText("https://example.com/a")).toBeVisible();
+    await userEvent.hover(screen.getByRole("link", { name: /Second/ }));
+    await expect.element(page.getByText("https://example.org/b")).toBeVisible();
+    expect(document.querySelectorAll('[data-slot="tooltip-popup"]')).toHaveLength(1);
+  });
+});
+
+describe("ChatMarkdown details", () => {
+  it("opens collapsed details by click, and by keyboard without losing focus", async () => {
+    setup();
+    await using screen = await render(
+      <ChatMarkdown
+        cwd="/tmp/project"
+        text={
+          "<details><summary>First</summary>\n\nHidden one\n\n</details>\n\n<details><summary>Second</summary>\n\nHidden two\n\n</details>"
+        }
+      />,
+    );
+    await userEvent.click(screen.getByRole("button", { name: "First" }));
+    await expect.element(screen.getByText("Hidden one")).toBeVisible();
+    await userEvent.tab();
+    const second = screen.getByRole("button", { name: "Second" });
+    await expect.element(second).toHaveFocus();
+    await userEvent.keyboard("{Enter}");
+    await expect.element(screen.getByText("Hidden two")).toBeVisible();
+    await expect.element(screen.getByRole("button", { name: "Second" })).toHaveFocus();
+  });
+});
+
 describe("ChatMarkdown streaming", () => {
   it("runs only a complete single-line shell block after a click", async () => {
     setup();