@synergenius/flow-weaver-pack-weaver 0.9.199 → 0.9.201

package/src/ui/instance-stream-view.tsx

@@ -0,0 +1,861 @@
+/**
+ * InstanceStreamView — real-time execution viewer for a single bot instance.
+ *
+ * Reached by clicking an executing bot card in the Swarm Dashboard Bots tab.
+ * Shows a conversation-style AI stream: thinking → text → tool calls → text,
+ * with content growing progressively as events arrive.
+ */
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import {
+  Flex, Typography, ScrollArea, StatusIcon, Icon, IconButton, Chip, TaskBlock, Button,
+  CollapsibleBlock, EmptyState, MarkdownContent, FadeIn, Divider, Section, SectionTitle,
+  Table, toast, usePackWorkspace,
+} from '@fw/plugin-ui-kit';
+
+import { traceToTimeline } from './trace-to-timeline';
+import type { HistoricalRun } from './trace-to-timeline';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface InstanceStreamViewProps {
+  instanceId: string;
+  profileId: string;
+  profileName?: string;
+  profileIcon?: string;
+  profileColor?: string;
+  currentRunId?: string;
+  currentTaskId?: string;
+  onBack: () => void;
+}
+
+interface TaskInfo {
+  id: string;
+  title: string;
+  description?: string;
+  status: string;
+  priority: number;
+  assignedProfile?: string;
+}
+
+interface StreamEvent {
+  id: number;
+  type: string;
+  timestamp: number;
+  taskId?: string;
+  data?: Record<string, unknown>;
+}
+
+// ---------------------------------------------------------------------------
+// Conversation block types — accumulated from stream events
+// ---------------------------------------------------------------------------
+
+interface ThinkingBlock {
+  kind: 'thinking';
+  content: string;
+  streaming: boolean;
+}
+
+interface TextBlock {
+  kind: 'text';
+  content: string;
+  streaming: boolean;
+}
+
+interface ToolCallBlock {
+  kind: 'tool_call';
+  id: string;
+  name: string;
+  status: 'running' | 'completed' | 'error';
+  result?: string;
+  isError?: boolean;
+}
+
+interface StatusBlock {
+  kind: 'status';
+  label: string;
+  variant: 'started' | 'completed' | 'failed';
+  detail?: string;
+}
+
+type ConversationBlock = ThinkingBlock | TextBlock | ToolCallBlock | StatusBlock;
+
+// ---------------------------------------------------------------------------
+// Build conversation blocks from events
+// ---------------------------------------------------------------------------
+
+function buildConversation(events: StreamEvent[]): ConversationBlock[] {
+  const blocks: ConversationBlock[] = [];
+  let thinkingBuf = '';
+  let textBuf = '';
+  let lastType = '';
+  const toolMap = new Map<string, number>(); // toolId → index in blocks
+
+  const flushThinking = (streaming: boolean) => {
+    if (thinkingBuf) {
+      blocks.push({ kind: 'thinking', content: thinkingBuf, streaming });
+      thinkingBuf = '';
+    }
+  };
+
+  const flushText = (streaming: boolean) => {
+    if (textBuf) {
+      blocks.push({ kind: 'text', content: textBuf, streaming });
+      textBuf = '';
+    }
+  };
+
+  for (let i = 0; i < events.length; i++) {
+    const e = events[i]!;
+    const d = e.data ?? {};
+    const isLast = i === events.length - 1;
+
+    switch (e.type) {
+      case 'thinking_delta':
+        if (lastType !== 'thinking_delta') flushText(false);
+        thinkingBuf += (d.text as string) ?? '';
+        lastType = 'thinking_delta';
+        if (isLast) flushThinking(true); // still streaming
+        break;
+
+      case 'thinking_done':
+        flushThinking(false);
+        lastType = 'thinking_done';
+        break;
+
+      case 'text_delta':
+        if (lastType === 'thinking_delta') flushThinking(false);
+        textBuf += (d.text as string) ?? '';
+        lastType = 'text_delta';
+        if (isLast) flushText(true); // still streaming
+        break;
+
+      case 'tool_use_start': {
+        flushThinking(false);
+        flushText(false);
+        const toolId = (d.id as string) ?? `tool-${i}`;
+        const idx = blocks.length;
+        toolMap.set(toolId, idx);
+        blocks.push({
+          kind: 'tool_call',
+          id: toolId,
+          name: (d.name as string) ?? 'unknown',
+          status: 'running',
+        });
+        lastType = 'tool_use_start';
+        break;
+      }
+
+      case 'tool_result': {
+        const toolId = (d.id as string) ?? '';
+        const idx = toolMap.get(toolId);
+        if (idx != null && blocks[idx]?.kind === 'tool_call') {
+          const block = blocks[idx] as ToolCallBlock;
+          block.status = (d.isError as boolean) ? 'error' : 'completed';
+          block.result = (d.result as string) ?? '';
+          block.isError = (d.isError as boolean) ?? false;
+        }
+        lastType = 'tool_result';
+        break;
+      }
+
+      case 'bot-started':
+        blocks.push({
+          kind: 'status',
+          label: 'Task started',
+          variant: 'started',
+          detail: (d.instruction as string) ?? undefined,
+        });
+        lastType = 'bot-started';
+        break;
+
+      case 'bot-completed':
+        flushThinking(false);
+        flushText(false);
+        blocks.push({
+          kind: 'status',
+          label: (d.success as boolean) ? 'Task completed' : 'Task finished',
+          variant: 'completed',
+          detail: (d.report as string) ?? (d.summary as string) ?? undefined,
+        });
+        lastType = 'bot-completed';
+        break;
+
+      case 'bot-failed':
+        flushThinking(false);
+        flushText(false);
+        blocks.push({
+          kind: 'status',
+          label: 'Task failed',
+          variant: 'failed',
+          detail: (d.error as string) ?? undefined,
+        });
+        lastType = 'bot-failed';
+        break;
+
+      // ── Swarm/workflow-level events (emitted by runner + swarm-controller) ──
+
+      case 'task-claimed':
+        blocks.push({
+          kind: 'status',
+          label: `Task claimed by ${(d.profileId as string) ?? 'bot'}`,
+          variant: 'started',
+        });
+        lastType = 'task-claimed';
+        break;
+
+      case 'task-done':
+        flushThinking(false);
+        flushText(false);
+        blocks.push({
+          kind: 'status',
+          label: (d.outcome as string) === 'completed' ? 'Task completed' : `Task ${(d.outcome as string) ?? 'done'}`,
+          variant: (d.outcome as string) === 'completed' ? 'completed' : 'failed',
+        });
+        lastType = 'task-done';
+        break;
+
+      case 'task-run-error':
+        flushThinking(false);
+        flushText(false);
+        blocks.push({
+          kind: 'status',
+          label: 'Run error',
+          variant: 'failed',
+          detail: (d.error as string) ?? undefined,
+        });
+        lastType = 'task-run-error';
+        break;
+
+      // Workflow node events — shown as tool-call-like blocks when no
+      // conversation-level events are available (non-CLI providers)
+      case 'node-start': {
+        flushThinking(false);
+        flushText(false);
+        const nodeId = (d.nodeId as string) ?? `node-${i}`;
+        const idx = blocks.length;
+        toolMap.set(`node:${nodeId}`, idx);
+        blocks.push({
+          kind: 'tool_call',
+          id: `node:${nodeId}`,
+          name: (d.label as string) ?? (d.nodeType as string) ?? nodeId,
+          status: 'running',
+        });
+        lastType = 'node-start';
+        break;
+      }
+
+      case 'node-complete': {
+        const nodeId = (d.nodeId as string) ?? '';
+        const idx = toolMap.get(`node:${nodeId}`);
+        if (idx != null && blocks[idx]?.kind === 'tool_call') {
+          const block = blocks[idx] as ToolCallBlock;
+          block.status = 'completed';
+          const dur = d.durationMs as number | undefined;
+          block.result = dur ? `Completed in ${dur}ms` : 'Completed';
+        }
+        lastType = 'node-complete';
+        break;
+      }
+
+      case 'node-error': {
+        const nodeId = (d.nodeId as string) ?? '';
+        const idx = toolMap.get(`node:${nodeId}`);
+        if (idx != null && blocks[idx]?.kind === 'tool_call') {
+          const block = blocks[idx] as ToolCallBlock;
+          block.status = 'error';
+          block.result = (d.error as string) ?? 'Failed';
+          block.isError = true;
+        }
+        lastType = 'node-error';
+        break;
+      }
+
+      default:
+        break;
+    }
+  }
+
+  // Flush any remaining buffer
+  if (thinkingBuf) flushThinking(true);
+  if (textBuf) flushText(true);
+
+  return blocks;
+}
+
+// ---------------------------------------------------------------------------
+// StreamIndicator — subtle conversational state indicator
+// Uses Divider (with label) for ended state, StatusIcon for others.
+// ---------------------------------------------------------------------------
+
+type StreamState = 'waiting' | 'connected' | 'ended' | 'error';
+
+const STREAM_STATUS_MAP: Record<StreamState, 'pending' | 'running' | 'completed' | 'failed'> = {
+  waiting: 'pending',
+  connected: 'running',
+  ended: 'completed',
+  error: 'failed',
+};
+
+const STREAM_DEFAULT_MSG: Record<StreamState, string> = {
+  waiting: 'Waiting for bot',
+  connected: 'Connected',
+  ended: 'End of stream',
+  error: 'Connection lost',
+};
+
+function StreamIndicator({ state, message }: { state: StreamState; message?: string }) {
+  const label = message ?? STREAM_DEFAULT_MSG[state];
+
+  if (state === 'ended') {
+    return (
+      <Section padding="compact">
+        <Divider label={label} />
+      </Section>
+    );
+  }
+
+  return (
+    <Section padding="default">
+      <Flex variant="row-center-center-nowrap-6">
+        <StatusIcon
+          status={STREAM_STATUS_MAP[state]}
+          size="xs"
+          pulsing={state === 'waiting' || state === 'connected'}
+        />
+        <Typography
+          variant="smallCaption-regular"
+          color={state === 'error' ? 'color-status-negative' : 'color-text-subtle'}
+        >
+          {label}
+        </Typography>
+      </Flex>
+    </Section>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Typewriter config
+// ---------------------------------------------------------------------------
+
+const TYPEWRITER = {
+  charsPerTick: 2,
+  intervalMs: 20,
+  cursor: '\u258F',
+  maxToolResultLen: 500,
+};
+
+// ---------------------------------------------------------------------------
+// useConversationTypewriter — single sequential typewriter for all blocks.
+// Returns { getBlockText, isBlockActive, isBlockDone } keyed by block index.
+// Only one block types at a time; previous blocks show full content.
+// ---------------------------------------------------------------------------
+
+function useConversationTypewriter(blocks: ConversationBlock[]) {
+  const [activeIdx, setActiveIdx] = useState(0);
+  const [charPos, setCharPos] = useState(0);
+  const activeIdxRef = useRef(0);
+  const charPosRef = useRef(0);
+  activeIdxRef.current = activeIdx;
+  charPosRef.current = charPos;
+
+  // Get the text content length of a block
+  const getBlockLen = useCallback((block: ConversationBlock): number => {
+    switch (block.kind) {
+      case 'thinking': return block.content.length;
+      case 'text': return block.content.length;
+      case 'tool_call': {
+        if (block.status === 'running') return 0; // no content to type yet
+        const display = block.result ?? '';
+        return Math.min(display.length, TYPEWRITER.maxToolResultLen);
+      }
+      case 'status': return (block.detail ?? '').length;
+      default: return 0;
+    }
+  }, []);
+
+  // Tick: advance charPos, or move to next block when done
+  useEffect(() => {
+    const timer = setInterval(() => {
+      const idx = activeIdxRef.current;
+      if (idx >= blocks.length) return;
+
+      const block = blocks[idx]!;
+      const targetLen = getBlockLen(block);
+
+      // Tool call running — wait here until result arrives (don't skip)
+      if (block.kind === 'tool_call' && (block as ToolCallBlock).status === 'running') return;
+
+      // Skip blocks with no typeable content (status with no detail)
+      if (targetLen === 0 && block.kind !== 'tool_call') {
+        setActiveIdx(idx + 1);
+        setCharPos(0);
+        return;
+      }
+
+      const pos = charPosRef.current;
+      if (pos >= targetLen) {
+        // Block done — still streaming content? Stay. Otherwise advance.
+        if (block.kind === 'thinking' && (block as ThinkingBlock).streaming) return;
+        if (block.kind === 'text' && (block as TextBlock).streaming) return;
+        // Advance to next
+        setActiveIdx(idx + 1);
+        setCharPos(0);
+      } else {
+        const speed = 1;
+        const chars = Math.max(1, Math.round(TYPEWRITER.charsPerTick * speed));
+        setCharPos(Math.min(pos + chars, targetLen));
+      }
+    }, TYPEWRITER.intervalMs);
+    return () => clearInterval(timer);
+  }, [blocks, getBlockLen]);
+
+  // When new blocks appear beyond activeIdx, ensure we catch up if current is done
+  useEffect(() => {
+    const idx = activeIdx;
+    if (idx < blocks.length) {
+      const block = blocks[idx]!;
+      const targetLen = getBlockLen(block);
+      if (targetLen === 0 || charPos >= targetLen) {
+        const isStreaming = (block.kind === 'thinking' || block.kind === 'text')
+          && (block as ThinkingBlock | TextBlock).streaming;
+        if (!isStreaming && idx < blocks.length - 1) {
+          setActiveIdx(idx + 1);
+          setCharPos(0);
+        }
+      }
+    }
+  }, [blocks.length]);
+
+  return { activeIdx, charPos, getBlockLen };
+}
+
+// ---------------------------------------------------------------------------
+// Block renderers that accept revealed length
+// ---------------------------------------------------------------------------
+
+function RevealedMarkdown({ content, revealedLen, showCursor }: {
+  content: string; revealedLen: number; showCursor: boolean;
+}) {
+  const visibleText = content.slice(0, revealedLen);
+  return (
+    <Flex inline>
+      <MarkdownContent content={visibleText + (showCursor ? TYPEWRITER.cursor : '')} />
+    </Flex>
+  );
+}
+
+function RevealedToolResult({ result, revealedLen, isError }: {
+  result: string; revealedLen: number; isError?: boolean;
+}) {
+  const display = result.length > TYPEWRITER.maxToolResultLen
+    ? result.slice(0, TYPEWRITER.maxToolResultLen) + '...'
+    : result;
+  const visibleText = display.slice(0, revealedLen);
+  return (
+    <Section
+      padding="compact"
+      background="surface"
+      border={isError ? 'none' : 'top'}
+    >
+      <Typography
+        variant="smallCaption-regular"
+        color={isError ? 'color-status-negative' : 'color-text-medium'}
+        mono
+      >
+        {visibleText || '\u200B'}
+      </Typography>
+    </Section>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Tool name formatting
+// ---------------------------------------------------------------------------
+
+function formatToolName(name: string): string {
+  return name.replace(/^fw_/, '').replace(/_/g, ' ');
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+function InstanceStreamView({
+  instanceId,
+  profileId,
+  profileName,
+  profileIcon,
+  profileColor,
+  currentRunId,
+  currentTaskId,
+  onBack,
+}: InstanceStreamViewProps) {
+  const ctx = usePackWorkspace();
+  const { callTool } = ctx;
+
+  // ── Redirect panel state ──
+  const [showRedirect, setShowRedirect] = useState(false);
+  const [openTasks, setOpenTasks] = useState<Array<{ id: string; title: string; priority: number }>>([]);
+  const [redirecting, setRedirecting] = useState(false);
+
+  // ── Task context ──
+  const [task, setTask] = useState<TaskInfo | null>(null);
+
+  useEffect(() => {
+    if (!currentTaskId) return;
+    callTool('fw_weaver_task_get', { id: currentTaskId }).then((raw: unknown) => {
+      const data = typeof raw === 'string' ? JSON.parse(raw) : raw;
+      const t = (data as Record<string, unknown>)?.task ?? data;
+      if (t && typeof t === 'object') setTask(t as TaskInfo);
+    }).catch(() => {});
+  }, [callTool, currentTaskId]);
+
+  // ── Run history for this instance ──
+  const [history, setHistory] = useState<HistoricalRun[]>([]);
+
+  useEffect(() => {
+    callTool('fw_weaver_history', { instanceId, limit: 10 }).then((raw: unknown) => {
+      const data = typeof raw === 'string' ? JSON.parse(raw) : raw;
+      if (Array.isArray(data)) {
+        setHistory(data.map((r: Record<string, unknown>) => {
+          const costObj = r.cost && typeof r.cost === 'object' ? (r.cost as Record<string, unknown>) : undefined;
+          return { ...r, costDetail: costObj, cost: costObj?.totalCost ?? r.cost } as unknown as HistoricalRun;
+        }));
+      }
+    }).catch(() => {});
+  }, [callTool, instanceId]);
+
+  // ── Live streaming ──
+  const stream = ctx.createEventStream();
+  const isLive = !!currentRunId;
+
+  useEffect(() => {
+    if (!isLive || !currentRunId) return;
+    stream.start(ctx.packId, 'fw_weaver_events', currentRunId);
+    return () => stream.stop();
+  }, [isLive, currentRunId, ctx.packId]);
+
+  // ── Build conversation from stream events ──
+  const conversation = useMemo<ConversationBlock[]>(
+    () => buildConversation(stream.events as StreamEvent[]),
+    [stream.events],
+  );
+
+  // ── Sequential typewriter ──
+  const { activeIdx, charPos, getBlockLen } = useConversationTypewriter(conversation);
+
+  // ── Auto-scroll ──
+  const scrollRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [conversation.length, stream.events.length]);
+
+  // ── Thinking expand state ──
+  const [thinkingExpanded, setThinkingExpanded] = useState<Record<number, boolean>>({});
+
+  // ── Run expansion state (for history) ──
+  const [expandedRunId, setExpandedRunId] = useState<string | null>(null);
+
+  const runItems = useMemo(() => {
+    return history.map((run: HistoricalRun) => ({
+      run,
+      runTimeline: traceToTimeline(run),
+    }));
+  }, [history]);
+
+  function extractInstruction(run: HistoricalRun): string {
+    if (run.instruction) {
+      const titleMatch = run.instruction.match(/^##\s*Task:\s*(.+)/m);
+      if (titleMatch) return titleMatch[1].trim().slice(0, 120);
+      return run.instruction.split('\n')[0].trim().slice(0, 120);
+    }
+    return run.summary?.slice(0, 120) ?? task?.title ?? 'Bot run';
+  }
+
+  // ── Status display ──
+  const statusIcon = isLive ? 'running' : 'pending';
+  const statusLabel = isLive ? 'Executing' : 'Idle';
+
+  return (
+    <Flex variant="column-stretch-start-nowrap-0" fill>
+      {/* ── Header ── */}
+      <Section padding="default" border="bottom" shrink>
+        <Flex variant="column-stretch-start-nowrap-6">
+          <Flex variant="row-center-space-between-nowrap-8">
+            <Flex variant="row-center-start-nowrap-8">
+              <IconButton icon="back" size="xs" variant="clear" onClick={onBack} />
+              <Icon
+                name={profileIcon || 'smartToy'}
+                size={16}
+                color={profileColor || 'color-text-medium'}
+              />
+              <Typography variant="caption-thick" color="color-text-high">
+                {profileName || profileId}
+              </Typography>
+              <StatusIcon status={statusIcon} size="sm" />
+              <Typography
+                variant="smallCaption-regular"
+                color={isLive ? 'color-brand-main' : 'color-text-subtle'}
+              >
+                {statusLabel}
+              </Typography>
+
+              {/* Redirect button (only when executing) */}
+              {isLive && (
+                <IconButton
+                  icon="swapHoriz"
+                  size="xs"
+                  variant="clear"
+                  title="Redirect to another task"
+                  onClick={() => {
+                    if (showRedirect) { setShowRedirect(false); return; }
+                    callTool('fw_weaver_task_list', { status: 'open' }).then((raw: unknown) => {
+                      const data = typeof raw === 'string' ? JSON.parse(raw) : raw;
+                      if (Array.isArray(data)) setOpenTasks(data.filter((t: Record<string, unknown>) => !t.isParent && t.id !== currentTaskId));
+                    }).catch(() => {});
+                    setShowRedirect(true);
+                  }}
+                />
+              )}
+            </Flex>
+          </Flex>
+          {task && (
+            <Flex variant="column-stretch-start-nowrap-2">
+              <Typography variant="caption-regular" color="color-text-medium">
+                {task.title}
+              </Typography>
+              {task.description && (
+                <Typography variant="smallCaption-regular" color="color-text-subtle">
+                  {task.description.length > 200 ? task.description.slice(0, 197) + '...' : task.description}
+                </Typography>
+              )}
+            </Flex>
+          )}
+          {!isLive && <StreamIndicator state="ended" message="No active run — instance is idle" />}
+        </Flex>
+      </Section>
+
+      {/* ── Redirect panel (inline, slides in below header) ── */}
+      {showRedirect && (
+        <Section padding="compact" border="bottom" shrink>
+          <Flex variant="column-stretch-start-nowrap-8">
+            <SectionTitle size="xs">Redirect to Task</SectionTitle>
+            {openTasks.length > 0 ? (
+              <Table
+                size="compact"
+                getRowKey={(row: Record<string, unknown>) => row.id as string}
+                onRowClick={async (row: Record<string, unknown>) => {
+                  setRedirecting(true);
+                  try {
+                    await callTool('fw_weaver_steer', { botId: instanceId, command: 'redirect', payload: row.id });
+                    toast(`Redirected to "${row.title}"`, { type: 'success' });
+                    setShowRedirect(false);
+                  } catch (err: unknown) {
+                    toast(err instanceof Error ? err.message : 'Failed to redirect', { type: 'error' });
+                  }
+                  setRedirecting(false);
+                }}
+                columns={[
+                  { key: 'title', header: 'Task' },
+                  { key: 'priority', header: 'P', width: '30px', align: 'center' as const },
+                ]}
+                data={openTasks as unknown as Array<Record<string, unknown>>}
+              />
+            ) : (
+              <Typography variant="smallCaption-regular" color="color-text-subtle">
+                No open tasks
+              </Typography>
+            )}
+            <Button size="xs" variant="clear" color="secondary" onClick={() => setShowRedirect(false)}>
+              Cancel
+            </Button>
+          </Flex>
+        </Section>
+      )}
+
+      {/* ── Scrollable conversation ── */}
+      <ScrollArea ref={scrollRef}>
+        <Section padding="default">
+
+          {/* ── Live conversation stream ── */}
+          {isLive && conversation.length > 0 && (
+            <Flex variant="column-stretch-start-nowrap-8" marginBottom="default">
+              {conversation.map((block: ConversationBlock, i: number) => {
+                // Sequencer: blocks before activeIdx show full content, activeIdx types, future blocks hidden
+                const isDone = i < activeIdx;
+                const isActive = i === activeIdx;
+                const isFuture = i > activeIdx;
+                if (isFuture) return null;
+
+                const revealedLen = isDone ? getBlockLen(block) : isActive ? charPos : 0;
+                const showCursor = isActive && revealedLen < getBlockLen(block);
+
+                const inner = (() => {
+                  switch (block.kind) {
+                    case 'thinking': {
+                      const isExpanded = thinkingExpanded[i] ?? (isActive || block.streaming);
+                      const fullContent = block.content;
+                      return (
+                        <CollapsibleBlock
+                          status="thinking"
+                          label={(isActive || block.streaming) ? 'Thinking...' : 'Thought'}
+                          expanded={isExpanded}
+                          onToggle={() => setThinkingExpanded((prev: Record<number, boolean>) => ({ ...prev, [i]: !isExpanded }))}
+                        >
+                          {fullContent ? (
+                            <Section padding="compact" background="surface">
+                              <RevealedMarkdown
+                                content={fullContent}
+                                revealedLen={revealedLen}
+                                showCursor={showCursor}
+                              />
+                            </Section>
+                          ) : undefined}
+                        </CollapsibleBlock>
+                      );
+                    }
+                    case 'text':
+                      return (
+                        <Section padding="minimal">
+                          <RevealedMarkdown
+                            content={block.content}
+                            revealedLen={revealedLen}
+                            showCursor={showCursor}
+                          />
+                        </Section>
+                      );
+                    case 'tool_call': {
+                      const hasResult = !!block.result;
+                      const isRunning = block.status === 'running';
+                      return (
+                        <CollapsibleBlock
+                          status={block.status}
+                          label={
+                            <Typography variant="caption-regular" color="color-text-high" mono>
+                              {formatToolName(block.name)}
+                            </Typography>
+                          }
+                          headerSuffix={
+                            isRunning
+                              ? <Typography variant="smallCaption-regular" color="color-text-subtle">running...</Typography>
+                              : block.isError
+                                ? <Typography variant="smallCaption-regular" color="color-status-negative">failed</Typography>
+                                : null
+                          }
+                          expanded
+                          canExpand={hasResult}
+                          onToggle={() => {}}
+                        >
+                          {isRunning && (
+                            <Section padding="compact" background="surface" border="top">
+                              <Typography variant="smallCaption-regular" color="color-text-subtle" mono>...</Typography>
+                            </Section>
+                          )}
+                          {hasResult && (
+                            <RevealedToolResult
+                              result={block.result!}
+                              revealedLen={revealedLen}
+                              isError={block.isError}
+                            />
+                          )}
+                        </CollapsibleBlock>
+                      );
+                    }
+                    case 'status': {
+                      const statusMap: Record<string, string> = { started: 'running', completed: 'completed', failed: 'error' };
+                      return (
+                        <CollapsibleBlock
+                          status={statusMap[block.variant] ?? 'running'}
+                          label={block.label}
+                          expanded={!!(block.detail && (isDone || revealedLen > 0))}
+                          canExpand={!!block.detail}
+                          onToggle={() => {}}
+                        >
+                          {block.detail && (
+                            <Section padding="compact">
+                              <RevealedMarkdown
+                                content={block.detail}
+                                revealedLen={revealedLen}
+                                showCursor={showCursor}
+                              />
+                            </Section>
+                          )}
+                        </CollapsibleBlock>
+                      );
+                    }
+                    default:
+                      return null;
+                  }
+                })();
+
+                if (!inner) return null;
+                return (
+                  <FadeIn key={`block-${i}`} visible duration={0.3} slide={8}>
+                    {inner}
+                  </FadeIn>
+                );
+              })}
+            </Flex>
+          )}
+
+          {/* ── Waiting for events ── */}
+          {isLive && conversation.length === 0 && stream.isStreaming && (
+            <StreamIndicator state="waiting" />
+          )}
+
+          {/* ── Stream error ── */}
+          {isLive && stream.error && (
+            <StreamIndicator state="error" message={stream.error} />
+          )}
+
+          {/* ── Stream ended indicator ── */}
+          {isLive && stream.isDone && conversation.length > 0 && (
+            <StreamIndicator state="ended" />
+          )}
+
+          {/* ── Run history section ── */}
+          {runItems.length > 0 && (
+            <Flex variant="column-stretch-start-nowrap-4">
+              <SectionTitle size="xs">{`History (${runItems.length})`}</SectionTitle>
+              {runItems.map(({ run, runTimeline }: { run: HistoricalRun; runTimeline: Array<Record<string, unknown>> }) => {
+                const runId = run.id;
+                const isExpanded = expandedRunId === runId;
+                const isSuccess = run.outcome === 'completed' || run.success === true;
+                return (
+                  <TaskBlock
+                    key={`run-${runId}`}
+                    state={isSuccess ? 'completed' : 'failed'}
+                    instruction={extractInstruction(run)}
+                    timeline={runTimeline}
+                    report={run.report ?? null}
+                    cost={typeof run.cost === 'number' ? run.cost : ((run.costDetail?.totalCost as number) ?? null)}
+                    plan={run.plan}
+                    startedAt={run.startedAt}
+                    durationMs={run.durationMs ?? run.duration}
+                    expanded={isExpanded}
+                    onToggleExpand={() => setExpandedRunId((prev: string | null) => (prev === runId ? null : runId))}
+                  />
+                );
+              })}
+            </Flex>
+          )}
+
+          {/* ── Empty state ── */}
+          {!isLive && runItems.length === 0 && (
+            <EmptyState
+              icon="smartToy"
+              message="No execution history"
+              description="This instance has no runs yet."
+            />
+          )}
+        </Section>
+      </ScrollArea>
+    </Flex>
+  );
+}
+
+export { InstanceStreamView };
+export default InstanceStreamView;