feat(web): React UI v2.0 — Phase 4 Task 41 (Transcript assembly)

Author: aksOps

web/src/canvas/Transcript.tsx

@@ -0,0 +1,126 @@
+import type { CSSProperties } from 'react';
+import type { AgentRun, ToolCall } from '@/api/types';
+import { Turn } from './Turn';
+import { HITLBand } from './HITLBand';
+
+export interface ActiveAgentSnapshot {
+  name: string;
+  startedAt: string;
+  currentBody: string;
+}
+
+export interface HITLContext {
+  toolCall: ToolCall;
+  waitedSeconds: number;
+  question: string;
+  confidence: number | null;
+  turn: number;
+  requestedBy: string;
+  policy: string;
+}
+
+interface TranscriptProps {
+  agentsRun: AgentRun[];
+  toolCalls: ToolCall[];
+  activeAgent: ActiveAgentSnapshot | null;
+  hitlContext: HITLContext | null;
+  onSelectTool: (tc: ToolCall) => void;
+  onApprove: () => void;
+  onReject: () => void;
+  onApproveWithRationale: () => void;
+}
+
+const emptyStyle: CSSProperties = {
+  padding: 40,
+  textAlign: 'center',
+  fontFamily: 'var(--ff-sans)',
+  fontSize: 13,
+  color: 'var(--ink-3)',
+};
+
+function durationMs(startIso: string, endIso: string): number {
+  const s = new Date(startIso).getTime();
+  const e = new Date(endIso).getTime();
+  if (isNaN(s) || isNaN(e)) return 0;
+  return Math.max(0, e - s);
+}
+
+function elapsedFromOpening(openingIso: string, atIso: string): number {
+  const o = new Date(openingIso).getTime();
+  const a = new Date(atIso).getTime();
+  if (isNaN(o) || isNaN(a)) return 0;
+  return Math.max(0, a - o);
+}
+
+function groupToolsByAgent(toolCalls: ToolCall[]): Map<string, ToolCall[]> {
+  const m = new Map<string, ToolCall[]>();
+  for (const tc of toolCalls) {
+    const arr = m.get(tc.agent) ?? [];
+    arr.push(tc);
+    m.set(tc.agent, arr);
+  }
+  return m;
+}
+
+export function Transcript({
+  agentsRun, toolCalls, activeAgent, hitlContext,
+  onSelectTool, onApprove, onReject, onApproveWithRationale,
+}: TranscriptProps) {
+  const empty = agentsRun.length === 0 && activeAgent === null && hitlContext === null;
+  if (empty) {
+    return <div style={emptyStyle}>No turns yet.</div>;
+  }
+
+  const toolsByAgent = groupToolsByAgent(toolCalls);
+  const opening = agentsRun[0]?.started_at ?? activeAgent?.startedAt ?? '';
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      {agentsRun.map((run, i) => (
+        <Turn
+          key={`${run.agent}-${run.started_at}-${i}`}
+          agent={run.agent}
+          timestamp={run.started_at}
+          elapsedMs={elapsedFromOpening(opening, run.started_at)}
+          body={run.summary}
+          confidence={run.confidence}
+          model={run.token_usage ? '—' : '—'}
+          durationMs={durationMs(run.started_at, run.ended_at)}
+          turn={i + 1}
+          toolCalls={toolsByAgent.get(run.agent) ?? []}
+          active={false}
+          onSelectTool={onSelectTool}
+        />
+      ))}
+      {activeAgent && (
+        <Turn
+          agent={activeAgent.name}
+          timestamp={activeAgent.startedAt}
+          elapsedMs={elapsedFromOpening(opening, activeAgent.startedAt)}
+          body={activeAgent.currentBody}
+          confidence={null}
+          model="—"
+          durationMs={0}
+          turn={agentsRun.length + 1}
+          toolCalls={toolsByAgent.get(activeAgent.name) ?? []}
+          active={true}
+          onSelectTool={onSelectTool}
+        />
+      )}
+      {hitlContext && (
+        <HITLBand
+          toolCall={hitlContext.toolCall}
+          waitedSeconds={hitlContext.waitedSeconds}
+          question={hitlContext.question}
+          confidence={hitlContext.confidence}
+          turn={hitlContext.turn}
+          requestedBy={hitlContext.requestedBy}
+          policy={hitlContext.policy}
+          onApprove={onApprove}
+          onReject={onReject}
+          onApproveWithRationale={onApproveWithRationale}
+        />
+      )}
+    </div>
+  );
+}

web/tests/component/Transcript.test.tsx

