refactor(chat): execution graph optimize (#873)

Co-authored-by: Haze <hazeone@users.noreply.github.com>

tests/unit/chat-event-dedupe.test.ts

@@ -0,0 +1,140 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { extractText } from '@/pages/Chat/message-utils';
+
+const { gatewayRpcMock, hostApiFetchMock, agentsState } = vi.hoisted(() => ({
+  gatewayRpcMock: vi.fn(),
+  hostApiFetchMock: vi.fn(),
+  agentsState: {
+    agents: [] as Array<Record<string, unknown>>,
+  },
+}));
+
+vi.mock('@/stores/gateway', () => ({
+  useGatewayStore: {
+    getState: () => ({
+      status: { state: 'running', port: 18789 },
+      rpc: gatewayRpcMock,
+    }),
+  },
+}));
+
+vi.mock('@/stores/agents', () => ({
+  useAgentsStore: {
+    getState: () => agentsState,
+  },
+}));
+
+vi.mock('@/lib/host-api', () => ({
+  hostApiFetch: (...args: unknown[]) => hostApiFetchMock(...args),
+}));
+
+describe('chat event dedupe', () => {
+  beforeEach(() => {
+    vi.resetModules();
+    window.localStorage.clear();
+    gatewayRpcMock.mockReset();
+    hostApiFetchMock.mockReset();
+    agentsState.agents = [];
+  });
+
+  it('keeps processing delta events without seq for the same run', async () => {
+    const { useChatStore } = await import('@/stores/chat');
+
+    useChatStore.setState({
+      currentSessionKey: 'agent:main:main',
+      currentAgentId: 'main',
+      sessions: [{ key: 'agent:main:main' }],
+      messages: [],
+      sessionLabels: {},
+      sessionLastActivity: {},
+      sending: false,
+      activeRunId: null,
+      streamingText: '',
+      streamingMessage: null,
+      streamingTools: [],
+      pendingFinal: true,
+      lastUserMessageAt: null,
+      pendingToolImages: [],
+      error: null,
+      loading: false,
+      thinkingLevel: null,
+    });
+
+    useChatStore.getState().handleChatEvent({
+      state: 'delta',
+      runId: 'run-no-seq',
+      sessionKey: 'agent:main:main',
+      message: {
+        role: 'assistant',
+        id: 'reply-stream',
+        content: [{ type: 'text', text: 'Checked X.' }],
+      },
+    });
+
+    useChatStore.getState().handleChatEvent({
+      state: 'delta',
+      runId: 'run-no-seq',
+      sessionKey: 'agent:main:main',
+      message: {
+        role: 'assistant',
+        id: 'reply-stream',
+        content: [
+          { type: 'text', text: 'Checked X.' },
+          { type: 'text', text: 'Checked X. Here is the summary.' },
+        ],
+      },
+    });
+
+    expect(extractText(useChatStore.getState().streamingMessage)).toBe('Checked X. Here is the summary.');
+  });
+
+  it('still dedupes repeated delta events when seq matches', async () => {
+    const { useChatStore } = await import('@/stores/chat');
+
+    useChatStore.setState({
+      currentSessionKey: 'agent:main:main',
+      currentAgentId: 'main',
+      sessions: [{ key: 'agent:main:main' }],
+      messages: [],
+      sessionLabels: {},
+      sessionLastActivity: {},
+      sending: false,
+      activeRunId: null,
+      streamingText: '',
+      streamingMessage: null,
+      streamingTools: [],
+      pendingFinal: false,
+      lastUserMessageAt: null,
+      pendingToolImages: [],
+      error: null,
+      loading: false,
+      thinkingLevel: null,
+    });
+
+    useChatStore.getState().handleChatEvent({
+      state: 'delta',
+      runId: 'run-with-seq',
+      sessionKey: 'agent:main:main',
+      seq: 3,
+      message: {
+        role: 'assistant',
+        id: 'reply-stream',
+        content: [{ type: 'text', text: 'first version' }],
+      },
+    });
+
+    useChatStore.getState().handleChatEvent({
+      state: 'delta',
+      runId: 'run-with-seq',
+      sessionKey: 'agent:main:main',
+      seq: 3,
+      message: {
+        role: 'assistant',
+        id: 'reply-stream',
+        content: [{ type: 'text', text: 'duplicate version should be ignored' }],
+      },
+    });
+
+    expect(extractText(useChatStore.getState().streamingMessage)).toBe('first version');
+  });
+});

tests/unit/chat-message.test.tsx

@@ -23,7 +23,6 @@ describe('ChatMessage attachment dedupe', () => {
     render(
       <ChatMessage
         message={message}
-        showThinking={false}
         suppressProcessAttachments
       />,
     );

tests/unit/chat-page-execution-graph.test.tsx

@@ -0,0 +1,180 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+
+const hostApiFetchMock = vi.fn();
+
+const { gatewayState, agentsState } = vi.hoisted(() => ({
+  gatewayState: {
+    status: { state: 'running', port: 18789 },
+  },
+  agentsState: {
+    agents: [{ id: 'main', name: 'main' }] as Array<Record<string, unknown>>,
+    fetchAgents: vi.fn(),
+  },
+}));
+
+vi.mock('@/stores/gateway', () => ({
+  useGatewayStore: (selector: (state: typeof gatewayState) => unknown) => selector(gatewayState),
+}));
+
+vi.mock('@/stores/agents', () => ({
+  useAgentsStore: (selector: (state: typeof agentsState) => unknown) => selector(agentsState),
+}));
+
+vi.mock('@/lib/host-api', () => ({
+  hostApiFetch: (...args: unknown[]) => hostApiFetchMock(...args),
+}));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, params?: Record<string, unknown>) => {
+      if (key === 'executionGraph.collapsedSummary') {
+        return `collapsed ${String(params?.toolCount ?? '')} ${String(params?.processCount ?? '')}`.trim();
+      }
+      if (key === 'executionGraph.agentRun') {
+        return `Main execution`;
+      }
+      if (key === 'executionGraph.title') {
+        return 'Execution Graph';
+      }
+      if (key === 'executionGraph.collapseAction') {
+        return 'Collapse';
+      }
+      if (key === 'executionGraph.thinkingLabel') {
+        return 'Thinking';
+      }
+      if (key.startsWith('taskPanel.stepStatus.')) {
+        return key.split('.').at(-1) ?? key;
+      }
+      return key;
+    },
+  }),
+}));
+
+vi.mock('@/hooks/use-stick-to-bottom-instant', () => ({
+  useStickToBottomInstant: () => ({
+    contentRef: { current: null },
+    scrollRef: { current: null },
+  }),
+}));
+
+vi.mock('@/hooks/use-min-loading', () => ({
+  useMinLoading: () => false,
+}));
+
+vi.mock('@/pages/Chat/ChatToolbar', () => ({
+  ChatToolbar: () => null,
+}));
+
+vi.mock('@/pages/Chat/ChatInput', () => ({
+  ChatInput: () => null,
+}));
+
+describe('Chat execution graph lifecycle', () => {
+  beforeEach(async () => {
+    vi.resetModules();
+    hostApiFetchMock.mockReset();
+    hostApiFetchMock.mockResolvedValue({ success: true, messages: [] });
+    agentsState.fetchAgents.mockReset();
+
+    const { useChatStore } = await import('@/stores/chat');
+    useChatStore.setState({
+      messages: [
+        {
+          role: 'user',
+          content: 'Check semiconductor chatter',
+        },
+        {
+          role: 'assistant',
+          id: 'tool-turn',
+          content: [
+            { type: 'text', text: 'Checked X.' },
+            { type: 'tool_use', id: 'browser-search', name: 'browser', input: { action: 'search', query: 'semiconductor' } },
+          ],
+        },
+      ],
+      loading: false,
+      error: null,
+      sending: true,
+      activeRunId: 'run-live',
+      streamingText: '',
+      streamingMessage: {
+        role: 'assistant',
+        id: 'final-stream',
+        content: [
+          { type: 'text', text: 'Checked X.' },
+          { type: 'text', text: 'Checked X. Here is the summary.' },
+        ],
+      },
+      streamingTools: [
+        {
+          toolCallId: 'browser-search',
+          name: 'browser',
+          status: 'completed',
+          updatedAt: Date.now(),
+        },
+      ],
+      pendingFinal: true,
+      lastUserMessageAt: Date.now(),
+      pendingToolImages: [],
+      sessions: [{ key: 'agent:main:main' }],
+      currentSessionKey: 'agent:main:main',
+      currentAgentId: 'main',
+      sessionLabels: {},
+      sessionLastActivity: {},
+      thinkingLevel: null,
+    });
+  });
+
+  it('collapses execution once the reply starts streaming and keeps only the reply suffix in the bubble', async () => {
+    const { Chat } = await import('@/pages/Chat/index');
+
+    render(<Chat />);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('chat-execution-graph')).toHaveAttribute('data-collapsed', 'true');
+    });
+
+    expect(screen.getByText('Here is the summary.')).toBeInTheDocument();
+    expect(screen.queryByText('Checked X. Here is the summary.')).not.toBeInTheDocument();
+  });
+
+  it('renders the execution graph immediately for an active run before any stream content arrives', async () => {
+    const { useChatStore } = await import('@/stores/chat');
+    useChatStore.setState({
+      messages: [
+        {
+          role: 'user',
+          content: 'Check semiconductor chatter',
+        },
+      ],
+      loading: false,
+      error: null,
+      sending: true,
+      activeRunId: 'run-starting',
+      streamingText: '',
+      streamingMessage: null,
+      streamingTools: [],
+      pendingFinal: false,
+      lastUserMessageAt: Date.now(),
+      pendingToolImages: [],
+      sessions: [{ key: 'agent:main:main' }],
+      currentSessionKey: 'agent:main:main',
+      currentAgentId: 'main',
+      sessionLabels: {},
+      sessionLastActivity: {},
+      thinkingLevel: null,
+    });
+
+    const { Chat } = await import('@/pages/Chat/index');
+
+    render(<Chat />);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('chat-execution-graph')).toHaveAttribute('data-collapsed', 'false');
+    });
+
+    expect(screen.getByTestId('chat-execution-step-thinking-trailing')).toBeInTheDocument();
+    expect(screen.getAllByText('Thinking').length).toBeGreaterThan(0);
+  });
+});

tests/unit/chat-store-history-retry.test.ts

@@ -63,7 +63,6 @@ describe('useChatStore startup history retry', () => {
       error: null,
       loading: false,
       thinkingLevel: null,
-      showThinking: true,
     });
 
     gatewayRpcMock
@@ -115,7 +114,6 @@ describe('useChatStore startup history retry', () => {
       error: null,
       loading: false,
       thinkingLevel: null,
-      showThinking: true,
     });
 
     gatewayRpcMock
@@ -162,7 +160,6 @@ describe('useChatStore startup history retry', () => {
       error: null,
       loading: false,
       thinkingLevel: null,
-      showThinking: true,
     });
 
     let resolveFirstAttempt: ((value: { messages: Array<{ role: string; content: string; timestamp: number }> }) => void) | null = null;
@@ -242,7 +239,6 @@ describe('useChatStore startup history retry', () => {
       error: null,
       loading: false,
       thinkingLevel: null,
-      showThinking: true,
     });
 
     gatewayRpcMock.mockImplementationOnce(async () => {

tests/unit/chat-target-routing.test.ts

@@ -104,7 +104,6 @@ describe('chat target routing', () => {
       error: null,
       loading: false,
       thinkingLevel: null,
-      showThinking: true,
     });
 
     await useChatStore.getState().sendMessage('Hello direct agent', undefined, 'research');
@@ -148,7 +147,6 @@ describe('chat target routing', () => {
       error: null,
       loading: false,
       thinkingLevel: null,
-      showThinking: true,
     });
 
     await useChatStore.getState().sendMessage(

tests/unit/task-visualization.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from 'vitest';
 import { deriveTaskSteps, parseSubagentCompletionInfo } from '@/pages/Chat/task-visualization';
+import { stripProcessMessagePrefix } from '@/pages/Chat/message-utils';
 import type { RawMessage, ToolStatus } from '@/stores/chat';
 
 describe('deriveTaskSteps', () => {
@@ -23,14 +24,11 @@ describe('deriveTaskSteps', () => {
         ],
       },
       streamingTools,
-      sending: true,
-      pendingFinal: false,
-      showThinking: true,
     });
 
     expect(steps).toEqual([
       expect.objectContaining({
-        id: 'stream-thinking',
+        id: 'stream-thinking-0',
         label: 'Thinking',
         status: 'running',
         kind: 'thinking',
@@ -69,9 +67,6 @@ describe('deriveTaskSteps', () => {
           summary: 'Scanning files',
         },
       ],
-      sending: true,
-      pendingFinal: false,
-      showThinking: false,
     });
 
     expect(steps).toEqual([
@@ -111,9 +106,6 @@ describe('deriveTaskSteps', () => {
           summary: 'Permission denied',
         },
       ],
-      sending: true,
-      pendingFinal: false,
-      showThinking: false,
     });
 
     expect(steps).toEqual([
@@ -127,7 +119,7 @@ describe('deriveTaskSteps', () => {
     ]);
   });
 
-  it('keeps the newest running step when the execution graph exceeds the max length', () => {
+  it('keeps all steps when the execution graph exceeds the previous max length', () => {
     const messages: RawMessage[] = Array.from({ length: 9 }, (_, index) => ({
       role: 'assistant',
       id: `assistant-${index}`,
@@ -153,12 +145,14 @@ describe('deriveTaskSteps', () => {
           summary: 'Scanning current workspace',
         },
       ],
-      sending: true,
-      pendingFinal: false,
-      showThinking: false,
     });
 
-    expect(steps).toHaveLength(8);
+    expect(steps).toHaveLength(10);
+    expect(steps[0]).toEqual(expect.objectContaining({
+      id: 'tool-0',
+      label: 'read_0',
+      status: 'completed',
+    }));
     expect(steps.at(-1)).toEqual(expect.objectContaining({
       id: 'tool-live',
       label: 'grep_live',
@@ -182,14 +176,11 @@ describe('deriveTaskSteps', () => {
       messages,
       streamingMessage: null,
       streamingTools: [],
-      sending: false,
-      pendingFinal: false,
-      showThinking: true,
     });
 
     expect(steps).toEqual([
       expect.objectContaining({
-        id: 'history-thinking-assistant-1',
+        id: 'history-thinking-assistant-1-0',
         label: 'Thinking',
         status: 'completed',
         kind: 'thinking',
@@ -203,31 +194,106 @@ describe('deriveTaskSteps', () => {
     ]);
   });
 
-  it('collapses cumulative streaming thinking details into the newest version', () => {
+  it('splits cumulative streaming thinking into separate execution steps', () => {
     const steps = deriveTaskSteps({
       messages: [],
       streamingMessage: {
         role: 'assistant',
         content: [
-          { type: 'thinking', thinking: 'thinking 1' },
-          { type: 'thinking', thinking: 'thinking 1 2' },
-          { type: 'thinking', thinking: 'thinking 1 2 3' },
+          { type: 'thinking', thinking: 'Reviewing X.' },
+          { type: 'thinking', thinking: 'Reviewing X. Comparing Y.' },
+          { type: 'thinking', thinking: 'Reviewing X. Comparing Y. Drafting answer.' },
         ],
       },
       streamingTools: [],
-      sending: true,
-      pendingFinal: false,
-      showThinking: true,
     });
 
     expect(steps).toEqual([
       expect.objectContaining({
-        id: 'stream-thinking',
-        detail: 'thinking 1 2 3',
+        id: 'stream-thinking-0',
+        detail: 'Reviewing X.',
+        status: 'completed',
+      }),
+      expect.objectContaining({
+        id: 'stream-thinking-1',
+        detail: 'Comparing Y.',
+        status: 'completed',
+      }),
+      expect.objectContaining({
+        id: 'stream-thinking-2',
+        detail: 'Drafting answer.',
+        status: 'running',
       }),
     ]);
   });
 
+  it('keeps earlier reply segments in the graph when the last streaming segment is rendered separately', () => {
+    const steps = deriveTaskSteps({
+      messages: [],
+      streamingMessage: {
+        role: 'assistant',
+        content: [
+          { type: 'text', text: 'Checked X.' },
+          { type: 'text', text: 'Checked X. Checked Snowball.' },
+          { type: 'text', text: 'Checked X. Checked Snowball. Here is the summary.' },
+        ],
+      },
+      streamingTools: [],
+      omitLastStreamingMessageSegment: true,
+    });
+
+    expect(steps).toEqual([
+      expect.objectContaining({
+        id: 'stream-message-0',
+        detail: 'Checked X.',
+        status: 'completed',
+      }),
+      expect.objectContaining({
+        id: 'stream-message-1',
+        detail: 'Checked Snowball.',
+        status: 'completed',
+      }),
+    ]);
+  });
+
+  it('folds earlier reply segments into the graph but leaves the final answer for the chat bubble', () => {
+    const steps = deriveTaskSteps({
+      messages: [
+        {
+          role: 'assistant',
+          id: 'assistant-reply',
+          content: [
+            { type: 'text', text: 'Checked X.' },
+            { type: 'text', text: 'Checked X. Checked Snowball.' },
+            { type: 'text', text: 'Checked X. Checked Snowball. Here is the summary.' },
+          ],
+        },
+      ],
+      streamingMessage: null,
+      streamingTools: [],
+    });
+
+    expect(steps).toEqual([
+      expect.objectContaining({
+        id: 'history-message-assistant-reply-0',
+        detail: 'Checked X.',
+        status: 'completed',
+      }),
+      expect.objectContaining({
+        id: 'history-message-assistant-reply-1',
+        detail: 'Checked Snowball.',
+        status: 'completed',
+      }),
+    ]);
+  });
+
+  it('strips folded process narration from the final reply text', () => {
+    expect(stripProcessMessagePrefix(
+      'Checked X. Checked Snowball. Here is the summary.',
+      ['Checked X.', 'Checked Snowball.'],
+    )).toBe('Here is the summary.');
+  });
+
   it('builds a branch for spawned subagents', () => {
     const messages: RawMessage[] = [
       {
@@ -254,9 +320,6 @@ describe('deriveTaskSteps', () => {
       messages,
       streamingMessage: null,
       streamingTools: [],
-      sending: false,
-      pendingFinal: false,
-      showThinking: true,
     });
 
     expect(steps).toEqual([