@stigmer/react 1.0.4 → 2.0.0

package/src/workflow/node-shell/NodeShell.tsx

@@ -0,0 +1,266 @@
+"use client";
+
+import { memo } from "react";
+import { cn } from "@stigmer/theme";
+import type { VisualClass } from "../task-type-visual-registry";
+import type { NodeExecutionStatus } from "../workflow-graph-conversions";
+import type { NodeDiffStatus } from "../diff/types";
+import { getShapePath, SVG_SHAPE_CLASSES } from "./shape-paths";
+
+export interface NodeShellProps {
+  visualClass: VisualClass;
+  width: number;
+  height: number;
+  /** Height reserved for the caption below the shape (0 for internal text shapes). */
+  captionHeight?: number;
+  categoryColor: string;
+  selected?: boolean;
+  errorCount?: number;
+  executionStatus?: NodeExecutionStatus;
+  diffStatus?: NodeDiffStatus;
+  children: React.ReactNode;
+}
+
+/**
+ * Visual boundary renderer for workflow nodes.
+ *
+ * Dispatches between two rendering strategies:
+ * - Rectangular shapes (task-card, subworkflow-card, container, terminal-pill):
+ *   Standard div with CSS borders, border-radius, and background.
+ * - Non-rectangular shapes (decision-diamond, gate-octagon, event-circle, parallel-bar):
+ *   SVG path background with HTML content overlay.
+ *
+ * The outer container is always a rectangular div for React Flow
+ * hit-testing compatibility.
+ */
+export const NodeShell = memo(function NodeShell({
+  visualClass,
+  width,
+  height,
+  captionHeight = 0,
+  categoryColor,
+  selected,
+  errorCount = 0,
+  executionStatus,
+  diffStatus,
+  children,
+}: NodeShellProps) {
+  if (SVG_SHAPE_CLASSES.has(visualClass)) {
+    return (
+      <SvgShell
+        visualClass={visualClass}
+        width={width}
+        height={height}
+        captionHeight={captionHeight}
+        categoryColor={categoryColor}
+        selected={selected}
+        errorCount={errorCount}
+        executionStatus={executionStatus}
+        diffStatus={diffStatus}
+      >
+        {children}
+      </SvgShell>
+    );
+  }
+
+  return (
+    <CssShell
+      visualClass={visualClass}
+      categoryColor={categoryColor}
+      selected={selected}
+      errorCount={errorCount}
+      executionStatus={executionStatus}
+      diffStatus={diffStatus}
+    >
+      {children}
+    </CssShell>
+  );
+});
+
+// ---------------------------------------------------------------------------
+// CssShell — for rectangular visual classes
+// ---------------------------------------------------------------------------
+
+function CssShell({
+  visualClass,
+  categoryColor,
+  selected,
+  errorCount = 0,
+  executionStatus,
+  diffStatus,
+  children,
+}: Omit<NodeShellProps, "width" | "height">) {
+  const shellClass = CSS_VARIANTS[visualClass] ?? CSS_VARIANTS["task-card"];
+
+  return (
+    <div
+      className={cn(
+        "stgm group relative flex items-center transition-shadow",
+        shellClass,
+        selected && "ring-2 ring-[var(--stgm-ring,#3b82f6)]",
+        diffStatus && DIFF_STATUS_CSS[diffStatus],
+        !diffStatus && errorCount > 0 && "!border-[var(--stgm-destructive,#ef4444)]",
+        !diffStatus && executionStatus && EXECUTION_STATUS_CSS[executionStatus],
+      )}
+      style={
+        visualClass === "task-card" || visualClass === "subworkflow-card"
+          ? { borderLeftWidth: 4, borderLeftColor: categoryColor }
+          : undefined
+      }
+      data-execution-status={executionStatus}
+      data-diff-status={diffStatus}
+    >
+      {children}
+    </div>
+  );
+}
+
+const CSS_VARIANTS: Partial<Record<VisualClass, string>> = {
+  "task-card": cn(
+    "min-w-[200px] gap-2 rounded-md border border-[var(--stgm-border-prominent,#d4d4d8)]",
+    "bg-[var(--stgm-card,var(--stgm-background,#fff))] px-3 py-2 shadow-sm",
+  ),
+  "subworkflow-card": cn(
+    "min-w-[200px] gap-2 rounded-md border-2 border-[var(--stgm-border-prominent,#d4d4d8)]",
+    "bg-[var(--stgm-card,var(--stgm-background,#fff))] px-3 py-2 shadow-sm",
+  ),
+  "container": cn(
+    "min-w-[240px] gap-2 rounded-lg border-2 border-dashed border-[var(--stgm-border-prominent,#d4d4d8)]",
+    "bg-[var(--stgm-card,var(--stgm-background,#fff))] px-3 py-2.5 shadow-sm",
+  ),
+  "terminal-pill": cn(
+    "items-center justify-center rounded-full border-2 px-4 py-1.5",
+    "bg-[var(--stgm-muted,#f5f5f5)]",
+  ),
+};
+
+// ---------------------------------------------------------------------------
+// SvgShell — for non-rectangular visual classes
+// ---------------------------------------------------------------------------
+
+function SvgShell({
+  visualClass,
+  width,
+  height,
+  captionHeight = 0,
+  categoryColor,
+  selected,
+  errorCount = 0,
+  executionStatus,
+  diffStatus,
+  children,
+}: NodeShellProps) {
+  const shapeHeight = height;
+  const totalHeight = height + captionHeight;
+  const pathD = getShapePath(visualClass, width, shapeHeight);
+
+  const strokeColor = diffStatus
+    ? svgStrokeForDiffStatus(diffStatus, categoryColor)
+    : executionStatus
+      ? svgStrokeForStatus(executionStatus, categoryColor)
+      : errorCount > 0
+        ? "var(--stgm-destructive, #ef4444)"
+        : categoryColor;
+
+  return (
+    <div
+      className={cn(
+        "stgm group relative flex flex-col items-center transition-shadow",
+        selected && "ring-2 ring-[var(--stgm-ring,#3b82f6)]",
+        visualClass === "decision-diamond" && "rounded-sm",
+        visualClass === "event-circle" && "rounded-full",
+        visualClass === "gate-octagon" && "rounded",
+        diffStatus && DIFF_STATUS_CSS[diffStatus],
+        !diffStatus && executionStatus && EXECUTION_STATUS_CSS[executionStatus],
+      )}
+      style={{ width, height: totalHeight }}
+      data-execution-status={executionStatus}
+      data-diff-status={diffStatus}
+    >
+      {/* Shape area */}
+      <div className="relative flex items-center justify-center" style={{ width, height: shapeHeight }}>
+        <svg
+          className="pointer-events-none absolute inset-0"
+          width={width}
+          height={shapeHeight}
+          viewBox={`0 0 ${width} ${shapeHeight}`}
+          aria-hidden="true"
+        >
+          <path
+            d={pathD ?? ""}
+            fill="var(--stgm-card, var(--stgm-background, #fff))"
+            stroke={strokeColor}
+            strokeWidth="2"
+            strokeDasharray={diffStatus === "removed" ? "6 4" : undefined}
+          />
+        </svg>
+        <div className="relative z-10 flex items-center justify-center overflow-hidden">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Execution status styling (T04)
+// ---------------------------------------------------------------------------
+
+/**
+ * CSS class overrides per execution status. Applied to both CssShell and
+ * SvgShell outer containers. Uses opacity and border-color tokens.
+ * Never uses color alone — badges provide text/icon differentiation.
+ */
+const EXECUTION_STATUS_CSS: Record<NodeExecutionStatus, string> = {
+  not_reached: "opacity-40",
+  pending: "",
+  running: "stgm-exec-running border-[var(--stgm-primary,#6366f1)]",
+  completed: "border-[var(--stgm-success,#22c55e)]",
+  failed: "!border-[var(--stgm-destructive,#ef4444)]",
+  skipped: "opacity-50",
+  retrying: "",
+  waiting_approval: "border-[var(--stgm-warning,#f59e0b)]",
+};
+
+function svgStrokeForStatus(status: NodeExecutionStatus, fallback: string): string {
+  switch (status) {
+    case "running":
+      return "var(--stgm-primary, #6366f1)";
+    case "completed":
+      return "var(--stgm-success, #22c55e)";
+    case "failed":
+      return "var(--stgm-destructive, #ef4444)";
+    case "waiting_approval":
+      return "var(--stgm-warning, #f59e0b)";
+    default:
+      return fallback;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Diff status styling (T14)
+// ---------------------------------------------------------------------------
+
+/**
+ * CSS class overrides per diff status. Priority over execution and error
+ * styling — diffStatus > executionStatus > errorCount > categoryColor.
+ */
+const DIFF_STATUS_CSS: Record<NodeDiffStatus, string> = {
+  added: "border-[var(--stgm-success,#22c55e)] bg-[var(--stgm-success,#22c55e)]/5",
+  removed: "opacity-50 border-dashed border-[var(--stgm-destructive,#ef4444)]",
+  modified: "border-[var(--stgm-warning,#f59e0b)]",
+  unchanged: "",
+};
+
+function svgStrokeForDiffStatus(status: NodeDiffStatus, fallback: string): string {
+  switch (status) {
+    case "added":
+      return "var(--stgm-success, #22c55e)";
+    case "removed":
+      return "var(--stgm-destructive, #ef4444)";
+    case "modified":
+      return "var(--stgm-warning, #f59e0b)";
+    default:
+      return fallback;
+  }
+}

package/src/workflow/node-shell/index.ts

@@ -0,0 +1,17 @@
+export { NodeShell, type NodeShellProps } from "./NodeShell";
+export { NodeContent, type NodeContentProps } from "./NodeContent";
+export { NodeHandles, type NodeHandlesProps } from "./NodeHandles";
+export { NodeActions, type NodeActionsProps } from "./NodeActions";
+export { ExecutionBadge, type ExecutionBadgeProps, type AgentActivityInfo, type ForkProgressInfo } from "./ExecutionBadge";
+export { DiffBadge, type DiffBadgeProps } from "./DiffBadge";
+export { BranchBadge, type BranchBadgeProps } from "./BranchBadge";
+export {
+  getShapePath,
+  getContentInsets,
+  diamondPath,
+  octagonPath,
+  circlePath,
+  parallelBarPath,
+  SVG_SHAPE_CLASSES,
+  type ContentInsets,
+} from "./shape-paths";

package/src/workflow/node-shell/shape-paths.ts

@@ -0,0 +1,140 @@
+import type { VisualClass } from "../task-type-visual-registry";
+
+/**
+ * Inset rectangle defining the safe content area within a node shape.
+ * All values are in pixels from the respective edge of the bounding box.
+ */
+export interface ContentInsets {
+  readonly top: number;
+  readonly right: number;
+  readonly bottom: number;
+  readonly left: number;
+}
+
+/**
+ * Returns an SVG path `d` string for a diamond (rotated square)
+ * inscribed within the given bounding box.
+ *
+ * Vertices at midpoints of each edge: top-center, right-center,
+ * bottom-center, left-center.
+ */
+export function diamondPath(width: number, height: number): string {
+  const mx = width / 2;
+  const my = height / 2;
+  return `M ${mx} 0 L ${width} ${my} L ${mx} ${height} L 0 ${my} Z`;
+}
+
+/**
+ * Returns an SVG path `d` string for a regular octagon inscribed
+ * within the given bounding box. The cut fraction controls how much
+ * of each corner is removed.
+ */
+export function octagonPath(width: number, height: number): string {
+  const cut = Math.min(width, height) * 0.29;
+  const r = width;
+  const b = height;
+  return [
+    `M ${cut} 0`,
+    `L ${r - cut} 0`,
+    `L ${r} ${cut}`,
+    `L ${r} ${b - cut}`,
+    `L ${r - cut} ${b}`,
+    `L ${cut} ${b}`,
+    `L 0 ${b - cut}`,
+    `L 0 ${cut}`,
+    `Z`,
+  ].join(" ");
+}
+
+/**
+ * Returns an SVG path `d` string for a circle (or ellipse when w != h)
+ * centered within the bounding box. Uses two arc commands.
+ */
+export function circlePath(width: number, height: number): string {
+  const rx = width / 2;
+  const ry = height / 2;
+  return [
+    `M ${rx} 0`,
+    `A ${rx} ${ry} 0 1 1 ${rx} ${height}`,
+    `A ${rx} ${ry} 0 1 1 ${rx} 0`,
+    `Z`,
+  ].join(" ");
+}
+
+/**
+ * Returns an SVG path `d` string for a parallel bar — a wide,
+ * low-height rounded rectangle. Corner radius is half the height
+ * to produce fully rounded ends.
+ */
+export function parallelBarPath(width: number, height: number): string {
+  const r = Math.min(height / 2, 8);
+  return [
+    `M ${r} 0`,
+    `L ${width - r} 0`,
+    `A ${r} ${r} 0 0 1 ${width} ${r}`,
+    `L ${width} ${height - r}`,
+    `A ${r} ${r} 0 0 1 ${width - r} ${height}`,
+    `L ${r} ${height}`,
+    `A ${r} ${r} 0 0 1 0 ${height - r}`,
+    `L 0 ${r}`,
+    `A ${r} ${r} 0 0 1 ${r} 0`,
+    `Z`,
+  ].join(" ");
+}
+
+/**
+ * Content insets per visual class. Defines the largest rectangle
+ * within the shape where text/badges can safely render without
+ * being clipped by the shape boundary.
+ */
+const CONTENT_INSETS: Record<VisualClass, ContentInsets> = {
+  "task-card": { top: 8, right: 12, bottom: 8, left: 12 },
+  "subworkflow-card": { top: 8, right: 12, bottom: 8, left: 12 },
+  "container": { top: 10, right: 12, bottom: 10, left: 12 },
+  "terminal-pill": { top: 6, right: 16, bottom: 6, left: 16 },
+  "decision-diamond": { top: 35, right: 35, bottom: 35, left: 35 },
+  "gate-octagon": { top: 32, right: 32, bottom: 32, left: 32 },
+  "event-circle": { top: 20, right: 20, bottom: 20, left: 20 },
+  "parallel-bar": { top: 4, right: 16, bottom: 4, left: 16 },
+};
+
+/**
+ * Returns the content insets for a given visual class.
+ * Falls back to task-card insets for unknown values.
+ */
+export function getContentInsets(visualClass: VisualClass): ContentInsets {
+  return CONTENT_INSETS[visualClass] ?? CONTENT_INSETS["task-card"];
+}
+
+/**
+ * Returns the SVG path `d` string for a non-rectangular visual class.
+ * Returns `null` for rectangular visual classes (which use CSS rendering).
+ */
+export function getShapePath(
+  visualClass: VisualClass,
+  width: number,
+  height: number,
+): string | null {
+  switch (visualClass) {
+    case "decision-diamond":
+      return diamondPath(width, height);
+    case "gate-octagon":
+      return octagonPath(width, height);
+    case "event-circle":
+      return circlePath(width, height);
+    case "parallel-bar":
+      return parallelBarPath(width, height);
+    default:
+      return null;
+  }
+}
+
+/**
+ * Visual classes that use SVG path rendering instead of CSS borders.
+ */
+export const SVG_SHAPE_CLASSES: ReadonlySet<VisualClass> = new Set([
+  "decision-diamond",
+  "gate-octagon",
+  "event-circle",
+  "parallel-bar",
+]);

package/src/workflow/picker/BranchAddPopover.tsx

@@ -0,0 +1,239 @@
+"use client";
+
+import { memo, useState, useCallback, useRef, useEffect } from "react";
+import { Popover } from "@base-ui/react/popover";
+import { cn } from "@stigmer/theme";
+import { useStigmerPortalContainer } from "../../portal-container";
+
+/** The type of branch being added. */
+export type BranchAddMode = "switch-case" | "fork-branch" | "catch-handler";
+
+export interface BranchAddResult {
+  /** The name/identifier for the new branch. */
+  readonly name: string;
+  /** For switch cases: the condition expression. */
+  readonly condition?: string;
+  /** For catch handlers: the error type filter. */
+  readonly errorType?: string;
+}
+
+export interface BranchAddPopoverProps {
+  readonly open: boolean;
+  readonly onOpenChange: (open: boolean) => void;
+  readonly onSubmit: (result: BranchAddResult) => void;
+  readonly anchorRef: React.RefObject<HTMLElement | null>;
+  readonly mode: BranchAddMode;
+  /** Existing branch names to prevent duplicates. */
+  readonly existingNames?: ReadonlySet<string>;
+  readonly side?: "top" | "bottom" | "right" | "left";
+  readonly align?: "start" | "center" | "end";
+}
+
+const MODE_CONFIG: Record<
+  BranchAddMode,
+  { title: string; namePlaceholder: string; nameLabel: string; showCondition: boolean; showErrorType: boolean }
+> = {
+  "switch-case": {
+    title: "Add Case",
+    namePlaceholder: "e.g. enterprise",
+    nameLabel: "Case name",
+    showCondition: true,
+    showErrorType: false,
+  },
+  "fork-branch": {
+    title: "Add Branch",
+    namePlaceholder: "e.g. enrich_crm",
+    nameLabel: "Branch name",
+    showCondition: false,
+    showErrorType: false,
+  },
+  "catch-handler": {
+    title: "Add Catch Handler",
+    namePlaceholder: "e.g. timeout_error",
+    nameLabel: "Handler name",
+    showCondition: false,
+    showErrorType: true,
+  },
+};
+
+/**
+ * Inline popover for adding a branch to a switch_case, fork, or try_catch node.
+ *
+ * Renders a minimal form with contextual fields based on `mode`:
+ * - switch-case: name + condition expression
+ * - fork-branch: name only
+ * - catch-handler: name + error type filter
+ *
+ * @since T08 (Contextual Task Picker)
+ */
+export const BranchAddPopover = memo(function BranchAddPopover({
+  open,
+  onOpenChange,
+  onSubmit,
+  anchorRef,
+  mode,
+  existingNames,
+  side = "bottom",
+  align = "start",
+}: BranchAddPopoverProps) {
+  const portalContainer = useStigmerPortalContainer();
+  const config = MODE_CONFIG[mode];
+  const nameRef = useRef<HTMLInputElement>(null);
+  const [name, setName] = useState("");
+  const [condition, setCondition] = useState("");
+  const [errorType, setErrorType] = useState("");
+  const [nameError, setNameError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (open) {
+      setName("");
+      setCondition("");
+      setErrorType("");
+      setNameError(null);
+      requestAnimationFrame(() => nameRef.current?.focus());
+    }
+  }, [open]);
+
+  const validateAndSubmit = useCallback(() => {
+    const trimmedName = name.trim();
+
+    if (!trimmedName) {
+      setNameError("Name is required");
+      return;
+    }
+
+    if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(trimmedName)) {
+      setNameError("Must start with a letter or underscore, alphanumeric only");
+      return;
+    }
+
+    if (existingNames?.has(trimmedName)) {
+      setNameError("This name already exists");
+      return;
+    }
+
+    const result: BranchAddResult = {
+      name: trimmedName,
+      ...(config.showCondition && condition.trim() && { condition: condition.trim() }),
+      ...(config.showErrorType && errorType.trim() && { errorType: errorType.trim() }),
+    };
+
+    onSubmit(result);
+    onOpenChange(false);
+  }, [name, condition, errorType, existingNames, config, onSubmit, onOpenChange]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        validateAndSubmit();
+      }
+    },
+    [validateAndSubmit],
+  );
+
+  return (
+    <Popover.Root open={open} onOpenChange={onOpenChange}>
+      <Popover.Portal container={portalContainer}>
+        <Popover.Positioner
+          anchor={anchorRef}
+          side={side}
+          align={align}
+          sideOffset={8}
+        >
+          <Popover.Popup
+            className={cn(
+              "stgm z-popover w-60 overflow-hidden rounded-lg border border-border bg-popover shadow-md text-popover-foreground",
+            )}
+          >
+            <div className="flex flex-col" onKeyDown={handleKeyDown}>
+              {/* Header */}
+              <div className="border-b border-border px-3 py-2">
+                <p className="text-xs font-semibold text-[var(--stgm-foreground,#1a1a2e)]">
+                  {config.title}
+                </p>
+              </div>
+
+              {/* Form fields */}
+              <div className="space-y-2.5 p-3">
+                {/* Name field */}
+                <div>
+                  <label className="mb-1 block text-[10px] font-medium text-[var(--stgm-muted-foreground,#737373)]">
+                    {config.nameLabel}
+                  </label>
+                  <input
+                    ref={nameRef}
+                    type="text"
+                    value={name}
+                    onChange={(e) => {
+                      setName(e.target.value);
+                      setNameError(null);
+                    }}
+                    placeholder={config.namePlaceholder}
+                    className={cn(
+                      "w-full rounded border bg-[var(--stgm-input-bg,var(--stgm-background,#fff))] px-2 py-1.5 text-xs text-[var(--stgm-foreground,#1a1a2e)] placeholder:text-[var(--stgm-muted-foreground,#737373)] outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]",
+                      nameError ? "border-[var(--stgm-destructive,#ef4444)]" : "border-border",
+                    )}
+                    aria-invalid={!!nameError}
+                    aria-describedby={nameError ? "branch-name-error" : undefined}
+                  />
+                  {nameError && (
+                    <p
+                      id="branch-name-error"
+                      className="mt-0.5 text-[10px] text-[var(--stgm-destructive,#ef4444)]"
+                    >
+                      {nameError}
+                    </p>
+                  )}
+                </div>
+
+                {/* Condition field (switch-case only) */}
+                {config.showCondition && (
+                  <div>
+                    <label className="mb-1 block text-[10px] font-medium text-[var(--stgm-muted-foreground,#737373)]">
+                      Condition
+                      <span className="ml-1 font-normal">(optional)</span>
+                    </label>
+                    <input
+                      type="text"
+                      value={condition}
+                      onChange={(e) => setCondition(e.target.value)}
+                      placeholder='e.g. $.plan == "enterprise"'
+                      className="w-full rounded border border-border bg-[var(--stgm-input-bg,var(--stgm-background,#fff))] px-2 py-1.5 text-xs font-mono text-[var(--stgm-foreground,#1a1a2e)] placeholder:text-[var(--stgm-muted-foreground,#737373)] outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]"
+                    />
+                  </div>
+                )}
+
+                {/* Error type field (catch-handler only) */}
+                {config.showErrorType && (
+                  <div>
+                    <label className="mb-1 block text-[10px] font-medium text-[var(--stgm-muted-foreground,#737373)]">
+                      Error type filter
+                      <span className="ml-1 font-normal">(optional)</span>
+                    </label>
+                    <input
+                      type="text"
+                      value={errorType}
+                      onChange={(e) => setErrorType(e.target.value)}
+                      placeholder="e.g. TimeoutError"
+                      className="w-full rounded border border-border bg-[var(--stgm-input-bg,var(--stgm-background,#fff))] px-2 py-1.5 text-xs text-[var(--stgm-foreground,#1a1a2e)] placeholder:text-[var(--stgm-muted-foreground,#737373)] outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]"
+                    />
+                  </div>
+                )}
+
+                {/* Submit button */}
+                <button
+                  type="button"
+                  onClick={validateAndSubmit}
+                  className="w-full rounded bg-[var(--stgm-primary,#3b82f6)] px-3 py-1.5 text-xs font-medium text-[var(--stgm-primary-foreground,#fff)] transition-colors hover:bg-[var(--stgm-primary,#3b82f6)]/90 focus:outline-none focus:ring-2 focus:ring-[var(--stgm-ring,#3b82f6)] focus:ring-offset-1"
+                >
+                  {config.title}
+                </button>
+              </div>
+            </div>
+          </Popover.Popup>
+        </Popover.Positioner>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+});