@foresthubai/workflow-builder 0.3.0 → 0.4.0

package/src/panels/FunctionConfigPanel.tsx

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

@@ -1,45 +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() }]}
-    />
-  );
-};
+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() }]}
+    />
+  );
+};

package/src/panels/MemoryConfigPanel.tsx

@@ -1,55 +1,55 @@
-import { useTranslation } from "react-i18next";
-import { MemoryRegistry, type Memory } from "@foresthubai/workflow-core/memory";
-import { useEditorStore } from "../stores/editorStore";
-import { useDiagnosticsStore } from "../stores/diagnosticsStore";
-import { deleteMemory, updateMemory } from "../utils/memoryOperations";
-import { ResourceConfigPanel } from "./ResourceConfigPanel";
-
-interface MemoryConfigPanelProps {
-  memory: Memory;
-  onClose: () => void;
-}
-
-export const MemoryConfigPanel = ({ memory, onClose }: MemoryConfigPanelProps) => {
-  const { t } = useTranslation();
-  const allMemory = useEditorStore((s) => s.memory);
-  const def = MemoryRegistry.getByType(memory.type);
-  const memoryDiags = useDiagnosticsStore((s) => s.byMemoryId[memory.id]);
-
-  // Label doubles as the LLM tool identifier for memory files and must be unique
-  // per agent. Surfaced inline below the title (mirrors the old name check).
-  const isDuplicateLabel =
-    memory.type === "MemoryFile" &&
-    memory.label.trim() !== "" &&
-    Object.values(allMemory).some((m) => m.id !== memory.id && m.type === "MemoryFile" && m.label === memory.label);
-  const isEmptyLabel = memory.label.trim() === "";
-
-  const belowLabel = (
-    <>
-      {isEmptyLabel && <p className="text-xs text-destructive mt-1">{t("memoryLabelRequired", "Label is required")}</p>}
-      {isDuplicateLabel && (
-        <p className="text-xs text-destructive mt-1">{t("memoryLabelDuplicate", "Label must be unique per agent")}</p>
-      )}
-    </>
-  );
-
-  return (
-    <ResourceConfigPanel
-      resetKey={memory.id}
-      label={memory.label}
-      labelTitle={t("memoryLabel", "Memory label")}
-      onLabelChange={(label) => updateMemory(memory.id, { label })}
-      description={def?.description ?? ""}
-      belowLabel={belowLabel}
-      parameters={def?.parameters ?? []}
-      getValue={(p) => memory.arguments[p.id]}
-      allArguments={{ ...memory.arguments }}
-      onParamChange={(paramId, value) => updateMemory(memory.id, { arguments: { [paramId]: value } })}
-      diagnostics={memoryDiags}
-      translationPrefix="memory"
-      deleteLabel={t("deleteMemory", "Delete memory")}
-      onDelete={() => deleteMemory(memory.id)}
-      onClose={onClose}
-    />
-  );
-};
+import { useTranslation } from "react-i18next";
+import { MemoryRegistry, type Memory } from "@foresthubai/workflow-core/memory";
+import { useEditorStore } from "../stores/editorStore";
+import { useDiagnosticsStore } from "../stores/diagnosticsStore";
+import { deleteMemory, updateMemory } from "../utils/memoryOperations";
+import { ResourceConfigPanel } from "./ResourceConfigPanel";
+
+interface MemoryConfigPanelProps {
+  memory: Memory;
+  onClose: () => void;
+}
+
+export const MemoryConfigPanel = ({ memory, onClose }: MemoryConfigPanelProps) => {
+  const { t } = useTranslation();
+  const allMemory = useEditorStore((s) => s.memory);
+  const def = MemoryRegistry.getByType(memory.type);
+  const memoryDiags = useDiagnosticsStore((s) => s.byMemoryId[memory.id]);
+
+  // Label doubles as the LLM tool identifier for memory files and must be unique
+  // per agent. Surfaced inline below the title (mirrors the old name check).
+  const isDuplicateLabel =
+    memory.type === "MemoryFile" &&
+    memory.label.trim() !== "" &&
+    Object.values(allMemory).some((m) => m.id !== memory.id && m.type === "MemoryFile" && m.label === memory.label);
+  const isEmptyLabel = memory.label.trim() === "";
+
+  const belowLabel = (
+    <>
+      {isEmptyLabel && <p className="text-xs text-destructive mt-1">{t("memoryLabelRequired", "Label is required")}</p>}
+      {isDuplicateLabel && (
+        <p className="text-xs text-destructive mt-1">{t("memoryLabelDuplicate", "Label must be unique per agent")}</p>
+      )}
+    </>
+  );
+
+  return (
+    <ResourceConfigPanel
+      resetKey={memory.id}
+      label={memory.label}
+      labelTitle={t("memoryLabel", "Memory label")}
+      onLabelChange={(label) => updateMemory(memory.id, { label })}
+      description={def?.description ?? ""}
+      belowLabel={belowLabel}
+      parameters={def?.parameters ?? []}
+      getValue={(p) => memory.arguments[p.id]}
+      allArguments={{ ...memory.arguments }}
+      onParamChange={(paramId, value) => updateMemory(memory.id, { arguments: { [paramId]: value } })}
+      diagnostics={memoryDiags}
+      translationPrefix="memory"
+      deleteLabel={t("deleteMemory", "Delete memory")}
+      onDelete={() => deleteMemory(memory.id)}
+      onClose={onClose}
+    />
+  );
+};

