@stigmer/react 1.0.3 → 2.0.0

package/src/workflow/execution/useWaterfallEntries.ts

@@ -0,0 +1,124 @@
+"use client";
+
+/**
+ * React behavior hook for the execution waterfall timeline.
+ *
+ * Derives waterfall entries from the event stream, manages live-growing
+ * bars via `requestAnimationFrame` during streaming, and provides a
+ * stable `scrollToTask` callback for graph-timeline synchronization.
+ *
+ * Follows DD-003 (headless-first) and DD-010 (referential stability).
+ *
+ * @since T07 (Execution Waterfall Timeline)
+ */
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { WorkflowExecutionEvent } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/event_pb";
+import type { WorkflowEventStreamState } from "../../internal/store/workflow-execution-event-store";
+import {
+  deriveWaterfallEntries,
+  deriveWaterfallScale,
+  type WaterfallEntry,
+  type WaterfallScale,
+} from "./derive-waterfall-entries";
+
+// ---------------------------------------------------------------------------
+// Public types
+// ---------------------------------------------------------------------------
+
+export interface UseWaterfallEntriesOptions {
+  /** Events ordered by sequence_number ascending. */
+  readonly events: readonly WorkflowExecutionEvent[];
+  /** Current stream lifecycle state. */
+  readonly streamState: WorkflowEventStreamState;
+  /** ISO 8601 timestamp of execution start. */
+  readonly executionStartIso: string;
+  /** Total execution duration in ms (for completed executions). */
+  readonly executionDurationMs?: number;
+}
+
+export interface UseWaterfallEntriesReturn {
+  /** Waterfall entries (one per task, ordered by start time). */
+  readonly entries: readonly WaterfallEntry[];
+  /** Time axis scale specification. */
+  readonly scale: WaterfallScale;
+  /** True when the execution is live (bars may be growing). */
+  readonly isLive: boolean;
+  /** Current elapsed ms from execution start (updates via rAF when live). */
+  readonly nowMs: number;
+}
+
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+
+const EMPTY_ENTRIES: readonly WaterfallEntry[] = [];
+const EMPTY_SCALE: WaterfallScale = { totalMs: 1000, ticks: [0, 1000], labelEveryN: 1 };
+
+export function useWaterfallEntries({
+  events,
+  streamState,
+  executionStartIso,
+  executionDurationMs,
+}: UseWaterfallEntriesOptions): UseWaterfallEntriesReturn {
+  const isLive = streamState.stage === "streaming";
+  const execStartEpoch = useMemo(
+    () => (executionStartIso ? new Date(executionStartIso).getTime() : 0),
+    [executionStartIso],
+  );
+
+  // --- Live clock (rAF-driven nowMs for growing bars) ---
+
+  const [nowMs, setNowMs] = useState(() =>
+    execStartEpoch > 0 ? Date.now() - execStartEpoch : 0,
+  );
+  const rafRef = useRef<number>(0);
+
+  useEffect(() => {
+    if (!isLive || execStartEpoch === 0) {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+      return;
+    }
+
+    let mounted = true;
+    const tick = () => {
+      if (!mounted) return;
+      setNowMs(Date.now() - execStartEpoch);
+      rafRef.current = requestAnimationFrame(tick);
+    };
+    rafRef.current = requestAnimationFrame(tick);
+
+    return () => {
+      mounted = false;
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+  }, [isLive, execStartEpoch]);
+
+  // When execution completes, snap to final duration
+  useEffect(() => {
+    if (!isLive && executionDurationMs != null && executionDurationMs > 0) {
+      setNowMs(executionDurationMs);
+    }
+  }, [isLive, executionDurationMs]);
+
+  // --- Derive entries (memoized on event list length) ---
+
+  const entries = useMemo(() => {
+    if (events.length === 0) return EMPTY_ENTRIES;
+    return deriveWaterfallEntries(events, executionStartIso);
+  }, [events, executionStartIso]);
+
+  // --- Derive scale ---
+
+  const effectiveDuration = isLive ? nowMs : (executionDurationMs ?? nowMs);
+
+  const scale = useMemo(() => {
+    if (entries.length === 0) return EMPTY_SCALE;
+    return deriveWaterfallScale(entries, effectiveDuration);
+  }, [entries, effectiveDuration]);
+
+  return useMemo(
+    () => ({ entries, scale, isLive, nowMs }),
+    [entries, scale, isLive, nowMs],
+  );
+}

package/src/workflow/execution-comparison/ComparisonSummaryCards.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { memo } from "react";
+import { cn } from "@stigmer/theme";
+import { formatDuration, formatMicroUsd, formatTokenCount } from "../format-utils";
+import type { ExecutionComparison } from "./types";
+
+/** Props for {@link ComparisonSummaryCards}. */
+export interface ComparisonSummaryCardsProps {
+  readonly comparison: ExecutionComparison;
+  readonly className?: string;
+}
+
+interface CardData {
+  readonly label: string;
+  readonly baseValue: string;
+  readonly compareValue: string;
+  readonly delta: string;
+  readonly deltaDirection: "better" | "worse" | "neutral";
+}
+
+const BIGINT_ZERO = BigInt(0);
+
+/**
+ * Renders 4 summary cards showing execution-level deltas between
+ * the base and compare runs: Duration, Cost, Tokens, and Task Outcomes.
+ *
+ * Positive delta values are color-coded: green = compare was better,
+ * red = compare was worse, neutral gray = equal.
+ */
+export const ComparisonSummaryCards = memo(function ComparisonSummaryCards({
+  comparison,
+  className,
+}: ComparisonSummaryCardsProps) {
+  const cards = buildCards(comparison);
+
+  return (
+    <div
+      className={cn("grid grid-cols-2 gap-3 lg:grid-cols-4", className)}
+      aria-label="Comparison summary"
+    >
+      {cards.map((card) => (
+        <div
+          key={card.label}
+          className="rounded-lg border border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-card,#fff)] p-3"
+        >
+          <span className="text-[10px] font-medium uppercase tracking-wide text-[var(--stgm-muted-foreground,#737373)]">
+            {card.label}
+          </span>
+          <div className="mt-1.5 flex items-baseline gap-2">
+            <span className="text-sm font-semibold text-[var(--stgm-foreground,#1a1a2e)]">
+              {card.baseValue}
+            </span>
+            <span className="text-[10px] text-[var(--stgm-muted-foreground,#737373)]">
+              vs {card.compareValue}
+            </span>
+          </div>
+          <div className="mt-1">
+            <span
+              className={cn(
+                "text-xs font-medium",
+                card.deltaDirection === "better" && "text-[var(--stgm-success,#16a34a)]",
+                card.deltaDirection === "worse" && "text-[var(--stgm-destructive,#dc2626)]",
+                card.deltaDirection === "neutral" && "text-[var(--stgm-muted-foreground,#737373)]",
+              )}
+            >
+              {card.delta}
+            </span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+});
+
+function buildCards(comparison: ExecutionComparison): CardData[] {
+  const { baseRow, compareRow, durationDeltaMs, costDeltaMicros, tokensDelta } = comparison;
+
+  const durationCard: CardData = {
+    label: "Duration",
+    baseValue: baseRow.durationMs != null ? formatDuration(baseRow.durationMs) : "—",
+    compareValue: compareRow.durationMs != null ? formatDuration(compareRow.durationMs) : "—",
+    delta: formatDelta(durationDeltaMs, (ms) => formatDuration(Math.abs(ms))),
+    deltaDirection: durationDeltaMs == null ? "neutral" : durationDeltaMs > 0 ? "worse" : durationDeltaMs < 0 ? "better" : "neutral",
+  };
+
+  const costCard: CardData = {
+    label: "Cost",
+    baseValue: baseRow.costMicros > BIGINT_ZERO ? formatMicroUsd(baseRow.costMicros) : "—",
+    compareValue: compareRow.costMicros > BIGINT_ZERO ? formatMicroUsd(compareRow.costMicros) : "—",
+    delta: formatBigintDelta(costDeltaMicros, formatMicroUsd),
+    deltaDirection: costDeltaMicros === BIGINT_ZERO ? "neutral" : costDeltaMicros > BIGINT_ZERO ? "worse" : "better",
+  };
+
+  const tokensCard: CardData = {
+    label: "Tokens",
+    baseValue: baseRow.totalTokens > BIGINT_ZERO ? formatTokenCount(baseRow.totalTokens) : "—",
+    compareValue: compareRow.totalTokens > BIGINT_ZERO ? formatTokenCount(compareRow.totalTokens) : "—",
+    delta: formatBigintDelta(tokensDelta, formatTokenCount),
+    deltaDirection: tokensDelta === BIGINT_ZERO ? "neutral" : tokensDelta > BIGINT_ZERO ? "worse" : "better",
+  };
+
+  const baseChanged = comparison.tasks.filter((t) => t.statusChanged).length;
+  const tasksCard: CardData = {
+    label: "Task Outcomes",
+    baseValue: `${baseRow.completedTaskCount}/${baseRow.taskCount}`,
+    compareValue: `${compareRow.completedTaskCount}/${compareRow.taskCount}`,
+    delta: baseChanged === 0 ? "All identical" : `${baseChanged} differ`,
+    deltaDirection: baseChanged === 0 ? "neutral" : "worse",
+  };
+
+  return [durationCard, costCard, tokensCard, tasksCard];
+}
+
+function formatDelta(value: number | null, formatter: (v: number) => string): string {
+  if (value == null) return "—";
+  if (value === 0) return "No change";
+  const sign = value > 0 ? "+" : "−";
+  return `${sign}${formatter(Math.abs(value))}`;
+}
+
+function formatBigintDelta(value: bigint, formatter: (v: bigint) => string): string {
+  if (value === BIGINT_ZERO) return "No change";
+  const sign = value > BIGINT_ZERO ? "+" : "−";
+  const abs = value < BIGINT_ZERO ? -value : value;
+  return `${sign}${formatter(abs)}`;
+}

package/src/workflow/execution-comparison/ExecutionComparisonPicker.tsx

@@ -0,0 +1,240 @@
+"use client";
+
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { cn } from "@stigmer/theme";
+import { ExecutionPhase } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/enum_pb";
+import { useWorkflowExecutionList } from "../useWorkflowExecutionList";
+import { WorkflowExecutionPhaseBadge } from "../WorkflowExecutionPhaseBadge";
+import { formatDuration } from "../format-utils";
+
+/** Props for {@link ExecutionComparisonPicker}. */
+export interface ExecutionComparisonPickerProps {
+  /** Whether the picker dialog is open. */
+  readonly open: boolean;
+  /** Workflow ID to scope execution list. */
+  readonly workflowId: string;
+  /** The base execution ID (already selected, shown as context). */
+  readonly baseExecutionId: string;
+  /** The phase of the base execution (used for smart pre-selection). */
+  readonly basePhase: ExecutionPhase;
+  /** Called when the user confirms a comparison target. */
+  readonly onConfirm: (compareExecutionId: string) => void;
+  /** Called when the dialog is dismissed. */
+  readonly onClose: () => void;
+}
+
+const TERMINAL_PHASES = new Set([
+  ExecutionPhase.EXECUTION_COMPLETED,
+  ExecutionPhase.EXECUTION_FAILED,
+  ExecutionPhase.EXECUTION_CANCELLED,
+  ExecutionPhase.EXECUTION_TERMINATED,
+]);
+
+/**
+ * Dialog for selecting an execution to compare against.
+ *
+ * Shows recent executions of the same workflow, sorted by start time
+ * (newest first). Pre-selects the most recent execution with a different
+ * phase from the base (e.g., if base is FAILED, pre-selects last COMPLETED).
+ *
+ * Uses native `<dialog>` for accessibility and focus trapping.
+ */
+export const ExecutionComparisonPicker = memo(function ExecutionComparisonPicker({
+  open,
+  workflowId,
+  baseExecutionId,
+  basePhase,
+  onConfirm,
+  onClose,
+}: ExecutionComparisonPickerProps) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+
+  const { executions, isLoading } = useWorkflowExecutionList({
+    workflowId,
+    pageSize: 20,
+  });
+
+  const candidates = useMemo(
+    () =>
+      executions.filter(
+        (e) =>
+          e.metadata?.id !== baseExecutionId &&
+          TERMINAL_PHASES.has(e.status?.phase ?? ExecutionPhase.EXECUTION_PHASE_UNSPECIFIED),
+      ),
+    [executions, baseExecutionId],
+  );
+
+  useEffect(() => {
+    if (!open || candidates.length === 0) return;
+    if (selectedId) return;
+
+    const preferredPhase =
+      basePhase === ExecutionPhase.EXECUTION_FAILED
+        ? ExecutionPhase.EXECUTION_COMPLETED
+        : ExecutionPhase.EXECUTION_FAILED;
+
+    const preferred = candidates.find(
+      (e) => e.status?.phase === preferredPhase,
+    );
+    const fallback = candidates[0];
+    setSelectedId((preferred ?? fallback)?.metadata?.id ?? null);
+  }, [open, candidates, selectedId, basePhase]);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open) {
+      if (!dialog.open) dialog.showModal();
+    } else {
+      if (dialog.open) dialog.close();
+    }
+  }, [open]);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const handleClose = () => onClose();
+    dialog.addEventListener("close", handleClose);
+    return () => dialog.removeEventListener("close", handleClose);
+  }, [onClose]);
+
+  useEffect(() => {
+    if (!open) setSelectedId(null);
+  }, [open]);
+
+  const handleConfirm = useCallback(() => {
+    if (selectedId) onConfirm(selectedId);
+  }, [selectedId, onConfirm]);
+
+  const handleBackdropClick = useCallback(
+    (e: React.MouseEvent<HTMLDialogElement>) => {
+      if (e.target === dialogRef.current) onClose();
+    },
+    [onClose],
+  );
+
+  return (
+    <dialog
+      ref={dialogRef}
+      className={cn(
+        "stgm m-auto max-h-[70vh] w-full max-w-md rounded-lg border border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-background,#fff)] p-0 shadow-xl",
+        "backdrop:bg-black/40",
+      )}
+      onClick={handleBackdropClick}
+      aria-label="Select execution to compare"
+    >
+      <div className="flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between border-b border-[var(--stgm-border,#e5e5e5)] px-4 py-3">
+          <span className="text-sm font-semibold text-[var(--stgm-foreground,#1a1a2e)]">
+            Compare with...
+          </span>
+          <button
+            type="button"
+            onClick={onClose}
+            className="flex h-6 w-6 items-center justify-center rounded text-[var(--stgm-muted-foreground,#737373)] hover:bg-[var(--stgm-muted,#f5f5f5)] hover:text-[var(--stgm-foreground,#1a1a2e)]"
+            aria-label="Close"
+          >
+            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
+              <path d="M2 2l8 8M10 2l-8 8" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Execution list */}
+        <div className="max-h-[50vh] overflow-y-auto p-2" role="listbox" aria-label="Recent executions">
+          {isLoading && (
+            <div className="flex items-center justify-center py-8 text-xs text-[var(--stgm-muted-foreground,#737373)]">
+              Loading executions...
+            </div>
+          )}
+          {!isLoading && candidates.length === 0 && (
+            <div className="flex items-center justify-center py-8 text-xs text-[var(--stgm-muted-foreground,#737373)]">
+              No other completed executions found.
+            </div>
+          )}
+          {candidates.map((exec) => {
+            const id = exec.metadata?.id ?? "";
+            const name = exec.metadata?.name || exec.metadata?.slug || id;
+            const phase = exec.status?.phase ?? ExecutionPhase.EXECUTION_PHASE_UNSPECIFIED;
+            const startedAt = exec.status?.startedAt;
+            const completedAt = exec.status?.completedAt;
+            const durationMs = getDurationMs(startedAt, completedAt);
+            const isSelected = id === selectedId;
+
+            return (
+              <button
+                key={id}
+                type="button"
+                role="option"
+                aria-selected={isSelected}
+                onClick={() => setSelectedId(id)}
+                className={cn(
+                  "flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm transition-colors",
+                  isSelected
+                    ? "bg-[var(--stgm-primary,#4f46e5)]/10 ring-1 ring-[var(--stgm-primary,#4f46e5)]"
+                    : "hover:bg-[var(--stgm-muted,#f5f5f5)]",
+                )}
+              >
+                <WorkflowExecutionPhaseBadge phase={phase} />
+                <div className="flex flex-1 flex-col gap-0.5 overflow-hidden">
+                  <span className="truncate text-xs font-medium text-[var(--stgm-foreground,#1a1a2e)]">
+                    {name}
+                  </span>
+                  <span className="text-[10px] text-[var(--stgm-muted-foreground,#737373)]">
+                    {startedAt ? formatRelative(startedAt) : "—"}
+                    {durationMs != null && ` · ${formatDuration(durationMs)}`}
+                  </span>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-end gap-2 border-t border-[var(--stgm-border,#e5e5e5)] px-4 py-3">
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-md px-3 py-1.5 text-xs font-medium text-[var(--stgm-muted-foreground,#737373)] hover:bg-[var(--stgm-muted,#f5f5f5)] hover:text-[var(--stgm-foreground,#1a1a2e)]"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={handleConfirm}
+            disabled={!selectedId}
+            className={cn(
+              "rounded-md px-3 py-1.5 text-xs font-medium",
+              selectedId
+                ? "bg-[var(--stgm-primary,#4f46e5)] text-[var(--stgm-primary-foreground,#fff)] hover:bg-[var(--stgm-primary,#4f46e5)]/90"
+                : "cursor-not-allowed bg-[var(--stgm-muted,#f5f5f5)] text-[var(--stgm-muted-foreground,#737373)]",
+            )}
+          >
+            Compare
+          </button>
+        </div>
+      </div>
+    </dialog>
+  );
+});
+
+function getDurationMs(startedAt: string | undefined, completedAt: string | undefined): number | null {
+  if (!startedAt || !completedAt) return null;
+  const s = new Date(startedAt).getTime();
+  const e = new Date(completedAt).getTime();
+  if (Number.isNaN(s) || Number.isNaN(e)) return null;
+  return e - s;
+}
+
+function formatRelative(iso: string): string {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  const now = Date.now();
+  const diff = now - d.getTime();
+  if (diff < 60_000) return "just now";
+  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;
+  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`;
+  return d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+}

package/src/workflow/execution-comparison/ExecutionComparisonView.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import { memo } from "react";
+import { cn } from "@stigmer/theme";
+import { WorkflowExecutionPhaseBadge } from "../WorkflowExecutionPhaseBadge";
+import { useExecutionComparison } from "./useExecutionComparison";
+import { ComparisonSummaryCards } from "./ComparisonSummaryCards";
+import { TaskComparisonTable } from "./TaskComparisonTable";
+
+/** Props for {@link ExecutionComparisonView}. */
+export interface ExecutionComparisonViewProps {
+  /** The "baseline" execution ID (typically the run being investigated). */
+  readonly baseExecutionId: string;
+  /** The "compare" execution ID (typically a reference/successful run). */
+  readonly compareExecutionId: string;
+  /** Called when the user clicks "Back" to exit comparison mode. */
+  readonly onBack: () => void;
+  /** Additional CSS classes for the root container. */
+  readonly className?: string;
+}
+
+/**
+ * Top-level composed comparison view showing summary deltas and a
+ * per-task comparison table between two workflow executions.
+ *
+ * Self-contained: fetches both executions internally via
+ * {@link useExecutionComparison}. Zero Console dependencies.
+ *
+ * Layout:
+ * ```
+ * Header (back button + execution labels)
+ * ComparisonSummaryCards (4 delta cards)
+ * TaskComparisonTable (per-task status/duration/cost)
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <ExecutionComparisonView
+ *   baseExecutionId="wfx_failed_123"
+ *   compareExecutionId="wfx_success_456"
+ *   onBack={() => setCompareMode(false)}
+ * />
+ * ```
+ */
+export const ExecutionComparisonView = memo(function ExecutionComparisonView({
+  baseExecutionId,
+  compareExecutionId,
+  onBack,
+  className,
+}: ExecutionComparisonViewProps) {
+  const { comparison, isLoading, error } = useExecutionComparison({
+    baseId: baseExecutionId,
+    compareId: compareExecutionId,
+  });
+
+  if (isLoading) {
+    return (
+      <div className={cn("flex items-center justify-center py-16", className)}>
+        <span className="text-sm text-[var(--stgm-muted-foreground,#737373)]">
+          Loading comparison...
+        </span>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={cn("flex flex-col items-center justify-center gap-2 py-16", className)}>
+        <span className="text-sm text-[var(--stgm-destructive,#dc2626)]">
+          Failed to load executions
+        </span>
+        <span className="text-xs text-[var(--stgm-muted-foreground,#737373)]">
+          {error.message}
+        </span>
+      </div>
+    );
+  }
+
+  if (!comparison) return null;
+
+  return (
+    <section
+      className={cn("flex flex-col gap-4", className)}
+      aria-label="Execution comparison"
+    >
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <button
+          type="button"
+          onClick={onBack}
+          className="flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium text-[var(--stgm-muted-foreground,#737373)] hover:bg-[var(--stgm-muted,#f5f5f5)] hover:text-[var(--stgm-foreground,#1a1a2e)]"
+          aria-label="Back to execution"
+        >
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+            <path d="M7.5 9L4.5 6l3-3" />
+          </svg>
+          Back
+        </button>
+
+        <div className="flex flex-1 items-center gap-2">
+          <ExecutionLabel
+            name={comparison.baseRow.name || baseExecutionId}
+            phase={comparison.baseRow.phase}
+            label="Base"
+          />
+          <span className="text-xs text-[var(--stgm-muted-foreground,#737373)]">vs</span>
+          <ExecutionLabel
+            name={comparison.compareRow.name || compareExecutionId}
+            phase={comparison.compareRow.phase}
+            label="Compare"
+          />
+        </div>
+      </div>
+
+      {/* Divergence callout */}
+      {comparison.divergencePoint && (
+        <div className="flex items-center gap-2 rounded-md border border-[var(--stgm-warning,#f59e0b)]/30 bg-[var(--stgm-warning,#f59e0b)]/5 px-3 py-2">
+          <span className="inline-block h-2 w-2 rounded-full bg-[var(--stgm-warning,#f59e0b)]" aria-hidden="true" />
+          <span className="text-xs text-[var(--stgm-foreground,#1a1a2e)]">
+            First divergence at <strong>{comparison.divergencePoint}</strong>
+          </span>
+        </div>
+      )}
+
+      {/* Summary cards */}
+      <ComparisonSummaryCards comparison={comparison} />
+
+      {/* Task table */}
+      <TaskComparisonTable comparison={comparison} />
+    </section>
+  );
+});
+
+function ExecutionLabel({
+  name,
+  phase,
+  label,
+}: {
+  name: string;
+  phase: number;
+  label: string;
+}) {
+  return (
+    <div className="flex items-center gap-1.5">
+      <span className="text-[10px] font-medium uppercase tracking-wide text-[var(--stgm-muted-foreground,#737373)]">
+        {label}:
+      </span>
+      <WorkflowExecutionPhaseBadge phase={phase} />
+      <span className="max-w-[10rem] truncate text-xs font-medium text-[var(--stgm-foreground,#1a1a2e)]" title={name}>
+        {name}
+      </span>
+    </div>
+  );
+}