@stigmer/react 1.0.4 → 2.0.0

package/src/workflow/execution-inspector/AgentCallTab.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import { memo, useMemo } from "react";
+import { cn } from "@stigmer/theme";
+import type { TaskDetailAgentCall } from "./derive-task-detail";
+import type { DerivedTaskState } from "../../internal/store/workflow-execution-event-store";
+import { formatMicroUsd, formatTokenCount } from "../format-utils";
+import { useExecutionStream } from "../../execution/useExecutionStream";
+import { useConversationStoreRef } from "../../internal/store";
+import { MessageThread } from "../../execution/MessageThread";
+
+export interface AgentCallTabProps {
+  readonly agentCall: TaskDetailAgentCall;
+  readonly taskStatus?: DerivedTaskState["status"];
+  readonly isTabActive?: boolean;
+  readonly onNavigateToAgentExecution?: (id: string) => void;
+  readonly className?: string;
+}
+
+/**
+ * Agent Call tab in the execution inspector.
+ *
+ * When the task is running and childExecutionId is known, subscribes to
+ * the child AgentExecution stream and renders a live MessageThread.
+ * When complete or ID is unavailable, shows a static summary.
+ *
+ * Subscription lifecycle follows DD-LIVE-006: only subscribes when the tab
+ * is active and the task is running. Unsubscribes on unmount or deactivation.
+ */
+export const AgentCallTab = memo(function AgentCallTab({
+  agentCall,
+  taskStatus,
+  isTabActive = true,
+  onNavigateToAgentExecution,
+  className,
+}: AgentCallTabProps) {
+  const isRunning = taskStatus === "running" || taskStatus === "waiting_approval";
+  const hasChildId = !!agentCall.childExecutionId;
+  const shouldSubscribe = isTabActive && isRunning && hasChildId;
+
+  const effectiveId = shouldSubscribe ? agentCall.childExecutionId : null;
+  const store = useConversationStoreRef();
+  const { execution: streamExecution, isStreaming, isConnecting, error: streamError } =
+    useExecutionStream(effectiveId, { store });
+
+  const emptyExecutions = useMemo(() => [] as const, []);
+
+  const BZ = BigInt(0);
+
+  if (isRunning && hasChildId) {
+    return (
+      <div className={cn("flex flex-col gap-2", className)}>
+        {/* Stream status bar */}
+        <div className="flex items-center gap-2 text-[11px]">
+          {isConnecting && (
+            <span className="text-muted-foreground">Connecting to agent stream...</span>
+          )}
+          {isStreaming && (
+            <span className="text-primary">
+              <span className="mr-1 inline-block size-1.5 animate-pulse rounded-full bg-primary" />
+              Live
+            </span>
+          )}
+          {streamError && (
+            <span className="text-destructive">Stream error</span>
+          )}
+          <span className="ml-auto text-muted-foreground">{agentCall.agentSlug}</span>
+        </div>
+
+        {/* Live message transcript */}
+        <div className="min-h-0 flex-1 overflow-y-auto rounded border border-border">
+          <MessageThread
+            executions={emptyExecutions}
+            activeStreamExecution={streamExecution ?? undefined}
+            className="max-h-[50vh]"
+          />
+        </div>
+
+        {/* Navigation link */}
+        {onNavigateToAgentExecution && (
+          <button
+            type="button"
+            onClick={() => onNavigateToAgentExecution(agentCall.childExecutionId)}
+            className="self-start rounded border border-border px-2.5 py-1.5 text-xs font-medium text-primary hover:bg-muted"
+          >
+            Open Full Session
+          </button>
+        )}
+      </div>
+    );
+  }
+
+  if (isRunning && !hasChildId) {
+    return (
+      <div className={cn("flex flex-col items-center justify-center gap-2 py-8", className)}>
+        <div className="size-5 animate-spin rounded-full border-2 border-muted border-t-primary" />
+        <p className="text-xs text-muted-foreground">Waiting for agent to start...</p>
+        <p className="text-[11px] text-muted-foreground">{agentCall.agentSlug}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("flex flex-col gap-3", className)}>
+      <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-xs">
+        <dt className="text-muted-foreground">Agent</dt>
+        <dd className="font-medium text-foreground">{agentCall.agentSlug}</dd>
+
+        {agentCall.agentPhase && (
+          <>
+            <dt className="text-muted-foreground">Phase</dt>
+            <dd className="text-foreground">{agentCall.agentPhase}</dd>
+          </>
+        )}
+
+        {agentCall.messagesCount > 0 && (
+          <>
+            <dt className="text-muted-foreground">Messages</dt>
+            <dd className="tabular-nums text-foreground">{agentCall.messagesCount}</dd>
+          </>
+        )}
+
+        {agentCall.toolCallsCount > 0 && (
+          <>
+            <dt className="text-muted-foreground">Tool calls</dt>
+            <dd className="tabular-nums text-foreground">{agentCall.toolCallsCount}</dd>
+          </>
+        )}
+
+        {agentCall.currentToolName && (
+          <>
+            <dt className="text-muted-foreground">Current tool</dt>
+            <dd className="text-foreground">{agentCall.currentToolName}</dd>
+          </>
+        )}
+
+        {agentCall.tokensConsumed > BZ && (
+          <>
+            <dt className="text-muted-foreground">Tokens</dt>
+            <dd className="tabular-nums text-foreground">{formatTokenCount(agentCall.tokensConsumed)}</dd>
+          </>
+        )}
+
+        {agentCall.costMicros > BZ && (
+          <>
+            <dt className="text-muted-foreground">Cost</dt>
+            <dd className="tabular-nums text-foreground">{formatMicroUsd(agentCall.costMicros)}</dd>
+          </>
+        )}
+      </dl>
+
+      {agentCall.error && (
+        <div className="rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2" role="alert">
+          <p className="text-xs text-destructive">{agentCall.error}</p>
+        </div>
+      )}
+
+      {onNavigateToAgentExecution && agentCall.childExecutionId && (
+        <button
+          type="button"
+          onClick={() => onNavigateToAgentExecution(agentCall.childExecutionId)}
+          className="self-start rounded border border-border px-2.5 py-1.5 text-xs font-medium text-primary hover:bg-muted"
+        >
+          View Agent Execution
+        </button>
+      )}
+    </div>
+  );
+});

