@stigmer/react 3.12.0 → 3.12.1

package/src/mcp-server/useMcpServerCredentials.ts

@@ -11,6 +11,7 @@ import { diffEnv } from "../environment/diffEnv.js";
 import { SYSTEM_ENV_VAR_KEYS } from "../environment/systemEnvVars.js";
 import type { EnvVarFormVariable } from "../environment/EnvVarForm.js";
 import { useOAuthGrantStatus } from "./useOAuthGrantStatus.js";
+import { useOrgOAuthApp } from "./useOrgOAuthApp.js";
 
 /**
  * Credential acquisition mode for an MCP server.
@@ -93,9 +94,15 @@ export interface UseMcpServerCredentialsReturn {
    * Servers whose env vars are all optional are always ready.
    */
   readonly isReady: boolean;
-  /** `true` while the personal environment or grant status is being fetched. */
+  /**
+   * `true` while the personal environment, grant status, or org-override
+   * lookup is being fetched.
+   */
   readonly isLoading: boolean;
-  /** Error from the personal environment or grant status fetch, or `null`. */
+  /**
+   * Error from the personal environment, grant status, or org-override
+   * fetch, or `null`.
+   */
   readonly error: Error | null;
   /**
    * Save the provided credentials to the user's personal environment.
@@ -131,22 +138,35 @@ export interface UseMcpServerCredentialsReturn {
    */
   readonly isVendorApprovalBlocked: boolean;
   /**
-   * Where the effective OAuth app was resolved from for the caller's org.
+   * Where the effective OAuth app is resolved from for the caller's org
+   * — the same source the connect flow will use.
    *
-   * Enriched at query time by the backend — no additional RPC needed.
-   * `UNSPECIFIED` when `authMode` is `"manual"` or enrichment has not
-   * been performed yet.
+   * Resolved client-side from the `getOrgOAuthApp` RPC keyed on this
+   * hook's `org` parameter. It cannot come from the fetched McpServer:
+   * the caller's active org is client-side context the read RPCs never
+   * carry, so `status.oauth_status` fields 3-4 are never populated by
+   * any backend (see the OAuthStatus proto).
+   *
+   * `UNSPECIFIED` when `authMode` is `"manual"` or while the override
+   * lookup has not yet resolved.
    */
   readonly effectiveOAuthSource: OAuthAppSource;
   /**
-   * `true` when an org-level BYOA override is active for this server.
-   * Derived from `effectiveOAuthSource === OAUTH_APP_SOURCE_ORG_OVERRIDE`.
+   * `true` when an org-level BYOA override is active for this server
+   * and org. Derived from the `getOrgOAuthApp` lookup.
    */
   readonly isOrgOAuthApp: boolean;
   /**
    * `true` when the BYOA option is relevant for this server: the server
-   * uses vendor OAuth (`authMode === "oauth"` with an `oauth_app_ref`)
-   * and no org override is currently active.
+   * uses vendor OAuth (`authMode === "oauth"` with an `oauth_app_ref`),
+   * no org override is currently active, AND the backend supports the
+   * org-override surface at all.
+   *
+   * The last condition is an edition capability, confirmed by probing
+   * `getOrgOAuthApp` (see {@link useOrgOAuthApp}): the surface is
+   * hosted-only, so on OSS deployments — where the submit could only
+   * answer UNIMPLEMENTED — this stays `false` and no BYOA affordance
+   * renders (stigmer/stigmer#558).
    *
    * When `true`, the UI should offer "Use your own OAuth app" as either
    * a primary action (when vendor approval is blocked) or a secondary
@@ -201,6 +221,15 @@ export interface UseMcpServerCredentialsReturn {
  * form. Additional non-OAuth vars still appear in `missingVariables`
  * (mixed mode).
  *
+ * **Org-override-aware**: for vendor-OAuth servers with an
+ * `oauth_app_ref`, the hook also composes {@link useOrgOAuthApp} to
+ * resolve which OAuth app the connect flow will use for `org`
+ * (`effectiveOAuthSource` / `isOrgOAuthApp` / `canBringOwnApp`).
+ * The `org` parameter must therefore be the caller's ACTIVE org — the
+ * org credentials are stored in and the org whose BYOA override
+ * applies — not necessarily the org that owns the MCP server (they
+ * differ when browsing another org's public server).
+ *
  * Unlike {@link useMcpServerSetup} which manages multi-server setup
  * for session creation, this hook is scoped to a single server and
  * always persists to the personal environment (no one-time option).
@@ -281,14 +310,51 @@ export function useMcpServerCredentials(
       oauthStatus?.vendorApprovalStatus === VendorApprovalStatus.REJECTED);
   const vendorApprovalDocsUrl = oauthStatus?.vendorApprovalDocsUrl || null;
 
-  const effectiveOAuthSource =
-    oauthStatus?.effectiveOauthSource ??
-    OAuthAppSource.OAUTH_APP_SOURCE_UNSPECIFIED;
-  const isOrgOAuthApp =
-    effectiveOAuthSource === OAuthAppSource.OAUTH_APP_SOURCE_ORG_OVERRIDE;
   const hasOAuthAppRef = Boolean(auth?.oauthAppRef?.slug);
+
+  // Org-override lookup, two duties in one fetch (shared cross-mount via
+  // the hook's fetch cache):
+  //  1. Capability probe (`isSupported`) — the org-override surface is
+  //     hosted-only, so BYOA affordances must hide on OSS (#558).
+  //  2. The override signal (`hasOverride`) — which OAuthApp the connect
+  //     flow will actually use for this org. Resolved client-side because
+  //     the caller's active org is client-side context the read RPCs never
+  //     carry (get has no org; getByReference's org is the server's OWNING
+  //     org, which differs from the caller's org when browsing another
+  //     org's public server), so the fetched McpServer cannot answer this
+  //     (stigmer-cloud#401).
+  // Scoped to vendor-OAuth servers with a platform app ref — the only
+  // shape an override can exist for — so manual/DCR servers pay no RPC.
+  const orgOverride = useOrgOAuthApp(
+    authMode === "oauth" && hasOAuthAppRef
+      ? (mcpServer?.metadata?.id ?? null)
+      : null,
+    org,
+  );
+
+  const isOrgOAuthApp = orgOverride.hasOverride;
+  // While the lookup is in flight, failed, or unposable (an app ref exists
+  // but no org to resolve an override for), the override state is unknown —
+  // report UNSPECIFIED rather than guessing PLATFORM, matching the
+  // documented "not yet resolved" contract. UNSUPPORTED is not unknown:
+  // on OSS the platform-ref app is truthfully the effective source.
+  const overrideUnknown =
+    orgOverride.isLoading ||
+    orgOverride.error !== null ||
+    (hasOAuthAppRef && !org);
+  const effectiveOAuthSource =
+    authMode !== "oauth" || overrideUnknown
+      ? OAuthAppSource.OAUTH_APP_SOURCE_UNSPECIFIED
+      : isOrgOAuthApp
+        ? OAuthAppSource.OAUTH_APP_SOURCE_ORG_OVERRIDE
+        : hasOAuthAppRef
+          ? OAuthAppSource.OAUTH_APP_SOURCE_PLATFORM
+          : OAuthAppSource.OAUTH_APP_SOURCE_NONE;
   const canBringOwnApp =
-    authMode === "oauth" && hasOAuthAppRef && !isOrgOAuthApp;
+    authMode === "oauth" &&
+    hasOAuthAppRef &&
+    !isOrgOAuthApp &&
+    orgOverride.isSupported;
 
   const grantStatus = useOAuthGrantStatus(
     authMode === "oauth" ? (mcpServer?.metadata?.id ?? null) : null,
@@ -339,7 +405,8 @@ export function useMcpServerCredentials(
   const refetch = useCallback(() => {
     personalEnv.refetch();
     grantStatus.refetch();
-  }, [personalEnv, grantStatus]);
+    orgOverride.refetch();
+  }, [personalEnv, grantStatus, orgOverride]);
 
   return {
     authMode,
@@ -358,8 +425,9 @@ export function useMcpServerCredentials(
     manualEntrySupported,
     missingVariables,
     isReady,
-    isLoading: personalEnv.isLoading || grantStatus.isLoading,
-    error: personalEnv.error ?? grantStatus.error,
+    isLoading:
+      personalEnv.isLoading || grantStatus.isLoading || orgOverride.isLoading,
+    error: personalEnv.error ?? grantStatus.error ?? orgOverride.error,
     saveCredentials,
     isSaving: personalEnv.isMutating,
     refetch,

package/src/mcp-server/useOrgOAuthApp.ts

@@ -8,11 +8,26 @@ import {
   DeleteOrgOAuthAppInputSchema,
 } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/io_pb";
 import { useStigmer } from "../hooks.js";
+import { isUnimplemented } from "../internal/isUnimplemented.js";
 import { toError } from "../internal/toError.js";
 import { useFetch } from "../internal/useFetch.js";
 
 /** Return value of {@link useOrgOAuthApp}. */
 export interface UseOrgOAuthAppReturn {
+  /**
+   * Whether the backend supports the org-OAuth-app override surface at all.
+   *
+   * The surface is hosted-only by design: the OSS server answers
+   * UNIMPLEMENTED for all three org-override RPCs because its flat
+   * OAuthApp store has no override binding (stigmer/stigmer#558 — the
+   * self-hosted equivalent is applying an OAuthApp resource and
+   * referencing it from `spec.auth.oauth_app_ref`). The fetch doubles
+   * as the capability probe: `isSupported` is `false` until the first
+   * successful response confirms the surface exists, so BYOA
+   * affordances gated on it never flash on deployments where the
+   * submit could only fail.
+   */
+  readonly isSupported: boolean;
   /** Whether an org-level BYOA override exists for this resource + org. */
   readonly hasOverride: boolean;
   /** System-generated ID of the override's OAuthApp, or `null` when absent. */
@@ -72,12 +87,25 @@ export interface UseOrgOAuthAppReturn {
 }
 
 interface OrgOAuthAppData {
+  isSupported: boolean;
   hasOverride: boolean;
   oauthAppId: string | null;
   clientId: string | null;
 }
 
 const IDLE_DATA: OrgOAuthAppData = {
+  isSupported: false,
+  hasOverride: false,
+  oauthAppId: null,
+  clientId: null,
+};
+
+/**
+ * The UNIMPLEMENTED answer resolved into data rather than an error:
+ * the backend is healthy, it just doesn't have this edition capability.
+ */
+const UNSUPPORTED_DATA: OrgOAuthAppData = {
+  isSupported: false,
   hasOverride: false,
   oauthAppId: null,
   clientId: null,
@@ -110,6 +138,14 @@ const IDLE: UseOrgOAuthAppReturn = {
  * mutations bound to the hook's resource + org context, eliminating
  * parameter repetition at call sites.
  *
+ * **Edition awareness**: the fetch doubles as a capability probe. The
+ * org-override surface is hosted-only; the OSS server answers
+ * UNIMPLEMENTED for it, which this hook resolves into
+ * `isSupported: false` with no error. Gate every BYOA affordance on
+ * `isSupported` (as {@link useMcpServerCredentials} does for
+ * `canBringOwnApp`) — the mutations can only fail where the probe
+ * reports the surface absent.
+ *
  * Pass `null` for either parameter to skip fetching (stable no-op).
  *
  * @example
@@ -136,18 +172,28 @@ export function useOrgOAuthApp(
   const { data, isLoading, isRefetching, error, refetch } = useFetch<OrgOAuthAppData>(
     resourceId && org
       ? async () => {
-          const result = await stigmer.mcpServer.getOrgOAuthApp(
-            create(GetOrgOAuthAppInputSchema, { resourceId, org }),
-          );
-          return {
-            hasOverride: result.hasOverride,
-            oauthAppId: result.oauthAppId || null,
-            clientId: result.clientId || null,
-          };
+          try {
+            const result = await stigmer.mcpServer.getOrgOAuthApp(
+              create(GetOrgOAuthAppInputSchema, { resourceId, org }),
+            );
+            return {
+              isSupported: true,
+              hasOverride: result.hasOverride,
+              oauthAppId: result.oauthAppId || null,
+              clientId: result.clientId || null,
+            };
+          } catch (err) {
+            if (isUnimplemented(err)) return UNSUPPORTED_DATA;
+            throw err;
+          }
         }
       : null,
     [resourceId, org, stigmer],
     IDLE_DATA,
+    // Cross-mount cache: the credentials hook composes this fetch as its
+    // capability probe, so a detail page mounts two instances — the cache
+    // lets the second render from the first's result.
+    { cacheKey: `org-oauth-app:${org}:${resourceId}` },
   );
 
   const [isSetting, setIsSetting] = useState(false);

package/src/session/useSessionConversation.ts

@@ -74,8 +74,10 @@ export interface SendFollowUpOptions {
    * Execution-scoped secrets and configuration (Execution Flow).
    *
    * Values are injected into the agent sandbox for this execution only
-   * and deleted when the execution completes. They override both
-   * Environment values and agent defaults.
+   * and deleted when the execution completes. They take the highest
+   * merge priority, overriding Environment values bound via the
+   * instance. Keys must be declared in the agent's env declarations
+   * (a whitelist, not a value source) or they are dropped.
    *
    * @see {@link CreateAgentExecutionInput.runtimeEnv}
    */

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/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}
@@ -613,7 +643,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/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}

package/src/workflow/WorkflowExecutionViewer.tsx

@@ -344,24 +344,38 @@ export const WorkflowExecutionViewer = memo(function WorkflowExecutionViewer({
   // Thread view. One always-visible announcer serves both center views.
   const announcement = useExecutionAnnouncements(effectiveTaskStates);
 
-  // Terminal-phase snapshot refetch (T04, DD-T04-4). While a run streams,
-  // the cards' collapsed lines and bodies work from the TRUNCATED event
-  // summaries; the full per-task output lands on `status.tasks[]` only when
-  // the runner persists the terminal snapshot. The stream store's stage is
-  // the live end-of-run signal (`"complete"` on the terminal event) — the
-  // snapshot's own `phase` cannot be the trigger, since it only moves on a
-  // refetch (the circularity behind the stale "Pending" header, R1-5).
-  // Scoped to the live→complete TRANSITION: a terminal-replay mount starts
-  // at "complete" without ever streaming and already fetched a settled
-  // snapshot, so it must not refetch again.
+  // Boundary-transition snapshot refetches. The snapshot fetch is one-shot
+  // (`useWorkflowExecution` never polls), so the stream store's stage
+  // transitions are the only live signals that the mount snapshot went
+  // stale — the snapshot's own `phase` cannot be the trigger, since it
+  // only moves on a refetch (the circularity behind the stale "Pending"
+  // header, R1-5). Two transitions matter, one per direction:
+  //
+  // - ENTERING "complete" (T04, DD-T04-4): while a run streams, the cards'
+  //   collapsed lines and bodies work from the TRUNCATED event summaries;
+  //   the full per-task output lands on `status.tasks[]` only when the
+  //   runner persists the terminal snapshot.
+  // - ENTERING "streaming" (oss#571): the store flips connecting→streaming
+  //   on the FIRST delivered event, so this transition is the "run
+  //   started" signal for a page that landed on a still-pending execution
+  //   — without the refetch, the phase badge and the phase-gated
+  //   Pause/Cancel would freeze at "Pending" for the entire run. It also
+  //   covers reconnecting→streaming, where the snapshot slept through the
+  //   outage.
+  //
+  // Both are TRANSITION-scoped (never fire on mount): a terminal-replay
+  // mount starts at "complete" and a mid-run mount starts at "streaming",
+  // and each already fetched a fresh snapshot.
   const prevStreamStageRef = useRef(streamState.stage);
   useEffect(() => {
     const prev = prevStreamStageRef.current;
     prevStreamStageRef.current = streamState.stage;
-    if (
+    const enteredComplete =
       streamState.stage === "complete" &&
-      (prev === "streaming" || prev === "reconnecting")
-    ) {
+      (prev === "streaming" || prev === "reconnecting");
+    const enteredStreaming =
+      streamState.stage === "streaming" && prev !== "streaming";
+    if (enteredComplete || enteredStreaming) {
       refetchExecution();
     }
   }, [streamState.stage, refetchExecution]);

package/src/workflow/WorkflowNode.tsx

@@ -28,7 +28,7 @@ export const WorkflowNode = memo(function WorkflowNode({
   selected,
 }: NodeProps & { data: CanvasTaskNodeData }) {
   const mode = useWorkflowGraphMode();
-  const visualSpec = getVisualSpec(data.isSentinel ? id : data.kindString);
+  const visualSpec = getVisualSpec(data.kindString);
   const categoryColor = CATEGORY_COLORS[data.category];
   const errorCount = data.errorCount ?? 0;
   const isNested = NESTED_TASK_KINDS.has(data.kindString);
@@ -38,7 +38,10 @@ export const WorkflowNode = memo(function WorkflowNode({
   return (
     <div
       data-visual-class={data.visualClass}
-      data-task-kind={data.kindString}
+      // data-task-kind is a sanctioned e2e/embedding hook meaning "real
+      // workflow task kind" — sentinels omit it and are targeted via
+      // data-id + data-visual-class instead (oss#581).
+      data-task-kind={data.isSentinel ? undefined : data.kindString}
       data-execution-status={executionState?.status}
       data-diff-status={diffState?.status}
       aria-label={buildAriaLabel(data, errorCount, executionState?.status)}

package/src/workflow/WorkflowRunDialog.tsx

@@ -24,6 +24,16 @@ export interface WorkflowRunDialogProps {
    * Passed through to the form's instance picker to control visibility threshold.
    */
   readonly defaultInstanceId?: string;
+  /**
+   * Instance to preselect when the dialog opens — wire this from a
+   * row-level "Run" action so the form reflects the instance the user
+   * clicked. Applied on each open transition (after the form resets);
+   * ignored when the id is not in `instances`, so a stale id degrades
+   * to the default option. Omit (or pass `null`) for the
+   * server-resolved default. Same convention as
+   * {@link SessionComposer}'s `initialInstanceId`.
+   */
+  readonly initialInstanceId?: string | null;
   /**
    * Called after the execution is created successfully.
    * Receives the execution ID — use for navigation.
@@ -67,6 +77,7 @@ export function WorkflowRunDialog({
   workflow,
   instances,
   defaultInstanceId,
+  initialInstanceId,
   onSuccess,
   onError,
 }: WorkflowRunDialogProps) {
@@ -94,11 +105,27 @@ export function WorkflowRunDialog({
     if (!dialog) return;
     if (open && !dialog.open) {
       flow.reset();
+      // Preselection must follow reset (reset clears the selection back to
+      // the server-resolved default). Guarded against stale ids: an instance
+      // deleted between the caller capturing the id and this open falls back
+      // to the default option instead of a <select> value with no option.
+      if (
+        initialInstanceId &&
+        instances.some((i) => i.metadata?.id === initialInstanceId)
+      ) {
+        flow.setSelectedInstanceId(initialInstanceId);
+      }
       dialog.showModal();
     } else if (!open && dialog.open) {
       dialog.close();
     }
-  }, [open, flow.reset]);
+  }, [
+    open,
+    flow.reset,
+    flow.setSelectedInstanceId,
+    initialInstanceId,
+    instances,
+  ]);
 
   const handleDialogCancel = useCallback(
     (e: React.SyntheticEvent) => {

package/src/workflow/__tests__/WorkflowExecutionViewer.reconciliation.test.tsx

@@ -571,7 +571,9 @@ describe("WorkflowExecutionViewer (terminal-phase refetch, T04)", () => {
 
   // Re-mocks ONLY the stream stage (the execution mock — and its refetch
   // spy — must stay stable across the flip; the assertions count its calls).
-  function mockStreamStage(stage: "streaming" | "reconnecting" | "complete") {
+  function mockStreamStage(
+    stage: "connecting" | "streaming" | "reconnecting" | "complete",
+  ) {
     mockedUseEventStream.mockReturnValue({
       events: [],
       taskStates: new Map([
@@ -630,4 +632,49 @@ describe("WorkflowExecutionViewer (terminal-phase refetch, T04)", () => {
 
     expect(refetch).not.toHaveBeenCalled();
   });
+
+  // The other stale direction (oss#571's live-run finding): a page that
+  // lands BEFORE the run starts fetches a PENDING snapshot, and nothing
+  // refetched it when the run began — the phase badge and the phase-gated
+  // Pause/Cancel froze at "Pending" for the entire run. The store flips
+  // connecting → streaming exactly when the FIRST event is delivered, so
+  // that transition IS the "run started" signal.
+  it("the stream's first delivery refetches a pending-landing snapshot — the phase badge and Pause/Cancel catch up to the started run", () => {
+    const { refetch } = arrange(ExecutionPhase.EXECUTION_PENDING);
+    mockStreamStage("connecting");
+    const { rerender } = render(<WorkflowExecutionViewer executionId="wex_1" />);
+    expect(refetch).not.toHaveBeenCalled();
+
+    mockStreamStage("streaming");
+    rerender(
+      <WorkflowExecutionViewer executionId="wex_1" className="pass-2" />,
+    );
+    expect(refetch).toHaveBeenCalledTimes(1);
+
+    // Idempotent: staying in streaming never re-triggers.
+    rerender(
+      <WorkflowExecutionViewer executionId="wex_1" className="pass-3" />,
+    );
+    expect(refetch).toHaveBeenCalledTimes(1);
+  });
+
+  it("a reconnect recovery (reconnecting → streaming) refetches — the snapshot may have moved during the outage", () => {
+    const { refetch } = arrange(ExecutionPhase.EXECUTION_IN_PROGRESS);
+    mockStreamStage("streaming");
+    const { rerender } = render(<WorkflowExecutionViewer executionId="wex_1" />);
+    // Mid-run mount: the snapshot was just fetched — no refetch.
+    expect(refetch).not.toHaveBeenCalled();
+
+    mockStreamStage("reconnecting");
+    rerender(
+      <WorkflowExecutionViewer executionId="wex_1" className="pass-2" />,
+    );
+    expect(refetch).not.toHaveBeenCalled();
+
+    mockStreamStage("streaming");
+    rerender(
+      <WorkflowExecutionViewer executionId="wex_1" className="pass-3" />,
+    );
+    expect(refetch).toHaveBeenCalledTimes(1);
+  });
 });