@stigmer/react 3.0.9-dev.20260616060535 → 3.1.1

package/src/workflow/WorkflowExecutionViewer.tsx

@@ -4,25 +4,26 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState, type ReactNode
 import { cn } from "@stigmer/theme";
 import { WorkflowTaskStatus, ExecutionPhase } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/enum_pb";
 import { WorkflowTaskKind } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/enum_pb";
-import { useWorkflowExecution } from "./useWorkflowExecution";
-import { useWorkflowExecutionEventStream } from "./useWorkflowExecutionEventStream";
-import { useWorkflowExecutionArtifacts } from "./useWorkflowExecutionArtifacts";
-import { useWorkflowExecutionActions } from "./useWorkflowExecutionActions";
-import { WorkflowExecutionHeader } from "./WorkflowExecutionHeader";
-import { WorkflowExecutionTimeline, type WorkflowExecutionTimelineProps } from "./WorkflowExecutionTimeline";
-import { WaterfallTimeline } from "./waterfall";
-import { WorkflowExecutionCostPanel } from "./WorkflowExecutionCostPanel";
-import { WorkflowExecutionArtifactPanel } from "./WorkflowExecutionArtifactPanel";
-import { WorkflowRepairCard } from "./WorkflowRepairCard";
-import { WorkflowExecutionGraph } from "./WorkflowExecutionGraph";
-import type { DerivedTaskState } from "../internal/store/workflow-execution-event-store";
-import { ExecutionInspector } from "./execution-inspector";
-import { ExecutionComparisonPicker } from "./execution-comparison/ExecutionComparisonPicker";
-import { ExecutionComparisonView } from "./execution-comparison/ExecutionComparisonView";
-import { WorkflowExecutionApprovalCard } from "./WorkflowExecutionApprovalCard";
-import type { WorkflowPendingApproval } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/api_pb";
+import { useWorkflowExecution } from "./useWorkflowExecution.js";
+import { useWorkflowExecutionEventStream } from "./useWorkflowExecutionEventStream.js";
+import { useWorkflowExecutionArtifacts } from "./useWorkflowExecutionArtifacts.js";
+import { useWorkflowExecutionActions } from "./useWorkflowExecutionActions.js";
+import { WorkflowExecutionHeader } from "./WorkflowExecutionHeader.js";
+import { WorkflowExecutionTimeline, type WorkflowExecutionTimelineProps } from "./WorkflowExecutionTimeline.js";
+import { WaterfallTimeline } from "./waterfall/index.js";
+import { WorkflowExecutionCostPanel } from "./WorkflowExecutionCostPanel.js";
+import { WorkflowExecutionArtifactPanel } from "./WorkflowExecutionArtifactPanel.js";
+import { WorkflowRepairCard } from "./WorkflowRepairCard.js";
+import { WorkflowExecutionGraph } from "./WorkflowExecutionGraph.js";
+import type { DerivedTaskState } from "../internal/store/workflow-execution-event-store.js";
+import { ExecutionInspector } from "./execution-inspector/index.js";
+import { ExecutionComparisonPicker } from "./execution-comparison/ExecutionComparisonPicker.js";
+import { ExecutionComparisonView } from "./execution-comparison/ExecutionComparisonView.js";
+import { WorkflowExecutionApprovalCard } from "./WorkflowExecutionApprovalCard.js";
+import { WorkflowFileReviewList, type WorkflowFileDecisionSubmit } from "./WorkflowFileReviewList.js";
+import type { WorkflowPendingApproval, WorkflowPendingFileReview } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/api_pb";
 import type { ApprovalAction } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
