From b163b4314c8554e9d4740eccd050a73e736f21a3 Mon Sep 17 00:00:00 2001 From: preetsuthar17 Date: Thu, 26 Mar 2026 17:04:38 +0530 Subject: [PATCH] feat(ui): apply branding tokens to chat surfaces --- ui/src/components/acp/composer.tsx | 2 +- ui/src/components/acp/message.test.tsx | 15 ++++++++++ ui/src/components/acp/message.tsx | 2 +- ui/src/components/acp/sidebar.test.tsx | 39 ++++++++++++++++++++++++++ ui/src/components/acp/sidebar.tsx | 16 +++++------ ui/src/pages/chat.test.tsx | 12 ++++++++ ui/src/pages/chat.tsx | 4 +-- 7 files changed, 78 insertions(+), 12 deletions(-) create mode 100644 ui/src/components/acp/sidebar.test.tsx diff --git a/ui/src/components/acp/composer.tsx b/ui/src/components/acp/composer.tsx index 0a34e12..6ac9670 100644 --- a/ui/src/components/acp/composer.tsx +++ b/ui/src/components/acp/composer.tsx @@ -77,7 +77,7 @@ export const Composer = forwardRef(function Compo
{/* Composer input */}
{ if ((e.target as HTMLElement).closest('button')) return; textareaRef.current?.focus(); diff --git a/ui/src/components/acp/message.test.tsx b/ui/src/components/acp/message.test.tsx index 7abb5b3..d6fac0b 100644 --- a/ui/src/components/acp/message.test.tsx +++ b/ui/src/components/acp/message.test.tsx @@ -74,4 +74,19 @@ describe('ChatMessage', () => { expect(screen.queryByRole('button', { name: 'Copy message' })).toBeNull(); }); + + it('uses the brand accent treatment for neutral status pills', () => { + const message: ACPMessage = { + role: 'system', + title: 'Update', + status: 'in_progress', + blocks: [{ type: 'text', text: 'Provisioning instance' }], + }; + + render(); + + const pill = screen.getByText('in progress'); + expect(pill.className).toContain('bg-[color-mix(in_srgb,var(--primary)_12%,transparent)]'); + expect(pill.className).toContain('text-primary'); + }); }); diff --git a/ui/src/components/acp/message.tsx b/ui/src/components/acp/message.tsx index 475d0c3..40a4a6e 100644 --- a/ui/src/components/acp/message.tsx +++ b/ui/src/components/acp/message.tsx @@ -109,7 +109,7 @@ function StatusPill({ status, tone }: { status: string; tone?: string }) { ? 'bg-[rgba(22,163,74,0.14)] text-[#166534]' : key === 'danger' || key === 'failed' || key === 'error' ? 'bg-[rgba(220,38,38,0.12)] text-[#991b1b]' - : 'bg-[rgba(55,130,255,0.12)] text-[#1c3f8a]'; + : 'bg-[color-mix(in_srgb,var(--primary)_12%,transparent)] text-primary'; return ( diff --git a/ui/src/components/acp/sidebar.test.tsx b/ui/src/components/acp/sidebar.test.tsx new file mode 100644 index 0000000..dbff86e --- /dev/null +++ b/ui/src/components/acp/sidebar.test.tsx @@ -0,0 +1,39 @@ +import { describe, expect, it, vi } from 'vite-plus/test'; +import { screen } from '@testing-library/react'; +import { Sidebar } from './sidebar'; +import { renderWithProviders } from '@/test/helpers'; +import type { ConversationInfo } from '@/types/acp'; +import type { Spritz } from '@/types/spritz'; + +describe('Sidebar', () => { + it('uses the branded emphasis treatment for the active conversation', () => { + const spritz = { + metadata: { name: 'claude-code-lucky-tidepool' }, + } as Spritz; + const conversation = { + metadata: { name: 'conv-1' }, + spec: { title: 'Today work', spritzName: 'claude-code-lucky-tidepool' }, + status: {}, + } as ConversationInfo; + + renderWithProviders( + , + ); + + const activeConversation = screen.getByRole('button', { name: 'Today work' }); + expect(activeConversation.className).toContain('bg-[var(--surface-emphasis)]'); + expect(activeConversation.className).toContain('text-primary'); + expect(activeConversation.className).toContain( + 'shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--primary)_14%,transparent)]', + ); + }); +}); diff --git a/ui/src/components/acp/sidebar.tsx b/ui/src/components/acp/sidebar.tsx index 0289961..ee3418c 100644 --- a/ui/src/components/acp/sidebar.tsx +++ b/ui/src/components/acp/sidebar.tsx @@ -62,7 +62,7 @@ export function Sidebar({ type="button" aria-label="Expand sidebar" onClick={onToggleCollapse} - className="flex size-9 items-center justify-center rounded-[var(--radius-lg)] text-foreground/70 transition-colors hover:bg-sidebar-accent" + className="flex size-9 items-center justify-center rounded-[var(--radius-lg)] text-foreground/70 transition-colors hover:bg-[var(--surface-emphasis)] hover:text-primary" /> } > @@ -77,7 +77,7 @@ export function Sidebar({ type="button" aria-label="New chat" disabled={!firstAgentName || creatingConversationFor === firstAgentName} - className="flex size-9 items-center justify-center rounded-[var(--radius-lg)] text-foreground/70 transition-colors hover:bg-sidebar-accent disabled:cursor-not-allowed disabled:opacity-50" + className="flex size-9 items-center justify-center rounded-[var(--radius-lg)] text-foreground/70 transition-colors hover:bg-[var(--surface-emphasis)] hover:text-primary disabled:cursor-not-allowed disabled:opacity-50" onClick={() => { if (firstAgentName && creatingConversationFor !== firstAgentName) onNewConversation(firstAgentName); }} /> } @@ -107,7 +107,7 @@ export function Sidebar({ type="button" aria-label="Collapse sidebar" onClick={onToggleCollapse} - className="hidden size-8 items-center justify-center rounded-[var(--radius-lg)] text-foreground/60 transition-colors hover:bg-sidebar-accent md:flex" + className="hidden size-8 items-center justify-center rounded-[var(--radius-lg)] text-foreground/60 transition-colors hover:bg-[var(--surface-emphasis)] hover:text-primary md:flex" /> } > @@ -122,7 +122,7 @@ export function Sidebar({
) : transcript.messages.length === 0 ? ( -
+
Start a conversation

Send a message to begin.