@foresthubai/workflow-builder 0.3.0

package/src/panels/NodeLibrary.tsx

@@ -0,0 +1,288 @@
+import { Badge } from "../components/ui/badge";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../components/ui/collapsible";
+import { Input } from "../components/ui/input";
+import { ScrollArea } from "../components/ui/scroll-area";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../components/ui/tooltip";
+import { NodeCategory } from "@foresthubai/workflow-core/node";
+import type { FunctionDeclaration } from "@foresthubai/workflow-core/function";
+import { ChevronDown, ChevronDown as DropdownIcon, Hash, Search, ToggleLeft, Type } from "lucide-react";
+import type { TFunction } from "i18next";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { NodeDefinition } from "@foresthubai/workflow-core/node";
+import { categoryIcons, categoryColors } from "../utils/categoryConstants";
+import { useEditorStore } from "../stores/editorStore";
+import { isReadOnly } from "../WorkflowBuilder";
+import { FunctionNodeDefinition } from "@foresthubai/workflow-core/node";
+import { Parameter } from "@foresthubai/workflow-core/parameter";
+import { getNodeDescription } from "../utils/translation";
+
+const getParameterIcon = (type: string) => {
+  switch (type) {
+    case "string":
+      return Type;
+    case "number":
+    case "int":
+    case "float":
+      return Hash;
+    case "boolean":
+    case "bool":
+      return ToggleLeft;
+    case "dropdown":
+    case "selection":
+      return DropdownIcon;
+    default:
+      return Type;
+  }
+};
+
+const getParameterTypeLabel = (type: string, t: TFunction) => {
+  switch (type) {
+    case "string":
+      return t("paramTypeText");
+    case "int":
+    case "float":
+    case "number":
+      return t("paramTypeNumber");
+    case "boolean":
+    case "bool":
+      return t("paramTypeBoolean");
+    case "dropdown":
+    case "selection":
+      return t("paramTypeSelection");
+    case "expression":
+      return t("paramTypeExpression");
+    default:
+      return type;
+  }
+};
+
+const ParameterTooltip: React.FC<{
+  parameters: Parameter[];
+  t: TFunction;
+}> = ({ parameters, t }) => {
+  if (parameters.length === 0) return null;
+
+  return (
+    <div className="space-y-2 max-w-sm">
+      <div className="font-medium text-sm">{t("parametersLabel")}</div>
+      {parameters.map((param, index) => {
+        const IconComponent = getParameterIcon(param.type);
+        const isOptional = param.optional === true;
+        return (
+          <div key={index} className="space-y-1">
+            <div className="flex items-center gap-2">
+              <IconComponent className="w-3 h-3" />
+              <span className="font-medium text-sm">{param.label}</span>
+              {!isOptional ? (
+                <Badge variant="destructive" className="text-xs">
+                  {t("required")}
+                </Badge>
+              ) : (
+                <Badge variant="secondary" className="text-xs">
+                  {t("optional")}
+                </Badge>
+              )}
+            </div>
+            <div className="text-xs text-muted-foreground pl-5">
+              {t("typeLabel")} {getParameterTypeLabel(param.type, t)}
+              {param.default !== undefined && (
+                <span>
+                  {" "}
+                  • {t("defaultLabel")} {String(param.default)}
+                </span>
+              )}
+              {"options" in param && param.options && (
+                <span>
+                  {" "}
+                  • {t("optionsLabel")} {param.options.map((o) => o.label || o.value).join(", ")}
+                </span>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+interface NodeLibraryProps {
+  onAddNode: (nodeType: NodeDefinition, position?: { x: number; y: number }) => void;
+  nodeDefinitions: NodeDefinition[];
+  getAllCategories: () => NodeCategory[];
+  functions: FunctionDeclaration[];
+  isFunctionCanvas: boolean;
+}
+
+const NodeLibrary = ({
+  onAddNode,
+  nodeDefinitions,
+  getAllCategories,
+  functions,
+  isFunctionCanvas,
+}: NodeLibraryProps) => {
+  const { t } = useTranslation();
+  const readOnly = useEditorStore((s) => isReadOnly(s.builderMode));
+  const [searchTerm, setSearchTerm] = useState("");
+  const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set());
+
+  const search = searchTerm.toLowerCase();
+  const filteredNodes = nodeDefinitions.filter(
+    (node) =>
+      !node.isUnremovable &&
+      !(isFunctionCanvas && node.category === NodeCategory.Trigger) &&
+      // Search filter: label, category, or any tag
+      (node.label.toLowerCase().includes(search) ||
+        node.category.toLowerCase().includes(search) ||
+        (node.tags ?? []).some((tag) => tag.toLowerCase().includes(search))),
+  );
+
+  // Get categories that have matching nodes when searching
+  const categoriesWithMatches = new Set(filteredNodes.map((node) => node.category));
+
+  const toggleCategory = (category: NodeCategory) => {
+    const newExpanded = new Set(expandedCategories);
+    if (newExpanded.has(category)) {
+      newExpanded.delete(category);
+    } else {
+      newExpanded.add(category);
+    }
+    setExpandedCategories(newExpanded);
+  };
+
+  // When searching, auto-expand categories with matches
+  const isCategoryExpanded = (category: NodeCategory) => {
+    if (searchTerm.trim() && categoriesWithMatches.has(category)) {
+      return true;
+    }
+    return expandedCategories.has(category);
+  };
+
+  const hasResults = filteredNodes.length > 0;
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Search */}
+      <div className="relative shrink-0">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none" />
+        <Input
+          placeholder={t("searchBlocks")}
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          className="pl-10 h-9 rounded-lg"
+        />
+      </div>
+
+      <ScrollArea className="flex-1 mt-3">
+        {/* disableHoverableContent: close the tooltip as soon as the cursor
+            leaves the tile, instead of keeping it open when the pointer moves
+            onto the description itself. */}
+        <TooltipProvider disableHoverableContent>
+          {/* px-1 keeps tile hover borders off the scroll-clip edge */}
+          <div className="flex flex-col gap-0.5 px-1 pb-4">
+            {!hasResults && (
+              <p className="text-sm text-muted-foreground text-center py-10">{t("noResults", "No matching nodes")}</p>
+            )}
+            {getAllCategories().map((category) => {
+              const categoryNodes = filteredNodes.filter((node) => node.category === category);
+              if (categoryNodes.length === 0) return null;
+
+              const isExpanded = isCategoryExpanded(category);
+              const CategoryIcon = categoryIcons[category];
+              const iconChipClass = categoryColors[category] ?? "bg-muted text-muted-foreground border-border";
+
+              return (
+                <Collapsible key={category} open={isExpanded} onOpenChange={() => toggleCategory(category)}>
+                  <CollapsibleTrigger className="flex items-center gap-2 w-full px-2 py-1.5 rounded-md text-left hover:bg-muted/50 transition-colors group">
+                    <ChevronDown
+                      className={`w-4 h-4 text-muted-foreground transition-transform duration-200 ${
+                        isExpanded ? "" : "-rotate-90"
+                      }`}
+                    />
+                    {CategoryIcon && <CategoryIcon className="w-4 h-4 text-muted-foreground shrink-0" />}
+                    <span className="flex-1 font-medium text-sm truncate">{category}</span>
+                    <span className="text-xs text-muted-foreground tabular-nums">{categoryNodes.length}</span>
+                  </CollapsibleTrigger>
+
+                  <CollapsibleContent>
+                    <div className="grid grid-cols-2 gap-1.5 px-1 pt-1.5 pb-2">
+                      {categoryNodes.map((nodedef) => {
+                        const staticParams = nodedef.parameters;
+                        const nodeKey = `${nodedef.type}-${"functionInfo" in nodedef ? (nodedef as FunctionNodeDefinition).functionInfo.id : ""}`;
+                        const hasParams = staticParams.length > 0;
+                        const description = getNodeDescription(t, nodedef);
+                        const firstTag = nodedef.tags?.[0];
+
+                        const tile = (
+                          <button
+                            type="button"
+                            draggable={!readOnly}
+                            onDragStart={
+                              readOnly
+                                ? undefined
+                                : (e) => {
+                                    const dragData = { nodeDef: nodedef };
+                                    e.dataTransfer.setData("application/json", JSON.stringify(dragData));
+                                    e.dataTransfer.effectAllowed = "copy";
+                                  }
+                            }
+                            onClick={readOnly ? undefined : () => onAddNode(nodedef)}
+                            disabled={readOnly}
+                            className={`relative flex flex-col items-center gap-2 rounded-lg border border-border bg-card p-2.5 text-center transition-colors duration-150 ${
+                              readOnly
+                                ? "opacity-60 cursor-default"
+                                : "cursor-grab active:cursor-grabbing hover:border-primary/50 hover:bg-accent/40"
+                            }`}
+                          >
+                            <div
+                              className={`flex items-center justify-center w-9 h-9 rounded-lg border ${iconChipClass}`}
+                            >
+                              {CategoryIcon && <CategoryIcon className="w-4 h-4" />}
+                            </div>
+                            <span className="text-[11px] font-medium leading-tight line-clamp-2 w-full">
+                              {nodedef.label}
+                            </span>
+                            {firstTag && (
+                              <Badge
+                                variant="secondary"
+                                className="absolute top-1 right-1 text-[9px] h-3.5 px-1 font-normal leading-none"
+                              >
+                                {firstTag}
+                              </Badge>
+                            )}
+                          </button>
+                        );
+
+                        const hasTooltipContent = description || hasParams;
+                        if (!hasTooltipContent) {
+                          return <React.Fragment key={nodeKey}>{tile}</React.Fragment>;
+                        }
+
+                        return (
+                          <Tooltip key={nodeKey} delayDuration={300}>
+                            <TooltipTrigger asChild>{tile}</TooltipTrigger>
+                            <TooltipContent side="right" className="max-w-sm pointer-events-none">
+                              <div className="space-y-2">
+                                {description && (
+                                  <p className="text-xs text-muted-foreground leading-relaxed">{description}</p>
+                                )}
+                                {hasParams && <ParameterTooltip parameters={staticParams} t={t} />}
+                              </div>
+                            </TooltipContent>
+                          </Tooltip>
+                        );
+                      })}
+                    </div>
+                  </CollapsibleContent>
+                </Collapsible>
+              );
+            })}
+          </div>
+        </TooltipProvider>
+      </ScrollArea>
+    </div>
+  );
+};
+
+export default NodeLibrary;

package/src/panels/ResourceConfigPanel.tsx

@@ -0,0 +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>
+  );
+};

package/src/panels/ResourceListPanel.tsx

@@ -0,0 +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>
+  );
+}