feat: group tool calls with verb labels + spacing#78
Closed
Conversation
- Upgrade Tailwind CSS v3 → v4 with @tailwindcss/postcss, tw-animate-css - Replace tailwind.config.js with CSS @theme blocks in globals.css - Import boss-ui token system (semantic backgrounds, borders, text, shadows, shapes, typography scale, animations, layout tokens) - Import 49 shared UI components from squareup/boss-ui - Import 48 AI element components from squareup/boss-ui - Import 4 hooks from squareup/boss-ui - Install all required dependencies (Radix UI primitives, UI libs, content libs, form/utility libs) - Migrate all 35+ feature files from custom tokens to standard shadcn/boss-ui tokens (bg-background, text-foreground, bg-accent, text-muted-foreground, border-border, etc.) - Align to boss-ui visual language: flat border-driven design, no elevation on sidebars/inputs, shadow-popover for menus, shadow-card for dialogs - Fix low-contrast text by removing opacity modifiers on text-muted-foreground - Update biome.json, tsconfig.json, check-file-sizes.mjs for imported code - Re-add custom Button variants (toolbar, xs, icon-sm, icon-lg) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Replace hand-rolled dialogs with Dialog/DialogContent in CreateSkillDialog, CreateProjectDialog, PersonaEditor - Replace delete confirmations with AlertDialog in AgentsView, ProjectsView, SkillsView, SettingsModal, DoctorCheckRow - Replace raw <input> with Input component (6 instances) - Replace raw <textarea> with Textarea component (3 instances) - Replace raw <select> with Select/SelectTrigger/SelectContent/ SelectItem (5 instances) - Replace raw <label> with Label component throughout - Replace <input type="checkbox"> with Checkbox component - Replace div border-t dividers with Separator in settings - Fix Radix SelectItem empty-string value crash by using sentinel - Set sidebar to bg-background Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…tarea Use the boss-ui Button default variant (bg-primary) for the send button instead of custom bg-foreground overrides. Suppress the global focus-visible ring on the chat textarea to prevent the black outline. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Download Cash Sans Wide font files (5 weights) from boss-ui - Add @font-face declarations in globals.css - Switch page titles, settings headings, home clock/greeting, and chat empty state to font-display (Cash Sans Wide) with tracking-tight - Use Badge component with secondary variant for PersonaCard pills - Remove redundant "Personas" section subtitle - Upgrade "Active Agents" heading to display font Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace ~56 raw <button> elements across 20 files with the Button component, hand-rolled toggle groups with ToggleGroup, img/div avatar patterns with Avatar, animate-pulse skeletons with Skeleton, and a raw <input> with Input. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Relocate src/components/ai-elements/ to src/shared/ui/ai-elements/ to colocate with the rest of the boss-ui component library. No import updates needed as these components are not yet consumed. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Use default sans-serif for skill names in the list and create dialog to match persona card styling. Keep mono only for instructions textarea. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace hand-rolled ToolCallCard, ThinkingBlock, and MarkdownContent with the ai-elements Tool, Reasoning, and MessageResponse compounds. Action buttons now use MessageAction with built-in tooltip support. Add @source for streamdown so Tailwind generates its utility classes. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Merges 7 commits from main into tho/boss-ui: - Image paste support in chat input (#68) - Tab name text unselectable (#67) - Chat title immediate update on send (#66) - Artifact v1 file viewing (#63) - Cmd+W tab close (#64) - Chat activity/unread state tracking (#62) - Sidebar hierarchy polish + faster reloads (#61) Key conflict resolutions: - Keep Tailwind v4 CSS-based config (delete tailwind.config.js) - Keep boss-ui dialog.tsx, add showCloseButton prop from main - Add text-foreground-subtle token to boss-ui theme system - Keep ToolCallAdapter (boss-ui), adopt ToolChainCards pattern from main - Delete MarkdownContent/ToolCallCard (replaced by boss-ui ai-elements) - Adopt SessionActivityIndicator from main into sidebar - Adopt ClickableImage/ImageLightbox from main - Merge drag-and-drop image support into ChatInput - Keep boss-ui hover:bg-accent/50 treatment throughout sidebar Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Merge origin/main (tabs removal refactor #70) and fix two code review items: - Register @tailwindcss/typography plugin via @plugin directive for prose classes - Fix accordion keyframes to use --radix-accordion-content-height (not --bits-) - Remove GooseIcon home button from sidebar header (removed upstream) - Adopt tab→session rename throughout sidebar components Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add overflow-hidden to main content area so the flex layout chain properly constrains scrolling to the MessageTimeline, keeping the chat input and status bar pinned at the bottom. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Two issues caused the entire page to scroll when viewing chat: 1. scrollIntoView() in MessageTimeline scrolls all ancestors including the document. Replaced with container.scrollTo() which only scrolls within the message timeline container. 2. Tailwind v4 preflight doesn't set height/overflow on html/body like v3 did. Added height: 100% + overflow: hidden on html, body, #root outside @layer base so the cascade can't override them. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add min-w-0 and w-full to message content containers so flex items respect the max-w-[85%] boundary. Wrap tool output pre blocks with whitespace-pre-wrap so result text flows within the code block. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The previous selection background (#1a1a1a) was nearly invisible against the dark input background. Now uses the user's accent color at 60% opacity. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Strip visual noise from collapsed tool calls: remove wrench icon (via optional showIcon prop), remove border/rounded container, replace status pill with plain text, hide "Completed" status entirely, and use inline chevron caret next to the tool name. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Consecutive same-type tool calls collapse into expandable groups
("Wrote 3 files", "Ran 2 commands") with a left border indent.
Solo items show past-tense verbs ("Wrote foo.html", "Read", "Ran").
Grouped items render flat (no inner accordions, no result labels).
Extract ToolChainCards into its own file to stay under size limit.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Use CSS pseudo-selectors for context-aware spacing: tight (2px) between consecutive text blocks, wider (8px) around tool sections. Tighten flat tool item content from space-y-4 to space-y-2. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 178b5b10a5
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| return ( | ||
| <div className="flex flex-col items-start gap-3"> | ||
| {groups.flatMap((group) => { | ||
| if (group.items.length > 1 && group.type !== undefined) { |
There was a problem hiding this comment.
The new grouping condition collapses any consecutive recognized tools based only on type and count, even when one of the grouped items is still pending/executing or has errored. In those cases the collapsed row shows only a past-tense label (e.g., “Wrote 2 files”) and hides per-call status/elapsed time/error badges until the user manually expands it, which regresses live progress/error visibility compared with the previous per-card rendering. Consider only collapsing groups when every item is completed successfully, or surface an aggregate status badge on the collapsed row.
Useful? React with 👍 / 👎.
Assistant messages now always fill to max-w-[85%] instead of shrinking to content, preventing width jumps when groups expand. Remove items-start from tool chain containers so children stretch. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add animate-in slide-in-from-top-2 fade-in to group expanded content, matching the existing tool accordion animation style. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
ToolChainCardsinto its own file to stay under the 500-line limitStacked on #69 (
tho/boss-ui).Test plan
pnpm test— all 183 tests pass with updated assertionspnpm dev— verify verb labels, grouping, expand/collapse, and spacing visually🤖 Generated with Claude Code