-import { ResizableSplit } from "../internal/ResizableSplit";
+import { ResizableSplit } from "../internal/ResizableSplit.js";
 
 /** Props for {@link WorkflowExecutionViewer}. */
 export interface WorkflowExecutionViewerProps {
@@ -287,7 +288,9 @@ export const WorkflowExecutionViewer = memo(function WorkflowExecutionViewer({
         onClose={handleCloseComparePicker}
       />
 
-      {/* Action error banner (lifecycle actions: cancel, pause, recover, etc.) */}
+      {/* Action error banner — lifecycle actions only (cancel/terminate/pause/
+          resume/recover). Approval failures are per-gate and surface in-card on
+          the failing approval card, never here. */}
       {actions.error && (
         <div className="flex items-center gap-2 border-b border-destructive/20 bg-destructive/5 px-4 py-2">
           <p className="flex-1 text-xs text-destructive">{actions.error.message}</p>
@@ -365,9 +368,11 @@ export const WorkflowExecutionViewer = memo(function WorkflowExecutionViewer({
                     onNavigateToAgentExecution={onNavigateToAgentExecution}
                     pendingApprovals={execution?.status?.pendingApprovals}
                     onSubmitApproval={actions.submitApproval}
-                    isSubmittingApproval={actions.isSubmitting}
+                    approvalSubmittingToolCallIds={actions.approvalSubmittingToolCallIds}
+                    approvalErrorsByToolCallId={actions.approvalErrorsByToolCallId}
                     onSubmitTaskApproval={actions.submitTaskApproval}
-                    isSubmittingTaskApproval={actions.isSubmitting}
+                    taskApprovalSubmittingTaskNames={actions.taskApprovalSubmittingTaskNames}
+                    taskApprovalErrorsByTaskName={actions.taskApprovalErrorsByTaskName}
                     className="min-h-0 flex-1"
                   />
 
@@ -403,9 +408,16 @@ export const WorkflowExecutionViewer = memo(function WorkflowExecutionViewer({
           onNavigateToAgentExecution={onNavigateToAgentExecution}
           taskStates={effectiveTaskStates}
           onSubmitTaskApproval={actions.submitTaskApproval}
-          isSubmittingApproval={actions.isSubmitting}
+          taskApprovalSubmittingTaskNames={actions.taskApprovalSubmittingTaskNames}
+          taskApprovalErrorsByTaskName={actions.taskApprovalErrorsByTaskName}
           pendingApprovals={execution?.status?.pendingApprovals}
           onSubmitApproval={actions.submitApproval}
+          approvalSubmittingToolCallIds={actions.approvalSubmittingToolCallIds}
+          approvalErrorsByToolCallId={actions.approvalErrorsByToolCallId}
+          pendingFileReviews={execution?.status?.pendingFileReviews}
+          onSubmitFileDecision={actions.submitFileDecision}
+          fileDecisionSubmittingKeys={actions.fileDecisionSubmittingKeys}
+          fileDecisionErrorsByKey={actions.fileDecisionErrorsByKey}
         />
       </div>
       </>
@@ -449,9 +461,16 @@ function ExecutionBottomPanel({
   onNavigateToAgentExecution,
   taskStates,
   onSubmitTaskApproval,
-  isSubmittingApproval,
+  taskApprovalSubmittingTaskNames,
+  taskApprovalErrorsByTaskName,
   pendingApprovals,
   onSubmitApproval,
+  approvalSubmittingToolCallIds,
+  approvalErrorsByToolCallId,
+  pendingFileReviews,
+  onSubmitFileDecision,
+  fileDecisionSubmittingKeys,
+  fileDecisionErrorsByKey,
 }: {
   events: WorkflowExecutionTimelineProps["events"];
   streamState: WorkflowExecutionTimelineProps["streamState"];
@@ -462,28 +481,39 @@ function ExecutionBottomPanel({
   onNavigateToAgentExecution?: (id: string) => void;
   taskStates: ReadonlyMap<string, DerivedTaskState>;
   onSubmitTaskApproval: WorkflowExecutionTimelineProps["onSubmitTaskApproval"];
-  isSubmittingApproval: boolean;
+  taskApprovalSubmittingTaskNames: ReadonlySet<string>;
+  taskApprovalErrorsByTaskName: ReadonlyMap<string, Error>;
   pendingApprovals?: readonly WorkflowPendingApproval[];
   onSubmitApproval?: (toolCallId: string, action: ApprovalAction, comment?: string) => Promise<unknown>;
+  approvalSubmittingToolCallIds: ReadonlySet<string>;
+  approvalErrorsByToolCallId: ReadonlyMap<string, Error>;
+  pendingFileReviews?: readonly WorkflowPendingFileReview[];
+  onSubmitFileDecision: WorkflowFileDecisionSubmit;
+  fileDecisionSubmittingKeys: ReadonlySet<string>;
+  fileDecisionErrorsByKey: ReadonlyMap<string, Error>;
 }) {
   const [collapsed, setCollapsed] = useState(false);
   const [activeTab, setActiveTab] = useState<BottomTab>("waterfall");
-  const prevApprovalCountRef = useRef(0);
+  const prevHitlCountRef = useRef(0);
 
   const approvalCount = pendingApprovals?.length ?? 0;
-  const hasApprovals = approvalCount > 0;
+  const fileReviewCount = pendingFileReviews?.length ?? 0;
+  // Both HITL kinds (tool approvals + file reviews) share the one "Approvals" tab.
+  const hitlCount = approvalCount + fileReviewCount;
+  const hasHitl = hitlCount > 0;
 
-  // Auto-switch to Approvals tab when new approvals arrive
+  // Auto-switch to the Approvals tab when a new HITL gate (approval or file
+  // review) arrives; leave it when everything is resolved.
   useEffect(() => {
-    if (approvalCount > prevApprovalCountRef.current && approvalCount > 0) {
+    if (hitlCount > prevHitlCountRef.current && hitlCount > 0) {
       setActiveTab("approvals");
       setCollapsed(false);
     }
-    if (approvalCount === 0 && activeTab === "approvals") {
+    if (hitlCount === 0 && activeTab === "approvals") {
       setActiveTab("waterfall");
     }
-    prevApprovalCountRef.current = approvalCount;
-  }, [approvalCount, activeTab]);
+    prevHitlCountRef.current = hitlCount;
+  }, [hitlCount, activeTab]);
 
   return (
     <div className="border-t border-[var(--stgm-border,#e5e5e5)]">
@@ -516,9 +546,9 @@ function ExecutionBottomPanel({
           isActive={activeTab === "events"}
           onClick={() => { setActiveTab("events"); setCollapsed(false); }}
         />
-        {hasApprovals && (
+        {hasHitl && (
           <TabButton
-            label={`Approvals (${approvalCount})`}
+            label={`Approvals (${hitlCount})`}
             isActive={activeTab === "approvals"}
             onClick={() => { setActiveTab("approvals"); setCollapsed(false); }}
           />
@@ -546,24 +576,38 @@ function ExecutionBottomPanel({
               onNavigateToAgentExecution={onNavigateToAgentExecution}
               taskStates={taskStates}
               onSubmitTaskApproval={onSubmitTaskApproval}
-              isSubmittingApproval={isSubmittingApproval}
+              taskApprovalSubmittingTaskNames={taskApprovalSubmittingTaskNames}
+              taskApprovalErrorsByTaskName={taskApprovalErrorsByTaskName}
               className="h-full"
             />
           )}
-          {activeTab === "approvals" && pendingApprovals && onSubmitApproval && (
+          {activeTab === "approvals" && (
             <div className="h-full overflow-y-auto px-4 py-3">
               <div className="space-y-3">
-                {pendingApprovals.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}
+                {pendingApprovals && onSubmitApproval && pendingApprovals.map((pa) => {
+                  const toolCallId = pa.approval?.toolCallId ?? "";
+                  return (
+                    <WorkflowExecutionApprovalCard
+                      key={toolCallId || pa.childAgentExecutionId}
+                      prompt={pa.approval?.message || `Tool "${pa.approval?.toolName}" requires approval`}
+                      toolCallId={toolCallId}
+                      approvers={[]}
+                      timeoutSeconds={0}
+                      onSubmitApproval={onSubmitApproval}
+                      isSubmitting={approvalSubmittingToolCallIds.has(toolCallId)}
+                      error={approvalErrorsByToolCallId.get(toolCallId) ?? null}
+                    />
+                  );
+                })}
+                {pendingFileReviews && pendingFileReviews.length > 0 && (
+                  <WorkflowFileReviewList
+                    pendingFileReviews={pendingFileReviews}
+                    onSubmitFileDecision={onSubmitFileDecision}
+                    submittingDecisionKeys={fileDecisionSubmittingKeys}
+                    decisionErrors={fileDecisionErrorsByKey}
+                    onNavigateToAgentExecution={onNavigateToAgentExecution}
                   />
-                ))}
+                )}
               </div>
             </div>
           )}

package/src/workflow/WorkflowExplainDialog.tsx

@@ -2,8 +2,8 @@
 
 import { useCallback, useEffect, useRef } from "react";
 import { cn } from "@stigmer/theme";
-import { useExplainWorkflowFlow, type ExplainPhase } from "./useExplainWorkflowFlow";
-import { MessageThread } from "../execution/MessageThread";
+import { useExplainWorkflowFlow, type ExplainPhase } from "./useExplainWorkflowFlow.js";
+import { MessageThread } from "../execution/MessageThread.js";
 
 /** Props for {@link WorkflowExplainDialog}. */
 export interface WorkflowExplainDialogProps {

package/src/workflow/WorkflowFileReviewList.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { useMemo } from "react";
+import {
+  FileChangeSetStatus,
+  type FileDecisionAction,
+} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import type { WorkflowPendingFileReview } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/api_pb";
+import { displayFileChangeSets } from "@stigmer/sdk";
+import { cn } from "@stigmer/theme";
+import { FileReviewCard } from "../execution/FileReviewCard.js";
+import type { FileDecisionOptions } from "../execution/useFileReview.js";
+import { useExecutionStream } from "../execution/useExecutionStream.js";
+
+/**
+ * Submit handler for a workflow-level file decision, matching
+ * `useWorkflowExecutionActions().submitFileDecision`. The child id is bound per
+ * card so the surface only needs the card-level `(action, options)`.
+ */
+export type WorkflowFileDecisionSubmit = (
+  childAgentExecutionId: string,
+  changeSetId: string,
+  action: FileDecisionAction,
+  options?: FileDecisionOptions,
+) => void;
+
+/** Props for {@link WorkflowFileReviewList}. */
+export interface WorkflowFileReviewListProps {
+  /**
+   * The parent workflow's surfaced file-review references
+   * (`status.pending_file_reviews`) — one entry per child agent execution.
+   */
+  readonly pendingFileReviews: readonly WorkflowPendingFileReview[];
+  /** Forwards a decision to the child (see {@link WorkflowFileDecisionSubmit}). */
+  readonly onSubmitFileDecision: WorkflowFileDecisionSubmit;
+  /** In-flight decision keys (pass `fileDecisionSubmittingKeys` straight through). */
+  readonly submittingDecisionKeys?: ReadonlySet<string>;
+  /** Per-decision failures (pass `fileDecisionErrorsByKey` straight through). */
+  readonly decisionErrors?: ReadonlyMap<string, Error>;
+  /**
+   * Optional deep-link to open the child agent execution in its own view. When
+   * provided, each child's review renders a "View agent execution" affordance.
+   * Routing is the host's responsibility (DD-004).
+   */
+  readonly onNavigateToAgentExecution?: (agentExecutionId: string) => void;
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+}
+
+/**
+ * Renders the child agent file reviews surfaced on a parent WorkflowExecution.
+ *
+ * Reference-only, derive-from-child: the parent status carries only
+ * {@link WorkflowPendingFileReview} references (child id + change set ids). This
+ * list mounts one {@link WorkflowChildFileReview} per referenced child, which
+ * streams that child's execution and reuses the agent-level {@link FileReviewCard}
+ * to render the actual diff — the heavy content stays single-sourced on the child.
+ * A decision is forwarded to the child via `WorkflowExecution.submitFileDecision`.
+ *
+ * This is the file-review sibling of the workflow tool-approval surface
+ * (`WorkflowExecutionApprovalCard`). Empty `pendingFileReviews` renders nothing.
+ */
+export function WorkflowFileReviewList({
+  pendingFileReviews,
+  onSubmitFileDecision,
+  submittingDecisionKeys,
+  decisionErrors,
+  onNavigateToAgentExecution,
+  className,
+}: WorkflowFileReviewListProps): React.ReactElement | null {
+  if (pendingFileReviews.length === 0) return null;
+
+  return (
+    <div className={cn("stgm space-y-3", className)}>
+      {pendingFileReviews.map((ref) => (
+        <WorkflowChildFileReview
+          key={ref.childAgentExecutionId}
+          reference={ref}
+          onSubmitFileDecision={onSubmitFileDecision}
+          submittingDecisionKeys={submittingDecisionKeys}
+          decisionErrors={decisionErrors}
+          onNavigateToAgentExecution={onNavigateToAgentExecution}
+        />
+      ))}
+    </div>
+  );
+}
+
+interface WorkflowChildFileReviewProps {
+  readonly reference: WorkflowPendingFileReview;
+  readonly onSubmitFileDecision: WorkflowFileDecisionSubmit;
+  readonly submittingDecisionKeys?: ReadonlySet<string>;
+  readonly decisionErrors?: ReadonlyMap<string, Error>;
+  readonly onNavigateToAgentExecution?: (agentExecutionId: string) => void;
+}
+
+/**
+ * Streams a single referenced child agent execution and renders its
+ * AWAITING_REVIEW change sets (intersected with the parent's surfaced reference,
+ * so a decision always targets a gate the workflow has actually surfaced).
+ */
+function WorkflowChildFileReview({
+  reference,
+  onSubmitFileDecision,
+  submittingDecisionKeys,
+  decisionErrors,
+  onNavigateToAgentExecution,
+}: WorkflowChildFileReviewProps): React.ReactElement | null {
+  const childId = reference.childAgentExecutionId;
+  const { execution } = useExecutionStream(childId);
+
+  const changeSets = useMemo(() => {
+    const referenced = new Set(reference.changeSetId);
+    return displayFileChangeSets(execution?.status).filter(
+      (cs) =>
+        cs.status === FileChangeSetStatus.AWAITING_REVIEW &&
+        referenced.has(cs.id) &&
+        cs.changes.length > 0,
+    );
+  }, [execution?.status, reference.changeSetId]);
+
+  // Nothing to show yet (child still loading, or its projection has not caught up
+  // to the reference). The parent list already signals "review pending" for this
+  // child by virtue of the reference existing.
+  if (changeSets.length === 0) return null;
+
+  return (
+    <div className="space-y-2">
+      {onNavigateToAgentExecution && (
+        <button
+          type="button"
+          onClick={() => onNavigateToAgentExecution(childId)}
+          className="text-xs text-muted-foreground hover:text-foreground underline underline-offset-2"
+        >
+          View agent execution
+        </button>
+      )}
+      {changeSets.map((changeSet) => (
+        <FileReviewCard
+          key={changeSet.id}
+          fileChangeSet={changeSet}
+          interactive
+          submittingDecisionKeys={submittingDecisionKeys}
+          decisionErrors={decisionErrors}
+          onSubmit={(action, options) =>
+            onSubmitFileDecision(childId, changeSet.id, action, options)
+          }
+        />
+      ))}
+    </div>
+  );
+}

package/src/workflow/WorkflowGraphFullscreenDialog.tsx

@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useRef } from "react";
 import { cn } from "@stigmer/theme";
 import type { Workflow } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/api_pb";
-import { WorkflowOverviewGraph } from "./WorkflowOverviewGraph";
+import { WorkflowOverviewGraph } from "./WorkflowOverviewGraph.js";
 
 /** Props for {@link WorkflowGraphFullscreenDialog}. */
 export interface WorkflowGraphFullscreenDialogProps {

package/src/workflow/WorkflowInspectorPanel.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import { memo, useMemo } from "react";
-import type { WorkflowGraphModel } from "./workflow-graph-model";
-import type { CanvasSelection } from "./useWorkflowCanvas";
-import type { TaskKindDescriptor } from "./types";
-import { InspectorShell } from "./inspector/InspectorShell";
-import type { InspectorMutations } from "./inspector/types";
+import type { WorkflowGraphModel } from "./workflow-graph-model.js";
+import type { CanvasSelection } from "./useWorkflowCanvas.js";
+import type { TaskKindDescriptor } from "./types.js";
+import { InspectorShell } from "./inspector/InspectorShell.js";
+import type { InspectorMutations } from "./inspector/types.js";
 
 /** Props for {@link WorkflowInspectorPanel}. */
 export interface WorkflowInspectorPanelProps {

package/src/workflow/WorkflowNode.tsx

@@ -2,11 +2,11 @@
 
 import { memo } from "react";
 import type { NodeProps } from "@xyflow/react";
-import { CATEGORY_COLORS } from "./canvas-constants";
-import type { CanvasTaskNodeData } from "./workflow-graph-conversions";
-import { getVisualSpec } from "./task-type-visual-registry";
-import { NodeShell, NodeContent, NodeHandles, NodeActions, ExecutionBadge, BranchBadge, DiffBadge } from "./node-shell";
-import { useWorkflowGraphMode } from "./WorkflowGraphModeContext";
+import { CATEGORY_COLORS } from "./canvas-constants.js";
+import type { CanvasTaskNodeData } from "./workflow-graph-conversions.js";
+import { getVisualSpec } from "./task-type-visual-registry.js";
+import { NodeShell, NodeContent, NodeHandles, NodeActions, ExecutionBadge, BranchBadge, DiffBadge } from "./node-shell/index.js";
+import { useWorkflowGraphMode } from "./WorkflowGraphModeContext.js";
 
 const NESTED_TASK_KINDS = new Set(["fork", "for_each", "try_catch"]);
 

package/src/workflow/WorkflowNodePopover.tsx

@@ -2,9 +2,9 @@
 
 import { memo, useCallback, useEffect, useRef } from "react";
 import { cn } from "@stigmer/theme";
-import type { CanvasTaskNodeData } from "./workflow-graph-conversions";
-import { kindToDisplayName, categorizeKind } from "./kind-metadata";
-import { CATEGORY_COLORS } from "./canvas-constants";
+import type { CanvasTaskNodeData } from "./workflow-graph-conversions.js";
+import { kindToDisplayName, categorizeKind } from "./kind-metadata.js";
+import { CATEGORY_COLORS } from "./canvas-constants.js";
 
 /** Props for {@link WorkflowNodePopover}. */
 export interface WorkflowNodePopoverProps {

package/src/workflow/WorkflowOverviewGraph.tsx

@@ -15,14 +15,14 @@ import {
 import type { Node, NodeChange } from "@xyflow/react";
 import { cn } from "@stigmer/theme";
 import type { Workflow } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/api_pb";
-import { WorkflowNode } from "./WorkflowNode";
-import { CanvasTransitionEdge } from "./CanvasTransitionEdge";
-import { CANVAS_TASK_NODE_TYPE, CANVAS_TRANSITION_EDGE_TYPE } from "./workflow-graph-conversions";
-import type { CanvasTaskNodeData } from "./workflow-graph-conversions";
-import { WorkflowGraphModeProvider } from "./WorkflowGraphModeContext";
-import { useWorkflowOverviewGraph } from "./useWorkflowOverviewGraph";
-import { WorkflowNodePopover } from "./WorkflowNodePopover";
-import { getVisualSpec } from "./task-type-visual-registry";
+import { WorkflowNode } from "./WorkflowNode.js";
+import { CanvasTransitionEdge } from "./CanvasTransitionEdge.js";
+import { CANVAS_TASK_NODE_TYPE, CANVAS_TRANSITION_EDGE_TYPE } from "./workflow-graph-conversions.js";
+import type { CanvasTaskNodeData } from "./workflow-graph-conversions.js";
+import { WorkflowGraphModeProvider } from "./WorkflowGraphModeContext.js";
+import { useWorkflowOverviewGraph } from "./useWorkflowOverviewGraph.js";
+import { WorkflowNodePopover } from "./WorkflowNodePopover.js";
+import { getVisualSpec } from "./task-type-visual-registry.js";
 
 /** Props for {@link WorkflowOverviewGraph}. */
 export interface WorkflowOverviewGraphProps {

package/src/workflow/WorkflowRefinePanel.tsx

@@ -2,10 +2,10 @@
 
 import { useCallback, useRef, useState } from "react";
 import { cn } from "@stigmer/theme";
-import { useRefineWorkflowFlow, type RefinePhase } from "./useRefineWorkflowFlow";
-import { MessageThread } from "../execution/MessageThread";
-import { computeUnifiedDiff, type DiffLine } from "./workflow-yaml-diff";
-import { WorkflowDiffGraph } from "./WorkflowDiffGraph";
+import { useRefineWorkflowFlow, type RefinePhase } from "./useRefineWorkflowFlow.js";
+import { MessageThread } from "../execution/MessageThread.js";
+import { computeUnifiedDiff, type DiffLine } from "./workflow-yaml-diff.js";
+import { WorkflowDiffGraph } from "./WorkflowDiffGraph.js";
 
 /** Props for {@link WorkflowRefinePanel}. */
 export interface WorkflowRefinePanelProps {

package/src/workflow/WorkflowRepairCard.tsx

@@ -2,10 +2,10 @@
 
 import { useCallback, useRef, useState } from "react";
 import { cn } from "@stigmer/theme";
-import { useDiagnoseExecutionFlow, type DiagnosePhase } from "./useDiagnoseExecutionFlow";
-import { MessageThread } from "../execution/MessageThread";
-import { computeUnifiedDiff, type DiffLine } from "./workflow-yaml-diff";
-import { WorkflowDiffGraph } from "./WorkflowDiffGraph";
+import { useDiagnoseExecutionFlow, type DiagnosePhase } from "./useDiagnoseExecutionFlow.js";
+import { MessageThread } from "../execution/MessageThread.js";
+import { computeUnifiedDiff, type DiffLine } from "./workflow-yaml-diff.js";
+import { WorkflowDiffGraph } from "./WorkflowDiffGraph.js";
 
 /** Props for {@link WorkflowRepairCard}. */
 export interface WorkflowRepairCardProps {

package/src/workflow/WorkflowRunDialog.tsx

@@ -4,8 +4,8 @@ import { useCallback, useEffect, useRef } from "react";
 import { cn } from "@stigmer/theme";
 import type { Workflow } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/api_pb";
 import type { WorkflowInstance } from "@stigmer/protos/ai/stigmer/agentic/workflowinstance/v1/api_pb";
-import { useRunWorkflowFlow } from "./useRunWorkflowFlow";
-import { WorkflowRunForm } from "./WorkflowRunForm";
+import { useRunWorkflowFlow } from "./useRunWorkflowFlow.js";
+import { WorkflowRunForm } from "./WorkflowRunForm.js";
 
 /** Props for {@link WorkflowRunDialog}. */
 export interface WorkflowRunDialogProps {

package/src/workflow/WorkflowRunForm.tsx

@@ -4,7 +4,7 @@ import { useId } from "react";
 import { cn } from "@stigmer/theme";
 import type { EnvVarDeclaration } from "@stigmer/protos/ai/stigmer/agentic/environment/v1/spec_pb";
 import type { WorkflowInstance } from "@stigmer/protos/ai/stigmer/agentic/workflowinstance/v1/api_pb";
-import type { RunWorkflowFieldErrors } from "./useRunWorkflowFlow";
+import type { RunWorkflowFieldErrors } from "./useRunWorkflowFlow.js";
 
 /** Props for {@link WorkflowRunForm}. */
 export interface WorkflowRunFormProps {