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 {alt}; }, + table({ node: _node, children, ...props }) { + return ( +
+ {children}
+
+ ); + }, }), [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);