package/src/workflow/execution-inspector/ErrorTab.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { memo, useState, useCallback } from "react";
+import { cn } from "@stigmer/theme";
+import type { TaskDetailError } from "./derive-task-detail";
+import { formatDuration } from "../format-utils";
+
+export interface ErrorTabProps {
+  readonly error: TaskDetailError;
+  readonly childExecutionId?: string;
+  readonly onNavigateToAgentExecution?: (executionId: string) => void;
+  readonly className?: string;
+}
+
+const CATEGORY_LABELS: Record<string, string> = {
+  LLM_AUTHENTICATION_ERROR: "Authentication Error",
+  LLM_PERMISSION_DENIED: "Permission Denied",
+  LLM_MODEL_NOT_FOUND: "Model Not Found",
+  LLM_RATE_LIMIT: "Rate Limit",
+  LLM_BAD_REQUEST: "Bad Request",
+  LLM_UNPROCESSABLE_REQUEST: "Unprocessable Request",
+  LLM_SCHEMA_VALIDATION: "Schema Validation",
+  LLM_MISSING_API_KEY: "Missing API Key",
+  LLM_API_ERROR: "API Error",
+  LLM_UNKNOWN_ERROR: "Unknown Error",
+  HTTP_CLIENT_ERROR: "HTTP Client Error",
+  WORKFLOW_EXECUTION_FAILED: "Execution Failed",
+};
+
+function getCategoryLabel(category: string): string {
+  return CATEGORY_LABELS[category] ?? category.replace(/_/g, " ");
+}
+
+export const ErrorTab = memo(function ErrorTab({
+  error,
+  childExecutionId,
+  onNavigateToAgentExecution,
+  className,
+}: ErrorTabProps) {
+  const [showDetail, setShowDetail] = useState(false);
+  const toggleDetail = useCallback(() => setShowDetail(v => !v), []);
+  const hasDetail = !!error.detail;
+
+  return (
+    <div className={cn("flex flex-col gap-3", className)}>
+      <div className="rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2" role="alert">
+        <div className="flex items-center gap-2">
+          <p className="text-xs font-medium text-destructive">Error</p>
+          {error.category && (
+            <span className="rounded-sm bg-destructive/10 px-1.5 py-0.5 text-[10px] font-medium text-destructive">
+              {getCategoryLabel(error.category)}
+            </span>
+          )}
+        </div>
+        <p className="mt-1 whitespace-pre-wrap break-words text-xs text-destructive/80">{error.message}</p>
+      </div>
+
+      {hasDetail && (
+        <div>
+          <button
+            type="button"
+            onClick={toggleDetail}
+            className="text-[10px] text-muted-foreground hover:text-foreground transition-colors"
+          >
+            {showDetail ? "Hide" : "Show"} technical details
+          </button>
+          {showDetail && (
+            <pre className="mt-1 rounded-md border bg-muted/30 p-2 text-[10px] text-muted-foreground whitespace-pre-wrap break-words">
+              {error.detail}
+            </pre>
+          )}
+        </div>
+      )}
+
+      <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-xs">
+        <dt className="text-muted-foreground">Attempt</dt>
+        <dd className="tabular-nums text-foreground">
+          {error.attemptNumber}
+          {error.maxAttempts > 0 && <span className="text-muted-foreground"> / {error.maxAttempts}</span>}
+        </dd>
+
+        {error.durationMs > 0 && (
+          <>
+            <dt className="text-muted-foreground">Duration</dt>
+            <dd className="tabular-nums text-foreground">
+              {formatDuration(error.durationMs)}
+            </dd>
+          </>
+        )}
+
+        <dt className="text-muted-foreground">Retryable</dt>
+        <dd className="text-foreground">{error.willRetry ? "Yes" : "No"}</dd>
+      </dl>
+
+      {onNavigateToAgentExecution && childExecutionId && (
+        <button
+          type="button"
+          onClick={() => onNavigateToAgentExecution(childExecutionId)}
+          className={cn(
+            "inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5",
+            "text-xs font-medium transition-colors",
+            "bg-background text-foreground hover:bg-accent",
+          )}
+        >
+          View Agent Execution
+        </button>
+      )}
+    </div>
+  );
+});

