@stigmer/react 1.0.4 → 2.0.0

package/src/workflow/inspector/InspectorHeader.tsx

@@ -0,0 +1,265 @@
+"use client";
+
+import { memo, useState, useCallback } from "react";
+import { cn } from "@stigmer/theme";
+import type { WorkflowGraphModel } from "../workflow-graph-model";
+import { TASK_NAME_PATTERN, TASK_NAME_PATTERN_ERROR } from "../canvas-constants";
+import type { InspectorNodeIdentity, InspectorMutations } from "./types";
+
+/** Props for {@link InspectorHeader}. */
+export interface InspectorHeaderProps {
+  /** Resolved node identity for the selected task. */
+  readonly identity: InspectorNodeIdentity;
+  /** Graph model for name uniqueness validation. */
+  readonly graph: WorkflowGraphModel;
+  /** Mutation callbacks for node actions. */
+  readonly mutations: InspectorMutations;
+  /** Called to open the View YAML dialog for this node. */
+  readonly onViewYaml?: (nodeId: string) => void;
+  /** Additional CSS class names. */
+  readonly className?: string;
+}
+
+/**
+ * Inspector panel header showing node identity and an actions overflow menu.
+ *
+ * Displays the task name (click-to-rename), kind badge with category color,
+ * and a `...` overflow menu for structural actions (Duplicate, Delete, etc.).
+ *
+ * @since T10 (Inspector Panel Refactor)
+ */
+export const InspectorHeader = memo(function InspectorHeader({
+  identity,
+  graph,
+  mutations,
+  onViewYaml,
+  className,
+}: InspectorHeaderProps) {
+  const [editingName, setEditingName] = useState(false);
+  const [nameValue, setNameValue] = useState(identity.taskName);
+  const [nameError, setNameError] = useState<string | null>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  const existingNames = new Set(
+    graph.nodes.filter((n) => n.id !== identity.nodeId).map((n) => n.taskName),
+  );
+
+  const startEditing = useCallback(() => {
+    setEditingName(true);
+    setNameValue(identity.taskName);
+    setNameError(null);
+    setMenuOpen(false);
+  }, [identity.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 !== identity.taskName) {
+      mutations.onRenameNode(identity.nodeId, trimmed);
+    }
+  }, [nameValue, existingNames, identity.nodeId, identity.taskName, mutations.onRenameNode]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter") commitName();
+      if (e.key === "Escape") {
+        setEditingName(false);
+        setNameError(null);
+      }
+    },
+    [commitName],
+  );
+
+  const toggleMenu = useCallback(() => setMenuOpen((prev) => !prev), []);
+  const closeMenu = useCallback(() => setMenuOpen(false), []);
+
+  return (
+    <div className={cn("flex flex-col gap-1.5 border-b border-[var(--stgm-border,#e5e5e5)] px-3 py-2.5", className)}>
+      {/* Row 1: task name + overflow menu */}
+      <div className="flex items-center gap-1">
+        <div className="min-w-0 flex-1">
+          {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="w-full rounded-md border border-[var(--stgm-border,#d4d4d8)] bg-[var(--stgm-background,#fff)] px-2 py-1 text-sm font-semibold 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 max-w-full truncate text-left text-sm font-semibold text-[var(--stgm-foreground,#1a1a2e)] hover:underline"
+              title="Click to rename"
+            >
+              {identity.taskName}
+            </button>
+          )}
+        </div>
+
+        {/* Overflow menu trigger */}
+        <div className="relative shrink-0">
+          <button
+            type="button"
+            onClick={toggleMenu}
+            className="flex h-6 w-6 items-center justify-center rounded text-[var(--stgm-muted-foreground,#737373)] hover:bg-[var(--stgm-muted,#f5f5f5)] hover:text-[var(--stgm-foreground,#1a1a2e)]"
+            aria-label="Node actions"
+            aria-expanded={menuOpen}
+            aria-haspopup="true"
+          >
+            <MoreIcon />
+          </button>
+
+          {menuOpen && (
+            <ActionsMenu
+              nodeId={identity.nodeId}
+              mutations={mutations}
+              onRename={startEditing}
+              onViewYaml={onViewYaml}
+              onClose={closeMenu}
+            />
+          )}
+        </div>
+      </div>
+
+      {/* Row 2: kind badge + category */}
+      <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: identity.categoryColor,
+            backgroundColor: `color-mix(in srgb, ${identity.categoryColor} 12%, transparent)`,
+          }}
+        >
+          {identity.kindString.replace(/_/g, " ")}
+        </span>
+        {identity.description && (
+          <span className="truncate text-[10px] text-[var(--stgm-muted-foreground,#737373)]" title={identity.description}>
+            {identity.description}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+});
+
+// ---------------------------------------------------------------------------
+// Actions menu
+// ---------------------------------------------------------------------------
+
+function ActionsMenu({
+  nodeId,
+  mutations,
+  onRename,
+  onViewYaml,
+  onClose,
+}: {
+  nodeId: string;
+  mutations: InspectorMutations;
+  onRename: () => void;
+  onViewYaml?: (nodeId: string) => void;
+  onClose: () => void;
+}) {
+  const handleAction = useCallback(
+    (action: () => void) => {
+      onClose();
+      action();
+    },
+    [onClose],
+  );
+
+  return (
+    <>
+      {/* Click-away backdrop */}
+      <div className="fixed inset-0 z-40" onClick={onClose} aria-hidden="true" />
+
+      <div
+        role="menu"
+        className="absolute right-0 top-full z-50 mt-1 min-w-[160px] rounded-md border border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-popover,var(--stgm-background,#fff))] py-1 shadow-md"
+      >
+        <MenuItem label="Rename" onClick={() => handleAction(onRename)} />
+        {mutations.onDuplicateNode && (
+          <MenuItem label="Duplicate" onClick={() => handleAction(() => mutations.onDuplicateNode!(nodeId))} />
+        )}
+        {mutations.onToggleDisabled && (
+          <MenuItem label="Disable / Bypass" onClick={() => handleAction(() => mutations.onToggleDisabled!(nodeId))} />
+        )}
+        {mutations.onWrapInTryCatch && (
+          <MenuItem label="Wrap in Try/Catch" onClick={() => handleAction(() => mutations.onWrapInTryCatch!(nodeId))} />
+        )}
+        {onViewYaml && (
+          <MenuItem label="View YAML" onClick={() => handleAction(() => onViewYaml(nodeId))} />
+        )}
+        <MenuDivider />
+        {mutations.onDeleteNode && (
+          <MenuItem
+            label="Delete task"
+            destructive
+            onClick={() => handleAction(() => mutations.onDeleteNode!(nodeId))}
+          />
+        )}
+      </div>
+    </>
+  );
+}
+
+function MenuItem({
+  label,
+  onClick,
+  destructive,
+}: {
+  label: string;
+  onClick: () => void;
+  destructive?: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      role="menuitem"
+      onClick={onClick}
+      className={cn(
+        "flex w-full items-center px-3 py-1.5 text-left text-xs transition-colors",
+        destructive
+          ? "text-[var(--stgm-destructive,#ef4444)] hover:bg-[var(--stgm-destructive,#ef4444)]/10"
+          : "text-[var(--stgm-foreground,#1a1a2e)] hover:bg-[var(--stgm-muted,#f5f5f5)]",
+      )}
+    >
+      {label}
+    </button>
+  );
+}
+
+function MenuDivider() {
+  return <div className="my-1 border-t border-[var(--stgm-border,#e5e5e5)]" />;
+}
+
+function MoreIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <circle cx="8" cy="3" r="1.5" />
+      <circle cx="8" cy="8" r="1.5" />
+      <circle cx="8" cy="13" r="1.5" />
+    </svg>
+  );
+}

