diff --git a/apps/web/src/components/ChatMarkdown.tsx b/apps/web/src/components/ChatMarkdown.tsx
index e64b6d16..f4e1871f 100644
--- a/apps/web/src/components/ChatMarkdown.tsx
+++ b/apps/web/src/components/ChatMarkdown.tsx
@@ -720,6 +720,13 @@ function ChatMarkdown({
}
return
;
},
+ table({ node: _node, children, ...props }) {
+ return (
+
+ );
+ },
}),
[cwd, diffThemeName, isStreaming, onImageExpand],
);
diff --git a/apps/web/src/components/chat/ChatTranscriptPane.browser.tsx b/apps/web/src/components/chat/ChatTranscriptPane.browser.tsx
index 56d65753..540c98a6 100644
--- a/apps/web/src/components/chat/ChatTranscriptPane.browser.tsx
+++ b/apps/web/src/components/chat/ChatTranscriptPane.browser.tsx
@@ -29,6 +29,13 @@ const TIMELINE_ENTRIES = [
},
},
];
+const DIFF_TABLE_MESSAGE = [
+ "Here are the repository changes:",
+ "",
+ "| File | Status | Notes |",
+ "| --- | --- | --- |",
+ "| `apps/web/src/components/chat/MessagesTimeline.browser-regression-with-a-very-long-file-name.tsx` | Modified | Rendered at completion after the assistant summarizes the diff changes. |",
+].join("\n");
function TranscriptPerfHarness(props: { onTranscriptRender: () => void }) {
const [composerValue, setComposerValue] = useState("");
@@ -159,6 +166,78 @@ describe("ChatTranscriptPane", () => {
}
});
+ it("contains completed markdown diff tables within the transcript row", async () => {
+ const screen = await render(
+ ,
+ );
+
+ try {
+ await vi.waitFor(() => {
+ expect(page.getByText("repository changes")).toBeVisible();
+ });
+
+ const tableScroll = screen.container.querySelector(
+ ".chat-markdown-table-scroll",
+ );
+ expect(tableScroll).not.toBeNull();
+ expect(tableScroll!.querySelector("table")).not.toBeNull();
+ } finally {
+ await screen.unmount();
+ }
+ });
+
it("expands collapsed user messages from the Show more control", async () => {
const hiddenTail = "TAIL_SHOULD_APPEAR_AFTER_EXPAND";
const longUserText = `${"a".repeat(COLLAPSED_USER_MESSAGE_MAX_CHARS)}${hiddenTail}`;
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index cf35632f..7078d103 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -459,6 +459,7 @@ label:has(> select#reasoning-effort) select {
.chat-markdown ol,
.chat-markdown blockquote,
.chat-markdown pre,
+.chat-markdown-table-scroll,
.chat-markdown table {
margin: 0.65rem 0;
}
@@ -925,6 +926,16 @@ label:has(> select#reasoning-effort) select {
border-collapse: collapse;
}
+.chat-markdown-table-scroll {
+ max-width: 100%;
+ overflow-x: auto;
+ overscroll-behavior-x: contain;
+}
+
+.chat-markdown-table-scroll > table {
+ min-width: 100%;
+}
+
.chat-markdown th,
.chat-markdown td {
border: 1px solid var(--border);