fix(frontend): render user messages as plain text and cap blockquote nesting (#3502)

* fix(frontend): render user messages as plain text and cap blockquote nesting

User messages are typed or pasted plain text, not authored Markdown, but
they were rendered through the full Streamdown pipeline. Pasted source
files got fragmented (indented chunks become code blocks, paragraphs
collapse and lose indentation), "$...$" spans were KaTeX-ified, and a
message with thousands of nested ">" markers overflowed the call stack
in marked's recursive blockquote lexer, permanently crashing the thread
on every load.

Render human message content verbatim with pre-wrap instead, and cap
blockquote nesting at 100 levels at the Streamdown chokepoint so model
output cannot trigger the same recursion either.

Closes #3500

* fix(frontend): absorb marked lexer crashes with a render fallback boundary

Review found two gaps in the nesting cap: marked's list and blockquote
tokenizers are mutually recursive, so a list marker in front of the
quote chain ("- > > > ...") bypassed the blockquote-only regex and
still overflowed the stack; and the line-based rewrite was fence-blind,
silently truncating literal ">" runs inside code blocks.

Add an error boundary around Streamdown that renders the raw content as
plain pre-wrap text when rendering throws (retrying on the next content
change), keep the cap as a fast path for the dominant pure-">" case,
and make it skip fenced and indented code lines.

frontend/tests/e2e/user-message-plain-text.spec.ts

@@ -0,0 +1,137 @@
+import { expect, test, type Page } from "@playwright/test";
+
+import { mockLangGraphAPI, MOCK_THREAD_ID } from "./utils/mock-api";
+
+const C_SOURCE = `#include <stdio.h>
+#include <signal.h>
+
+static volatile int connected = 0;
+
+static void daemon_handle_signal(int sig) {
+    if (sig == SIGTERM) {
+        connected = 0;
+
+        printf("daemon stop requested\\n");
+        return;
+    }
+
+    printf("ignored signal %d\\n", sig);
+}`;
+
+function threadWithMessages(
+  humanText: string,
+  aiText = "ack",
+): Parameters<typeof mockLangGraphAPI>[1] {
+  return {
+    threads: [
+      {
+        thread_id: MOCK_THREAD_ID,
+        title: "Plain text rendering",
+        updated_at: "2025-06-01T12:00:00Z",
+        messages: [
+          {
+            type: "human",
+            id: "msg-human-plain-text",
+            content: [{ type: "text", text: humanText }],
+          },
+          {
+            type: "ai",
+            id: "msg-ai-plain-text",
+            content: aiText,
+          },
+        ],
+      },
+    ],
+  };
+}
+
+function collectPageErrors(page: Page): string[] {
+  const errors: string[] = [];
+  page.on("pageerror", (error) => {
+    errors.push(`${error.name}: ${error.message}`);
+  });
+  return errors;
+}
+
+test.describe("User message plain-text rendering", () => {
+  test("pasted source code renders verbatim as one block", async ({ page }) => {
+    mockLangGraphAPI(page, threadWithMessages(C_SOURCE));
+
+    await page.goto(`/workspace/chats/${MOCK_THREAD_ID}`);
+    await expect(page.getByText("ack")).toBeVisible({ timeout: 15_000 });
+
+    // The pasted file must not be split into Markdown code-block widgets.
+    await expect(
+      page.locator('[data-code-block-container="true"]'),
+    ).toHaveCount(0);
+
+    // Indentation and line structure must be preserved verbatim.
+    const bubble = page.locator(".is-user");
+    const text = await bubble.innerText();
+    expect(text).toContain("#include <stdio.h>");
+    expect(text).toContain("    if (sig == SIGTERM) {");
+    expect(text).toContain('        printf("daemon stop requested\\n");');
+  });
+
+  test("dollar signs are not parsed as math", async ({ page }) => {
+    const message = "this costs $5 and $10 in total";
+    mockLangGraphAPI(page, threadWithMessages(message));
+
+    await page.goto(`/workspace/chats/${MOCK_THREAD_ID}`);
+    await expect(page.getByText("ack")).toBeVisible({ timeout: 15_000 });
+
+    await expect(page.locator(".is-user")).toContainText(message);
+    await expect(page.locator(".is-user .katex")).toHaveCount(0);
+  });
+
+  test("deeply nested blockquote markers in a user message do not crash the page", async ({
+    page,
+  }) => {
+    const pageErrors = collectPageErrors(page);
+    mockLangGraphAPI(page, threadWithMessages("> ".repeat(3000) + "hi"));
+
+    await page.goto(`/workspace/chats/${MOCK_THREAD_ID}`);
+    await expect(page.getByText("ack")).toBeVisible({ timeout: 15_000 });
+
+    expect(pageErrors).toEqual([]);
+    await expect(page.locator(".is-user")).toContainText("> > >");
+  });
+
+  test("deeply nested blockquote markers in an AI message do not crash the page", async ({
+    page,
+  }) => {
+    const pageErrors = collectPageErrors(page);
+    mockLangGraphAPI(
+      page,
+      threadWithMessages("hello", "> ".repeat(3000) + "deep"),
+    );
+
+    await page.goto(`/workspace/chats/${MOCK_THREAD_ID}`);
+    await expect(page.getByText("hello")).toBeVisible({ timeout: 15_000 });
+
+    expect(pageErrors).toEqual([]);
+    // The capped blockquote chain still renders (100 levels of indentation can
+    // squeeze the innermost element to zero width, so assert presence, not
+    // visibility).
+    await expect(page.getByText("deep")).toBeAttached();
+  });
+
+  test("list-prefixed deep nesting in an AI message falls back to plain text instead of crashing", async ({
+    page,
+  }) => {
+    // marked's list and blockquote tokenizers are mutually recursive, so a
+    // list marker in front of the quote chain bypasses the nesting cap; the
+    // render error boundary must absorb it.
+    const pageErrors = collectPageErrors(page);
+    mockLangGraphAPI(
+      page,
+      threadWithMessages("hello", "- " + "> ".repeat(3000) + "deep-list"),
+    );
+
+    await page.goto(`/workspace/chats/${MOCK_THREAD_ID}`);
+    await expect(page.getByText("hello")).toBeVisible({ timeout: 15_000 });
+
+    expect(pageErrors).toEqual([]);
+    await expect(page.getByText("deep-list")).toBeAttached();
+  });
+});

frontend/tests/unit/core/streamdown/preprocess.test.ts

@@ -0,0 +1,57 @@
+import { expect, test } from "vitest";
+
+import {
+  capBlockquoteNesting,
+  preprocessStreamdownMarkdown,
+} from "@/core/streamdown/preprocess";
+
+test("capBlockquoteNesting returns normal content unchanged", () => {
+  const input = "# Title\n\n> a quote\n>> nested\n\nsome `code`";
+  expect(capBlockquoteNesting(input)).toBe(input);
+});
+
+test("capBlockquoteNesting keeps nesting at or below the cap untouched", () => {
+  const input = "> ".repeat(100) + "hi";
+  expect(capBlockquoteNesting(input)).toBe(input);
+});
+
+test("capBlockquoteNesting caps pathological nesting and preserves content", () => {
+  const result = capBlockquoteNesting("> ".repeat(5000) + "hi");
+  expect((result.match(/>/g) ?? []).length).toBe(100);
+  expect(result.endsWith("hi")).toBe(true);
+});
+
+test("capBlockquoteNesting handles markers without spaces", () => {
+  const result = capBlockquoteNesting(">".repeat(5000) + "hi");
+  expect((result.match(/>/g) ?? []).length).toBe(100);
+  expect(result.endsWith("hi")).toBe(true);
+});
+
+test("capBlockquoteNesting leaves fenced code content untouched", () => {
+  const literal = ">".repeat(150);
+  const input = `${"> ".repeat(3000)}hi\n\`\`\`text\n${literal}\n\`\`\``;
+  const result = capBlockquoteNesting(input);
+  expect(result.split("\n")[2]).toBe(literal);
+});
+
+test("capBlockquoteNesting leaves indented code blocks untouched", () => {
+  const literal = "    " + ">".repeat(150);
+  const input = `${"> ".repeat(3000)}hi\n\n${literal}`;
+  const result = capBlockquoteNesting(input);
+  expect(result.split("\n")[2]).toBe(literal);
+});
+
+test("capBlockquoteNesting only rewrites pathological lines", () => {
+  const normal = "> normal quote";
+  const deep = "> ".repeat(3000) + "deep";
+  const result = capBlockquoteNesting(`${normal}\n${deep}\nplain`);
+  const lines = result.split("\n");
+  expect(lines[0]).toBe(normal);
+  expect((lines[1]?.match(/>/g) ?? []).length).toBe(100);
+  expect(lines[2]).toBe("plain");
+});
+
+test("preprocessStreamdownMarkdown leaves non-mermaid content unchanged", () => {
+  const input = "just some text";
+  expect(preprocessStreamdownMarkdown(input)).toBe(input);
+});