package/src/panels/MemoryPanel.tsx

@@ -1,40 +1,40 @@
-import { useTranslation } from "react-i18next";
-import { Database, FileText } from "lucide-react";
-import type { MemoryType } from "@foresthubai/workflow-core/memory";
-import { useDiagnosticsStore } from "../stores/diagnosticsStore";
-import { useEditorStore } from "../stores/editorStore";
-import { addMemory } from "../utils/memoryOperations";
-import { ResourceListPanel } from "./ResourceListPanel";
-
-/** Short, friendly badge label per memory type (the raw type names are long). */
-const TYPE_BADGE: Record<MemoryType, string> = {
-  MemoryFile: "File",
-  VectorDatabase: "Vector",
-};
-
-export const MemoryPanel = () => {
-  const { t } = useTranslation();
-  const memory = useEditorStore((s) => s.memory);
-  const selection = useEditorStore((s) => s.selection);
-  const selectMemory = useEditorStore((s) => s.selectMemory);
-  const byMemoryId = useDiagnosticsStore((s) => s.byMemoryId);
-
-  const add = (type: MemoryType) => selectMemory(addMemory(type).id);
-
-  return (
-    <ResourceListPanel
-      items={Object.values(memory)}
-      selectedId={selection.kind === "memory" ? selection.id : null}
-      onSelect={selectMemory}
-      diagnosticsSlot={byMemoryId}
-      badge={(m) => TYPE_BADGE[m.type]}
-      emptyIcon={Database}
-      emptyText={t("noMemory", "No memory declared yet")}
-      emptyHint={t("noMemoryHint", "Declare memory files for agents and vector databases for RAG")}
-      addActions={[
-        { label: t("addMemoryFile", "Add Memory File"), icon: FileText, onAdd: () => add("MemoryFile") },
-        { label: t("addVectorDatabase", "Add Vector Database"), icon: Database, onAdd: () => add("VectorDatabase") },
-      ]}
-    />
-  );
-};
+import { useTranslation } from "react-i18next";
+import { Database, FileText } from "lucide-react";
+import type { MemoryType } from "@foresthubai/workflow-core/memory";
+import { useDiagnosticsStore } from "../stores/diagnosticsStore";
+import { useEditorStore } from "../stores/editorStore";
+import { addMemory } from "../utils/memoryOperations";
+import { ResourceListPanel } from "./ResourceListPanel";
+
+/** Short, friendly badge label per memory type (the raw type names are long). */
+const TYPE_BADGE: Record<MemoryType, string> = {
+  MemoryFile: "File",
+  VectorDatabase: "Vector",
+};
+
+export const MemoryPanel = () => {
+  const { t } = useTranslation();
+  const memory = useEditorStore((s) => s.memory);
+  const selection = useEditorStore((s) => s.selection);
+  const selectMemory = useEditorStore((s) => s.selectMemory);
+  const byMemoryId = useDiagnosticsStore((s) => s.byMemoryId);
+
+  const add = (type: MemoryType) => selectMemory(addMemory(type).id);
+
+  return (
+    <ResourceListPanel
+      items={Object.values(memory)}
+      selectedId={selection.kind === "memory" ? selection.id : null}
+      onSelect={selectMemory}
+      diagnosticsSlot={byMemoryId}
+      badge={(m) => TYPE_BADGE[m.type]}
+      emptyIcon={Database}
+      emptyText={t("noMemory", "No memory declared yet")}
+      emptyHint={t("noMemoryHint", "Declare memory files for agents and vector databases for RAG")}
+      addActions={[
+        { label: t("addMemoryFile", "Add Memory File"), icon: FileText, onAdd: () => add("MemoryFile") },
+        { label: t("addVectorDatabase", "Add Vector Database"), icon: Database, onAdd: () => add("VectorDatabase") },
+      ]}
+    />
+  );
+};