feat: add Docker entrypoints, LLM providers, pipeline hardening, workbench pages

Phase 9 — four parallel workstreams:

- Stream A: 14 Docker entrypoints for containerized deployment
- Stream B: Pipeline hardening — robust JSON parsing, LLM retry logic,
  consumer negative-ack, FalkorDB test import fix
- Stream C: Azure OpenAI, OpenAI-compatible, and Mistral LLM providers
- Stream D: Workbench Prompts, Token Cost, Knowledge Cores pages +
  Settings feature switches

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ts/packages/workbench/src/pages/knowledge-cores.tsx

@@ -0,0 +1,244 @@
+import { useCallback, useEffect, useState } from "react";
+import {
+  BrainCircuit,
+  Loader2,
+  RefreshCw,
+  Download,
+  Trash2,
+  AlertTriangle,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useSocket } from "@/providers/socket-provider";
+import { useConnectionState } from "@/providers/socket-provider";
+import { useNotification } from "@/providers/notification-provider";
+import { useSessionStore } from "@/hooks/use-session-store";
+import { Dialog } from "@/components/ui/dialog";
+
+// ---------------------------------------------------------------------------
+// Delete confirmation dialog
+// ---------------------------------------------------------------------------
+
+function DeleteCoreDialog({
+  open,
+  coreId,
+  onClose,
+  onConfirm,
+}: {
+  open: boolean;
+  coreId: string;
+  onClose: () => void;
+  onConfirm: () => void;
+}) {
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      title="Delete Knowledge Core"
+      footer={
+        <>
+          <button
+            onClick={onClose}
+            className="rounded-lg border border-border px-4 py-2 text-sm text-fg-muted hover:bg-surface-200"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={onConfirm}
+            className="rounded-lg bg-error px-4 py-2 text-sm font-medium text-white hover:opacity-90"
+          >
+            Delete
+          </button>
+        </>
+      }
+    >
+      <div className="flex items-start gap-3">
+        <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-error" />
+        <p className="text-sm text-fg-muted">
+          Are you sure you want to delete knowledge core{" "}
+          <span className="font-mono font-medium text-fg">{coreId}</span>?
+          This action cannot be undone.
+        </p>
+      </div>
+    </Dialog>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Knowledge Cores page
+// ---------------------------------------------------------------------------
+
+export default function KnowledgeCoresPage() {
+  const socket = useSocket();
+  const connectionState = useConnectionState();
+  const notify = useNotification();
+  const flowId = useSessionStore((s) => s.flowId);
+
+  const [cores, setCores] = useState<string[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
+  const [actionInProgress, setActionInProgress] = useState<string | null>(null);
+
+  const loadCores = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const ids = await socket.knowledge().getKnowledgeCores();
+      setCores(Array.isArray(ids) ? ids : []);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      setError(msg);
+      console.error("Failed to load knowledge cores:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, [socket]);
+
+  // Auto-load when connected
+  useEffect(() => {
+    const connected =
+      connectionState.status === "connected" ||
+      connectionState.status === "authenticated" ||
+      connectionState.status === "unauthenticated";
+    if (connected) {
+      loadCores();
+    }
+  }, [connectionState.status, loadCores]);
+
+  const handleLoad = useCallback(
+    async (id: string) => {
+      setActionInProgress(id);
+      try {
+        await socket.knowledge().loadKgCore(id, flowId);
+        notify.success("Core loaded", `Knowledge core "${id}" has been loaded.`);
+      } catch (err) {
+        notify.error(
+          "Failed to load core",
+          err instanceof Error ? err.message : String(err),
+        );
+      } finally {
+        setActionInProgress(null);
+      }
+    },
+    [socket, flowId, notify],
+  );
+
+  const handleDelete = useCallback(async () => {
+    if (!deleteTarget) return;
+    setActionInProgress(deleteTarget);
+    try {
+      await socket.knowledge().deleteKgCore(deleteTarget);
+      notify.success("Core deleted", `Knowledge core "${deleteTarget}" has been deleted.`);
+      await loadCores();
+    } catch (err) {
+      notify.error(
+        "Failed to delete core",
+        err instanceof Error ? err.message : String(err),
+      );
+    } finally {
+      setActionInProgress(null);
+      setDeleteTarget(null);
+    }
+  }, [socket, deleteTarget, notify, loadCores]);
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Header */}
+      <div className="mb-6 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <BrainCircuit className="h-6 w-6 text-brand-400" />
+          <h1 className="text-2xl font-bold text-fg">Knowledge Cores</h1>
+          <span className="ml-2 rounded bg-surface-200 px-2 py-0.5 text-xs text-fg-subtle">
+            {cores.length} core{cores.length !== 1 ? "s" : ""}
+          </span>
+        </div>
+
+        <button
+          onClick={loadCores}
+          disabled={loading}
+          className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-sm text-fg-muted transition-colors hover:bg-surface-200 disabled:opacity-40"
+        >
+          <RefreshCw className={cn("h-3.5 w-3.5", loading && "animate-spin")} />
+          Refresh
+        </button>
+      </div>
+
+      {/* Content */}
+      {loading && cores.length === 0 && (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="mr-2 h-5 w-5 animate-spin text-fg-subtle" />
+          <span className="text-fg-subtle">Loading knowledge cores...</span>
+        </div>
+      )}
+
+      {error && (
+        <p className="mb-4 rounded-lg bg-error/10 px-4 py-2 text-sm text-error">
+          {error}
+        </p>
+      )}
+
+      {!loading && !error && cores.length === 0 && (
+        <div className="flex flex-1 flex-col items-center justify-center">
+          <BrainCircuit className="mb-3 h-10 w-10 text-fg-subtle opacity-30" />
+          <p className="text-fg-subtle">No knowledge cores available.</p>
+        </div>
+      )}
+
+      {cores.length > 0 && (
+        <div className="overflow-x-auto rounded-lg border border-border">
+          <table className="w-full text-left text-sm">
+            <thead className="border-b border-border bg-surface-100 text-fg-muted">
+              <tr>
+                <th className="px-4 py-3 font-medium">Core ID</th>
+                <th className="px-4 py-3 font-medium text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-border">
+              {cores.map((id) => (
+                <tr key={id} className="hover:bg-surface-100/50">
+                  <td className="px-4 py-3">
+                    <span className="font-mono text-sm text-fg">{id}</span>
+                  </td>
+                  <td className="px-4 py-3 text-right">
+                    <div className="flex items-center justify-end gap-1">
+                      <button
+                        onClick={() => handleLoad(id)}
+                        disabled={actionInProgress === id}
+                        className="flex items-center gap-1.5 rounded px-2.5 py-1.5 text-xs font-medium text-brand-400 hover:bg-brand-600/10 disabled:opacity-40"
+                        title="Load core"
+                      >
+                        {actionInProgress === id ? (
+                          <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                        ) : (
+                          <Download className="h-3.5 w-3.5" />
+                        )}
+                        Load
+                      </button>
+                      <button
+                        onClick={() => setDeleteTarget(id)}
+                        disabled={actionInProgress === id}
+                        className="flex items-center gap-1.5 rounded px-2.5 py-1.5 text-xs font-medium text-error hover:bg-error/10 disabled:opacity-40"
+                        title="Delete core"
+                      >
+                        <Trash2 className="h-3.5 w-3.5" />
+                        Delete
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {/* Delete confirmation dialog */}
+      <DeleteCoreDialog
+        open={deleteTarget != null}
+        coreId={deleteTarget ?? ""}
+        onClose={() => setDeleteTarget(null)}
+        onConfirm={handleDelete}
+      />
+    </div>
+  );
+}

ts/packages/workbench/src/pages/prompts.tsx

@@ -0,0 +1,215 @@
+import { useCallback, useState } from "react";
+import {
+  MessageCircleCode,
+  Loader2,
+  RefreshCw,
+  ChevronRight,
+  X,
+  FileText,
+  Terminal,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { usePrompts } from "@/hooks/use-prompts";
+
+// ---------------------------------------------------------------------------
+// Prompts page
+// ---------------------------------------------------------------------------
+
+type Tab = "templates" | "system";
+
+export default function PromptsPage() {
+  const { prompts, systemPrompt, loading, loadPrompts, loadSystemPrompt, getPrompt } = usePrompts();
+
+  const [activeTab, setActiveTab] = useState<Tab>("templates");
+  const [selectedPromptId, setSelectedPromptId] = useState<string | null>(null);
+  const [promptDetail, setPromptDetail] = useState<string>("");
+  const [loadingDetail, setLoadingDetail] = useState(false);
+
+  const handleSelectPrompt = useCallback(
+    async (id: string) => {
+      setSelectedPromptId(id);
+      setLoadingDetail(true);
+      try {
+        const detail = await getPrompt(id);
+        setPromptDetail(
+          typeof detail === "string" ? detail : JSON.stringify(detail, null, 2),
+        );
+      } catch (err) {
+        console.error("Failed to load prompt detail:", err);
+        setPromptDetail("Error loading prompt.");
+      } finally {
+        setLoadingDetail(false);
+      }
+    },
+    [getPrompt],
+  );
+
+  const handleRefresh = useCallback(() => {
+    loadPrompts();
+    loadSystemPrompt();
+  }, [loadPrompts, loadSystemPrompt]);
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Header */}
+      <div className="mb-6 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <MessageCircleCode className="h-6 w-6 text-brand-400" />
+          <h1 className="text-2xl font-bold text-fg">Prompts</h1>
+        </div>
+
+        <button
+          onClick={handleRefresh}
+          disabled={loading}
+          className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-sm text-fg-muted transition-colors hover:bg-surface-200 disabled:opacity-40"
+        >
+          <RefreshCw className={cn("h-3.5 w-3.5", loading && "animate-spin")} />
+          Refresh
+        </button>
+      </div>
+
+      {/* Tabs */}
+      <div className="mb-4 flex gap-1 rounded-lg bg-surface-100 p-1">
+        <button
+          onClick={() => setActiveTab("templates")}
+          className={cn(
+            "flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors",
+            activeTab === "templates"
+              ? "bg-surface-50 text-fg shadow-sm"
+              : "text-fg-muted hover:text-fg",
+          )}
+        >
+          <FileText className="h-3.5 w-3.5" />
+          Templates
+        </button>
+        <button
+          onClick={() => setActiveTab("system")}
+          className={cn(
+            "flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors",
+            activeTab === "system"
+              ? "bg-surface-50 text-fg shadow-sm"
+              : "text-fg-muted hover:text-fg",
+          )}
+        >
+          <Terminal className="h-3.5 w-3.5" />
+          System Prompt
+        </button>
+      </div>
+
+      {/* Templates tab */}
+      {activeTab === "templates" && (
+        <div className="flex flex-1 flex-col gap-4 overflow-hidden">
+          {loading && prompts.length === 0 && (
+            <div className="flex items-center justify-center py-12">
+              <Loader2 className="mr-2 h-5 w-5 animate-spin text-fg-subtle" />
+              <span className="text-fg-subtle">Loading prompts...</span>
+            </div>
+          )}
+
+          {!loading && prompts.length === 0 && (
+            <div className="flex flex-1 flex-col items-center justify-center">
+              <FileText className="mb-3 h-10 w-10 text-fg-subtle opacity-30" />
+              <p className="text-fg-subtle">No prompt templates found.</p>
+            </div>
+          )}
+
+          {prompts.length > 0 && (
+            <div className="flex flex-1 gap-4 overflow-hidden">
+              {/* Prompt list */}
+              <div className="w-80 shrink-0 overflow-y-auto rounded-lg border border-border">
+                <div className="border-b border-border bg-surface-100 px-4 py-3">
+                  <h3 className="text-xs font-medium uppercase tracking-wider text-fg-muted">
+                    Templates ({prompts.length})
+                  </h3>
+                </div>
+                <div className="divide-y divide-border">
+                  {prompts.map((p) => {
+                    const id = p.id ?? (p as Record<string, unknown>).name ?? String(p);
+                    return (
+                      <button
+                        key={String(id)}
+                        onClick={() => handleSelectPrompt(String(id))}
+                        className={cn(
+                          "flex w-full items-center justify-between px-4 py-3 text-left text-sm transition-colors",
+                          selectedPromptId === String(id)
+                            ? "bg-brand-600/10 text-brand-400"
+                            : "text-fg hover:bg-surface-100",
+                        )}
+                      >
+                        <span className="truncate font-mono text-xs">{String(id)}</span>
+                        <ChevronRight className="h-3.5 w-3.5 shrink-0 text-fg-subtle" />
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+
+              {/* Prompt detail */}
+              <div className="flex flex-1 flex-col overflow-hidden rounded-lg border border-border">
+                {selectedPromptId ? (
+                  <>
+                    <div className="flex items-center justify-between border-b border-border bg-surface-100 px-4 py-3">
+                      <h3 className="text-sm font-medium text-fg">
+                        <span className="font-mono">{selectedPromptId}</span>
+                      </h3>
+                      <button
+                        onClick={() => {
+                          setSelectedPromptId(null);
+                          setPromptDetail("");
+                        }}
+                        className="rounded-md p-1 text-fg-subtle hover:bg-surface-200 hover:text-fg"
+                      >
+                        <X className="h-4 w-4" />
+                      </button>
+                    </div>
+                    <div className="flex-1 overflow-y-auto p-4">
+                      {loadingDetail ? (
+                        <div className="flex items-center gap-2 py-4 text-fg-subtle">
+                          <Loader2 className="h-4 w-4 animate-spin" />
+                          Loading...
+                        </div>
+                      ) : (
+                        <pre className="whitespace-pre-wrap font-mono text-xs text-fg-muted">
+                          {promptDetail}
+                        </pre>
+                      )}
+                    </div>
+                  </>
+                ) : (
+                  <div className="flex flex-1 items-center justify-center text-fg-subtle">
+                    Select a template to view its contents.
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* System Prompt tab */}
+      {activeTab === "system" && (
+        <div className="flex flex-1 flex-col overflow-hidden rounded-lg border border-border">
+          <div className="border-b border-border bg-surface-100 px-4 py-3">
+            <h3 className="text-xs font-medium uppercase tracking-wider text-fg-muted">
+              System Prompt
+            </h3>
+          </div>
+          <div className="flex-1 overflow-y-auto p-4">
+            {loading ? (
+              <div className="flex items-center gap-2 py-4 text-fg-subtle">
+                <Loader2 className="h-4 w-4 animate-spin" />
+                Loading...
+              </div>
+            ) : systemPrompt ? (
+              <pre className="whitespace-pre-wrap font-mono text-xs text-fg-muted">
+                {systemPrompt}
+              </pre>
+            ) : (
+              <p className="text-sm text-fg-subtle">No system prompt configured.</p>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

ts/packages/workbench/src/pages/settings.tsx

@@ -51,7 +51,7 @@ function Section({
 // ---------------------------------------------------------------------------
 
 export default function SettingsPage() {
-  const { settings, updateSetting } = useSettings();
+  const { settings, updateSetting, updateFeatureSwitches } = useSettings();
   const connectionState = useConnectionState();
   const socket = useSocket();
   const { flows } = useFlows();
@@ -318,6 +318,32 @@ export default function SettingsPage() {
           </div>
         </Section>
 
+        {/* Feature Switches */}
+        <Section
+          title="Feature Switches"
+          icon={<SettingsIcon className="h-4 w-4 text-fg-subtle" />}
+        >
+          {Object.entries(settings.featureSwitches).map(([key, enabled]) => (
+            <div key={key} className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-fg capitalize">{key.replace(/([A-Z])/g, " $1").trim()}</p>
+              </div>
+              <button
+                onClick={() => updateFeatureSwitches({ [key]: !enabled })}
+                className={cn(
+                  "relative inline-flex h-6 w-11 items-center rounded-full transition-colors",
+                  enabled ? "bg-brand-600" : "bg-surface-300",
+                )}
+              >
+                <span className={cn(
+                  "inline-block h-4 w-4 rounded-full bg-white transition-transform",
+                  enabled ? "translate-x-6" : "translate-x-1",
+                )} />
+              </button>
+            </div>
+          ))}
+        </Section>
+
         {/* About */}
         <Section
           title="About"

ts/packages/workbench/src/pages/token-cost.tsx

@@ -0,0 +1,140 @@
+import { useCallback, useEffect, useState } from "react";
+import { Coins, Loader2, RefreshCw } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useSocket } from "@/providers/socket-provider";
+import { useConnectionState } from "@/providers/socket-provider";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface TokenCost {
+  model: string;
+  input_price: number;
+  output_price: number;
+}
+
+// ---------------------------------------------------------------------------
+// Token Cost page
+// ---------------------------------------------------------------------------
+
+export default function TokenCostPage() {
+  const socket = useSocket();
+  const connectionState = useConnectionState();
+  const [costs, setCosts] = useState<TokenCost[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadCosts = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await socket.config().getTokenCosts();
+      setCosts(
+        Array.isArray(data)
+          ? data.map((d: Record<string, unknown>) => ({
+              model: String(d.model ?? ""),
+              input_price: Number(d.input_price ?? 0),
+              output_price: Number(d.output_price ?? 0),
+            }))
+          : [],
+      );
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      setError(msg);
+      console.error("Failed to load token costs:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, [socket]);
+
+  // Auto-load when connected
+  useEffect(() => {
+    const connected =
+      connectionState.status === "connected" ||
+      connectionState.status === "authenticated" ||
+      connectionState.status === "unauthenticated";
+    if (connected) {
+      loadCosts();
+    }
+  }, [connectionState.status, loadCosts]);
+
+  const formatPrice = (price: number) => {
+    if (price == null) return "--";
+    return `$${price.toFixed(2)}`;
+  };
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Header */}
+      <div className="mb-6 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <Coins className="h-6 w-6 text-brand-400" />
+          <h1 className="text-2xl font-bold text-fg">Token Cost</h1>
+          <span className="ml-2 rounded bg-surface-200 px-2 py-0.5 text-xs text-fg-subtle">
+            {costs.length} model{costs.length !== 1 ? "s" : ""}
+          </span>
+        </div>
+
+        <button
+          onClick={loadCosts}
+          disabled={loading}
+          className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-sm text-fg-muted transition-colors hover:bg-surface-200 disabled:opacity-40"
+        >
+          <RefreshCw className={cn("h-3.5 w-3.5", loading && "animate-spin")} />
+          Refresh
+        </button>
+      </div>
+
+      {/* Content */}
+      {loading && costs.length === 0 && (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="mr-2 h-5 w-5 animate-spin text-fg-subtle" />
+          <span className="text-fg-subtle">Loading token costs...</span>
+        </div>
+      )}
+
+      {error && (
+        <p className="mb-4 rounded-lg bg-error/10 px-4 py-2 text-sm text-error">
+          {error}
+        </p>
+      )}
+
+      {!loading && !error && costs.length === 0 && (
+        <div className="flex flex-1 flex-col items-center justify-center">
+          <Coins className="mb-3 h-10 w-10 text-fg-subtle opacity-30" />
+          <p className="text-fg-subtle">No token cost data available.</p>
+        </div>
+      )}
+
+      {costs.length > 0 && (
+        <div className="overflow-x-auto rounded-lg border border-border">
+          <table className="w-full text-left text-sm">
+            <thead className="border-b border-border bg-surface-100 text-fg-muted">
+              <tr>
+                <th className="px-4 py-3 font-medium">Model</th>
+                <th className="px-4 py-3 font-medium text-right">Input Price ($/1M tokens)</th>
+                <th className="px-4 py-3 font-medium text-right">Output Price ($/1M tokens)</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-border">
+              {costs.map((cost) => (
+                <tr key={cost.model} className="hover:bg-surface-100/50">
+                  <td className="px-4 py-3">
+                    <span className="font-mono text-sm text-fg">{cost.model}</span>
+                  </td>
+                  <td className="px-4 py-3 text-right text-fg-muted">
+                    {formatPrice(cost.input_price)}
+                  </td>
+                  <td className="px-4 py-3 text-right text-fg-muted">
+                    {formatPrice(cost.output_price)}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}