perf(tui): streamline workflow progress rendering

Author: elkaix

apps/pythinker-code/src/tui/components/messages/dynamic-workflow-mission-control.ts

@@ -261,21 +261,14 @@ export class DynamicWorkflowMissionControlComponent implements Component {
     this.recordActivity(member.index, 'Started');
   }
 
-  private markStartedFromActivity(member: DynamicWorkflowMember): void {
-    if (member.phase !== 'pending' && member.phase !== 'queued') return;
-    member.phase = 'running';
-    member.startedAtMs ??= Date.now();
-    delete member.statusDetail;
-    this.recordActivity(member.index, 'Started');
-  }
 
   recordToolCall(input: {
     readonly agentId: string;
     readonly name?: string;
   }): void {
     const member = this.findMemberByAgentId(input.agentId);
     if (member === undefined || isTerminalPhase(member.phase)) return;
-    this.markStartedFromActivity(member);
+    if (member.phase === 'pending' || member.phase === 'queued') this.markStarted(input.agentId);
     const latest = input.name === undefined ? 'Using a tool' : `Using ${input.name}`;
     this.setLatest(member, latest, true);
     // Streamed text that follows starts a new line, never continues this label.
@@ -285,7 +278,7 @@ export class DynamicWorkflowMissionControlComponent implements Component {
   appendModelDelta(input: { readonly agentId: string; readonly delta: string }): void {
     const member = this.findMemberByAgentId(input.agentId);
     if (member === undefined || isTerminalPhase(member.phase) || input.delta.length === 0) return;
-    this.markStartedFromActivity(member);
+    if (member.phase === 'pending' || member.phase === 'queued') this.markStarted(input.agentId);
     const combined = `${member.carry}${input.delta}`;
     // Only the text after the last newline is still being written. A delta that
     // ends exactly at a newline leaves nothing pending, so carrying the closed
@@ -604,15 +597,14 @@ export class DynamicWorkflowMissionControlComponent implements Component {
       Math.max(0, nowMs - this.model.startedAtMs) / DYNAMIC_WORKFLOW_PROGRESS_FRAME_MS,
     );
     const showProgress = width >= DYNAMIC_WORKFLOW_RENDERING.memberProgressMinWidth;
-    const progressColumn = centerToWidth(
-      renderProgressGlyph(member.phase, frame),
-      DYNAMIC_WORKFLOW_RENDERING.memberProgressWidth,
-    );
-    const stateColumn = padToWidth(renderStateLabel(member.phase), STATE_COLUMN_WIDTH);
-    const compactStatus = padToWidth(renderCompactStatus(member.phase, frame), STATE_COLUMN_WIDTH);
     const prefix = showProgress
-      ? `${id}  ${progressColumn}  ${stateColumn}  `
-      : `${id} ${compactStatus} `;
+      ? `${id}  ${
+        centerToWidth(
+          renderProgressGlyph(member.phase, frame),
+          DYNAMIC_WORKFLOW_RENDERING.memberProgressWidth,
+        )
+      }  ${padToWidth(renderStateLabel(member.phase), STATE_COLUMN_WIDTH)}  `
+      : `${id} ${padToWidth(renderCompactStatus(member.phase, frame), STATE_COLUMN_WIDTH)} `;
     const task = member.item || 'Delegated agent';
     // The elision is display-only: the dedup below still compares whole items,
     // so a streamed line that merely repeats the task is still suppressed.

apps/pythinker-code/test/tui/components/messages/dynamic-workflow-mission-control.test.ts

@@ -866,17 +866,25 @@ describe('DynamicWorkflowMissionControlComponent', () => {
     expect(output).not.toContain('001 +1s Agent spawned');
   });
 
-  it.each([20, 40, 63, 64, 79, 80, 100])(
+  it.each([
+    [20, false, false],
+    [40, false, true],
+    [63, false, true],
+    [64, true, false],
+    [79, true, false],
+    [80, true, false],
+    [100, true, false],
+  ] as const)(
     'keeps progress and task columns aligned at width %i',
-    (width) => {
+    (width, expectedProgress, expectedStatus) => {
       const component = prepareObservedWorkflow();
       const rendered = component.render(width);
       const output = strip(rendered.join('\n'));
 
       expect(rendered.every((line) => visibleWidth(line) <= width)).toBe(true);
       expect(memberLine(output, 1)).toMatch(/[○◔◑◕]\s+RUN/u);
-      expect(output.includes('PROGRESS')).toBe(width >= 64);
-      expect(output.includes('STATUS')).toBe(width >= 21 && width < 64);
+      expect(output.includes('PROGRESS')).toBe(expectedProgress);
+      expect(output.includes('STATUS')).toBe(expectedStatus);
       expect(output).not.toContain('WORK IDLE');
     },
   );
@@ -892,16 +900,16 @@ describe('DynamicWorkflowMissionControlComponent', () => {
 
     vi.setSystemTime(30_000);
     const before = memberLine(renderText(component, 100), 1).match(/[○◔◑◕]/u)?.[0];
-    if (before === undefined) throw new Error('Missing lifecycle progress glyph');
     component.recordToolCall({ agentId: 'agent-1', name: 'Read' });
     for (let index = 0; index < 200; index += 1) {
       component.appendModelDelta({ agentId: 'agent-1', delta: `chunk ${String(index)} ` });
     }
     component.recordToolCall({ agentId: 'agent-1', name: 'Bash' });
 
     const output = renderText(component, 100);
-    expect(before).toMatch(/[○◔◑◕]/u);
-    expect(memberLine(output, 1)).toContain(before);
+    const after = memberLine(output, 1).match(/[○◔◑◕]/u)?.[0];
+    expect(before).toBeDefined();
+    expect(after).toBe(before);
     expect(output).not.toMatch(/\b\d+%|⚒/u);
   });