@stigmer/react 1.0.3 → 2.0.0

package/src/workflow/WorkflowInspectorPanel.tsx

@@ -1,17 +1,11 @@
 "use client";
 
-import { memo, useState, useCallback } from "react";
-import { cn } from "@stigmer/theme";
-import type { JsonObject } from "@bufbuild/protobuf";
-import type { WorkflowGraphModel, WorkflowGraphNode, WorkflowGraphEdge } from "./workflow-graph-model";
-import { START_NODE_ID, END_NODE_ID } from "./workflow-graph-model";
+import { memo, useMemo } from "react";
+import type { WorkflowGraphModel } from "./workflow-graph-model";
 import type { CanvasSelection } from "./useWorkflowCanvas";
 import type { TaskKindDescriptor } from "./types";
-import { TaskConfigForm } from "./TaskConfigForm";
-import { BranchConditionBuilder } from "./BranchConditionBuilder";
-import { ApprovalFormBuilder } from "./ApprovalFormBuilder";
-import { CATEGORY_COLORS, TASK_NAME_PATTERN, TASK_NAME_PATTERN_ERROR } from "./canvas-constants";
-import { taskKindToString } from "./workflow-graph-conversions";
+import { InspectorShell } from "./inspector/InspectorShell";
+import type { InspectorMutations } from "./inspector/types";
 
 /** Props for {@link WorkflowInspectorPanel}. */
 export interface WorkflowInspectorPanelProps {
@@ -33,6 +27,12 @@ export interface WorkflowInspectorPanelProps {
   readonly onDeleteEdge?: (edgeId: string) => void;
   /** Called to delete a node (task). */
   readonly onDeleteNode?: (nodeId: string) => void;
+  /** Called to duplicate a node. */
+  readonly onDuplicateNode?: (nodeId: string) => void;
+  /** Called to toggle disabled state on a node. */
+  readonly onToggleDisabled?: (nodeId: string) => void;
+  /** Called to wrap a node in a try/catch container. */
+  readonly onWrapInTryCatch?: (nodeId: string) => void;
   /** Called to create/update/remove an edge for a specific branch handle. */
   readonly onUpdateBranchRouting?: (
     nodeId: string,
@@ -47,6 +47,30 @@ export interface WorkflowInspectorPanelProps {
   ) => void;
   /** Called to remove all edges from a specific branch handle. */
   readonly onRemoveBranchEdges?: (nodeId: string, handleId: string) => void;
+  /** Called to remove a switch case. @since T09 */
+  readonly onRemoveSwitchCase?: (switchNodeId: string, caseName: string) => void;
+  /** Called to reorder switch cases. @since T09 */
+  readonly onReorderSwitchCases?: (switchNodeId: string, newOrder: readonly string[]) => void;
+  /** Called to remove a fork branch. @since T09 */
+  readonly onRemoveForkBranch?: (forkNodeId: string, branchName: string) => void;
+  /** Called to reorder fork branches. @since T09 */
+  readonly onReorderForkBranches?: (forkNodeId: string, newOrder: readonly string[]) => void;
+  /** Called to rename a fork branch. @since T09 */
+  readonly onRenameForkBranch?: (forkNodeId: string, oldName: string, newName: string) => void;
+  /** Called to toggle fork compete (race) mode. @since T09 */
+  readonly onSetForkCompete?: (forkNodeId: string, compete: boolean) => void;
+  /** Called to update catch configuration. @since T09 */
+  readonly onUpdateCatchConfig?: (tryCatchNodeId: string, updates: { as?: string; compensate?: boolean }) => void;
+  /** Called to remove catch block. @since T09 */
+  readonly onRemoveCatchBlock?: (tryCatchNodeId: string) => void;
+  /** Called to update for_each configuration. @since T09 */
+  readonly onUpdateForEachConfig?: (forEachNodeId: string, updates: Partial<{ each: string; in: string; max_parallelism: number; batch_size: number; on_error: string }>) => void;
+  /** Validation errors keyed by node ID. */
+  readonly validationErrors?: ReadonlyMap<string, readonly string[]>;
+  /** Called to open the View YAML dialog for a node. */
+  readonly onViewYaml?: (nodeId: string) => void;
+  /** Content to render when nothing is selected (workflow summary). */
+  readonly emptyState?: React.ReactNode;
   /** Additional CSS class names. */
   readonly className?: string;
 }
@@ -54,14 +78,13 @@ export interface WorkflowInspectorPanelProps {
 /**
  * Inspector panel for the visual canvas editor.
  *
- * Renders a right sidebar with context-sensitive sections based on the
- * selected element: node inspector (Identity, Configuration, Export, Flow),
- * edge inspector (label, source/target), or sentinel summary.
+ * Thin wrapper that bridges the callback-based prop API from
+ * `WorkflowCanvasEditor` into the tabbed `InspectorShell` architecture.
  *
- * Controlled component: receives selection + graph from the canvas hook
- * and calls mutation methods for all edits (AD-T15-B3-004).
+ * The shell renders a tabbed inspector with a consistent header, actions
+ * menu, and per-tab content (Configure, Data, Runtime, Advanced, Docs).
  *
- * @since T15 Batch 3 (Inspector + Edit Loop)
+ * @since T15 Batch 3 (original), T10 (refactored to tabbed shell)
  */
 export const WorkflowInspectorPanel = memo(function WorkflowInspectorPanel({
   selection,
@@ -73,496 +96,82 @@ export const WorkflowInspectorPanel = memo(function WorkflowInspectorPanel({
   onUpdateFlow,
   onDeleteEdge,
   onDeleteNode,
+  onDuplicateNode,
+  onToggleDisabled,
+  onWrapInTryCatch,
   onUpdateBranchRouting,
   onMigrateBranchHandle,
   onRemoveBranchEdges,
+  onRemoveSwitchCase,
+  onReorderSwitchCases,
+  onRemoveForkBranch,
+  onReorderForkBranches,
+  onRenameForkBranch,
+  onSetForkCompete,
+  onUpdateCatchConfig,
+  onRemoveCatchBlock,
+  onUpdateForEachConfig,
+  onViewYaml,
+  validationErrors,
+  emptyState,
   className,
 }: WorkflowInspectorPanelProps) {
-  if (!selection || !graph) {
-    return (
-      <div className={cn("flex h-full items-center justify-center p-4", className)}>
-        <span className="text-xs text-[var(--stgm-muted-foreground,#737373)]">
-          Select a task or connection to inspect
-        </span>
-      </div>
-    );
-  }
-
-  if (selection.type === "edge") {
-    const edge = graph.edges.find((e) => e.id === selection.id);
-    if (!edge) return null;
-    return (
-      <EdgeInspector
-        edge={edge}
-        graph={graph}
-        onDeleteEdge={onDeleteEdge}
-        className={className}
-      />
-    );
-  }
-
-  const node = graph.nodes.find((n) => n.id === selection.id);
-  if (!node) return null;
-
-  if (node.id === START_NODE_ID || node.id === END_NODE_ID) {
-    return <SentinelInspector node={node} className={className} />;
-  }
+  const mutations = useMemo((): InspectorMutations => ({
+    onUpdateField,
+    onRenameNode,
+    onUpdateExport,
+    onUpdateFlow,
+    onDeleteEdge,
+    onDeleteNode,
+    onDuplicateNode,
+    onToggleDisabled,
+    onWrapInTryCatch,
+    onUpdateBranchRouting,
+    onMigrateBranchHandle,
+    onRemoveBranchEdges,
+    onRemoveSwitchCase,
+    onReorderSwitchCases,
+    onRemoveForkBranch,
+    onReorderForkBranches,
+    onRenameForkBranch,
+    onSetForkCompete,
+    onUpdateCatchConfig,
+    onRemoveCatchBlock,
+    onUpdateForEachConfig,
+  }), [
+    onUpdateField,
+    onRenameNode,
+    onUpdateExport,
+    onUpdateFlow,
+    onDeleteEdge,
+    onDeleteNode,
+    onDuplicateNode,
+    onToggleDisabled,
+    onWrapInTryCatch,
+    onUpdateBranchRouting,
+    onMigrateBranchHandle,
+    onRemoveBranchEdges,
+    onRemoveSwitchCase,
+    onReorderSwitchCases,
+    onRemoveForkBranch,
+    onReorderForkBranches,
+    onRenameForkBranch,
+    onSetForkCompete,
+    onUpdateCatchConfig,
+    onRemoveCatchBlock,
+    onUpdateForEachConfig,
+  ]);
 
   return (
-    <NodeInspector
-      node={node}
+    <InspectorShell
+      selection={selection}
       graph={graph}
       descriptor={descriptor}
-      onUpdateField={onUpdateField}
-      onRenameNode={onRenameNode}
-      onUpdateExport={onUpdateExport}
-      onUpdateFlow={onUpdateFlow}
-      onDeleteNode={onDeleteNode}
-      onUpdateBranchRouting={onUpdateBranchRouting}
-      onMigrateBranchHandle={onMigrateBranchHandle}
-      onRemoveBranchEdges={onRemoveBranchEdges}
+      mutations={mutations}
+      validationErrors={validationErrors}
+      emptyState={emptyState}
+      onViewYaml={onViewYaml}
+      className={className}
     />
   );
 });
-
-// ---------------------------------------------------------------------------
-// NodeInspector
-// ---------------------------------------------------------------------------
-
-function NodeInspector({
-  node,
-  graph,
-  descriptor,
-  onUpdateField,
-  onRenameNode,
-  onUpdateExport,
-  onUpdateFlow,
-  onDeleteNode,
-  onUpdateBranchRouting,
-  onMigrateBranchHandle,
-  onRemoveBranchEdges,
-}: {
-  node: WorkflowGraphNode;
-  graph: WorkflowGraphModel;
-  descriptor: TaskKindDescriptor | undefined;
-  onUpdateField: (nodeId: string, fieldPath: string, value: unknown) => void;
-  onRenameNode: (nodeId: string, newName: string) => void;
-  onUpdateExport: (nodeId: string, exportAs: string | undefined) => void;
-  onUpdateFlow: (nodeId: string, thenTarget: string | undefined) => void;
-  onDeleteNode?: (nodeId: string) => void;
-  onUpdateBranchRouting?: (nodeId: string, handleId: string, targetTask: string | undefined) => void;
-  onMigrateBranchHandle?: (nodeId: string, oldHandleId: string, newHandleId: string) => void;
-  onRemoveBranchEdges?: (nodeId: string, handleId: string) => void;
-}) {
-  const kindStr = taskKindToString(node.kind);
-  const categoryColor = CATEGORY_COLORS[node.category];
-
-  const handleFieldChange = useCallback(
-    (fieldPath: string, value: unknown) => {
-      onUpdateField(node.id, fieldPath, value);
-    },
-    [node.id, onUpdateField],
-  );
-
-  const otherTaskNames = graph.nodes
-    .filter((n) => n.id !== node.id && n.id !== START_NODE_ID && n.id !== END_NODE_ID)
-    .map((n) => n.taskName);
-
-  const isSwitchCase = kindStr === "switch_case";
-  const isHumanInput = kindStr === "human_input";
-  const hasSpecializedEditor = isSwitchCase || isHumanInput;
-
-  return (
-    <div className="flex h-full flex-col overflow-y-auto">
-      <IdentitySection
-        node={node}
-        graph={graph}
-        kindStr={kindStr}
-        categoryColor={categoryColor}
-        description={descriptor?.description}
-        onRenameNode={onRenameNode}
-      />
-
-      {/* Configuration: specialized editors for switch_case and human_input */}
-      <div className="border-t border-[var(--stgm-border,#e5e5e5)]">
-        <SectionHeader title="Configuration" />
-        {isSwitchCase && onUpdateBranchRouting && onMigrateBranchHandle && onRemoveBranchEdges ? (
-          <BranchConditionBuilder
-            nodeId={node.id}
-            config={node.config}
-            edges={graph.edges}
-            allTaskNames={otherTaskNames}
-            onUpdateConfig={handleFieldChange}
-            onUpdateBranchRouting={(handleId, target) =>
-              onUpdateBranchRouting(node.id, handleId, target)
-            }
-            onMigrateBranchHandle={(oldId, newId) =>
-              onMigrateBranchHandle(node.id, oldId, newId)
-            }
-            onRemoveBranchEdges={(handleId) =>
-              onRemoveBranchEdges(node.id, handleId)
-            }
-          />
-        ) : isHumanInput && onUpdateBranchRouting && onMigrateBranchHandle && onRemoveBranchEdges ? (
-          <ApprovalFormBuilder
-            nodeId={node.id}
-            config={node.config}
-            edges={graph.edges}
-            allTaskNames={otherTaskNames}
-            onUpdateConfig={handleFieldChange}
-            onUpdateBranchRouting={(handleId, target) =>
-              onUpdateBranchRouting(node.id, handleId, target)
-            }
-            onMigrateBranchHandle={(oldId, newId) =>
-              onMigrateBranchHandle(node.id, oldId, newId)
-            }
-            onRemoveBranchEdges={(handleId) =>
-              onRemoveBranchEdges(node.id, handleId)
-            }
-          />
-        ) : descriptor && descriptor.fields.length > 0 ? (
-          <TaskConfigForm
-            fields={descriptor.fields}
-            fieldGroups={descriptor.fieldGroups}
-            config={node.config}
-            onChange={handleFieldChange}
-          />
-        ) : (
-          <div className="px-3 py-4 text-xs text-[var(--stgm-muted-foreground,#737373)]">
-            No configurable fields for this task kind.
-          </div>
-        )}
-      </div>
-
-      <div className="border-t border-[var(--stgm-border,#e5e5e5)]">
-        <ExportSection node={node} onUpdateExport={onUpdateExport} />
-      </div>
-
-      {/* Flow section hidden for branching tasks (routing is managed by the builder) */}
-      {!hasSpecializedEditor && (
-        <div className="border-t border-[var(--stgm-border,#e5e5e5)]">
-          <FlowSection node={node} otherTaskNames={otherTaskNames} onUpdateFlow={onUpdateFlow} />
-        </div>
-      )}
-
-      {onDeleteNode && (
-        <div className="mt-auto border-t border-[var(--stgm-border,#e5e5e5)] px-3 py-3">
-          <button
-            type="button"
-            onClick={() => onDeleteNode(node.id)}
-            className="w-full rounded-md border border-[var(--stgm-destructive,#ef4444)]/30 px-2.5 py-1.5 text-xs font-medium text-[var(--stgm-destructive,#ef4444)] transition-colors hover:bg-[var(--stgm-destructive,#ef4444)]/10"
-          >
-            Delete task
-          </button>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// IdentitySection
-// ---------------------------------------------------------------------------
-
-function IdentitySection({
-  node,
-  graph,
-  kindStr,
-  categoryColor,
-  description,
-  onRenameNode,
-}: {
-  node: WorkflowGraphNode;
-  graph: WorkflowGraphModel;
-  kindStr: string;
-  categoryColor: string;
-  description?: string;
-  onRenameNode: (nodeId: string, newName: string) => void;
-}) {
-  const [editingName, setEditingName] = useState(false);
-  const [nameValue, setNameValue] = useState(node.taskName);
-  const [nameError, setNameError] = useState<string | null>(null);
-
-  const existingNames = new Set(
-    graph.nodes.filter((n) => n.id !== node.id).map((n) => n.taskName),
-  );
-
-  const startEditing = useCallback(() => {
-    setEditingName(true);
-    setNameValue(node.taskName);
-    setNameError(null);
-  }, [node.taskName]);
-
-  const commitName = useCallback(() => {
-    const trimmed = nameValue.trim();
-    if (!trimmed) {
-      setNameError("Name cannot be empty");
-      return;
-    }
-    if (!TASK_NAME_PATTERN.test(trimmed)) {
-      setNameError(TASK_NAME_PATTERN_ERROR);
-      return;
-    }
-    if (existingNames.has(trimmed)) {
-      setNameError("A task with this name already exists");
-      return;
-    }
-    setEditingName(false);
-    setNameError(null);
-    if (trimmed !== node.taskName) {
-      onRenameNode(node.id, trimmed);
-    }
-  }, [nameValue, existingNames, node.id, node.taskName, onRenameNode]);
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === "Enter") commitName();
-      if (e.key === "Escape") {
-        setEditingName(false);
-        setNameError(null);
-      }
-    },
-    [commitName],
-  );
-
-  return (
-    <div className="flex flex-col gap-2 px-3 py-3">
-      {/* Task name */}
-      {editingName ? (
-        <div className="flex flex-col gap-0.5">
-          <input
-            type="text"
-            value={nameValue}
-            onChange={(e) => { setNameValue(e.target.value); setNameError(null); }}
-            onBlur={commitName}
-            onKeyDown={handleKeyDown}
-            autoFocus
-            className="rounded-md border border-[var(--stgm-border,#d4d4d8)] bg-[var(--stgm-background,#fff)] px-2 py-1 text-sm font-medium text-[var(--stgm-foreground,#1a1a2e)] focus:outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]"
-          />
-          {nameError && (
-            <span className="text-[10px] text-[var(--stgm-destructive,#ef4444)]">{nameError}</span>
-          )}
-        </div>
-      ) : (
-        <button
-          type="button"
-          onClick={startEditing}
-          className="w-fit text-left text-sm font-medium text-[var(--stgm-foreground,#1a1a2e)] hover:underline"
-          title="Click to rename"
-        >
-          {node.taskName}
-        </button>
-      )}
-
-      {/* Kind badge */}
-      <div className="flex items-center gap-1.5">
-        <span
-          className="inline-block rounded px-1.5 py-0.5 text-[10px] font-medium leading-tight"
-          style={{
-            color: categoryColor,
-            backgroundColor: `color-mix(in srgb, ${categoryColor} 12%, transparent)`,
-          }}
-        >
-          {kindStr.replace(/_/g, " ")}
-        </span>
-        <span className="text-[10px] text-[var(--stgm-muted-foreground,#737373)]">
-          {node.category}
-        </span>
-      </div>
-
-      {/* Description */}
-      {description && (
-        <p className="text-[11px] leading-relaxed text-[var(--stgm-muted-foreground,#737373)]">
-          {description}
-        </p>
-      )}
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// ExportSection
-// ---------------------------------------------------------------------------
-
-function ExportSection({
-  node,
-  onUpdateExport,
-}: {
-  node: WorkflowGraphNode;
-  onUpdateExport: (nodeId: string, exportAs: string | undefined) => void;
-}) {
-  const [value, setValue] = useState(node.export?.as ?? "");
-
-  const handleChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      setValue(e.target.value);
-    },
-    [],
-  );
-
-  const handleBlur = useCallback(() => {
-    const trimmed = value.trim();
-    onUpdateExport(node.id, trimmed || undefined);
-  }, [value, node.id, onUpdateExport]);
-
-  return (
-    <div className="flex flex-col gap-1.5 px-3 py-3">
-      <SectionHeader title="Export" />
-      <label className="text-[11px] text-[var(--stgm-muted-foreground,#737373)]">
-        Export task output as a named variable
-      </label>
-      <input
-        type="text"
-        value={value}
-        onChange={handleChange}
-        onBlur={handleBlur}
-        placeholder="e.g., result, analysis_output"
-        className="w-full rounded-md border border-[var(--stgm-border,#d4d4d8)] bg-[var(--stgm-background,#fff)] px-2 py-1.5 text-xs text-[var(--stgm-foreground,#1a1a2e)] placeholder:text-[var(--stgm-muted-foreground,#a3a3a3)] focus:outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]"
-      />
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// FlowSection
-// ---------------------------------------------------------------------------
-
-function FlowSection({
-  node,
-  otherTaskNames,
-  onUpdateFlow,
-}: {
-  node: WorkflowGraphNode;
-  otherTaskNames: string[];
-  onUpdateFlow: (nodeId: string, thenTarget: string | undefined) => void;
-}) {
-  const currentFlow = node.flow?.then ?? "";
-
-  const handleChange = useCallback(
-    (e: React.ChangeEvent<HTMLSelectElement>) => {
-      const val = e.target.value;
-      onUpdateFlow(node.id, val || undefined);
-    },
-    [node.id, onUpdateFlow],
-  );
-
-  return (
-    <div className="flex flex-col gap-1.5 px-3 py-3">
-      <SectionHeader title="Flow" />
-      <label className="text-[11px] text-[var(--stgm-muted-foreground,#737373)]">
-        Transition after this task completes
-      </label>
-      <select
-        value={currentFlow}
-        onChange={handleChange}
-        className="w-full rounded-md border border-[var(--stgm-border,#d4d4d8)] bg-[var(--stgm-background,#fff)] px-2 py-1.5 text-xs text-[var(--stgm-foreground,#1a1a2e)] focus:outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]"
-      >
-        <option value="">Next (implicit sequential)</option>
-        <option value="end">End workflow</option>
-        {otherTaskNames.map((name) => (
-          <option key={name} value={name}>
-            {name}
-          </option>
-        ))}
-      </select>
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// EdgeInspector
-// ---------------------------------------------------------------------------
-
-function EdgeInspector({
-  edge,
-  graph,
-  onDeleteEdge,
-  className,
-}: {
-  edge: WorkflowGraphEdge;
-  graph: WorkflowGraphModel;
-  onDeleteEdge?: (edgeId: string) => void;
-  className?: string;
-}) {
-  const sourceNode = graph.nodes.find((n) => n.id === edge.source);
-  const targetNode = graph.nodes.find((n) => n.id === edge.target);
-
-  return (
-    <div className={cn("flex h-full flex-col gap-4 p-3", className)}>
-      <SectionHeader title="Connection" />
-
-      <div className="flex flex-col gap-2">
-        <div className="flex items-center gap-2 text-xs">
-          <span className="font-medium text-[var(--stgm-foreground,#1a1a2e)]">
-            {sourceNode?.taskName ?? edge.source}
-          </span>
-          <span className="text-[var(--stgm-muted-foreground,#737373)]">→</span>
-          <span className="font-medium text-[var(--stgm-foreground,#1a1a2e)]">
-            {targetNode?.taskName ?? edge.target}
-          </span>
-        </div>
-
-        {edge.label && (
-          <div className="flex items-center gap-1.5">
-            <span className="text-[11px] text-[var(--stgm-muted-foreground,#737373)]">Label:</span>
-            <span className="text-xs text-[var(--stgm-foreground,#1a1a2e)]">{edge.label}</span>
-          </div>
-        )}
-
-        {edge.sourceHandle && (
-          <div className="flex items-center gap-1.5">
-            <span className="text-[11px] text-[var(--stgm-muted-foreground,#737373)]">Port:</span>
-            <span className="text-xs text-[var(--stgm-foreground,#1a1a2e)]">{edge.sourceHandle}</span>
-          </div>
-        )}
-      </div>
-
-      {onDeleteEdge && (
-        <button
-          type="button"
-          onClick={() => onDeleteEdge(edge.id)}
-          className="self-start rounded px-2 py-1 text-xs text-[var(--stgm-destructive,#ef4444)] hover:bg-[var(--stgm-destructive,#ef4444)]/10"
-        >
-          Delete connection
-        </button>
-      )}
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// SentinelInspector
-// ---------------------------------------------------------------------------
-
-function SentinelInspector({
-  node,
-  className,
-}: {
-  node: WorkflowGraphNode;
-  className?: string;
-}) {
-  const isStart = node.id === START_NODE_ID;
-
-  return (
-    <div className={cn("flex h-full flex-col gap-2 p-3", className)}>
-      <SectionHeader title={isStart ? "Start" : "End"} />
-      <p className="text-xs text-[var(--stgm-muted-foreground,#737373)]">
-        {isStart
-          ? "Entry point of the workflow. The first task is connected automatically."
-          : "Terminal point. Tasks routing here end the workflow execution."}
-      </p>
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Shared
-// ---------------------------------------------------------------------------
-
-function SectionHeader({ title }: { title: string }) {
-  return (
-    <h3 className="text-[11px] font-semibold uppercase tracking-wide text-[var(--stgm-muted-foreground,#737373)]">
-      {title}
-    </h3>
-  );
-}