@stigmer/react 0.5.1 → 1.0.1

package/src/workflow/WorkflowRunForm.tsx

@@ -0,0 +1,245 @@
+"use client";
+
+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";
+
+/** Props for {@link WorkflowRunForm}. */
+export interface WorkflowRunFormProps {
+  /** Current trigger message value. */
+  readonly triggerMessage: string;
+  /** Called when the trigger message changes. */
+  readonly onTriggerMessageChange: (value: string) => void;
+
+  /** Declared environment variables from the workflow spec. */
+  readonly envDeclarations: Record<string, EnvVarDeclaration>;
+  /** Current runtime env var overrides (keyed by variable name). */
+  readonly runtimeEnv: Record<string, string>;
+  /** Called when a single env var value changes. */
+  readonly onEnvVarChange: (key: string, value: string) => void;
+
+  /** Available workflow instances for the selector. */
+  readonly instances: readonly WorkflowInstance[];
+  /** Currently selected instance ID, or `null` for server-resolved default. */
+  readonly selectedInstanceId: string | null;
+  /** Called when the selected instance changes. */
+  readonly onInstanceChange: (id: string | null) => void;
+
+  /** Field-level validation errors keyed by field name. */
+  readonly errors: RunWorkflowFieldErrors;
+
+  /** When `true`, all fields are disabled (during submission). */
+  readonly disabled?: boolean;
+  /** Additional CSS classes for the root container. */
+  readonly className?: string;
+}
+
+const INPUT_CLASSES = cn(
+  "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm text-foreground",
+  "placeholder:text-muted-foreground",
+  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+  "disabled:pointer-events-none disabled:opacity-50",
+);
+
+/**
+ * Form fields for running a workflow execution.
+ *
+ * Renders a trigger message textarea, auto-generated environment
+ * variable fields from the workflow's `spec.env` declarations, and
+ * an instance selector (hidden when 0-1 instances exist).
+ *
+ * This component is presentational — it does not manage state or
+ * submit. Pair with {@link useRunWorkflowFlow} for the full
+ * behavior, or wire the props manually for custom integrations.
+ *
+ * All visuals flow through `--stgm-*` design tokens. Zero Console
+ * dependencies — safe for platform builder embedding.
+ *
+ * @example
+ * ```tsx
+ * const flow = useRunWorkflowFlow({ ... });
+ *
+ * <WorkflowRunForm
+ *   triggerMessage={flow.triggerMessage}
+ *   onTriggerMessageChange={flow.setTriggerMessage}
+ *   envDeclarations={flow.envDeclarations}
+ *   runtimeEnv={flow.runtimeEnv}
+ *   onEnvVarChange={flow.setEnvVar}
+ *   instances={instances}
+ *   selectedInstanceId={flow.selectedInstanceId}
+ *   onInstanceChange={flow.setSelectedInstanceId}
+ *   errors={flow.fieldErrors}
+ *   disabled={flow.isSubmitting}
+ * />
+ * ```
+ */
+export function WorkflowRunForm({
+  triggerMessage,
+  onTriggerMessageChange,
+  envDeclarations,
+  runtimeEnv,
+  onEnvVarChange,
+  instances,
+  selectedInstanceId,
+  onInstanceChange,
+  errors,
+  disabled,
+  className,
+}: WorkflowRunFormProps) {
+  const formId = useId();
+  const envEntries = Object.entries(envDeclarations);
+  const showInstanceSelector = instances.length > 1;
+
+  return (
+    <div className={cn("flex flex-col gap-4", className)}>
+      {/* Trigger message */}
+      <FieldGroup>
+        <FieldLabel htmlFor={`${formId}-trigger`}>Input Message</FieldLabel>
+        <textarea
+          id={`${formId}-trigger`}
+          value={triggerMessage}
+          onChange={(e) => onTriggerMessageChange(e.target.value)}
+          placeholder="Optional message or JSON payload to trigger the workflow"
+          disabled={disabled}
+          rows={3}
+          className={cn(INPUT_CLASSES, "resize-y")}
+        />
+        <FieldHint>
+          Accessible in the workflow as{" "}
+          <code className="text-[0.7rem]">
+            {"{{workflow.input.trigger_message}}"}
+          </code>
+        </FieldHint>
+      </FieldGroup>
+
+      {/* Instance selector (only when multiple instances exist) */}
+      {showInstanceSelector && (
+        <FieldGroup>
+          <FieldLabel htmlFor={`${formId}-instance`}>Instance</FieldLabel>
+          <select
+            id={`${formId}-instance`}
+            value={selectedInstanceId ?? ""}
+            onChange={(e) =>
+              onInstanceChange(e.target.value || null)
+            }
+            disabled={disabled}
+            className={INPUT_CLASSES}
+          >
+            <option value="">Default instance (auto)</option>
+            {instances.map((inst) => (
+              <option key={inst.metadata?.id} value={inst.metadata?.id ?? ""}>
+                {inst.metadata?.name || inst.metadata?.slug || inst.metadata?.id}
+              </option>
+            ))}
+          </select>
+        </FieldGroup>
+      )}
+
+      {/* Environment variables */}
+      {envEntries.length > 0 && (
+        <div className="flex flex-col gap-3">
+          <h4 className="text-xs font-medium text-muted-foreground">
+            Environment Variables
+          </h4>
+          {envEntries.map(([key, decl]) => {
+            const fieldId = `${formId}-env-${key}`;
+            const fieldError = errors[key];
+            return (
+              <FieldGroup key={key}>
+                <FieldLabel htmlFor={fieldId}>
+                  <code className="text-xs">{key}</code>
+                  {!decl.optional && (
+                    <span
+                      className="ml-1 text-destructive"
+                      aria-label="required"
+                    >
+                      *
+                    </span>
+                  )}
+                </FieldLabel>
+                <input
+                  id={fieldId}
+                  type={decl.isSecret ? "password" : "text"}
+                  value={runtimeEnv[key] ?? ""}
+                  onChange={(e) => onEnvVarChange(key, e.target.value)}
+                  placeholder={
+                    decl.optional ? "Optional" : "Required"
+                  }
+                  disabled={disabled}
+                  aria-invalid={!!fieldError}
+                  aria-describedby={
+                    fieldError
+                      ? `${fieldId}-error`
+                      : decl.description
+                        ? `${fieldId}-desc`
+                        : undefined
+                  }
+                  className={cn(
+                    INPUT_CLASSES,
+                    fieldError && "border-destructive focus-visible:ring-destructive",
+                  )}
+                />
+                {decl.description && !fieldError && (
+                  <FieldHint id={`${fieldId}-desc`}>
+                    {decl.description}
+                  </FieldHint>
+                )}
+                {fieldError && (
+                  <p
+                    id={`${fieldId}-error`}
+                    className="text-[0.7rem] text-destructive"
+                    role="alert"
+                  >
+                    {fieldError}
+                  </p>
+                )}
+              </FieldGroup>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Shared form primitives (internal to this file)
+// ---------------------------------------------------------------------------
+
+function FieldGroup({
+  children,
+}: {
+  readonly children: React.ReactNode;
+}) {
+  return <div className="flex flex-col gap-1">{children}</div>;
+}
+
+function FieldLabel({
+  htmlFor,
+  children,
+}: {
+  readonly htmlFor: string;
+  readonly children: React.ReactNode;
+}) {
+  return (
+    <label htmlFor={htmlFor} className="text-xs font-medium text-foreground">
+      {children}
+    </label>
+  );
+}
+
+function FieldHint({
+  id,
+  children,
+}: {
+  readonly id?: string;
+  readonly children: React.ReactNode;
+}) {
+  return (
+    <p id={id} className="text-[0.7rem] text-muted-foreground">
+      {children}
+    </p>
+  );
+}

package/src/workflow/WorkflowTaskList.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+import { memo, useMemo } from "react";
+import { cn } from "@stigmer/theme";
+import { WorkflowTaskKind } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/enum_pb";
+import type { WorkflowTask } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/spec_pb";
+import { useTaskKindRegistryContext } from "./TaskKindRegistryContext";
+
+/** Props for {@link WorkflowTaskList}. */
+export interface WorkflowTaskListProps {
+  /** Tasks from the workflow spec. */
+  readonly tasks: readonly WorkflowTask[];
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+}
+
+const TASK_KIND_LABELS: ReadonlyMap<WorkflowTaskKind, string> = new Map([
+  [WorkflowTaskKind.set_vars, "Set Variables"],
+  [WorkflowTaskKind.http_call, "HTTP Call"],
+  [WorkflowTaskKind.grpc_call, "gRPC Call"],
+  [WorkflowTaskKind.activity_call, "Activity Call"],
+  [WorkflowTaskKind.switch_case, "Switch"],
+  [WorkflowTaskKind.for_each, "For Each"],
+  [WorkflowTaskKind.fork, "Fork"],
+  [WorkflowTaskKind.try_catch, "Try/Catch"],
+  [WorkflowTaskKind.listen, "Listen"],
+  [WorkflowTaskKind.wait, "Wait"],
+  [WorkflowTaskKind.raise_error, "Raise Error"],
+  [WorkflowTaskKind.run_workflow, "Run Workflow"],
+  [WorkflowTaskKind.agent_call, "Agent Call"],
+  [WorkflowTaskKind.llm_call, "LLM Call"],
+  [WorkflowTaskKind.transform, "Transform"],
+  [WorkflowTaskKind.human_input, "Human Input"],
+  [WorkflowTaskKind.validate, "Validate"],
+  [WorkflowTaskKind.emit_event, "Emit Event"],
+  [WorkflowTaskKind.notification, "Notification"],
+  [WorkflowTaskKind.eval, "Evaluate (LLM Judge)"],
+]);
+
+/**
+ * Compact list of tasks in a workflow specification.
+ *
+ * Renders each task as a row with a kind icon (from the TaskKindRegistry),
+ * task name, kind label, and a sequential connector line indicating flow
+ * order. When the registry is loading, kind icons are omitted gracefully.
+ *
+ * Zero Console dependencies — safe for platform builder embedding.
+ * All visual properties flow through `--stgm-*` tokens.
+ *
+ * @example
+ * ```tsx
+ * <WorkflowTaskList tasks={workflow.spec?.tasks ?? []} />
+ * ```
+ */
+export const WorkflowTaskList = memo(function WorkflowTaskList({
+  tasks,
+  className,
+}: WorkflowTaskListProps) {
+  const { descriptors } = useTaskKindRegistryContext();
+
+  const kindIconMap = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const d of descriptors) {
+      map.set(d.kind, d.icon);
+    }
+    return map;
+  }, [descriptors]);
+
+  if (tasks.length === 0) {
+    return (
+      <div className={cn("py-8 text-center text-sm text-muted-foreground", className)}>
+        No tasks defined
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("flex flex-col", className)}>
+      {tasks.map((task, idx) => {
+        const kindLabel = TASK_KIND_LABELS.get(task.kind) ?? formatKindName(task.kind);
+        const iconName = kindIconMap.get(kindEnumToString(task.kind));
+        const isLast = idx === tasks.length - 1;
+
+        return (
+          <div key={task.name} className="flex items-stretch gap-3">
+            {/* Vertical connector line */}
+            <div className="flex w-5 flex-col items-center">
+              <div
+                className={cn(
+                  "flex size-5 shrink-0 items-center justify-center rounded-full border border-border bg-background text-[10px] font-medium text-muted-foreground",
+                )}
+              >
+                {idx + 1}
+              </div>
+              {!isLast && (
+                <div className="w-px flex-1 bg-border" />
+              )}
+            </div>
+
+            {/* Task content */}
+            <div className="flex min-w-0 flex-1 items-center gap-2 pb-3 pt-0.5">
+              {iconName && (
+                <TaskKindIcon iconName={iconName} className="size-4 shrink-0 text-muted-foreground" />
+              )}
+              <span className="truncate text-sm font-medium text-foreground">
+                {task.name}
+              </span>
+              <span className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+                {kindLabel}
+              </span>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+});
+
+/**
+ * Maps a WorkflowTaskKind enum value to its string representation
+ * matching the TaskKindDescriptor's `kind` field.
+ */
+function kindEnumToString(kind: WorkflowTaskKind): string {
+  const entry = Object.entries(WorkflowTaskKind).find(
+    ([, v]) => v === kind && typeof v === "number",
+  );
+  return entry?.[0] ?? "";
+}
+
+function formatKindName(kind: WorkflowTaskKind): string {
+  const str = kindEnumToString(kind);
+  return str
+    .split("_")
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(" ");
+}
+
+/**
+ * Renders a task kind icon by name. Uses simple SVG placeholders --
+ * the full Lucide icon set is intentionally avoided in the SDK to
+ * keep the bundle size minimal (DD-004).
+ */
+function TaskKindIcon({
+  iconName,
+  className,
+}: {
+  readonly iconName: string;
+  readonly className?: string;
+}) {
+  return (
+    <span
+      className={cn("inline-flex items-center justify-center", className)}
+      title={iconName}
+      aria-hidden="true"
+    >
+      <TaskDotIcon />
+    </span>
+  );
+}
+
+function TaskDotIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="8" cy="8" r="3" />
+      <path d="M8 2v3M8 11v3M2 8h3M11 8h3" />
+    </svg>
+  );
+}

package/src/workflow/WorkflowTaskPalette.tsx

@@ -0,0 +1,248 @@
+"use client";
+
+import { memo, useState, useCallback, useMemo } from "react";
+import type { DragEvent } from "react";
+import { cn } from "@stigmer/theme";
+import { useTaskKindRegistry } from "./useTaskKindRegistry";
+import type { TaskKindDescriptor, TaskKindCategory } from "./types";
+import { CATEGORY_COLORS, CATEGORY_DISPLAY_NAMES, CATEGORY_ORDER } from "./canvas-constants";
+
+/** MIME type for the drag transfer carrying the task kind identifier. */
+export const TASK_KIND_DRAG_MIME = "application/stigmer-task-kind";
+
+/** Props for {@link WorkflowTaskPalette}. */
+export interface WorkflowTaskPaletteProps {
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+}
+
+/**
+ * Categorized sidebar listing all available workflow task kinds.
+ *
+ * Each task kind entry is draggable. The drop target (the canvas)
+ * reads the task kind from the drag transfer data using
+ * {@link TASK_KIND_DRAG_MIME} and creates a new node.
+ *
+ * Self-contained SDK component (DD-001, AD-T15-B2-005): depends only
+ * on `useTaskKindRegistry()` and `--stgm-*` theme tokens. No canvas
+ * or React Flow dependency.
+ *
+ * @since T15 Batch 2 (Node Authoring)
+ */
+export const WorkflowTaskPalette = memo(function WorkflowTaskPalette({
+  className,
+}: WorkflowTaskPaletteProps) {
+  const { categories, isLoading, error, refetch } = useTaskKindRegistry();
+  const [searchQuery, setSearchQuery] = useState("");
+  const [collapsedCategories, setCollapsedCategories] = useState<Set<string>>(
+    new Set(),
+  );
+
+  const handleSearchChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setSearchQuery(e.target.value);
+    },
+    [],
+  );
+
+  const toggleCategory = useCallback((category: string) => {
+    setCollapsedCategories((prev) => {
+      const next = new Set(prev);
+      if (next.has(category)) {
+        next.delete(category);
+      } else {
+        next.add(category);
+      }
+      return next;
+    });
+  }, []);
+
+  const filteredCategories = useMemo(() => {
+    const query = searchQuery.toLowerCase().trim();
+    const result: Array<{
+      category: TaskKindCategory;
+      descriptors: readonly TaskKindDescriptor[];
+    }> = [];
+
+    for (const cat of CATEGORY_ORDER) {
+      const descriptors = categories.get(cat);
+      if (!descriptors || descriptors.length === 0) continue;
+
+      const filtered = query
+        ? descriptors.filter(
+            (d) =>
+              d.displayName.toLowerCase().includes(query) ||
+              d.description.toLowerCase().includes(query),
+          )
+        : descriptors;
+
+      if (filtered.length > 0) {
+        result.push({ category: cat, descriptors: filtered });
+      }
+    }
+
+    return result;
+  }, [categories, searchQuery]);
+
+  if (isLoading) {
+    return (
+      <div className={cn("stgm flex w-60 flex-col gap-3 border-r border-[var(--stgm-border-prominent,#d4d4d8)] bg-[var(--stgm-card,var(--stgm-background,#fff))] p-3", className)}>
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div key={i} className="space-y-2">
+            <div className="h-4 w-20 animate-pulse rounded bg-[var(--stgm-muted,#f5f5f5)]" />
+            <div className="h-10 w-full animate-pulse rounded bg-[var(--stgm-muted,#f5f5f5)]" />
+            <div className="h-10 w-full animate-pulse rounded bg-[var(--stgm-muted,#f5f5f5)]" />
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={cn("stgm flex w-60 flex-col items-center justify-center gap-2 border-r border-[var(--stgm-border-prominent,#d4d4d8)] bg-[var(--stgm-card,var(--stgm-background,#fff))] p-4", className)}>
+        <span className="text-xs text-[var(--stgm-destructive,#ef4444)]">
+          Failed to load task types
+        </span>
+        <button
+          type="button"
+          onClick={refetch}
+          className="rounded border border-[var(--stgm-border-prominent,#d4d4d8)] bg-[var(--stgm-card,var(--stgm-background,#fff))] px-2 py-1 text-xs text-[var(--stgm-foreground,#1a1a2e)] hover:bg-[var(--stgm-muted,#f5f5f5)]"
+        >
+          Retry
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "stgm flex w-60 shrink-0 flex-col border-r border-[var(--stgm-border-prominent,#d4d4d8)] bg-[var(--stgm-card,var(--stgm-background,#fff))]",
+        className,
+      )}
+    >
+      <div className="border-b border-[var(--stgm-border-prominent,#d4d4d8)] p-2">
+        <input
+          type="search"
+          placeholder="Search tasks…"
+          value={searchQuery}
+          onChange={handleSearchChange}
+          className="w-full rounded border border-[var(--stgm-border-prominent,#d4d4d8)] 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)]"
+          aria-label="Search task types"
+        />
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-2">
+        {filteredCategories.length === 0 ? (
+          <div className="py-6 text-center text-xs text-[var(--stgm-muted-foreground,#737373)]">
+            {searchQuery ? "No matching tasks" : "No task types available"}
+          </div>
+        ) : (
+          filteredCategories.map(({ category, descriptors }) => (
+            <PaletteCategory
+              key={category}
+              category={category}
+              descriptors={descriptors}
+              isCollapsed={collapsedCategories.has(category)}
+              onToggle={toggleCategory}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  );
+});
+
+// ---------------------------------------------------------------------------
+// PaletteCategory
+// ---------------------------------------------------------------------------
+
+function PaletteCategory({
+  category,
+  descriptors,
+  isCollapsed,
+  onToggle,
+}: {
+  category: TaskKindCategory;
+  descriptors: readonly TaskKindDescriptor[];
+  isCollapsed: boolean;
+  onToggle: (category: string) => void;
+}) {
+  const categoryColor = CATEGORY_COLORS[category] ?? CATEGORY_COLORS.unspecified;
+
+  return (
+    <div className="mb-2">
+      <button
+        type="button"
+        onClick={() => onToggle(category)}
+        className="flex w-full items-center gap-1.5 rounded px-1 py-1 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--stgm-muted-foreground,#737373)] hover:bg-[var(--stgm-muted,#f5f5f5)]"
+        aria-expanded={!isCollapsed}
+      >
+        <span
+          className="inline-block h-2 w-2 rounded-full"
+          style={{ backgroundColor: categoryColor }}
+          aria-hidden="true"
+        />
+        {CATEGORY_DISPLAY_NAMES[category]}
+        <span className="ml-auto text-[10px]">{isCollapsed ? "+" : "\u2212"}</span>
+      </button>
+
+      {!isCollapsed && (
+        <div className="mt-0.5 space-y-0.5" role="listbox" aria-label={CATEGORY_DISPLAY_NAMES[category]}>
+          {descriptors.map((descriptor) => (
+            <PaletteItem
+              key={descriptor.kind}
+              descriptor={descriptor}
+              categoryColor={categoryColor}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// PaletteItem
+// ---------------------------------------------------------------------------
+
+function PaletteItem({
+  descriptor,
+  categoryColor,
+}: {
+  descriptor: TaskKindDescriptor;
+  categoryColor: string;
+}) {
+  const handleDragStart = useCallback(
+    (e: DragEvent<HTMLDivElement>) => {
+      e.dataTransfer.setData(TASK_KIND_DRAG_MIME, descriptor.kind);
+      e.dataTransfer.effectAllowed = "move";
+    },
+    [descriptor.kind],
+  );
+
+  return (
+    <div
+      draggable
+      onDragStart={handleDragStart}
+      className="flex cursor-grab items-start gap-2 rounded border border-[var(--stgm-border-prominent,#d4d4d8)] bg-[var(--stgm-background,#fff)] px-2 py-1.5 transition-colors hover:bg-[var(--stgm-muted,#f5f5f5)] active:cursor-grabbing"
+      role="option"
+      aria-label={`Drag to add ${descriptor.displayName} task`}
+    >
+      <span
+        className="mt-0.5 inline-block h-2.5 w-0.5 shrink-0 rounded-full"
+        style={{ backgroundColor: categoryColor }}
+        aria-hidden="true"
+      />
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-xs font-medium text-[var(--stgm-foreground,#1a1a2e)]">
+          {descriptor.displayName}
+        </div>
+        <div className="truncate text-[10px] leading-tight text-[var(--stgm-muted-foreground,#737373)]">
+          {descriptor.description}
+        </div>
+      </div>
+    </div>
+  );
+}