feat(chat): OpenClaw-inspired chat UI: working folder, per-model thinking, real thread titles, richer sidebar and run-state cues

app/src/components/assistant-ui/activity-group.tsx

@@ -16,23 +16,47 @@ import {
   ToolGroupTrigger,
 } from '@/components/assistant-ui/elements/tool-group';
 import { OpenHumanReasoningGroup } from '@/components/assistant-ui/reasoning-group';
+import { formatElapsed } from '@/components/assistant-ui/utils/task';
+import { useT } from '@/lib/i18n/I18nContext';
 import { type MessagePrimitive, useAuiState } from '@assistant-ui/react';
 import { type FC, type PropsWithChildren, useState } from 'react';
 
 export type ActivityGroupPart = MessagePrimitive.GroupedParts.GroupPart;
 
+type Translate = (key: string) => string;
+
 /**
  * Trigger text for a run of reasoning and tool calls.
  *
  * Tool calls are what the reader counts; reasoning is either there or not, so
  * it is named rather than counted. The group only exists when it holds at
  * least one of the two, so the empty fallback is never shown in practice.
+ *
+ * `workedMs`, when known, turns a settled group into OpenClaw's turn receipt:
+ * "Worked for 42s · 3 tool calls".
  */
-export function activityGroupLabel(reasoningCount: number, toolCount: number): string {
-  const tools = toolCount > 0 ? `${toolCount} tool ${toolCount === 1 ? 'call' : 'calls'}` : null;
-  if (reasoningCount > 0 && tools) return `Reasoning · ${tools}`;
-  if (reasoningCount > 0) return 'Reasoning';
-  return tools ?? 'Activity';
+export function activityGroupLabel(
+  reasoningCount: number,
+  toolCount: number,
+  t: Translate,
+  workedMs?: number
+): string {
+  const tools =
+    toolCount > 0
+      ? t(toolCount === 1 ? 'chat.tools.callOne' : 'chat.tools.callOther').replace(
+          '{count}',
+          String(toolCount)
+        )
+      : null;
+  if (workedMs !== undefined && tools) {
+    return t('chat.tools.workedFor')
+      .replace('{duration}', formatElapsed(workedMs))
+      .replace('{calls}', tools);
+  }
+  if (reasoningCount > 0 && tools)
+    return t('chat.tools.reasoningWithCalls').replace('{calls}', tools);
+  if (reasoningCount > 0) return t('chat.tools.reasoning');
+  return tools ?? t('chat.tools.activity');
 }
 
 /**
@@ -73,6 +97,18 @@ export const ActivityGroup: FC<PropsWithChildren<{ group: ActivityGroupPart }>>
   const requiresAction = useAuiState(s =>
     indices.some(i => s.message.parts[i]?.status?.type === 'requires-action')
   );
+  // The turn's wall time (`chat_done.timing.total_ms`), credited to this group
+  // only when it holds every tool call in the message: a message with several
+  // activity groups cannot say which share of the time each one took.
+  const messageToolCount = useAuiState(
+    s => s.message.parts.filter(part => part?.type === 'tool-call').length
+  );
+  const totalStreamTime = useAuiState(
+    s =>
+      (s.message.metadata as { timing?: { totalStreamTime?: number } } | undefined)?.timing
+        ?.totalStreamTime
+  );
+  const { t } = useT();
   const [userOpen, setUserOpen] = useState<boolean | null>(null);
 
   const running = group.status.type === 'running' || isTail;
@@ -88,7 +124,12 @@ export const ActivityGroup: FC<PropsWithChildren<{ group: ActivityGroupPart }>>
     <ToolGroupRoot variant="ghost" open={userOpen ?? live} onOpenChange={setUserOpen}>
       <ToolGroupTrigger
         count={toolCount}
-        label={activityGroupLabel(reasoningCount, toolCount)}
+        label={activityGroupLabel(
+          reasoningCount,
+          toolCount,
+          t,
+          !live && toolCount === messageToolCount ? totalStreamTime : undefined
+        )}
         active={running}
       />
       <ToolGroupContent>{children}</ToolGroupContent>

app/src/components/assistant-ui/elements/subagent-list.tsx

@@ -6,6 +6,9 @@
  * Changes from upstream:
  * - `cn` import path (`@/components/assistant-ui/lib/utils`).
  * - `../utils/range` -> `@/components/assistant-ui/utils/range`.
+ * - `SubagentItem.done`: an agent's own finished flag. Upstream marks the
+ *   first `completedCount` rows done, which is only right when workers finish
+ *   in list order; parallel workers do not.
  * No hard-coded user-facing copy — `agent.name`/`agent.model` are
  * caller-supplied props, so there is nothing to route through `useT()` here.
  */
@@ -19,6 +22,8 @@ import { mono, paper } from './surfaces';
 export interface SubagentItem {
   name: string;
   model: string;
+  /** This agent has finished; falls back to `index < completedCount` when absent. */
+  done?: boolean;
 }
 
 export function SubagentList({
@@ -45,7 +50,7 @@ export function SubagentList({
       className={cn('flex min-h-[14.5rem] w-full max-w-xs flex-col gap-2', className)}
       {...props}>
       {agents.map((agent, index) => {
-        const done = index < completedCount;
+        const done = agent.done ?? index < completedCount;
         const width = progress[index] ?? 0;
         const percentage = pct(width, 100);
 

app/src/components/assistant-ui/elements/todo-list.test.tsx

@@ -0,0 +1,86 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { type TodoItem, todoProgress, TodoProgressCard, TodoReceipt } from './todo-list';
+
+const items: TodoItem[] = [
+  { id: '1', text: 'Read the spec', status: 'done' },
+  { id: '2', text: 'Write the code', status: 'active' },
+  { id: '3', text: 'Ship it', status: 'pending' },
+];
+
+describe('todoProgress', () => {
+  it('names the first active step and its position', () => {
+    const progress = todoProgress(items);
+    expect(progress).toMatchObject({ done: 1, total: 3, position: 2, anyActive: true });
+    expect(progress.current?.text).toBe('Write the code');
+  });
+
+  it('falls back to the first pending step, then the last done one', () => {
+    const pending = todoProgress([
+      { id: '1', text: 'A', status: 'done' },
+      { id: '2', text: 'B', status: 'pending' },
+    ]);
+    expect(pending.current?.text).toBe('B');
+    const finished = todoProgress([
+      { id: '1', text: 'A', status: 'done' },
+      { id: '2', text: 'B', status: 'done' },
+    ]);
+    expect(finished).toMatchObject({ allDone: true, position: 2 });
+    expect(finished.current?.text).toBe('B');
+  });
+
+  it('handles an empty list', () => {
+    expect(todoProgress([])).toMatchObject({ total: 0, position: 0, allDone: false });
+  });
+});
+
+describe('TodoProgressCard', () => {
+  const labels = { title: 'Todos', completedLabel: 'Completed', countLabel: '1 of 3' };
+
+  it('collapsed shows the current step and pos/total, not the list', () => {
+    render(<TodoProgressCard items={items} open={false} onOpenChange={vi.fn()} {...labels} />);
+    const toggle = screen.getByRole('button', { name: 'Todos' });
+    expect(toggle).toHaveAttribute('aria-expanded', 'false');
+    expect(toggle).toHaveTextContent('Write the code');
+    expect(screen.getByTestId('todo-progress-count')).toHaveTextContent('2/3');
+    // The steps stay mounted but hidden, so they take no space and are not visible.
+    expect(screen.getByText('Ship it')).not.toBeVisible();
+  });
+
+  it('expanded shows the count label and every step', () => {
+    const onOpenChange = vi.fn();
+    render(<TodoProgressCard items={items} open onOpenChange={onOpenChange} {...labels} />);
+    expect(screen.getByTestId('todo-progress-count')).toHaveTextContent('1 of 3');
+    expect(screen.getByText('Ship it')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Todos' }));
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it('says completed once every step is done', () => {
+    render(
+      <TodoProgressCard
+        items={items.map(item => ({ ...item, status: 'done' as const }))}
+        open={false}
+        onOpenChange={vi.fn()}
+        {...labels}
+      />
+    );
+    expect(screen.getByTestId('todo-progress-count')).toHaveTextContent('Completed');
+  });
+});
+
+describe('TodoReceipt', () => {
+  it('is one line that expands to the snapshot', () => {
+    const onOpenChange = vi.fn();
+    const { rerender } = render(
+      <TodoReceipt items={items} label="Progress 1/3" open={false} onOpenChange={onOpenChange} />
+    );
+    expect(screen.getByRole('button')).toHaveTextContent('Progress 1/3 · Write the code');
+    expect(screen.queryByText('Ship it')).toBeNull();
+    fireEvent.click(screen.getByRole('button'));
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+    rerender(<TodoReceipt items={items} label="Progress 1/3" open onOpenChange={onOpenChange} />);
+    expect(screen.getByText('Ship it')).toBeInTheDocument();
+  });
+});