{agents.flatMap((group) =>
group.conversations.map((conversation) => (
@@ -256,11 +266,50 @@ const CONVERSATIONS = [
},
];
+function createSpritz(
+ overrides: {
+ metadata?: Partial<{ name: string; namespace: string }>;
+ spec?: Partial<{ image: string }>;
+ status?: Partial<{
+ phase: string;
+ message: string;
+ acp: {
+ state: string;
+ agentInfo?: {
+ name?: string;
+ title?: string;
+ version?: string;
+ };
+ };
+ }>;
+ } = {},
+) {
+ return {
+ metadata: {
+ name: 'covo',
+ namespace: 'default',
+ ...(overrides.metadata || {}),
+ },
+ spec: {
+ image: 'example.com/covo:latest',
+ ...(overrides.spec || {}),
+ },
+ status: {
+ phase: 'Ready',
+ acp: {
+ state: 'ready',
+ agentInfo: { version: '1.0.0' },
+ },
+ ...(overrides.status || {}),
+ },
+ };
+}
+
function createConversation(
overrides: Partial<(typeof CONVERSATIONS)[number]> & {
metadata?: Partial<(typeof CONVERSATIONS)[number]['metadata']>;
spec?: Partial<(typeof CONVERSATIONS)[number]['spec']>;
- status?: Partial<(typeof CONVERSATIONS)[number]['status']>;
+ status?: Partial<(typeof CONVERSATIONS)[number]['status'] & { lastActivityAt?: string }>;
} = {},
) {
return {
@@ -278,17 +327,16 @@ function createConversation(
};
}
-function setupRequestMock(conversations = CONVERSATIONS) {
+function setupRequestMock({
+ spritzes = [createSpritz()],
+ conversations = CONVERSATIONS,
+}: {
+ spritzes?: ReturnType
[];
+ conversations?: typeof CONVERSATIONS;
+} = {}) {
requestMock.mockImplementation((path: string, options?: { method?: string }) => {
if (path === '/spritzes') {
- return Promise.resolve({
- items: [
- {
- metadata: { name: 'covo' },
- status: { phase: 'Ready', acp: { state: 'ready', agentInfo: { version: '1.0.0' } } },
- },
- ],
- });
+ return Promise.resolve({ items: spritzes });
}
if (path === '/acp/conversations?spritz=covo') {
return Promise.resolve({ items: conversations });
@@ -309,7 +357,7 @@ function setupBootstrapRetryMock(conversationId: string, title: string) {
spec: { sessionId: '', title, spritzName: 'covo' },
status: { bindingState: 'pending' },
});
- setupRequestMock([conversation]);
+ setupRequestMock({ conversations: [conversation] });
requestMock.mockImplementation((path: string, options?: { method?: string }) => {
if (path === '/spritzes') {
return Promise.resolve({
@@ -346,7 +394,7 @@ function setupBootstrapTerminalFailureMock(conversationId: string, title: string
spec: { sessionId: '', title, spritzName: 'covo' },
status: { bindingState: 'pending' },
});
- setupRequestMock([conversation]);
+ setupRequestMock({ conversations: [conversation] });
requestMock.mockImplementation((path: string, options?: { method?: string }) => {
if (path === '/spritzes') {
return Promise.resolve({
@@ -378,12 +426,18 @@ function createDeferred() {
return { promise, resolve, reject };
}
-async function renderChat(route: string, rawConfig?: RawSpritzConfig) {
+function LocationDisplay() {
+ const location = useLocation();
+ return {location.pathname}
;
+}
+
+function renderChatPage(route: string, rawConfig?: RawSpritzConfig) {
const resolvedConfig = rawConfig ? resolveConfig({ ...config, ...rawConfig }) : config;
- render(
+ return render(
+
} />
} />
@@ -393,12 +447,17 @@ async function renderChat(route: string, rawConfig?: RawSpritzConfig) {
,
);
+}
+
+async function renderChat(route: string, rawConfig?: RawSpritzConfig) {
+ renderChatPage(route, rawConfig);
await screen.findByLabelText('Message input');
await waitFor(() => expect((screen.getByLabelText('Message input') as HTMLTextAreaElement).disabled).toBe(false));
}
describe('ChatPage draft persistence', () => {
beforeEach(() => {
+ vi.useRealTimers();
Object.defineProperty(globalThis, 'localStorage', { value: createMockStorage(), writable: true });
Object.defineProperty(globalThis, 'sessionStorage', { value: createMockStorage(), writable: true });
Object.defineProperty(window.HTMLElement.prototype, 'scrollIntoView', {
@@ -596,6 +655,140 @@ describe('ChatPage draft persistence', () => {
});
});
+ it('shows a provisioning state for direct agent chat routes before ACP is ready', async () => {
+ setupRequestMock({
+ spritzes: [
+ createSpritz({
+ status: {
+ phase: 'Provisioning',
+ message: 'Allocating the instance.',
+ acp: { state: 'starting' },
+ },
+ }),
+ ],
+ conversations: [],
+ });
+
+ renderChatPage('/c/covo');
+
+ expect(await screen.findByText('Your agent is being created now')).toBeTruthy();
+ expect(screen.getByText('We will start a chat automatically as soon as it is ready.')).toBeTruthy();
+ expect(screen.getAllByText('Allocating the instance.').length).toBeGreaterThan(0);
+ expect(screen.getByTestId('sidebar-focused-spritz').textContent).toBe('covo');
+ });
+
+ it('shows a provisioning state when the route spritz is only resolvable by direct lookup', async () => {
+ requestMock.mockImplementation((path: string) => {
+ if (path === '/spritzes') {
+ return Promise.resolve({ items: [] });
+ }
+ if (path === '/spritzes/zeno-ken-bison') {
+ return Promise.resolve(
+ createSpritz({
+ metadata: { name: 'zeno-ken-bison' },
+ status: {
+ phase: 'Provisioning',
+ message: 'Creating your agent instance.',
+ acp: { state: 'starting' },
+ },
+ }),
+ );
+ }
+ return Promise.resolve({});
+ });
+
+ renderChatPage('/c/zeno-ken-bison');
+
+ expect(await screen.findByText('Your agent is being created now')).toBeTruthy();
+ expect(screen.getAllByText('Creating your agent instance.').length).toBeGreaterThan(0);
+ expect(screen.queryByText('Select a conversation or create a new instance.')).toBeNull();
+ });
+
+ it('automatically creates and opens a conversation once a provisioning agent becomes ready', async () => {
+ const createdConversation = createConversation({
+ metadata: { name: 'conv-created' },
+ spec: { sessionId: 'sess-created', title: 'Created automatically', spritzName: 'covo' },
+ status: { bindingState: 'active', lastActivityAt: '2026-03-27T10:05:00Z' },
+ });
+ let spritzRequestCount = 0;
+ requestMock.mockImplementation((path: string, options?: { method?: string }) => {
+ if (path === '/spritzes') {
+ spritzRequestCount += 1;
+ return Promise.resolve({
+ items: [
+ spritzRequestCount === 1
+ ? createSpritz({
+ status: {
+ phase: 'Provisioning',
+ message: 'Allocating the instance.',
+ acp: { state: 'starting' },
+ },
+ })
+ : createSpritz(),
+ ],
+ });
+ }
+ if (path === '/acp/conversations?spritz=covo') {
+ return Promise.resolve({ items: [] });
+ }
+ if (path === '/acp/conversations' && options?.method === 'POST') {
+ return Promise.resolve(createdConversation);
+ }
+ return Promise.resolve({});
+ });
+ const realSetTimeout = window.setTimeout.bind(window);
+ const setTimeoutSpy = vi.spyOn(window, 'setTimeout').mockImplementation(((
+ handler: TimerHandler,
+ timeout?: number,
+ ...args: unknown[]
+ ) => {
+ if (timeout === 2000 && typeof handler === 'function') {
+ queueMicrotask(() => {
+ handler(...args as []);
+ });
+ return 1 as unknown as number;
+ }
+ return realSetTimeout(handler, timeout, ...(args as []));
+ }) as typeof window.setTimeout);
+
+ try {
+ renderChatPage('/c/covo');
+ await waitFor(() => {
+ expect(requestMock).toHaveBeenCalledWith(
+ '/acp/conversations',
+ expect.objectContaining({ method: 'POST' }),
+ );
+ });
+ await waitFor(() => {
+ expect((screen.getByTestId('selected-conversation') as HTMLDivElement).textContent).toBe('conv-created');
+ });
+ expect((screen.getByTestId('selected-conversation') as HTMLDivElement).textContent).toBe('conv-created');
+ } finally {
+ setTimeoutSpy.mockRestore();
+ }
+ });
+
+ it('opens the latest conversation when an agent chat route omits the conversation id', async () => {
+ setupRequestMock({
+ conversations: [
+ createConversation({
+ metadata: { name: 'conv-older' },
+ spec: { sessionId: 'sess-older', title: 'Older conversation', spritzName: 'covo' },
+ status: { bindingState: 'active', lastActivityAt: '2026-03-26T08:00:00Z' },
+ }),
+ createConversation({
+ metadata: { name: 'conv-latest' },
+ spec: { sessionId: 'sess-latest', title: 'Latest conversation', spritzName: 'covo' },
+ status: { bindingState: 'active', lastActivityAt: '2026-03-27T09:30:00Z' },
+ }),
+ ],
+ });
+
+ await renderChat('/c/covo');
+
+ expect((screen.getByTestId('selected-conversation') as HTMLDivElement).textContent).toBe('conv-latest');
+ });
+
it('restores the draft after remounting the same conversation route', async () => {
const user = userEvent.setup();
const firstRender = render(
diff --git a/ui/src/pages/chat.tsx b/ui/src/pages/chat.tsx
index 6a9e4fa..2a4d27e 100644
--- a/ui/src/pages/chat.tsx
+++ b/ui/src/pages/chat.tsx
@@ -27,6 +27,31 @@ interface AgentGroup {
conversations: ConversationInfo[];
}
+const PROVISIONING_POLL_INTERVAL_MS = 2000;
+
+function isSpritzChatReady(spritz: Spritz | null | undefined): boolean {
+ if (!spritz) return false;
+ return spritz.status?.phase === 'Ready' && spritz.status?.acp?.state === 'ready';
+}
+
+function getConversationActivityTime(conversation: ConversationInfo): number {
+ const raw = String(conversation.status?.lastActivityAt || '').trim();
+ if (!raw) return Number.NEGATIVE_INFINITY;
+ const parsed = Date.parse(raw);
+ return Number.isFinite(parsed) ? parsed : Number.NEGATIVE_INFINITY;
+}
+
+function sortConversationsByRecency(conversations: ConversationInfo[]): ConversationInfo[] {
+ return [...conversations].sort((left, right) => {
+ const diff = getConversationActivityTime(right) - getConversationActivityTime(left);
+ return Number.isFinite(diff) ? diff : 0;
+ });
+}
+
+function getLatestConversation(conversations: ConversationInfo[]): ConversationInfo | null {
+ return sortConversationsByRecency(conversations)[0] || null;
+}
+
export function ChatPage() {
const { name, conversationId: urlConversationId } = useParams<{ name: string; conversationId: string }>();
const navigate = useNavigate();
@@ -34,6 +59,7 @@ export function ChatPage() {
const { showNotice } = useNotice();
const [agents, setAgents] = useState([]);
+ const [spritzes, setSpritzes] = useState([]);
const [loading, setLoading] = useState(true);
const [selectedConversation, setSelectedConversation] = useState(null);
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
@@ -44,20 +70,36 @@ export function ChatPage() {
const messagesEndRef = useRef(null);
const composerRef = useRef(null);
const selectedConversationRef = useRef(null);
+ const autoCreatingConversationForRef = useRef(null);
selectedConversationRef.current = selectedConversation;
const selectedSpritzName = selectedConversation?.spec?.spritzName || name || '';
const selectedConversationId = selectedConversation?.metadata?.name || '';
+ const focusedSpritz = name
+ ? spritzes.find((spritz) => spritz.metadata.name === name) || null
+ : null;
+ const provisioningSpritz = focusedSpritz && !isSpritzChatReady(focusedSpritz)
+ ? focusedSpritz
+ : null;
// Fetch agents and conversations
const fetchAgents = useCallback(async () => {
try {
- const spritzes = await request<{ items: Spritz[] }>('/spritzes');
- const items = spritzes?.items || [];
- const acpReady = items.filter(
- (s) => s.status?.phase === 'Ready' && s.status?.acp?.state === 'ready',
- );
+ const spritzList = await request<{ items: Spritz[] }>('/spritzes');
+ let items = spritzList?.items || [];
+ if (name && !items.some((spritz) => spritz.metadata.name === name)) {
+ try {
+ const routeSpritz = await request(`/spritzes/${encodeURIComponent(name)}`);
+ if (routeSpritz?.metadata?.name === name) {
+ items = [routeSpritz, ...items];
+ }
+ } catch {
+ // Fall back to the list result when the route lookup is unavailable.
+ }
+ }
+ setSpritzes(items);
+ const acpReady = items.filter((spritz) => isSpritzChatReady(spritz));
const groups: AgentGroup[] = await Promise.all(
acpReady.map(async (spritz) => {
@@ -65,7 +107,10 @@ export function ChatPage() {
const convData = await request<{ items: ConversationInfo[] }>(
`/acp/conversations?spritz=${encodeURIComponent(spritz.metadata.name)}`,
);
- return { spritz, conversations: convData?.items || [] };
+ return {
+ spritz,
+ conversations: sortConversationsByRecency(convData?.items || []),
+ };
} catch {
return { spritz, conversations: [] };
}
@@ -74,43 +119,75 @@ export function ChatPage() {
setAgents(groups);
- // Auto-select or auto-create conversation if name param matches a spritz
- if (name) {
- for (const group of groups) {
- if (group.spritz.metadata.name === name) {
- // If a specific conversation was requested via URL, prefer it
- if (urlConversationId) {
- const match = group.conversations.find((c) => c.metadata.name === urlConversationId);
- if (match) {
- setSelectedConversation(match);
- break;
- }
- }
- if (group.conversations.length > 0) {
- const conv = group.conversations[0];
- setSelectedConversation(conv);
- navigate(chatConversationPath(name, conv.metadata.name), { replace: true });
- } else {
- // Auto-create a conversation for this spritz
- try {
- const conv = await request('/acp/conversations', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ spritzName: name }),
- });
- if (conv) {
- group.conversations.push(conv);
- setSelectedConversation(conv);
- navigate(chatConversationPath(name, conv.metadata.name), { replace: true });
- }
- } catch {
- // Failed to auto-create, user can do it manually
- }
- }
- break;
- }
+ if (!name) {
+ return;
+ }
+
+ const routeSpritz = items.find((spritz) => spritz.metadata.name === name);
+ if (!routeSpritz) {
+ setSelectedConversation(null);
+ return;
+ }
+ if (!isSpritzChatReady(routeSpritz)) {
+ setSelectedConversation(null);
+ return;
+ }
+
+ const group = groups.find((entry) => entry.spritz.metadata.name === name);
+ if (!group) {
+ setSelectedConversation(null);
+ return;
+ }
+
+ if (urlConversationId) {
+ const match = group.conversations.find((conversation) => conversation.metadata.name === urlConversationId);
+ if (match) {
+ setSelectedConversation(match);
+ return;
}
}
+
+ const latestConversation = getLatestConversation(group.conversations);
+ if (latestConversation) {
+ setSelectedConversation(latestConversation);
+ if (urlConversationId !== latestConversation.metadata.name) {
+ navigate(chatConversationPath(name, latestConversation.metadata.name), { replace: true });
+ }
+ return;
+ }
+
+ if (autoCreatingConversationForRef.current === name) {
+ return;
+ }
+
+ autoCreatingConversationForRef.current = name;
+ setCreatingConversationFor(name);
+ try {
+ const conv = await request('/acp/conversations', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ spritzName: name }),
+ });
+ if (conv) {
+ setAgents((currentGroups) =>
+ currentGroups.map((currentGroup) =>
+ currentGroup.spritz.metadata.name === name
+ ? {
+ ...currentGroup,
+ conversations: sortConversationsByRecency([...currentGroup.conversations, conv]),
+ }
+ : currentGroup,
+ ),
+ );
+ setSelectedConversation(conv);
+ navigate(chatConversationPath(name, conv.metadata.name), { replace: true });
+ }
+ } catch (err) {
+ showNotice(err instanceof Error ? err.message : 'Failed to start a conversation.');
+ } finally {
+ autoCreatingConversationForRef.current = null;
+ setCreatingConversationFor((current) => (current === name ? null : current));
+ }
} catch (err) {
showNotice(err instanceof Error ? err.message : 'Failed to load agents.');
} finally {
@@ -122,6 +199,22 @@ export function ChatPage() {
fetchAgents();
}, [fetchAgents]);
+ useEffect(() => {
+ if (!provisioningSpritz) {
+ return;
+ }
+ const timer = window.setTimeout(() => {
+ void fetchAgents();
+ }, PROVISIONING_POLL_INTERVAL_MS);
+ return () => window.clearTimeout(timer);
+ }, [
+ fetchAgents,
+ provisioningSpritz?.metadata.name,
+ provisioningSpritz?.status?.phase,
+ provisioningSpritz?.status?.acp?.state,
+ provisioningSpritz?.status?.message,
+ ]);
+
const applyConversationTitle = useCallback((conversationId: string, title?: string | null) => {
const normalized = String(title || '').trim();
if (!conversationId || !normalized) return;
@@ -167,6 +260,16 @@ export function ChatPage() {
setComposerText(readChatDraft(selectedSpritzName, selectedConversationId) || '');
}, [selectedSpritzName, selectedConversationId]);
+ useEffect(() => {
+ if (!name || !selectedConversation) return;
+ const conversationSpritzName = selectedConversation.spec?.spritzName || name;
+ const targetConversationId = selectedConversation.metadata?.name || '';
+ if (conversationSpritzName !== name || !targetConversationId || urlConversationId === targetConversationId) {
+ return;
+ }
+ navigate(chatConversationPath(name, targetConversationId), { replace: true });
+ }, [name, navigate, selectedConversation, urlConversationId]);
+
useEffect(() => {
if (!selectedSpritzName || !selectedConversationId) return;
writeChatDraft(selectedSpritzName, selectedConversationId, composerText);
@@ -300,6 +403,8 @@ export function ChatPage() {
onSelectConversation={handleSelectConversation}
onNewConversation={handleNewConversation}
creatingConversationFor={creatingConversationFor}
+ focusedSpritzName={name || null}
+ focusedSpritz={focusedSpritz}
collapsed={sidebarCollapsed}
onToggleCollapse={() => setSidebarCollapsed(!sidebarCollapsed)}
mobileOpen={mobileMenuOpen}
@@ -320,7 +425,10 @@ export function ChatPage() {
- {selectedConversation?.spec?.title || selectedConversation?.metadata?.name || 'Select a conversation'}
+ {selectedConversation?.spec?.title
+ || selectedConversation?.metadata?.name
+ || focusedSpritz?.metadata?.name
+ || 'Select a conversation'}
{selectedConversation && (() => {
const spritzName = selectedConversation.spec?.spritzName || '';
@@ -331,6 +439,11 @@ export function ChatPage() {
{parts.join(' · ')}
) : null;
})()}
+ {!selectedConversation && provisioningSpritz && (
+
+ {provisioningSpritz.status?.message || 'Preparing the agent chat...'}
+
+ )}
@@ -394,9 +507,23 @@ export function ChatPage() {
{/* Messages area */}
{!selectedConversation ? (
-
- Select a conversation or create a new instance.
-
+ provisioningSpritz ? (
+
+
Your agent is being created now
+
+ We will start a chat automatically as soon as it is ready.
+
+ {provisioningSpritz.status?.message && (
+
+ {provisioningSpritz.status.message}
+
+ )}
+
+ ) : (
+
+ Select a conversation or create a new instance.
+
+ )
) : transcript.messages.length === 0 ? (
Start a conversation