Skip to content

Refresh composer, agent icon, and composer trigger styling - #578

Merged
govindavashishtha merged 4 commits into
mainfrom
design/composer-agent-icon-refresh
Sep 3, 2026
Merged

Refresh composer, agent icon, and composer trigger styling#578
govindavashishtha merged 4 commits into
mainfrom
design/composer-agent-icon-refresh

Conversation

@bharat-tf

@bharat-tf bharat-tf commented Sep 3, 2026

Copy link
Copy Markdown
Contributor

Applies the updated design for the composer area and the chrome triggers around it.

  • ComposerShell: 12px corners, card surface, and a 1px violet->indigo gradient hairline drawn via the padding-box/border-box background-clip pair. The ramp and its glow are light-only; dark keeps the palette's neutral hairline, where the violet reads far louder than intended. ComposerContainer's dropzone radius follows so the drag ring stays flush.
  • DraftCompositeSelector: the tools trigger loses its "Tools" caption and count badge, leaving an icon-only button (30px, matching the design). The count and name still reach assistive tech through the existing aria-label and sighted users through the tooltip. With both triggers now icon-only the row goes gapless so they cluster as one toolbar.
  • AgentsLibraryButton: use the design system's own agent-2 glyph instead of the generic lucide robot.
  • SaveAgentButton: squared-off chrome-action geometry (2px corners, 10px horizontal padding, card surface) applied at the component rather than the shared outline variant, since size classes are merged after variant classes and would otherwise win.
  • agent-2.svg: currentColor in place of a hardcoded #000, which also makes the existing SubAgentCard usage legible in dark mode.

The composer radius is expressed directly rather than through --composer-radius, which still drives ThreadShell and UserMessageBubble; folding it into the theme preset would restyle surfaces this design did not touch.

Summary

Closes #

Changes

How was this tested?

Checklist

  • I have read the contributing guidelines
  • pnpm build, pnpm test, pnpm typecheck, pnpm lint:ci, and pnpm format:check pass locally
  • Tests added/updated where it makes sense
  • No hand-edits to generated code (packages/trueforge-sdk, .github/fern/openapi/openapi.json, docs/openapi.json) — fork PRs omit SDK regen; maintainers regenerate after merge
  • Docs / .env.example updated if configuration or behavior changed

Note

Low Risk
Mostly visual and layout tweaks plus test/config fixes; mobile users reach theme/settings via the nav drawer instead of the top bar.

Overview
Refreshes composer and surrounding chrome triggers to match the updated design.

The composer shell moves to 0.75rem corners, a card surface, a light-theme primary-token gradient hairline (faded top → solid bottom) with matching glow, and a neutral border in dark mode; the attachment dropzone radius follows so drag rings stay aligned. The tools control in the draft selector is icon-only (wrench); tool count and names stay on aria-label and the tooltip, and the trigger row is gapless so icon buttons read as one toolbar.

Agents library uses the agent-2 glyph instead of bot; agent-2.svg uses currentColor for dark-mode legibility. Save agent gets squared chrome-action styling (tight corners, card fill, extra horizontal padding). Sidebar mobile header no longer duplicates Settings / theme — those stay on the nav drawer / rail footer; mobile drawer chrome drops some divider borders. Tests expect a single Settings/theme instance; Vitest passes --no-webstorage on Node 25+ so jsdom owns localStorage.

Reviewed by Cursor Bugbot for commit 565ecc1. Bugbot is set up for automated code reviews on this repo. Configure here.

Applies the updated design for the composer area and the chrome
triggers around it.

- ComposerShell: 12px corners, card surface, and a 1px violet->indigo
  gradient hairline drawn via the padding-box/border-box background-clip
  pair. The ramp and its glow are light-only; dark keeps the palette's
  neutral hairline, where the violet reads far louder than intended.
  ComposerContainer's dropzone radius follows so the drag ring stays
  flush.
- DraftCompositeSelector: the tools trigger loses its "Tools" caption
  and count badge, leaving an icon-only button (30px, matching the
  design). The count and name still reach assistive tech through the
  existing aria-label and sighted users through the tooltip. With both
  triggers now icon-only the row goes gapless so they cluster as one
  toolbar.
- AgentsLibraryButton: use the design system's own `agent-2` glyph
  instead of the generic lucide robot.
- SaveAgentButton: squared-off chrome-action geometry (2px corners,
  10px horizontal padding, card surface) applied at the component
  rather than the shared `outline` variant, since size classes are
  merged after variant classes and would otherwise win.
- agent-2.svg: `currentColor` in place of a hardcoded `#000`, which
  also makes the existing SubAgentCard usage legible in dark mode.

The composer radius is expressed directly rather than through
`--composer-radius`, which still drives ThreadShell and
UserMessageBubble; folding it into the theme preset would restyle
surfaces this design did not touch.

Co-Authored-By: Claude <noreply@anthropic.com>
@changeset-bot

changeset-bot Bot commented Sep 3, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 565ecc1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@truefoundry/trueforge-ui Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Want higher recall? High effort reviews run extra passes and find more bugs. A team admin can switch effort levels in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 4c6ebab. Configure here.

Comment thread packages/trueforge-ui/src/atoms/ComposerShell.tsx Outdated
govindavashishtha and others added 2 commits September 3, 2026 16:31
Keep main's shell-managed Agents rail and the design branch's agent-2 icon.

Co-authored-by: Cursor <cursoragent@cursor.com>
…ius and gradient hairline. Adjust SaveAgentButton and ComposerContainer for consistent design. Remove unnecessary borders in SidebarLayout for cleaner UI. Fix `agent-2.svg` for better dark mode visibility.
…nd adjust SidebarLayout tests for correct button visibility
@govindavashishtha
govindavashishtha enabled auto-merge (squash) September 3, 2026 11:25
@govindavashishtha
govindavashishtha merged commit 347a7e7 into main Sep 3, 2026
7 checks passed
@govindavashishtha
govindavashishtha deleted the design/composer-agent-icon-refresh branch September 3, 2026 11:28
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