@foresthubai/workflow-builder 0.3.0 → 0.4.0

package/src/panels/ResourceConfigPanel.tsx

@@ -1,132 +1,132 @@
-import { useEffect, useState, type ReactNode } from "react";
-import { Button } from "../components/ui/button";
-import { Separator } from "../components/ui/separator";
-import { ChevronRight } from "lucide-react";
-import type { Parameter } from "@foresthubai/workflow-core/parameter";
-import type { Diagnostic } from "@foresthubai/workflow-core/diagnostics";
-import ParameterEditor from "../inputs/ParameterEditor";
-import { MAIN_CANVAS_ID } from "../stores/canvasStore";
-import { useEditorStore } from "../stores/editorStore";
-import { isReadOnly } from "../WorkflowBuilder";
-import { useParamErrors } from "../hooks/useParamErrors";
-import { ReadOnlyBanner } from "../components/ui/readonly-banner";
-import { DeleteButton } from "../components/ui/delete-button";
-
-interface ResourceConfigPanelProps {
-  /** Stable id of the open resource — resets the local label field when it changes. */
-  resetKey: string;
-  label: string;
-  /** `title`/aria text for the label input. */
-  labelTitle: string;
-  onLabelChange: (label: string) => void;
-  description: string;
-  /** Optional validation messages rendered under the title (e.g. empty/duplicate label). */
-  belowLabel?: ReactNode;
-  parameters: Parameter[];
-  /** Read the current value for a parameter (channels map `type` to a top-level field). */
-  getValue: (param: Parameter) => unknown;
-  allArguments: Record<string, unknown>;
-  onParamChange: (paramId: string, value: unknown) => void;
-  diagnostics: Diagnostic[] | undefined;
-  translationPrefix: string;
-  deleteLabel: string;
-  onDelete: () => void;
-  onClose: () => void;
-  /** Canvas used for variable resolution in ParameterEditor. Project-scoped resources use MAIN. */
-  canvasId?: string;
-}
-
-/**
- * Shared editor shell for the project-scoped "primitive" resources that all
- * render a `{type, arguments}` bag through `ParameterEditor` — channels, memory,
- * declared models. Owns the chrome (editable title, readOnly banner, parameter
- * list, delete/close buttons); each wrapper supplies the parameter source, the
- * value accessor, and the mutation callbacks. Nodes/edges are too divergent to
- * use this and keep their own bodies (sharing only {@link useParamErrors}).
- */
-export const ResourceConfigPanel = ({
-  resetKey,
-  label,
-  labelTitle,
-  onLabelChange,
-  description,
-  belowLabel,
-  parameters,
-  getValue,
-  allArguments,
-  onParamChange,
-  diagnostics,
-  translationPrefix,
-  deleteLabel,
-  onDelete,
-  onClose,
-  canvasId = MAIN_CANVAS_ID,
-}: ResourceConfigPanelProps) => {
-  const readOnly = useEditorStore((s) => isReadOnly(s.builderMode));
-  const paramErrors = useParamErrors(diagnostics);
-
-  // Local label state preserves cursor position on edit; resets when a different
-  // resource is opened.
-  const [localLabel, setLocalLabel] = useState(label);
-  useEffect(() => {
-    setLocalLabel(label);
-  }, [resetKey, label]);
-
-  return (
-    <div className="p-4">
-      <div className="space-y-4">
-        <div className="flex items-center justify-between gap-2">
-          <div className="flex-1 min-w-0">
-            <div className="group flex items-center gap-1.5 rounded-md border border-transparent px-1.5 -mx-1.5 hover:border-input focus-within:border-input transition-colors">
-              <input
-                type="text"
-                title={labelTitle}
-                className="font-semibold text-lg bg-transparent w-full outline-none cursor-text py-0.5"
-                value={localLabel}
-                readOnly={readOnly}
-                onChange={(e) => {
-                  setLocalLabel(e.target.value);
-                  onLabelChange(e.target.value);
-                }}
-              />
-            </div>
-            <p className="text-sm text-muted-foreground">{description}</p>
-            {belowLabel}
-          </div>
-          <Button variant="ghost" size="icon" className="shrink-0" onClick={onClose}>
-            <ChevronRight className="h-4 w-4" />
-          </Button>
-        </div>
-
-        {readOnly && <ReadOnlyBanner />}
-
-        {parameters.length > 0 && (
-          <>
-            <Separator />
-            <div className={`space-y-3 ${readOnly ? "pointer-events-none opacity-60" : ""}`}>
-              {parameters.map((param) => (
-                <ParameterEditor
-                  key={param.id}
-                  canvasId={canvasId}
-                  parameter={param}
-                  value={getValue(param)}
-                  allArguments={allArguments}
-                  onChange={(value) => onParamChange(param.id, value)}
-                  errors={paramErrors.get(param.id)}
-                  translationPrefix={translationPrefix}
-                />
-              ))}
-            </div>
-          </>
-        )}
-
-        {!readOnly && (
-          <>
-            <Separator />
-            <DeleteButton onClick={onDelete}>{deleteLabel}</DeleteButton>
-          </>
-        )}
-      </div>
-    </div>
-  );
-};
+import { useEffect, useState, type ReactNode } from "react";
+import { Button } from "../components/ui/button";
+import { Separator } from "../components/ui/separator";
+import { ChevronRight } from "lucide-react";
+import type { Parameter } from "@foresthubai/workflow-core/parameter";
+import type { Diagnostic } from "@foresthubai/workflow-core/diagnostics";
+import ParameterEditor from "../inputs/ParameterEditor";
+import { MAIN_CANVAS_ID } from "../stores/canvasStore";
+import { useEditorStore } from "../stores/editorStore";
+import { isReadOnly } from "../WorkflowBuilder";
+import { useParamErrors } from "../hooks/useParamErrors";
+import { ReadOnlyBanner } from "../components/ui/readonly-banner";
+import { DeleteButton } from "../components/ui/delete-button";
+
+interface ResourceConfigPanelProps {
+  /** Stable id of the open resource — resets the local label field when it changes. */
+  resetKey: string;
+  label: string;
+  /** `title`/aria text for the label input. */
+  labelTitle: string;
+  onLabelChange: (label: string) => void;
+  description: string;
+  /** Optional validation messages rendered under the title (e.g. empty/duplicate label). */
+  belowLabel?: ReactNode;
+  parameters: Parameter[];
+  /** Read the current value for a parameter (channels map `type` to a top-level field). */
+  getValue: (param: Parameter) => unknown;
+  allArguments: Record<string, unknown>;
+  onParamChange: (paramId: string, value: unknown) => void;
+  diagnostics: Diagnostic[] | undefined;
+  translationPrefix: string;
+  deleteLabel: string;
+  onDelete: () => void;
+  onClose: () => void;
+  /** Canvas used for variable resolution in ParameterEditor. Project-scoped resources use MAIN. */
+  canvasId?: string;
+}
+
+/**
+ * Shared editor shell for the project-scoped "primitive" resources that all
+ * render a `{type, arguments}` bag through `ParameterEditor` — channels, memory,
+ * declared models. Owns the chrome (editable title, readOnly banner, parameter
+ * list, delete/close buttons); each wrapper supplies the parameter source, the
+ * value accessor, and the mutation callbacks. Nodes/edges are too divergent to
+ * use this and keep their own bodies (sharing only {@link useParamErrors}).
+ */
+export const ResourceConfigPanel = ({
+  resetKey,
+  label,
+  labelTitle,
+  onLabelChange,
+  description,
+  belowLabel,
+  parameters,
+  getValue,
+  allArguments,
+  onParamChange,
+  diagnostics,
+  translationPrefix,
+  deleteLabel,
+  onDelete,
+  onClose,
+  canvasId = MAIN_CANVAS_ID,
+}: ResourceConfigPanelProps) => {
+  const readOnly = useEditorStore((s) => isReadOnly(s.builderMode));
+  const paramErrors = useParamErrors(diagnostics);
+
+  // Local label state preserves cursor position on edit; resets when a different
+  // resource is opened.
+  const [localLabel, setLocalLabel] = useState(label);
+  useEffect(() => {
+    setLocalLabel(label);
+  }, [resetKey, label]);
+
+  return (
+    <div className="p-4">
+      <div className="space-y-4">
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex-1 min-w-0">
+            <div className="group flex items-center gap-1.5 rounded-md border border-transparent px-1.5 -mx-1.5 hover:border-input focus-within:border-input transition-colors">
+              <input
+                type="text"
+                title={labelTitle}
+                className="font-semibold text-lg bg-transparent w-full outline-none cursor-text py-0.5"
+                value={localLabel}
+                readOnly={readOnly}
+                onChange={(e) => {
+                  setLocalLabel(e.target.value);
+                  onLabelChange(e.target.value);
+                }}
+              />
+            </div>
+            <p className="text-sm text-muted-foreground">{description}</p>
+            {belowLabel}
+          </div>
+          <Button variant="ghost" size="icon" className="shrink-0" onClick={onClose}>
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+
+        {readOnly && <ReadOnlyBanner />}
+
+        {parameters.length > 0 && (
+          <>
+            <Separator />
+            <div className={`space-y-3 ${readOnly ? "pointer-events-none opacity-60" : ""}`}>
+              {parameters.map((param) => (
+                <ParameterEditor
+                  key={param.id}
+                  canvasId={canvasId}
+                  parameter={param}
+                  value={getValue(param)}
+                  allArguments={allArguments}
+                  onChange={(value) => onParamChange(param.id, value)}
+                  errors={paramErrors.get(param.id)}
+                  translationPrefix={translationPrefix}
+                />
+              ))}
+            </div>
+          </>
+        )}
+
+        {!readOnly && (
+          <>
+            <Separator />
+            <DeleteButton onClick={onDelete}>{deleteLabel}</DeleteButton>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/panels/ResourceListPanel.tsx

@@ -1,113 +1,113 @@
-import { AlertTriangle, type LucideIcon } from "lucide-react";
-import { AddButton } from "../components/ui/add-button";
-import { cn } from "../cn";
-import { useEditorStore } from "../stores/editorStore";
-import { isReadOnly } from "../WorkflowBuilder";
-import type { Diagnostic } from "@foresthubai/workflow-core/diagnostics";
-
-interface ResourceListItem {
-  id: string;
-  label: string;
-}
-
-interface AddAction {
-  label: string;
-  icon: LucideIcon;
-  onAdd: () => void;
-}
-
-interface ResourceListPanelProps<I extends ResourceListItem> {
-  items: I[];
-  selectedId: string | null;
-  onSelect: (id: string) => void;
-  /** The matching diagnostics slot (byChannelId / byMemoryId / byModelId). */
-  diagnosticsSlot: Record<string, Diagnostic[]>;
-  /** Short type-badge text shown on the right of each row. */
-  badge: (item: I) => string;
-  emptyIcon: LucideIcon;
-  emptyText: string;
-  emptyHint: string;
-  /** One add button (channels/models) or several (memory: File + Vector). */
-  addActions: AddAction[];
-}
-
-/**
- * Shared sidebar list for the project-scoped primitive resources (channels,
- * memory, declared models): a selectable row per item with an error ring +
- * warning icon driven by the diagnostics slot, a type badge, and add button(s).
- * Variables are not listed here — they're canvas-scoped, sectioned, and don't
- * use this error-badge model.
- */
-export function ResourceListPanel<I extends ResourceListItem>({
-  items,
-  selectedId,
-  onSelect,
-  diagnosticsSlot,
-  badge,
-  emptyIcon: EmptyIcon,
-  emptyText,
-  emptyHint,
-  addActions,
-}: ResourceListPanelProps<I>) {
-  const readOnly = useEditorStore((s) => isReadOnly(s.builderMode));
-
-  const addButtons = (
-    <div className="flex flex-col gap-1.5">
-      {addActions.map(({ label, icon, onAdd }) => (
-        <AddButton key={label} icon={icon} onClick={onAdd}>
-          {label}
-        </AddButton>
-      ))}
-    </div>
-  );
-
-  if (items.length === 0) {
-    return (
-      <div className="flex flex-col items-center justify-center py-8 text-center">
-        <EmptyIcon className="w-10 h-10 text-muted-foreground/50 mb-3" />
-        <p className="text-sm text-muted-foreground">{emptyText}</p>
-        <p className="text-xs text-muted-foreground/70 mt-1">{emptyHint}</p>
-        {!readOnly && <div className="mt-3 w-full px-2">{addButtons}</div>}
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-1.5">
-      {items.map((item) => {
-        const isSelected = selectedId === item.id;
-        const hasError = (diagnosticsSlot[item.id] ?? []).some((d) => d.severity === "error");
-        return (
-          <div
-            key={item.id}
-            onClick={() => onSelect(item.id)}
-            className={cn(
-              // Background/shadow come from selection; border/ring come from error
-              // status. Layered, not exclusive — so a selected row with an error
-              // keeps its red outline against the green selection tint instead of
-              // hiding the very signal the user is acting on.
-              "p-3 rounded-lg transition-all cursor-pointer border ring-1",
-              isSelected ? "bg-accent shadow-md" : "bg-card shadow-sm hover:shadow-md",
-              hasError
-                ? "border-destructive ring-destructive"
-                : isSelected
-                  ? "border-primary/40 ring-primary/40"
-                  : "border-border ring-transparent",
-            )}
-          >
-            <div className="flex items-center justify-between gap-2">
-              <span className="font-mono text-sm text-foreground truncate flex items-center gap-1.5">
-                {hasError && <AlertTriangle className="w-3.5 h-3.5 text-destructive shrink-0" />}
-                {item.label}
-              </span>
-              <span className="text-[10px] font-medium px-1.5 py-0.5 rounded border border-border/50 text-muted-foreground shrink-0">
-                {badge(item)}
-              </span>
-            </div>
-          </div>
-        );
-      })}
-      {!readOnly && <div className="pt-1">{addButtons}</div>}
-    </div>
-  );
-}
+import { AlertTriangle, type LucideIcon } from "lucide-react";
+import { AddButton } from "../components/ui/add-button";
+import { cn } from "../cn";
+import { useEditorStore } from "../stores/editorStore";
+import { isReadOnly } from "../WorkflowBuilder";
+import type { Diagnostic } from "@foresthubai/workflow-core/diagnostics";
+
+interface ResourceListItem {
+  id: string;
+  label: string;
+}
+
+interface AddAction {
+  label: string;
+  icon: LucideIcon;
+  onAdd: () => void;
+}
+
+interface ResourceListPanelProps<I extends ResourceListItem> {
+  items: I[];
+  selectedId: string | null;
+  onSelect: (id: string) => void;
+  /** The matching diagnostics slot (byChannelId / byMemoryId / byModelId). */
+  diagnosticsSlot: Record<string, Diagnostic[]>;
+  /** Short type-badge text shown on the right of each row. */
+  badge: (item: I) => string;
+  emptyIcon: LucideIcon;
+  emptyText: string;
+  emptyHint: string;
+  /** One add button (channels/models) or several (memory: File + Vector). */
+  addActions: AddAction[];
+}
+
+/**
+ * Shared sidebar list for the project-scoped primitive resources (channels,
+ * memory, declared models): a selectable row per item with an error ring +
+ * warning icon driven by the diagnostics slot, a type badge, and add button(s).
+ * Variables are not listed here — they're canvas-scoped, sectioned, and don't
+ * use this error-badge model.
+ */
+export function ResourceListPanel<I extends ResourceListItem>({
+  items,
+  selectedId,
+  onSelect,
+  diagnosticsSlot,
+  badge,
+  emptyIcon: EmptyIcon,
+  emptyText,
+  emptyHint,
+  addActions,
+}: ResourceListPanelProps<I>) {
+  const readOnly = useEditorStore((s) => isReadOnly(s.builderMode));
+
+  const addButtons = (
+    <div className="flex flex-col gap-1.5">
+      {addActions.map(({ label, icon, onAdd }) => (
+        <AddButton key={label} icon={icon} onClick={onAdd}>
+          {label}
+        </AddButton>
+      ))}
+    </div>
+  );
+
+  if (items.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-8 text-center">
+        <EmptyIcon className="w-10 h-10 text-muted-foreground/50 mb-3" />
+        <p className="text-sm text-muted-foreground">{emptyText}</p>
+        <p className="text-xs text-muted-foreground/70 mt-1">{emptyHint}</p>
+        {!readOnly && <div className="mt-3 w-full px-2">{addButtons}</div>}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-1.5">
+      {items.map((item) => {
+        const isSelected = selectedId === item.id;
+        const hasError = (diagnosticsSlot[item.id] ?? []).some((d) => d.severity === "error");
+        return (
+          <div
+            key={item.id}
+            onClick={() => onSelect(item.id)}
+            className={cn(
+              // Background/shadow come from selection; border/ring come from error
+              // status. Layered, not exclusive — so a selected row with an error
+              // keeps its red outline against the green selection tint instead of
+              // hiding the very signal the user is acting on.
+              "p-3 rounded-lg transition-all cursor-pointer border ring-1",
+              isSelected ? "bg-accent shadow-md" : "bg-card shadow-sm hover:shadow-md",
+              hasError
+                ? "border-destructive ring-destructive"
+                : isSelected
+                  ? "border-primary/40 ring-primary/40"
+                  : "border-border ring-transparent",
+            )}
+          >
+            <div className="flex items-center justify-between gap-2">
+              <span className="font-mono text-sm text-foreground truncate flex items-center gap-1.5">
+                {hasError && <AlertTriangle className="w-3.5 h-3.5 text-destructive shrink-0" />}
+                {item.label}
+              </span>
+              <span className="text-[10px] font-medium px-1.5 py-0.5 rounded border border-border/50 text-muted-foreground shrink-0">
+                {badge(item)}
+              </span>
+            </div>
+          </div>
+        );
+      })}
+      {!readOnly && <div className="pt-1">{addButtons}</div>}
+    </div>
+  );
+}