Align tool cards with Codex UI

[Waishnav]

Summary

• replace handwritten tool-card SVGs with Lucide icons
• align the shared card shell, spacing, colors, radius, and responsive layout with the Codex card treatment
• keep aggregate diff counts in the dropdown header and flatten changed-file rows without nested borders or outer gutters
• normalize titles and header metadata across workspace, file, search, directory, shell, process, patch, and aggregate-change tools
• include workspace mode and applied patch file metadata in widget card data

Validation

• npm test
• npm run typecheck
• npm run build

Summary by CodeRabbit

• New Features
  • Added consistent tool icons and standardized titles/labels for workspace, patch, search, and command results.
  • Improved patch operation summaries (Added/Edited/Deleted/Moved) and “Applied patch” messaging.
  • Enhanced review cards with better header summaries and “show more files” controls.
• Bug Fixes
  • Review payloads now render only when the card is expanded.
• Style
  • Updated tool card styling using unified CSS custom properties with refreshed spacing, borders, and responsive sizing.
• Tests
  • Updated UI expectations for tool and patch display wording.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 28490156-bc63-4add-808b-1511784f33c1

📥 Commits

Reviewing files that changed from the base of the PR and between 8bba5b3 and 0b6f516.

📒 Files selected for processing (4)

• src/ui/icons.ts
• src/ui/tool-display.test.ts
• src/ui/tool-display.ts
• src/ui/workspace-app.css

🚧 Files skipped from review as they are similar to previous changes (4)

• src/ui/icons.ts
• src/ui/tool-display.test.ts
• src/ui/tool-display.ts
• src/ui/workspace-app.css

---

📝 Walkthrough

Walkthrough

This change centralizes tool-card icons and display metadata, updates patch and workspace summaries, refactors review-card rendering, adds related tests, and revises tool-card styling with responsive adjustments.

Changes

Tool-card display refresh

Layer / File(s)	Summary
Display contracts and icon utilities package.json, src/ui/icons.ts, src/ui/tool-display.ts, src/ui/tool-display.test.ts	Adds Lucide icon rendering, shared tool display/header-summary types, per-tool formatting, and unit tests.
Patch summaries and server metadata src/server.ts, src/ui/patch-display.ts, src/ui/patch-display.test.ts	Adds workspace mode and applied file metadata, and standardizes patch titles such as “Added”, “Edited”, and “Changed”.
Workspace card rendering integration src/ui/workspace-app.tsx	Uses shared display and icon utilities, gates payload rendering on expansion, and rebuilds review-card rendering.
Tool-card visual styling src/ui/workspace-app.css	Introduces tool-card CSS variables and updates headers, icons, review sections, dividers, hover states, and mobile layouts.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
participant Server
participant WorkspaceApp
participant ToolDisplay
participant IconRenderer
Server->>WorkspaceApp: tool result card and metadata summary
WorkspaceApp->>ToolDisplay: getToolDisplay(card)
ToolDisplay->>IconRenderer: renderIcon(display.icon)
IconRenderer-->>WorkspaceApp: SVG icon element
WorkspaceApp->>WorkspaceApp: renderHeaderSummary(card) and review payload

Loading

Possibly related PRs

• Waishnav/devspace#26: Adds apply_patch per-file metadata consumed by this card summary and display update.
• Waishnav/devspace#47: Modifies patch display title and tone formatting used by this change.

Poem

A rabbit hops through cards of light,
With icons crisp and summaries right.
Added, edited, changed files show,
Review panels bloom and chevrons glow.
Hop-hop, the workspace UI’s bright!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: updating tool cards to match the Codex UI.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/codex-tool-card-ui

Warning

Review ran into problems

🔥 Problems

Git: Failed to clone repository. Please run the @coderabbitai full review command to re-trigger a full review. If the issue persists, set path_filters to include or exclude specific files.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 3

🧹 Nitpick comments (1)

src/ui/tool-display.test.ts (1)

1-57: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Add test coverage for remaining tool types and edge cases.

The current tests cover show_changes, exec_command, write_stdin, and open_workspace header summaries, but several tool display paths are untested: read, write, edit, apply_patch, grep, glob, ls, bash, and open_workspace display. Header summary branches for shell, search, read/ls, and the empty fallback are also uncovered. Adding a few more assertions following the existing pattern would prevent regressions in title/tone/label formatting.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/ui/tool-display.test.ts` around lines 1 - 57, Extend the tests in the
existing tool-display assertions to cover display results for read, write, edit,
apply_patch, grep, glob, ls, bash, and open_workspace, including their expected
titles and tones. Add header-summary assertions for shell, search, read/ls, and
the empty fallback branches of getToolHeaderSummary. Follow the existing
assert.deepEqual/assert.equal pattern and use pickDisplay where appropriate.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/ui/tool-display.ts`:
- Around line 150-155: Update patchIcon so the "delete" operation uses a
delete-specific icon instead of toolIcons.readFile. Add the chosen delete/trash
icon to toolIcons and reference it from patchIcon, while preserving the existing
icons for add, move, and other operations.
- Around line 72-80: Update the “glob” case in the tool display summary logic to
format summary.lines as a file-count label, matching the existing “Found N
files” title and avoiding the generic line-count formatting used by other search
tools. Preserve the current fallback behavior when the count is undefined.
In `@src/ui/workspace-app.css`:
- Around line 351-368: Update the mobile breakpoint rules for `.tool-header` and
`.review-header` so their `.chevron` element fits the 18px final grid track at
widths up to 520px. Add a mobile-specific size override matching that track
while preserving the existing `.tool-icon` behavior and header layout.
---
Nitpick comments:
In `@src/ui/tool-display.test.ts`:
- Around line 1-57: Extend the tests in the existing tool-display assertions to
cover display results for read, write, edit, apply_patch, grep, glob, ls, bash,
and open_workspace, including their expected titles and tones. Add
header-summary assertions for shell, search, read/ls, and the empty fallback
branches of getToolHeaderSummary. Follow the existing
assert.deepEqual/assert.equal pattern and use pickDisplay where appropriate.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: a74f1576-e8f6-42c9-810e-cd6b0f6d2bc0

📥 Commits

Reviewing files that changed from the base of the PR and between 6ccefbf and 8bba5b3.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (9)

• package.json
• src/server.ts
• src/ui/icons.ts
• src/ui/patch-display.test.ts
• src/ui/patch-display.ts
• src/ui/tool-display.test.ts
• src/ui/tool-display.ts
• src/ui/workspace-app.css
• src/ui/workspace-app.tsx

[Waishnav]

Also addressed the test-coverage nitpick in 0b6f516 by adding display cases for workspace, read/write/edit, patch, grep/glob, directory, and shell cards, plus header-summary coverage for shell, search, read/list, and empty states.