@@ -0,0 +1,120 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '../_helpers/render';
+import { Transcript } from '@/canvas/Transcript';
+import type { AgentRun, ToolCall } from '@/api/types';
+
+const intakeRun: AgentRun = {
+  agent: 'intake', started_at: '2026-05-15T14:16:30Z', ended_at: '2026-05-15T14:16:32Z',
+  summary: 'Triage observed elevated p99 latency.', confidence: 0.92,
+  confidence_rationale: null, signal: null,
+};
+const triageRun: AgentRun = {
+  agent: 'triage', started_at: '2026-05-15T14:16:50Z', ended_at: '2026-05-15T14:16:54Z',
+  summary: 'Correlated with deploy.', confidence: 0.88,
+  confidence_rationale: null, signal: null,
+};
+const tcLogs: ToolCall = {
+  agent: 'triage', tool: 'obs:get_logs', args: { service: 'api' }, result: { lines: 12 },
+  ts: '2026-05-15T14:16:52Z', risk: 'low', status: 'executed',
+  approver: null, approved_at: null, approval_rationale: null,
+};
+const tcPending: ToolCall = {
+  agent: 'investigate', tool: 'rem:restart_service',
+  args: { service: 'payments-svc' }, result: null, ts: '2026-05-15T14:18:00Z',
+  risk: 'high', status: 'pending_approval',
+  approver: null, approved_at: null, approval_rationale: null,
+};
+
+describe('<Transcript>', () => {
+  it('renders one Turn per completed agent run', () => {
+    render(
+      <Transcript
+        agentsRun={[intakeRun, triageRun]}
+        toolCalls={[]}
+        activeAgent={null}
+        hitlContext={null}
+        onSelectTool={() => {}}
+        onApprove={() => {}}
+        onReject={() => {}}
+        onApproveWithRationale={() => {}}
+      />,
+    );
+    expect(screen.getByText('intake')).toBeInTheDocument();
+    expect(screen.getByText('triage')).toBeInTheDocument();
+  });
+
+  it('renders active Turn for currently-running agent (not yet in agentsRun)', () => {
+    render(
+      <Transcript
+        agentsRun={[intakeRun]}
+        toolCalls={[]}
+        activeAgent={{ name: 'investigate', startedAt: '2026-05-15T14:17:00Z', currentBody: 'Reading deploy diff...' }}
+        hitlContext={null}
+        onSelectTool={() => {}}
+        onApprove={() => {}}
+        onReject={() => {}}
+        onApproveWithRationale={() => {}}
+      />,
+    );
+    expect(screen.getByText('investigate')).toBeInTheDocument();
+    expect(screen.getByText(/Reading deploy diff/)).toBeInTheDocument();
+  });
+
+  it('groups tool calls by agent and renders them in the matching Turn sidenote', () => {
+    render(
+      <Transcript
+        agentsRun={[intakeRun, triageRun]}
+        toolCalls={[tcLogs]}
+        activeAgent={null}
+        hitlContext={null}
+        onSelectTool={() => {}}
+        onApprove={() => {}}
+        onReject={() => {}}
+        onApproveWithRationale={() => {}}
+      />,
+    );
+    // tcLogs.agent === 'triage', so it appears in triage's sidenote
+    expect(screen.getByText('obs:get_logs')).toBeInTheDocument();
+  });
+
+  it('renders HITLBand when hitlContext is provided', () => {
+    render(
+      <Transcript
+        agentsRun={[intakeRun]}
+        toolCalls={[tcPending]}
+        activeAgent={null}
+        hitlContext={{
+          toolCall: tcPending,
+          waitedSeconds: 18,
+          question: 'Restart payments-svc?',
+          confidence: 0.78,
+          turn: 3,
+          requestedBy: 'u1',
+          policy: 'risk:high requires approval',
+        }}
+        onSelectTool={() => {}}
+        onApprove={() => {}}
+        onReject={() => {}}
+        onApproveWithRationale={() => {}}
+      />,
+    );
+    expect(screen.getByText(/APPROVAL/)).toBeInTheDocument();
+    expect(screen.getByText('Restart payments-svc?')).toBeInTheDocument();
+  });
+
+  it('renders empty state when there are no turns', () => {
+    render(
+      <Transcript
+        agentsRun={[]}
+        toolCalls={[]}
+        activeAgent={null}
+        hitlContext={null}
+        onSelectTool={() => {}}
+        onApprove={() => {}}
+        onReject={() => {}}
+        onApproveWithRationale={() => {}}
+      />,
+    );
+    expect(screen.getByText(/No turns yet/i)).toBeInTheDocument();
+  });
+});