Skip to content

refactor(ui): frame chat flow cards with coss-ui Frame headers (CODE-381) - #256

Merged
AprilNEA merged 7 commits into
masterfrom
ruocheng/code-381
Jul 22, 2026
Merged

refactor(ui): frame chat flow cards with coss-ui Frame headers (CODE-381)#256
AprilNEA merged 7 commits into
masterfrom
ruocheng/code-381

Conversation

@Zerlight

Copy link
Copy Markdown
Member

Summary

Closes CODE-381.

Chat-flow cards (code block, terminal, file/tool previews, edited-files rollup) hand-rolled their header chrome as Card + CardHeader with bg-muted/border-b overrides. This converts them to the coss-ui Frame pattern — a borderless muted tray (Frame) with the card's upper part in the tray header (FrameHeader) and content in the inset panel (FramePanel) — via new shared chat-density slots in chat/chat-card.tsx (ChatCardHeader/ChatCardTitle/ChatCardActions/ChatCardPanel, density overrides only).

Converted surfaces: CodeBlock, ArtifactFrame (+ FenceFallback), Terminal + TerminalBlock, FilePreviewCard (DiffBlock follows), ToolPreviewCard, TurnDiffSummary. Showcase-only cards (test-results, schema-display, artifact, web-preview, package-info, queue, step, commit, stack-trace) are deliberately left on Card chrome until they're wired.

Design refinements from review:

  • Frame-header labels are sans; only terminal/execute headers keep mono for the command they display.
  • Copy buttons: code blocks copy their source (now built-in, so tool-result JSON/HTML blocks get one too); terminal headers copy the executed command only — threaded to the live adapter as a new optional command prop on TerminalBlock/RuntimeTerminalBlock.
  • Mutation receipts ("The file … has been updated successfully") render as plain prose under the diff instead of a second preview card.
  • Turn-diff rows show the file-identity icon + basename with the full path in a hover tooltip; no divider lines; the show-more chevron points down/up (expand/collapse) instead of the tree-node right→down.
  • Terminal fixes along the way: TerminalBlock no longer double-renders a header, the ANSI surface is clipped to the panel radius (was square-cornered and theme-mismatched in dark mode), and trailing PTY/stdout newlines no longer render as blank panel space (regression test added).

The chrome contract test (card-radius.test.tsx) now asserts the frame slot with a <header> row per card.

Verification

  • pnpm check:ci and pnpm test (1772) pass on the rebased branch.
  • Drove the webview dev:mock conversation showcase headless (playwright-core + Chrome): code fence, file read/write cards, diff card, search card, artifact frames (mermaid/svg/html), execute terminals, and the PTY terminal block all render the borderless tray + inset panel, with the expected header fonts and copy buttons; mutation receipt renders as prose under the diff.
  • TurnDiffSummary doesn't render in the mock (its stream never completes a turn with edits), so its rows are covered by unit tests plus live review over HMR against a real session.

Checklist

  • pnpm check:ci and pnpm test both pass (plus cargo fmt / clippy / test for Rust changes)
  • I ran the affected surface and observed the change working
  • If a wire message changed: WIRE_PROTOCOL_VERSION is bumped — no wire changes
  • New code and assets are my own work, or their origin and license compatibility are noted above
  • Docs and comments are updated where behavior changed

@linear-code

linear-code Bot commented Jul 22, 2026

Copy link
Copy Markdown

CODE-381

Comment thread packages/presentation/ui/src/chat/terminal.tsx Fixed
@greptile-apps

greptile-apps Bot commented Jul 22, 2026

Copy link
Copy Markdown

Greptile Summary

This PR moves core chat-flow cards to the shared coss-ui Frame pattern. The main changes are:

  • Shared compact header, title, action, and panel components for chat cards.
  • Frame-based code, artifact, terminal, file, tool, and edit-summary surfaces.
  • Copy actions for code and terminal commands.
  • Updated terminal output trimming that preserves meaningful trailing spaces.
  • Refined file labels, tool receipts, and edit-summary rows.

Confidence Score: 5/5

This looks safe to merge.

The terminal cleanup now removes only trailing newline characters. Meaningful trailing spaces remain visible. No blocking issues were found in the updated code.

T-Rex T-Rex Logs

What T-Rex did

  • I reviewed the before-change and current videos that illustrate the real scrolling conversation and representative code, and I noted the inline artifact surfaces.
  • I executed a browser session with Vite, confirmed there were no page errors, and verified that the styled Workbench UI rendered.
  • I gathered and attached the capture script, process output, browser logs, screenshots, posters, and videos for review.

View all artifacts

T-Rex Ran code and verified through T-Rex

Important Files Changed

Filename Overview
packages/presentation/ui/src/chat/terminal.tsx Moves terminal rendering to Frame chrome and preserves trailing spaces while removing blank tail lines.
packages/presentation/ui/src/chat/terminal-block.tsx Uses the shared terminal frame header and adds optional command copying.
packages/presentation/ui/src/chat/chat-card.tsx Introduces shared compact Frame slots for chat-flow cards.
packages/presentation/ui/src/chat/code-block.tsx Converts code blocks to Frame chrome and adds built-in copy actions.
packages/presentation/ui/src/chat/file-preview-card.tsx Converts file previews to Frame chrome with basename labels and path tooltips.

Reviews (5): Last reviewed commit: "chore(lint): clear sukka 8.14 warnings o..." | Re-trigger Greptile

Comment thread packages/presentation/ui/src/chat/terminal.tsx Outdated
@Zerlight
Zerlight force-pushed the ruocheng/code-381 branch from c5ba9db to f4f3b9b Compare July 22, 2026 17:49
@Zerlight

Copy link
Copy Markdown
Member Author

Example pictures of Frame-card components:
image
image

@AprilNEA
AprilNEA merged commit 50f7484 into master Jul 22, 2026
11 checks passed
@AprilNEA
AprilNEA deleted the ruocheng/code-381 branch July 22, 2026 21:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants