feat: import boss-ui components + Tailwind v4 upgrade#85
Merged
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>
Add gap-0 to collapsed button styles to prevent hidden text spans (w-0 opacity-0) from creating flex gaps that shift icons off-center. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Take main's Button component (leftIcon/rightIcon, per-size SVG sizing, ghost+icon compound variants) and remove our appearance variant - Take main's ChatInputToolbar layout (attach, mic, stop/send sections) - Take main's MessageBubble improvements (error-specific notification styling) - Take main's PersonaPicker simplified icon trigger - Merge Sidebar: add GooseIcon home button from main, keep our Button component usage and gap-0 centering fix - Keep our ToolCallCard deletion (replaced by ToolCallAdapter) - Fix appearance prop usage in calendar, carousel, pagination, sidebar Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Restore rounded-full on button base and remove redundant rounded-md from size variants. Update input-group container to rounded-full and toggle to rounded-full to match the pill design language. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
4 tasks
![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: 192b95e2c6
ℹ️ 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".
Comment on lines
+284
to
+288
| <button | ||
| data-sidebar="rail" | ||
| data-slot="sidebar-rail" | ||
| aria-label="Toggle Sidebar" | ||
| tabIndex={-1} |
There was a problem hiding this comment.
/workspace/goose2/AGENTS.md explicitly requires all <button> elements to declare type="button", but this new SidebarRail control omits it. In HTML the default type is submit, so if this primitive is ever used inside a form container, clicking the rail will submit the form instead of only toggling the sidebar; add an explicit type to prevent accidental submissions.
Useful? React with 👍 / 👎.
Comment on lines
+291
to
+293
| <MessageResponse key={`text-${index}`} isAnimating={isStreamingMsg}> | ||
| {tc.text} | ||
| </MessageResponse> |
There was a problem hiding this comment.
This switch to rendering text via MessageResponse removes the previous ArtifactPolicyContext link interception path (resolveMarkdownHref/openResolvedPath) that enforced allowed roots and blocked disallowed local paths. Assistant-provided markdown links now bypass that policy layer entirely, which regresses both path-safety enforcement and local artifact opening behavior in chat responses.
Useful? React with 👍 / 👎.
Comment on lines
+327
to
+331
| --color-background-default: var(--background-default); | ||
| --color-background-alt: var(--background-alt); | ||
| --color-background-medium: var(--background-medium); | ||
| --color-background-inverse: var(--background-inverse); | ||
| --color-background-muted: var(--background-muted); |
There was a problem hiding this comment.
The Tailwind v4 theme now defines new background tokens (background-alt, background-medium, background-muted) but drops legacy aliases like background-tertiary/foreground-secondary that are still used throughout the UI (including chat components). Because Tailwind v4 only emits utilities for declared theme keys, existing classes such as bg-background-tertiary and text-foreground-secondary silently stop resolving, causing broad styling regressions unless compatibility aliases are preserved or all usages are migrated together.
Useful? React with 👍 / 👎.
Browsers default <button> to text-align:center. This causes short text inside flex-1 spans to appear centered even when justify-start is set, since justify-start controls flex child positioning but text-align controls text within those children. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The merge from main brought in color tokens (foreground-tertiary, foreground-secondary, background-primary, background-tertiary, etc.) that don't exist in our theme. Map them to our equivalents: - foreground-tertiary/secondary → muted-foreground - foreground-danger → destructive - background-primary → background - background-tertiary → accent - background-danger → destructive - border-border-secondary → border-border Fixes invisible send button arrow (text-background-primary → text-background). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The Tailwind v4 theme resets all colors with --color-*: initial then
only declares a minimal palette. This silently broke ~120 class usages
across ai-elements that rely on standard Tailwind scales (red-400,
green-600, zinc-800, etc.).
Add compat color stops for the specific scales actually used:
- red-{50,400,500,600,700,900}
- green-{400,500,600,700,900}
- blue-{400,500,600,700,900}
- yellow-{400,500,600,700,900}
- orange-{100,400,600,700,900}
- zinc-{100,400,800,950}
- amber-500
Also register brand and danger in @theme inline so Tailwind can
generate text-brand, bg-brand, text-danger, etc. utilities.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
wesbillman
approved these changes
Apr 2, 2026
1. Add type="button" to SidebarRail button to prevent accidental form submissions per AGENTS.md requirement. 2. Restore artifact policy enforcement for markdown links in chat. The switch to MessageResponse/Streamdown lost the link interception that enforced allowed roots. Extract useArtifactLinkHandler hook that intercepts local link clicks via event delegation and routes them through useArtifactPolicyContext. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The switch from ToolCallCard to ToolCallAdapter dropped the artifact policy integration that showed "Open file" buttons on tool results. Add ArtifactActions component that uses resolveToolCardDisplay from ArtifactPolicyContext to render primary and secondary open actions with path safety enforcement. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
ArtifactActions was missing "detected" labels for low-confidence candidates and per-candidate blockedReason text. This made the feature appear broken even though the plumbing was correct. Also adds test coverage for ToolCallAdapter artifact integration and useArtifactLinkHandler to prevent future regressions. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
wesbillman
added a commit
that referenced
this pull request
Apr 2, 2026
The Tailwind v4 upgrade (#85) replaced dialog components with Radix UI primitives that use aria-labelledby instead of aria-label. Update E2E tests to check DialogTitle h2 text instead of missing aria-label attrs, and use getByRole("button", { name: "Close" }) for the X close button. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
5 tasks
wesbillman
added a commit
that referenced
this pull request
Apr 2, 2026
The Tailwind v4 upgrade (#85) replaced dialog components with Radix UI primitives that use aria-labelledby instead of aria-label. Update E2E tests to check DialogTitle h2 text instead of missing aria-label attrs, and use getByRole("button", { name: "Close" }) for the X close button. Co-authored-by: Claude Opus 4.6 <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
2 participants
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
Supersedes #69 (reopened from origin with push access).
Test plan
🤖 Generated with Claude Code