package/src/workflow/execution-inspector/EventLogTab.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { memo } from "react";
+import { cn } from "@stigmer/theme";
+import type { WorkflowExecutionEvent } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/event_pb";
+import { formatTimestamp } from "../format-utils";
+
+export interface EventLogTabProps {
+  readonly events: readonly WorkflowExecutionEvent[];
+  readonly className?: string;
+}
+
+/**
+ * Filtered event log for a single task. Shows the raw event timeline
+ * for debugging — sequence number, timestamp, event type.
+ */
+export const EventLogTab = memo(function EventLogTab({ events, className }: EventLogTabProps) {
+  if (events.length === 0) {
+    return (
+      <p className={cn("text-xs text-muted-foreground py-4 text-center", className)}>
+        No events recorded for this task
+      </p>
+    );
+  }
+
+  return (
+    <div className={cn("flex flex-col text-xs", className)} role="list" aria-label="Task events">
+      {events.map((evt) => (
+        <div
+          key={evt.eventId}
+          className="flex items-baseline gap-2 border-b border-border/50 px-1 py-1.5 last:border-b-0"
+          role="listitem"
+        >
+          <span className="shrink-0 tabular-nums text-[10px] text-muted-foreground">
+            #{String(evt.sequenceNumber)}
+          </span>
+          <span className="min-w-0 flex-1 truncate text-foreground">
+            {formatPayloadLabel(evt)}
+          </span>
+          <span className="shrink-0 tabular-nums text-[10px] text-muted-foreground">
+            {formatTimestamp(evt.occurredAt)}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+});
+
+function formatPayloadLabel(evt: WorkflowExecutionEvent): string {
+  const p = evt.payload;
+  switch (p.case) {
+    case "taskStarted":
+      return p.value.attemptNumber > 1
+        ? `Task started (attempt ${p.value.attemptNumber})`
+        : "Task started";
+    case "taskCompleted":
+      return "Task completed";
+    case "taskFailed":
+      return p.value.willRetry ? "Task failed (will retry)" : "Task failed";
+    case "taskSkipped":
+      return `Task skipped${p.value.reason ? `: ${p.value.reason}` : ""}`;
+    case "taskRetrying":
+      return `Retrying → attempt ${p.value.nextAttempt}`;
+    case "agentCallStarted":
+      return `Agent call started: ${p.value.agentSlug}`;
+    case "agentCallProgress":
+      return `Agent progress: ${p.value.messagesCount} msgs, ${p.value.toolCallsCount} tools`;
+    case "agentCallCompleted":
+      return p.value.error ? "Agent call failed" : "Agent call completed";
+    case "approvalRequested":
+      return "Approval requested";
+    case "approvalResolved":
+      return `Approval resolved by ${p.value.resolvedBy}`;
+    case "artifactCreated":
+      return `Artifact: ${p.value.displayName}`;
+    default:
+      return p.case ?? "Unknown event";
+  }
+}

package/src/workflow/execution-inspector/ExecutionInspector.tsx

@@ -0,0 +1,312 @@
+"use client";
+
+import { memo, useCallback, useRef, useState } from "react";
+import { cn } from "@stigmer/theme";
+import type { WorkflowExecutionEvent } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/event_pb";
+import type { WorkflowTask, WorkflowPendingApproval } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/api_pb";
+import type { ApprovalAction } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import type { DerivedTaskState } from "../../internal/store/workflow-execution-event-store";
+import { Tabs, type TabItem } from "../../tabs/Tabs";
+import { useExecutionTaskDetail } from "./useExecutionTaskDetail";
+import { formatDuration, formatMicroUsd, formatTokenCount } from "../format-utils";
+import { SummaryTab } from "./SummaryTab";
+import { InputOutputTab } from "./InputOutputTab";
+import { ErrorTab } from "./ErrorTab";
+import { RetriesTab } from "./RetriesTab";
+import { AgentCallTab } from "./AgentCallTab";
+import { EventLogTab } from "./EventLogTab";
+import { WorkflowExecutionApprovalCard } from "../WorkflowExecutionApprovalCard";
+import { WorkflowTaskApprovalCard } from "../WorkflowTaskApprovalCard";
+import { WorkflowTaskApprovalSummary } from "../WorkflowTaskApprovalSummary";
+
+/** Props for {@link ExecutionInspector}. */
+export interface ExecutionInspectorProps {
+  /** Currently selected task name, or null when no task is selected. */
+  readonly selectedTaskName: string | null;
+  /** All events from the execution event stream. */
+  readonly events: readonly WorkflowExecutionEvent[];
+  /** Derived task states from the event store. */
+  readonly taskStates: ReadonlyMap<string, DerivedTaskState>;
+  /** Task snapshots from `execution.status.tasks` for full I/O data. */
+  readonly taskSnapshots?: readonly WorkflowTask[];
+  /** Callback when the user clicks "View Agent Execution" on an agent_call task. */
+  readonly onNavigateToAgentExecution?: (agentExecutionId: string) => void;
+  /** Pending agent tool approvals from `execution.status.pending_approvals`. */
+  readonly pendingApprovals?: readonly WorkflowPendingApproval[];
+  /** Callback to submit an agent tool approval decision. */
+  readonly onSubmitApproval?: (toolCallId: string, action: ApprovalAction, comment?: string) => Promise<unknown>;
+  /** Whether an approval submission is in flight. */
+  readonly isSubmittingApproval?: boolean;
+  /** Callback to submit a workflow-level human_input task decision. */
+  readonly onSubmitTaskApproval?: (
+    taskName: string,
+    outcome: string,
+    formData?: Record<string, unknown>,
+    comment?: string,
+  ) => Promise<unknown>;
+  /** Whether a task approval submission is in flight. */
+  readonly isSubmittingTaskApproval?: boolean;
+  /** Additional CSS class names. */
+  readonly className?: string;
+}
+
+type InspectorTabId = "summary" | "input" | "output" | "error" | "retries" | "agent" | "approval" | "events";
+
+/** Compute the system-suggested tab from the current task detail (DD-003). */
+function deriveAutoTab(detail: { status: string; error: unknown } | null): InspectorTabId {
+  if (!detail) return "summary";
+  if (detail.status === "failed" && detail.error) return "error";
+  if (detail.status === "waiting_approval") return "approval";
+  return "summary";
+}
+
+/**
+ * Runtime inspector panel for workflow execution tasks.
+ *
+ * Displays rich per-task detail in a tabbed interface when a task node
+ * is selected in the execution graph. Tabs are shown contextually based
+ * on available data.
+ *
+ * Designed for embedding in both the Stigmer Console and third-party
+ * dashboards — no routing, auth, or app-shell dependencies (DD-004).
+ *
+ * @example
+ * ```tsx
+ * <ExecutionInspector
+ *   selectedTaskName={selectedTask}
+ *   events={events}
+ *   taskStates={taskStates}
+ *   taskSnapshots={execution?.status?.tasks}
+ *   onNavigateToAgentExecution={(id) => router.push(`/sessions/${id}`)}
+ * />
+ * ```
+ */
+export const ExecutionInspector = memo(function ExecutionInspector({
+  selectedTaskName,
+  events,
+  taskStates,
+  taskSnapshots,
+  onNavigateToAgentExecution,
+  pendingApprovals,
+  onSubmitApproval,
+  isSubmittingApproval,
+  onSubmitTaskApproval,
+  isSubmittingTaskApproval,
+  className,
+}: ExecutionInspectorProps) {
+  const { detail } = useExecutionTaskDetail({
+    selectedTaskName,
+    events,
+    taskStates,
+    taskSnapshots,
+  });
+
+  const [activeTab, setActiveTab] = useState<InspectorTabId>(() => deriveAutoTab(detail));
+  const [prevSelectedTask, setPrevSelectedTask] = useState(selectedTaskName);
+  const [prevStatus, setPrevStatus] = useState(detail?.status);
+  const userPickedTabRef = useRef(false);
+
+  // Synchronous tab reset when the selected task changes.
+  // React's "adjusting state when a prop changes" pattern — runs during
+  // render so the correct tab is committed to the DOM on the first paint.
+  if (selectedTaskName !== prevSelectedTask) {
+    setPrevSelectedTask(selectedTaskName);
+    setPrevStatus(detail?.status);
+    userPickedTabRef.current = false;
+    setActiveTab(deriveAutoTab(detail));
+  }
+
+  // Synchronous auto-select on status transition (same task only).
+  // Navigates to Error/Approval when a live execution transitions.
+  if (selectedTaskName === prevSelectedTask && detail?.status !== prevStatus) {
+    setPrevStatus(detail?.status);
+    if (!userPickedTabRef.current) {
+      if (detail?.status === "failed" && detail.error) {
+        setActiveTab("error");
+      } else if (detail?.status === "waiting_approval") {
+        setActiveTab("approval");
+      }
+    }
+  }
+
+  const handleTabChange = useCallback((tabId: string) => {
+    userPickedTabRef.current = true;
+    setActiveTab(tabId as InspectorTabId);
+  }, []);
+
+  if (!selectedTaskName || !detail) {
+    return (
+      <div className={cn("flex flex-1 flex-col items-center justify-center px-4 py-6 text-center", className)}>
+        <SelectNodeIcon />
+        <p className="mt-2 text-xs text-[var(--stgm-muted-foreground,#737373)]">
+          Click a node to view execution details
+        </p>
+      </div>
+    );
+  }
+
+  // Filter pending approvals relevant to the selected task (match by childExecutionId)
+  const taskApprovals = pendingApprovals?.filter(
+    (pa) => pa.childAgentExecutionId === detail.agentCall?.childExecutionId,
+  ) ?? [];
+
+  const tabs = buildVisibleTabs(detail, taskApprovals.length);
+  const effectiveTab = tabs.some((t) => t.id === activeTab) ? activeTab : "summary";
+
+  const BZ = BigInt(0);
+
+  return (
+    <div className={cn("flex h-full flex-col", className)}>
+      {/* Header: task name + kind + compact metrics */}
+      <div className="flex flex-col gap-1 border-b border-[var(--stgm-border,#e5e5e5)] px-3 py-2.5">
+        <div className="flex items-center gap-2">
+          <h3 className="min-w-0 flex-1 truncate text-sm font-semibold text-[var(--stgm-foreground,#1a1a2e)]">
+            {detail.taskName}
+          </h3>
+          <span className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+            {detail.displayName}
+          </span>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px]">
+          <StatusBadge status={detail.status} />
+          {detail.summary.durationMs > 0 && (
+            <span className="tabular-nums text-muted-foreground">{formatDuration(detail.summary.durationMs)}</span>
+          )}
+          {detail.summary.costMicros > BZ && (
+            <span className="tabular-nums text-muted-foreground">{formatMicroUsd(detail.summary.costMicros)}</span>
+          )}
+          {detail.summary.totalTokens > BZ && (
+            <span className="tabular-nums text-muted-foreground">{formatTokenCount(detail.summary.totalTokens)} tok</span>
+          )}
+        </div>
+      </div>
+
+      {/* Tabs + content */}
+      <Tabs
+        tabs={tabs}
+        activeTab={effectiveTab}
+        onTabChange={handleTabChange}
+        aria-label="Task execution details"
+        className="min-h-0 flex-1"
+      >
+        <div className="h-full min-h-0 overflow-y-auto px-3 py-3">
+          {effectiveTab === "summary" && <SummaryTab summary={detail.summary} />}
+          {effectiveTab === "input" && <InputOutputTab data={detail.input} label="Input" />}
+          {effectiveTab === "output" && <InputOutputTab data={detail.output} label="Output" />}
+          {effectiveTab === "error" && detail.error && (
+            <ErrorTab
+              error={detail.error}
+              childExecutionId={detail.agentCall?.childExecutionId}
+              onNavigateToAgentExecution={onNavigateToAgentExecution}
+            />
+          )}
+          {effectiveTab === "retries" && detail.retries && <RetriesTab retries={detail.retries} />}
+          {effectiveTab === "agent" && detail.agentCall && (
+            <AgentCallTab
+              agentCall={detail.agentCall}
+              taskStatus={detail.status}
+              isTabActive={effectiveTab === "agent"}
+              onNavigateToAgentExecution={onNavigateToAgentExecution}
+            />
+          )}
+          {effectiveTab === "approval" && taskApprovals.length > 0 && onSubmitApproval && (
+            <div className="space-y-2">
+              {taskApprovals.map((pa) => (
+                <WorkflowExecutionApprovalCard
+                  key={pa.approval?.toolCallId ?? pa.childAgentExecutionId}
+                  prompt={pa.approval?.message || `Tool "${pa.approval?.toolName}" requires approval`}
+                  toolCallId={pa.approval?.toolCallId ?? ""}
+                  approvers={[]}
+                  timeoutSeconds={0}
+                  onSubmitApproval={onSubmitApproval}
+                  isSubmitting={isSubmittingApproval ?? false}
+                />
+              ))}
+            </div>
+          )}
+          {effectiveTab === "approval" && detail.approval && (
+            detail.status === "waiting_approval" && onSubmitTaskApproval ? (
+              // Gate still awaiting a decision — collect one.
+              <WorkflowTaskApprovalCard
+                taskName={detail.taskName}
+                prompt={detail.approval.prompt}
+                outcomes={detail.approval.outcomes}
+                formSchema={detail.approval.formSchema ?? undefined}
+                onSubmit={onSubmitTaskApproval}
+                isSubmitting={isSubmittingTaskApproval ?? false}
+              />
+            ) : (
+              // Gate resolved — present the captured decision read-only so a
+              // settled gate is never offered for a second decision.
+              <WorkflowTaskApprovalSummary
+                taskName={detail.taskName}
+                prompt={detail.approval.prompt}
+                outcomes={detail.approval.outcomes}
+                decision={detail.approval.decision}
+              />
+            )
+          )}
+          {effectiveTab === "events" && <EventLogTab events={detail.eventLog} />}
+        </div>
+      </Tabs>
+    </div>
+  );
+});
+
+// ---------------------------------------------------------------------------
+// Tab visibility
+// ---------------------------------------------------------------------------
+
+function buildVisibleTabs(
+  detail: NonNullable<ReturnType<typeof useExecutionTaskDetail>["detail"]>,
+  approvalCount: number,
+): TabItem[] {
+  const tabs: TabItem[] = [{ id: "summary", label: "Summary" }];
+
+  if (detail.input) tabs.push({ id: "input", label: "Input" });
+  if (detail.output) tabs.push({ id: "output", label: "Output" });
+  if (detail.error) tabs.push({ id: "error", label: "Error" });
+  if (detail.retries && detail.retries.attempts.length > 1) {
+    tabs.push({ id: "retries", label: "Retries", badge: detail.retries.attempts.length });
+  }
+  if (detail.agentCall) tabs.push({ id: "agent", label: "Agent" });
+  if (approvalCount > 0 || detail.approval) {
+    tabs.push({ id: "approval", label: "Approval", badge: approvalCount || undefined });
+  }
+
+  tabs.push({ id: "events", label: "Events", badge: detail.eventLog.length });
+
+  return tabs;
+}
+
+// ---------------------------------------------------------------------------
+// Sub-components
+// ---------------------------------------------------------------------------
+
+const STATUS_COLORS: Record<DerivedTaskState["status"], string> = {
+  pending: "bg-[var(--stgm-muted,#e5e5e5)] text-[var(--stgm-muted-foreground,#737373)]",
+  running: "bg-[var(--stgm-primary,#6366f1)]/10 text-[var(--stgm-primary,#6366f1)]",
+  completed: "bg-[var(--stgm-success,#22c55e)]/10 text-[var(--stgm-success,#22c55e)]",
+  failed: "bg-[var(--stgm-destructive,#ef4444)]/10 text-[var(--stgm-destructive,#ef4444)]",
+  skipped: "bg-[var(--stgm-muted,#e5e5e5)] text-[var(--stgm-muted-foreground,#737373)]",
+  retrying: "bg-[var(--stgm-muted,#e5e5e5)] text-[var(--stgm-muted-foreground,#737373)]",
+  waiting_approval: "bg-[var(--stgm-warning,#f59e0b)]/10 text-[var(--stgm-warning,#f59e0b)]",
+};
+
+function StatusBadge({ status }: { readonly status: DerivedTaskState["status"] }) {
+  return (
+    <span className={cn("rounded-full px-2 py-0.5 text-[10px] font-medium", STATUS_COLORS[status])}>
+      {status.replace(/_/g, " ")}
+    </span>
+  );
+}
+
+function SelectNodeIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-[var(--stgm-muted-foreground,#737373)]" aria-hidden="true">
+      <rect x="2" y="2" width="16" height="16" rx="3" />
+      <path d="M7 10h6M10 7v6" />
+    </svg>
+  );
+}