@stigmer/react 3.12.0 → 3.12.2

package/src/skill/useSkillVersions.ts

@@ -3,18 +3,15 @@
 import { useCallback, useMemo } from "react";
 import { create } from "@bufbuild/protobuf";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
-import { StigmerError } from "@stigmer/sdk";
 import {
   ListSkillVersionsInputSchema,
   type SkillVersionEntry as ProtoSkillVersionEntry,
 } from "@stigmer/protos/ai/stigmer/agentic/skill/v1/io_pb";
 import { useStigmer } from "../hooks.js";
+import { isUnimplemented } from "../internal/isUnimplemented.js";
 import { useFetch } from "../internal/useFetch.js";
 import type { VersionEntry } from "../version-history/types.js";
 
-// gRPC/Connect Code.Unimplemented = 12
-const CODE_UNIMPLEMENTED = 12;
-
 // ---------------------------------------------------------------------------
 // Public types
 // ---------------------------------------------------------------------------
@@ -156,10 +153,3 @@ function mapProtoToVersionEntry(proto: ProtoSkillVersionEntry): VersionEntry {
   };
 }
 
-// ---------------------------------------------------------------------------
-// Error detection
-// ---------------------------------------------------------------------------
-
-function isUnimplemented(err: unknown): boolean {
-  return err instanceof StigmerError && err.connectCode === CODE_UNIMPLEMENTED;
-}

package/src/styles.css

@@ -331,6 +331,40 @@
     animation: stgm-running-pulse 2s ease-in-out infinite;
   }
 
+  /* Ambient liveness (stigmer#277): a left-to-right light sweep across the
+     text of whatever is currently in flight — a running tool's label, the
+     thinking indicator, the thread's bottom status line. The sweep rides the
+     WORDS describing the current activity (not a spinner beside them), so
+     the screen is never still while the agent is alive.
+
+     Token-driven: the text settles to the muted base with a foreground-
+     colored band sweeping through, which reads correctly in both color
+     modes and every preset. background-clip:text needs the -webkit- prefix
+     in Safari; the transparent fill is what lets the gradient show through
+     the glyphs. */
+  @keyframes stgm-shimmer {
+    to {
+      background-position: -200% 0;
+    }
+  }
+
+  .stgm-shimmer-label {
+    background-image: linear-gradient(
+      90deg,
+      var(--stgm-muted-foreground) 0%,
+      var(--stgm-muted-foreground) 35%,
+      var(--stgm-foreground) 50%,
+      var(--stgm-muted-foreground) 65%,
+      var(--stgm-muted-foreground) 100%
+    );
+    background-size: 200% 100%;
+    background-position: 0 0;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    animation: stgm-shimmer 2s linear infinite;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .stgm {
       --stgm-motion-duration: 0ms;
@@ -344,6 +378,15 @@
       animation-iteration-count: 1 !important;
       transition-duration: 0.01ms !important;
     }
+
+    /* The shimmer is pure decoration: under reduced motion the label drops
+       the clipped gradient entirely and reads as ordinary text (DD-015) —
+       a frozen gradient band would look like a rendering glitch. */
+    .stgm-shimmer-label {
+      background-image: none;
+      color: inherit;
+      animation: none;
+    }
   }
 }
 

package/src/version-history/VersionTimelineEntry.tsx

@@ -3,6 +3,7 @@
 import { cn } from "@stigmer/theme";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import type { VersionTimelineEntryProps } from "./types.js";
+import { formatRelativeTime } from "../activity/format-relative-time.js";
 
 /**
  * A single row in a version timeline.
@@ -205,27 +206,6 @@ function GitProvenanceRow({
 // Utilities
 // ---------------------------------------------------------------------------
 
-function formatRelativeTime(date: Date): string {
-  const now = Date.now();
-  const diffMs = now - date.getTime();
-  const diffSec = Math.floor(diffMs / 1000);
-  const diffMin = Math.floor(diffSec / 60);
-  const diffHr = Math.floor(diffMin / 60);
-  const diffDays = Math.floor(diffHr / 24);
-
-  if (diffSec < 60) return "just now";
-  if (diffMin < 60) return `${diffMin}m ago`;
-  if (diffHr < 24) return `${diffHr}h ago`;
-  if (diffDays < 7) return `${diffDays}d ago`;
-  if (diffDays < 30) return `${Math.floor(diffDays / 7)}w ago`;
-
-  return date.toLocaleDateString(undefined, {
-    month: "short",
-    day: "numeric",
-    year: date.getFullYear() !== new Date().getFullYear() ? "numeric" : undefined,
-  });
-}
-
 function normalizeGitUrl(url: string): string | null {
   if (!url) return null;
   const cleaned = url.replace(/\.git$/, "");

package/src/workflow/FailedRunsWidget.tsx

@@ -4,6 +4,7 @@ import { memo } from "react";
 import type { WorkflowExecution } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/api_pb";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import { cn } from "@stigmer/theme";
+import { formatRelativeTime } from "../activity/format-relative-time.js";
 
 export interface FailedRunsWidgetProps {
   /** Recent failed executions to display. */
