@foresthubai/workflow-builder 0.3.0

package/src/panels/DebugExternalIOPanel.tsx

@@ -0,0 +1,180 @@
+import { Button } from "../components/ui/button";
+import { Input } from "../components/ui/input";
+import { Label } from "../components/ui/label";
+import { Switch } from "../components/ui/switch";
+import { Loader2, Play } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { NodeCategory, getInput, type NodeData, type ExternalInput } from "@foresthubai/workflow-core/node";
+import { getOrCreateCanvasStore } from "../stores/canvasStore";
+import { useDebugStore, type DebugSessionPhase } from "../stores/debugStore";
+
+interface DebugExternalIOPanelProps {
+  canvasId: string;
+  onStep: (nodeId?: string) => void;
+  getNodeCategory: (node: NodeData) => NodeCategory | undefined;
+}
+
+export const DebugExternalIOPanel = ({ canvasId, onStep, getNodeCategory }: DebugExternalIOPanelProps) => {
+  const { t } = useTranslation();
+  const phase = useDebugStore((s) => s.phase);
+
+  const cursorNodeId = getCursorNodeId(phase);
+  const canvasStore = getOrCreateCanvasStore(canvasId);
+  const cursorNode = canvasStore((s) =>
+    cursorNodeId ? (s.nodes.find((n) => n.id === cursorNodeId)?.data ?? null) : null,
+  );
+
+  const requirements = useMemo(() => (cursorNode ? getInput(cursorNode as NodeData) : []), [cursorNode]);
+
+  const isTrigger = cursorNode ? getNodeCategory(cursorNode as NodeData) === NodeCategory.Trigger : false;
+  const isStepping = phase.status === "stepping";
+  const canStep = phase.status === "paused" || (phase.status === "idle" && cursorNodeId);
+
+  // Local state for mock values
+  const [gpioValues, setGpioValues] = useState<Record<string, number>>({});
+  const [serialValues, setSerialValues] = useState<string[]>([""]);
+
+  const handleStep = useCallback(() => {
+    // External-state injection (gpio/serial) is part of the not-yet-implemented
+    // debug contract (DebugExternalState). For now we only signal which node to
+    // step; the collected input values below are not yet wired to the engine.
+    onStep(cursorNodeId ?? undefined);
+  }, [cursorNodeId, onStep]);
+
+  if (!cursorNodeId) {
+    return <div className="text-sm text-muted-foreground text-center py-4">{t("debug.selectNode")}</div>;
+  }
+
+  if (isTrigger) {
+    return (
+      <div className="space-y-3">
+        <div className="text-sm text-muted-foreground bg-muted/50 rounded px-3 py-2">
+          {t("debug.triggerNotSteppable")}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Node label */}
+      <div className="text-sm font-medium">
+        {(cursorNode as NodeData)?.label || (cursorNode as NodeData)?.type}
+      </div>
+
+      {/* Requirements */}
+      {requirements.length === 0 ? (
+        <div className="text-xs text-muted-foreground">{t("debug.noInputsNeeded")}</div>
+      ) : (
+        <div className="space-y-3">
+          {requirements.map((req, i) => (
+            <ExternalInputField
+              key={i}
+              requirement={req}
+              gpioValues={gpioValues}
+              setGpioValues={setGpioValues}
+              serialValues={serialValues}
+              setSerialValues={setSerialValues}
+              serialIndex={requirements.slice(0, i).filter((r) => r.kind === "serial").length}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Step button */}
+      <Button className="w-full gap-2" onClick={handleStep} disabled={!canStep || isStepping}>
+        {isStepping ? (
+          <>
+            <Loader2 className="w-4 h-4 animate-spin" />
+            {t("debug.stepping")}
+          </>
+        ) : (
+          <>
+            <Play className="w-4 h-4" />
+            {t("debug.step")}
+          </>
+        )}
+      </Button>
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Sub-components
+// ---------------------------------------------------------------------------
+
+function ExternalInputField({
+  requirement,
+  gpioValues,
+  setGpioValues,
+  serialValues,
+  setSerialValues,
+  serialIndex,
+}: {
+  requirement: ExternalInput;
+  gpioValues: Record<string, number>;
+  setGpioValues: React.Dispatch<React.SetStateAction<Record<string, number>>>;
+  serialValues: string[];
+  setSerialValues: React.Dispatch<React.SetStateAction<string[]>>;
+  serialIndex: number;
+}) {
+  const { t } = useTranslation();
+
+  if (requirement.kind === "gpio") {
+    const pinKey = String(requirement.pinReference ?? "?");
+    const value = gpioValues[pinKey] ?? 0;
+
+    return (
+      <div className="space-y-1">
+        <Label className="text-xs font-medium">
+          {t("debug.gpioPin", { pin: requirement.pinReference ?? "?" })}
+          <span className="text-muted-foreground ml-1">({requirement.dataType})</span>
+        </Label>
+        {requirement.dataType === "bool" ? (
+          <Switch
+            checked={!!value}
+            onCheckedChange={(checked) => setGpioValues((prev) => ({ ...prev, [pinKey]: checked ? 1 : 0 }))}
+          />
+        ) : (
+          <Input
+            type="number"
+            value={value}
+            onChange={(e) => setGpioValues((prev) => ({ ...prev, [pinKey]: parseInt(e.target.value) || 0 }))}
+            className="h-8 font-mono text-sm"
+            min={0}
+            max={4095}
+          />
+        )}
+      </div>
+    );
+  }
+
+  // Serial input
+  return (
+    <div className="space-y-1">
+      <Label className="text-xs font-medium">{t("debug.serialInput")}</Label>
+      <Input
+        value={serialValues[serialIndex] ?? ""}
+        onChange={(e) => {
+          setSerialValues((prev) => {
+            const next = [...prev];
+            next[serialIndex] = e.target.value;
+            return next;
+          });
+        }}
+        placeholder={t("debug.serialPlaceholder")}
+        className="h-8 font-mono text-sm"
+      />
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function getCursorNodeId(phase: DebugSessionPhase): string | null {
+  if (phase.status === "paused" || phase.status === "stepping") return phase.cursorNodeId;
+  return null;
+}

package/src/panels/DiagnosticsPanel.tsx

@@ -0,0 +1,170 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Badge } from "../components/ui/badge";
+import { AlertCircle, AlertTriangle, CheckCircle2, ChevronDown } from "lucide-react";
+import { cn } from "../cn";
+import { useDiagnosticsStore } from "../stores/diagnosticsStore";
+import { getOrCreateCanvasStore } from "../stores/canvasStore";
+import { useNodeDefinitions } from "../hooks/useNodeDefinitions";
+import type { Diagnostic } from "@foresthubai/workflow-core/diagnostics";
+
+interface DiagnosticsPanelProps {
+  canvasId: string;
+  onSelectNode: (nodeId: string) => void;
+  onSelectEdge: (edgeId: string) => void;
+}
+
+interface DiagnosticGroup {
+  entityId: string;
+  entityType: "node" | "edge";
+  label: string;
+  diagnostics: Diagnostic[];
+  errorCount: number;
+  warningCount: number;
+}
+
+export const DiagnosticsPanel = ({ canvasId, onSelectNode, onSelectEdge }: DiagnosticsPanelProps) => {
+  const { t } = useTranslation();
+  const { getNodeDefinition } = useNodeDefinitions();
+
+  const byNodeId = useDiagnosticsStore((s) => s.byNodeId);
+  const byEdgeId = useDiagnosticsStore((s) => s.byEdgeId);
+  const useCanvasStore = getOrCreateCanvasStore(canvasId);
+  const nodes = useCanvasStore((s) => s.nodes);
+  const edges = useCanvasStore((s) => s.edges);
+
+  // Build groups
+  const groups: DiagnosticGroup[] = [];
+
+  // Node groups
+  for (const [nodeId, diags] of Object.entries(byNodeId)) {
+    if (diags.length === 0) continue;
+    const node = nodes.find((n) => n.id === nodeId);
+    const nodeDef = node ? getNodeDefinition(node.data) : undefined;
+    const label = (node?.data?.label as string) || nodeDef?.label || nodeId;
+    groups.push({
+      entityId: nodeId,
+      entityType: "node",
+      label,
+      diagnostics: diags,
+      errorCount: diags.filter((d) => d.severity === "error").length,
+      warningCount: diags.filter((d) => d.severity === "warning").length,
+    });
+  }
+
+  // Edge groups
+  for (const [edgeId, diags] of Object.entries(byEdgeId)) {
+    if (diags.length === 0) continue;
+    const edge = edges.find((e) => e.id === edgeId);
+    const sourceNode = edge ? nodes.find((n) => n.id === edge.source) : undefined;
+    const targetNode = edge ? nodes.find((n) => n.id === edge.target) : undefined;
+    const sourceDef = sourceNode ? getNodeDefinition(sourceNode.data) : undefined;
+    const targetDef = targetNode ? getNodeDefinition(targetNode.data) : undefined;
+    const sourceLabel = (sourceNode?.data?.label as string) || sourceDef?.label || "?";
+    const targetLabel = (targetNode?.data?.label as string) || targetDef?.label || "?";
+    const label = `${sourceLabel} → ${targetLabel}`;
+    groups.push({
+      entityId: edgeId,
+      entityType: "edge",
+      label,
+      diagnostics: diags,
+      errorCount: diags.filter((d) => d.severity === "error").length,
+      warningCount: diags.filter((d) => d.severity === "warning").length,
+    });
+  }
+
+  // IO variable diagnostics are surfaced on the IO sidebar tab itself
+  // (red ring on cards + count badge on the tab icon) — not duplicated here.
+
+  // Sort: errors first, then warnings; within same severity, nodes before edges;
+  // within same type, alphabetical by label so the panel order stays stable
+  // regardless of which nodes ReactFlow currently has mounted (virtualization
+  // can reshuffle the diagnostics store's insertion order on pan/select).
+  groups.sort((a, b) => {
+    const aHasError = a.errorCount > 0 ? 0 : 1;
+    const bHasError = b.errorCount > 0 ? 0 : 1;
+    if (aHasError !== bHasError) return aHasError - bHasError;
+    const aType = a.entityType === "node" ? 0 : 1;
+    const bType = b.entityType === "node" ? 0 : 1;
+    if (aType !== bType) return aType - bType;
+    return a.label.localeCompare(b.label);
+  });
+
+  if (groups.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-2 py-12 text-muted-foreground">
+        <CheckCircle2 className="w-8 h-8 text-success" />
+        <span className="text-sm">{t("noIssuesFound")}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-1">
+      {groups.map((group) => (
+        <DiagnosticGroupItem
+          key={`${group.entityType}-${group.entityId}`}
+          group={group}
+          onSelect={() => (group.entityType === "node" ? onSelectNode(group.entityId) : onSelectEdge(group.entityId))}
+        />
+      ))}
+    </div>
+  );
+};
+
+function DiagnosticGroupItem({ group, onSelect }: { group: DiagnosticGroup; onSelect: () => void }) {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => {
+          setOpen((v) => !v);
+          onSelect();
+        }}
+        className="flex items-center gap-2 w-full px-2 py-1.5 rounded-md hover:bg-muted/50 text-left text-sm"
+      >
+        <ChevronDown className={cn("w-3.5 h-3.5 shrink-0 transition-transform", !open && "-rotate-90")} />
+        <span className="truncate flex-1 font-medium">{group.label}</span>
+        <div className="flex items-center gap-1">
+          {group.errorCount > 0 && (
+            <Badge
+              variant="outline"
+              className="text-[10px] px-1.5 py-0 h-4 leading-4 border-destructive/40 text-destructive bg-destructive/10"
+            >
+              {group.errorCount}
+            </Badge>
+          )}
+          {group.warningCount > 0 && (
+            <Badge
+              variant="outline"
+              className="text-[10px] px-1.5 py-0 h-4 leading-4 border-warning/40 text-warning bg-warning/10"
+            >
+              {group.warningCount}
+            </Badge>
+          )}
+        </div>
+      </button>
+      {open && (
+        <div className="ml-3 border-l border-border/50 pl-2 flex flex-col gap-0.5 pb-1">
+          {group.diagnostics.map((diag, i) => (
+            <button
+              key={i}
+              type="button"
+              onClick={onSelect}
+              className="flex items-start gap-1.5 px-2 py-1 rounded text-xs text-left hover:bg-muted/50 transition-colors w-full"
+            >
+              {diag.severity === "error" ? (
+                <AlertTriangle className="w-3.5 h-3.5 text-destructive shrink-0 mt-0.5" />
+              ) : (
+                <AlertCircle className="w-3.5 h-3.5 text-warning shrink-0 mt-0.5" />
+              )}
+              <span className="text-muted-foreground">{diag.message}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/panels/EdgeConfigPanel.tsx

@@ -0,0 +1,104 @@
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "../components/ui/button";
+import { Separator } from "../components/ui/separator";
+import { ChevronRight } from "lucide-react";
+import { getEdgeDefinition } from "@foresthubai/workflow-core/edge";
+import type { EdgeData, EdgeType } from "@foresthubai/workflow-core/edge";
+import ParameterEditor from "../inputs/ParameterEditor";
+import { useEditorStore } from "../stores/editorStore";
+import { isReadOnly } from "../WorkflowBuilder";
+import { useDiagnosticsStore } from "../stores/diagnosticsStore";
+import { useParamErrors } from "../hooks/useParamErrors";
+import { ReadOnlyBanner } from "../components/ui/readonly-banner";
+import { DeleteButton } from "../components/ui/delete-button";
+import { getEdgeDescription } from "../utils/translation";
+
+interface EdgeConfigPanelProps {
+  canvasId: string;
+  edgeId: string;
+  edgeType: EdgeType;
+  edgeData: EdgeData;
+  sourceControlEdgeCount: number;
+  onEdgeUpdate: (edgeId: string, updates: Record<string, unknown>) => void;
+  onEdgeDelete: (edgeId: string) => void;
+  onClose: () => void;
+}
+
+export const EdgeConfigPanel = ({
+  canvasId,
+  edgeId,
+  edgeType,
+  edgeData,
+  sourceControlEdgeCount,
+  onEdgeUpdate,
+  onEdgeDelete,
+  onClose,
+}: EdgeConfigPanelProps) => {
+  const { t } = useTranslation();
+  const readOnly = useEditorStore((s) => isReadOnly(s.builderMode));
+  const definition = getEdgeDefinition(edgeType);
+
+  // Read per-parameter error state from diagnostics store
+  const edgeDiags = useDiagnosticsStore((s) => s.byEdgeId[edgeId]);
+  const paramErrors = useParamErrors(edgeDiags);
+
+  const handleParamChange = useCallback(
+    (paramId: string, value: unknown) => {
+      onEdgeUpdate(edgeId, { [paramId]: value });
+    },
+    [edgeId, onEdgeUpdate],
+  );
+
+  return (
+    <div className="p-4 space-y-4">
+      {/* Header - matches NodeConfigPanel layout */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="font-semibold text-lg">{definition.label}</h3>
+          <p className="text-sm text-muted-foreground">{getEdgeDescription(t, definition, edgeType)}</p>
+        </div>
+        <Button variant="ghost" size="icon" onClick={onClose}>
+          <ChevronRight className="h-4 w-4" />
+        </Button>
+      </div>
+      {readOnly && <ReadOnlyBanner />}
+
+      <Separator />
+
+      <div className={readOnly ? "pointer-events-none opacity-60" : ""}>
+        {definition.parameters.length > 0 ? (
+          definition.parameters.map((param) => {
+            const isDescriptionOptional =
+              param.id === "description" &&
+              sourceControlEdgeCount <= 1 &&
+              (edgeType === "agentChoice" || edgeType === "agentDelegate");
+            const effectiveParam = isDescriptionOptional ? { ...param, optional: true } : param;
+
+            return (
+              <ParameterEditor
+                key={param.id}
+                canvasId={canvasId}
+                parameter={effectiveParam}
+                value={edgeData[param.id]}
+                allArguments={edgeData}
+                onChange={(value) => handleParamChange(param.id, value)}
+                errors={paramErrors.get(param.id)}
+                translationPrefix={`edges.${edgeType}`}
+              />
+            );
+          })
+        ) : (
+          <p className="text-sm text-muted-foreground">{t("noEdgeParams")}</p>
+        )}
+      </div>
+
+      {!readOnly && (
+        <>
+          <Separator />
+          <DeleteButton onClick={() => onEdgeDelete(edgeId)}>{t("deleteEdge")}</DeleteButton>
+        </>
+      )}
+    </div>
+  );
+};

package/src/panels/FunctionConfigPanel.tsx

@@ -0,0 +1,179 @@
+import { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "../components/ui/button";
+import { Separator } from "../components/ui/separator";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "../components/ui/alert-dialog";
+import { ChevronRight } from "lucide-react";
+import type { FunctionDeclaration } from "@foresthubai/workflow-core/function";
+import { useEditorStore } from "../stores/editorStore";
+import { useDiagnosticsStore } from "../stores/diagnosticsStore";
+import { isReadOnly } from "../WorkflowBuilder";
+import { ReadOnlyBanner } from "../components/ui/readonly-banner";
+import { DeleteButton } from "../components/ui/delete-button";
+import { PortSection } from "../inputs/PortSection";
+import ExpressionInput from "../inputs/ExpressionInput";
+import { useAvailableVariables } from "../hooks/useAvailableVariables";
+import {
+  renameFunction,
+  addArgument,
+  updateArgument,
+  removeArgument,
+  addOutput,
+  updateOutput,
+  removeOutput,
+  setOutputExpression,
+  deleteFunction,
+} from "../utils/functionOperations";
+
+interface FunctionConfigPanelProps {
+  func: FunctionDeclaration;
+  onClose: () => void;
+}
+
+/**
+ * Right-side editor for a project-scoped function declaration, styled like the other
+ * config panels: an editable title, then Inputs and Outputs sections (strong label +
+ * description) whose rows are the same `bg-card` declaration cards the node Outputs
+ * section uses. Each output bundles its declaration with the expression that produces
+ * it; those expressions resolve against the function body's scope (the body canvas is
+ * active, since selectFunction switched to it). Edits are non-undo-tracked.
+ */
+export const FunctionConfigPanel = ({ func, onClose }: FunctionConfigPanelProps) => {
+  const { t } = useTranslation();
+  const readOnly = useEditorStore((s) => isReadOnly(s.builderMode));
+  const { id, arguments: fnArgs, outputs } = func;
+
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+
+  // Local name state preserves cursor position; resets when a different function opens.
+  const [localName, setLocalName] = useState(func.name);
+  useEffect(() => {
+    setLocalName(func.name);
+  }, [id, func.name]);
+
+  // Output expressions resolve against the function body's variable scope.
+  const { lookup: availableVariables } = useAvailableVariables(id);
+
+  // Per-output error messages come from the same byFunctionId slot that rings the
+  // sidebar tab badge + list row, so panel, badge, and list always agree.
+  const fnDiags = useDiagnosticsStore((s) => s.byFunctionId[id]);
+  const outputErrors = useMemo(() => {
+    const byUid = new Map<string, string[]>();
+    for (const d of fnDiags ?? []) {
+      if (!d.outputId) continue;
+      const list = byUid.get(d.outputId);
+      if (list) list.push(d.message);
+      else byUid.set(d.outputId, [d.message]);
+    }
+    return byUid;
+  }, [fnDiags]);
+
+  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={t("functionName")}
+                className="font-semibold text-lg bg-transparent w-full outline-none cursor-text py-0.5 font-mono"
+                value={localName}
+                readOnly={readOnly}
+                placeholder={t("functionNamePlaceholder")}
+                onChange={(e) => {
+                  setLocalName(e.target.value);
+                  renameFunction(id, e.target.value);
+                }}
+              />
+            </div>
+            <p className="text-sm text-muted-foreground">{t("functionDefinition")}</p>
+          </div>
+          <Button variant="ghost" size="icon" className="shrink-0" onClick={onClose}>
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+
+        {readOnly && <ReadOnlyBanner />}
+
+        <div className={`space-y-4 ${readOnly ? "pointer-events-none opacity-60" : ""}`}>
+          <Separator />
+
+          <PortSection
+            title={t("inputs")}
+            description={t("functionInputsDesc")}
+            addLabel={t("add")}
+            emptyText={t("noInputs")}
+            ports={fnArgs}
+            onAdd={() => addArgument(id)}
+            onUpdate={(index, patch) => updateArgument(id, index, patch)}
+            onRemove={(index) => removeArgument(id, index)}
+          />
+
+          <Separator />
+
+          <PortSection
+            title={t("outputs")}
+            description={t("functionOutputsDesc")}
+            addLabel={t("add")}
+            emptyText={t("noOutputs")}
+            ports={outputs}
+            onAdd={() => addOutput(id)}
+            onUpdate={(index, patch) => updateOutput(id, index, patch)}
+            onRemove={(index) => removeOutput(id, index)}
+            errorsFor={(out) => outputErrors.get(out.uid) ?? []}
+            renderExtra={(out, index) => (
+              <ExpressionInput
+                value={out.expression}
+                onChange={(expr) => setOutputExpression(id, index, expr)}
+                expressionType={out.dataType}
+                availableVariables={availableVariables}
+                placeholder={`${t("expressionFor")} ${out.name}...`}
+              />
+            )}
+          />
+        </div>
+
+        {!readOnly && (
+          <>
+            <Separator />
+            <DeleteButton onClick={() => setShowDeleteConfirm(true)}>{t("deleteFunction")}</DeleteButton>
+          </>
+        )}
+      </div>
+
+      {/* Functions carry a body + call sites, so deletion is confirmed (unlike the
+          leaf resources, which delete inline). */}
+      <AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t("deleteFunctionTitle")}</AlertDialogTitle>
+            <AlertDialogDescription>{t("deleteFunctionDesc")}</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={() => {
+                deleteFunction(id);
+                setShowDeleteConfirm(false);
+                onClose();
+              }}
+            >
+              {t("delete")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+};

package/src/panels/FunctionListPanel.tsx

@@ -0,0 +1,45 @@
+import { useTranslation } from "react-i18next";
+import { FunctionSquare, Plus } from "lucide-react";
+import { useDiagnosticsStore } from "../stores/diagnosticsStore";
+import { useEditorStore } from "../stores/editorStore";
+import { ResourceListPanel } from "./ResourceListPanel";
+
+interface FunctionListPanelProps {
+  /** Open + select an existing function (switches to its canvas). */
+  onOpenFunction: (id: string) => void;
+  /** Create a new function and open it. */
+  onCreateFunction: () => string;
+}
+
+/**
+ * Always-present sidebar list of project-scoped functions, mirroring the
+ * channels/memory/models panels. Selecting a row opens the function (its canvas +
+ * the definition config on the right); the badge shows the in→out port counts.
+ */
+export const FunctionListPanel = ({ onOpenFunction, onCreateFunction }: FunctionListPanelProps) => {
+  const { t } = useTranslation();
+  const functions = useEditorStore((s) => s.functions);
+  const selection = useEditorStore((s) => s.selection);
+  const byFunctionId = useDiagnosticsStore((s) => s.byFunctionId);
+
+  const items = Object.values(functions).map((f) => ({
+    id: f.id,
+    label: f.name,
+    inputs: f.arguments.length,
+    outputs: f.outputs.length,
+  }));
+
+  return (
+    <ResourceListPanel
+      items={items}
+      selectedId={selection.kind === "function" ? selection.id : null}
+      onSelect={onOpenFunction}
+      diagnosticsSlot={byFunctionId}
+      badge={(f) => `${f.inputs}→${f.outputs}`}
+      emptyIcon={FunctionSquare}
+      emptyText={t("noFunctions")}
+      emptyHint={t("addFunctionHint")}
+      addActions={[{ label: t("addFunction"), icon: Plus, onAdd: () => onCreateFunction() }]}
+    />
+  );
+};