feat(ui): apply branding tokens to chat surfaces

ui/src/components/acp/composer.tsx

@@ -77,7 +77,7 @@ export const Composer = forwardRef<ComposerHandle, ComposerProps>(function Compo
       <div className="mx-auto flex w-[90%] max-w-[880px] flex-col gap-2.5 px-0 py-3 sm:py-4">
         {/* Composer input */}
         <div
-          className="mx-3 flex cursor-text flex-col rounded-[var(--radius-2xl)] border border-border bg-background shadow-[0_2px_8px_rgba(15,23,42,0.08)] focus-within:border-primary sm:mx-0"
+          className="mx-3 flex cursor-text flex-col rounded-[var(--radius-2xl)] border border-border bg-background shadow-[0_6px_24px_color-mix(in_srgb,var(--primary)_10%,transparent)] focus-within:border-primary sm:mx-0"
           onClick={(e) => {
             if ((e.target as HTMLElement).closest('button')) return;
             textareaRef.current?.focus();

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(<ChatMessage message={message} />);
+
+    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');
+  });
 });

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 (
     <span className={cn('inline-flex items-center rounded-[var(--radius-2xl)] px-2 py-1 text-[11px] capitalize', colors)}>

ui/src/components/acp/sidebar.test.tsx

@@ -1,3 +1,40 @@
+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(
+      <Sidebar
+        agents={[{ spritz, conversations: [conversation] }]}
+        selectedConversationId="conv-1"
+        onSelectConversation={vi.fn()}
+        onNewConversation={vi.fn()}
+        collapsed={false}
+        onToggleCollapse={vi.fn()}
+        mobileOpen={false}
+        onCloseMobile={vi.fn()}
+      />,
+    );
+
+    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)]',
+    );
 import type React from 'react';
 import { describe, it, expect, vi } from 'vite-plus/test';
 import { render, screen } from '@testing-library/react';

ui/src/components/acp/sidebar.tsx

@@ -88,7 +88,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"
               />
             }
           >
@@ -103,7 +103,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); }}
               />
             }
@@ -133,7 +133,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"
               />
             }
           >
@@ -148,7 +148,7 @@ export function Sidebar({
           <button
             type="button"
             disabled={!firstAgentName || creatingConversationFor === firstAgentName}
-            className="flex w-full items-center gap-3 rounded-[var(--radius-lg)] px-3 py-2 text-[14px] text-foreground/80 transition-colors hover:bg-sidebar-accent disabled:cursor-not-allowed disabled:opacity-50"
+            className="flex w-full items-center gap-3 rounded-[var(--radius-lg)] px-3 py-2 text-[14px] text-foreground/80 transition-colors hover:bg-[var(--surface-emphasis)] hover:text-primary disabled:cursor-not-allowed disabled:opacity-50"
             onClick={() => {
               if (firstAgentName && creatingConversationFor !== firstAgentName) onNewConversation(firstAgentName);
               close();
@@ -160,7 +160,7 @@ export function Sidebar({
           <Link
             to="/create"
             onClick={close}
-            className="flex w-full items-center gap-3 rounded-[var(--radius-lg)] px-3 py-2 text-[14px] text-foreground/80 no-underline transition-colors hover:bg-sidebar-accent"
+            className="flex w-full items-center gap-3 rounded-[var(--radius-lg)] px-3 py-2 text-[14px] text-foreground/80 no-underline transition-colors hover:bg-[var(--surface-emphasis)] hover:text-primary"
           >
             <LayoutGridIcon aria-hidden="true" className="size-[18px] shrink-0" />
             <span>Instances</span>
@@ -299,6 +299,7 @@ function AgentSection({
           aria-expanded={expanded}
           aria-current={focused ? 'true' : undefined}
           aria-label={`${name} conversations`}
+          className="flex flex-1 items-center gap-2 rounded-[var(--radius-lg)] px-3 py-1.5 text-left text-xs font-medium text-muted-foreground transition-colors hover:bg-[var(--surface-emphasis)] hover:text-primary"
           data-active={focused ? 'true' : 'false'}
           className={cn(
             'flex flex-1 items-center gap-2 rounded-[var(--radius-lg)] px-3 py-1.5 text-left text-xs font-medium transition-colors hover:bg-sidebar-accent',
@@ -358,9 +359,9 @@ function AgentSection({
                     type="button"
                     aria-current={isActive ? 'true' : undefined}
                     className={cn(
-                      'flex w-full items-center gap-2 rounded-[var(--radius-lg)] px-8 py-1.5 text-left text-[13px] transition-colors hover:bg-sidebar-accent',
+                      'flex w-full items-center gap-2 rounded-[var(--radius-lg)] px-8 py-1.5 text-left text-[13px] transition-colors hover:bg-[var(--surface-emphasis)]',
                       isActive
-                        ? 'bg-sidebar-accent'
+                        ? 'bg-[var(--surface-emphasis)] text-primary shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--primary)_14%,transparent)]'
                         : 'bg-transparent',
                     )}
                     onClick={() => onSelectConversation(conv)}

ui/src/pages/chat.test.tsx

@@ -1176,4 +1176,16 @@ describe('ChatPage draft persistence', () => {
     await waitFor(() => expect(localStorage.getItem('spritz:chat-drafts') || '').toContain('retry me later'));
     expect((screen.getByLabelText('Message input') as HTMLTextAreaElement).value).toBe('');
   });
+
+  it('uses the branded empty-state shell for a selected conversation with no messages', async () => {
+    await renderChat('/c/covo/conv-1');
+
+    const title = screen.getByText('Start a conversation');
+    const card = title.parentElement as HTMLDivElement;
+
+    expect(card.className).toContain('bg-[var(--surface-emphasis)]');
+    expect(card.className).toContain(
+      'border-[color-mix(in_srgb,var(--primary)_12%,var(--border))]',
+    );
+  });
 });

ui/src/pages/chat.tsx

@@ -509,7 +509,7 @@ export function ChatPage() {
                   <button
                     key={name}
                     type="button"
-                    className="inline-flex shrink-0 items-center gap-1.5 rounded-[var(--radius-2xl)] border border-border bg-background px-2.5 py-1.5 text-xs transition-colors hover:bg-muted"
+                    className="inline-flex shrink-0 items-center gap-1.5 rounded-[var(--radius-2xl)] border border-[color-mix(in_srgb,var(--primary)_14%,var(--border))] bg-[var(--surface-emphasis)] px-2.5 py-1.5 text-xs text-primary transition-colors hover:bg-[color-mix(in_srgb,var(--primary)_16%,var(--background))]"
                     title={description}
                     onClick={() => composerRef.current?.fillText(`/${name} `)}
                   >
@@ -542,7 +542,7 @@ export function ChatPage() {
               </div>
             )
           ) : transcript.messages.length === 0 ? (
-            <div className="m-auto flex max-w-[540px] flex-col gap-1.5 text-center">
+            <div className="m-auto flex max-w-[540px] flex-col gap-1.5 rounded-[var(--radius-2xl)] border border-[color-mix(in_srgb,var(--primary)_12%,var(--border))] bg-[var(--surface-emphasis)] px-6 py-7 text-center shadow-[0_10px_30px_color-mix(in_srgb,var(--primary)_8%,transparent)]">
               <strong className="block text-base font-medium">Start a conversation</strong>
               <p className="m-0 text-sm text-muted-foreground">Send a message to begin.</p>
             </div>