package/src/workflow/inspector/InspectorShell.tsx

@@ -0,0 +1,248 @@
+"use client";
+
+import { memo, useMemo, 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 type { CanvasSelection } from "../useWorkflowCanvas";
+import type { TaskKindDescriptor } from "../types";
+import { Tabs } from "../../tabs/Tabs";
+import { CATEGORY_COLORS } from "../canvas-constants";
+import { taskKindToString } from "../workflow-graph-conversions";
+import { InspectorHeader } from "./InspectorHeader";
+import { useInspectorTabs } from "./useInspectorTabs";
+import { ConfigureTab } from "./tabs/ConfigureTab";
+import { BranchesTab } from "./tabs/BranchesTab";
+import { CatchTab } from "./tabs/CatchTab";
+import { IterationTab } from "./tabs/IterationTab";
+import { DataTab } from "./tabs/DataTab";
+import { RuntimeTab } from "./tabs/RuntimeTab";
+import { AdvancedTab } from "./tabs/AdvancedTab";
+import { DocsTab } from "./tabs/DocsTab";
+import { EdgeInspector } from "./EdgeInspector";
+import { SentinelInspector } from "./SentinelInspector";
+import type { InspectorMutations, InspectorNodeIdentity, DesignTabId } from "./types";
+
+/** Props for {@link InspectorShell}. */
+export interface InspectorShellProps {
+  /** Currently selected element on the canvas. */
+  readonly selection: CanvasSelection | null;
+  /** The current graph model for node/edge lookups. */
+  readonly graph: WorkflowGraphModel | null;
+  /** Descriptor for the selected node's task kind. */
+  readonly descriptor: TaskKindDescriptor | undefined;
+  /** Mutation callbacks for design-mode editing. */
+  readonly mutations: InspectorMutations;
+  /** Validation errors keyed by node ID. */
+  readonly validationErrors?: ReadonlyMap<string, readonly string[]>;
+  /** Content to render when nothing is selected. */
+  readonly emptyState?: React.ReactNode;
+  /** Called to open the View YAML dialog for a node. */
+  readonly onViewYaml?: (nodeId: string) => void;
+  /** Additional CSS class names. */
+  readonly className?: string;
+}
+
+/**
+ * Shared inspector shell that renders a consistent header, tab bar, and
+ * scrollable content area. Routes to the appropriate sub-inspector based
+ * on the current selection.
+ *
+ * In design mode, renders tabbed configuration forms. Sentinel and edge
+ * selections render dedicated lightweight inspectors.
+ *
+ * @since T10 (Inspector Panel Refactor)
+ */
+export const InspectorShell = memo(function InspectorShell({
+  selection,
+  graph,
+  descriptor,
+  mutations,
+  validationErrors,
+  emptyState,
+  onViewYaml,
+  className,
+}: InspectorShellProps) {
+  if (!selection || !graph) {
+    return (
+      <div className={cn("flex h-full flex-col", className)}>
+        {emptyState ?? (
+          <div className="flex flex-1 items-center justify-center p-4">
+            <span className="text-xs text-[var(--stgm-muted-foreground,#737373)]">
+              Select a task or connection to inspect
+            </span>
+          </div>
+        )}
+      </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={mutations.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} />;
+  }
+
+  return (
+    <NodeInspectorShell
+      node={node}
+      graph={graph}
+      descriptor={descriptor}
+      mutations={mutations}
+      validationErrors={validationErrors}
+      onViewYaml={onViewYaml}
+      className={className}
+    />
+  );
+});
+
+// ---------------------------------------------------------------------------
+// NodeInspectorShell — tabbed design-mode inspector
+// ---------------------------------------------------------------------------
+
+function NodeInspectorShell({
+  node,
+  graph,
+  descriptor,
+  mutations,
+  validationErrors,
+  onViewYaml,
+  className,
+}: {
+  node: WorkflowGraphNode;
+  graph: WorkflowGraphModel;
+  descriptor: TaskKindDescriptor | undefined;
+  mutations: InspectorMutations;
+  validationErrors?: ReadonlyMap<string, readonly string[]>;
+  onViewYaml?: (nodeId: string) => void;
+  className?: string;
+}) {
+  const kindStr = taskKindToString(node.kind);
+
+  const identity = useMemo((): InspectorNodeIdentity => ({
+    nodeId: node.id,
+    taskName: node.taskName,
+    kindString: kindStr,
+    category: node.category,
+    categoryColor: CATEGORY_COLORS[node.category],
+    displayName: descriptor?.displayName ?? kindStr.replace(/_/g, " "),
+    description: descriptor?.description,
+    icon: descriptor?.icon,
+  }), [node.id, node.taskName, node.category, kindStr, descriptor]);
+
+  const { tabs, activeTab, setActiveTab } = useInspectorTabs({
+    kindString: kindStr,
+    descriptor,
+    mode: "design",
+    nodeId: node.id,
+  });
+
+  const handleTabChange = useCallback(
+    (tabId: string) => setActiveTab(tabId as DesignTabId),
+    [setActiveTab],
+  );
+
+  const handleFieldChange = useCallback(
+    (fieldPath: string, value: unknown) => {
+      mutations.onUpdateField(node.id, fieldPath, value);
+    },
+    [node.id, mutations.onUpdateField],
+  );
+
+  const otherTaskNames = useMemo(
+    () =>
+      graph.nodes
+        .filter((n) => n.id !== node.id && n.id !== START_NODE_ID && n.id !== END_NODE_ID)
+        .map((n) => n.taskName),
+    [graph.nodes, node.id],
+  );
+
+  const nodeErrors = validationErrors?.get(node.id);
+
+  return (
+    <div className={cn("flex h-full flex-col", className)}>
+      <InspectorHeader
+        identity={identity}
+        graph={graph}
+        mutations={mutations}
+        onViewYaml={onViewYaml}
+      />
+
+      <Tabs
+        tabs={tabs.map((t) => ({ id: t.id, label: t.label, badge: t.badge, icon: t.icon }))}
+        activeTab={activeTab}
+        onTabChange={handleTabChange}
+        aria-label="Task configuration"
+        className="min-h-0 flex-1"
+      >
+        <div className="overflow-y-auto">
+          {activeTab === "configure" && (
+            <ConfigureTab
+              node={node}
+              graph={graph}
+              descriptor={descriptor}
+              kindString={kindStr}
+              otherTaskNames={otherTaskNames}
+              onFieldChange={handleFieldChange}
+              mutations={mutations}
+            />
+          )}
+          {activeTab === "branches" && (
+            <BranchesTab
+              node={node}
+              graph={graph}
+              mutations={mutations}
+              kindString={kindStr}
+            />
+          )}
+          {activeTab === "catch" && (
+            <CatchTab node={node} mutations={mutations} />
+          )}
+          {activeTab === "iteration" && (
+            <IterationTab node={node} mutations={mutations} />
+          )}
+          {activeTab === "data" && (
+            <DataTab
+              node={node}
+              onUpdateExport={mutations.onUpdateExport}
+            />
+          )}
+          {activeTab === "runtime" && (
+            <RuntimeTab
+              node={node}
+              kindString={kindStr}
+              descriptor={descriptor}
+              onFieldChange={handleFieldChange}
+            />
+          )}
+          {activeTab === "advanced" && (
+            <AdvancedTab
+              node={node}
+              otherTaskNames={otherTaskNames}
+              kindString={kindStr}
+              onUpdateFlow={mutations.onUpdateFlow}
+            />
+          )}
+          {activeTab === "docs" && descriptor && (
+            <DocsTab descriptor={descriptor} />
+          )}
+        </div>
+      </Tabs>
+    </div>
+  );
+}

package/src/workflow/inspector/NestedTaskList.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { memo, useCallback } from "react";
+import { cn } from "@stigmer/theme";
+
+/** A nested task entry for display in the inspector. */
+export interface NestedTaskEntry {
+  readonly name: string;
+  readonly kind: string;
+  readonly index: number;
+}
+
+export interface NestedTaskListProps {
+  /** Ordered list of nested tasks to display. */
+  readonly tasks: readonly NestedTaskEntry[];
+  /** Whether reordering and removal are enabled. */
+  readonly editable?: boolean;
+  /** Called when a task should be moved (from → to index). */
+  readonly onReorder?: (fromIndex: number, toIndex: number) => void;
+  /** Called when a task should be removed. */
+  readonly onRemove?: (index: number) => void;
+  /** Called when a task is clicked (drill-down). */
+  readonly onSelect?: (index: number) => void;
+  /** Label for the empty state. */
+  readonly emptyLabel?: string;
+  /** Use dashed borders for catch/error context styling. */
+  readonly dashed?: boolean;
+}
+
+/**
+ * Shared inspector sub-component for displaying and managing nested task arrays.
+ *
+ * Used by Fork branches, TryCatch try/catch blocks, and ForEach do blocks.
+ * Supports reorder, removal, and click-to-drill-down.
+ *
+ * @since T09 (Branch Management UX)
+ */
+export const NestedTaskList = memo(function NestedTaskList({
+  tasks,
+  editable = false,
+  onReorder,
+  onRemove,
+  onSelect,
+  emptyLabel = "No tasks",
+  dashed = false,
+}: NestedTaskListProps) {
+  const handleMoveUp = useCallback(
+    (index: number) => {
+      if (index > 0) onReorder?.(index, index - 1);
+    },
+    [onReorder],
+  );
+
+  const handleMoveDown = useCallback(
+    (index: number) => {
+      if (index < tasks.length - 1) onReorder?.(index, index + 1);
+    },
+    [onReorder, tasks.length],
+  );
+
+  if (tasks.length === 0) {
+    return (
+      <p className="text-[11px] text-[var(--stgm-muted-foreground,#737373)] italic">
+        {emptyLabel}
+      </p>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-1" role="list" aria-label="Nested tasks">
+      {tasks.map((task, idx) => (
+        <div
+          key={`${task.name}-${idx}`}
+          role="listitem"
+          className={cn(
+            "group/task flex items-center gap-2 rounded px-2 py-1 transition-colors",
+            dashed ? "border border-dashed border-[var(--stgm-border,#e5e5e5)]" : "border border-[var(--stgm-border,#e5e5e5)]",
+            onSelect && "cursor-pointer hover:bg-[var(--stgm-accent,#f5f5f5)]",
+          )}
+          onClick={onSelect ? () => onSelect(idx) : undefined}
+          aria-label={`${task.kind} task: ${task.name}`}
+        >
+          {/* Reorder controls */}
+          {editable && onReorder && (
+            <div className="flex flex-col gap-0.5 opacity-0 group-hover/task:opacity-100 transition-opacity">
+              <button
+                type="button"
+                onClick={(e) => { e.stopPropagation(); handleMoveUp(idx); }}
+                disabled={idx === 0}
+                className="text-[var(--stgm-muted-foreground,#737373)] disabled:opacity-30 hover:text-[var(--stgm-foreground,#1a1a2e)]"
+                aria-label={`Move ${task.name} up`}
+              >
+                <svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor" aria-hidden="true">
+                  <path d="M4 1L1 5h6L4 1z" />
+                </svg>
+              </button>
+              <button
+                type="button"
+                onClick={(e) => { e.stopPropagation(); handleMoveDown(idx); }}
+                disabled={idx === tasks.length - 1}
+                className="text-[var(--stgm-muted-foreground,#737373)] disabled:opacity-30 hover:text-[var(--stgm-foreground,#1a1a2e)]"
+                aria-label={`Move ${task.name} down`}
+              >
+                <svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor" aria-hidden="true">
+                  <path d="M4 7L1 3h6L4 7z" />
+                </svg>
+              </button>
+            </div>
+          )}
+
+          {/* Task info */}
+          <span className="shrink-0 rounded bg-[var(--stgm-muted,#f5f5f5)] px-1 py-px text-[9px] font-mono text-[var(--stgm-muted-foreground,#737373)]">
+            {task.kind}
+          </span>
+          <span className="min-w-0 flex-1 truncate text-[11px] text-[var(--stgm-foreground,#1a1a2e)]">
+            {task.name}
+          </span>
+
+          {/* Remove button */}
+          {editable && onRemove && (
+            <button
+              type="button"
+              onClick={(e) => { e.stopPropagation(); onRemove(idx); }}
+              className="shrink-0 opacity-0 group-hover/task:opacity-100 transition-opacity text-[var(--stgm-muted-foreground,#737373)] hover:text-[var(--stgm-destructive,#ef4444)]"
+              aria-label={`Remove task ${task.name}`}
+              title="Remove"
+            >
+              <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
+                <path d="M2.5 2.5l5 5M7.5 2.5l-5 5" />
+              </svg>
+            </button>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+});

package/src/workflow/inspector/SentinelInspector.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { cn } from "@stigmer/theme";
+import type { WorkflowGraphNode } from "../workflow-graph-model";
+import { START_NODE_ID } from "../workflow-graph-model";
+
+/** Props for {@link SentinelInspector}. */
+export interface SentinelInspectorProps {
+  readonly node: WorkflowGraphNode;
+  readonly className?: string;
+}
+
+/**
+ * Inspector for sentinel nodes (Start / End).
+ *
+ * Shows a brief description of the sentinel's role in the workflow.
+ *
+ * @since T10 (Inspector Panel Refactor) — extracted from WorkflowInspectorPanel
+ */
+export function SentinelInspector({ node, className }: SentinelInspectorProps) {
+  const isStart = node.id === START_NODE_ID;
+
+  return (
+    <div className={cn("flex h-full flex-col gap-2 p-3", className)}>
+      <h3 className="text-[11px] font-semibold uppercase tracking-wide text-[var(--stgm-muted-foreground,#737373)]">
+        {isStart ? "Start" : "End"}
+      </h3>
+      <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>
+  );
+}