Preview very large Markdown responses before rendering

Author: ShadowfetchStudio

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## 0.20.0 — native development (unreleased)
 
+- The desktop previews a very large Markdown response before rendering all of
+  it, with an explicit control to expand the complete durable response.
+
 - Desktop windows can attach to an existing headless/TUI engine with independent
   navigation and a visible shared-lifetime notice. Closing an attached window
   leaves engine-owned work running. A bounded private event feed supports

docs/NATIVE_HISTORY.md

@@ -30,6 +30,21 @@ These are saved-history/initial-load bounds, not a claim of constant memory for
 long-running live task or a virtualized Markdown renderer. Further live-stream,
 large-single-message and WebKit memory stress remain native release gates.
 
+## Large response previews
+
+The desktop renders the first 512 KiB of a single Markdown response by default.
+For a larger response, a visible **Show full response** control expands the
+complete text in place. This avoids parsing a provider's maximum 16 MiB response
+into the WebKit DOM while it is still streaming. It does not alter the event,
+continuation context, task export or JSON export; the full saved text remains
+available through those paths. The preview is measured in JavaScript UTF-16 code
+units, so the displayed byte size is approximate for non-ASCII text.
+
+This is an initial rendering bound, not transcript virtualization. Expanding a
+large response deliberately accepts the cost of rendering it. A regression test
+verifies that the Markdown parser receives only the preview until the reader
+chooses to expand it.
+
 ## Live rendering
 
 Unchanged Markdown messages reuse their rendered output during live updates.

docs/NATIVE_MIGRATION.md

@@ -144,8 +144,9 @@ Implemented foundation:
   retain valid function-call histories; interrupted calls are never blindly replayed.
 - [Paged native desktop history](NATIVE_HISTORY.md) bounds saved snapshots and
   supports older/newer/latest navigation while current work continues. Original
-  records and exports remain intact. Long-running live transcript memory and
-  renderer virtualization remain separate gates.
+  records and exports remain intact. Large single responses preview the first
+  512 KiB before an explicit full render. Long-running live transcript memory
+  and renderer virtualization remain separate gates.
 - A [desktop follow-up queue](NATIVE_QUEUE.md) with visible project-wide waiting
   messages, model/mode snapshots, independent queued cancellation, continued
   streaming, conversation switching and reload recovery. Active history remains

docs/NATIVE_VERIFICATION.md

@@ -1014,3 +1014,19 @@ lifetime, shutdown, accessibility and history checks still pass. The final
 abort-on-drop guard was verified by the focused cancellation tests after this
 window run. These checks do not assert that an OS notification daemon displayed
 a popup; that integration gate remains separate.
+
+## Large Markdown response preview
+
+The desktop now defers parsing response text above 512 KiB until the reader
+chooses **Show full response**. The durable event, continuation context and JSON
+export retain the full provider response, including responses within the native
+engine's 16 MiB response limit. The UI regression creates a response larger than
+the preview boundary, confirms that React Markdown receives exactly the bounded
+prefix, then expands it and verifies the original full string is parsed. The
+complete UI suite passes 35 tests, along with all seven browser scenarios and a
+rebuilt native desktop binary. The real WebKit window suite also passes its full
+30-model-request workflow after the embedded-interface rebuild.
+
+This does not claim transcript virtualization or a fixed memory bound after the
+reader expands a large response. Those longer-duration live-transcript and
+WebKit-memory gates remain separate.

ui/src/components/Markdown.test.tsx

@@ -6,7 +6,7 @@ import {
   screen,
   waitFor,
 } from "@testing-library/react";
-import { Markdown } from "./Markdown";
+import { Markdown, MARKDOWN_PREVIEW_LIMIT } from "./Markdown";
 
 const parses = vi.hoisted(() => vi.fn());
 vi.mock("react-markdown", async (original) => {
@@ -60,3 +60,20 @@ it("parses only the changing response while earlier Markdown stays interactive",
   view.rerender(<Conversation response="Streaming **99**" />);
   expect(parses).toHaveBeenCalledTimes(102);
 });
+
+it("bounds a very large response until the reader explicitly expands it", () => {
+  const large = `# Large response\n\n${"x".repeat(MARKDOWN_PREVIEW_LIMIT + 1024)}`;
+  render(<Markdown>{large}</Markdown>);
+  expect(parses).toHaveBeenCalledTimes(1);
+  expect(String(parses.mock.calls[0][0])).toHaveLength(MARKDOWN_PREVIEW_LIMIT);
+  expect(screen.getByRole("status").textContent).toContain("512 KiB");
+  expect(
+    screen.getByRole("button", { name: "Show full response" }),
+  ).toBeTruthy();
+  fireEvent.click(screen.getByRole("button", { name: "Show full response" }));
+  expect(parses).toHaveBeenCalledTimes(2);
+  expect(parses.mock.calls[1][0]).toBe(large);
+  expect(
+    screen.queryByRole("button", { name: "Show full response" }),
+  ).toBeNull();
+});

ui/src/components/Markdown.tsx

@@ -3,6 +3,11 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { Check, Copy } from "lucide-react";
 
+// Providers may send a response up to 16 MiB. Rendering all of that as one
+// Markdown tree can make the desktop unresponsive, while the durable event and
+// JSON export still retain the complete response.
+export const MARKDOWN_PREVIEW_LIMIT = 512 * 1024;
+
 function CodeBlock({ children, ...props }: ComponentPropsWithoutRef<"pre">) {
   const [copied, setCopied] = useState(false);
   return (
@@ -38,6 +43,11 @@ export const Markdown = memo(function Markdown({
 }: {
   children: string;
 }) {
+  const [expanded, setExpanded] = useState(false);
+  const abbreviated = children.length > MARKDOWN_PREVIEW_LIMIT && !expanded;
+  const visible = abbreviated
+    ? children.slice(0, MARKDOWN_PREVIEW_LIMIT)
+    : children;
   return (
     <div className="markdown">
       <ReactMarkdown
@@ -55,8 +65,23 @@ export const Markdown = memo(function Markdown({
           ),
         }}
       >
-        {children}
+        {visible}
       </ReactMarkdown>
+      {abbreviated && (
+        <div className="markdown-preview" role="status">
+          <p className="hint">
+            Showing the first 512 KiB of this response. The complete response is
+            retained in task history and JSON export.
+          </p>
+          <button
+            type="button"
+            className="mini"
+            onClick={() => setExpanded(true)}
+          >
+            Show full response
+          </button>
+        </div>
+      )}
     </div>
   );
 });

ui/src/workspace.css

@@ -587,6 +587,20 @@ kbd {
 .markdown {
   overflow-wrap: anywhere;
 }
+.markdown-preview {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 14px 0;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--surface-2);
+}
+.markdown-preview p {
+  margin: 0;
+}
 .markdown > :first-child {
   margin-top: 0;
 }