feat(ui): support direct agent chat routes

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

@@ -0,0 +1,89 @@
+import type React from 'react';
+import { describe, it, expect, vi } from 'vite-plus/test';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { Sidebar } from './sidebar';
+
+vi.mock('@/components/brand-header', () => ({
+  BrandHeader: ({ compact }: { compact?: boolean }) => (
+    <div>{compact ? 'Brand compact' : 'Brand'}</div>
+  ),
+}));
+
+vi.mock('@/components/ui/tooltip', () => ({
+  Tooltip: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  TooltipContent: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  TooltipTrigger: ({
+    children,
+    render,
+  }: {
+    children?: React.ReactNode;
+    render?: React.ReactNode;
+  }) => <>{render ?? children}</>,
+}));
+
+function createSpritz(name: string) {
+  return {
+    metadata: { name, namespace: 'default' },
+    spec: { image: `example.com/${name}:latest` },
+    status: {
+      phase: 'Ready',
+      acp: { state: 'ready' },
+    },
+  };
+}
+
+function createConversation(name: string, title: string, spritzName: string) {
+  return {
+    metadata: { name },
+    spec: {
+      sessionId: `${name}-session`,
+      title,
+      spritzName,
+    },
+    status: {
+      bindingState: 'active',
+    },
+  };
+}
+
+const SidebarWithFocus = Sidebar as unknown as (
+  props: React.ComponentProps<typeof Sidebar> & {
+    focusedSpritzName?: string | null;
+  },
+) => React.ReactElement;
+
+describe('Sidebar', () => {
+  it('moves the focused agent to the top, highlights it, and collapses other agents', () => {
+    render(
+      <MemoryRouter>
+        <SidebarWithFocus
+          agents={[
+            {
+              spritz: createSpritz('alpha'),
+              conversations: [createConversation('alpha-conv', 'Alpha conversation', 'alpha')],
+            },
+            {
+              spritz: createSpritz('beta'),
+              conversations: [createConversation('beta-conv', 'Beta conversation', 'beta')],
+            },
+          ]}
+          selectedConversationId="beta-conv"
+          onSelectConversation={vi.fn()}
+          onNewConversation={vi.fn()}
+          collapsed={false}
+          onToggleCollapse={vi.fn()}
+          mobileOpen={false}
+          onCloseMobile={vi.fn()}
+          focusedSpritzName="beta"
+        />
+      </MemoryRouter>,
+    );
+
+    const agentHeaders = screen.getAllByRole('button', { name: / conversations$/i });
+    expect(agentHeaders[0]?.getAttribute('aria-label')).toBe('beta conversations');
+    expect(screen.getByRole('button', { name: 'beta conversations' }).getAttribute('aria-current')).toBe('true');
+    expect(screen.getByRole('button', { name: 'beta conversations' }).getAttribute('aria-expanded')).toBe('true');
+    expect(screen.getByRole('button', { name: 'alpha conversations' }).getAttribute('aria-expanded')).toBe('false');
+  });
+});