@@ -14,14 +15,6 @@ export interface FailedRunsWidgetProps {
   readonly className?: string;
 }
 
-function formatTimeAgo(date: Date): string {
-  const seconds = Math.floor((Date.now() - date.getTime()) / 1000);
-  if (seconds < 60) return "just now";
-  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
-  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
-  return `${Math.floor(seconds / 86400)}d ago`;
-}
-
 /**
  * Dashboard widget showing recent failed workflow executions.
  *
@@ -85,7 +78,7 @@ export const FailedRunsWidget = memo(function FailedRunsWidget({
                     </p>
                     {failedDate && (
                       <p className="stg:mt-0.5 stg:text-xs stg:text-muted-foreground">
-                        {formatTimeAgo(failedDate)}
+                        {formatRelativeTime(failedDate)}
                       </p>
                     )}
                   </div>

package/src/workflow/PendingApprovalsWidget.tsx

@@ -4,6 +4,7 @@ import { memo } from "react";
 import type { PendingApproval } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/io_pb";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import { cn } from "@stigmer/theme";
+import { formatRelativeTime } from "../activity/format-relative-time.js";
 
 export interface PendingApprovalsWidgetProps {
   readonly approvals: readonly PendingApproval[];
@@ -14,14 +15,6 @@ export interface PendingApprovalsWidgetProps {
   readonly className?: string;
 }
 
-function formatTimeAgo(date: Date): string {
-  const seconds = Math.floor((Date.now() - date.getTime()) / 1000);
-  if (seconds < 60) return "just now";
-  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
-  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
-  return `${Math.floor(seconds / 86400)}d ago`;
-}
-
 /**
  * Dashboard widget showing pending human_input approvals.
  *
@@ -98,7 +91,7 @@ export const PendingApprovalsWidget = memo(function PendingApprovalsWidget({
                     <p className="stg:mt-0.5 stg:truncate stg:text-xs stg:text-muted-foreground">
                       Task: {approval.taskName}
                       {requestedAt && (
-                        <> &middot; {formatTimeAgo(requestedAt)}</>
+                        <> &middot; {formatRelativeTime(requestedAt)}</>
                       )}
                     </p>
                   </div>

package/src/workflow/ViewYamlDialog.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useRef } from "react";
 import { cn } from "@stigmer/theme";
 import type { WorkflowGraphModel } from "./workflow-graph-model.js";
 import { taskToYaml } from "./inspector/task-to-yaml.js";
+import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 
 /** Props for {@link ViewYamlDialog}. */
 export interface ViewYamlDialogProps {
@@ -32,7 +33,7 @@ export const ViewYamlDialog = memo(function ViewYamlDialog({
   onClose,
 }: ViewYamlDialogProps) {
   const dialogRef = useRef<HTMLDialogElement>(null);
-  const [copied, setCopied] = useState(false);
+  const { copy, copied } = useCopyFeedback();
 
   const node = nodeId && graph
     ? graph.nodes.find((n) => n.id === nodeId) ?? null
@@ -58,25 +59,9 @@ export const ViewYamlDialog = memo(function ViewYamlDialog({
     return () => dialog.removeEventListener("close", handleClose);
   }, [onClose]);
 
-  const handleCopy = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(yaml);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch {
-      // Fallback for environments without clipboard API
-      const textarea = document.createElement("textarea");
-      textarea.value = yaml;
-      textarea.style.position = "fixed";
-      textarea.style.opacity = "0";
-      document.body.appendChild(textarea);
-      textarea.select();
-      document.execCommand("copy");
-      document.body.removeChild(textarea);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    }
-  }, [yaml]);
+  const handleCopy = useCallback(() => {
+    void copy(yaml);
+  }, [copy, yaml]);
 
   const handleBackdropClick = useCallback(
     (e: React.MouseEvent<HTMLDialogElement>) => {
@@ -92,7 +77,7 @@ export const ViewYamlDialog = memo(function ViewYamlDialog({
       ref={dialogRef}
       className={cn(
         "stgm stg:m-auto stg:max-h-[80vh] stg:w-full stg:max-w-lg stg:rounded-lg stg:border stg:border-[var(--stgm-border,#e5e5e5)] stg:bg-[var(--stgm-background,#fff)] stg:p-0 stg:shadow-xl",
-        "stg:backdrop:bg-black/40",
+        "stg:backdrop:bg-backdrop",
       )}
       onClick={handleBackdropClick}
       aria-label={node ? `YAML for ${node.taskName}` : "View YAML"}

package/src/workflow/WorkflowArchitectDialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
 import { cn } from "@stigmer/theme";
 import {
   useWorkflowArchitectFlow,
@@ -8,6 +8,7 @@ import {
 } from "./useWorkflowArchitectFlow.js";
 import { MessageThread } from "../execution/MessageThread.js";
 import { WorkflowDiffGraph } from "./WorkflowDiffGraph.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 /** Props for {@link WorkflowArchitectDialog}. */
 export interface WorkflowArchitectDialogProps {
@@ -119,7 +120,7 @@ export function WorkflowArchitectDialog({
       onClick={handleBackdropClick}
       className={cn(
         "stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:w-full stg:max-w-3xl stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:p-0 stg:text-popover-foreground stg:shadow-lg",
-        "stg:backdrop:bg-black/50",
+        "stg:backdrop:bg-backdrop",
         "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
       )}
     >
@@ -176,6 +177,7 @@ function InputPhase({
   readonly flow: ReturnType<typeof useWorkflowArchitectFlow>;
   readonly onClose: () => void;
 }) {
+  const promptId = useId();
   return (
     <>
       <div className="stg:border-b stg:border-border stg:px-6 stg:py-4">
@@ -200,7 +202,7 @@ function InputPhase({
 
         <div className="stg:flex stg:flex-col stg:gap-1">
           <label
-            htmlFor="architect-prompt"
+            htmlFor={promptId}
             className="stg:text-xs stg:font-medium stg:text-foreground"
           >
             Description
@@ -209,7 +211,7 @@ function InputPhase({
             </span>
           </label>
           <textarea
-            id="architect-prompt"
+            id={promptId}
             value={flow.prompt}
             onChange={(e) => flow.setPrompt(e.target.value)}
             placeholder="e.g., A workflow that enriches customer data using my data-agent, validates the output, and sends a Slack notification on failure"
@@ -279,7 +281,7 @@ function StreamingPhase({
             Workflow Architect
           </h3>
           <span className="stg:inline-flex stg:items-center stg:gap-1.5 stg:text-xs stg:text-muted-foreground">
-            <SpinnerIcon />
+            <SpinnerIcon size={14} />
             {flow.phase === "starting" ? "Starting…" : "Working…"}
           </span>
         </div>
@@ -436,7 +438,7 @@ function ResultPhase({
               "stg:disabled:pointer-events-none stg:disabled:opacity-40",
             )}
           >
-            {isApplying && <SpinnerIcon />}
+            {isApplying && <SpinnerIcon size={14} />}
             {isApplying ? "Creating…" : "Create Workflow"}
           </button>
         </div>
@@ -502,24 +504,3 @@ function ErrorPhase({
   );
 }
 
-// ---------------------------------------------------------------------------
-// Shared components
-// ---------------------------------------------------------------------------
-
-function SpinnerIcon({ size = 14 }: { readonly size?: number }) {
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      className="stg:animate-spin"
-      aria-hidden="true"
-    >
-      <path d="M8 2a6 6 0 1 0 6 6" />
-    </svg>
-  );
-}

package/src/workflow/WorkflowArtifactDocument.tsx

@@ -3,16 +3,15 @@
 // Editor-area document rendering one workflow Artifact resource's content.
 // Domain: workflow (the Artifact-resource counterpart of execution/ArtifactDocument).
 
-import { useCallback, useState } from "react";
+import { useCallback } from "react";
 import type { Artifact } from "@stigmer/protos/ai/stigmer/agentic/artifact/v1/api_pb";
 import { cn } from "@stigmer/theme";
 import { ArtifactFileContent } from "../execution/ArtifactFileContent.js";
 import { formatArtifactSize } from "../execution/artifact-utils.js";
 import { useArtifactContentById } from "../execution/useArtifactContentById.js";
+import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 import { useWorkflowArtifactDownload } from "./useWorkflowArtifactDownload.js";
 
-const COPIED_FEEDBACK_MS = 2000;
-
 /** Props for {@link WorkflowArtifactDocument}. */
 export interface WorkflowArtifactDocumentProps {
   /** The workflow artifact to render. */
@@ -78,14 +77,11 @@ export function WorkflowArtifactDocument({
 
   const { download, isDownloading } = useWorkflowArtifactDownload();
 
-  const [copied, setCopied] = useState(false);
+  const { copy: copyToClipboard, copied } = useCopyFeedback();
   const copy = useCallback(() => {
     if (!content) return;
-    void navigator.clipboard.writeText(content).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), COPIED_FEEDBACK_MS);
-    });
-  }, [content]);
+    void copyToClipboard(content);
+  }, [content, copyToClipboard]);
 
   const showCopy = content !== null;
 

package/src/workflow/WorkflowCanvasEditor.tsx

@@ -87,7 +87,7 @@ const WorkflowCanvasEditorInner = memo(function WorkflowCanvasEditorInner({
   layoutEngine,
 }: WorkflowCanvasEditorProps) {
   const containerRef = useRef<HTMLDivElement>(null);
-  const canvas = useWorkflowCanvas(yaml, containerRef, { layoutEngine: layoutEngine ?? undefined });
+  const canvas = useWorkflowCanvas(yaml, { layoutEngine: layoutEngine ?? undefined });
   const [paletteCollapsed, setPaletteCollapsed] = useState(false);
   const togglePalette = useCallback(() => setPaletteCollapsed((p) => !p), []);
 
@@ -161,8 +161,35 @@ const WorkflowCanvasEditorInner = memo(function WorkflowCanvasEditorInner({
     copySelection: canvas.copySelection,
     pasteAtCenter: canvas.pasteAtCenter,
     cutSelection: canvas.cutSelection,
+    undo: canvas.undo,
+    redo: canvas.redo,
   });
 
+  // All canvas shortcuts are gated on focus being inside the container,
+  // but React Flow's pane prevents default on mousedown, so pane clicks
+  // never move focus into it on their own — without this, Cmd+Z (etc.)
+  // after a pane interaction silently does nothing (oss#588). Focusing
+  // unconditionally also commits-and-blurs an inspector field when the
+  // user clicks back into the canvas. Scoped to the canvas column so
+  // palette and inspector clicks keep their native focus flow; when the
+  // press lands on a real focusable (node, toolbar button, picker
+  // input), the default mousedown focus takes over right after.
+  const handleCanvasPointerDownCapture = useCallback(() => {
+    containerRef.current?.focus({ preventScroll: true });
+  }, []);
+
+  // Deleting the focused node drops DOM focus to <body> when React Flow
+  // unmounts the element, disarming every canvas shortcut at exactly the
+  // moment the user reaches for Cmd+Z (oss#588). Return focus to the
+  // container after any node deletion so undo stays reachable.
+  const handleNodesDelete = useCallback(
+    (deleted: Parameters<typeof canvas.onNodesDelete>[0]) => {
+      canvas.onNodesDelete(deleted);
+      containerRef.current?.focus({ preventScroll: true });
+    },
+    [canvas.onNodesDelete],
+  );
+
   useEffect(() => {
     onDirtyChange?.(canvas.isDirty);
   }, [canvas.isDirty, onDirtyChange]);
@@ -239,10 +266,10 @@ const WorkflowCanvasEditorInner = memo(function WorkflowCanvasEditorInner({
 
   const handleContextMenuDeleteNode = useCallback(
     (nodeId: string) => {
-      canvas.onNodesDelete([{ id: nodeId } as import("@xyflow/react").Node]);
+      handleNodesDelete([{ id: nodeId } as import("@xyflow/react").Node]);
       setContextMenu(null);
     },
-    [canvas.onNodesDelete],
+    [handleNodesDelete],
   );
 
   const handleContextMenuDuplicateNode = useCallback(
@@ -371,6 +398,9 @@ const WorkflowCanvasEditorInner = memo(function WorkflowCanvasEditorInner({
   const handleContextMenuDeleteSelection = useCallback(() => {
     canvas.deleteSelection();
     setContextMenu(null);
+    // Same focus restoration as handleNodesDelete — the selection may
+    // include the focused node element.
+    containerRef.current?.focus({ preventScroll: true });
   }, [canvas.deleteSelection]);
 
   const handleSelectionContextMenu = useCallback(
@@ -475,9 +505,9 @@ const WorkflowCanvasEditorInner = memo(function WorkflowCanvasEditorInner({
 
   const handleDeleteNode = useCallback(
     (nodeId: string) => {
-      canvas.onNodesDelete([{ id: nodeId } as import("@xyflow/react").Node]);
+      handleNodesDelete([{ id: nodeId } as import("@xyflow/react").Node]);
     },
-    [canvas.onNodesDelete],
+    [handleNodesDelete],
   );
 
   const handleDuplicateNode = useCallback(
@@ -580,7 +610,7 @@ const WorkflowCanvasEditorInner = memo(function WorkflowCanvasEditorInner({
 
       {showPalette && !paletteCollapsed && <WorkflowTaskPalette />}
 
-      <div className="stg:relative stg:flex-1">
+      <div className="stg:relative stg:flex-1" onPointerDownCapture={handleCanvasPointerDownCapture}>
         {showPalette && (
           <PaletteToggle
             collapsed={paletteCollapsed}
@@ -606,6 +636,8 @@ const WorkflowCanvasEditorInner = memo(function WorkflowCanvasEditorInner({
               edges={canvas.edges}
               onNodesChange={canvas.onNodesChange}
               onEdgesChange={canvas.onEdgesChange}
+              onNodeDragStart={canvas.onNodeDragStart}
+              onNodeDragStop={canvas.onNodeDragStop}
               onNodeClick={handleNodeClick}
               onEdgeClick={handleEdgeClick}
               onPaneClick={handlePaneClick}
@@ -613,7 +645,7 @@ const WorkflowCanvasEditorInner = memo(function WorkflowCanvasEditorInner({
               isValidConnection={canvas.isValidConnection}
               onDrop={canvas.onDrop}
               onDragOver={canvas.onDragOver}
-              onNodesDelete={canvas.onNodesDelete}
+              onNodesDelete={handleNodesDelete}
               onEdgesDelete={canvas.onEdgesDelete}
               onNodeContextMenu={handleNodeContextMenu}
               onEdgeContextMenu={handleEdgeContextMenu}

package/src/workflow/WorkflowCanvasInner.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import {
   ReactFlow,
   Controls,
@@ -15,6 +15,7 @@ import type {
   Edge,
   OnNodesChange,
   OnEdgesChange,
+  OnNodeDrag,
   OnConnect,
   IsValidConnection,
 } from "@xyflow/react";
@@ -29,6 +30,8 @@ interface WorkflowCanvasInnerProps {
   edges: Edge[];
   onNodesChange: OnNodesChange;
   onEdgesChange: OnEdgesChange;
+  onNodeDragStart: OnNodeDrag;
+  onNodeDragStop: OnNodeDrag;
   onNodeClick: (event: React.MouseEvent, node: Node) => void;
   onEdgeClick: (event: React.MouseEvent, edge: Edge) => void;
   onPaneClick: () => void;
@@ -72,6 +75,8 @@ export function WorkflowCanvasInner({
   edges,
   onNodesChange,
   onEdgesChange,
+  onNodeDragStart,
+  onNodeDragStop,
   onNodeClick,
   onEdgeClick,
   onPaneClick,
@@ -87,6 +92,11 @@ export function WorkflowCanvasInner({
   onSelectionContextMenu,
   nodeErrors,
 }: WorkflowCanvasInnerProps) {
+  // Instance-scoped React Flow id (oss#593): React Flow derives its internal
+  // DOM ids (aria descriptions, SVG marker/pattern defs) from this id, so two
+  // mounted graphs without explicit ids collide.
+  const flowId = useId();
+
   const enrichedNodes = useMemo(() => {
     if (!nodeErrors || nodeErrors.size === 0) return nodes;
     return nodes.map((node) => {
@@ -109,10 +119,13 @@ export function WorkflowCanvasInner({
 
   return (
     <ReactFlow
+      id={flowId}
       nodes={enrichedNodes}
       edges={edges}
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
+      onNodeDragStart={onNodeDragStart}
+      onNodeDragStop={onNodeDragStop}
       onNodeClick={onNodeClick}
       onEdgeClick={onEdgeClick}
       onPaneClick={onPaneClick}

package/src/workflow/WorkflowDiffGraph.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { memo, useCallback, useEffect, useMemo, useRef } from "react";
+import { memo, useCallback, useEffect, useId, useMemo, useRef } from "react";
 import {
   ReactFlow,
   Controls,
@@ -73,6 +73,11 @@ function WorkflowDiffGraphInner({
   onTaskClick,
   className,
 }: WorkflowDiffGraphProps) {
+  // Instance-scoped React Flow id (oss#593): React Flow derives its internal
+  // DOM ids (aria descriptions, SVG marker/pattern defs) from this id, so two
+  // mounted graphs without explicit ids collide.
+  const flowId = useId();
+
   const {
     nodes,
     edges,
@@ -146,6 +151,7 @@ function WorkflowDiffGraphInner({
           </div>
         )}
         <ReactFlow
+          id={flowId}
           nodes={nodesWithSelection}
           edges={edges}
           nodeTypes={nodeTypes}

package/src/workflow/WorkflowExecutionGraph.tsx

@@ -152,6 +152,7 @@ function WorkflowExecutionGraphInner({
   const [didInitialFit, setDidInitialFit] = useState(false);
   const isInitializedRef = useRef(false);
   const didFitGuardRef = useRef(false);
+  const containerRef = useRef<HTMLDivElement | null>(null);
 
   // ── Ephemeral drag positions ───────────────────────────────────────
   // Resets when the execution changes (navigating to a different run).
@@ -188,6 +189,14 @@ function WorkflowExecutionGraphInner({
 
   const performInitialFit = useCallback(() => {
     if (didFitGuardRef.current) return;
+    // A CSS-hidden mount (the execution viewer keeps BOTH center views
+    // mounted with the inactive one `display:none`) measures 0×0 —
+    // `fitView` against that computes a degenerate transform that never
+    // self-corrects, so the first toggle to Graph would show an
+    // apparently empty canvas (oss#571). Defer: the ResizeObserver below
+    // re-attempts on the hidden→visible transition.
+    const el = containerRef.current;
+    if (!el || el.offsetWidth === 0 || el.offsetHeight === 0) return;
     didFitGuardRef.current = true;
     fitView({ padding: 0.15, duration: getAnimationDuration(300) });
     setDidInitialFit(true);
@@ -209,6 +218,22 @@ function WorkflowExecutionGraphInner({
     }
   }, [nodes.length, performInitialFit]);
 
+  // The deferred-fit path for hidden mounts: when the container gains
+  // real dimensions (first reveal, or a late layout pass), run the
+  // pending initial fit. One-shot — `performInitialFit` self-guards, so
+  // user pan/zoom is never overridden by later resizes.
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      if (isInitializedRef.current && nodes.length > 0) {
+        performInitialFit();
+      }
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [nodes.length, performInitialFit]);
+
   // Derive active task name stably from taskStates (not from nodes array — DD-010)
   const activeTaskInfo = useActiveTaskName(taskStates);
   const isTerminal = executionPhase != null && TERMINAL_EXECUTION_PHASES.has(executionPhase);
@@ -276,7 +301,7 @@ function WorkflowExecutionGraphInner({
 
   return (
     <WorkflowGraphModeProvider mode="execution">
-      <div className={cn("stg:relative stg:h-full stg:w-full", className)}>
+      <div ref={containerRef} className={cn("stg:relative stg:h-full stg:w-full", className)}>
         {versionMismatch && (
           <div className="stg:absolute stg:left-3 stg:right-3 stg:top-3 stg:z-50 stg:rounded-md stg:border stg:border-[var(--stgm-warning,#f59e0b)]/30 stg:bg-[var(--stgm-warning,#f59e0b)]/5 stg:px-3 stg:py-2 stg:text-xs stg:text-[var(--stgm-foreground,#1a1a2e)]">
             {versionMismatch}