@foresthubai/workflow-builder 0.3.0

package/src/panels/MemoryConfigPanel.tsx

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

package/src/panels/MemoryPanel.tsx

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

package/src/panels/ModelConfigPanel.tsx

@@ -0,0 +1,41 @@
+import { useTranslation } from "react-i18next";
+import { ModelRegistry, type Model } from "@foresthubai/workflow-core/model";
+import { useDiagnosticsStore } from "../stores/diagnosticsStore";
+import { deleteModel, updateModel } from "../utils/modelOperations";
+import { ResourceConfigPanel } from "./ResourceConfigPanel";
+
+interface ModelConfigPanelProps {
+  model: Model;
+  onClose: () => void;
+}
+
+export const ModelConfigPanel = ({ model, onClose }: ModelConfigPanelProps) => {
+  const { t } = useTranslation();
+  const def = ModelRegistry.getByType(model.type);
+  const modelDiags = useDiagnosticsStore((s) => s.byModelId[model.id]);
+  const isEmptyLabel = model.label.trim() === "";
+
+  return (
+    <ResourceConfigPanel
+      resetKey={model.id}
+      label={model.label}
+      labelTitle={t("modelLabel", "Model label")}
+      onLabelChange={(label) => updateModel(model.id, { label })}
+      description={def?.description ?? t("modelCustomDescription", "Custom model mapped to a provider at deploy")}
+      belowLabel={
+        isEmptyLabel ? (
+          <p className="text-xs text-destructive mt-1">{t("modelLabelRequired", "Label is required")}</p>
+        ) : undefined
+      }
+      parameters={def?.parameters ?? []}
+      getValue={(p) => model.arguments[p.id]}
+      allArguments={{ ...model.arguments }}
+      onParamChange={(paramId, value) => updateModel(model.id, { arguments: { [paramId]: value } })}
+      diagnostics={modelDiags}
+      translationPrefix="models"
+      deleteLabel={t("deleteModel", "Delete model")}
+      onDelete={() => deleteModel(model.id)}
+      onClose={onClose}
+    />
+  );
+};

package/src/panels/ModelsPanel.tsx

@@ -0,0 +1,36 @@
+import { useTranslation } from "react-i18next";
+import { BrainCircuit, Plus } from "lucide-react";
+import { useDiagnosticsStore } from "../stores/diagnosticsStore";
+import { useEditorStore } from "../stores/editorStore";
+import { addModel } from "../utils/modelOperations";
+import { ResourceListPanel } from "./ResourceListPanel";
+
+/**
+ * Lists DECLARED custom/self-hosted models. The static catalog (built-in models
+ * the llmproxy supports) is not shown here — those are always available as
+ * picker options on agent nodes and need no declaration. This tab only manages
+ * the custom models that get mapped to llmproxy providers at deploy.
+ */
+export const ModelsPanel = () => {
+  const { t } = useTranslation();
+  const models = useEditorStore((s) => s.models);
+  const selection = useEditorStore((s) => s.selection);
+  const selectModel = useEditorStore((s) => s.selectModel);
+  const byModelId = useDiagnosticsStore((s) => s.byModelId);
+
+  return (
+    <ResourceListPanel
+      items={Object.values(models)}
+      selectedId={selection.kind === "model" ? selection.id : null}
+      onSelect={selectModel}
+      diagnosticsSlot={byModelId}
+      badge={() => t("modelLLMBadge", "LLM")}
+      emptyIcon={BrainCircuit}
+      emptyText={t("noModels", "No custom models yet")}
+      emptyHint={t("noModelsHint", "Built-in models are always available. Declare custom or self-hosted models here.")}
+      addActions={[
+        { label: t("addCustomModel", "Add Custom Model"), icon: Plus, onAdd: () => selectModel(addModel("LLMModel").id) },
+      ]}
+    />
+  );
+};