ui/src/components/acp/sidebar.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import {
   PlusIcon,
@@ -31,24 +31,46 @@ interface SidebarProps {
   onSelectConversation: (conversation: ConversationInfo) => void;
   onNewConversation: (spritzName: string) => void;
   creatingConversationFor?: string | null;
+  focusedSpritzName?: string | null;
+  focusedSpritz?: Spritz | null;
   collapsed: boolean;
   onToggleCollapse: () => void;
   mobileOpen: boolean;
   onCloseMobile: () => void;
 }
 
+function sortAgentGroupsForFocus(groups: AgentGroup[], focusedSpritzName?: string | null): AgentGroup[] {
+  if (!focusedSpritzName) return groups;
+  return [...groups].sort((left, right) => {
+    const leftFocused = left.spritz.metadata.name === focusedSpritzName;
+    const rightFocused = right.spritz.metadata.name === focusedSpritzName;
+    if (leftFocused === rightFocused) return 0;
+    return leftFocused ? -1 : 1;
+  });
+}
+
 export function Sidebar({
   agents,
   selectedConversationId,
   onSelectConversation,
   onNewConversation,
   creatingConversationFor,
+  focusedSpritzName,
+  focusedSpritz,
   collapsed,
   onToggleCollapse,
   mobileOpen,
   onCloseMobile,
 }: SidebarProps) {
-  const firstAgentName = agents.length > 0 ? agents[0].spritz.metadata.name : null;
+  const orderedAgents = sortAgentGroupsForFocus(agents, focusedSpritzName);
+  const firstAgentName = orderedAgents.length > 0 ? orderedAgents[0].spritz.metadata.name : null;
+  const focusMode = Boolean(focusedSpritzName);
+  const focusedAgentInList = Boolean(
+    focusedSpritzName && orderedAgents.some((group) => group.spritz.metadata.name === focusedSpritzName),
+  );
+  const showFocusedProvisioningSection = Boolean(
+    focusedSpritz && focusedSpritzName && !focusedAgentInList,
+  );
 
   /* ── Collapsed desktop sidebar ── */
   function renderCollapsed() {
@@ -143,19 +165,24 @@ export function Sidebar({
 
         {/* Conversation list */}
       <div role="list" aria-label="Conversations" className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto">
-          {agents.length === 0 && (
+          {showFocusedProvisioningSection && focusedSpritz && (
+            <FocusedAgentProvisioningSection spritz={focusedSpritz} />
+          )}
+          {orderedAgents.length === 0 && !showFocusedProvisioningSection && (
             <div className="p-6 text-center text-xs text-muted-foreground">
               No ACP-ready instances found.
             </div>
           )}
-          {agents.map((group) => (
+          {orderedAgents.map((group) => (
             <AgentSection
               key={group.spritz.metadata.name}
               group={group}
               selectedConversationId={selectedConversationId}
               onSelectConversation={(conv) => { onSelectConversation(conv); close(); }}
               onNewConversation={onNewConversation}
               creatingConversationFor={creatingConversationFor}
+              defaultExpanded={!focusMode || group.spritz.metadata.name === focusedSpritzName}
+              focused={group.spritz.metadata.name === focusedSpritzName}
             />
           ))}
         </div>
@@ -189,6 +216,20 @@ export function Sidebar({
   );
 }
 
+function FocusedAgentProvisioningSection({ spritz }: { spritz: Spritz }) {
+  const name = spritz.metadata.name;
+  const statusLine = String(spritz.status?.message || '').trim()
+    || [spritz.status?.phase, spritz.status?.acp?.state].filter(Boolean).join(' · ')
+    || 'Preparing chat';
+
+  return (
+    <div role="listitem" className="rounded-[var(--radius-lg)] border border-sidebar-border bg-sidebar-accent px-3 py-2">
+      <div className="text-xs font-medium text-foreground" aria-current="true">{name}</div>
+      <div className="mt-1 text-xs text-muted-foreground">{statusLine}</div>
+    </div>
+  );
+}
+
 /* ── Agent section with animated expand/collapse ── */
 
 function AgentSection({
@@ -197,26 +238,41 @@ function AgentSection({
   onSelectConversation,
   onNewConversation,
   creatingConversationFor,
+  defaultExpanded,
+  focused,
 }: {
   group: AgentGroup;
   selectedConversationId: string | null;
   onSelectConversation: (conversation: ConversationInfo) => void;
   onNewConversation: (spritzName: string) => void;
   creatingConversationFor?: string | null;
+  defaultExpanded: boolean;
+  focused: boolean;
 }) {
-  const [expanded, setExpanded] = useState(true);
+  const [expanded, setExpanded] = useState(defaultExpanded);
   const name = group.spritz.metadata.name;
   const creatingForThisAgent = creatingConversationFor === name;
 
+  useEffect(() => {
+    setExpanded(defaultExpanded);
+  }, [defaultExpanded]);
+
   return (
     <div role="listitem" className="flex flex-col gap-0.5">
       {/* Agent header */}
       <div className="group flex items-center gap-1">
         <button
           type="button"
           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-sidebar-accent"
+          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',
+            focused
+              ? 'bg-sidebar-accent text-foreground'
+              : 'text-muted-foreground',
+          )}
           onClick={() => setExpanded(!expanded)}
         >
           <ChevronRightIcon