+ ` : null; + + return ( +

+ + setEnabled((v) => !v)} role="switch" aria-checked={enabled} /> + Enable the embeddable widget + +

+ Workflow + +

Which workflow the widget runs.

+ Allowed origins +

setOrigins(e.target.value)} placeholder={"https://yoursite.com\nhttps://app.yoursite.com"} style={{ minHeight: 70, fontSize: 12 }} spellCheck={false} />
+            <div className="field-help">Sites permitted to embed the widget, one per line. Empty = only this Forge origin (external embedding blocked). Enforced via the page's frame-ancestors policy.</div>
+          </div>
+          <div className="row gap2" style={{ alignItems: "center" }}>
+            <button className="btn btn-primary btn-sm" onClick={save} disabled={saving}>
+              <Icon name={saving ? "refresh" : "check"} size={14} style={saving ? { animation: "spin 1s linear infinite" } : {}} />
+              {saving ? "Saving…" : "Save"}
+            </button>
+            {status && <span className="t-caption" style={{ color: status.includes("fail") ? "var(--err)" : "var(--ok)" }}>{status}</span>}
+          </div>
+        </div>
+
+        {launcherSnippet ? (
+          <div className="card col gap3" style={{ padding: 18 }}>
+            <div>
+              <div className="t-h3">Floating chat bubble (recommended)</div>
+              <div className="field-help">Paste once before <span className="mono-sm"></body></span>. Adds a launcher button that opens the chat.</div>
+            </div>
+            <pre className="mono-sm" style={{ background: "var(--bg-3)", padding: 12, borderRadius: 8, overflowX: "auto", whiteSpace: "pre-wrap" }}>{launcherSnippet}</pre>
+            <div className="row gap2">
+              <button className="btn btn-primary btn-sm" onClick={() => navigator.clipboard?.writeText(launcherSnippet)}>Copy bubble snippet</button>
+              <a className="btn btn-ghost btn-sm" href={src!} target="_blank" rel="noreferrer">Open widget</a>
+            </div>
+            <div className="t-h3" style={{ marginTop: 6 }}>Inline iframe (advanced)</div>
+            <pre className="mono-sm" style={{ background: "var(--bg-3)", padding: 12, borderRadius: 8, overflowX: "auto", whiteSpace: "pre-wrap" }}>{iframeSnippet}</pre>
+            <button className="btn btn-secondary btn-sm" style={{ alignSelf: "flex-start" }} onClick={() => navigator.clipboard?.writeText(iframeSnippet!)}>Copy iframe</button>
+            <div className="field-help">
+              Publishable key: <span className="mono-sm">{pubKey}</span>. For logged-in users, have your backend mint a session token (POST /v1/projects/{project?.id}/session-tokens) and add <span className="mono-sm">data-forge-token="…"</span> (bubble) or <span className="mono-sm">&session_token=…</span> (iframe) so the agent knows who is chatting and can honor their entitlements.
+            </div>
+          </div>
+        ) : (
+          <div className="fg-2 t-body-sm">Enable and save to get a publishable key + embed snippet.</div>
+        )}
+    </div>
+  );
+}
+
+/* Standalone screen (kept for direct/deep-link navigation): page chrome + the panel. */
+export function EmbedScreen({ project }: { project: any }) {
+  return (
+    <div className="scroll-y" style={{ flex: 1, padding: "24px 28px" }}>
+      <div style={{ maxWidth: 960, margin: "0 auto" }} className="col gap4">
+        <div className="row gap2">
+          <div>
+            <div className="t-display">Embed</div>
+            <div className="fg-1" style={{ marginTop: 3 }}>Drop this project's chatbot into any website as a widget.</div>
+          </div>
+        </div>
+        <EmbedPanel project={project} />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/screens/home.tsx b/apps/web/components/screens/home.tsx
new file mode 100644
index 0000000..5dceeeb
--- /dev/null
+++ b/apps/web/components/screens/home.tsx
@@ -0,0 +1,261 @@
+"use client";
+/* Forge home screens: Dashboard, Project Overview, Onboarding wizard. */
+import { useState } from "react";
+import { Icon } from "../icons";
+import { Sparkline, StatusPill, Tile, Field, Toggle, EmptyState } from "../primitives";
+import { DashboardStats } from "@/lib/api";
+import { fmtUSD } from "@/lib/data";
+
+const fmtLatencyMs = (ms: number) => (ms >= 1000 ? `${(ms / 1000).toFixed(1)}s` : `${ms}ms`);
+
+export interface ProjectCard {
+  id: string; name: string; slug: string; status: string;
+  workflows: number; tools: number; runs7d: number; spark: number[]; edited: string;
+}
+
+/* ============ DASHBOARD ============ */
+export function DashboardScreen({
+  projects = [],
+  loaded = false,
+  stats = null,
+  onOpenProject,
+  onNewProject,
+  onDeleteProject,
+}: {
+  projects?: ProjectCard[];
+  loaded?: boolean;
+  // Fetched once by the parent (App) and shared - avoids a second /stats/dashboard call.
+  stats?: DashboardStats | null;
+  onOpenProject: (id: string) => void;
+  onNewProject: () => void;
+  onDeleteProject?: (project: { id: string; name: string }) => Promise<void> | void;
+}) {
+  const empty = loaded && projects.length === 0;
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+
+  const fmtLatency = (ms: number) => (ms >= 1000 ? `${(ms / 1000).toFixed(1)}s` : `${ms}ms`);
+  const kpis = [
+    { label: "Runs · 7 days", value: stats ? stats.runs_7d.toLocaleString() : "-", sub: stats ? `${stats.total_runs.toLocaleString()} all-time` : "" },
+    { label: "Success rate", value: stats && stats.runs_7d ? `${stats.success_rate}%` : "-", sub: "completed runs" },
+    { label: "Avg latency", value: stats && stats.runs_7d ? fmtLatency(stats.avg_latency_ms) : "-", sub: "per run" },
+    { label: "Spend · 7 days", value: stats ? fmtUSD(stats.spend_7d) : "-", sub: "tracked cost" },
+  ];
+  return (
+    <div className="scroll-y" style={{ flex: 1, padding: "28px 32px" }}>
+      <div className="fade-up" style={{ maxWidth: 1600, margin: "0 auto" }}>
+        <div className="row spread" style={{ marginBottom: 22, alignItems: "flex-end" }}>
+          <div>
+            <div className="t-display-lg">Welcome to Forge</div>
+            <div className="fg-1" style={{ marginTop: 4 }}>Self-hosted agent platform · {projects.length} project{projects.length === 1 ? "" : "s"}</div>
+          </div>
+          <div className="row gap2">
+            <button className="btn btn-primary" onClick={onNewProject}><Icon name="plus" size={15} />New project</button>
+          </div>
+        </div>
+
+        {empty ? (
+          <div className="card" style={{ padding: 8 }}>
+            <EmptyState
+              icon="layers"
+              title="Forge your first project"
+              sub="A project is a workspace for agents, tools, knowledge, and workflows. Create one to begin building."
+              action={<button className="btn btn-primary btn-lg" onClick={onNewProject} style={{ marginTop: 6 }}><Icon name="plus" size={16} />New project</button>}
+            />
+          </div>
+        ) : !loaded ? (
+          <div className="fg-2" style={{ padding: 40, textAlign: "center" }}>Loading…</div>
+        ) : (
+          <>
+            <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 16, marginBottom: 24 }}>
+              {kpis.map((k, i) => (
+                <div key={i} className="card" style={{ padding: 16 }}>
+                  <div className="t-micro" style={{ marginBottom: 8 }}>{k.label}</div>
+                  <div className="t-display" style={{ fontSize: 26 }}>{k.value}</div>
+                  <div className="fg-2 t-caption" style={{ marginTop: 2 }}>{k.sub}</div>
+                </div>
+              ))}
+            </div>
+            <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 20 }}>
+              <div>
+                <div className="row spread" style={{ marginBottom: 12 }}>
+                  <div className="t-h1">Projects</div>
+                </div>
+                <div className="col gap3">
+                  {projects.map((p) => (
+                    <div key={p.id} className="card card-hover" style={{ padding: 14 }} onClick={() => onOpenProject(p.id)}>
+                      <div className="row gap3">
+                        <Tile icon="layers" color={p.status === "draft" ? "var(--fg-2)" : "var(--accent)"} size={40} />
+                        <div className="grow" style={{ minWidth: 0 }}>
+                          <div className="row gap2"><span className="t-h2">{p.name}</span><StatusPill status={p.status} /></div>
+                          <div className="fg-2 t-caption row gap3" style={{ marginTop: 3 }}>
+                            <span>{p.workflows} workflows</span><span>{p.tools} tools</span><span>edited {p.edited}</span>
+                          </div>
+                        </div>
+                        <div className="col" style={{ alignItems: "flex-end", gap: 4 }}>
+                          <Sparkline data={p.spark} w={92} h={26} color="var(--accent)" />
+                          <div className="fg-2 t-caption">{p.runs7d.toLocaleString()} runs / 7d</div>
+                        </div>
+                        {onDeleteProject && (
+                          <button
+                            className="iconbtn"
+                            title="Delete project"
+                            disabled={deletingId === p.id}
+                            onClick={async (e) => {
+                              e.stopPropagation();
+                              setDeletingId(p.id);
+                              try { await onDeleteProject({ id: p.id, name: p.name }); }
+                              finally { setDeletingId(null); }
+                            }}
+                          >
+                            <Icon name="trash" size={15} />
+                          </button>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div>
+                <div className="row spread" style={{ marginBottom: 12 }}>
+                  <div className="t-h1">Recent runs</div>
+                  <span className="pill pill-muted" style={{ height: 18 }}>live</span>
+                </div>
+                <div className="card" style={{ overflow: "hidden" }}>
+                  {(stats?.recent || []).map((r, i, arr) => (
+                    <div key={r.id} className="row gap3" style={{ padding: "11px 14px", borderBottom: i < arr.length - 1 ? "1px solid var(--line)" : "none" }}>
+                      <div className="grow" style={{ minWidth: 0 }}>
+                        <div className="truncate" style={{ fontSize: 13, fontWeight: 600 }}>{r.workflow}</div>
+                        <div className="fg-2 t-caption truncate">{r.project} · {r.status}</div>
+                      </div>
+                      <div className="col" style={{ alignItems: "flex-end" }}>
+                        <div className="mono-sm" style={{ color: "var(--fg-1)" }}>{r.tokens.toLocaleString()} tok</div>
+                        <div className="fg-2 t-caption">{r.latency_ms}ms{r.started_at ? " · " + r.started_at.slice(11, 16) : ""}</div>
+                      </div>
+                    </div>
+                  ))}
+                  {(!stats || stats.recent.length === 0) && (
+                    <div className="fg-2 t-caption" style={{ padding: 22, textAlign: "center" }}>No runs yet. Run a workflow in the Playground.</div>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* All-time usage by project (incl. Forge Assistant share) */}
+            <div className="row spread" style={{ margin: "26px 0 12px" }}>
+              <div className="t-h1">Reports</div>
+            </div>
+            <div className="card" style={{ overflow: "hidden" }}>
+              <table className="tbl">
+                <thead><tr><th>Project</th><th>Runs</th><th>Tokens</th><th>Avg latency</th><th>Assistant</th><th>Total cost</th></tr></thead>
+                <tbody>
+                  {(stats?.reports || []).map((r, i) => (
+                    <tr key={i}>
+                      <td>
+                        <div className="row gap2">
+                          <Tile icon="layers" color="var(--accent)" size={24} />
+                          <span style={{ fontWeight: 600, fontSize: 13 }}>{r.project}</span>
+                        </div>
+                      </td>
+                      <td className="mono-sm">{r.runs.toLocaleString()}</td>
+                      <td className="mono-sm">{r.tokens.toLocaleString()}</td>
+                      <td className="mono-sm">{fmtLatencyMs(r.avg_latency_ms)}</td>
+                      <td className="mono-sm">{r.assistant_turns ? `${fmtUSD(r.assistant_cost_usd)} · ${r.assistant_turns} turns` : "-"}</td>
+                      <td className="mono-sm">{fmtUSD(r.cost_usd)}</td>
+                    </tr>
+                  ))}
+                  {(!stats || !stats.reports?.length) && <tr><td colSpan={6}><div className="fg-2 t-caption" style={{ padding: 22, textAlign: "center" }}>No usage yet.</div></td></tr>}
+                </tbody>
+              </table>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/* ============ ONBOARDING WIZARD ============ */
+export function OnboardingScreen({ onCreate, onCancel }: { onCreate: (p: { name: string; template: string; keys: Record<string, string> }) => void; onCancel: () => void }) {
+  const [step, setStep] = useState(0);
+  const [name, setName] = useState("");
+  const [tmpl, setTmpl] = useState("blank");
+  const [busy, setBusy] = useState(false);
+  const [models, setModels] = useState<Record<string, boolean>>({ anthropic: true, openai: false, google: false });
+  const [keys, setKeys] = useState<Record<string, string>>({});
+  const provId: Record<string, string> = { anthropic: "anthropic", openai: "openai", google: "google_genai" };
+  const steps = ["Project", "Models", "Create"];
+  const templates = [
+    { id: "blank", name: "Blank canvas", desc: "Start from an empty graph", icon: "workflows" },
+    { id: "support", name: "Support agent", desc: "Router → agent → tools → HITL", icon: "agents" },
+    { id: "rag", name: "RAG Q&A", desc: "Retrieval + grounded answers", icon: "knowledge" },
+    { id: "mcp", name: "MCP toolbox", desc: "Expose tools over MCP", icon: "connect" },
+  ];
+  return (
+    <div className="col center" style={{ flex: 1, padding: 24, background: "var(--bg-0)" }}>
+      <div className="card fade-up" style={{ width: 640, maxWidth: "94vw", overflow: "hidden" }}>
+        <div style={{ padding: "18px 22px", borderBottom: "1px solid var(--line)" }}>
+          <div className="row spread" style={{ marginBottom: 14 }}>
+            <div className="t-h1">New project</div>
+            <button className="iconbtn" onClick={onCancel}><Icon name="x" size={17} /></button>
+          </div>
+          <div className="row gap2">
+            {steps.map((s, i) => (
+              <div key={i} className="row gap2 grow">
+                <div style={{ width: 22, height: 22, borderRadius: "50%", flex: "none", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 700, fontFamily: "var(--font-mono)", background: i < step ? "var(--accent)" : i === step ? "var(--accent-glow)" : "var(--bg-3)", color: i < step ? "var(--fg-on-accent)" : i === step ? "var(--accent)" : "var(--fg-2)", border: i === step ? "1px solid var(--accent)" : "none" }}>
+                  {i < step ? <Icon name="check" size={13} /> : i + 1}
+                </div>
+                <span style={{ fontSize: 12.5, fontWeight: 600, color: i <= step ? "var(--fg-0)" : "var(--fg-2)" }}>{s}</span>
+                {i < steps.length - 1 && <div className="grow" style={{ height: 1, background: i < step ? "var(--accent)" : "var(--line)" }} />}
+              </div>
+            ))}
+          </div>
+        </div>
+        <div style={{ padding: 22, minHeight: 280 }}>
+          {step === 0 && (
+            <div className="fade-in">
+              <Field label="Project name" help="A workspace for related workflows, tools, and knowledge." required>
+                <input className="input" autoFocus value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Customer Support" />
+              </Field>
+              <div className="field-label">Start from</div>
+              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginTop: 6 }}>
+                {templates.map((t) => (
+                  <button key={t.id} onClick={() => setTmpl(t.id)} style={{ textAlign: "left", padding: 12, borderRadius: 10, cursor: "pointer", background: "var(--bg-1)", border: "1px solid " + (tmpl === t.id ? "var(--accent)" : "var(--line)"), boxShadow: tmpl === t.id ? "0 0 0 3px var(--accent-glow)" : "none" }}>
+                    <div className="row gap2" style={{ marginBottom: 6 }}><Tile icon={t.icon} color="var(--accent)" size={28} />{tmpl === t.id && <Icon name="check" size={16} style={{ color: "var(--accent)", marginLeft: "auto" }} />}</div>
+                    <div style={{ fontWeight: 600, fontSize: 13 }}>{t.name}</div>
+                    <div className="fg-2 t-caption" style={{ marginTop: 2 }}>{t.desc}</div>
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+          {step === 1 && (
+            <div className="fade-in">
+              <div className="fg-1" style={{ marginBottom: 14 }}>Connect at least one model provider. Keys are stored encrypted in your secret store - they never leave your instance.</div>
+              {[["anthropic", "Anthropic", "claude-sonnet-4-6, haiku-4-2"], ["openai", "OpenAI", "gpt-5.4, gpt-5.4-mini"], ["google", "Google", "gemini-3.1-pro, 3.5-flash"]].map((p) => (
+                <div key={p[0]} className="row gap3" style={{ padding: "12px 14px", borderRadius: 10, border: "1px solid var(--line)", marginBottom: 10 }}>
+                  <Tile icon="n_llm" color="var(--fg-2)" size={32} />
+                  <div className="grow"><div style={{ fontWeight: 600 }}>{p[1]}</div><div className="fg-2 t-caption">{p[2]}</div></div>
+                  {models[p[0]] && <input className="input mono" style={{ width: 200 }} type="password" placeholder="sk-… (optional, encrypted)" value={keys[provId[p[0]]] || ""} onChange={(e) => setKeys((k) => ({ ...k, [provId[p[0]]]: e.target.value }))} />}
+                  <Toggle on={models[p[0]]} onChange={(v) => setModels((m) => ({ ...m, [p[0]]: v }))} />
+                </div>
+              ))}
+            </div>
+          )}
+          {step === 2 && (
+            <div className="fade-in col center" style={{ textAlign: "center", gap: 10, paddingTop: 16 }}>
+              <Tile icon="check" color="var(--ok)" size={52} glow />
+              <div className="t-h1">Create “{name || "Untitled"}”</div>
+              <div className="fg-1" style={{ maxWidth: 380 }}>We’ll create an empty project so you can register tools, add knowledge, and build your first workflow from scratch.</div>
+            </div>
+          )}
+        </div>
+        <div className="row spread" style={{ padding: "14px 22px", borderTop: "1px solid var(--line)" }}>
+          <button className="btn btn-ghost" onClick={() => (step === 0 ? onCancel() : setStep(step - 1))}>{step === 0 ? "Cancel" : "Back"}</button>
+          <button className="btn btn-primary" disabled={(step === 0 && !name) || busy} onClick={() => { if (step < 2) { setStep(step + 1); } else { setBusy(true); onCreate({ name, template: tmpl, keys }); } }}>
+            {step < 2 ? "Continue" : busy ? "Creating…" : "Create project"}<Icon name="chevright" size={15} />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/screens/knowledge.tsx b/apps/web/components/screens/knowledge.tsx
new file mode 100644
index 0000000..fa9441d
--- /dev/null
+++ b/apps/web/components/screens/knowledge.tsx
@@ -0,0 +1,714 @@
+"use client";
+/* Knowledge: vertical-tab layout - Files (sources organized in folders), Q&A pairs
+   (free-form kinds/categories + tags), and the search debugger. */
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Icon } from "../icons";
+import { Drawer, Field, Modal, Segmented, StatusPill } from "../primitives";
+import { api, ActivityEntry, KbSource, QaPair, SearchHit } from "@/lib/api";
+import { ChunkMap } from "./chunk-map";
+
+const VTABS = [
+  { value: "files", label: "Files", icon: "knowledge" },
+  { value: "qa", label: "Q&A pairs", icon: "n_qa" },
+  { value: "search", label: "Search debugger", icon: "search" },
+  { value: "map", label: "Chunk map", icon: "layers" },
+] as const;
+
+// Chunking strategies offered in the UI - mirrors CHUNK_STRATEGIES in the backend splitter.
+const CHUNK_OPTIONS = [
+  { value: "recursive", label: "Recursive" },
+  { value: "section", label: "By section" },
+  { value: "sentence", label: "By sentence" },
+  { value: "semantic", label: "Semantic" },
+] as const;
+const CHUNK_HELP = "Recursive suits most documents; By section keeps each Markdown heading’s content together; By sentence groups whole sentences (good for FAQs and transcripts); Semantic splits where the meaning shifts (uses the embedder, slower to ingest).";
+
+export function KnowledgeScreen({ project }: { project: any }) {
+  const [tab, setTab] = useState<string>("files");
+  const [histOpen, setHistOpen] = useState(false);
+  return (
+    <div className="col" style={{ flex: 1, minHeight: 0 }}>
+      <div className="row spread" style={{ padding: "20px 28px 14px", alignItems: "flex-start" }}>
+        <div>
+          <div className="t-display">Knowledge</div>
+          <div className="fg-1" style={{ marginTop: 3 }}>Ground agents in your docs (Chroma vectors, organized in folders) and deflect FAQs with categorized Q&A pairs.</div>
+        </div>
+        <button className="btn btn-secondary btn-sm" style={{ flex: "none" }} onClick={() => setHistOpen(true)} disabled={!project?.id} title="What was added, changed or removed">
+          <Icon name="clock" size={14} />History
+        </button>
+      </div>
+      <KnowledgeHistory project={project} open={histOpen} onClose={() => setHistOpen(false)} />
+      <div className="row" style={{ flex: 1, minHeight: 0, alignItems: "stretch" }}>
+        {/* vertical tab rail */}
+        <nav className="col" style={{ width: 184, flex: "none", padding: "4px 0 16px 20px", gap: 2 }}>
+          {VTABS.map((t) => (
+            <button
+              key={t.value}
+              onClick={() => setTab(t.value)}
+              className="row gap2"
+              style={{
+                alignItems: "center", textAlign: "left", padding: "8px 12px", borderRadius: 8,
+                border: "none", cursor: "pointer", fontSize: 13, fontWeight: tab === t.value ? 650 : 450,
+                background: tab === t.value ? "var(--bg-3)" : "transparent",
+                color: tab === t.value ? "var(--fg-0)" : "var(--fg-1)",
+              }}
+            >
+              <Icon name={t.icon as any} size={15} />
+              {t.label}
+            </button>
+          ))}
+        </nav>
+        <div className="scroll-y" style={{ flex: 1, minWidth: 0, padding: "4px 28px 24px 16px" }}>
+          <div style={{ maxWidth: 1400 }}>
+            {tab === "files" && <Files project={project} />}
+            {tab === "qa" && <QA project={project} />}
+            {tab === "search" && <SearchDebugger project={project} />}
+            {tab === "map" && <ChunkMap project={project} />}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* Compact "3m ago" / "2d ago" relative time, falling back to a locale date. */
+function knRelTime(iso?: string | null): string {
+  if (!iso) return "";
+  const t = new Date(iso).getTime();
+  if (Number.isNaN(t)) return String(iso);
+  const s = Math.round((Date.now() - t) / 1000);
+  if (s < 60) return "just now";
+  const m = Math.round(s / 60);
+  if (m < 60) return `${m}m ago`;
+  const h = Math.round(m / 60);
+  if (h < 24) return `${h}h ago`;
+  const d = Math.round(h / 24);
+  if (d < 30) return `${d}d ago`;
+  return new Date(iso).toLocaleDateString();
+}
+
+/* Read-only, project-wide activity: what files / Q&A pairs were added, changed or removed.
+   Opened from the Knowledge header - no per-row clutter, no restore (content lives in the
+   vector store, so there's nothing to roll back). */
+function KnowledgeHistory({ project, open, onClose }: { project: any; open: boolean; onClose: () => void }) {
+  const [rows, setRows] = useState<ActivityEntry[] | null>(null);
+  const [err, setErr] = useState<string | null>(null);
+  useEffect(() => {
+    if (!open || !project?.id) return;
+    setRows(null); setErr(null);
+    api.knowledgeActivity(project.id).then(setRows).catch((e) => setErr(String(e?.message || e)));
+  }, [open, project?.id]);
+
+  const ACTION: Record<string, { label: string; cls: string; icon: string }> = {
+    added: { label: "Added", cls: "pill-ok", icon: "plus" },
+    changed: { label: "Changed", cls: "pill-muted", icon: "edit" },
+    removed: { label: "Removed", cls: "pill-err", icon: "trash" },
+  };
+  return (
+    <Drawer open={open} onClose={onClose} title="Knowledge history" sub={project?.name} width={440}>
+      <div className="col" style={{ padding: 14, gap: 8 }}>
+        {err && <div className="card" style={{ padding: 12, color: "var(--err)" }}>{err}</div>}
+        {!err && rows === null && <div className="fg-2 t-caption" style={{ padding: "8px 2px" }}>Loading…</div>}
+        {!err && rows?.length === 0 && (
+          <div className="col center" style={{ padding: "40px 16px", textAlign: "center", gap: 8, color: "var(--fg-2)" }}>
+            <Icon name="clock" size={22} />
+            <div className="t-body-sm">No changes yet.</div>
+            <div className="t-caption">Adding, editing or removing files and Q&A pairs shows up here.</div>
+          </div>
+        )}
+        {rows?.map((r) => {
+          const a = ACTION[r.action || ""] || { label: r.action || "changed", cls: "pill-muted", icon: "minus" };
+          return (
+            <div key={r.id} className="card" style={{ padding: "10px 12px" }}>
+              <div className="row gap2" style={{ alignItems: "center", minWidth: 0 }}>
+                <span className={"pill " + a.cls} style={{ height: 18, flex: "none" }}><Icon name={a.icon as any} size={11} />{a.label}</span>
+                <span className="typechip" style={{ flex: "none" }}>{r.entity_type === "qa_pair" ? "Q&A" : "File"}</span>
+                <span className="t-body-sm truncate" style={{ minWidth: 0 }}>{r.title}</span>
+              </div>
+              <div className="t-caption fg-2 truncate" style={{ marginTop: 4 }}>
+                {r.author_email || "unknown"}{r.created_at ? ` · ${knRelTime(r.created_at)}` : ""}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </Drawer>
+  );
+}
+
+/* ---------------- Files (sources in folders) ---------------- */
+
+const UNFILED = "";
+
+// Fallback chunking shown/used when a source (or the project) hasn't set its own. Mirrors
+// the backend defaults in services/knowledge.py; the server stays authoritative for what's
+// actually applied at ingest.
+const DEFAULT_CHUNK_STRATEGY = "recursive";
+const DEFAULT_CHUNK_SIZE = 1000;
+const DEFAULT_CHUNK_OVERLAP = 200;
+
+function Files({ project }: { project: any }) {
+  const [rows, setRows] = useState<KbSource[]>([]);
+  const [folder, setFolder] = useState<string | null>(null); // null = All files
+  const [open, setOpen] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [addErr, setAddErr] = useState<string | null>(null);
+  const [newFolder, setNewFolder] = useState<string | null>(null); // non-null = naming a new folder
+  // The modal never asks for a folder - sources land in the folder open at the time
+  // ("" = Unfiled, e.g. from the All files view).
+  const [targetFolder, setTargetFolder] = useState<string>("");
+  const [form, setForm] = useState<{ kind: string; name: string; text: string; uri: string; file: globalThis.File | null; chunkStrategy: string }>({ kind: "text", name: "", text: "", uri: "", file: null, chunkStrategy: "recursive" });
+
+  // Multi-select + re-chunk: select sources (across any folder) and re-split/re-embed
+  // them with a shared strategy / size / overlap.
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [rechunkOpen, setRechunkOpen] = useState(false);
+  const [rechunkTargets, setRechunkTargets] = useState<string[]>([]);
+  const [rechunkBusy, setRechunkBusy] = useState(false);
+  const [rechunkErr, setRechunkErr] = useState<string | null>(null);
+  const [rechunkForm, setRechunkForm] = useState<{ strategy: string; size: number; overlap: number }>({ strategy: DEFAULT_CHUNK_STRATEGY, size: DEFAULT_CHUNK_SIZE, overlap: DEFAULT_CHUNK_OVERLAP });
+
+  const [dedupeBusy, setDedupeBusy] = useState(false);
+  const [dedupeMsg, setDedupeMsg] = useState<string | null>(null);
+  const [health, setHealth] = useState<{ needs_reembed: boolean; current_model: string; mismatched: { id: string; name: string }[] } | null>(null);
+  const reload = useCallback(() => {
+    if (!project?.id) return;
+    api.listSources(project.id).then(setRows).catch(() => {});
+    api.embeddingHealth(project.id).then(setHealth).catch(() => setHealth(null));
+  }, [project?.id]);
+  useEffect(() => { reload(); }, [reload]);
+
+  // Ingestion (chunk + embed) runs in the background, so a new/re-chunked source starts as
+  // "queued"/"processing". Poll until every source settles (ready/error) so the table, chunk
+  // counts, and dim-mismatch banner update without a manual refresh.
+  useEffect(() => {
+    const pending = rows.some((s) => s.status === "queued" || s.status === "processing");
+    if (!pending || !project?.id) return;
+    const t = setTimeout(async () => {
+      const next = await api.listSources(project.id).catch(() => null);
+      if (!next) return;
+      setRows(next);
+      if (!next.some((s) => s.status === "queued" || s.status === "processing")) {
+        api.embeddingHealth(project.id).then(setHealth).catch(() => {});
+      }
+    }, 1500);
+    return () => clearTimeout(t);
+  }, [rows, project?.id]);
+
+  async function reingest(id: string) { await api.reingestSource(project.id, id).catch(() => {}); reload(); }
+
+  async function dedupe() {
+    if (!window.confirm("Remove exact-duplicate chunks (identical text) across this project, keeping one copy of each?\n\nIf duplicates come from the same document added twice, delete the duplicate source instead — re-ingesting regenerates the chunks.")) return;
+    setDedupeBusy(true);
+    setDedupeMsg(null);
+    try {
+      const r = await api.dedupeChunks(project.id);
+      setDedupeMsg(r.removed === 0
+        ? "No duplicate chunks found."
+        : `Removed ${r.removed} duplicate chunk${r.removed === 1 ? "" : "s"} (${r.groups} group${r.groups === 1 ? "" : "s"}) across ${r.sources_affected} source${r.sources_affected === 1 ? "" : "s"}. ${r.remaining} remain.`);
+      reload();
+    } catch (e: any) {
+      setDedupeMsg(`Dedupe failed: ${e?.message || e}`);
+    } finally { setDedupeBusy(false); }
+  }
+
+  const folders = useMemo(() => {
+    const set = new Set<string>();
+    rows.forEach((s) => { if (s.folder) set.add(s.folder); });
+    return [...set].sort();
+  }, [rows]);
+
+  const visible = folder === null ? rows : rows.filter((s) => (s.folder || UNFILED) === folder);
+  const hasUnfiled = rows.some((s) => !s.folder);
+  // Folder column is redundant when already viewing one named folder - show it only in
+  // the All-files and Unfiled views (where moving files between folders is useful).
+  const showFolderCol = folder === null || folder === UNFILED;
+  const inNamedFolder = folder !== null && folder !== UNFILED;
+
+  const allVisibleSelected = visible.length > 0 && visible.every((s) => selected.has(s.id));
+  function toggleSel(id: string) {
+    setSelected((prev) => { const n = new Set(prev); if (n.has(id)) n.delete(id); else n.add(id); return n; });
+  }
+  function toggleAllVisible() {
+    setSelected((prev) => {
+      const n = new Set(prev);
+      if (allVisibleSelected) visible.forEach((s) => n.delete(s.id));
+      else visible.forEach((s) => n.add(s.id));
+      return n;
+    });
+  }
+  function openRechunk(ids: string[]) {
+    if (!ids.length) return;
+    const first = rows.find((r) => r.id === ids[0]);
+    setRechunkForm({ strategy: first?.chunking_strategy || DEFAULT_CHUNK_STRATEGY, size: first?.chunk_size || DEFAULT_CHUNK_SIZE, overlap: first?.chunk_overlap ?? DEFAULT_CHUNK_OVERLAP });
+    setRechunkErr(null);
+    setRechunkTargets(ids);
+    setRechunkOpen(true);
+  }
+  async function doRechunk() {
+    setRechunkBusy(true);
+    setRechunkErr(null);
+    try {
+      await api.rechunkSources(project.id, rechunkTargets, {
+        chunking_strategy: rechunkForm.strategy,
+        chunk_size: Number(rechunkForm.size) || undefined,
+        chunk_overlap: Number.isFinite(rechunkForm.overlap) ? Number(rechunkForm.overlap) : undefined,
+      });
+      setRechunkOpen(false);
+      setSelected(new Set());
+      reload();
+    } catch (e: any) {
+      setRechunkErr(e?.message || "Re-chunk failed. Please try again.");
+    } finally { setRechunkBusy(false); }
+  }
+
+  function openAdd(forFolder?: string) {
+    setTargetFolder(forFolder ?? (inNamedFolder ? folder! : ""));
+    setAddErr(null);
+    setOpen(true);
+  }
+
+  async function add() {
+    setBusy(true);
+    setAddErr(null);
+    try {
+      if (form.kind === "file") {
+        if (!form.file) { setAddErr("Choose a file to upload."); return; }
+        await api.uploadSource(project.id, form.file, targetFolder || undefined, form.chunkStrategy);
+      } else {
+        await api.addSource(project.id, {
+          kind: form.kind, name: form.name || "Untitled", folder: targetFolder || undefined,
+          text: form.kind === "text" ? form.text : undefined, uri: (form.kind === "url" || form.kind === "crawl") ? form.uri : undefined,
+          chunking_strategy: form.chunkStrategy,
+        });
+      }
+      setOpen(false); setForm({ kind: "text", name: "", text: "", uri: "", file: null, chunkStrategy: "recursive" }); reload();
+    } catch (e: any) {
+      setAddErr(String(e?.message || e));
+    } finally { setBusy(false); }
+  }
+
+  function FolderRow({ value, label, icon, count }: { value: string | null; label: string; icon: string; count: number }) {
+    const active = folder === value;
+    return (
+      <button onClick={() => setFolder(value)} className="row spread" style={{
+        width: "100%", alignItems: "center", padding: "7px 10px", borderRadius: 7, border: "none", cursor: "pointer",
+        background: active ? "var(--bg-3)" : "transparent", color: active ? "var(--fg-0)" : "var(--fg-1)", fontSize: 13,
+      }}>
+        <span className="row gap2" style={{ alignItems: "center", minWidth: 0 }}><Icon name={icon as any} size={14} /><span className="truncate">{label}</span></span>
+        <span className="t-caption fg-2 mono">{count}</span>
+      </button>
+    );
+  }
+
+  return (
+    <div className="col" style={{ gap: 12 }}>
+      {health?.needs_reembed && (
+        <div className="card row spread" style={{ padding: "10px 14px", background: "var(--warn-bg)", borderColor: "transparent" }}>
+          <div className="row gap2" style={{ minWidth: 0 }}><Icon name="bolt" size={15} style={{ color: "var(--warn)" }} />
+            <span className="t-body-sm">{health.mismatched.length} source(s) were embedded with a different model than the current one ({health.current_model}) - they won't appear in search until re-embedded.</span>
+          </div>
+          <button className="btn btn-secondary btn-sm" style={{ flex: "none" }} onClick={async () => { for (const m of health.mismatched) await reingest(m.id); }}><Icon name="refresh" size={13} />Re-embed all</button>
+        </div>
+      )}
+    <div className="row" style={{ gap: 18, alignItems: "flex-start" }}>
+      {/* folder list */}
+      <div className="card col" style={{ width: 218, flex: "none", padding: 10, gap: 2 }}>
+        <FolderRow value={null} label="All files" icon="list" count={rows.length} />
+        {hasUnfiled && <FolderRow value={UNFILED} label="Unfiled" icon="file" count={rows.filter((s) => !s.folder).length} />}
+        {folders.map((f) => (
+          <FolderRow key={f} value={f} label={f} icon="layers" count={rows.filter((s) => s.folder === f).length} />
+        ))}
+        {newFolder === null ? (
+          <button className="btn btn-ghost btn-sm" style={{ justifyContent: "flex-start", marginTop: 4 }} onClick={() => setNewFolder("")}>
+            <Icon name="plus" size={13} />New folder
+          </button>
+        ) : (
+          <input
+            autoFocus className="input" style={{ marginTop: 4, fontSize: 13 }} placeholder="Folder name…" value={newFolder}
+            onChange={(e) => setNewFolder(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && newFolder.trim()) {
+                // Folders exist through their files: open the add modal locked to the new folder.
+                const nf = newFolder.trim();
+                setNewFolder(null);
+                openAdd(nf);
+              }
+              if (e.key === "Escape") setNewFolder(null);
+            }}
+            onBlur={() => setNewFolder(null)}
+          />
+        )}
+        <div className="t-caption fg-2" style={{ padding: "6px 10px 2px" }}>
+          Retrieval nodes and knowledge_search tools can filter by folder.
+        </div>
+      </div>
+
+      {/* sources table */}
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div className="row spread" style={{ marginBottom: 12 }}>
+          <div className="t-h2">{folder === null ? "All files" : folder === UNFILED ? "Unfiled" : folder}</div>
+          <div className="row gap2">
+            <button className="btn btn-ghost btn-sm" onClick={dedupe} disabled={dedupeBusy} title="Remove exact-duplicate chunks (identical text) so the same passage never fills two retrieval slots.">
+              <Icon name={dedupeBusy ? "refresh" : "layers"} size={14} style={dedupeBusy ? { animation: "spin 1s linear infinite" } : {}} />{dedupeBusy ? "Removing…" : "Remove duplicates"}
+            </button>
+            <button className="btn btn-primary btn-sm" onClick={() => openAdd()}>
+              <Icon name="plus" size={14} />Add source
+            </button>
+          </div>
+        </div>
+        {dedupeMsg && (
+          <div className="card row spread" style={{ padding: "8px 12px", marginBottom: 10, alignItems: "center" }}>
+            <span className="t-body-sm">{dedupeMsg}</span>
+            <button className="iconbtn" title="Dismiss" onClick={() => setDedupeMsg(null)}><Icon name="x" size={13} /></button>
+          </div>
+        )}
+        {selected.size > 0 && (
+          <div className="card row spread" style={{ padding: "8px 12px", marginBottom: 10, alignItems: "center" }}>
+            <span className="t-body-sm"><b>{selected.size}</b> selected</span>
+            <div className="row gap2">
+              <button className="btn btn-secondary btn-sm" onClick={() => openRechunk([...selected])}><Icon name="refresh" size={13} />Re-chunk selected</button>
+              <button className="btn btn-ghost btn-sm" onClick={() => setSelected(new Set())}>Clear</button>
+            </div>
+          </div>
+        )}
+        <div className="card" style={{ overflow: "hidden" }}>
+          <table className="tbl">
+            <thead><tr>
+              <th style={{ width: 30 }}><input type="checkbox" aria-label="Select all" checked={allVisibleSelected} onChange={toggleAllVisible} /></th>
+              <th>Name</th><th>Kind</th>{showFolderCol && <th>Folder</th>}<th>Status</th><th>Chunks</th><th>Chunking</th><th /></tr></thead>
+            <tbody>
+              {visible.map((s) => (
+                <tr key={s.id} style={selected.has(s.id) ? { background: "var(--bg-3)" } : undefined}>
+                  <td><input type="checkbox" aria-label={`Select ${s.name}`} checked={selected.has(s.id)} onChange={() => toggleSel(s.id)} /></td>
+                  <td style={{ fontWeight: 600 }}>{s.name}</td>
+                  <td><span className="typechip">{s.kind}</span></td>
+                  {showFolderCol && (
+                    <td>
+                      <select
+                        className="select" style={{ fontSize: 12, padding: "3px 6px", maxWidth: 140 }}
+                        value={s.folder || UNFILED}
+                        onChange={async (e) => { await api.moveSource(project.id, s.id, e.target.value); reload(); }}
+                      >
+                        <option value={UNFILED}>Unfiled</option>
+                        {folders.map((f) => <option key={f} value={f}>{f}</option>)}
+                        {s.folder && !folders.includes(s.folder) && <option value={s.folder}>{s.folder}</option>}
+                      </select>
+                    </td>
+                  )}
+                  <td><StatusPill status={s.status} /></td>
+                  <td className="mono-sm">{s.chunks}</td>
+                  <td>
+                    <span className="typechip">{s.chunking_strategy || DEFAULT_CHUNK_STRATEGY}</span>
+                    <div className="t-caption fg-2 mono" style={{ marginTop: 2 }}>{s.chunk_size || DEFAULT_CHUNK_SIZE}/{s.chunk_overlap ?? DEFAULT_CHUNK_OVERLAP}</div>
+                  </td>
+                  <td style={{ textAlign: "right" }}>
+                    <div className="row gap1" style={{ justifyContent: "flex-end" }}>
+                      <button className="iconbtn" title="Re-chunk & re-embed" onClick={() => openRechunk([s.id])}><Icon name="layers" size={14} /></button>
+                      <button className="iconbtn" title="Re-embed (reuse current chunking)" onClick={() => reingest(s.id)}><Icon name="refresh" size={14} /></button>
+                      <button className="iconbtn" title="Delete" onClick={async () => { await api.deleteSource(project.id, s.id); reload(); }}><Icon name="trash" size={15} /></button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+              {visible.length === 0 && <tr><td colSpan={showFolderCol ? 8 : 7}><div className="fg-2" style={{ padding: 22, textAlign: "center" }}>{rows.length === 0 ? "No sources yet. Add text or a URL to feed your agents." : "No files in this folder yet."}</div></td></tr>}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <Modal open={open} onClose={() => setOpen(false)} title={`Add source to “${targetFolder || "Unfiled"}”`} width={560}
+        footer={<><button className="btn btn-ghost" onClick={() => setOpen(false)}>Cancel</button><button className="btn btn-primary" onClick={add} disabled={busy}>{busy ? "Ingesting…" : "Add & ingest"}</button></>}>
+        <Field label="Kind"><Segmented options={[{ value: "text", label: "Paste text" }, { value: "url", label: "URL" }, { value: "crawl", label: "Crawl site" }, { value: "file", label: "Upload file" }]} value={form.kind} onChange={(v) => setForm((f) => ({ ...f, kind: v }))} /></Field>
+        {form.kind !== "file" && (
+          <Field label="Name"><input className="input" value={form.name} onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))} placeholder="Help Center FAQ" /></Field>
+        )}
+        {form.kind === "text" && (
+          <Field label="Text" help="Split into ~1000-char chunks and embedded into Chroma."><textarea className="textarea" rows={7} value={form.text} onChange={(e) => setForm((f) => ({ ...f, text: e.target.value }))} placeholder="Paste documentation, policies, FAQs…" /></Field>
+        )}
+        {form.kind === "crawl" && (
+          <Field label="Start URL" help="Crawls same-domain pages from here (up to ~10), strips HTML, chunks + embeds. Re-crawl anytime with the ↻ button."><input className="input mono" value={form.uri} onChange={(e) => setForm((f) => ({ ...f, uri: e.target.value }))} placeholder="https://docs.example.com" /></Field>
+        )}
+        {form.kind === "url" && (
+          <Field label="URL" help="Fetched, stripped of HTML, chunked, embedded."><input className="input mono" value={form.uri} onChange={(e) => setForm((f) => ({ ...f, uri: e.target.value }))} placeholder="https://docs.example.com/help" /></Field>
+        )}
+        {form.kind === "file" && (
+          <Field label="File" help="Text formats (.txt, .md, .csv, .json…) and PDF. Named after the file; extracted, chunked, embedded.">
+            <input className="input" type="file" accept=".txt,.md,.markdown,.csv,.json,.html,.pdf,text/*,application/pdf"
+              onChange={(e) => setForm((f) => ({ ...f, file: e.target.files?.[0] || null }))} />
+            {form.file && <div className="t-caption fg-2" style={{ marginTop: 6 }}>{form.file.name} · {(form.file.size / 1024).toFixed(1)} KB</div>}
+          </Field>
+        )}
+        <Field label="Chunking" help={`How this source is split before embedding. ${CHUNK_HELP}`}>
+          <Segmented
+            options={CHUNK_OPTIONS as any}
+            value={form.chunkStrategy}
+            onChange={(v) => setForm((f) => ({ ...f, chunkStrategy: v }))}
+          />
+        </Field>
+        {addErr && <div className="t-caption" style={{ color: "var(--err)", marginTop: 4 }}>⚠ {addErr}</div>}
+      </Modal>
+
+      <Modal open={rechunkOpen} onClose={() => setRechunkOpen(false)} width={520}
+        title={`Re-chunk ${rechunkTargets.length} source${rechunkTargets.length === 1 ? "" : "s"}`}
+        footer={<><button className="btn btn-ghost" onClick={() => setRechunkOpen(false)}>Cancel</button><button className="btn btn-primary" onClick={doRechunk} disabled={rechunkBusy}>{rechunkBusy ? "Re-chunking…" : "Apply & re-embed"}</button></>}>
+        <div className="t-caption fg-2" style={{ marginBottom: 12 }}>Re-splits and re-embeds the selected source(s) with these settings. Existing chunks are replaced. Text & file sources reuse their stored content; URLs & crawls are re-fetched.</div>
+        <Field label="Chunking strategy" help={CHUNK_HELP}>
+          <Segmented
+            options={CHUNK_OPTIONS as any}
+            value={rechunkForm.strategy}
+            onChange={(v) => setRechunkForm((f) => ({ ...f, strategy: v }))}
+          />
+        </Field>
+        <div className="row gap2">
+          <div style={{ flex: 1 }}>
+            <Field label="Chunk size (chars)" help="Target characters per chunk."><input className="input" type="number" min={100} step={100} value={rechunkForm.size} onChange={(e) => setRechunkForm((f) => ({ ...f, size: Number(e.target.value) }))} /></Field>
+          </div>
+          <div style={{ flex: 1 }}>
+            <Field label="Overlap (chars)" help="Characters shared between adjacent chunks."><input className="input" type="number" min={0} step={20} value={rechunkForm.overlap} onChange={(e) => setRechunkForm((f) => ({ ...f, overlap: Number(e.target.value) }))} /></Field>
+          </div>
+        </div>
+        {rechunkErr && <div className="t-caption" style={{ color: "var(--err)", marginTop: 8 }}>⚠ {rechunkErr}</div>}
+      </Modal>
+    </div>
+    </div>
+  );
+}
+
+/* ---------------- Q&A pairs (custom kinds + tags) ---------------- */
+
+const BUILTIN_KINDS = ["faq", "error_workaround"];
+
+function QA({ project }: { project: any }) {
+  const [rows, setRows] = useState<QaPair[]>([]);
+  const [kind, setKind] = useState<string | null>(null); // null = All pairs
+  const [newKind, setNewKind] = useState<string | null>(null); // non-null = naming a new kind
+  const [form, setForm] = useState({ question: "", answer: "", kind: "faq", tags: "" });
+  const [editing, setEditing] = useState<string | null>(null);
+  const [edit, setEdit] = useState({ question: "", answer: "", kind: "faq", tags: "" });
+  const [saving, setSaving] = useState(false);
+  const reload = useCallback(() => { if (project?.id) api.listQa(project.id).then(setRows).catch(() => {}); }, [project?.id]);
+  useEffect(() => { reload(); }, [reload]);
+
+  const kinds = useMemo(() => {
+    const set = new Set<string>(BUILTIN_KINDS);
+    rows.forEach((q) => { if (q.kind) set.add(q.kind); });
+    return [...set].sort();
+  }, [rows]);
+
+  // Selecting a kind in the rail locks the add-form kind to it (mirrors Files/folders).
+  const lockedKind = kind;
+  const effectiveKind = lockedKind ?? (form.kind.trim() || "faq");
+  const visible = kind === null ? rows : rows.filter((q) => q.kind === kind);
+  // Hide the Kind column when viewing one kind - the rail already says which.
+  const showKindCol = kind === null;
+
+  async function add() {
+    if (!form.question.trim()) return;
+    const tags = form.tags.split(",").map((t) => t.trim()).filter(Boolean);
+    await api.addQa(project.id, { question: form.question, answer: form.answer, kind: effectiveKind, tags });
+    setForm({ question: "", answer: "", kind: form.kind, tags: "" }); reload();
+  }
+
+  function startEdit(q: QaPair) {
+    setEditing(q.id);
+    setEdit({ question: q.question, answer: q.answer, kind: q.kind || "faq", tags: (q.tags || []).join(", ") });
+  }
+
+  async function saveEdit() {
+    if (!editing || !edit.question.trim() || saving) return;
+    setSaving(true);
+    try {
+      const updated = await api.updateQa(project.id, editing, {
+        question: edit.question.trim(),
+        answer: edit.answer,
+        kind: edit.kind.trim() || "faq",
+        tags: edit.tags.split(",").map((tag) => tag.trim()).filter(Boolean),
+      });
+      setRows((current) => current.map((row) => row.id === updated.id ? updated : row));
+      setEditing(null);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  function KindRow({ value, label, count }: { value: string | null; label: string; count: number }) {
+    const active = kind === value;
+    return (
+      <button onClick={() => setKind(value)} className="row spread" style={{
+        width: "100%", alignItems: "center", padding: "7px 10px", borderRadius: 7, border: "none", cursor: "pointer",
+        background: active ? "var(--bg-3)" : "transparent", color: active ? "var(--fg-0)" : "var(--fg-1)", fontSize: 13,
+      }}>
+        <span className="row gap2" style={{ alignItems: "center", minWidth: 0 }}><Icon name={value === null ? "list" : "n_qa"} size={14} /><span className="truncate">{label}</span></span>
+        <span className="t-caption fg-2 mono">{count}</span>
+      </button>
+    );
+  }
+
+  return (
+    <div className="row" style={{ gap: 18, alignItems: "flex-start" }}>
+      {/* kind list */}
+      <div className="card col" style={{ width: 218, flex: "none", padding: 10, gap: 2 }}>
+        <KindRow value={null} label="All pairs" count={rows.length} />
+        {kinds.map((k) => {
+          const count = rows.filter((q) => q.kind === k).length;
+          if (!count && kind !== k) return null;
+          return <KindRow key={k} value={k} label={k} count={count} />;
+        })}
+        {newKind === null ? (
+          <button className="btn btn-ghost btn-sm" style={{ justifyContent: "flex-start", marginTop: 4 }} onClick={() => setNewKind("")}>
+            <Icon name="plus" size={13} />New kind
+          </button>
+        ) : (
+          <input
+            autoFocus className="input" style={{ marginTop: 4, fontSize: 13 }} placeholder="Kind name…" value={newKind}
+            onChange={(e) => setNewKind(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && newKind.trim()) {
+                // Kinds exist through their pairs: select it + prime the add form.
+                const nk = newKind.trim();
+                setForm((f) => ({ ...f, kind: nk })); setKind(nk); setNewKind(null);
+              }
+              if (e.key === "Escape") setNewKind(null);
+            }}
+            onBlur={() => setNewKind(null)}
+          />
+        )}
+        <div className="t-caption fg-2" style={{ padding: "6px 10px 2px" }}>
+          Kinds are free-form categories. Retrieval nodes (and agent Q&A) can filter by kind.
+        </div>
+      </div>
+
+      {/* add form + table */}
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div className="card" style={{ padding: 14, marginBottom: 16 }}>
+          <div className="row spread" style={{ marginBottom: 10 }}>
+            <div className="t-h3">Add Q&A pair</div>
+            {lockedKind ? (
+              <span className="row gap2 t-caption fg-1" style={{ alignItems: "center" }}><Icon name="n_qa" size={13} />kind: <b>{lockedKind}</b></span>
+            ) : (
+              <div style={{ width: 200 }}>
+                <input className="input" list="qa-kinds" value={form.kind} placeholder="Kind (e.g. faq, billing)" onChange={(e) => setForm((f) => ({ ...f, kind: e.target.value }))} title="Category. Pick an existing kind or type a new one." />
+                <datalist id="qa-kinds">{kinds.map((k) => <option key={k} value={k} />)}</datalist>
+              </div>
+            )}
+          </div>
+          <div className="row gap2" style={{ marginBottom: 8 }}>
+            <input className="input" style={{ flex: 1 }} placeholder="Question" value={form.question} onChange={(e) => setForm((f) => ({ ...f, question: e.target.value }))} />
+          </div>
+          <div className="row gap2" style={{ marginBottom: 8 }}>
+            <textarea className="textarea" style={{ flex: 1, minHeight: 44 }} rows={2} placeholder="Answer" value={form.answer} onChange={(e) => setForm((f) => ({ ...f, answer: e.target.value }))} />
+          </div>
+          <div className="row gap2">
+            <input className="input" style={{ flex: 1 }} placeholder="Tags (comma separated, optional)" value={form.tags} onChange={(e) => setForm((f) => ({ ...f, tags: e.target.value }))} />
+            <button className="btn btn-primary" onClick={add}><Icon name="plus" size={14} />Add</button>
+          </div>
+        </div>
+
+        <div className="card" style={{ overflow: "hidden" }}>
+          <table className="tbl"><thead><tr><th>Question</th><th>Answer</th>{showKindCol && <th>Kind</th>}<th>Tags</th><th /></tr></thead>
+            <tbody>
+              {visible.map((q) => editing === q.id ? (
+                <tr key={q.id}>
+                  <td><input autoFocus className="input" value={edit.question} onChange={(e) => setEdit((v) => ({ ...v, question: e.target.value }))} /></td>
+                  <td><textarea className="textarea" rows={2} value={edit.answer} onChange={(e) => setEdit((v) => ({ ...v, answer: e.target.value }))} /></td>
+                  {showKindCol && <td><input className="input" list="qa-kinds" value={edit.kind} onChange={(e) => setEdit((v) => ({ ...v, kind: e.target.value }))} /></td>}
+                  <td><input className="input" value={edit.tags} placeholder="tag, tag" onChange={(e) => setEdit((v) => ({ ...v, tags: e.target.value }))} /></td>
+                  <td style={{ textAlign: "right", whiteSpace: "nowrap" }}>
+                    <button className="iconbtn" title="Save" onClick={saveEdit} disabled={!edit.question.trim() || saving}><Icon name="check" size={15} /></button>
+                    <button className="iconbtn" title="Cancel" onClick={() => setEditing(null)} disabled={saving}><Icon name="x" size={15} /></button>
+                  </td>
+                </tr>
+              ) : (
+                <tr key={q.id}>
+                  <td style={{ fontWeight: 600, maxWidth: 260 }} className="truncate">{q.question}</td>
+                  <td className="fg-1 truncate" style={{ maxWidth: 280 }}>{q.answer}</td>
+                  {showKindCol && <td><span className="typechip">{q.kind}</span></td>}
+                  <td className="fg-2 t-caption truncate" style={{ maxWidth: 140 }}>{(q.tags || []).join(", ") || "-"}</td>
+                  <td style={{ textAlign: "right", whiteSpace: "nowrap" }}>
+                    <button className="iconbtn" title="Edit" onClick={() => startEdit(q)}><Icon name="edit" size={15} /></button>
+                    <button className="iconbtn" title="Delete" onClick={async () => { await api.deleteQa(project.id, q.id); reload(); }}><Icon name="trash" size={15} /></button>
+                  </td>
+                </tr>
+              ))}
+              {visible.length === 0 && <tr><td colSpan={showKindCol ? 5 : 4}><div className="fg-2" style={{ padding: 22, textAlign: "center" }}>{rows.length === 0 ? "No Q&A pairs yet." : "No pairs of this kind yet."}</div></td></tr>}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ---------------- Search debugger ---------------- */
+
+function SearchDebugger({ project }: { project: any }) {
+  const [q, setQ] = useState("");
+  const [hits, setHits] = useState<SearchHit[]>([]);
+  const [searched, setSearched] = useState(false);
+  const [folders, setFolders] = useState<string[]>([]);
+  const [folder, setFolder] = useState("");
+  const [mode, setMode] = useState<"vector" | "hybrid">("vector");
+  const [rerank, setRerank] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+  useEffect(() => { if (project?.id) api.listFolders(project.id).then(setFolders).catch(() => {}); }, [project?.id]);
+  async function run() {
+    if (busy || !q.trim()) return;
+    setBusy(true); setErr(null);
+    try {
+      const h = await api.searchKnowledge(project.id, q, 8, folder ? [folder] : undefined, mode === "hybrid", rerank);
+      setHits(h); setSearched(true);
+    } catch (e: any) {
+      setErr(e?.message || "Search failed."); setHits([]); setSearched(true);
+    } finally { setBusy(false); }
+  }
+  return (
+    <>
+      <div className="row gap2" style={{ marginBottom: 8, alignItems: "center" }}>
+        <input className="input" style={{ flex: 1 }} placeholder="Query the knowledge base…" value={q} onChange={(e) => setQ(e.target.value)} onKeyDown={(e) => e.key === "Enter" && run()} />
+        {folders.length > 0 && (
+          <select className="select" style={{ width: 160 }} value={folder} onChange={(e) => setFolder(e.target.value)}>
+            <option value="">All folders</option>
+            {folders.map((f) => <option key={f} value={f}>{f}</option>)}
+          </select>
+        )}
+        <button className="btn btn-primary" onClick={run} disabled={busy || !q.trim()}>
+          <Icon name={busy ? "refresh" : "search"} size={14} style={busy ? { animation: "spin 1s linear infinite" } : {}} />{busy ? "Searching…" : "Search"}
+        </button>
+      </div>
+      {err && <div className="t-caption" style={{ color: "var(--err)", marginBottom: 8 }}>{err}</div>}
+      <div className="row gap2" style={{ marginBottom: 6, alignItems: "center" }}>
+        <Segmented
+          options={[{ value: "vector", label: "Vector" }, { value: "hybrid", label: "Hybrid" }]}
+          value={mode}
+          onChange={(v) => setMode(v as "vector" | "hybrid")}
+        />
+        <label className="row gap1" style={{ alignItems: "center", cursor: "pointer", fontSize: 13 }} title="Two-stage retrieval: a local cross-encoder re-scores the shortlist and keeps the best matches. Runs offline; adds some latency.">
+          <input type="checkbox" checked={rerank} onChange={(e) => setRerank(e.target.checked)} />
+          Rerank
+        </label>
+        <span className="t-caption fg-2">
+          {rerank
+            ? "Cross-encoder rerank on. Score is the reranker’s relevance (0–1)."
+            : mode === "hybrid"
+              ? "BM25 lexical + vector, fused via RRF. Score is a normalized fusion rank (0–1), not cosine."
+              : "Vector-only. Score is cosine similarity (0–1) between the query and each chunk."}
+        </span>
+      </div>
+      <div style={{ marginBottom: 14 }} />
+      <div className="col gap2">
+        {hits.map((h, i) => (
+          <div key={i} className="card" style={{ padding: 12 }}>
+            <div className="row spread" style={{ marginBottom: 4 }}>
+              <span className="t-caption fg-2 mono">{h.source_id?.slice(0, 12) || "-"}</span>
+              <span className="chip chip-mono">score {h.score.toFixed(3)}</span>
+            </div>
+            <div className="t-body-sm" style={{ whiteSpace: "pre-wrap" }}>{h.text}</div>
+          </div>
+        ))}
+        {searched && hits.length === 0 && <div className="fg-2" style={{ padding: 22, textAlign: "center" }}>No matches. Add sources first.</div>}
+      </div>
+    </>
+  );
+}
diff --git a/apps/web/components/screens/mcp.tsx b/apps/web/components/screens/mcp.tsx
new file mode 100644
index 0000000..606c9ab
--- /dev/null
+++ b/apps/web/components/screens/mcp.tsx
@@ -0,0 +1,186 @@
+"use client";
+/* External MCP - register MCP servers, discover their tools, toggle which are live.
+   Server-scoped: agents and workflow nodes consume a server's *enabled* tools. */
+import { useCallback, useEffect, useState } from "react";
+import { Icon } from "../icons";
+import { Field, Modal, Tile, Toggle } from "../primitives";
+import { api, McpClientT } from "@/lib/api";
+
+export function McpClientsScreen({ project }: { project: any }) {
+  const [rows, setRows] = useState<McpClientT[]>([]);
+  const [selId, setSelId] = useState<string | null>(null);
+  const [addOpen, setAddOpen] = useState(false);
+  // Session cache of discovered tools per server, so re-selecting one is instant
+  // (the server is the source of truth - "Re-discover" forces a fresh fetch).
+  const [toolCache, setToolCache] = useState<Record<string, { name: string; description?: string }[]>>({});
+
+  const reload = useCallback(() => {
+    if (!project?.id) return;
+    api.listMcpClients(project.id).then((r) => { setRows(r); setSelId((s) => (s && r.some((x) => x.id === s) ? s : (r[0]?.id ?? null))); }).catch(() => {});
+  }, [project?.id]);
+  useEffect(() => { reload(); }, [reload]);
+
+  const sel = rows.find((r) => r.id === selId) || null;
+
+  return (
+    <div style={{ flex: 1, display: "flex", minHeight: 0 }}>
+      {/* LEFT list */}
+      <div style={{ width: 280, flex: "none", borderRight: "1px solid var(--line)", display: "flex", flexDirection: "column", background: "var(--bg-1)" }}>
+        <div className="row spread" style={{ padding: "14px 16px", borderBottom: "1px solid var(--line)" }}>
+          <div className="t-display">External MCP</div>
+          <button className="btn btn-primary btn-sm" onClick={() => setAddOpen(true)}><Icon name="plus" size={14} /></button>
+        </div>
+        <div className="scroll-y" style={{ flex: 1, padding: 8 }}>
+          {rows.length === 0 && <div className="fg-2 t-caption" style={{ padding: 12 }}>No MCP servers yet. Click + to connect one (e.g. GitHub).</div>}
+          {rows.map((m) => {
+            const on = selId === m.id;
+            return (
+              <button key={m.id} onClick={() => setSelId(m.id)} className="col" style={{ width: "100%", textAlign: "left", padding: "11px 12px", borderRadius: 9, marginBottom: 4, border: "1px solid " + (on ? "var(--accent)" : "transparent"), background: on ? "var(--accent-glow)" : "transparent", cursor: "pointer", gap: 4 }}>
+                <div className="row spread"><span className="mono-sm" style={{ fontWeight: 700, color: "var(--fg-0)" }}>{m.name}</span><span className="typechip">{m.transport}</span></div>
+                <div className="row spread">
+                  <span className="truncate" style={{ fontSize: 11, color: "var(--fg-2)" }}>{m.url}</span>
+                  <span
+                    className="iconbtn" role="button" title="Remove server"
+                    onClick={async (e) => {
+                      e.stopPropagation();
+                      if (!window.confirm(`Remove MCP server “${m.name}”? Agents and workflows using it will lose those tools.`)) return;
+                      await api.deleteMcpClient(project.id, m.id);
+                      reload();
+                    }}
+                  ><Icon name="trash" size={13} /></span>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* RIGHT detail */}
+      <div className="grow scroll-y" style={{ padding: 24, minWidth: 0 }}>
+        {sel ? <ServerDetail key={sel.id} project={project} server={sel} onChanged={reload} cached={toolCache[sel.id] ?? null} onLoaded={(list) => setToolCache((c) => ({ ...c, [sel.id]: list }))} /> : (
+          <div className="col center" style={{ height: "100%", gap: 8, color: "var(--fg-2)" }}><Tile icon="connect" color="var(--accent)" size={48} glow /><div className="t-h2">Connect an MCP server</div></div>
+        )}
+      </div>
+
+      <AddServerModal open={addOpen} project={project} onClose={() => setAddOpen(false)} onAdded={(id) => { setAddOpen(false); reload(); setSelId(id); }} />
+    </div>
+  );
+}
+
+function ServerDetail({ project, server, onChanged, cached, onLoaded }: { project: any; server: McpClientT; onChanged: () => void; cached: { name: string; description?: string }[] | null; onLoaded: (list: { name: string; description?: string }[]) => void }) {
+  const [tools, setTools] = useState<{ name: string; description?: string }[] | null>(cached);
+  const [err, setErr] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [disabled, setDisabled] = useState<Set<string>>(new Set(server.disabled_tools || []));
+  const [saving, setSaving] = useState(false);
+
+  const discover = useCallback(() => {
+    setLoading(true); setErr(null);
+    api.discoverMcpTools(project.id, server.id)
+      .then((r) => { if (r.ok) { const list = r.tools || []; setTools(list); onLoaded(list); } else setErr(r.error || "Could not list tools from that server."); })
+      .catch((e) => setErr(String(e?.message || e)))
+      .finally(() => setLoading(false));
+  }, [project.id, server.id, onLoaded]);
+  // Only fetch when this server's tools aren't already cached this session; the server is
+  // the source of truth, so the "Re-discover" button forces a fresh fetch on demand.
+  useEffect(() => { if (cached === null) discover(); }, [server.id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  async function toggle(name: string) {
+    const next = new Set(disabled);
+    if (next.has(name)) next.delete(name); else next.add(name);
+    setDisabled(next); setSaving(true);
+    try { await api.updateMcpClient(project.id, server.id, { disabled_tools: [...next] }); onChanged(); }
+    catch { setDisabled(new Set(server.disabled_tools || [])); }
+    finally { setSaving(false); }
+  }
+
+  const enabledCount = tools ? tools.filter((t) => !disabled.has(t.name)).length : 0;
+
+  return (
+    <div style={{ maxWidth: 960 }}>
+      <div className="row spread" style={{ marginBottom: 18 }}>
+        <div className="row gap3">
+          <Tile icon="connect" color="var(--accent)" size={40} glow />
+          <div>
+            <div className="t-display mono" style={{ fontSize: 18 }}>{server.name}</div>
+            <div className="fg-2 t-caption">{server.transport} · {server.url}</div>
+          </div>
+        </div>
+        <button className="btn btn-secondary" onClick={discover} disabled={loading}><Icon name="refresh" size={15} style={loading ? { animation: "spin 1s linear infinite" } : {}} />{loading ? "Connecting…" : "Re-discover"}</button>
+      </div>
+
+      <div className="card" style={{ padding: 18 }}>
+        <div className="row spread" style={{ marginBottom: 12 }}>
+          <div className="t-h2">Tools{tools ? ` · ${enabledCount}/${tools.length} enabled` : ""}</div>
+          {saving && <span className="t-caption fg-2">Saving…</span>}
+        </div>
+        {err && <div className="card" style={{ padding: 12, color: "var(--err)", background: "var(--bg-3)" }}>{err}</div>}
+        {!err && tools === null && <div className="fg-2 t-caption">Connecting to the server…</div>}
+        {!err && tools && tools.length === 0 && <div className="fg-2 t-caption">This server exposes no tools.</div>}
+        {!err && tools && tools.length > 0 && (
+          <div className="col gap2">
+            {tools.map((t) => {
+              const on = !disabled.has(t.name);
+              return (
+                <div key={t.name} className="row spread" style={{ padding: "10px 12px", border: "1px solid var(--line)", borderRadius: 9, gap: 12, alignItems: "flex-start" }}>
+                  <div className="col" style={{ gap: 2, minWidth: 0 }}>
+                    <span className="mono-sm" style={{ fontWeight: 700, color: on ? "var(--fg-0)" : "var(--fg-2)" }}>{t.name}</span>
+                    {t.description && <span className="t-caption fg-2" style={{ whiteSpace: "normal" }}>{t.description}</span>}
+                  </div>
+                  <Toggle on={on} onChange={() => toggle(t.name)} />
+                </div>
+              );
+            })}
+          </div>
+        )}
+        <div className="fg-2 t-caption" style={{ marginTop: 12 }}>Disabled tools stay hidden from agents and workflow nodes that use this server.</div>
+      </div>
+    </div>
+  );
+}
+
+function AddServerModal({ open, onClose, project, onAdded }: { open: boolean; onClose: () => void; project: any; onAdded: (id: string) => void }) {
+  const [form, setForm] = useState({ name: "github", transport: "streamable_http", url: "", token: "" });
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+
+  useEffect(() => { if (open) { setForm({ name: "github", transport: "streamable_http", url: "", token: "" }); setErr(null); } }, [open]);
+
+  async function add() {
+    if (!form.url.trim()) { setErr("Enter the server URL."); return; }
+    setBusy(true); setErr(null);
+    try {
+      const name = (form.name || "mcp_server").trim().replace(/[^a-zA-Z0-9_-]/g, "_");
+      let headers_ref: string | undefined;
+      if (form.token.trim()) {
+        const secName = `${name}_mcp_headers`;
+        await api.createSecret(project.id, { name: secName, value: { Authorization: `Bearer ${form.token.trim()}` }, kind: "mcp_headers" });
+        headers_ref = `secret://proj/${secName}`;
+      }
+      const created = await api.createMcpClient(project.id, { name, transport: form.transport, url: form.url.trim(), headers_ref });
+      onAdded(created.id);
+    } catch (e: any) { setErr(String(e?.message || e)); } finally { setBusy(false); }
+  }
+
+  return (
+    <Modal open={open} onClose={onClose} title="Connect MCP server" width={520}
+      footer={<><button className="btn btn-ghost" onClick={onClose}>Cancel</button><button className="btn btn-primary" onClick={add} disabled={busy}>{busy ? "Connecting…" : "Add server"}</button></>}>
+      <div className="row gap2">
+        <Field label="Name"><input className="input mono" value={form.name} onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))} placeholder="github" /></Field>
+        <Field label="Transport">
+          <select className="select" value={form.transport} onChange={(e) => setForm((f) => ({ ...f, transport: e.target.value }))}>
+            {["streamable_http", "sse", "stdio"].map((t) => <option key={t}>{t}</option>)}
+          </select>
+        </Field>
+      </div>
+      <Field label="Server URL" help="The MCP endpoint. GitHub's hosted server is https://api.githubcopilot.com/mcp/">
+        <input className="input mono" value={form.url} onChange={(e) => setForm((f) => ({ ...f, url: e.target.value }))} placeholder="https://api.githubcopilot.com/mcp/" />
+      </Field>
+      <Field label="Bearer token" help="Optional. For servers that need auth (e.g. a GitHub PAT). Saved to Settings → Secrets (encrypted) and sent as the Authorization header.">
+        <input className="input mono" type="password" value={form.token} onChange={(e) => setForm((f) => ({ ...f, token: e.target.value }))} placeholder="ghp_…" />
+      </Field>
+      {err && <div className="card" style={{ padding: 12, color: "var(--err)", marginTop: 4 }}>{err}</div>}
+      <div className="fg-2 t-caption" style={{ marginTop: 8 }}>Forge connects and lists the server's tools; toggle which ones agents and workflows can use.</div>
+    </Modal>
+  );
+}
diff --git a/apps/web/components/screens/platform.tsx b/apps/web/components/screens/platform.tsx
new file mode 100644
index 0000000..17553f2
--- /dev/null
+++ b/apps/web/components/screens/platform.tsx
@@ -0,0 +1,408 @@
+"use client";
+/* Screens for the platform features: Channels, Triggers, Datasets (eval),
+   and the live-agent Handoff inbox. */
+import { useCallback, useEffect, useState } from "react";
+import { Icon } from "../icons";
+import { Field, Modal } from "../primitives";
+import { api, Channel, Dataset, EvalReport, EvalResult, Handoff, Trigger, Workflow, openSSE } from "@/lib/api";
+
+/* Validate the Cases JSON before it is POSTed: it must be a non-empty array of objects
+   that each carry a string `input`. Returns the parsed cases (or null) + a human error so
+   the modal can block Create instead of silently saving an empty / un-runnable dataset. */
+function parseCases(text: string): { cases: any[] | null; error: string | null } {
+  let v: unknown;
+  try { v = JSON.parse(text); } catch { return { cases: null, error: "Not valid JSON." }; }
+  if (!Array.isArray(v)) return { cases: null, error: "Expected a JSON array of cases." };
+  if (v.length === 0) return { cases: null, error: "Add at least one case." };
+  for (const c of v) {
+    if (typeof c !== "object" || c === null || typeof (c as any).input !== "string")
+      return { cases: null, error: 'Each case needs a string "input" field.' };
+  }
+  return { cases: v as any[], error: null };
+}
+
+const EMPTY_DATASET_FORM = { name: "", workflow_id: "", score_mode: "contains", items: '[\n  {"input": "what are your hours?", "expected": "9am"}\n]' };
+
+/* One labelled block in an expanded eval result (input / expected / answer / reason). */
+function ResultField({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="col" style={{ gap: 3 }}>
+      <div className="t-micro">{label}</div>
+      <div className="t-caption" style={{ whiteSpace: "pre-wrap", wordBreak: "break-word", color: "var(--fg-1)", maxHeight: 220, overflowY: "auto" }}>{value}</div>
+    </div>
+  );
+}
+
+/* Per-case run metrics, shown as chips once a case finishes. */
+const fmtLatency = (ms?: number) => (ms == null ? "" : ms >= 1000 ? `${(ms / 1000).toFixed(1)}s` : `${ms}ms`);
+const fmtTokens = (t?: number) => (t == null ? "" : t >= 1000 ? `${(t / 1000).toFixed(1)}k tok` : `${t} tok`);
+
+/* Status pill for one case: running (spinner), pass, fail, or an inconclusive status
+   (run_failed / unavailable / error) rendered as a warning rather than a plain fail. */
+function CaseStatus({ result }: { result?: EvalResult }) {
+  if (!result) return <span className="pill pill-muted row gap1" style={{ alignItems: "center" }}><Icon name="refresh" size={11} className="spin" />running…</span>;
+  if (result.passed) return <span className="pill pill-ok">pass</span>;
+  const inconclusive = result.status && result.status !== "scored";
+  if (inconclusive) return <span className="pill pill-warn" title={result.reason || undefined}>{result.status === "run_failed" ? "run failed" : result.status}</span>;
+  return <span className="pill pill-err">fail</span>;
+}
+
+const SCORING_HELP: Record<string, string> = {
+  contains: "Pass if the answer contains the expected text (case-insensitive).",
+  exact: "Pass if the answer exactly equals the expected text.",
+  regex: "Pass if the expected pattern (regex) matches the answer.",
+  judge: "An LLM grades whether the answer satisfies the expected behavior.",
+};
+
+function Header({ title, subtitle, action }: { title: string; subtitle?: string; action?: React.ReactNode }) {
+  return (
+    <div className="row spread" style={{ marginBottom: 18 }}>
+      <div>
+        <div className="t-display">{title}</div>
+        {subtitle && <div className="fg-1" style={{ marginTop: 2 }}>{subtitle}</div>}
+      </div>
+      {action}
+    </div>
+  );
+}
+
+function Shell({ children }: { children: React.ReactNode }) {
+  return <div className="scroll-y" style={{ flex: 1, padding: "24px 28px" }}><div className="fade-up" style={{ maxWidth: 1600, margin: "0 auto" }}>{children}</div></div>;
+}
+
+function useWorkflows(pid?: string) {
+  const [wfs, setWfs] = useState<Workflow[]>([]);
+  useEffect(() => { if (pid) api.listWorkflows(pid).then(setWfs).catch(() => setWfs([])); }, [pid]);
+  return wfs;
+}
+
+/* ============ CHANNELS ============ */
+type ChannelForm = { id?: string; type: string; name: string; workflow_id: string; config: any };
+const BLANK_CHANNEL: ChannelForm = { type: "email", name: "", workflow_id: "", config: {} };
+
+export function ChannelsScreen({ project }: { project: any }) {
+  const [channels, setChannels] = useState<Channel[]>([]);
+  const wfs = useWorkflows(project?.id);
+  const [open, setOpen] = useState(false);
+  const [form, setForm] = useState<ChannelForm>(BLANK_CHANNEL);
+  const reload = useCallback(() => { if (project?.id) api.listChannels(project.id).then(setChannels).catch(() => setChannels([])); }, [project?.id]);
+  useEffect(() => { reload(); }, [reload]);
+
+  const setSmtp = (patch: any) => setForm((f) => ({ ...f, config: { ...f.config, smtp: { ...(f.config.smtp || {}), ...patch } } }));
+  const smtp = (form.config || {}).smtp || {};
+
+  async function save() {
+    if (!form.name.trim()) return;
+    if (form.id) await api.updateChannel(project.id, form.id, { name: form.name, workflow_id: form.workflow_id || undefined, config: form.config });
+    else await api.createChannel(project.id, { type: form.type, name: form.name, workflow_id: form.workflow_id || undefined, config: form.config });
+    setOpen(false); setForm(BLANK_CHANNEL); reload();
+  }
+  function edit(ch: Channel) { setForm({ id: ch.id, type: ch.type, name: ch.name, workflow_id: ch.workflow_id || "", config: ch.config || {} }); setOpen(true); }
+  async function remove(id: string) { if (window.confirm("Delete this channel?")) { await api.deleteChannel(project.id, id); reload(); } }
+  const urlOf = (ch: Channel) => ch.inbound_url;
+
+  return (
+    <Shell>
+      <Header title="Channels" subtitle="Deploy a workflow to an email surface."
+        action={<button className="btn btn-primary btn-sm" onClick={() => { setForm(BLANK_CHANNEL); setOpen(true); }}><Icon name="plus" size={14} />New channel</button>} />
+      <div className="col gap2">
+        {channels.map((ch) => (
+          <div key={ch.id} className="card" style={{ padding: 14 }}>
+            <div className="row spread">
+              <div className="row gap2"><Icon name="msg" size={16} /><span className="t-h3">{ch.name}</span><span className="typechip">{ch.type}</span>{!ch.enabled && <span className="pill pill-muted">disabled</span>}</div>
+              <div className="row gap2"><button className="btn btn-secondary btn-sm" onClick={() => edit(ch)}><Icon name="edit" size={13} />Configure</button><button className="iconbtn" title="Delete" onClick={() => remove(ch.id)}><Icon name="trash" size={14} /></button></div>
+            </div>
+            {urlOf(ch) && <div className="mono-sm fg-2" style={{ marginTop: 8, wordBreak: "break-all" }}>{urlOf(ch)}</div>}
+          </div>
+        ))}
+        {channels.length === 0 && <div className="fg-2 t-caption">No channels yet. Create one to deploy this project's workflow.</div>}
+      </div>
+      <Modal open={open} onClose={() => setOpen(false)} title={form.id ? "Configure channel" : "New channel"} width={500}
+        footer={<><button className="btn btn-ghost" onClick={() => setOpen(false)}>Cancel</button><button className="btn btn-primary" onClick={save}>{form.id ? "Save" : "Create"}</button></>}>
+        <Field label="Name"><input className="input" value={form.name} onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))} placeholder="Support channel" /></Field>
+        <Field label="Workflow" help="Which workflow handles messages on this channel."><select className="select" value={form.workflow_id} onChange={(e) => setForm((f) => ({ ...f, workflow_id: e.target.value }))}><option value="">First active workflow</option>{wfs.map((w) => <option key={w.id} value={w.id}>{w.name}</option>)}</select></Field>
+
+        {form.type === "email" && (
+          <>
+            <div className="field-help" style={{ marginTop: 0 }}>Outbound SMTP for replies. Inbound mail is posted to the channel's inbound URL by your provider (Mailgun/SendGrid/Postmark) or an IMAP relay.</div>
+            <div className="row gap3">
+              <Field label="SMTP host"><input className="input mono" value={smtp.host || ""} onChange={(e) => setSmtp({ host: e.target.value })} placeholder="smtp.sendgrid.net" /></Field>
+              <Field label="Port"><input className="input mono" type="number" value={smtp.port ?? 587} onChange={(e) => setSmtp({ port: Number(e.target.value) })} /></Field>
+            </div>
+            <div className="row gap3">
+              <Field label="Username"><input className="input mono" value={smtp.username || ""} onChange={(e) => setSmtp({ username: e.target.value })} /></Field>
+              <Field label="From address"><input className="input mono" value={smtp.from || ""} onChange={(e) => setSmtp({ from: e.target.value })} placeholder="support@yourco.com" /></Field>
+            </div>
+            <Field label="Password secret ref" help="A secret holding the SMTP password (Settings → Secrets)."><input className="input mono" value={smtp.password_ref || ""} onChange={(e) => setSmtp({ password_ref: e.target.value })} placeholder="secret://proj/smtp_password" /></Field>
+          </>
+        )}
+      </Modal>
+    </Shell>
+  );
+}
+
+/* ============ TRIGGERS ============ */
+export function TriggersScreen({ project }: { project: any }) {
+  const [triggers, setTriggers] = useState<Trigger[]>([]);
+  useEffect(() => { if (project?.id) api.listTriggers(project.id).then(setTriggers).catch(() => setTriggers([])); }, [project?.id]);
+  return (
+    <Shell>
+      <Header title="Triggers" subtitle="Event entry points, synced from your workflows' trigger nodes (Webhook / Schedule / Email / Chat / App Event)." />
+      <div className="col gap2">
+        {triggers.map((t) => (
+          <div key={t.id} className="card" style={{ padding: 14 }}>
+            <div className="row spread">
+              <div className="row gap2"><Icon name="bolt" size={15} /><span className="t-h3" style={{ textTransform: "capitalize" }}>{t.kind.replace("_", " ")}</span><span className="typechip">{t.node_id}</span>{!t.enabled && <span className="pill pill-muted">disabled</span>}</div>
+              {t.last_fired_at && <span className="fg-2 t-caption">last fired {new Date(t.last_fired_at).toLocaleString()}</span>}
+            </div>
+            {t.webhook_url && <div className="mono-sm fg-2" style={{ marginTop: 8, wordBreak: "break-all" }}>POST {t.webhook_url}</div>}
+            {t.config?.cron && <div className="mono-sm fg-2" style={{ marginTop: 8 }}>cron: {t.config.cron}</div>}
+            {t.config?.every_minutes && <div className="mono-sm fg-2" style={{ marginTop: 8 }}>every {t.config.every_minutes} min</div>}
+            {t.config?.poll_url && <div className="mono-sm fg-2" style={{ marginTop: 8, wordBreak: "break-all" }}>polls {t.config.poll_url}</div>}
+          </div>
+        ))}
+        {triggers.length === 0 && <div className="fg-2 t-caption">No triggers. Add a trigger node (Webhook / Schedule / …) to a workflow and publish it.</div>}
+      </div>
+    </Shell>
+  );
+}
+
+/* ============ DATASETS / EVAL ============ */
+export function DatasetsScreen({ project }: { project: any }) {
+  const [datasets, setDatasets] = useState<Dataset[]>([]);
+  const wfs = useWorkflows(project?.id);
+  const [open, setOpen] = useState(false);
+  const [editing, setEditing] = useState<Dataset | null>(null);
+  const [form, setForm] = useState(EMPTY_DATASET_FORM);
+  const [report, setReport] = useState<EvalReport | null>(null);
+  const [ranDataset, setRanDataset] = useState<Dataset | null>(null);
+  const [expanded, setExpanded] = useState<Set<number>>(new Set());
+  const [runError, setRunError] = useState<string | null>(null);
+  const [running, setRunning] = useState<string | null>(null);
+  // Live streaming state: the ordered case list (from the `start` frame) and each case's result
+  // as it finishes (`item` frames), so the result view renders immediately and fills in live.
+  const [liveItems, setLiveItems] = useState<{ index: number; input: string; expected: string }[] | null>(null);
+  const [liveResults, setLiveResults] = useState<Record<number, EvalResult>>({});
+  const reload = useCallback(() => { if (project?.id) api.listDatasets(project.id).then(setDatasets).catch(() => setDatasets([])); }, [project?.id]);
+  useEffect(() => { reload(); }, [reload]);
+
+  // Guard the form so we never save a dataset that can't be run: a name, a bound
+  // workflow, and a valid non-empty case list are all required.
+  const { cases, error: casesError } = parseCases(form.items);
+  const canSave = form.name.trim() !== "" && form.workflow_id !== "" && !!cases;
+
+  function openCreate() { setEditing(null); setForm(EMPTY_DATASET_FORM); setOpen(true); }
+  function openEdit(d: Dataset) {
+    setEditing(d);
+    setForm({ name: d.name, workflow_id: d.workflow_id || "", score_mode: d.score_mode, items: JSON.stringify(d.items ?? [], null, 2) });
+    setOpen(true);
+  }
+  async function save() {
+    if (!canSave || !cases) return;
+    const body = { name: form.name.trim(), workflow_id: form.workflow_id, score_mode: form.score_mode, items: cases };
+    if (editing) await api.updateDataset(project.id, editing.id, body);
+    else await api.createDataset(project.id, body);
+    setOpen(false); reload();
+  }
+  async function remove(d: Dataset) {
+    if (!window.confirm(`Delete dataset "${d.name}"?\n\nThis removes its cases and last run result. This cannot be undone.`)) return;
+    await api.deleteDataset(project.id, d.id);
+    if (editing?.id === d.id) setOpen(false);
+    reload();
+  }
+  async function run(d: Dataset) {
+    // Seed the live view from the dataset's own cases so every row shows up the instant Run is
+    // clicked (before the first server frame), then stream results in as each case finishes.
+    const seed = (d.items || []).map((it: any, i: number) => ({ index: i, input: it?.input ?? "", expected: it?.expected ?? "" }));
+    setRunning(d.id); setReport(null); setRunError(null); setRanDataset(d); setExpanded(new Set());
+    setLiveItems(seed); setLiveResults({});
+    try {
+      await openSSE(api.runDatasetStreamUrl(project.id, d.id), (frame) => {
+        if (frame.event === "start") setLiveItems(frame.data.items);
+        else if (frame.event === "item") { const r = frame.data as EvalResult & { index: number }; setLiveResults((prev) => ({ ...prev, [r.index]: r })); }
+        else if (frame.event === "done") setReport(frame.data as EvalReport);
+        else if (frame.event === "error") setRunError(frame.data?.error || "The run failed.");
+      }, { method: "POST" });
+    } catch (e: any) {
+      setRunError(e?.message || "The run request failed.");
+    } finally {
+      setRunning(null); reload();
+    }
+  }
+
+  // Live-view derived numbers (used by the result card below).
+  const rows = liveItems;
+  const total = rows?.length ?? 0;
+  const doneResults = Object.values(liveResults);
+  const doneCount = doneResults.length;
+  const passSoFar = doneResults.filter((r) => r.passed).length;
+  const isRunningNow = running !== null;
+  const summary = report?.summary;
+  const totalTokens = summary?.tokens ?? doneResults.reduce((a, r) => a + (r.tokens || 0), 0);
+  const progressPct = total ? Math.round((doneCount / total) * 100) : 0;
+
+  return (
+    <Shell>
+      <Header title="Evaluations" subtitle="Run input → expected-output datasets against a workflow to score quality and catch regressions."
+        action={<button className="btn btn-primary btn-sm" onClick={openCreate}><Icon name="plus" size={14} />New dataset</button>} />
+      <div className="col gap2">
+        {datasets.map((d) => (
+          <div key={d.id} className="card" style={{ padding: 14 }}>
+            <div className="row spread">
+              <div className="row gap2"><Icon name="validate" size={15} /><span className="t-h3">{d.name}</span><span className="typechip">{d.score_mode}</span><span className="fg-2 t-caption">{d.n_items} cases</span>{!d.workflow_id && <span className="pill pill-warn">no workflow</span>}</div>
+              <div className="row gap2">
+                {d.last_pass_rate != null && <span className={`pill ${d.last_pass_rate >= 0.8 ? "pill-ok" : "pill-muted"}`}>{Math.round(d.last_pass_rate * 100)}% pass</span>}
+                <button className="btn btn-secondary btn-sm" disabled={running === d.id || !d.workflow_id} title={!d.workflow_id ? "Bind a workflow to this dataset before running it" : undefined} onClick={() => run(d)}>{running === d.id ? <Icon name="refresh" size={13} className="spin" /> : <Icon name="play" size={13} />}{running === d.id ? (total ? `Running ${doneCount}/${total}` : "Running…") : "Run"}</button>
+                <button className="iconbtn" title="Edit dataset" onClick={() => openEdit(d)}><Icon name="edit" size={15} /></button>
+                <button className="iconbtn" title="Delete dataset" onClick={() => remove(d)}><Icon name="trash" size={15} /></button>
+              </div>
+            </div>
+          </div>
+        ))}
+        {datasets.length === 0 && <div className="fg-2 t-caption">No datasets yet.</div>}
+      </div>
+      {runError && (
+        <div className="card" style={{ padding: 14, marginTop: 16, borderColor: "var(--err)", background: "var(--err-bg)" }}>
+          <div className="t-h3" style={{ color: "var(--err)", marginBottom: 2 }}>Run failed</div>
+          <div className="t-caption" style={{ color: "var(--fg-1)" }}>{runError}</div>
+        </div>
+      )}
+      {rows && (
+        <div className="card" style={{ padding: 16, marginTop: 16 }}>
+          <div className="row spread" style={{ marginBottom: 4 }}>
+            <div className="t-h3">
+              {summary
+                ? <>Last run{ranDataset ? ` · ${ranDataset.name}` : ""} · {summary.passed}/{summary.total} passed ({Math.round(summary.pass_rate * 100)}%)</>
+                : <>Running{ranDataset ? ` · ${ranDataset.name}` : ""} · {doneCount}/{total} done{doneCount > 0 ? ` · ${passSoFar} passed` : ""}</>}
+            </div>
+            <div className="row gap2">
+              {totalTokens > 0 && <span className="chip chip-mono"><Icon name="bolt" size={12} />{fmtTokens(totalTokens)}</span>}
+              {isRunningNow && <Icon name="refresh" size={14} className="spin" />}
+            </div>
+          </div>
+          {/* Progress bar: fills as cases finish so the run is visibly in motion. */}
+          <div style={{ height: 4, borderRadius: 2, background: "var(--bg-3)", overflow: "hidden", margin: "6px 0 10px" }}>
+            <div style={{ height: "100%", width: `${progressPct}%`, background: summary ? "var(--ok)" : "var(--accent)", transition: "width .3s var(--ease)" }} />
+          </div>
+          <div className="fg-2 t-caption" style={{ marginBottom: 4 }}>Select a finished case to see its output{ranDataset?.score_mode === "judge" ? " and the judge's reason" : ""}.</div>
+          {rows.map((row) => {
+            const i = row.index;
+            const r = liveResults[i];
+            const done = !!r;
+            const isOpen = expanded.has(i);
+            return (
+              <div key={i} style={{ borderTop: "1px solid var(--line)" }}>
+                <button className="row spread" style={{ width: "100%", padding: "8px 0", background: "none", border: "none", cursor: done ? "pointer" : "default", textAlign: "left", color: "inherit", opacity: done ? 1 : 0.7 }}
+                  onClick={() => { if (done) setExpanded((prev) => { const n = new Set(prev); if (n.has(i)) n.delete(i); else n.add(i); return n; }); }}>
+                  <span className="row gap2" style={{ flex: 1, minWidth: 0 }}>
+                    <Icon name={isOpen ? "chevdown" : "chevright"} size={14} style={{ opacity: done ? 1 : 0.3 }} />
+                    <span className="t-caption truncate">{(r?.input ?? row.input) || "(empty input)"}</span>
+                  </span>
+                  <span className="row gap2" style={{ alignItems: "center", flexShrink: 0 }}>
+                    {done && r.latency_ms != null && <span className="fg-2 t-micro row gap1" style={{ alignItems: "center" }}><Icon name="clock" size={11} />{fmtLatency(r.latency_ms)}</span>}
+                    {done && r.tokens != null && r.tokens > 0 && <span className="fg-2 t-micro">{fmtTokens(r.tokens)}</span>}
+                    <CaseStatus result={r} />
+                  </span>
+                </button>
+                {isOpen && done && (
+                  <div className="col" style={{ gap: 10, padding: "2px 0 12px 22px" }}>
+                    {r.expected && <ResultField label="Expected" value={r.expected} />}
+                    <ResultField label="Output" value={r.answer || "(no output)"} />
+                    {r.reason && <ResultField label={ranDataset?.score_mode === "judge" ? "Judge reason" : "Reason"} value={r.reason} />}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+      <Modal open={open} onClose={() => setOpen(false)} title={editing ? "Edit dataset" : "New dataset"} width={520}
+        footer={<><button className="btn btn-ghost" onClick={() => setOpen(false)}>Cancel</button><button className="btn btn-primary" onClick={save} disabled={!canSave}>{editing ? "Save" : "Create"}</button></>}>
+        <Field label="Name" required><input className="input" value={form.name} onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))} placeholder="Smoke tests" /></Field>
+        <Field label="Workflow" required help={wfs.length === 0 ? "No workflows yet — create and publish one first." : "The workflow each case is run against."}><select className="select" value={form.workflow_id} onChange={(e) => setForm((f) => ({ ...f, workflow_id: e.target.value }))}><option value="">Select…</option>{wfs.map((w) => <option key={w.id} value={w.id}>{w.name}</option>)}</select></Field>
+        <Field label="Scoring" help={SCORING_HELP[form.score_mode]}><select className="select" value={form.score_mode} onChange={(e) => setForm((f) => ({ ...f, score_mode: e.target.value }))}><option value="contains">contains</option><option value="exact">exact</option><option value="regex">regex</option><option value="judge">LLM judge</option></select></Field>
+        <Field label="Cases (JSON)" help='Array of {"input": "...", "expected": "..."}'>
+          <textarea className="textarea mono" rows={6} style={{ fontSize: 12 }} value={form.items} onChange={(e) => setForm((f) => ({ ...f, items: e.target.value }))} />
+          {casesError && <div className="t-caption" style={{ color: "var(--err)", marginTop: 6 }}>{casesError}</div>}
+        </Field>
+      </Modal>
+    </Shell>
+  );
+}
+
+/* ============ HANDOFF INBOX ============ */
+export function HandoffScreen({ project }: { project: any }) {
+  const [items, setItems] = useState<Handoff[]>([]);
+  const [reply, setReply] = useState<Record<string, string>>({});
+  const [filter, setFilter] = useState<"open" | "closed">("open");
+  const [openCount, setOpenCount] = useState(0);
+  const reload = useCallback(async () => {
+    if (!project?.id) return;
+    try {
+      const current = await api.listHandoffs(project.id, filter);
+      setItems(current);
+      if (filter === "open") setOpenCount(current.length);
+      else setOpenCount((await api.listHandoffs(project.id, "open")).length);
+    } catch { /* keep the last good queue visible during a transient refresh failure */ }
+  }, [project?.id, filter]);
+  useEffect(() => {
+    reload();
+    const timer = window.setInterval(reload, 10_000);
+    return () => window.clearInterval(timer);
+  }, [reload]);
+
+  async function send(h: Handoff) {
+    const msg = (reply[h.id] || "").trim();
+    if (!msg) return;
+    await api.replyHandoff(project.id, h.id, msg);
+    setReply((r) => ({ ...r, [h.id]: "" }));
+    window.dispatchEvent(new CustomEvent("forge:counts-changed"));
+    reload();
+  }
+
+  return (
+    <Shell>
+      <Header
+        title="Agent inbox"
+        subtitle="Conversations escalated to a human. Replying resumes the paused run and delivers your message over its channel."
+        action={(
+          <div className="row gap2">
+            <span className="badge" title="Open handoffs">{openCount} unread</span>
+            {(["open", "closed"] as const).map((value) => (
+              <button
+                key={value}
+                className={filter === value ? "btn btn-secondary btn-sm" : "btn btn-ghost btn-sm"}
+                onClick={() => setFilter(value)}
+              >
+                {value === "open" ? "Open" : "Closed"}
+              </button>
+            ))}
+          </div>
+        )}
+      />
+      <div className="col gap2">
+        {items.map((h) => (
+          <div key={h.id} className="card" style={{ padding: 14 }}>
+            <div className="row spread" style={{ marginBottom: 8 }}>
+              <div className="row gap2"><Icon name="user" size={15} /><span className="t-h3">{h.customer || "Customer"}</span></div>
+              <div className="row gap2">
+                <span className="fg-2 t-caption">{h.reason}</span>
+                {filter === "closed" && <span className="pill">{h.status}</span>}
+              </div>
+            </div>
+            {h.customer_message && <div style={{ background: "var(--bg-3)", padding: "8px 11px", borderRadius: 10, fontSize: 13, marginBottom: 8 }}>{h.customer_message}</div>}
+            {filter === "open" ? (
+              <div className="row gap2">
+                <input className="input" placeholder="Type your reply…" value={reply[h.id] || ""} onChange={(e) => setReply((r) => ({ ...r, [h.id]: e.target.value }))} onKeyDown={(e) => e.key === "Enter" && send(h)} style={{ flex: 1 }} />
+                <button className="btn btn-primary btn-sm" onClick={() => send(h)} disabled={!(reply[h.id] || "").trim()}><Icon name="bolt" size={13} />Reply & resume</button>
+              </div>
+            ) : (
+              <div className="t-caption fg-2">Closed {h.at ? `· opened ${new Date(h.at).toLocaleString()}` : ""}</div>
+            )}
+          </div>
+        ))}
+        {items.length === 0 && <div className="fg-2 t-caption">{filter === "open" ? "No open handoffs. Add a Human Handoff node to a workflow to route conversations here." : "No closed handoffs yet."}</div>}
+      </div>
+    </Shell>
+  );
+}
diff --git a/apps/web/components/screens/playground.tsx b/apps/web/components/screens/playground.tsx
new file mode 100644
index 0000000..98534c1
--- /dev/null
+++ b/apps/web/components/screens/playground.tsx
@@ -0,0 +1,418 @@
+"use client";
+/* Playground - chat that runs a real workflow over SSE with token-by-token streaming. */
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Icon } from "../icons";
+import { Tile } from "../primitives";
+import { api, openSSE, Workflow, ComponentT } from "@/lib/api";
+import { fmtUSD, buildNodeLabels, nodeLabel } from "@/lib/data";
+import { Markdown } from "../markdown";
+import { ComponentRenderer } from "../component-renderer";
+import { ReplyAccumulator, type Part, type ComponentInstance } from "@/lib/chat-parts";
+import Mustache from "mustache";
+
+interface ChatMsg { role: "user" | "assistant"; content?: string; parts?: Part[] }
+interface Step { node: string }
+interface Activity { id: string; kind: string; name: string; done: boolean; error?: boolean }
+
+export function PlaygroundScreen({ project }: { project: any }) {
+  const [wf, setWf] = useState<Workflow | null>(null);
+  const [wfs, setWfs] = useState<Workflow[]>([]);
+  const [loadErr, setLoadErr] = useState<string | null>(null);
+  const [input, setInput] = useState("");
+  const [msgs, setMsgs] = useState<ChatMsg[]>([]);
+  const [streaming, setStreaming] = useState("");
+  const [steps, setSteps] = useState<Step[]>([]);
+  const [activity, setActivity] = useState<Activity[]>([]);
+  const [running, setRunning] = useState(false);
+  const [meter, setMeter] = useState<{ tokens: number; cost: number } | null>(null);
+  const [pendingInterrupt, setPendingInterrupt] = useState<{ runId: string; payload: any } | null>(null);
+  const [resuming, setResuming] = useState(false);
+  const [compDefs, setCompDefs] = useState<Record<string, ComponentT>>({});
+  const [liveParts, setLiveParts] = useState<Part[]>([]);  // in-flight assistant reply parts, rendered live (audit H3)
+  // Resolve node ids (what the run stream emits) to the friendly names shown on the canvas, so the
+  // Run steps read like the graph the operator built rather than raw ids.
+  const nodeLabels = useMemo(() => buildNodeLabels(wf), [wf]);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  // One backend thread per chat session: the checkpointer holds the conversation, so
+  // each turn sends ONLY the new message (no full-transcript replay).
+  const threadRef = useRef<string | null>(null);
+  // Aborts the in-flight SSE stream when the user hits Stop.
+  const abortRef = useRef<AbortController | null>(null);
+
+  useEffect(() => {
+    if (!project?.id) return;
+    threadRef.current = null;
+    setWf(null); setLoadErr(null); setMsgs([]); setSteps([]); setMeter(null);
+    api.listComponents(project.id).then((cs) => setCompDefs(Object.fromEntries(cs.map((c) => [c.id, c])))).catch(() => {});
+    api.listWorkflows(project.id)
+      .then((ws) => {
+        setWfs(ws);
+        const active = ws.find((w) => w.status === "active") || ws[0] || null;
+        setWf(active);
+        if (!active) setLoadErr("No workflows in this project yet. Create one in Workflows, or ask the Forge Assistant to build one.");
+      })
+      .catch((e) => setLoadErr(String(e.message || e)));
+  }, [project?.id]);
+
+  useEffect(() => { scrollRef.current?.scrollTo({ top: 1e9, behavior: "smooth" }); }, [msgs, streaming, steps, liveParts]);
+
+  async function send(textArg?: string) {
+    const text = (typeof textArg === "string" ? textArg : input).trim();
+    if (!text || !wf || running) return;
+    if (typeof textArg !== "string") setInput("");
+    setMsgs((m) => [...m, { role: "user", content: text }]);
+    setStreaming(""); setSteps([]); setActivity([]); setMeter(null); setRunning(true); setLiveParts([]);
+    let finalAnswer = "";
+    // The reply is an ordered list of parts (text + components). Components are positioned by the
+    // [[forge:component:ID]] markers the agent writes into its text - NOT by the order their
+    // frames arrive - so a widget lands in its natural place instead of always at the top.
+    const acc = new ReplyAccumulator();
+    try {
+      // The thread's checkpointer holds prior turns, so send only the new message when a
+      // thread exists; the first turn establishes the thread. The run always acts as the logged-in
+      // operator (the backend sets end_user from the session), so per-user auth providers resolve
+      // this user's own connected credential — exactly like the Workflow test panel.
+      const run = await api.createRun(
+        project.id, wf.id,
+        { messages: [{ role: "user", content: text }] },
+        threadRef.current || undefined,
+      );
+      threadRef.current = run.thread_id;
+      let interrupted = false;
+      const url = api.runStreamUrl(project.id, wf.id, run.id);
+      const controller = new AbortController();
+      abortRef.current = controller;
+      await openSSE(url, (f) => {
+        if (f.event === "messages" && f.data?.content) {
+          acc.addText(f.data.content);
+          setStreaming(acc.text);
+          setLiveParts(acc.parts({ streaming: true }));
+        } else if ((f.event === "node_start" || f.event === "updates") && f.data) {
+          const node = f.event === "node_start" ? f.data.node : Object.keys(f.data || {})[0];
+          if (node) setSteps((s) => (s.some((x) => x.node === node) ? s : [...s, { node }]));
+        } else if (f.event === "activity" && f.data?.id) {
+          const a = f.data;
+          if (a.phase === "start") {
+            setActivity((xs) => xs.some((x) => x.id === a.id) ? xs : [...xs, { id: a.id, kind: a.kind, name: a.name, done: false }]);
+          } else if (a.phase === "end") {
+            setActivity((xs) => xs.map((x) => (x.id === a.id ? { ...x, done: true, error: !!a.error } : x)));
+          }
+        } else if (f.event === "custom" && f.data?.channel === "component" && f.data?.payload) {
+          acc.addComponent(f.data.payload as ComponentInstance);
+          setLiveParts(acc.parts({ streaming: true }));
+        } else if (f.event === "done") {
+          finalAnswer = f.data?.answer || "";
+          setMeter({ tokens: f.data?.total_tokens ?? 0, cost: f.data?.total_cost_usd ?? 0 });
+        } else if (f.event === "interrupt") {
+          interrupted = true;
+          setPendingInterrupt({ runId: run.id, payload: f.data });
+        } else if (f.event === "error") {
+          finalAnswer = `⚠ ${f.data?.message || "run failed"}`;
+        }
+      }, { signal: controller.signal });
+      if (interrupted) {
+        // Preserve anything streamed before the pause (audit M4) - mirror the finalize commit.
+        if (acc.hasComponents() || acc.text.trim()) {
+          setMsgs((m) => [...m, acc.hasComponents()
+            ? { role: "assistant", parts: acc.parts() }
+            : { role: "assistant", content: acc.text }]);
+        }
+        setStreaming(""); setRunning(false); setLiveParts([]);
+        return; // approval card takes over
+      }
+    } catch (e: any) {
+      // A user-initiated Stop aborts the fetch - commit whatever streamed, no error banner.
+      if (e?.name !== "AbortError") finalAnswer = `⚠ ${e.message || e}`;
+    } finally {
+      abortRef.current = null;
+      setStreaming("");
+      setRunning(false);
+      setLiveParts([]);
+    }
+    // resolveText reconciles the streamed buffer with the authoritative final answer / error
+    // (covers non-LLM nodes that don't stream tokens) without dropping it (audit H2).
+    const finalText = acc.resolveText(finalAnswer);
+    if (acc.hasComponents()) {
+      setMsgs((m) => [...m, { role: "assistant", parts: acc.parts({ finalText }) }]);
+    } else {
+      setMsgs((m) => [...m, { role: "assistant", content: finalText || "(no output)" }]);
+    }
+  }
+
+  /** Pull the human-facing prompt + decision options out of the interrupt payload.
+      Handles both shapes: the human_input node ({prompt, allowed_decisions}) and
+      HumanInTheLoopMiddleware (action requests; resume wants {decisions:[{type}]}). */
+  function parseInterrupt(payload: any): { prompt: string; decisions: string[]; middleware: boolean } {
+    const flat = (x: any): any[] => (Array.isArray(x) ? x.flatMap(flat) : [x]);
+    const items = flat(payload).filter(Boolean);
+    const values = items.map((i) => (i && typeof i === "object" && "value" in i ? i.value : i));
+    for (const v of values) {
+      if (v && typeof v === "object" && v.prompt) {
+        return { prompt: String(v.prompt), decisions: v.allowed_decisions || ["approve", "reject"], middleware: false };
+      }
+      if (v && typeof v === "object" && (v.action_requests || v.action_request || v.action)) {
+        const reqs = v.action_requests || [v.action_request || v];
+        const desc = reqs.map((r: any) => r.description || `${r.action || r.name || "tool"}(${JSON.stringify(r.args || {}).slice(0, 80)})`).join("; ");
+        return { prompt: `Approve tool call: ${desc}`, decisions: ["approve", "reject"], middleware: true };
+      }
+    }
+    return { prompt: "This run paused for your approval.", decisions: ["approve", "reject"], middleware: false };
+  }
+
+  async function resume(decision: string) {
+    if (!pendingInterrupt || !wf || resuming) return;
+    const { middleware } = parseInterrupt(pendingInterrupt.payload);
+    setResuming(true);
+    try {
+      const value = middleware ? { decisions: [{ type: decision }] } : decision;
+      const res = await api.resumeRun(project.id, wf.id, pendingInterrupt.runId, value);
+      const msgsOut = res.messages || [];
+      const last = [...msgsOut].reverse().find((m: any) => (m.type === "ai" || m.role === "assistant") && m.content);
+      const content = last ? (typeof last.content === "string" ? last.content : JSON.stringify(last.content)) : (res.error || "(resumed)");
+      setMsgs((m) => [...m, { role: "assistant", content: res.interrupted ? content + "\n⏸ paused again for another approval - check Traces." : content }]);
+    } catch (e: any) {
+      setMsgs((m) => [...m, { role: "assistant", content: `⚠ resume failed: ${e.message || e}` }]);
+    } finally {
+      setPendingInterrupt(null);
+      setResuming(false);
+    }
+  }
+
+  // Abort the in-flight SSE run. The stream reader rejects with AbortError, which send()
+  // treats as a graceful stop (partial output is committed, no error banner).
+  function stop() {
+    abortRef.current?.abort();
+  }
+  // Reset clears the UI AND starts a fresh conversation thread, so the next message has no
+  // server-side history (nulling threadRef) - not just a visual clear.
+  function reset() {
+    threadRef.current = null;
+    setMsgs([]); setSteps([]); setMeter(null); setStreaming(""); setLiveParts([]); setPendingInterrupt(null);
+  }
+
+  function handleComponentAction(inst: ComponentInstance, action: string, fields: Record<string, string>) {
+    const def = (inst.actions || []).find((a: any) => a.id === action) || {};
+    let msg = (def as any).message || (def as any).label || action;
+    try { msg = Mustache.render(String(msg), { props: inst.props || {}, fields, action }); } catch {}
+    if (msg) send(msg);
+  }
+
+  const samples = ["How do I reset my password?", "What can you help me with?"];
+
+  return (
+    <div className="col" style={{ flex: 1, minHeight: 0 }}>
+      {/* header */}
+      <div className="row spread" style={{ padding: "12px 20px", borderBottom: "1px solid var(--line)", flex: "none" }}>
+        <div className="row gap2">
+          <div>
+            <div className="t-display">Playground</div>
+            {wfs.length > 1 ? (
+              <select
+                className="select" disabled={running}
+                value={wf?.id || ""}
+                style={{ marginTop: 2, height: 24, fontSize: 12, padding: "0 6px", maxWidth: 280 }}
+                onChange={(e) => {
+                  const next = wfs.find((w) => w.id === e.target.value) || null;
+                  threadRef.current = null;
+                  setWf(next); setMsgs([]); setSteps([]); setMeter(null); setStreaming("");
+                }}>
+                {wfs.map((w) => (
+                  <option key={w.id} value={w.id}>{w.name}{w.status === "active" ? " · active" : " · draft"}</option>
+                ))}
+              </select>
+            ) : (
+              <div className="fg-2 t-caption mono">{wf ? wf.name : "loading…"}{running && " · running"}</div>
+            )}
+          </div>
+        </div>
+        <div className="row gap2">
+          {meter && (
+            <span className="chip chip-mono"><Icon name="bolt" size={13} />{meter.tokens} tok · {fmtUSD(meter.cost)}</span>
+          )}
+          <span className="chip chip-mono"><Icon name="knowledge" size={12} />grounded</span>
+          <button className="btn btn-ghost btn-sm" onClick={reset} disabled={running}>
+            <Icon name="refresh" size={14} />Reset
+          </button>
+        </div>
+      </div>
+
+      {/* alignItems:stretch - the global .row centers children, which stops the chat column
+          from filling the height: it then sizes to content, overflows the viewport, and the
+          scroll area never scrolls. Stretch restores the fixed-height column + inner scroll. */}
+      <div className="row" style={{ flex: 1, minHeight: 0, alignItems: "stretch" }}>
+        <div className="col grow" style={{ minWidth: 0, minHeight: 0, borderRight: "1px solid var(--line)" }}>
+          <div ref={scrollRef} className="scroll-y" style={{ flex: 1, minHeight: 0, padding: "20px 0" }}>
+            {/* minHeight:100% + justify-end pins a short conversation to the bottom (chat-style);
+                once it outgrows the viewport it scrolls normally. */}
+            <div style={{ maxWidth: 720, margin: "0 auto", padding: "0 24px", width: "100%", minHeight: "100%", display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
+              {loadErr && <div className="card" style={{ padding: 14, color: "var(--err)", marginBottom: 12 }}>{loadErr}</div>}
+              {msgs.length === 0 && !running && !loadErr && (
+                <div className="col center" style={{ minHeight: 300, gap: 10, color: "var(--fg-2)", textAlign: "center", margin: "auto 0" }}>
+                  <Tile icon="sparkles" color="var(--accent)" size={44} glow />
+                  <div className="t-h2" style={{ color: "var(--fg-1)" }}>Run “{wf?.name || "your workflow"}” live</div>
+                  <div className="t-caption">Answers are grounded in this project’s knowledge base & Q&A - it streams token by token.</div>
+                  <div className="row gap2 wrap center" style={{ maxWidth: 460, marginTop: 6 }}>
+                    {samples.map((s) => (
+                      <button key={s} className="chip" style={{ cursor: "pointer" }} onClick={() => setInput(s)}>{s}</button>
+                    ))}
+                  </div>
+                </div>
+              )}
+              <div className="col gap4">
+                {msgs.map((m, i) => (
+                  <MessageBlock key={i} role={m.role} content={m.content} parts={m.parts} compDefs={compDefs} onAction={handleComponentAction} />
+                ))}
+                {(running || liveParts.length > 0) && (
+                  <MessageBlock role="assistant" parts={liveParts} streaming compDefs={compDefs} onAction={handleComponentAction} />
+                )}
+                {pendingInterrupt && (() => {
+                  const info = parseInterrupt(pendingInterrupt.payload);
+                  return (
+                    <div className="card fade-up" style={{ padding: 14, borderLeft: "3px solid var(--warn)" }}>
+                      <div className="row gap2" style={{ marginBottom: 6 }}>
+                        <Icon name="user" size={15} style={{ color: "var(--warn)" }} />
+                        <span className="t-h3">Approval required</span>
+                      </div>
+                      <div className="t-body-sm fg-1" style={{ marginBottom: 10, whiteSpace: "pre-wrap" }}>{info.prompt}</div>
+                      <div className="row gap2">
+                        {info.decisions.map((d) => (
+                          <button key={d}
+                            className={d === "approve" ? "btn btn-primary btn-sm" : "btn btn-secondary btn-sm"}
+                            disabled={resuming} onClick={() => resume(d)}>
+                            {resuming ? "…" : d}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                  );
+                })()}
+              </div>
+            </div>
+          </div>
+          {/* composer */}
+          <div style={{ padding: "14px 24px", borderTop: "1px solid var(--line)", flex: "none" }}>
+            <div style={{ maxWidth: 720, margin: "0 auto" }}>
+              <div className="row gap2" style={{ background: "var(--bg-1)", border: "1px solid var(--line-strong)", borderRadius: 12, padding: "7px 7px 7px 14px", boxShadow: "var(--sh-1)" }}>
+                <input value={input} onChange={(e) => setInput(e.target.value)} onKeyDown={(e) => e.key === "Enter" && send()}
+                  placeholder="Message the workflow…" disabled={!wf || running}
+                  style={{ flex: 1, minWidth: 0, border: "none", background: "none", outline: "none", fontSize: 14, color: "var(--fg-0)", fontFamily: "var(--font-ui)" }} />
+                {running ? (
+                  <button className="btn btn-secondary" onClick={stop} title="Stop the run">
+                    <Icon name="stop" size={15} />Stop
+                  </button>
+                ) : (
+                  <button className="btn btn-primary" onClick={() => send()} disabled={!wf}>
+                    <Icon name="play" size={15} />Run
+                  </button>
+                )}
+              </div>
+              <div className="fg-2 t-caption" style={{ textAlign: "center", marginTop: 7 }}>Runs against the active workflow · interrupts surface for approval</div>
+            </div>
+          </div>
+        </div>
+
+        {/* Steps column */}
+        <div style={{ width: 280, flex: "none", background: "var(--bg-1)", minHeight: 0 }} className="scroll-y">
+          <div className="t-micro" style={{ padding: "14px 16px 8px" }}>Run steps</div>
+          <div className="col" style={{ padding: "0 12px 12px" }}>
+            {steps.length === 0 && <div className="fg-2 t-caption" style={{ padding: "4px 8px" }}>Nodes light up as the graph executes.</div>}
+            {steps.map((s, i) => (
+              <div key={i} className="row gap2 fade-in" style={{ padding: "8px 8px", borderRadius: 7 }}>
+                <div style={{ width: 18, height: 18, borderRadius: "50%", background: "var(--ok-bg)", color: "var(--ok)", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}><Icon name="check" size={12} /></div>
+                <div className="grow" style={{ minWidth: 0 }}>
+                  <div className="t-body-sm truncate" style={{ color: "var(--fg-1)" }}>{nodeLabel(s.node, nodeLabels)}</div>
+                  {nodeLabels[s.node] && nodeLabels[s.node].label !== s.node && (
+                    <div className="t-caption fg-2 mono truncate">{s.node}</div>
+                  )}
+                </div>
+                <span className="t-caption fg-2">{i + 1}</span>
+              </div>
+            ))}
+            {running && (
+              <div className="row gap2" style={{ padding: "8px", color: "var(--accent)" }}>
+                <div style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--accent)", animation: "pulse 1s infinite" }} />
+                <span className="t-caption">streaming…</span>
+              </div>
+            )}
+            {/* Live agent activity: sub-agent dispatches (prominent) and tool calls (dimmed), so a
+                deep_agent's routing is visible as it happens - not just after the run in Traces. */}
+            {activity.length > 0 && (
+              <>
+                <div className="t-micro" style={{ padding: "12px 4px 6px" }}>Agent activity</div>
+                {activity.map((a) => {
+                  const isSub = a.kind === "subagent";
+                  return (
+                    <div key={a.id} className="row gap2 fade-in" style={{ padding: "6px 8px", borderRadius: 7 }}>
+                      <div style={{ width: 16, height: 16, display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}>
+                        {a.error ? <Icon name="x" size={12} style={{ color: "var(--err)" }} />
+                          : a.done ? <Icon name="check" size={12} style={{ color: isSub ? "var(--accent)" : "var(--ok)" }} />
+                          : <div style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--accent)", animation: "pulse 1s infinite" }} />}
+                      </div>
+                      <Icon name={isSub ? "layers" : "sliders"} size={13} style={{ color: isSub ? "var(--accent)" : "var(--fg-2)", flex: "none" }} />
+                      <span className="mono-sm grow truncate" style={{ color: isSub ? "var(--fg-0)" : "var(--fg-2)", fontWeight: isSub ? 600 : 400 }} title={a.name}>{a.name}</span>
+                    </div>
+                  );
+                })}
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* One chat turn. User turns keep the colored bubble. An assistant turn is ONE flowing reply
+   under a single avatar - bare markdown text and inline components in order, with NO bubble
+   chrome - so a rendered component reads as part of the reply, not a detached card below it
+   (audit Priority C). Missing component defs degrade to a visible notice (audit M5). */
+function MessageBlock({ role, content, streaming, parts, compDefs, onAction }: {
+  role: "user" | "assistant";
+  content?: string;
+  streaming?: boolean;
+  parts?: Part[];
+  compDefs: Record<string, ComponentT>;
+  onAction: (inst: ComponentInstance, action: string, fields: Record<string, string>) => void;
+}) {
+  const user = role === "user";
+  if (user) {
+    return (
+      <div className="row" style={{ gap: 9, alignItems: "flex-start", flexDirection: "row-reverse" }}>
+        <Tile icon="user" color="var(--fg-2)" size={28} />
+        <div style={{ maxWidth: 560, padding: "10px 13px", borderRadius: 12, borderTopRightRadius: 3, fontSize: 14, lineHeight: "21px", whiteSpace: "pre-wrap", overflowWrap: "anywhere", wordBreak: "break-word", background: "var(--accent)", color: "var(--fg-on-accent)" }}>
+          {content}
+        </div>
+      </div>
+    );
+  }
+  const renderComp = (inst: ComponentInstance, key: number | string) => {
+    const def = compDefs[inst.component_id];
+    if (!def) {
+      return (
+        <div key={key} className="card" style={{ padding: "8px 11px", fontSize: 12.5, color: "var(--fg-2)" }}>
+          Component “{inst.name || inst.component_id}” is unavailable.
+        </div>
+      );
+    }
+    return (
+      <ComponentRenderer key={key} def={{ id: def.id, name: def.name, html: def.html, css: def.css, actions: inst.actions || def.actions }} props={inst.props || {}} onAction={(a, f) => onAction(inst, a, f)} />
+    );
+  };
+  const list: Part[] = parts && parts.length ? parts : (content && content.trim() ? [{ kind: "text", text: content }] : []);
+  let lastText = -1;
+  for (let k = list.length - 1; k >= 0; k--) { if (list[k].kind === "text") { lastText = k; break; } }
+  return (
+    <div className="row" style={{ gap: 9, alignItems: "flex-start" }}>
+      <Tile icon="sparkles" color="var(--accent)" size={28} />
+      <div className="col gap2" style={{ minWidth: 0, maxWidth: 620, flex: 1 }}>
+        {list.map((p, j) => (p.kind === "text" ? (
+          <div key={j} style={{ fontSize: 14, lineHeight: "21px", color: "var(--fg-0)", overflowWrap: "anywhere" }}>
+            <Markdown>{p.text}</Markdown>
+            {streaming && j === lastText && <span style={{ display: "inline-block", width: 7, height: 14, background: "var(--accent)", verticalAlign: "-2px", animation: "blink 1s steps(1) infinite" }} />}
+          </div>
+        ) : renderComp(p.inst, j)))}
+        {streaming && lastText === -1 && <span className="fg-2" style={{ fontSize: 14 }}>…</span>}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/screens/settings.tsx b/apps/web/components/screens/settings.tsx
new file mode 100644
index 0000000..780b293
--- /dev/null
+++ b/apps/web/components/screens/settings.tsx
@@ -0,0 +1,853 @@
+"use client";
+/* Settings: project config, split into a secondary-nav of focused sections
+   (General · Members · API Keys · Model Pricing · Budgets · Knowledge · Versioning ·
+   Observability · Advanced). Config-backed sections share one Save; Members, API Keys,
+   Model Pricing and Secrets manage their own persistence. */
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Icon } from "../icons";
+import { EmptyState, Field, Modal, Segmented, Tabs, Toggle } from "../primitives";
+import { api, clearTokens, InviteResult, MeResult, ProjectVersion, Secret, TeamMember } from "@/lib/api";
+import { useEmbeddingModels, useModels, useRerankerModels } from "@/lib/models";
+
+const ROLES = ["owner", "admin", "editor", "viewer", "connector"];
+
+// Embedder + reranker models (and which one is default) come from the backend catalog now
+// (useEmbeddingModels / useRerankerModels) - the frontend hardcodes no model lists.
+const DEFAULT_CHILD_CHUNK_SIZE = 300;
+
+type SectionId =
+  | "general" | "members" | "apikeys" | "pricing" | "budgets"
+  | "guardrails" | "knowledge" | "versioning" | "observability" | "advanced" | "history";
+
+const SECTIONS: { id: SectionId; label: string; icon: string; savesConfig?: boolean }[] = [
+  { id: "general", label: "General", icon: "sliders", savesConfig: true },
+  { id: "members", label: "Members & Roles", icon: "user" },
+  { id: "apikeys", label: "API Keys", icon: "secret" },
+  { id: "pricing", label: "Model Pricing", icon: "coins" },
+  { id: "budgets", label: "Budgets & Quotas", icon: "bolt", savesConfig: true },
+  { id: "guardrails", label: "Guardrails & Egress", icon: "shield-check", savesConfig: true },
+  { id: "knowledge", label: "Knowledge & Embeddings", icon: "knowledge", savesConfig: true },
+  { id: "versioning", label: "Versioning", icon: "clock", savesConfig: true },
+  { id: "observability", label: "Observability & Retention", icon: "traces", savesConfig: true },
+  { id: "advanced", label: "Advanced", icon: "settings", savesConfig: true },
+  { id: "history", label: "History", icon: "clock" },
+];
+
+// Which settings section each project-config field belongs to, so History can group changes
+// under the same tab names as the nav. Top-level snapshot fields + config.* keys. Anything not
+// listed falls through to "advanced". Members/API-key values are intentionally NOT diffed here
+// (Members isn't config-backed; secrets are masked below).
+const FIELD_SECTION: Record<string, SectionId> = {
+  name: "general", description: "general", slug: "general", status: "general", default_model: "general",
+  budgets: "budgets",
+  default_middleware: "guardrails", egress: "guardrails",
+  rag_defaults: "knowledge",
+  version_history_limit: "versioning", versioning: "versioning",
+  observability: "observability",
+  scheduler: "advanced",
+  model_pricing: "pricing",
+  provider_credentials: "apikeys",
+};
+// The config-backed sections that get a History tab (Members isn't config-backed → skipped).
+const HISTORY_TABS: SectionId[] = ["general", "budgets", "guardrails", "knowledge", "versioning", "observability", "apikeys", "pricing", "advanced"];
+// Field paths whose values must never be shown in a diff (secrets / credentials).
+const MASK_RE = /credential|secret|token|api[_-]?key|password/i;
+
+export function SettingsScreen({ project, onDeleteProject }: { project: any; onDeleteProject?: (project: { id: string; name: string }) => Promise<void> | void }) {
+  const [section, setSection] = useState<SectionId>("general");
+  const MODELS = useModels();
+  const embeddingModels = useEmbeddingModels();
+  const rerankerModels = useRerankerModels();
+  const [config, setConfig] = useState<Record<string, any>>({});
+  const [meta, setMeta] = useState<{ name: string; description: string }>({ name: "", description: "" });
+  const [secrets, setSecrets] = useState<Secret[]>([]);
+  const [save, setSave] = useState<"idle" | "saving" | "saved">("idle");
+  const [open, setOpen] = useState(false);
+  const [secForm, setSecForm] = useState({ name: "", value: "", kind: "api_key" });
+  const [pkeys, setPkeys] = useState<Record<string, string>>({});
+  const [keySave, setKeySave] = useState<"idle" | "saving" | "saved">("idle");
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [tenantId, setTenantId] = useState("");
+  const [copiedWs, setCopiedWs] = useState(false);
+  const [copiedPid, setCopiedPid] = useState(false);
+
+  const reloadSecrets = useCallback(() => { if (project?.id) api.listSecrets(project.id).then(setSecrets).catch(() => {}); }, [project?.id]);
+  useEffect(() => {
+    if (!project?.id) return;
+    api.getProject(project.id).then((p) => {
+      setConfig(p.config || {});
+      setMeta({ name: p.name || "", description: p.description || "" });
+    }).catch(() => {});
+    reloadSecrets();
+  }, [project?.id, reloadSecrets]);
+  // The workspace (tenant) id — surfaced in General so a user whose email spans multiple
+  // workspaces can supply it at MCP OAuth login. Account-level, so it's independent of project.
+  useEffect(() => { api.me().then((m) => setTenantId(m.tenant_id || "")).catch(() => {}); }, []);
+
+  const setCfg = (patch: Record<string, any>) => setConfig((c) => ({ ...c, ...patch }));
+  const features = config.features || {};
+  const budgets = config.budgets || {};
+  const rag = config.rag_defaults || {};
+  const versioning = config.versioning || {};
+  const observability = config.observability || {};
+  const scheduler = config.scheduler || {};
+  const defaultEmbedding = embeddingModels.find((m) => m.default)?.id ?? "";
+  const defaultReranker = rerankerModels.find((m) => m.default)?.id ?? "";
+  const embeddingModel = rag.embedding_model || defaultEmbedding;
+  const setRag = (patch: Record<string, any>) => setCfg({ rag_defaults: { ...rag, ...patch } });
+
+  async function persist() {
+    setSave("saving");
+    try {
+      await api.updateProject(project.id, { name: meta.name || undefined, description: meta.description, config });
+      setSave("saved"); setTimeout(() => setSave("idle"), 1400);
+    } catch { setSave("idle"); }
+  }
+  async function addSecret() {
+    if (!secForm.name.trim()) return;
+    await api.createSecret(project.id, { name: secForm.name, value: secForm.value, kind: secForm.kind });
+    setOpen(false); setSecForm({ name: "", value: "", kind: "api_key" }); reloadSecrets();
+  }
+  async function removeSecret(name: string) {
+    let used: { type: string; label: string }[] = [];
+    try { used = (await api.secretUsage(project.id, name)).references; } catch { /* fall back to a plain confirm */ }
+    const detail = used.length
+      ? `\n\nIn use by ${used.length}:\n` + used.map((r) => `• ${r.label} - ${r.type.replace(/_/g, " ")}`).join("\n") + `\n\nDeleting will break these.`
+      : "";
+    if (!window.confirm(`Delete secret "${name}"?${detail}`)) return;
+    await api.deleteSecret(project.id, name, true); reloadSecrets();
+  }
+  async function saveKeys() {
+    setKeySave("saving");
+    const pc = { ...(config.provider_credentials || {}) };
+    for (const [prov, val] of Object.entries(pkeys)) {
+      if (!val.trim()) continue;
+      const name = `${prov}_key`;
+      await api.createSecret(project.id, { name, value: val, kind: "api_key" });
+      pc[prov] = `secret://proj/${name}`;
+    }
+    const newConfig = { ...config, provider_credentials: pc };
+    setConfig(newConfig);
+    await api.updateProject(project.id, { config: newConfig });
+    setPkeys({}); reloadSecrets();
+    setKeySave("saved"); setTimeout(() => setKeySave("idle"), 1400);
+  }
+
+  const PROVIDERS: [string, string][] = [["openai", "OpenAI"], ["anthropic", "Anthropic"], ["google_genai", "Google"]];
+  const pcreds = config.provider_credentials || {};
+  const activeMeta = SECTIONS.find((s) => s.id === section)!;
+
+  return (
+    <div className="col" style={{ flex: 1, minHeight: 0 }}>
+      <div className="row" style={{ flex: 1, minHeight: 0, alignItems: "stretch" }}>
+        {/* secondary nav */}
+        <nav className="scroll-y" style={{ width: 224, flex: "none", borderRight: "1px solid var(--line)", background: "var(--bg-1)", padding: 10 }}>
+          <div className="t-micro" style={{ padding: "6px 8px 8px" }}>Settings</div>
+          {SECTIONS.map((s) => {
+            const on = section === s.id;
+            return (
+              <button key={s.id} onClick={() => setSection(s.id)} className={"sidenav-item" + (on ? " active" : "")}
+                style={{ display: "flex", alignItems: "center", gap: 10, width: "100%", height: 34, padding: "0 10px", marginBottom: 1, borderRadius: 7, border: "none", cursor: "pointer", textAlign: "left", color: on ? "var(--accent)" : "var(--fg-1)", fontSize: 13, fontWeight: on ? 600 : 500, fontFamily: "var(--font-ui)" }}>
+                <Icon name={s.icon} size={16} style={{ flex: "none" }} />
+                <span className="grow truncate">{s.label}</span>
+              </button>
+            );
+          })}
+        </nav>
+
+        {/* content */}
+        <div className="scroll-y grow" style={{ minWidth: 0 }}>
+          <div className="fade-up" style={{ maxWidth: 960, margin: "0 auto", padding: "24px 28px" }}>
+            <div className="row spread" style={{ marginBottom: 18 }}>
+              <div className="t-display">{activeMeta.label}</div>
+              {activeMeta.savesConfig && (
+                <button className="btn btn-primary btn-sm" onClick={persist} disabled={save === "saving"}>
+                  <Icon name={save === "saved" ? "check" : "save"} size={14} />{save === "saving" ? "Saving…" : save === "saved" ? "Saved" : "Save"}
+                </button>
+              )}
+            </div>
+
+            {section === "general" && (
+              <>
+                <Card title="Project">
+                  <Field label="Name"><input className="input" value={meta.name} onChange={(e) => setMeta((m) => ({ ...m, name: e.target.value }))} placeholder="Project name" /></Field>
+                  <Field label="Description" help="Shown on the dashboard and in the project header."><textarea className="textarea" rows={2} value={meta.description} onChange={(e) => setMeta((m) => ({ ...m, description: e.target.value }))} /></Field>
+                  <Field label="Project ID" help="This project's identifier — use it in the Run API path (/v1/projects/<id>/run) and integration config (e.g. forge.projectId). This is NOT the Workspace ID below.">
+                    <div className="row gap2">
+                      <input className="input mono" readOnly value={project.id} placeholder="…" onFocus={(e) => e.currentTarget.select()} style={{ flex: 1 }} />
+                      <button className="btn btn-secondary btn-sm" disabled={!project?.id} onClick={() => { if (project?.id) { navigator.clipboard?.writeText(project.id); setCopiedPid(true); setTimeout(() => setCopiedPid(false), 1400); } }}>
+                        <Icon name={copiedPid ? "check" : "copy"} size={13} />{copiedPid ? "Copied" : "Copy"}
+                      </button>
+                    </div>
+                  </Field>
+                </Card>
+                <Card title="Default model">
+                  <Field label="Default model" help="Used by new agents and single model-call nodes unless they override it.">
+                    <select className="select" value={config.default_model || ""} onChange={(e) => setCfg({ default_model: e.target.value })}>
+                      <option value="">Select a model…</option>
+                      {MODELS.map((m) => <option key={m.id} value={m.id}>{m.name} · {m.provider}</option>)}
+                    </select>
+                  </Field>
+                </Card>
+                <Card title="Workspace">
+                  <Field label="Workspace ID" help="Your workspace (tenant) identifier — account-level, NOT the project ID. You normally don't need it, but if you sign in over MCP OAuth and your email belongs to more than one workspace, paste this into the login screen's “Workspace id” field.">
+                    <div className="row gap2">
+                      <input className="input mono" readOnly value={tenantId} placeholder="…" onFocus={(e) => e.currentTarget.select()} style={{ flex: 1 }} />
+                      <button className="btn btn-secondary btn-sm" disabled={!tenantId} onClick={() => { if (tenantId) { navigator.clipboard?.writeText(tenantId); setCopiedWs(true); setTimeout(() => setCopiedWs(false), 1400); } }}>
+                        <Icon name={copiedWs ? "check" : "copy"} size={13} />{copiedWs ? "Copied" : "Copy"}
+                      </button>
+                    </div>
+                  </Field>
+                </Card>
+              </>
+            )}
+
+            {section === "members" && <TeamCard />}
+
+            {section === "apikeys" && (
+              <>
+                <Card title="Model providers" action={<button className="btn btn-primary btn-sm" onClick={saveKeys} disabled={keySave === "saving"}><Icon name={keySave === "saved" ? "check" : "save"} size={14} />{keySave === "saving" ? "Saving…" : keySave === "saved" ? "Saved" : "Save keys"}</button>}>
+                  <div className="field-help" style={{ marginTop: 0, marginBottom: 6 }}>Keys are encrypted (Fernet), bound to this project's models, and never returned. They fall back to the server's env var if unset.</div>
+                  {PROVIDERS.map(([prov, label]) => {
+                    const configured = !!pcreds[prov];
+                    return (
+                      <div key={prov} className="row gap2" style={{ padding: "7px 0" }}>
+                        <div style={{ width: 120, flex: "none" }} className="row gap2">
+                          <Icon name="n_llm" size={15} style={{ color: configured ? "var(--ok)" : "var(--fg-2)" }} />
+                          <span className="t-body-sm" style={{ fontWeight: 600 }}>{label}</span>
+                        </div>
+                        <input className="input mono" type="password" style={{ flex: 1 }}
+                          placeholder={configured ? "•••• configured - re-enter to replace" : "sk-…"}
+                          value={pkeys[prov] || ""} onChange={(e) => setPkeys((k) => ({ ...k, [prov]: e.target.value }))} />
+                        {configured && <span className="pill pill-ok" style={{ height: 18 }}>set</span>}
+                      </div>
+                    );
+                  })}
+                </Card>
+                <Card title="Secrets" action={<button className="btn btn-secondary btn-sm" onClick={() => setOpen(true)}><Icon name="plus" size={14} />Add secret</button>}>
+                  <div className="field-help" style={{ marginTop: 0, marginBottom: 8 }}>Write-only - values are encrypted (Fernet) and never returned. Reference as <span className="mono-sm">secret://proj/<name></span>.</div>
+                  {secrets.map((s) => (
+                    <div key={s.id} className="row spread" style={{ padding: "8px 0", borderTop: "1px solid var(--line)" }}>
+                      <div className="row gap2"><Icon name="secret" size={15} style={{ color: "var(--fg-2)" }} /><span className="mono-sm">{s.name}</span><span className="typechip">{s.kind}</span></div>
+                      <div className="row gap2"><span className="mono-sm fg-2">••••••</span><span className="t-caption fg-2">v{s.version}</span><span className="iconbtn" role="button" title="Delete secret" onClick={() => removeSecret(s.name)}><Icon name="trash" size={13} /></span></div>
+                    </div>
+                  ))}
+                  {secrets.length === 0 && <div className="fg-2 t-caption">No secrets yet.</div>}
+                </Card>
+              </>
+            )}
+
+            {section === "pricing" && <PricingCard />}
+
+            {section === "budgets" && (
+              <Card title="Budgets & quotas">
+                <div className="field-help" style={{ marginTop: 0, marginBottom: 10 }}>Hard limits on model spend. A run is stopped if it would exceed the per-run cap; the monthly cap gates new runs once reached.</div>
+                <div className="row gap3 wrap">
+                  <Field label="Max $ / run"><input className="input mono" type="number" min={0} step={0.01} value={budgets.max_usd_per_run ?? ""} onChange={(e) => setCfg({ budgets: { ...budgets, max_usd_per_run: parseFloat(e.target.value) || undefined } })} /></Field>
+                  <Field label="Monthly $ cap"><input className="input mono" type="number" min={0} step={1} value={budgets.monthly_usd_cap ?? ""} onChange={(e) => setCfg({ budgets: { ...budgets, monthly_usd_cap: parseFloat(e.target.value) || undefined } })} /></Field>
+                </div>
+                <Field label="Max tokens / run" help="Optional cap on total tokens for a single run."><input className="input mono" type="number" min={0} step={1000} value={budgets.max_tokens_per_run ?? ""} onChange={(e) => setCfg({ budgets: { ...budgets, max_tokens_per_run: parseInt(e.target.value, 10) || undefined } })} /></Field>
+              </Card>
+            )}
+
+            {section === "guardrails" && <GuardrailsCard config={config} setCfg={setCfg} />}
+
+            {section === "knowledge" && (
+              <Card title="Knowledge & embeddings">
+                <Field label="Embedding model" help="Used to embed knowledge sources and search queries. Applies to the whole project - you can't mix embedders across files. Changing it changes the vector dimension, so re-embed existing sources afterward (the Knowledge tab flags mismatches).">
+                  <select className="select" value={embeddingModel} onChange={(e) => setRag({ embedding_model: e.target.value })}>
+                    {Array.from(new Set(embeddingModels.map((m) => m.provider))).map((prov) => {
+                      const items = embeddingModels.filter((m) => m.provider === prov);
+                      const label = items.some((m) => m.billed)
+                        ? `${prov} · billed per token (ingest + every query)`
+                        : `${prov} · open-source · free (offline)`;
+                      return (
+                        <optgroup key={prov} label={label}>
+                          {items.map((m) => (
+                            <option key={m.id} value={m.id}>{m.name} · {m.billed ? "billed" : "local, free"} ({m.dim}-dim)</option>
+                          ))}
+                        </optgroup>
+                      );
+                    })}
+                    {embeddingModel && !embeddingModels.some((m) => m.id === embeddingModel) && <option value={embeddingModel}>{embeddingModel}</option>}
+                  </select>
+                </Field>
+                {embeddingModel.startsWith("openai:") && (
+                  <div className="field-help" style={{ marginTop: 0 }}>
+                    {pcreds.openai
+                      ? "OpenAI key configured under API Keys. Embeddings are billed per token at ingest and on every search."
+                      : "⚠ No OpenAI key set — add one under API Keys, or embeddings fall back to the local model."}
+                  </div>
+                )}
+                <Field label="Retrieval mode" help="How chunks are matched vs. handed to the agent. Chunk: search and return the same chunks. Parent/child: embed small child chunks for precise matching but feed the agent the larger parent passage for context. Changing this requires re-ingesting existing sources.">
+                  <Segmented
+                    options={[{ value: "chunk", label: "Chunk" }, { value: "parent_child", label: "Parent / child" }]}
+                    value={rag.retrieval_mode || "chunk"}
+                    onChange={(v) => setRag({ retrieval_mode: v })}
+                  />
+                </Field>
+                {rag.retrieval_mode === "parent_child" && (
+                  <Field label="Child chunk size" help="Size (chars) of the small child chunks that get embedded in parent/child mode. The parent window uses the chunk size set per source. Smaller children = more precise matches.">
+                    <input className="input mono" type="number" placeholder={String(DEFAULT_CHILD_CHUNK_SIZE)}
+                      value={rag.child_chunk_size ?? ""}
+                      onChange={(e) => setRag({ child_chunk_size: parseInt(e.target.value, 10) || undefined })} />
+                  </Field>
+                )}
+                <Field label="Reranker model" help="Local cross-encoder used when a retrieval node (or the search debugger) has rerank on. Runs offline on CPU, no API cost. Ignored unless rerank is enabled.">
+                  <select className="select" value={rag.reranker_model || defaultReranker} onChange={(e) => setRag({ reranker_model: e.target.value })}>
+                    {rerankerModels.map((m) => <option key={m.id} value={m.id}>{m.name} · {m.note}{m.default ? " (default)" : ""}</option>)}
+                    {rag.reranker_model && !rerankerModels.some((m) => m.id === rag.reranker_model) && <option value={rag.reranker_model}>{rag.reranker_model}</option>}
+                  </select>
+                </Field>
+              </Card>
+            )}
+
+            {section === "versioning" && (
+              <Card title="Version history">
+                <div className="field-help" style={{ marginTop: 0, marginBottom: 10 }}>Every save/publish of a workflow, agent, tool, component, or auth provider captures a version you can inspect and restore from the editor's History panel.</div>
+                <Field label="Versions kept per entity" help="Older versions beyond this count are pruned. Leave blank to keep all.">
+                  <input className="input mono" type="number" min={1} step={1} style={{ width: 140 }} placeholder="unlimited"
+                    value={config.version_history_limit ?? ""}
+                    onChange={(e) => setCfg({ version_history_limit: parseInt(e.target.value, 10) || undefined })} />
+                </Field>
+                <label className="row spread" style={{ padding: "8px 0" }}>
+                  <div><div className="t-body-sm" style={{ fontWeight: 600 }}>Snapshot on publish</div><div className="field-help" style={{ marginTop: 0 }}>Capture a labeled version each time a workflow is published.</div></div>
+                  <Toggle on={versioning.snapshot_on_publish !== false} onChange={(v) => setCfg({ versioning: { ...versioning, snapshot_on_publish: v } })} />
+                </label>
+              </Card>
+            )}
+
+            {section === "observability" && (
+              <>
+                <Card title="Trace redaction">
+                  <label className="row spread" style={{ padding: "8px 0" }}>
+                    <div><div className="t-body-sm" style={{ fontWeight: 600 }}>Redact PII in traces</div><div className="field-help" style={{ marginTop: 0 }}>Mask emails, phone numbers, and card-like values in stored span inputs/outputs.</div></div>
+                    <Toggle on={!!observability.redact_pii} onChange={(v) => setCfg({ observability: { ...observability, redact_pii: v } })} />
+                  </label>
+                  <label className="row spread" style={{ padding: "8px 0" }}>
+                    <div><div className="t-body-sm" style={{ fontWeight: 600 }}>Store message bodies</div><div className="field-help" style={{ marginTop: 0 }}>Persist full user/assistant text on traces. Turn off to keep only metrics (tokens, latency, cost).</div></div>
+                    <Toggle on={observability.store_message_bodies !== false} onChange={(v) => setCfg({ observability: { ...observability, store_message_bodies: v } })} />
+                  </label>
+                </Card>
+                <Card title="Retention">
+                  <Field label="Trace retention (days)" help="Traces and conversations older than this are eligible for purge. Leave blank to keep indefinitely.">
+                    <input className="input mono" type="number" min={1} step={1} style={{ width: 140 }} placeholder="keep all"
+                      value={observability.retention_days ?? ""}
+                      onChange={(e) => setCfg({ observability: { ...observability, retention_days: parseInt(e.target.value, 10) || undefined } })} />
+                  </Field>
+                  <label className="row spread" style={{ padding: "8px 0" }}>
+                    <div><div className="t-body-sm" style={{ fontWeight: 600 }}>Scheduled cleanup</div><div className="field-help" style={{ marginTop: 0 }}>Run a periodic job to purge data past the retention window.</div></div>
+                    <Toggle on={!!scheduler.cleanup_enabled} onChange={(v) => setCfg({ scheduler: { ...scheduler, cleanup_enabled: v } })} />
+                  </label>
+                </Card>
+              </>
+            )}
+
+            {section === "advanced" && (
+              <>
+                <Card title="Feature flags">
+                  {[["code_nodes", "Code nodes", "Allow sandboxed code execution"], ["remote_sandbox", "Remote sandbox", "Use E2B/Modal/Daytona for code"], ["advanced_scripts", "Advanced scripts", "RestrictedPython custom auth scripts"]].map(([k, label, desc]) => (
+                    <label key={k} className="row spread" style={{ padding: "8px 0" }}>
+                      <div><div className="t-body-sm" style={{ fontWeight: 600 }}>{label}</div><div className="field-help" style={{ marginTop: 0 }}>{desc}</div></div>
+                      <Toggle on={!!features[k]} onChange={(v) => setCfg({ features: { ...features, [k]: v } })} />
+                    </label>
+                  ))}
+                </Card>
+                {onDeleteProject && project?.id && (
+                  <div className="card" style={{ padding: 18, marginBottom: 16, borderColor: "var(--err)" }}>
+                    <div className="row spread" style={{ marginBottom: 12 }}><div className="t-h2" style={{ color: "var(--err)" }}>Danger zone</div></div>
+                    <div className="field-help" style={{ marginTop: 0, marginBottom: 12 }}>Deleting this project removes its workflows, agents, tools, auth providers, knowledge, secrets, runs, and traces. This cannot be undone.</div>
+                    {!confirmDelete ? (
+                      <button className="btn btn-danger btn-sm" onClick={() => setConfirmDelete(true)}><Icon name="trash" size={14} />Delete project</button>
+                    ) : (
+                      <div className="row gap2 wrap" style={{ alignItems: "center" }}>
+                        <span className="t-body-sm">Permanently delete <b>{project.name}</b>?</span>
+                        <button className="btn btn-danger btn-sm" disabled={deleting}
+                          onClick={async () => {
+                            setDeleting(true);
+                            try { await onDeleteProject({ id: project.id, name: project.name }); }
+                            finally { setDeleting(false); setConfirmDelete(false); }
+                          }}>
+                          <Icon name="trash" size={14} />{deleting ? "Deleting…" : "Confirm delete"}
+                        </button>
+                        <button className="btn btn-ghost btn-sm" onClick={() => setConfirmDelete(false)} disabled={deleting}>Cancel</button>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </>
+            )}
+
+            {section === "history" && <SettingsHistory project={project} />}
+          </div>
+        </div>
+      </div>
+
+      <Modal open={open} onClose={() => setOpen(false)} title="Add secret" width={460}
+        footer={<><button className="btn btn-ghost" onClick={() => setOpen(false)}>Cancel</button><button className="btn btn-primary" onClick={addSecret}>Save secret</button></>}>
+        <Field label="Name"><input className="input mono" value={secForm.name} onChange={(e) => setSecForm((f) => ({ ...f, name: e.target.value }))} placeholder="openai_key" /></Field>
+        <Field label="Value" help="Encrypted at rest; never shown again."><input className="input mono" type="password" value={secForm.value} onChange={(e) => setSecForm((f) => ({ ...f, value: e.target.value }))} /></Field>
+        <Field label="Kind"><input className="input" value={secForm.kind} onChange={(e) => setSecForm((f) => ({ ...f, kind: e.target.value }))} /></Field>
+      </Modal>
+    </div>
+  );
+}
+
+/* Settings > History: read-only per-section change log. Diffs consecutive project snapshots
+   (captured on every settings save) and buckets each changed field under the matching settings
+   tab. No restore - it's a log. Secret values are masked. */
+function fmtVal(v: any): string {
+  if (v === undefined || v === null || v === "") return "—";
+  if (typeof v === "object") { try { return JSON.stringify(v); } catch { return String(v); } }
+  return String(v);
+}
+function flattenConfig(snap: Record<string, any>): Record<string, any> {
+  // Merge the top-level snapshot fields with config.* so section bucketing keys off the
+  // outermost key (e.g. "budgets.max_usd" -> budgets), then flatten nested objects to dot-paths.
+  const src = { name: snap.name, slug: snap.slug, description: snap.description, status: snap.status, ...(snap.config || {}) };
+  const out: Record<string, any> = {};
+  const walk = (o: any, prefix: string) => {
+    for (const [k, v] of Object.entries(o || {})) {
+      const path = prefix ? `${prefix}.${k}` : k;
+      if (v && typeof v === "object" && !Array.isArray(v)) walk(v, path);
+      else out[path] = v;
+    }
+  };
+  walk(src, "");
+  return out;
+}
+type FieldChange = { path: string; from: any; to: any };
+type ChangeSet = { id: string; author?: string | null; at?: string | null; changes: FieldChange[] };
+
+function SettingsHistory({ project }: { project: any }) {
+  const [tab, setTab] = useState<SectionId>("general");
+  const [versions, setVersions] = useState<ProjectVersion[] | null>(null);
+  const [err, setErr] = useState<string | null>(null);
+  useEffect(() => {
+    if (!project?.id) return;
+    setVersions(null); setErr(null);
+    api.projectConfigHistory(project.id).then(setVersions).catch((e) => setErr(String(e?.message || e)));
+  }, [project?.id]);
+
+  // The list is newest-first, so [i+1] is the older snapshot each version is diffed against.
+  const changeSets: ChangeSet[] = useMemo(() => {
+    if (!versions) return [];
+    const out: ChangeSet[] = [];
+    for (let i = 0; i < versions.length - 1; i++) {
+      const newer = flattenConfig(versions[i].snapshot || {});
+      const older = flattenConfig(versions[i + 1].snapshot || {});
+      const changes: FieldChange[] = [];
+      new Set([...Object.keys(newer), ...Object.keys(older)]).forEach((k) => {
+        if (JSON.stringify(newer[k]) !== JSON.stringify(older[k])) changes.push({ path: k, from: older[k], to: newer[k] });
+      });
+      if (changes.length) out.push({ id: versions[i].id, author: versions[i].author_email, at: versions[i].created_at, changes });
+    }
+    return out;
+  }, [versions]);
+
+  const sectionOf = (path: string): SectionId => FIELD_SECTION[path.split(".")[0]] || "advanced";
+  const forTab = changeSets
+    .map((cs) => ({ ...cs, changes: cs.changes.filter((c) => sectionOf(c.path) === tab) }))
+    .filter((cs) => cs.changes.length > 0);
+
+  return (
+    <div className="col" style={{ gap: 14 }}>
+      <div className="field-help" style={{ marginTop: 0 }}>A read-only log of what changed in each settings section, newest first — captured on every save. Pick a section:</div>
+      <Tabs
+        equal
+        tabs={HISTORY_TABS.map((id) => ({ value: id, label: SECTIONS.find((s) => s.id === id)!.label }))}
+        value={tab}
+        onChange={(v) => setTab(v as SectionId)}
+      />
+      {err && <div className="card" style={{ padding: 12, color: "var(--err)" }}>{err}</div>}
+      {!err && versions === null && <div className="fg-2 t-caption">Loading history…</div>}
+      {!err && versions !== null && forTab.length === 0 && (
+        <div className="card col center" style={{ padding: 34, gap: 6, color: "var(--fg-2)" }}>
+          <Icon name="clock" size={20} />
+          <div className="t-body-sm">No changes recorded for this section.</div>
+        </div>
+      )}
+      {forTab.map((cs) => (
+        <div key={cs.id} className="card" style={{ padding: "12px 14px" }}>
+          <div className="t-caption fg-2" style={{ marginBottom: 8 }}>{cs.author || "unknown"}{cs.at ? ` · ${new Date(cs.at).toLocaleString()}` : ""}</div>
+          <div className="col" style={{ gap: 6 }}>
+            {cs.changes.map((c) => {
+              const mask = MASK_RE.test(c.path);
+              return (
+                <div key={c.path} className="row gap2" style={{ alignItems: "baseline", fontSize: 12 }}>
+                  <span className="mono-sm" style={{ minWidth: 150, flex: "none", color: "var(--fg-1)" }}>{c.path}</span>
+                  <span className="mono-sm fg-2 truncate" style={{ textDecoration: "line-through", minWidth: 0 }}>{mask ? "••••" : fmtVal(c.from)}</span>
+                  <Icon name="chevright" size={12} style={{ color: "var(--fg-2)", flex: "none" }} />
+                  <span className="mono-sm truncate" style={{ color: "var(--fg-0)", minWidth: 0 }}>{mask ? "••••" : fmtVal(c.to)}</span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function TeamCard() {
+  const [me, setMe] = useState<MeResult | null>(null);
+  const [members, setMembers] = useState<TeamMember[]>([]);
+  const [invite, setInvite] = useState({ email: "", role: "editor" });
+  const [msg, setMsg] = useState<string | null>(null);
+  const [result, setResult] = useState<InviteResult | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const isAdmin = me ? me.role === "owner" || me.role === "admin" : false;
+  const reload = useCallback(() => { api.listTeam().then(setMembers).catch(() => setMembers([])); }, []);
+  useEffect(() => { api.me().then(setMe).catch(() => {}); }, []);
+  useEffect(() => { if (isAdmin) reload(); }, [isAdmin, reload]);
+
+  async function doInvite() {
+    setMsg(null); setResult(null); setCopied(false);
+    if (!invite.email.trim()) return;
+    setBusy(true);
+    try {
+      const r = await api.inviteMember({ email: invite.email.trim(), role: invite.role });
+      setResult(r);
+      setInvite({ email: "", role: "editor" });
+      reload();
+    } catch { setMsg("Could not invite (that email may already be on the team)."); }
+    finally { setBusy(false); }
+  }
+  function copyInvite() {
+    if (!result?.invite_url) return;
+    navigator.clipboard?.writeText(result.invite_url).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1800); }).catch(() => {});
+  }
+  async function setRole(uid: string, role: string) { try { await api.updateMember(uid, { role }); reload(); } catch { setMsg("Could not update role."); } }
+  async function deactivate(uid: string) { if (!window.confirm("Deactivate this user?")) return; try { await api.deactivateMember(uid); reload(); } catch { setMsg("Could not deactivate."); } }
+  function logout() { clearTokens(); window.location.reload(); }
+
+  return (
+    <Card title="Team & account" action={<button className="btn btn-secondary btn-sm" onClick={logout}><Icon name="external" size={14} />Sign out</button>}>
+      {me && (
+        <div className="field-help" style={{ marginTop: 0, marginBottom: 10 }}>
+          Signed in as <b>{me.email || "(dev)"}</b> · role <span className="typechip">{me.role}</span>
+          {me.is_fallback && <span className="pill pill-muted" style={{ height: 16, marginLeft: 8 }}>auth disabled (dev)</span>}
+        </div>
+      )}
+      {isAdmin && (
+        <>
+          <div style={{ border: "1px solid var(--line)", borderRadius: 10, padding: 12, marginBottom: 12, background: "var(--bg-1)" }}>
+            <div className="t-body-sm" style={{ fontWeight: 600, marginBottom: 8 }}>Invite a teammate</div>
+            <div className="row gap2" style={{ alignItems: "flex-end", flexWrap: "wrap" }}>
+              <label className="col gap1" style={{ flex: "2 1 220px", minWidth: 200 }}>
+                <span className="t-micro">Email</span>
+                <input className="input" type="email" placeholder="teammate@company.com" value={invite.email}
+                  onChange={(e) => setInvite((i) => ({ ...i, email: e.target.value }))} onKeyDown={(e) => { if (e.key === "Enter") doInvite(); }} />
+              </label>
+              <label className="col gap1" style={{ flex: "0 0 140px" }}>
+                <span className="t-micro">Role</span>
+                <select className="select" value={invite.role} onChange={(e) => setInvite((i) => ({ ...i, role: e.target.value }))}>
+                  {ROLES.filter((r) => r !== "owner").map((r) => <option key={r} value={r}>{r}</option>)}
+                </select>
+              </label>
+              <button className="btn btn-primary btn-sm" onClick={doInvite} disabled={busy || !invite.email.trim()} style={{ height: 34 }}>
+                <Icon name="plus" size={14} />{busy ? "Inviting…" : "Send invite"}
+              </button>
+            </div>
+            <div className="field-help" style={{ marginTop: 8, marginBottom: 0 }}>
+              They'll get an email with a secure link to set their own password and join the workspace.
+            </div>
+          </div>
+          {result && (
+            <div className="card" style={{ padding: 10, marginBottom: 12, background: "var(--bg-2)" }}>
+              {result.email_sent ? (
+                <div className="t-body-sm"><Icon name="check" size={13} style={{ color: "var(--ok)" }} /> Invitation emailed to <b>{result.email}</b>. They'll set their own password from the link.</div>
+              ) : (
+                <>
+                  <div className="t-body-sm" style={{ marginBottom: 6 }}>Invite created for <b>{result.email}</b>. Email isn't configured on this server, so share this link - it lets them set their password and join:</div>
+                  <div className="row gap2">
+                    <input className="input mono" readOnly value={result.invite_url || ""} style={{ flex: 1, fontSize: 12 }} onFocus={(e) => e.currentTarget.select()} />
+                    <button className="btn btn-secondary btn-sm" onClick={copyInvite}><Icon name={copied ? "check" : "copy"} size={13} />{copied ? "Copied" : "Copy"}</button>
+                  </div>
+                </>
+              )}
+            </div>
+          )}
+          {members.map((m) => (
+            <div key={m.id} className="row spread" style={{ padding: "7px 0", borderTop: "1px solid var(--line)" }}>
+              <div className="row gap2"><Icon name="user" size={15} style={{ color: "var(--fg-2)" }} /><span className="t-body-sm">{m.email}</span>{m.status !== "active" && <span className="pill pill-muted" style={{ height: 16 }}>{m.status}</span>}</div>
+              <div className="row gap2">
+                <select className="select" value={m.role} disabled={m.id === me?.id} onChange={(e) => setRole(m.id, e.target.value)}>
+                  {ROLES.map((r) => <option key={r} value={r}>{r}</option>)}
+                </select>
+                {m.id !== me?.id && <button className="iconbtn" title="Deactivate" onClick={() => deactivate(m.id)}><Icon name="trash" size={14} /></button>}
+              </div>
+            </div>
+          ))}
+        </>
+      )}
+      {msg && <div className="t-caption" style={{ color: "var(--err)", marginTop: 8 }}>{msg}</div>}
+    </Card>
+  );
+}
+
+/* Model pricing editor - per-1M input/output token rates used to cost runs. Backed by
+   GET/PUT /v1/pricing. Rows come from the known model catalog merged with any custom
+   models already priced on the server. */
+function PricingCard() {
+  const [pricing, setPricing] = useState<Record<string, { input_per_1m: number; output_per_1m: number }>>({});
+  const MODELS = useModels();
+  const [draft, setDraft] = useState<Record<string, { input_per_1m: string; output_per_1m: string }>>({});
+  const [loaded, setLoaded] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+  const [save, setSave] = useState<"idle" | "saving" | "saved">("idle");
+
+  const reload = useCallback(() => {
+    api.listPricing().then((p) => { setPricing(p || {}); setLoaded(true); }).catch((e) => { setErr(String(e?.message || e)); setLoaded(true); });
+  }, []);
+  useEffect(() => { reload(); }, [reload]);
+
+  // Show every catalog model (minus the offline fake) plus any extra priced models.
+  const rows = useMemo(() => {
+    const ids = new Set<string>([...MODELS.filter((m) => m.id !== "fake:echo").map((m) => m.id), ...Object.keys(pricing)]);
+    return Array.from(ids).sort();
+  }, [pricing]);
+
+  const val = (model: string, key: "input_per_1m" | "output_per_1m"): string => {
+    const d = draft[model];
+    if (d && d[key] !== undefined) return d[key];
+    const p = pricing[model];
+    return p && p[key] != null ? String(p[key]) : "";
+  };
+  const edit = (model: string, key: "input_per_1m" | "output_per_1m", v: string) =>
+    setDraft((d) => ({ ...d, [model]: { input_per_1m: val(model, "input_per_1m"), output_per_1m: val(model, "output_per_1m"), [key]: v } }));
+
+  async function saveAll() {
+    setSave("saving");
+    try {
+      for (const [model, d] of Object.entries(draft)) {
+        const input_per_1m = parseFloat(d.input_per_1m);
+        const output_per_1m = parseFloat(d.output_per_1m);
+        if (Number.isNaN(input_per_1m) && Number.isNaN(output_per_1m)) continue;
+        await api.setPricing(model, { input_per_1m: input_per_1m || 0, output_per_1m: output_per_1m || 0 });
+      }
+      setDraft({});
+      reload();
+      setSave("saved"); setTimeout(() => setSave("idle"), 1400);
+    } catch (e) { setErr(String((e as any)?.message || e)); setSave("idle"); }
+  }
+
+  const dirty = Object.keys(draft).length > 0;
+
+  return (
+    <Card title="Model pricing" action={<button className="btn btn-primary btn-sm" onClick={saveAll} disabled={!dirty || save === "saving"}><Icon name={save === "saved" ? "check" : "save"} size={14} />{save === "saving" ? "Saving…" : save === "saved" ? "Saved" : "Save pricing"}</button>}>
+      <div className="field-help" style={{ marginTop: 0, marginBottom: 10 }}>Rates in USD per 1M tokens. Used to compute run cost in Traces and to enforce budgets.</div>
+      {err && <div className="card" style={{ padding: 10, color: "var(--err)", marginBottom: 10 }}>{err}</div>}
+      {!loaded ? (
+        <div className="fg-2 t-caption">Loading pricing…</div>
+      ) : rows.length === 0 ? (
+        <EmptyState icon="coins" title="No models to price" sub="Add a model to the catalog to set its rates." />
+      ) : (
+        <table className="tbl tbl-dense">
+          <thead><tr><th>Model</th><th style={{ textAlign: "right" }}>Input $/1M</th><th style={{ textAlign: "right" }}>Output $/1M</th></tr></thead>
+          <tbody>
+            {rows.map((model) => (
+              <tr key={model}>
+                <td><span className="mono-sm">{model}</span></td>
+                <td style={{ textAlign: "right" }}>
+                  <input className="input mono" type="number" min={0} step={0.01} style={{ width: 110, textAlign: "right", display: "inline-block" }}
+                    value={val(model, "input_per_1m")} placeholder="—" onChange={(e) => edit(model, "input_per_1m", e.target.value)} />
+                </td>
+                <td style={{ textAlign: "right" }}>
+                  <input className="input mono" type="number" min={0} step={0.01} style={{ width: 110, textAlign: "right", display: "inline-block" }}
+                    value={val(model, "output_per_1m")} placeholder="—" onChange={(e) => edit(model, "output_per_1m", e.target.value)} />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </Card>
+  );
+}
+
+/* Guardrails & Egress: one project-level I/O policy enforced on EVERY agent, plus the
+   outbound-network egress scope. Content guardrails compile to `config.default_middleware`
+   (the engine prepends this to every agent's own middleware stack — see agent_node); the
+   network scope writes `config.egress` (the SSRF EgressPolicy, applied to every tool/webhook/
+   web_fetch call). Entries this screen owns are tagged `_managed`, so any middleware authored
+   elsewhere is preserved on save.
+
+   Textareas keep their raw text in `config._guardrails_ui` (a UI-only sidecar the backend
+   ignores) — deriving the value from the compiled arrays instead would strip a trailing newline
+   on every keystroke, making it impossible to type a second line. Built-in PII compiles to a
+   `pii` entry per type; custom patterns add a `detector` regex (label = its pii_type); blocked
+   terms compile to one case-insensitive `guardrail_regex` of escaped literals (no runaway-regex
+   risk). Only patterns that parse as a valid regex are compiled, so a half-typed one can't break
+   every agent's compile. */
+const PII_TYPES: [string, string][] = [
+  ["email", "Email"], ["credit_card", "Credit card"], ["ip", "IP address"], ["mac_address", "MAC address"], ["url", "URL"],
+];
+function escapeRegex(s: string): string { return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); }
+function isValidRegex(p: string): boolean { try { new RegExp(p); return true; } catch { return false; } }
+const splitLines = (s: string): string[] => (s || "").split("\n").map((x) => x.trim()).filter(Boolean);
+// Parse "Label = regex" lines into {name, pattern}. Split on the first "=" so a pattern may
+// itself contain "="; lines without both parts are skipped (e.g. a blank in-progress row).
+function parseCustoms(text: string): { name: string; pattern: string }[] {
+  const out: { name: string; pattern: string }[] = [];
+  for (const line of (text || "").split("\n")) {
+    const t = line.trim();
+    const i = t.indexOf("=");
+    if (i <= 0) continue;
+    const name = t.slice(0, i).trim();
+    const pattern = t.slice(i + 1).trim();
+    if (name && pattern) out.push({ name, pattern });
+  }
+  return out;
+}
+
+function GuardrailsCard({ config, setCfg }: { config: Record<string, any>; setCfg: (patch: Record<string, any>) => void }) {
+  const mw: any[] = Array.isArray(config.default_middleware) ? config.default_middleware : [];
+  const isManagedPii = (m: any) => m?.type === "pii" && m?.config?._managed;
+  const isManagedTerms = (m: any) => m?.type === "guardrail_regex" && m?.config?._managed;
+  const unmanaged = mw.filter((m) => !isManagedPii(m) && !isManagedTerms(m));
+  const pii = mw.filter(isManagedPii);
+  const termsEntry = mw.find(isManagedTerms);
+  const egress = config.egress || {};
+  const ui = config._guardrails_ui || {};
+
+  // Discrete controls read straight from the compiled entries (no typing, so no newline issue).
+  const builtinTypes = new Set<string>(pii.filter((m) => !m.config?.detector).map((m) => m.config?.pii_type));
+  const strategy: string = pii[0]?.config?.strategy || "redact";
+  const scanIn: boolean = pii[0]?.config?.apply_to_input ?? true;
+  const scanOut: boolean = pii[0]?.config?.apply_to_output ?? true;
+  const onMatch: string = termsEntry?.config?.on_match || "block";
+  const blockPrivate = !!egress.block_private;
+  // Free-text controls read their raw text from the sidecar, falling back to reconstructing it
+  // from the compiled config (for policies created via the API or before this UI existed).
+  const termsText: string = ui.terms_text ?? (termsEntry?.config?._terms || []).join("\n");
+  const customsText: string = ui.customs_text ?? pii.filter((m) => m.config?.detector).map((m) => `${m.config.pii_type} = ${m.config.detector}`).join("\n");
+  const allowText: string = ui.allow_text ?? (egress.allow_hosts || []).join("\n");
+  const denyText: string = ui.deny_text ?? (egress.deny_hosts || []).join("\n");
+
+  const invalidCustoms = parseCustoms(customsText).filter((c) => !isValidRegex(c.pattern)).map((c) => c.name);
+  const hasPii = builtinTypes.size > 0 || parseCustoms(customsText).length > 0;
+
+  // Recompile the whole managed policy from a snapshot of UI state, preserving unmanaged entries.
+  function commit(next: Partial<{ types: Set<string>; strategy: string; scanIn: boolean; scanOut: boolean; termsText: string; customsText: string; onMatch: string; blockPrivate: boolean; allowText: string; denyText: string }>) {
+    const types = next.types ?? builtinTypes;
+    const strat = next.strategy ?? strategy;
+    const sIn = next.scanIn ?? scanIn;
+    const sOut = next.scanOut ?? scanOut;
+    const tText = next.termsText ?? termsText;
+    const cText = next.customsText ?? customsText;
+    const oMatch = next.onMatch ?? onMatch;
+    const bPriv = next.blockPrivate ?? blockPrivate;
+    const aText = next.allowText ?? allowText;
+    const dText = next.denyText ?? denyText;
+
+    const mkPii = (pii_type: string, detector?: string) => ({
+      type: "pii", config: { _managed: true, pii_type, ...(detector ? { detector } : {}), strategy: strat, apply_to_input: sIn, apply_to_output: sOut },
+    });
+    const builtin = [...types].map((t) => mkPii(t));
+    const customs = parseCustoms(cText).filter((c) => isValidRegex(c.pattern)).map((c) => mkPii(c.name, c.pattern));
+    const termList = splitLines(tText);
+    const termEntry = termList.length
+      ? [{ type: "guardrail_regex", config: { _managed: true, _terms: termList, patterns: termList.map((t) => "(?i)" + escapeRegex(t)), on_match: oMatch, apply_to: "both" } }]
+      : [];
+
+    const allow = splitLines(aText);
+    const deny = splitLines(dText);
+    const nextEgress: Record<string, any> = { ...egress };
+    if (bPriv) nextEgress.block_private = true; else delete nextEgress.block_private;
+    if (allow.length) nextEgress.allow_hosts = allow; else delete nextEgress.allow_hosts;
+    if (deny.length) nextEgress.deny_hosts = deny; else delete nextEgress.deny_hosts;
+
+    setCfg({
+      default_middleware: [...unmanaged, ...builtin, ...customs, ...termEntry],
+      egress: Object.keys(nextEgress).length ? nextEgress : undefined,
+      _guardrails_ui: { terms_text: tText, customs_text: cText, allow_text: aText, deny_text: dText },
+    });
+  }
+
+  return (
+    <>
+      <Card title="Content guardrails">
+        <div className="field-help" style={{ marginTop: 0, marginBottom: 12 }}>
+          Enforced on <b>every agent</b> in this project, ahead of any per-agent middleware. These run locally (regex) on each turn — no added network latency. Use an agent's own middleware for exceptions.
+        </div>
+        <Field label="Redact / block PII" help="Detect these entities in messages and apply the strategy below. Each type is matched with a built-in detector.">
+          <div className="row gap2 wrap">
+            {PII_TYPES.map(([id, label]) => {
+              const on = builtinTypes.has(id);
+              return (
+                <button key={id} type="button"
+                  onClick={() => { const t = new Set(builtinTypes); if (on) t.delete(id); else t.add(id); commit({ types: t }); }}
+                  style={{ padding: "5px 11px", borderRadius: 8, border: "1px solid var(--line)", cursor: "pointer", fontSize: 13, fontWeight: 600, background: on ? "var(--accent)" : "transparent", color: on ? "#fff" : "var(--fg-1)" }}>
+                  {label}
+                </button>
+              );
+            })}
+          </div>
+        </Field>
+        <Field label="Custom patterns" help="One per line as `Label = regex` — e.g. a phone or national-ID format. Matched with your regex and handled by the strategy below. Unlike blocked terms, a regex you write here is your responsibility (keep it simple to avoid slow matching).">
+          <textarea className="textarea mono" rows={2} placeholder={"Phone = \\d{3}[- ]?\\d{3}[- ]?\\d{4}\nUS SSN = \\d{3}-\\d{2}-\\d{4}"}
+            value={customsText} onChange={(e) => commit({ customsText: e.target.value })} />
+        </Field>
+        {invalidCustoms.length > 0 && (
+          <div className="field-help" style={{ marginTop: -6, color: "var(--err)" }}>⚠ Not a valid regex (ignored until fixed): {invalidCustoms.join(", ")}</div>
+        )}
+        {hasPii && (
+          <>
+            <Field label="Strategy" help="Applies to every PII match above (built-in and custom). Redact removes the value, Mask shows only the last few chars, Hash substitutes a stable hash, Block refuses the whole message.">
+              <Segmented
+                options={[{ value: "redact", label: "Redact" }, { value: "mask", label: "Mask" }, { value: "hash", label: "Hash" }, { value: "block", label: "Block" }]}
+                value={strategy} onChange={(v) => commit({ strategy: v })} />
+            </Field>
+            <div className="row gap3 wrap">
+              <label className="row gap2" style={{ alignItems: "center" }}><Toggle on={scanIn} onChange={(v) => commit({ scanIn: v })} /><span className="t-body-sm">Scan input (what comes in)</span></label>
+              <label className="row gap2" style={{ alignItems: "center" }}><Toggle on={scanOut} onChange={(v) => commit({ scanOut: v })} /><span className="t-body-sm">Scan output (what leaves to the model / user)</span></label>
+            </div>
+          </>
+        )}
+        <div style={{ height: 14 }} />
+        <Field label="Blocked terms" help="One term per line. Matched case-insensitively in both input and output. Kept as literal keywords — safe from regex pitfalls.">
+          <textarea className="textarea mono" rows={3} placeholder={"internal-codename\nproject-atlas"}
+            value={termsText} onChange={(e) => commit({ termsText: e.target.value })} />
+        </Field>
+        {splitLines(termsText).length > 0 && (
+          <Field label="On a blocked term" help="Block replaces the message with a notice; Redact masks just the term; Flag keeps it but tags the trace for review.">
+            <Segmented
+              options={[{ value: "block", label: "Block" }, { value: "redact", label: "Redact" }, { value: "flag", label: "Flag" }]}
+              value={onMatch} onChange={(v) => commit({ onMatch: v })} />
+          </Field>
+        )}
+      </Card>
+
+      <Card title="Network egress">
+        <div className="field-help" style={{ marginTop: 0, marginBottom: 12 }}>
+          Scopes where this project's tools, webhooks, and web-fetch can connect. It can only <b>tighten</b> the server's egress guard for this project — never loosen it.
+        </div>
+        <label className="row spread" style={{ padding: "8px 0" }}>
+          <div><div className="t-body-sm" style={{ fontWeight: 600 }}>Block private / internal addresses</div><div className="field-help" style={{ marginTop: 0 }}>Refuse outbound calls that resolve to private, loopback, or cloud-metadata addresses (SSRF guard).</div></div>
+          <Toggle on={blockPrivate} onChange={(v) => commit({ blockPrivate: v })} />
+        </label>
+        <Field label="Allowed domains" help="One host per line. If any are listed, ONLY these hosts (and their subdomains) are reachable — everything else is blocked.">
+          <textarea className="textarea mono" rows={2} placeholder={"api.example.com\nhooks.slack.com"}
+            value={allowText} onChange={(e) => commit({ allowText: e.target.value })} />
+        </Field>
+        <Field label="Blocked domains" help="One host per line. These hosts (and their subdomains) are always refused.">
+          <textarea className="textarea mono" rows={2} placeholder={"pastebin.com"}
+            value={denyText} onChange={(e) => commit({ denyText: e.target.value })} />
+        </Field>
+      </Card>
+    </>
+  );
+}
+
+function Card({ title, action, children }: { title: string; action?: React.ReactNode; children: React.ReactNode }) {
+  return (
+    <div className="card" style={{ padding: 18, marginBottom: 16 }}>
+      <div className="row spread" style={{ marginBottom: 12 }}><div className="t-h2">{title}</div>{action}</div>
+      {children}
+    </div>
+  );
+}
diff --git a/apps/web/components/screens/tools.tsx b/apps/web/components/screens/tools.tsx
new file mode 100644
index 0000000..8110481
--- /dev/null
+++ b/apps/web/components/screens/tools.tsx
@@ -0,0 +1,1020 @@
+"use client";
+/* Tools list (card grid) + Tool Builder (tabbed config + Live response token-meter signature). */
+import * as jmespath from "jmespath";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Icon } from "../icons";
+import { Field, Modal, Segmented, StatusPill, Tabs, Tile, TokenMeter, Toggle } from "../primitives";
+import { VersionHistory } from "../version-history";
+import { ImportExport } from "../import-export";
+import { api, AuthProviderT, Tool, ToolSet, ToolTestResult } from "@/lib/api";
+import { KIND_ICON, KIND_LABEL } from "@/lib/data";
+
+const estTokens = (o: any) => (o == null ? 0 : Math.max(1, JSON.stringify(o).length >> 2));
+
+const DEFAULT_SAMPLE = {
+  data: {
+    totals: { subtotal: 4210.0, tax: 421.0, grand_total: 4631.0 },
+    customer: { name: "Ada Lovelace", email: "ada@example.com", tier: "gold" },
+    line_items: [{ sku: "WIDGET-1", qty: 2, price: 1200 }, { sku: "GADGET-9", qty: 1, price: 1810 }],
+    status: "open",
+  },
+  meta: { request_id: "req_8f21c0", ts: 1780000000, page: 1, per_page: 50 },
+};
+
+/* ============ TOOLS LIST ============ */
+/* last_tested → [dot colour, label]. Untested reads amber (needs attention) per the design. */
+const STATUS = (s?: string | null): [string, string] =>
+  s === "pass" ? ["var(--ok)", "Passing"] : s === "fail" ? ["var(--err)", "Failing"] : ["var(--warn)", "Untested"];
+
+export function ToolsScreen({ project, onOpen }: { project: any; onOpen: (t: Tool) => void }) {
+  const [tools, setTools] = useState<Tool[]>([]);
+  const [err, setErr] = useState<string | null>(null);
+  const [view, setView] = useState<"grid" | "list">("grid");
+  const [open, setOpen] = useState(false);
+  const [toolSets, setToolSets] = useState<ToolSet[]>([]);
+  const [filterSet, setFilterSet] = useState<string>("all"); // "all" | "ungrouped" | <setId>
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [drawerSel, setDrawerSel] = useState<string | null>(null); // null = create a new set
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [query, setQuery] = useState("");
+
+  const reload = useCallback(() => {
+    if (!project?.id) return;
+    api.listTools(project.id).then(setTools).catch((e) => setErr(String(e.message || e)));
+    api.listToolSets(project.id).then(setToolSets).catch(() => {});
+  }, [project?.id]);
+  useEffect(() => { reload(); }, [reload]);
+
+  async function del(e: React.MouseEvent, t: Tool) {
+    e.stopPropagation();
+    if (t.kind === "builtin") return; // built-ins are platform capabilities — not deletable
+    if (!window.confirm(`Delete tool "${t.name}"? Workflows/agents referencing it will skip it. This cannot be undone.`)) return;
+    setTools((prev) => prev.filter((x) => x.id !== t.id)); // optimistic
+    try { await api.deleteTool(project.id, t.id); } catch { reload(); }
+  }
+
+  async function duplicate(e: React.MouseEvent, t: Tool) {
+    e.stopPropagation();
+    try {
+      const cfg = { ...((t.config as any) || {}) };
+      delete cfg._last_test; // start the copy untested
+      await api.createTool(project.id, { name: `${t.name}_copy`, kind: t.kind, config: cfg, auth_provider_id: t.auth_provider_id || undefined });
+      reload();
+    } catch (e2: any) { setErr(String(e2?.message || e2)); }
+  }
+
+  async function toggleEnabled(t: Tool) {
+    setTools((prev) => prev.map((x) => (x.id === t.id ? { ...x, enabled: !x.enabled } : x))); // optimistic
+    try { await api.updateTool(project.id, t.id, { enabled: !t.enabled }); } catch { reload(); }
+  }
+
+  async function toggleToolInSet(setId: string, toolId: string, isMember: boolean) {
+    try {
+      if (isMember) await api.removeToolFromSet(project.id, setId, toolId);
+      else await api.addToolToSet(project.id, setId, toolId);
+    } finally {
+      reload();
+    }
+  }
+
+  const memberOf = useMemo(() => {
+    const m = new Set<string>();
+    toolSets.forEach((s) => s.tool_ids.forEach((id) => m.add(id)));
+    return m;
+  }, [toolSets]);
+  const ungroupedCount = useMemo(() => tools.filter((t) => !memberOf.has(t.id)).length, [tools, memberOf]);
+  const countFor = useCallback((s: ToolSet) => { const ids = new Set(s.tool_ids); return tools.filter((t) => ids.has(t.id)).length; }, [tools]);
+
+  const shown = useMemo(() => {
+    let list = tools;
+    if (filterSet === "ungrouped") list = tools.filter((t) => !memberOf.has(t.id));
+    else if (filterSet !== "all") { const ids = new Set(toolSets.find((x) => x.id === filterSet)?.tool_ids || []); list = tools.filter((t) => ids.has(t.id)); }
+    const q = query.trim().toLowerCase();
+    if (q) list = list.filter((t) => t.name.toLowerCase().includes(q) || String((t.config as any)?.description || "").toLowerCase().includes(q));
+    // Built-ins (platform capabilities) always float to the top; stable within each group.
+    return [...list].sort((a, b) => (a.kind === "builtin" ? 0 : 1) - (b.kind === "builtin" ? 0 : 1));
+  }, [tools, toolSets, filterSet, memberOf, query]);
+
+  const showCheckbox = filterSet === "all" || filterSet === "ungrouped";
+  const headingLabel = filterSet === "all" ? "Tools" : filterSet === "ungrouped" ? "Ungrouped tools" : (toolSets.find((s) => s.id === filterSet)?.name || "Tools");
+
+  function selectFilter(key: string) { setFilterSet(key); setSelected(new Set()); }
+  function toggleSelect(id: string) { setSelected((prev) => { const n = new Set(prev); if (n.has(id)) n.delete(id); else n.add(id); return n; }); }
+  function openManage() { setDrawerSel(filterSet !== "all" && filterSet !== "ungrouped" ? filterSet : (toolSets[0]?.id ?? null)); setDrawerOpen(true); }
+  function openNewSet() { setDrawerSel(null); setDrawerOpen(true); }
+
+  // Bulk-assign the current selection to a set (skipping tools already in it), then clear.
+  async function addSelectedToSet(setId: string) {
+    const already = new Set(toolSets.find((s) => s.id === setId)?.tool_ids || []);
+    const toAdd = Array.from(selected).filter((id) => !already.has(id));
+    try { await Promise.all(toAdd.map((id) => api.addToolToSet(project.id, setId, id))); }
+    finally { setSelected(new Set()); reload(); }
+  }
+
+  return (
+    <div style={{ flex: 1, minHeight: 0, display: "flex" }}>
+      <ToolsSidebar tools={tools} toolSets={toolSets} countFor={countFor} ungroupedCount={ungroupedCount} filterSet={filterSet} onFilter={selectFilter} onNewSet={openNewSet} onManage={openManage} />
+
+      <div className="col" style={{ flex: 1, minWidth: 0 }}>
+        <div className="scroll-y" style={{ flex: 1, padding: "24px 28px 120px" }}>
+          <div className="fade-up" style={{ maxWidth: 1500, margin: "0 auto" }}>
+            <div style={{ marginBottom: 22 }}>
+              <div>
+                <div className="t-display">{headingLabel}</div>
+                <div className="fg-2" style={{ marginTop: 4, maxWidth: 560 }}>External capabilities - REST, GraphQL, code, SQL, or builtins - with response projection.</div>
+              </div>
+              <div className="row gap2 wrap" style={{ marginTop: 16, alignItems: "center" }}>
+                <input className="input" style={{ width: 220 }} placeholder="Search tools" value={query} onChange={(e) => setQuery(e.target.value)} />
+                <button className="btn btn-primary" onClick={() => setOpen(true)}><Icon name="plus" size={15} />New tool</button>
+                <ImportExport project={project} type="tool" typeLabel="tool" size="md" onImported={reload}
+                  items={tools.filter((t) => t.kind !== "builtin").map((t) => ({ id: t.id, name: t.name, sub: KIND_LABEL[t.kind] || t.kind }))} />
+                <div style={{ flex: 1, minWidth: 8 }} />
+                <Segmented options={[{ value: "grid", label: "Grid" }, { value: "list", label: "List" }]} value={view} onChange={(v) => setView(v as any)} />
+              </div>
+            </div>
+            {err && <div className="card" style={{ padding: 14, color: "var(--err)", marginBottom: 12 }}>{err}</div>}
+
+            {tools.length === 0 && !err ? (
+              <div className="card col center" style={{ padding: 44, gap: 8 }}><Tile icon="tools" color="var(--accent)" size={48} glow /><div className="t-h2">No tools yet</div><div className="fg-1">Create one, or ask the Forge Assistant to build it.</div></div>
+            ) : shown.length === 0 ? (
+              <div className="col center" style={{ padding: "60px 0", color: "var(--fg-2)", textAlign: "center" }}>
+                {filterSet === "ungrouped" ? "All tools are assigned to at least one toolset." : query ? "No tools match your search." : "No tools in this set yet."}
+              </div>
+            ) : view === "grid" ? (
+              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill,minmax(280px,1fr))", gap: 16 }}>
+                {shown.map((t) => <ToolCard key={t.id} t={t} sets={toolSets} selectable={showCheckbox} selected={selected.has(t.id)} onToggleSelect={() => toggleSelect(t.id)} memberSetIds={new Set(toolSets.filter((s) => s.tool_ids.includes(t.id)).map((s) => s.id))} onToggleSet={(sid, isMember) => toggleToolInSet(sid, t.id, isMember)} onOpen={() => onOpen(t)} onDelete={(e) => del(e, t)} onDuplicate={(e) => duplicate(e, t)} onToggle={() => toggleEnabled(t)} />)}
+              </div>
+            ) : (
+              <div className="card" style={{ overflowX: "auto" }}>
+                <table className="tbl">
+                  <thead><tr>{showCheckbox && <th style={{ width: 34 }}></th>}<th>Tool</th><th>Kind</th><th>Status</th><th></th></tr></thead>
+                  <tbody>
+                    {shown.map((t) => {
+                      const isBuiltin = t.kind === "builtin";
+                      return (
+                        <tr key={t.id} className="row" style={{ cursor: "pointer", boxShadow: isBuiltin ? "inset 3px 0 0 var(--signal)" : undefined }} onClick={() => onOpen(t)}>
+                          {showCheckbox && <td onClick={(e) => { e.stopPropagation(); toggleSelect(t.id); }}><Checkbox checked={selected.has(t.id)} /></td>}
+                          <td><div className="row gap2"><Icon name={isBuiltin ? "lock" : (KIND_ICON[t.kind] || "k_rest")} size={15} style={{ color: isBuiltin ? "var(--signal)" : "var(--accent)" }} /><span className="mono-sm" style={{ fontWeight: 600 }}>{t.name}</span></div></td>
+                          <td>{isBuiltin ? <span className="chip chip-mono" style={{ color: "var(--signal)", borderColor: "var(--signal)" }}>Built-in</span> : <span className="chip chip-mono">{KIND_LABEL[t.kind] || t.kind}</span>}</td>
+                          <td><StatusPill status={t.last_tested || "untested"} /></td>
+                          <td style={{ textAlign: "right" }}>
+                            <div className="row gap1" style={{ justifyContent: "flex-end" }}>
+                              <Toggle on={t.enabled} onChange={() => toggleEnabled(t)} />
+                              <button className="iconbtn" title="Duplicate tool" onClick={(e) => duplicate(e, t)}><Icon name="copy" size={14} /></button>
+                              {isBuiltin
+                                ? <button className="iconbtn" title="Built-in tool — protected" disabled onClick={(e) => e.stopPropagation()} style={{ opacity: 0.4, cursor: "default" }}><Icon name="lock" size={14} /></button>
+                                : <button className="iconbtn" title="Delete tool" onClick={(e) => { e.stopPropagation(); del(e, t); }}><Icon name="trash" size={14} /></button>}
+                            </div>
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {selected.size > 0 && <SelectionBar count={selected.size} toolSets={toolSets} onAddTo={addSelectedToSet} onClear={() => setSelected(new Set())} />}
+
+      <NewToolModal project={project} open={open} onClose={() => setOpen(false)} onOpenTool={onOpen} onReload={reload} />
+      <ManageToolsetsDrawer project={project} tools={tools} toolSets={toolSets} open={drawerOpen} initialSel={drawerSel} onClose={() => setDrawerOpen(false)} onChanged={reload} />
+    </div>
+  );
+}
+
+/* ============ TOOLS SIDEBAR (All / Ungrouped / colour-coded toolsets) ============ */
+function Checkbox({ checked }: { checked: boolean }) {
+  return (
+    <div style={{ width: 16, height: 16, borderRadius: 4, flex: "none", border: `1.5px solid ${checked ? "var(--accent)" : "var(--line-strong)"}`, background: checked ? "var(--accent)" : "var(--bg-1)", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer" }}>
+      {checked && <Icon name="check" size={11} style={{ color: "var(--fg-on-accent)" }} />}
+    </div>
+  );
+}
+
+function SideItem({ label, count, active, onClick, alert }: { label: string; count: number; active: boolean; onClick: () => void; alert?: boolean }) {
+  return (
+    <div onClick={onClick} className="sidenav-item" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "8px 10px", borderRadius: 8, cursor: "pointer", fontWeight: active ? 600 : 500, fontSize: 13.5, background: active ? "var(--accent-glow)" : undefined, color: active ? "var(--accent)" : "var(--fg-1)" }}>
+      <span style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
+        <span className="truncate">{label}</span>
+        {alert && <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--warn)", flex: "none" }} />}
+      </span>
+      <span style={{ fontSize: 12, fontWeight: 500, color: "var(--fg-2)", flex: "none" }}>{count}</span>
+    </div>
+  );
+}
+
+function ToolsSidebar({ tools, toolSets, countFor, ungroupedCount, filterSet, onFilter, onNewSet, onManage }: { tools: Tool[]; toolSets: ToolSet[]; countFor: (s: ToolSet) => number; ungroupedCount: number; filterSet: string; onFilter: (k: string) => void; onNewSet: () => void; onManage: () => void }) {
+  return (
+    <div className="col" style={{ width: 236, flex: "0 0 236px", background: "var(--bg-1)", borderRight: "1px solid var(--line)", padding: "20px 14px", gap: 22, overflowY: "auto" }}>
+      <div className="t-h2" style={{ padding: "0 8px" }}>MCP Tools</div>
+
+      <div className="col" style={{ gap: 2 }}>
+        <SideItem label="All tools" count={tools.length} active={filterSet === "all"} onClick={() => onFilter("all")} />
+        <SideItem label="Ungrouped" count={ungroupedCount} active={filterSet === "ungrouped"} onClick={() => onFilter("ungrouped")} alert={ungroupedCount > 0} />
+      </div>
+
+      <div className="col" style={{ gap: 6 }}>
+        <div className="row spread" style={{ padding: "0 10px" }}>
+          <span className="t-micro">Toolsets</span>
+          <button className="iconbtn" title="New toolset" onClick={onNewSet} style={{ width: 22, height: 22 }}><Icon name="plus" size={14} /></button>
+        </div>
+        {toolSets.map((s) => (
+          <SideItem key={s.id} label={s.name} count={countFor(s)} active={filterSet === s.id} onClick={() => onFilter(s.id)} />
+        ))}
+        {toolSets.length === 0 && <div className="fg-2 t-caption" style={{ padding: "2px 10px" }}>No toolsets yet.</div>}
+        <button onClick={onManage} className="btn btn-ghost btn-sm" style={{ marginTop: 4, justifyContent: "center", border: "1px dashed var(--line-strong)" }}>Manage toolsets</button>
+      </div>
+
+      <div style={{ marginTop: "auto", padding: 10, background: "var(--bg-3)", borderRadius: 8, fontSize: 12, color: "var(--fg-2)", lineHeight: 1.5 }}>
+        A tool can belong to any number of toolsets - assign it from its card, bulk-select, or Manage toolsets.
+      </div>
+    </div>
+  );
+}
+
+/* Bulk-action bar (fixed, bottom-centre) shown while tools are multi-selected. */
+function SelectionBar({ count, toolSets, onAddTo, onClear }: { count: number; toolSets: ToolSet[]; onAddTo: (setId: string) => void; onClear: () => void }) {
+  const [menu, setMenu] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!menu) return;
+    const h = (e: MouseEvent) => { if (ref.current && !ref.current.contains(e.target as Node)) setMenu(false); };
+    window.addEventListener("mousedown", h);
+    return () => window.removeEventListener("mousedown", h);
+  }, [menu]);
+  return (
+    <div className="fade-up row gap3" style={{ position: "fixed", bottom: 24, left: "50%", transform: "translateX(-50%)", background: "var(--fg-0)", color: "var(--bg-1)", borderRadius: 12, padding: "10px 14px", boxShadow: "var(--sh-pop)", zIndex: 5000 }}>
+      <span style={{ fontSize: 13, fontWeight: 600 }}>{count} selected</span>
+      <div ref={ref} style={{ position: "relative" }}>
+        <button onClick={() => setMenu((m) => !m)} style={{ fontSize: 13, fontWeight: 600, padding: "7px 12px", borderRadius: 8, background: "var(--bg-hover)", color: "var(--fg-0)", border: "none", cursor: "pointer", fontFamily: "var(--font-ui)" }}>Add to toolset ▾</button>
+        {menu && (
+          <div className="card" style={{ position: "absolute", bottom: "calc(100% + 8px)", left: 0, minWidth: 200, padding: 6, boxShadow: "var(--sh-pop)" }}>
+            {toolSets.length === 0 && <div className="fg-2 t-caption" style={{ padding: "8px 10px" }}>No toolsets yet.</div>}
+            {toolSets.map((s) => (
+              <button key={s.id} onClick={() => { setMenu(false); onAddTo(s.id); }} className="truncate" style={{ width: "100%", textAlign: "left", padding: "8px 10px", border: "none", background: "none", borderRadius: 6, cursor: "pointer", fontSize: 13, color: "var(--fg-0)", fontFamily: "var(--font-ui)" }}>{s.name}</button>
+            ))}
+          </div>
+        )}
+      </div>
+      <button onClick={onClear} style={{ fontSize: 13, fontWeight: 600, color: "var(--fg-2)", background: "none", border: "none", cursor: "pointer", fontFamily: "var(--font-ui)" }}>Cancel</button>
+    </div>
+  );
+}
+
+/* ============ MANAGE TOOLSETS (right drawer: set list + editor) ============ */
+function ManageToolsetsDrawer({ project, tools, toolSets, open, initialSel, onClose, onChanged }: { project: any; tools: Tool[]; toolSets: ToolSet[]; open: boolean; initialSel: string | null; onClose: () => void; onChanged: () => void }) {
+  const [sel, setSel] = useState<string | null>(initialSel); // null = creating a new set
+  const [name, setName] = useState("");
+  const [desc, setDesc] = useState("");
+  const [memberIds, setMemberIds] = useState<string[]>([]);
+  const [busy, setBusy] = useState(false);
+  const [addOpen, setAddOpen] = useState(false);
+  const addRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => { if (open) setSel(initialSel); }, [open, initialSel]);
+  useEffect(() => {
+    if (sel == null) { setName(""); setDesc(""); setMemberIds([]); return; }
+    const s = toolSets.find((x) => x.id === sel);
+    if (s) { setName(s.name); setDesc(s.description || ""); setMemberIds(s.tool_ids); }
+  }, [sel, toolSets]);
+  useEffect(() => {
+    if (!addOpen) return;
+    const h = (e: MouseEvent) => { if (addRef.current && !addRef.current.contains(e.target as Node)) setAddOpen(false); };
+    window.addEventListener("mousedown", h);
+    return () => window.removeEventListener("mousedown", h);
+  }, [addOpen]);
+
+  const saved = toolSets.find((x) => x.id === sel)?.tool_ids || [];
+  // The list shows only tools that belong to the set - plus any member you just unchecked,
+  // kept visible (unchecked) until you Save, at which point it drops off. Unrelated tools
+  // are never listed here; add them from the "Add tools" picker.
+  const visibleIds = useMemo(() => new Set([...saved, ...memberIds]), [saved, memberIds]);
+  const memberList = tools.filter((t) => visibleIds.has(t.id));
+  const addable = tools.filter((t) => !visibleIds.has(t.id));
+  const addMember = (tid: string) => setMemberIds((m) => (m.includes(tid) ? m : [...m, tid]));
+  const toggleMember = (tid: string) => setMemberIds((m) => (m.includes(tid) ? m.filter((x) => x !== tid) : [...m, tid]));
+
+  async function save() {
+    setBusy(true);
+    try {
+      if (sel == null) { const s = await api.createToolSet(project.id, { name: name.trim() || "new_toolset", description: desc, tool_ids: memberIds }); setSel(s.id); }
+      else await api.updateToolSet(project.id, sel, { name, description: desc, tool_ids: memberIds });
+      onChanged();
+    } finally { setBusy(false); }
+  }
+  async function del() {
+    if (sel == null) return;
+    if (!window.confirm("Delete this tool set? The tools themselves are not deleted.")) return;
+    await api.deleteToolSet(project.id, sel);
+    setSel(null); onChanged();
+  }
+
+  return (
+    <div style={{ position: "fixed", inset: 0, zIndex: 7000, pointerEvents: open ? "auto" : "none" }}>
+      <div onClick={onClose} style={{ position: "absolute", inset: 0, background: "rgba(8,10,14,.4)", opacity: open ? 1 : 0, transition: "opacity var(--dur)" }} />
+      <div className="row" style={{ position: "absolute", top: 0, right: 0, bottom: 0, width: 640, maxWidth: "96vw", background: "var(--bg-1)", borderLeft: "1px solid var(--line)", boxShadow: "var(--sh-pop)", transform: open ? "none" : "translateX(100%)", transition: "transform var(--dur-slow) var(--ease)", alignItems: "stretch" }}>
+        <div className="col" style={{ width: 210, flex: "0 0 210px", borderRight: "1px solid var(--line)", padding: "20px 12px", gap: 4, overflowY: "auto" }}>
+          <div className="t-h1" style={{ padding: "4px 8px 12px" }}>Toolsets</div>
+          {toolSets.map((s) => {
+            const active = sel === s.id;
+            return (
+              <div key={s.id} onClick={() => setSel(s.id)} className="sidenav-item" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "9px 10px", borderRadius: 8, cursor: "pointer", background: active ? "var(--accent-glow)" : undefined }}>
+                <span className="truncate" style={{ minWidth: 0, fontSize: 13, fontWeight: active ? 600 : 500, color: active ? "var(--accent)" : "var(--fg-1)" }}>{s.name}</span>
+                <span className="fg-2 t-caption">{s.tool_ids.length}</span>
+              </div>
+            );
+          })}
+          <button onClick={() => setSel(null)} className="btn btn-ghost btn-sm" style={{ marginTop: 6, justifyContent: "flex-start", color: sel == null ? "var(--accent)" : "var(--fg-1)" }}><Icon name="plus" size={13} />New toolset</button>
+        </div>
+
+        {/* Right editor pane: header + fields + list header stay put; only the member list
+            scrolls, and the action row is pinned to the bottom. */}
+        <div className="col grow" style={{ minWidth: 0, minHeight: 0 }}>
+          <div style={{ position: "relative", zIndex: 3, padding: "22px 24px 0" }}>
+            <div className="row spread" style={{ marginBottom: 16 }}>
+              <div className="t-h1">{sel == null ? "New toolset" : name || "Toolset"}</div>
+              <button className="iconbtn" onClick={onClose}><Icon name="x" size={17} /></button>
+            </div>
+            <Field label="Name"><input className="input" value={name} onChange={(e) => setName(e.target.value)} placeholder="crm_tools" /></Field>
+            <Field label="Description" help="Shown to MCP clients/agents to describe what the set is for."><input className="input" value={desc} onChange={(e) => setDesc(e.target.value)} /></Field>
+
+            <div className="row spread" style={{ margin: "6px 0 8px", alignItems: "center" }}>
+              <span className="t-micro">Tools in this set - {memberIds.length}</span>
+              <div ref={addRef} style={{ position: "relative" }}>
+                <button className="btn btn-ghost btn-sm" onClick={() => setAddOpen((o) => !o)} disabled={addable.length === 0}><Icon name="plus" size={13} />Add tools</button>
+                {addOpen && addable.length > 0 && (
+                  <div className="card fade-in" style={{ position: "absolute", top: "calc(100% + 4px)", right: 0, zIndex: 10, minWidth: 260, maxHeight: 280, overflowY: "auto", padding: 4, boxShadow: "var(--sh-pop)" }}>
+                    {addable.map((t) => (
+                      <button key={t.id} onClick={() => addMember(t.id)} className="row spread gap2" style={{ width: "100%", padding: "7px 9px", border: "none", background: "none", borderRadius: 6, cursor: "pointer", fontFamily: "var(--font-ui)" }}>
+                        <span className="mono-sm truncate" style={{ fontWeight: 600 }}>{t.name}</span>
+                        <span className="chip chip-mono">{KIND_LABEL[t.kind] || t.kind}</span>
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <div className="scroll-y" style={{ flex: 1, minHeight: 0, padding: "0 24px 8px" }}>
+            <div className="col" style={{ border: "1px solid var(--line)", borderRadius: 10, overflow: "hidden" }}>
+              {memberList.map((t, i) => (
+                <div key={t.id} onClick={() => toggleMember(t.id)} className="row gap2" style={{ padding: "10px 12px", borderBottom: i < memberList.length - 1 ? "1px solid var(--line)" : "none", cursor: "pointer" }}>
+                  <Checkbox checked={memberIds.includes(t.id)} />
+                  <span className="mono-sm" style={{ fontWeight: 600, flex: 1, minWidth: 0 }}>{t.name}</span>
+                  <span className="chip chip-mono">{KIND_LABEL[t.kind] || t.kind}</span>
+                </div>
+              ))}
+              {memberList.length === 0 && <div className="fg-2 t-caption" style={{ padding: 14 }}>No tools in this set yet — use “Add tools”.</div>}
+            </div>
+          </div>
+
+          <div className="row spread" style={{ padding: "12px 24px", borderTop: "1px solid var(--line)", flex: "none" }}>
+            {sel != null ? <button className="btn btn-ghost btn-sm" style={{ color: "var(--err)" }} onClick={del}><Icon name="trash" size={13} />Delete set</button> : <span />}
+            <div className="row gap2">
+              <button className="btn btn-ghost btn-sm" onClick={onClose}>Close</button>
+              <button className="btn btn-primary btn-sm" onClick={save} disabled={busy}>{busy ? "Saving…" : "Save set"}</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ToolCard({ t, sets, selectable, selected, onToggleSelect, memberSetIds, onToggleSet, onOpen, onDelete, onDuplicate, onToggle }: { t: Tool; sets: ToolSet[]; selectable: boolean; selected: boolean; onToggleSelect: () => void; memberSetIds: Set<string>; onToggleSet: (setId: string, isMember: boolean) => void; onOpen: () => void; onDelete: (e: React.MouseEvent) => void; onDuplicate: (e: React.MouseEvent) => void; onToggle: () => void }) {
+  const [statusColor, statusLabel] = STATUS(t.last_tested);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const isBuiltin = t.kind === "builtin";
+  return (
+    // While its ••• menu is open the card is lifted above its grid siblings, so the dropdown
+    // (which overflows the card bounds) isn't painted under the neighbouring cards.
+    <div className="card card-hover" style={{ padding: 16, position: "relative", zIndex: menuOpen ? 30 : undefined, opacity: t.enabled ? 1 : 0.6, borderColor: selected ? "var(--accent)" : isBuiltin ? "var(--signal)" : undefined, boxShadow: isBuiltin ? "inset 3px 0 0 var(--signal)" : undefined }} onClick={onOpen}>
+      <div className="row spread" style={{ marginBottom: 12 }}>
+        <div className="row gap2">
+          {selectable && <div onClick={(e) => { e.stopPropagation(); onToggleSelect(); }}><Checkbox checked={selected} /></div>}
+          {isBuiltin
+            ? <span className="chip chip-mono row gap1" style={{ color: "var(--signal)", borderColor: "var(--signal)" }}><Icon name="lock" size={11} style={{ color: "var(--signal)" }} />Built-in</span>
+            : <span className="chip chip-mono">{KIND_LABEL[t.kind] || t.kind}</span>}
+        </div>
+        <div className="row gap2" style={{ alignItems: "center" }}>
+          <span style={{ width: 7, height: 7, borderRadius: "50%", background: statusColor, flex: "none" }} />
+          <span className="t-caption fg-1">{statusLabel}</span>
+          <ToolCardMenu enabled={t.enabled} canDelete={!isBuiltin} sets={sets} memberSetIds={memberSetIds} onToggleSet={onToggleSet} onToggle={onToggle} onDuplicate={onDuplicate} onDelete={onDelete} onOpenChange={setMenuOpen} />
+        </div>
+      </div>
+      <div className="mono" style={{ fontWeight: 700, fontSize: 14, color: "var(--fg-0)", overflowWrap: "anywhere", wordBreak: "break-word", marginBottom: 6 }}>{t.name}</div>
+      {/* Clamp to 2 lines with a fixed height so cards stay uniform regardless of how long
+          a tool's description is (grid rows otherwise stretch to the tallest card). */}
+      <div className="fg-1 t-caption" style={{ lineHeight: "18px", height: 36, overflow: "hidden", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical" }}>{(t.config as any)?.description || "No description."}</div>
+    </div>
+  );
+}
+
+/* Overflow menu on each tool card - enable/disable toggle, per-set membership toggles
+   (colour-coded to match the sidebar), duplicate, delete. Drops DOWN from the trigger,
+   right-aligned so it never runs off-screen. */
+function ToolCardMenu({ enabled, canDelete = true, sets, memberSetIds, onToggleSet, onToggle, onDuplicate, onDelete, onOpenChange }: { enabled: boolean; canDelete?: boolean; sets: ToolSet[]; memberSetIds: Set<string>; onToggleSet: (setId: string, isMember: boolean) => void; onToggle: () => void; onDuplicate: (e: React.MouseEvent) => void; onDelete: (e: React.MouseEvent) => void; onOpenChange?: (open: boolean) => void }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => { onOpenChange?.(open); }, [open, onOpenChange]);
+  useEffect(() => {
+    if (!open) return;
+    const h = (e: MouseEvent) => { if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false); };
+    window.addEventListener("mousedown", h);
+    return () => window.removeEventListener("mousedown", h);
+  }, [open]);
+  const item: React.CSSProperties = { display: "flex", alignItems: "center", gap: 9, width: "100%", textAlign: "left", padding: "7px 9px", border: "none", background: "none", cursor: "pointer", borderRadius: 6, fontSize: 12.5, fontFamily: "var(--font-ui)" };
+  return (
+    <div ref={ref} style={{ position: "relative" }} onClick={(e) => e.stopPropagation()}>
+      <button className={"iconbtn" + (open ? " active" : "")} title="More actions" aria-haspopup="menu" aria-expanded={open} onClick={() => setOpen((o) => !o)}><Icon name="more" size={16} /></button>
+      {open && (
+        <div className="card fade-in" role="menu" style={{ position: "absolute", top: "100%", right: 0, marginTop: 6, zIndex: 6000, minWidth: 190, padding: 4, boxShadow: "var(--sh-pop)" }}>
+          <div style={{ ...item, justifyContent: "space-between", color: "var(--fg-1)", cursor: "default" }}>
+            <span className="row gap2"><Icon name="bolt" size={15} style={{ color: enabled ? "var(--signal)" : "var(--fg-2)" }} />{enabled ? "Enabled" : "Disabled"}</span>
+            <Toggle on={enabled} onChange={onToggle} />
+          </div>
+          <div className="divider" style={{ margin: "4px 0" }} />
+          <div className="t-micro" style={{ padding: "4px 9px 2px" }}>Tool sets</div>
+          {/* Show only the sets this tool actually belongs to (click a row to remove it). The full
+              catalogue would be noise on a card; add-to-set lives in the Manage toolsets drawer. */}
+          {(() => {
+            const memberSets = sets.filter((s) => memberSetIds.has(s.id));
+            return memberSets.length > 0 ? memberSets.map((s) => (
+              <button key={s.id} role="menuitemcheckbox" aria-checked title="Remove from this tool set" style={{ ...item, color: "var(--fg-1)", justifyContent: "space-between" }} onClick={() => onToggleSet(s.id, true)}>
+                <span className="truncate">{s.name}</span>
+                <Icon name="check" size={14} style={{ color: "var(--accent)" }} />
+              </button>
+            )) : <div style={{ padding: "2px 9px 6px", color: "var(--fg-2)", fontSize: 12 }}>Not in any toolset</div>;
+          })()}
+          <div className="divider" style={{ margin: "4px 0" }} />
+          <button role="menuitem" style={{ ...item, color: "var(--fg-1)" }} onClick={(e) => { setOpen(false); onDuplicate(e); }}><Icon name="copy" size={15} />Duplicate</button>
+          {canDelete
+            ? <button role="menuitem" style={{ ...item, color: "var(--err)" }} onClick={(e) => { setOpen(false); onDelete(e); }}><Icon name="trash" size={15} />Delete</button>
+            : <div style={{ ...item, color: "var(--fg-2)", cursor: "default" }}><Icon name="lock" size={15} style={{ color: "var(--signal)" }} />Built-in · protected</div>}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ============ NEW TOOL ============ */
+function NewToolModal({ project, open, onClose, onOpenTool, onReload }: { project: any; open: boolean; onClose: () => void; onOpenTool: (t: Tool) => void; onReload: () => void }) {
+  const [kind, setKind] = useState("rest_api");
+  const [name, setName] = useState("");
+  const [displayName, setDisplayName] = useState("");
+  const [description, setDescription] = useState("");
+  const [builtin, setBuiltin] = useState("current_time");
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    setKind("rest_api"); setName(""); setDisplayName(""); setDescription(""); setBuiltin("current_time"); setErr(null);
+  }, [open]);
+
+  async function create() {
+    setBusy(true); setErr(null);
+    try {
+      const nm = (name || "untitled_tool").trim().replace(/\s+/g, "_");
+      const dn = displayName.trim();
+      const config: Record<string, unknown> =
+        kind === "rest_api" ? { description, request: { method: "GET", url_template: "https://api.example.com/resource", fields: [], headers: [{ name: "Accept", value: "application/json" }] }, response: {} }
+        : kind === "graphql" ? { description, endpoint: "https://api.example.com/graphql", query: "query { __typename }", variables: [] }
+        : kind === "code" ? { description, language: "python", source: "def main(text):\n    return text.upper()\n", args_schema: { properties: { text: { type: "string", description: "input text" } }, required: ["text"] }, timeout_seconds: 5 }
+        : kind === "sql" ? { description, connection_ref: "secret://proj/db_url", query: "SELECT id, name FROM customers WHERE id = :id", args_schema: { properties: { id: { type: "integer" } }, required: ["id"] }, read_only: true, max_rows: 100 }
+        : { description, builtin };
+      if (dn) config.display_name = dn;
+      const tool = await api.createTool(project.id, { name: nm, kind, config });
+      onClose(); onReload(); onOpenTool(tool);
+    } catch (e: any) { setErr(String(e?.message || e)); } finally { setBusy(false); }
+  }
+
+  return (
+    <Modal open={open} onClose={onClose} title="New tool" width={520}
+      footer={<><button className="btn btn-ghost" onClick={onClose}>Cancel</button><button className="btn btn-primary" onClick={create} disabled={busy}>{busy ? "Creating…" : "Create tool"}</button></>}>
+      <Field label="Kind"><Segmented options={[{ value: "rest_api", label: "REST" }, { value: "graphql", label: "GraphQL" }, { value: "code", label: "Code" }, { value: "sql", label: "SQL" }, { value: "builtin", label: "Builtin" }]} value={kind} onChange={(v) => { setKind(v); setErr(null); }} /></Field>
+      <Field label="Name" help="The identifier the model calls (letters, numbers, underscores)."><input className="input mono" value={name} onChange={(e) => setName(e.target.value)} placeholder="get_order" /></Field>
+      <Field label="Display name" help="Optional. Human-readable name shown in chat/streaming activity; leave blank to show the identifier."><input className="input" value={displayName} onChange={(e) => setDisplayName(e.target.value)} placeholder="Get order" /></Field>
+      <Field label="Description" help="What the model reads to decide when to call this tool."><textarea className="textarea" rows={2} value={description} onChange={(e) => setDescription(e.target.value)} /></Field>
+      {kind === "builtin" && <Field label="Builtin" help={builtin === "knowledge_search" ? "Lets an agent search this project's knowledge base (docs + Q&A) itself - one call per sub-question, optional folder filter." : undefined}><Segmented options={[{ value: "current_time", label: "Time" }, { value: "calculator", label: "Calc" }, { value: "web_fetch", label: "Fetch" }, { value: "web_search", label: "Search" }, { value: "knowledge_search", label: "Knowledge" }, { value: "remember", label: "Remember" }, { value: "recall", label: "Recall" }]} value={builtin} onChange={setBuiltin} /></Field>}
+      {err && <div className="card" style={{ padding: 12, color: "var(--err)", marginTop: 4 }}>{err}</div>}
+    </Modal>
+  );
+}
+
+/* ============ TOOL BUILDER ============ */
+export function ToolBuilderScreen({ project, toolId, onBack }: { project: any; toolId?: string; onBack: () => void }) {
+  const [tool, setTool] = useState<Tool | null>(null);
+  const [providers, setProviders] = useState<AuthProviderT[]>([]);
+  const [tab, setTab] = useState("request");
+  const [draft, setDraft] = useState<any>(null);
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [result, setResult] = useState<ToolTestResult | null>(null);
+  const [reloadKey, setReloadKey] = useState(0);
+
+  useEffect(() => {
+    if (project?.id && toolId) api.getTool(project.id, toolId).then((t) => {
+      setTool(t); setDraft(buildDraft(t));
+      // Restore the last live test so the panel shows the real payload on reopen,
+      // not the sample placeholder.
+      const lt = (t.config as any)?._last_test;
+      if (lt && (lt.raw !== undefined || lt.projected !== undefined)) {
+        setResult({ ok: true, status: lt.status, latency_ms: lt.latency_ms, raw: lt.raw, projected: lt.projected, raw_tokens: lt.raw_tokens, projected_tokens: lt.projected_tokens, final_url: lt.final_url, redirect: lt.redirect });
+      }
+    }).catch(() => setTool(null));
+    if (project?.id) api.listAuthProviders(project.id).then(setProviders).catch(() => {});
+  }, [project?.id, toolId, reloadKey]);
+
+  if (!tool || !draft) return <div className="col center" style={{ flex: 1, color: "var(--fg-2)" }}>Loading tool…</div>;
+
+  const isRest = tool.kind === "rest_api";
+  const isGraphql = tool.kind === "graphql";
+  const isCode = tool.kind === "code";
+  const isSql = tool.kind === "sql";
+  const llmFields = (draft.fields || []).filter((f: any) => f.llm_visible !== false);
+
+  function set(patch: any) { setDraft((d: any) => ({ ...d, ...patch })); setSaved(false); }
+
+  async function save() {
+    setSaving(true);
+    try {
+      const config = draftToConfig(tool!, draft);
+      const updated = await api.updateTool(project.id, tool!.id, { config, auth_provider_id: draft.auth_provider_id || null });
+      setTool(updated); setDraft(buildDraft(updated)); setSaved(true);
+    } catch (e) { /* surfaced via Save button state */ } finally { setSaving(false); }
+  }
+
+  return (
+    <div className="col" style={{ flex: 1, minHeight: 0 }}>
+      <div className="row spread" style={{ padding: "14px 22px", borderBottom: "1px solid var(--line)", flex: "none" }}>
+        <div className="row gap3">
+          <button className="iconbtn" onClick={onBack}><Icon name="chevleft" size={18} /></button>
+          <Tile icon={KIND_ICON[tool.kind] || "k_rest"} color="var(--accent)" size={40} glow />
+          <div>
+            <div className="row gap2"><span className="t-display mono" style={{ fontSize: 18 }}>{tool.name}</span><span className="chip chip-mono">{KIND_LABEL[tool.kind] || tool.kind}</span><StatusPill status={tool.last_tested || "untested"} /></div>
+            <div className="fg-2 t-caption" style={{ marginTop: 2 }}>{draft.description || "No description."}</div>
+          </div>
+        </div>
+        <div className="row gap2">
+          <VersionHistory entityType="tool" entityId={tool.id} entityLabel={tool.name} buttonClassName="btn btn-secondary" onRestored={() => setReloadKey((k) => k + 1)} />
+          <button className="btn btn-primary" onClick={save} disabled={saving}><Icon name="save" size={15} />{saving ? "Saving…" : saved ? "Saved ✓" : "Save"}</button>
+        </div>
+      </div>
+
+      <div style={{ flex: 1, display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1fr)", minHeight: 0 }}>
+        {/* LEFT: config */}
+        <div className="col" style={{ borderRight: "1px solid var(--line)", minHeight: 0 }}>
+          <div style={{ padding: "0 18px", borderBottom: "1px solid var(--line)" }}>
+            <Tabs tabs={[{ value: "request", label: "Request" }, { value: "schema", label: "Input schema" }, { value: "projection", label: "Projection" }, { value: "auth", label: "Auth" }]} value={tab} onChange={setTab} />
+          </div>
+          <div className="scroll-y" style={{ flex: 1, padding: 18 }}>
+            {tab === "request" && (
+              <div className="fade-in">
+                <Field label="Display name" help={`Human-readable name shown in chat/streaming activity. The model still calls this tool by its identifier (${tool.name}); leave blank to show the identifier.`}><input className="input" value={draft.display_name} onChange={(e) => set({ display_name: e.target.value })} placeholder={tool.name} /></Field>
+                <Field label="Description" help="What the model reads to decide when to call this tool."><textarea className="textarea" rows={2} value={draft.description} onChange={(e) => set({ description: e.target.value })} /></Field>
+                {(isRest || isGraphql) ? (
+                  <>
+                    <Field label="Method & URL">
+                      <div className="row gap2">
+                        {isRest && (
+                          <div style={{ width: 96 }}>
+                            {/* `.select` already draws its own chevron (background-image); no overlay Icon,
+                                otherwise the arrow renders twice. */}
+                            <select className="select" value={draft.method} onChange={(e) => set({ method: e.target.value })}>{["GET", "POST", "PUT", "DELETE", "PATCH"].map((m) => <option key={m}>{m}</option>)}</select>
+                          </div>
+                        )}
+                        <input className="input mono" value={draft.url} onChange={(e) => set({ url: e.target.value })} style={{ flex: 1 }} />
+                      </div>
+                    </Field>
+                    {isRest && <Field label="Headers" help="Values interpolate {{ctx.*}} (run context — per-request values injected by the caller) and {{input.*}}. Example: Authorization = Bearer {{ctx.token}}."><KVEditor rows={draft.headers} onChange={(rows) => set({ headers: rows })} /></Field>}
+                    {isRest && (
+                      <Field label="Body encoding" help="How the request body is sent. Auto: a structured body is JSON, a body template is sent as-is. Form (urlencoded): in:body fields are URL-encoded and the Content-Type is set automatically — use for classic HTML form posts, including multi-line values and repeated keys. Raw: send the Body template string verbatim.">
+                        <div style={{ position: "relative" }}>
+                          <select className="select" value={draft.body_encoding} onChange={(e) => set({ body_encoding: e.target.value })}>
+                            {[["", "Auto"], ["json", "JSON"], ["form", "Form (urlencoded)"], ["raw", "Raw"]].map((o) => <option key={o[0]} value={o[0]}>{o[1]}</option>)}
+                          </select>
+                        </div>
+                      </Field>
+                    )}
+                    {isRest && <Field label="Body template" help={'Interpolates {{input.*}} (validated tool args) and {{ctx.*}} (run context). Parsed as JSON when possible, else sent as raw content. To repeat an array element per item (batch many items in one call), use a loop: "items": {"$each": "{{input.items}}", "$as": "item", "$do": { "label": "{{item.label}}" }}. For form posts, prefer in:body fields with Body encoding = Form (auto URL-encoded) over hand-encoding here.'}><textarea className="textarea mono" rows={4} value={draft.body} onChange={(e) => set({ body: e.target.value })} placeholder={'{\n  "name": "{{ input.name }}",\n  "count": {{ input.count }}\n}'} /></Field>}
+                    {isRest && (
+                      <details style={{ margin: "-4px 0 8px", paddingLeft: 2 }}>
+                        <summary className="t-caption fg-2" style={{ cursor: "pointer", userSelect: "none" }}>How to write the body template</summary>
+                        <div className="t-caption fg-2" style={{ marginTop: 8, lineHeight: 1.6, display: "flex", flexDirection: "column", gap: 10 }}>
+                          <div>
+                            The body is JSON. Insert values with <code className="mono">{"{{input.<arg>}}"}</code> (the validated tool args) and <code className="mono">{"{{ctx.<key>}}"}</code> (run context — per-request values supplied by the caller). It is parsed as JSON when possible, otherwise sent as raw text.
+                          </div>
+                          <div>
+                            <b style={{ color: "var(--fg-1)" }}>Type rule:</b> a value that is <i>exactly</i> one token keeps its native type — <code className="mono">{"\"{{input.count}}\""}</code> stays a number, an array stays an array. Wrapping a token in other text, like <code className="mono">{"\"[{{input.count}}]\""}</code>, makes the result a string. Do not add brackets around a token that is already an array.
+                          </div>
+                          <div>
+                            <div style={{ fontWeight: 600, color: "var(--fg-1)", marginBottom: 5 }}>Normal — one fixed body</div>
+                            <pre className="mono" style={{ background: "var(--bg-0)", border: "1px solid var(--line)", borderRadius: 6, padding: "9px 11px", margin: 0, overflowX: "auto", fontSize: 12, color: "var(--fg-1)" }}>{`{
+  "name": "{{input.name}}",
+  "count": {{input.count}},
+  "active": {{input.active}}
+}`}</pre>
+                          </div>
+                          <div>
+                            <div style={{ fontWeight: 600, color: "var(--fg-1)", marginBottom: 5 }}>Looping — repeat an element per array item</div>
+                            <div style={{ marginBottom: 5 }}>
+                              Use <code className="mono">$each</code> to expand a list-valued arg into a variable-length array — send many items in one call. <code className="mono">$each</code> is the source list, <code className="mono">$as</code> names each item, and <code className="mono">$do</code> is rendered once per item.
+                            </div>
+                            <pre className="mono" style={{ background: "var(--bg-0)", border: "1px solid var(--line)", borderRadius: 6, padding: "9px 11px", margin: 0, overflowX: "auto", fontSize: 12, color: "var(--fg-1)" }}>{`{
+  "listId": "{{input.listId}}",
+  "items": {
+    "$each": "{{input.items}}",
+    "$as": "item",
+    "$do": {
+      "label": "{{item.label}}",
+      "value": "{{item.value}}",
+      "tags": "{{item.tags}}"
+    }
+  }
+}`}</pre>
+                            <div style={{ marginTop: 5 }}>
+                              With <code className="mono">items</code> = <code className="mono">{"[{\"label\":\"A\",\"value\":10,\"tags\":[\"x\"]}]"}</code>, this builds one <code className="mono">items</code> entry per element, each field keeping its native type (so <code className="mono">tags</code> stays an array).
+                            </div>
+                          </div>
+                        </div>
+                      </details>
+                    )}
+                    {isGraphql && <Field label="Query"><textarea className="textarea mono" rows={6} value={draft.query} onChange={(e) => set({ query: e.target.value })} /></Field>}
+                    <Field label="Follow redirects" help="Follow 3xx redirects to the target URL. Each hop is re-checked by the SSRF guard. When off, the redirect's target URL is still reported to the model so it can act on it.">
+                      <Toggle on={!!draft.follow_redirects} onChange={(v) => set({ follow_redirects: v })} />
+                    </Field>
+                    <Field label="Skip TLS verification" help="Disable TLS certificate checks for this call. Honored only when the target host is on the server's allow-listed internal hosts (FORGE_EGRESS_ALLOW_PRIVATE_HOSTS); ignored otherwise. Use for internal/dev services with self-signed certificates — never for public endpoints.">
+                      <Toggle on={!!draft.tls_skip_verify} onChange={(v) => set({ tls_skip_verify: v })} />
+                    </Field>
+                  </>
+                ) : isCode ? (
+                  <>
+                    <Field label="Python source" help="Sandboxed (RestrictedPython). Define def main(**kwargs): return … - imports limited to pure stdlib.">
+                      <textarea className="textarea mono" rows={8} value={draft.source} onChange={(e) => set({ source: e.target.value })} placeholder={"def main(text):\n    return text.upper()"} />
+                    </Field>
+                    <Field label="Arguments (JSON Schema)" help='The LLM-visible args, e.g. {"properties": {"text": {"type": "string"}}, "required": ["text"]}'>
+                      <textarea className="textarea mono" rows={5} value={draft.args_schema} onChange={(e) => set({ args_schema: e.target.value })} />
+                    </Field>
+                  </>
+                ) : isSql ? (
+                  <>
+                    <Field label="Connection secret" help="A secret holding the SQLAlchemy DB URL (e.g. postgresql+psycopg://…). Manage in Settings → Secrets.">
+                      <input className="input mono" value={draft.connection_ref} onChange={(e) => set({ connection_ref: e.target.value })} placeholder="secret://proj/db_url" />
+                    </Field>
+                    <Field label="Query" help="Parameterized SELECT using :named binds. Read-only is enforced by default.">
+                      <textarea className="textarea mono" rows={5} value={draft.query} onChange={(e) => set({ query: e.target.value })} placeholder="SELECT id, name FROM customers WHERE id = :id" />
+                    </Field>
+                    <Field label="Arguments (JSON Schema)" help="The query's :named parameters as JSON Schema.">
+                      <textarea className="textarea mono" rows={4} value={draft.args_schema} onChange={(e) => set({ args_schema: e.target.value })} />
+                    </Field>
+                    <div className="row gap3">
+                      <Field label="Read-only"><Toggle on={draft.read_only} onChange={(v) => set({ read_only: v })} /></Field>
+                      <Field label="Max rows"><input className="input mono" type="number" value={draft.max_rows} onChange={(e) => set({ max_rows: e.target.value })} /></Field>
+                    </div>
+                  </>
+                ) : (
+                  <div className="card" style={{ padding: 14, background: "var(--bg-3)" }}>
+                    <div className="row gap2"><Icon name="k_builtin" size={16} style={{ color: "var(--accent)" }} /><span className="mono-sm">builtin · {draft.builtin}</span></div>
+                    <div className="fg-2 t-caption" style={{ marginTop: 6 }}>Builtins run in-process with no network. Test it on the right.</div>
+                  </div>
+                )}
+              </div>
+            )}
+            {tab === "schema" && (
+              <div className="fade-in">
+                <div className="fg-1" style={{ marginBottom: 12 }}>Request parameters. <b>Model-visible</b> fields become the tool's JSON Schema (the agent fills them). Turn <b>model-visible</b> off and give a <span className="mono">{"{{ctx.*}}"}</span> default to inject a per-run value (e.g. an auth token) the model never sees.</div>
+                <FieldsEditor fields={draft.fields} onChange={(fields) => set({ fields })} />
+              </div>
+            )}
+            {tab === "projection" && (
+              <div className="fade-in">
+                <div className="card" style={{ padding: 12, marginBottom: 14, background: "var(--signal-glow)", borderColor: "transparent" }}>
+                  <div className="row gap2"><Icon name="bolt" size={16} style={{ color: "var(--signal)" }} /><span style={{ fontSize: 12.5, fontWeight: 600, color: "var(--signal)" }}>Projection trims the raw response before it reaches the model context.</span></div>
+                </div>
+                <Field label="Projection expression" help="JMESPath over the response the model sees. Only projected keys count toward context tokens. On a redirect the response is {body, redirect} — use redirect.location to keep just the target URL."><textarea className="textarea mono" rows={3} value={draft.projection} onChange={(e) => set({ projection: e.target.value })} /></Field>
+                <Field label="On error">
+                  <div style={{ position: "relative" }}>
+                    <select className="select" value={draft.on_error} onChange={(e) => set({ on_error: e.target.value })}>
+                      {[["return_message", "Return error message to model"], ["raise", "Raise & stop run"], ["retry", "Retry (handled by middleware)"]].map((o) => <option key={o[0]} value={o[0]}>{o[1]}</option>)}
+                    </select>
+                  </div>
+                </Field>
+              </div>
+            )}
+            {tab === "auth" && (
+              <div className="fade-in">
+                <Field label="Auth provider" help="Reusable credential + session strategy. Secrets resolved at call time.">
+                  <div style={{ position: "relative" }}>
+                    <select className="select" value={draft.auth_provider_id || ""} onChange={(e) => set({ auth_provider_id: e.target.value })}>
+                      <option value="">None</option>
+                      {providers.map((p) => <option key={p.id} value={p.id}>{p.name} · {p.kind}</option>)}
+                    </select>
+                  </div>
+                </Field>
+                {draft.auth_provider_id && (() => {
+                  const p = providers.find((x) => x.id === draft.auth_provider_id);
+                  if (!p) return null;
+                  return (
+                    <div className="card" style={{ padding: 14, background: "var(--bg-3)" }}>
+                      <div className="row spread" style={{ marginBottom: 8 }}><span className="t-h3 mono">{p.name}</span><StatusPill status="pass" /></div>
+                      <div className="col gap1 mono-sm fg-1">
+                        <div>strategy · {p.kind}</div>
+                        <div>credentials · {p.credentials_ref || "-"}</div>
+                      </div>
+                    </div>
+                  );
+                })()}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* RIGHT: live response */}
+        <LiveResponse project={project} tool={tool} draft={draft} llmFields={llmFields} result={result} setResult={setResult} />
+      </div>
+    </div>
+  );
+}
+
+// Arg schemas for builtin tools (their real schema lives in the Python pydantic models). Surfaced
+// here so the Test panel renders typed inputs instead of a raw-JSON box, like REST/code/SQL tools.
+const BUILTIN_ARG_FIELDS: Record<string, { path: string; type: string; required?: boolean; description?: string }[]> = {
+  current_time: [{ path: "tz", type: "string", description: "Timezone (only UTC offline)" }],
+  calculator: [{ path: "expression", type: "string", required: true, description: "Arithmetic expression" }],
+  web_fetch: [{ path: "url", type: "string", required: true, description: "URL to fetch" }],
+  web_search: [{ path: "query", type: "string", required: true, description: "Search query" }],
+  knowledge_search: [
+    { path: "query", type: "string", required: true, description: "What to look up in the project KB" },
+    { path: "folder", type: "string", description: "Optional folder to search within (empty = all)" },
+    { path: "top_k", type: "integer", description: "How many document chunks to return" },
+  ],
+  remember: [{ path: "text", type: "string", required: true, description: "A fact to remember" }],
+  recall: [{ path: "query", type: "string", required: true, description: "What to recall" }],
+};
+
+function buildDraft(t: Tool): any {
+  const c: any = t.config || {};
+  const req: any = c.request || {};
+  return {
+    display_name: c.display_name || "",
+    description: c.description || "",
+    method: req.method || "GET",
+    url: req.url_template || c.endpoint || "",
+    headers: (req.headers || []).map((h: any) => [h.name, h.value]),
+    body: req.body_template || "",
+    body_encoding: req.body_encoding || "",
+    follow_redirects: !!(req.follow_redirects ?? c.follow_redirects),
+    tls_skip_verify: !!(req.tls_skip_verify ?? c.tls_skip_verify),
+    query: c.query || "",
+    builtin: c.builtin || "current_time",
+    fields: t.kind === "builtin" ? (BUILTIN_ARG_FIELDS[c.builtin] || []) : (req.fields || c.variables || []).map((f: any) => ({ ...f })),
+    projection: c.response?.projection_jmespath || c.response?.projection || "",
+    on_error: c.response?.on_error || "return_message",
+    auth_provider_id: t.auth_provider_id || "",
+    // code / sql
+    source: c.source || "",
+    args_schema: c.args_schema ? JSON.stringify(c.args_schema, null, 2) : "",
+    connection_ref: c.connection_ref || "",
+    read_only: c.read_only !== false,
+    max_rows: c.max_rows ?? 100,
+  };
+}
+
+function parseSchema(s: string): any {
+  try { return s.trim() ? JSON.parse(s) : {}; } catch { return {}; }
+}
+
+function draftToConfig(t: Tool, d: any): any {
+  const base: any = { ...(t.config || {}), description: d.description };
+  // Blank display name => omit it, so streaming falls back to the underscore identifier.
+  if ((d.display_name || "").trim()) base.display_name = d.display_name.trim(); else delete base.display_name;
+  delete base._last_test;
+  if (t.kind === "rest_api") {
+    const request: any = {
+      ...(base.request || {}), method: d.method, url_template: d.url,
+      headers: (d.headers || []).filter((r: any) => r[0]).map((r: any) => ({ name: r[0], value: r[1] })),
+      fields: d.fields, follow_redirects: !!d.follow_redirects, tls_skip_verify: !!d.tls_skip_verify,
+    };
+    // The saved config REPLACES the old one, but `...base.request` above carries the previous
+    // values forward - so an empty selection must explicitly DELETE the key, or "Auto" body
+    // encoding (and a cleared body template) silently revert to the last saved value.
+    if (d.body_encoding) request.body_encoding = d.body_encoding; else delete request.body_encoding;
+    if (d.body) request.body_template = d.body; else delete request.body_template;
+    base.request = request;
+    base.response = { ...(base.response || {}), ...(d.projection ? { projection_jmespath: d.projection } : {}), on_error: d.on_error };
+  } else if (t.kind === "graphql") {
+    base.endpoint = d.url; base.query = d.query; base.variables = d.fields; base.follow_redirects = !!d.follow_redirects; base.tls_skip_verify = !!d.tls_skip_verify;
+    base.response = { ...(base.response || {}), ...(d.projection ? { projection_jmespath: d.projection } : {}), on_error: d.on_error };
+  } else if (t.kind === "code") {
+    base.language = "python"; base.source = d.source; base.args_schema = parseSchema(d.args_schema);
+    base.timeout_seconds = base.timeout_seconds || 5;
+  } else if (t.kind === "sql") {
+    base.connection_ref = d.connection_ref; base.query = d.query; base.args_schema = parseSchema(d.args_schema);
+    base.read_only = d.read_only; base.max_rows = Number(d.max_rows) || 100;
+  } else {
+    base.builtin = d.builtin;
+  }
+  return base;
+}
+
+function KVEditor({ rows, onChange }: { rows: [string, string][]; onChange: (r: [string, string][]) => void }) {
+  return (
+    <div className="col gap2">
+      {rows.map((r, i) => (
+        <div key={i} className="row gap2">
+          <input className="input mono" value={r[0]} onChange={(e) => { const c = [...rows]; c[i] = [e.target.value, r[1]]; onChange(c); }} style={{ flex: "0 0 36%" }} placeholder="Header" />
+          <input className="input mono" value={r[1]} onChange={(e) => { const c = [...rows]; c[i] = [r[0], e.target.value]; onChange(c); }} style={{ flex: 1 }} placeholder="Value" />
+          <button className="iconbtn" onClick={() => onChange(rows.filter((_, j) => j !== i))}><Icon name="x" size={14} /></button>
+        </div>
+      ))}
+      <button className="btn btn-ghost btn-sm" style={{ alignSelf: "flex-start" }} onClick={() => onChange([...rows, ["", ""]])}><Icon name="plus" size={13} />Add header</button>
+    </div>
+  );
+}
+
+function FieldsEditor({ fields, onChange }: { fields: any[]; onChange: (f: any[]) => void }) {
+  // Per-field description is optional and collapsed by default (the row is already dense);
+  // a field that already has one starts expanded so its content is visible.
+  const [descOpen, setDescOpen] = useState<Record<number, boolean>>({});
+  function upd(i: number, patch: any) { const c = fields.map((f, j) => (j === i ? { ...f, ...patch } : f)); onChange(c); }
+  return (
+    <div className="col gap2">
+      {fields.map((f, i) => (
+        <div key={i} className="col gap2" style={{ padding: "10px 12px", border: "1px solid var(--line)", borderRadius: 9 }}>
+          <div className="row gap2">
+            <input className="input mono" value={f.path || ""} onChange={(e) => upd(i, { path: e.target.value })} placeholder="field" style={{ flex: 1 }} />
+            <div style={{ width: 92 }}>
+              <select className="select" value={f.type || "string"} onChange={(e) => upd(i, { type: e.target.value })}>{["string", "integer", "number", "boolean", "array", "object"].map((t) => <option key={t}>{t}</option>)}</select>
+            </div>
+            <div style={{ width: 92 }}>
+              <select className="select" value={f.in || "query"} onChange={(e) => upd(i, { in: e.target.value })} title="Where this value is placed in the outbound request">{["query", "header", "path", "body", "cookie"].map((t) => <option key={t}>{t}</option>)}</select>
+            </div>
+            <button className="chip" title="required" onClick={() => upd(i, { required: !f.required })} style={{ cursor: "pointer", color: f.required ? "var(--err)" : "var(--fg-2)" }}>{f.required ? "required" : "optional"}</button>
+            <button className="iconbtn" title="remove" onClick={() => onChange(fields.filter((_, j) => j !== i))}><Icon name="x" size={14} /></button>
+          </div>
+          <div className="row gap2" style={{ alignItems: "center" }}>
+            <input className="input mono" value={f.default ?? ""} onChange={(e) => upd(i, { default: e.target.value || undefined })} placeholder="default — supports {{ctx.*}} (run context) / {{input.*}}" style={{ flex: 1 }} />
+            <label className="row gap1" title="On: the model decides this value (appears in the tool's args schema). Off: the server injects it (e.g. default {{ctx.token}}) and it is hidden from the model." style={{ whiteSpace: "nowrap", cursor: "pointer" }}>
+              <Toggle on={f.llm_visible !== false} onChange={() => upd(i, { llm_visible: f.llm_visible === false })} />
+              <span className="t-caption fg-2">model-visible</span>
+            </label>
+          </div>
+          {/* Per-arg description (fed to the args schema for model-visible fields only),
+              collapsed by default to keep the row uncluttered; expand to add allowed values
+              / format guidance, e.g. the vendor keys. */}
+          {f.llm_visible !== false && ((descOpen[i] ?? !!f.description) ? (
+            <div className="col gap1">
+              <textarea className="textarea mono" rows={2} value={f.description ?? ""} onChange={(e) => upd(i, { description: e.target.value || undefined })} placeholder="description the model reads for this arg — e.g. allowed values" style={{ width: "100%" }} />
+              <button className="btn btn-ghost btn-sm" style={{ alignSelf: "flex-start" }} onClick={() => setDescOpen((s) => ({ ...s, [i]: false }))}><Icon name="minus" size={13} />Hide description</button>
+            </div>
+          ) : (
+            <button className="btn btn-ghost btn-sm" style={{ alignSelf: "flex-start" }} onClick={() => setDescOpen((s) => ({ ...s, [i]: true }))}><Icon name="plus" size={13} />Description</button>
+          ))}
+        </div>
+      ))}
+      <button className="btn btn-ghost btn-sm" style={{ alignSelf: "flex-start" }} onClick={() => onChange([...fields, { path: "new_field", type: "string", in: "query", required: false, llm_visible: true }])}><Icon name="plus" size={13} />Add field</button>
+    </div>
+  );
+}
+
+/* RIGHT panel - the token-meter signature: real /test, or a client-side projection preview. */
+function LiveResponse({ project, tool, draft, llmFields, result, setResult }: { project: any; tool: Tool; draft: any; llmFields: any[]; result: ToolTestResult | null; setResult: (r: ToolTestResult | null) => void }) {
+  const [args, setArgs] = useState<Record<string, string>>({});
+  const [ctxText, setCtxText] = useState("");
+  const [sample, setSample] = useState(JSON.stringify(DEFAULT_SAMPLE, null, 2));
+  const [busy, setBusy] = useState(false);
+  const [animKey, setAnimKey] = useState(0);
+
+  // Client-side preview (before a real test): apply the projection to the editable sample.
+  const preview = useMemo(() => {
+    let parsed: any = null;
+    try { parsed = JSON.parse(sample); } catch { return { raw: 0, projected: 0, err: "Invalid sample JSON", projObj: null }; }
+    const rawT = estTokens(parsed);
+    if (!draft.projection?.trim()) return { raw: rawT, projected: rawT, err: null, projObj: parsed };
+    try { const out = jmespath.search(parsed, draft.projection); return { raw: rawT, projected: estTokens(out), err: null, projObj: out }; }
+    catch { return { raw: rawT, projected: rawT, err: "Invalid JMESPath", projObj: parsed }; }
+  }, [sample, draft.projection]);
+
+  async function run() {
+    setBusy(true); setResult(null);
+    try {
+      let context: Record<string, unknown> | undefined;
+      if (ctxText.trim()) context = JSON.parse(ctxText);
+      const res = await api.testTool(project.id, tool.id, { ...args }, context);
+      setResult(res); setAnimKey((k) => k + 1);
+    } catch (e: any) {
+      setResult({ ok: false, error: e.message || String(e) });
+    } finally { setBusy(false); }
+  }
+
+  const tested = result && result.ok;
+  const rawTok = tested ? (result!.raw_tokens ?? 0) : preview.raw;
+  const projTok = tested ? (result!.projected_tokens ?? rawTok) : preview.projected;
+  const rawObj = tested ? result!.raw : preview.projObj == null ? null : JSON.parse(sample);
+  const projObj = tested ? result!.projected : preview.projObj;
+
+  return (
+    // minWidth:0 + overflow hidden: wide JSON payloads otherwise blow the 1fr grid
+    // column open (grid items default to min-width:auto) and shift the whole layout.
+    <div className="col" style={{ minHeight: 0, minWidth: 0, overflow: "hidden", background: "var(--bg-0)" }}>
+      <div className="row spread" style={{ padding: "12px 18px", borderBottom: "1px solid var(--line)" }}>
+        <div className="row gap2"><Icon name="play" size={15} style={{ color: "var(--signal)" }} /><span className="t-h2">Live response</span></div>
+        {tested && <span className="chip chip-mono">{result!.status}{result!.latency_ms != null ? ` · ${result!.latency_ms}ms` : ""}</span>}
+      </div>
+      <div className="scroll-y" style={{ flex: 1, padding: 18 }}>
+        {/* test inputs */}
+        <div className="card" style={{ padding: 14, marginBottom: 14 }}>
+          <div className="t-micro" style={{ marginBottom: 10 }}>Test inputs</div>
+          {llmFields.length > 0 ? llmFields.map((f) => (
+            <Field key={f.path} label={f.path}>
+              {/* string/array fields get a textarea so multi-line values (e.g. one product per
+                  line for a form post) can be entered; scalars stay single-line. */}
+              {f.type === "string" || f.type === "array"
+                ? <textarea className="textarea mono" rows={2} placeholder={f.type} value={args[f.path] || ""} onChange={(e) => setArgs((a) => ({ ...a, [f.path]: e.target.value }))} />
+                : <input className="input mono" placeholder={f.type} value={args[f.path] || ""} onChange={(e) => setArgs((a) => ({ ...a, [f.path]: e.target.value }))} />}
+            </Field>
+          )) : <Field label="Arguments (JSON)"><textarea className="textarea mono" rows={2} placeholder='{ }' onChange={(e) => { try { setArgs(JSON.parse(e.target.value || "{}")); } catch { /* */ } }} /></Field>}
+          <Field label="Run context (auth values for the call)"><textarea className="textarea mono" rows={2} placeholder='{ "token": "…" }' value={ctxText} onChange={(e) => setCtxText(e.target.value)} /></Field>
+          <button className="btn btn-secondary" style={{ width: "100%" }} onClick={run} disabled={busy}><Icon name={busy ? "refresh" : "validate"} size={15} style={busy ? { animation: "spin 1s linear infinite" } : {}} />{busy ? "Testing…" : "Test"}</button>
+          {result && !result.ok && <div className="t-caption" style={{ color: "var(--err)", marginTop: 8 }}>{result.error}</div>}
+        </div>
+
+        {/* redirect banner - the API redirected; show where (and whether we followed) */}
+        {tested && result!.redirect && (
+          <div className="card" style={{ padding: 12, marginBottom: 14, borderColor: "var(--accent)" }}>
+            <div className="row gap2" style={{ marginBottom: 4 }}>
+              <Icon name="auth" size={15} style={{ color: "var(--accent)" }} />
+              <span style={{ fontSize: 12.5, fontWeight: 600 }}>
+                {result!.redirect!.followed ? "Followed redirect" : `Redirect (${result!.redirect!.status}) - not followed`}
+              </span>
+            </div>
+            <div className="mono-sm fg-1" style={{ wordBreak: "break-all" }}>
+              {result!.redirect!.followed
+                ? <>→ {result!.redirect!.final_url}</>
+                : <>→ {result!.redirect!.location || "no Location header"}</>}
+            </div>
+            {!result!.redirect!.followed && result!.redirect!.location && (
+              <div className="fg-2 t-caption" style={{ marginTop: 6 }}>Enable “Follow redirects” on the Request tab to fetch the target automatically.</div>
+            )}
+          </div>
+        )}
+
+        {/* the signature token meter */}
+        <div className="card" style={{ padding: 16, marginBottom: 16 }}>
+          <div className="row spread" style={{ marginBottom: 12 }}>
+            <span className="t-h2">Context cost</span>
+            <button className="btn btn-ghost btn-sm" onClick={() => setAnimKey((k) => k + 1)}><Icon name="refresh" size={13} />Replay</button>
+          </div>
+          <BigTokenMeter raw={rawTok} projected={projTok} animateKey={animKey + ":" + rawTok + ":" + projTok} />
+          {!tested && <div className="fg-2 t-caption" style={{ marginTop: 8 }}>Preview from the editable sample below. Run Test for the live payload.</div>}
+        </div>
+
+        <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1fr)", gap: 12 }}>
+          <div style={{ minWidth: 0 }}>
+            <div className="row gap2" style={{ marginBottom: 6 }}><span className="t-micro">Raw response</span><span className="chip" style={{ height: 18, color: "var(--fg-2)" }}>{rawTok} tok</span></div>
+            <pre className="mono no-scrollbar" style={{ margin: 0, padding: 12, background: "var(--bg-1)", border: "1px solid var(--line)", borderRadius: 8, fontSize: 11, maxHeight: 280, overflow: "auto", color: "var(--fg-1)" }}>{JSON.stringify(rawObj, null, 2)}</pre>
+          </div>
+          <div style={{ minWidth: 0 }}>
+            <div className="row gap2" style={{ marginBottom: 6 }}><span className="t-micro" style={{ color: "var(--signal)" }}>Projected → model</span><span className="pill pill-ok" style={{ height: 18 }}>{projTok} tok</span></div>
+            <pre className="mono no-scrollbar" style={{ margin: 0, padding: 12, background: "var(--bg-1)", borderRadius: 8, fontSize: 11, maxHeight: 280, overflow: "auto", color: "var(--fg-1)", boxShadow: "0 0 0 1px var(--signal), 0 0 18px var(--signal-glow)" }}>{JSON.stringify(projObj, null, 2)}</pre>
+          </div>
+        </div>
+
+        {!tested && (
+          <Field
+            label="Try projection on a sample (no live call)"
+            help="Paste an example of what this API returns, then tweak the Projection expression on the left - the meter above previews the token savings. Disappears once a real Test has run (the live payload is shown and remembered instead)."
+          >
+            <textarea className="textarea mono" value={sample} onChange={(e) => setSample(e.target.value)} rows={7} style={{ fontSize: 11.5, marginTop: 12 }} />
+          </Field>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function BigTokenMeter({ raw, projected, animateKey }: { raw: number; projected: number; animateKey: any }) {
+  const [phase, setPhase] = useState<"raw" | "proj">("raw");
+  useEffect(() => { setPhase("raw"); const t = setTimeout(() => setPhase("proj"), 420); return () => clearTimeout(t); }, [animateKey]);
+  const pct = raw > 0 && phase === "proj" ? (projected / raw) * 100 : 100;
+  const saved = raw > 0 ? Math.round((1 - projected / raw) * 100) : 0;
+  return (
+    <div className="col gap3">
+      <div style={{ position: "relative", height: 38, borderRadius: 10, background: "var(--bg-3)", overflow: "hidden", border: "1px solid var(--line)" }}>
+        <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", paddingLeft: 12, fontSize: 11, color: "var(--fg-2)", fontFamily: "var(--font-mono)" }}>raw {raw.toLocaleString()} tok</div>
+        <div style={{ position: "absolute", top: 0, bottom: 0, left: 0, width: pct + "%", borderRadius: 10, background: phase === "proj" ? "linear-gradient(90deg, var(--signal-dim), var(--signal))" : "linear-gradient(90deg, var(--accent-dim), var(--accent))", transition: "width .7s var(--ease), background .4s", boxShadow: phase === "proj" ? "0 0 16px var(--signal-glow)" : "none", display: "flex", alignItems: "center", paddingLeft: 12, overflow: "hidden" }}>
+          <span style={{ fontSize: 12, fontWeight: 700, color: "#fff", fontFamily: "var(--font-mono)", whiteSpace: "nowrap" }}>{phase === "proj" ? projected.toLocaleString() + " tok" : raw.toLocaleString() + " tok"}</span>
+        </div>
+      </div>
+      <div className="row spread">
+        <span className="fg-2 t-caption">{phase === "proj" ? "Projected payload sent to the model" : "Full provider response"}</span>
+        <span className="pill pill-ok"><Icon name="bolt" size={12} />{saved}% fewer tokens</span>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/screens/traces.tsx b/apps/web/components/screens/traces.tsx
new file mode 100644
index 0000000..9b96741
--- /dev/null
+++ b/apps/web/components/screens/traces.tsx
@@ -0,0 +1,574 @@
+"use client";
+/* Traces: conversations (chat sessions) grouped by end user, their user<->AI turns, and a
+   drill-in to the per-turn span waterfall (tool + LLM request/response). */
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Icon } from "../icons";
+import { Avatar, StatusPill } from "../primitives";
+import { api, Conversation, ConversationDetail, Facets, openSSE, Span, Turn } from "@/lib/api";
+import { fmtUSD, buildNodeLabels, NODE_META, type NodeLabel } from "@/lib/data";
+
+// Conversations are paged in on scroll (newest-activity first) so the Traces view never
+// pulls a project's entire history in one shot.
+const PAGE = 20;
+
+// Friendly labels for the raw run source.
+const SOURCE_LABEL: Record<string, string> = {
+  playground: "Playground", api: "API", embed: "Embed", assistant: "Forge Assistant",
+  channel_email: "Email", webhook: "Webhook", schedule: "Schedule", app_event: "App event",
+};
+const srcLabel = (s: string) => SOURCE_LABEL[s] || s || "—";
+const fmtWhen = (iso?: string | null) => (iso ? iso.slice(0, 16).replace("T", " ") : "");
+
+// Trigger a client-side file download of `data` as pretty JSON (used by the Traces export).
+function downloadJSON(filename: string, data: unknown) {
+  const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+export function TracesScreen({ project }: { project: any }) {
+  const [convos, setConvos] = useState<Conversation[]>([]);
+  const [facets, setFacets] = useState<Facets>({ actors: [], sources: [] });
+  const [actor, setActor] = useState("");
+  const [source, setSource] = useState("");
+  const [status, setStatus] = useState("");
+  const [searchInput, setSearchInput] = useState("");
+  const [search, setSearch] = useState("");
+  const [sel, setSel] = useState<string | null>(null);
+  const [detail, setDetail] = useState<ConversationDetail | null>(null);
+  const [nextOffset, setNextOffset] = useState(0);
+  const [hasMore, setHasMore] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  // Distinct actors for the filter dropdown. A separate call because the paged list below
+  // only holds one 20-row window - the full actor set can't be derived from it.
+  useEffect(() => { if (project?.id) api.conversationFacets(project.id).then(setFacets).catch(() => {}); }, [project?.id]);
+
+  // Debounce the search box so we don't fire a request per keystroke.
+  useEffect(() => { const t = setTimeout(() => setSearch(searchInput.trim()), 350); return () => clearTimeout(t); }, [searchInput]);
+
+  // First page - and a reload whenever the project or a filter changes.
+  useEffect(() => {
+    if (!project?.id) { setConvos([]); setHasMore(false); setNextOffset(0); return; }
+    let live = true;
+    api.listConversations(project.id, { actor: actor || undefined, source: source || undefined, status: status || undefined, search: search || undefined, limit: PAGE, offset: 0 })
+      .then((c) => {
+        if (!live) return;
+        setConvos(c);
+        setNextOffset(c.length);
+        setHasMore(c.length === PAGE);
+        setSel((cur) => (cur && c.some((x) => x.thread_id === cur) ? cur : c[0]?.thread_id ?? null));
+        if (listRef.current) listRef.current.scrollTop = 0;
+      })
+      .catch(() => { if (live) { setConvos([]); setHasMore(false); setNextOffset(0); } });
+    return () => { live = false; };
+  }, [project?.id, actor, source, status, search]);
+
+  const loadMore = useCallback(async () => {
+    if (!project?.id || loadingMore || !hasMore) return;
+    setLoadingMore(true);
+    try {
+      const next = await api.listConversations(project.id, { actor: actor || undefined, source: source || undefined, status: status || undefined, search: search || undefined, limit: PAGE, offset: nextOffset });
+      // De-dupe by thread_id in case the scan window shifted between pages.
+      setConvos((prev) => {
+        const seen = new Set(prev.map((x) => x.thread_id));
+        return [...prev, ...next.filter((x) => !seen.has(x.thread_id))];
+      });
+      setNextOffset((o) => o + next.length);
+      setHasMore(next.length === PAGE);
+    } catch { /* keep what we have */ } finally { setLoadingMore(false); }
+  }, [project?.id, actor, source, status, search, nextOffset, hasMore, loadingMore]);
+
+  const onListScroll = () => {
+    const el = listRef.current;
+    if (el && el.scrollHeight - el.scrollTop - el.clientHeight < 120) loadMore();
+  };
+
+  useEffect(() => { if (project?.id && sel) api.getConversation(project.id, sel).then(setDetail).catch(() => setDetail(null)); else setDetail(null); }, [project?.id, sel]);
+
+  const purge = async () => {
+    const days = window.prompt("Delete conversations older than how many days? (admin only)", "30");
+    if (days == null) return;
+    const n = parseInt(days, 10);
+    if (!Number.isFinite(n) || n < 0) return;
+    try {
+      const { removed } = await api.purgeConversations(project.id, n);
+      window.alert(`Removed ${removed} conversation turn(s) older than ${n} days.`);
+      // Reset back to the first page after a purge.
+      const first = await api.listConversations(project.id, { actor: actor || undefined, source: source || undefined, status: status || undefined, search: search || undefined, limit: PAGE, offset: 0 });
+      setConvos(first);
+      setNextOffset(first.length);
+      setHasMore(first.length === PAGE);
+    } catch { window.alert("Purge failed — this action requires an admin role."); }
+  };
+
+  // Export the loaded conversation summaries as JSON (respects the active filters/search).
+  const exportConvos = () => {
+    if (!convos.length) return;
+    downloadJSON(`conversations-${project?.slug || project?.id || "export"}.json`, convos);
+  };
+
+  return (
+    // alignItems:stretch - .row centers children, which gives the list its content height.
+    <div className="row" style={{ flex: 1, minHeight: 0, height: "100%", overflow: "hidden", alignItems: "stretch" }}>
+      {/* conversations list + filters */}
+      <div className="col" style={{ width: 340, flex: "none", background: "var(--bg-1)", borderRight: "1px solid var(--line)", minHeight: 0, height: "100%" }}>
+        <div className="row spread" style={{ padding: "16px 16px 8px", flex: "none" }}>
+          <div className="t-h2">Conversations</div>
+          <div className="row gap2">
+            <button className="t-caption fg-2" onClick={exportConvos} disabled={convos.length === 0} title="Download the loaded conversations as JSON" style={{ background: "none", border: "none", cursor: convos.length ? "pointer" : "default", opacity: convos.length ? 1 : 0.5 }}>Export</button>
+            <button className="t-caption fg-2" onClick={purge} title="Delete old conversations" style={{ background: "none", border: "none", cursor: "pointer" }}>Clean up…</button>
+          </div>
+        </div>
+        <div className="col gap2" style={{ padding: "0 16px 10px", flex: "none" }}>
+          <input value={searchInput} onChange={(e) => setSearchInput(e.target.value)} placeholder="Search messages…" className="input" style={{ width: "100%", fontSize: 13 }} />
+          <div className="row gap1">
+            <select value={actor} onChange={(e) => setActor(e.target.value)} className="input" style={{ flex: 1, minWidth: 0, fontSize: 13 }}>
+              <option value="">All users</option>
+              {facets.actors.map((a) => <option key={a} value={a}>{a}</option>)}
+            </select>
+            <select value={source} onChange={(e) => setSource(e.target.value)} className="input" style={{ flex: 1, minWidth: 0, fontSize: 13 }}>
+              <option value="">All sources</option>
+              {facets.sources.map((s) => <option key={s} value={s}>{srcLabel(s)}</option>)}
+            </select>
+          </div>
+          <div className="row gap1">
+            {[["", "All"], ["success", "Success"], ["error", "Error"]].map(([v, label]) => (
+              <button key={v} onClick={() => setStatus(v)} className="t-caption"
+                style={{ flex: 1, padding: "5px 0", borderRadius: 6, cursor: "pointer", border: "1px solid var(--line)", background: status === v ? "var(--bg-3)" : "transparent", color: status === v ? "var(--fg-0)" : "var(--fg-2)" }}>
+                {label}
+              </button>
+            ))}
+          </div>
+        </div>
+        <div ref={listRef} onScroll={onListScroll} className="scroll-y" style={{ minHeight: 0, flex: 1 }}>
+          {convos.length === 0 && <div className="fg-2 t-caption" style={{ padding: "8px 16px" }}>No conversations yet. Run a workflow in the Playground or from your app.</div>}
+          {convos.map((c) => (
+            <button key={c.thread_id} onClick={() => setSel(c.thread_id)} className="row gap2" style={{ width: "100%", textAlign: "left", padding: "11px 16px", border: "none", borderBottom: "1px solid var(--line)", background: sel === c.thread_id ? "var(--bg-3)" : "transparent", cursor: "pointer" }}>
+              <div className="grow" style={{ minWidth: 0 }}>
+                <div className="row gap2" style={{ minWidth: 0 }}>
+                  <StatusPill status={c.status} />
+                  <span className="t-body-sm truncate" style={{ fontWeight: 600 }}>{c.actor}</span>
+                </div>
+                <div className="truncate fg-2 t-caption" style={{ marginTop: 3 }}>{c.preview || "(no message)"}</div>
+                <div className="fg-2 t-caption mono" style={{ marginTop: 3 }}>{srcLabel(c.source)} · {c.turns} turn{c.turns === 1 ? "" : "s"} · {fmtWhen(c.last_activity)}</div>
+              </div>
+              <Icon name="chevright" size={15} style={{ color: "var(--fg-2)" }} />
+            </button>
+          ))}
+          {loadingMore && <div className="fg-2 t-caption" style={{ padding: "10px 16px", textAlign: "center" }}>Loading more…</div>}
+          {hasMore && !loadingMore && (
+            <button onClick={loadMore} className="t-caption fg-2" style={{ width: "100%", padding: "10px 16px", background: "none", border: "none", borderTop: "1px solid var(--line)", cursor: "pointer" }}>Load more</button>
+          )}
+        </div>
+      </div>
+      {/* transcript */}
+      <div className="scroll-y grow" style={{ minWidth: 0, minHeight: 0, height: "100%", padding: 24, overflowX: "hidden", background: "var(--bg-0)" }}>
+        {detail ? <ConversationView key={detail.conversation.thread_id} project={project} detail={detail} />
+          : <div className="fg-2" style={{ padding: 40, textAlign: "center" }}>Select a conversation to see its messages.</div>}
+      </div>
+    </div>
+  );
+}
+
+/* One user message can produce several Trace rows under the SAME run_id: a HITL pause writes an
+   `interrupted` trace, then the resume writes a `done` trace (both carry the same user_message,
+   since run.input is unchanged). Grouping by run_id folds those segments back into one turn, so a
+   single message reads as one turn that paused - not two. Separate submissions get fresh run_ids
+   and stay distinct. Traces arrive oldest-first (started_at asc), so the last segment is final. */
+type GroupedTurn = {
+  runId: string;
+  segments: Turn[];
+  userMessage: string | null;
+  aiResponse: string | null;
+  status: string;
+  error: string | null;
+  latencyMs: number;
+  tokens: number;
+  costUsd: number;
+  paused: boolean;
+};
+
+function groupTurns(turns: Turn[]): GroupedTurn[] {
+  const byRun = new Map<string, GroupedTurn>();
+  const order: string[] = [];
+  for (const t of turns) {
+    let g = byRun.get(t.run_id);
+    if (!g) {
+      g = { runId: t.run_id, segments: [], userMessage: null, aiResponse: null, status: t.status, error: null, latencyMs: 0, tokens: 0, costUsd: 0, paused: false };
+      byRun.set(t.run_id, g);
+      order.push(t.run_id);
+    }
+    g.segments.push(t);
+    g.latencyMs += t.latency_ms || 0;
+    g.tokens += t.total_tokens || 0;
+    g.costUsd += t.total_cost_usd || 0;
+    g.userMessage = g.userMessage ?? (t.user_message || null);
+    if (t.ai_response) g.aiResponse = t.ai_response; // last non-empty wins (the final segment)
+    g.status = t.status;                             // last segment = the run's final status
+    g.error = t.error ?? null;
+    if (t.status === "interrupted") g.paused = true;
+  }
+  return order.map((r) => byRun.get(r)!);
+}
+
+function ConversationView({ project, detail }: { project: any; detail: ConversationDetail }) {
+  const c = detail.conversation;
+  const [openTurn, setOpenTurn] = useState<string | null>(null);
+  const [traces, setTraces] = useState<Record<string, { spans: Span[] }>>({});
+  const [rerunning, setRerunning] = useState<string | null>(null);
+  // Resolve the workflow's node ids to their friendly (canvas) names so the span tree reads like
+  // the graph the operator built (e.g. "support_supervisor", not "supervisor"). Best-effort: if the
+  // workflow was deleted the map is empty and spans fall back to their raw id (still traceable).
+  const [nodeLabels, setNodeLabels] = useState<Record<string, NodeLabel>>({});
+  useEffect(() => {
+    if (!project?.id || !c.workflow_id) { setNodeLabels({}); return; }
+    let live = true;
+    api.getWorkflow(project.id, c.workflow_id)
+      .then((wf) => { if (live) setNodeLabels(buildNodeLabels(wf)); })
+      .catch(() => { if (live) setNodeLabels({}); });
+    return () => { live = false; };
+  }, [project?.id, c.workflow_id]);
+
+  // Keyed by run_id (a group), not trace_id: a paused run has an interrupt + a resume trace, and
+  // expanding the turn lazy-loads the spans for every segment so the waterfall shows the whole run.
+  const toggle = async (group: GroupedTurn) => {
+    if (openTurn === group.runId) { setOpenTurn(null); return; }
+    setOpenTurn(group.runId);
+    for (const seg of group.segments) {
+      if (traces[seg.trace_id]) continue;
+      try { const d = await api.getTrace(project.id, seg.trace_id); setTraces((t) => ({ ...t, [seg.trace_id]: { spans: d.spans } })); } catch { /* ignore */ }
+    }
+  };
+
+  const rerun = async (runId: string) => {
+    if (!c.workflow_id || rerunning) return;
+    setRerunning(runId);
+    try {
+      const run = await api.rerunRun(project.id, c.workflow_id, runId);
+      let outcome = "completed";
+      await openSSE(api.runStreamUrl(project.id, c.workflow_id, run.id), (frame) => {
+        if (frame.event === "error") outcome = "failed";
+        else if (frame.event === "interrupt") outcome = "paused for input";
+      });
+      window.alert(`Re-run ${outcome}. Open its new conversation from the list.`);
+    } catch (error) {
+      window.alert(error instanceof Error ? `Re-run failed: ${error.message}` : "Re-run failed.");
+    } finally {
+      setRerunning(null);
+    }
+  };
+
+  return (
+    <div className="fade-up col" style={{ maxWidth: 860, margin: "0 auto", gap: 4 }}>
+      {/* high-level rollup */}
+      <div className="card" style={{ padding: "14px 18px", marginBottom: 12, borderLeft: "3px solid var(--accent)" }}>
+        <div className="row spread">
+          <div>
+            <div className="t-h2" style={{ marginBottom: 2 }}>{c.actor}</div>
+            <div className="fg-2 t-caption mono">{srcLabel(c.source)} · {c.turns} turn{c.turns === 1 ? "" : "s"} · started {fmtWhen(c.started_at)}</div>
+          </div>
+          <div className="row gap3">
+            <Metric label="Turns" value={String(c.turns)} />
+            <Metric label="Tokens" value={String(c.total_tokens)} />
+            <Metric label="Cost" value={fmtUSD(c.total_cost_usd)} />
+          </div>
+        </div>
+      </div>
+
+      {/* transcript */}
+      {groupTurns(detail.turns).map((group) => (
+        <div key={group.runId} style={{ marginBottom: 18 }}>
+          {group.userMessage && (
+            <div className="row" style={{ flexDirection: "row-reverse", gap: 10, marginBottom: 12, alignItems: "flex-start" }}>
+              <Avatar name={c.actor} size={28} />
+              <div style={{ maxWidth: "74%", background: "var(--accent)", color: "var(--fg-on-accent)", padding: "9px 13px", borderRadius: "14px 14px 4px 14px", whiteSpace: "pre-wrap", wordBreak: "break-word", fontSize: 13.5, lineHeight: "20px" }}>{group.userMessage}</div>
+            </div>
+          )}
+          <div className="row" style={{ gap: 10, alignItems: "flex-start" }}>
+            <div style={{ width: 28, height: 28, flex: "none", borderRadius: 8, background: "var(--accent)", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff" }}><Icon name="sparkles" size={15} /></div>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <AITurn
+                group={group}
+                open={openTurn === group.runId}
+                segmentSpans={group.segments.map((s) => traces[s.trace_id]?.spans)}
+                nodeLabels={nodeLabels}
+                onToggle={() => toggle(group)}
+                onRerun={() => rerun(group.runId)}
+                rerunning={rerunning === group.runId}
+                canRerun={!!c.workflow_id}
+              />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function AITurn({ group, open, segmentSpans, nodeLabels, onToggle, onRerun, rerunning, canRerun }: {
+  group: GroupedTurn;
+  open: boolean;
+  segmentSpans: (Span[] | undefined)[];
+  nodeLabels: Record<string, NodeLabel>;
+  onToggle: () => void;
+  onRerun: () => void;
+  rerunning: boolean;
+  canRerun: boolean;
+}) {
+  const errored = group.status === "error" || !!group.error;
+  const awaiting = group.status === "interrupted"; // still paused, not yet resumed
+  const multi = group.segments.length > 1;
+  const placeholder = errored ? "(no response — this turn errored)"
+    : awaiting ? "(paused — awaiting approval)"
+    : "(no text response)";
+  return (
+    <div className="row" style={{ justifyContent: "flex-start" }}>
+      <div style={{ maxWidth: "88%", width: "100%" }}>
+        <button onClick={onToggle} className="col" style={{ width: "100%", textAlign: "left", cursor: "pointer", background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: "12px 12px 12px 3px", padding: "11px 14px" }}>
+          <div style={{ whiteSpace: "pre-wrap", wordBreak: "break-word" }}>
+            {group.aiResponse || <span className="fg-2">{placeholder}</span>}
+          </div>
+          <div className="row gap2" style={{ marginTop: 8, alignItems: "center" }}>
+            {errored && <span className="pill pill-err" style={{ height: 16 }}>error</span>}
+            {!errored && group.paused && <span className="pill pill-warn" style={{ height: 16 }}>{awaiting ? "awaiting approval" : "paused · resumed"}</span>}
+            <span className="t-caption fg-2 mono">{group.latencyMs}ms · {group.tokens} tok · {fmtUSD(group.costUsd)}</span>
+            <span className="grow" />
+            <span className="row gap1 t-caption" style={{ color: "var(--accent)" }}>
+              <Icon name="chevright" size={12} style={{ transform: open ? "rotate(90deg)" : "none", transition: "transform .12s" }} />
+              {open ? "Hide trace" : "View trace"}
+            </span>
+          </div>
+        </button>
+        <div className="row" style={{ justifyContent: "flex-end", padding: "5px 4px 0" }}>
+          <button
+            className="t-caption"
+            onClick={onRerun}
+            disabled={!canRerun || rerunning}
+            title={canRerun ? "Run this turn again with the same input" : "The original workflow is unavailable"}
+            style={{ color: "var(--accent)", background: "none", border: "none", cursor: canRerun && !rerunning ? "pointer" : "default", opacity: canRerun ? 1 : 0.5 }}
+          >
+            {rerunning ? "Running again…" : "Run again"}
+          </button>
+        </div>
+        {group.error && <div className="mono-sm" style={{ color: "var(--err)", padding: "6px 4px", wordBreak: "break-word" }}>{group.error}</div>}
+        {open && (
+          <div className="col gap2" style={{ marginTop: 8 }}>
+            {group.segments.map((seg, i) => {
+              const spans = segmentSpans[i];
+              return (
+                <div key={seg.trace_id}>
+                  {/* Label each segment only when a pause split the run into more than one. */}
+                  {multi && (
+                    <div className="t-caption fg-2" style={{ margin: "2px 2px 6px", fontWeight: 600 }}>
+                      {seg.status === "interrupted" ? "Paused for approval" : i > 0 ? "Resumed" : "Started"} · {seg.latency_ms}ms
+                    </div>
+                  )}
+                  {spans ? <SpanWaterfall spans={spans} nodeLabels={nodeLabels} /> : <div className="fg-2 t-caption" style={{ padding: "10px 4px" }}>Loading trace…</div>}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function hasDetail(s: Span): boolean {
+  return s.input != null || s.output != null || !!s.error;
+}
+
+// A colored dot per span kind so the tree scans quickly. Node-level (chain) spans borrow their
+// node type's canvas color; the rest are keyed by kind. Mirrors the canvas IOType palette.
+function spanColor(s: Span, labels: Record<string, NodeLabel>): string {
+  const t = labels[s.name]?.type;
+  if (t && NODE_META[t]?.color) return NODE_META[t].color;
+  const byKind: Record<string, string> = {
+    llm: "var(--accent)", subagent: "var(--accent)", agent: "var(--accent)",
+    tool: "var(--io-json)", retriever: "var(--io-vector)", embedding: "var(--io-vector)",
+  };
+  return byKind[s.kind] || "var(--fg-2)";
+}
+
+// A span's two-line label: the friendly (canvas) NAME on top, and a mono sub-line carrying the
+// raw node id (when it differs from the name, so a big trace stays traceable) + kind + model.
+function spanLabel(s: Span, labels: Record<string, NodeLabel>): { primary: string; sub: string } {
+  const hit = labels[s.name];
+  const primary = hit?.label || s.name;
+  const idPart = hit && hit.label !== s.name ? s.name : null;      // show the id only if it adds info
+  const modelPart = s.model && !s.name.includes(s.model) ? s.model : null;
+  const sub = [idPart, s.kind, modelPart].filter(Boolean).join(" · ");
+  return { primary, sub };
+}
+
+// The per-turn span tree (graph nodes -> their model/tool/parser/subagent spans), rendered like an
+// IDE / DevTools element tree: fold arrows, indent guide-lines, and a click-to-open I/O panel per
+// span. Nesting comes straight from `parent_span_id`; the node id is resolved to its canvas name.
+function SpanWaterfall({ spans, nodeLabels }: { spans: Span[]; nodeLabels: Record<string, NodeLabel> }) {
+  const [openDetail, setOpenDetail] = useState<Record<string, boolean>>({});
+  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
+  const maxLatency = useMemo(() => Math.max(1, ...spans.map((s) => s.latency_ms)), [spans]);
+
+  // Build the parent -> children index and the root list (a span whose parent isn't in this set is
+  // a root). Insertion order is preserved, so children stay in the order they were recorded.
+  const { roots, byParent } = useMemo(() => {
+    const ids = new Set(spans.map((s) => s.id));
+    const byParent: Record<string, Span[]> = {};
+    const roots: Span[] = [];
+    for (const s of spans) {
+      if (s.parent_span_id && ids.has(s.parent_span_id)) (byParent[s.parent_span_id] ||= []).push(s);
+      else roots.push(s);
+    }
+    return { roots, byParent };
+  }, [spans]);
+
+  const allWithKids = useMemo(() => Object.keys(byParent), [byParent]);
+  const anyCollapsed = allWithKids.some((id) => collapsed[id]);
+  const toggleAll = () =>
+    setCollapsed(anyCollapsed ? {} : Object.fromEntries(allWithKids.map((id) => [id, true])));
+
+  const renderNode = (s: Span, depth: number) => {
+    const kids = byParent[s.id] || [];
+    const hasKids = kids.length > 0;
+    const isCollapsed = !!collapsed[s.id];
+    const expandable = hasDetail(s);
+    const isOpen = !!openDetail[s.id];
+    const { primary, sub } = spanLabel(s, nodeLabels);
+    const dot = spanColor(s, nodeLabels);
+    return (
+      <div key={s.id}>
+        <div
+          className="row gap2"
+          onClick={expandable ? () => setOpenDetail((o) => ({ ...o, [s.id]: !o[s.id] })) : undefined}
+          style={{ padding: "7px 12px", borderBottom: "1px solid var(--line)", cursor: expandable ? "pointer" : "default", background: isOpen ? "var(--bg-3)" : "transparent" }}
+        >
+          {/* fold control (or a leaf dot) */}
+          {hasKids ? (
+            <button
+              onClick={(e) => { e.stopPropagation(); setCollapsed((c) => ({ ...c, [s.id]: !c[s.id] })); }}
+              title={isCollapsed ? "Expand" : "Collapse"}
+              style={{ background: "none", border: "none", padding: 0, margin: 0, cursor: "pointer", flex: "none", display: "flex", alignItems: "center", color: "var(--fg-2)" }}
+            >
+              <Icon name="chevright" size={13} style={{ transform: isCollapsed ? "none" : "rotate(90deg)", transition: "transform .12s" }} />
+            </button>
+          ) : (
+            <span style={{ width: 13, flex: "none", display: "flex", justifyContent: "center" }}>
+              <span style={{ width: 7, height: 7, borderRadius: "50%", background: dot, flex: "none" }} />
+            </span>
+          )}
+          {/* label (indents with depth; shrinks naturally) */}
+          <div className="grow" style={{ minWidth: 0 }}>
+            <div className="row gap2" style={{ minWidth: 0 }}>
+              {hasKids && <span style={{ width: 7, height: 7, borderRadius: "50%", background: dot, flex: "none" }} />}
+              <span className="t-body-sm truncate" style={{ fontWeight: nodeLabels[s.name] ? 600 : 400 }}>{primary}</span>
+              {expandable && <Icon name="chevright" size={11} style={{ color: "var(--fg-2)", flex: "none", transform: isOpen ? "rotate(90deg)" : "none", transition: "transform .12s" }} />}
+            </div>
+            {sub && <div className="t-caption fg-2 mono truncate" style={{ marginLeft: hasKids ? 15 : 0 }}>{sub}</div>}
+          </div>
+          {/* right-aligned metrics: a slim latency bar + tokens + cost (aligned regardless of depth) */}
+          <div className="row gap2" style={{ flex: "none", alignItems: "center", justifyContent: "flex-end" }}>
+            <div style={{ width: 60, height: 6, borderRadius: 3, background: "var(--bg-3)", overflow: "hidden", flex: "none" }} title={`${s.latency_ms}ms`}>
+              <div style={{ height: "100%", borderRadius: 3, background: s.error ? "var(--err)" : dot, width: `${Math.max(4, (s.latency_ms / maxLatency) * 100)}%`, opacity: 0.85 }} />
+            </div>
+            <span className="mono-sm fg-2" style={{ width: 58, textAlign: "right" }}>{s.latency_ms}ms</span>
+            <span className="mono-sm" style={{ width: 62, textAlign: "right" }}>{(s.input_tokens + s.output_tokens) > 0 ? `${s.input_tokens + s.output_tokens} tok` : ""}</span>
+            <span className="t-caption fg-2" style={{ width: 60, textAlign: "right" }}>{s.cost_usd > 0 ? fmtUSD(s.cost_usd) : ""}</span>
+            {s.error && <span className="pill pill-err" style={{ height: 16 }}>error</span>}
+          </div>
+        </div>
+        {isOpen && <SpanDetail span={s} />}
+        {/* children: a nested block with a left guide-line, like a code/HTML tree */}
+        {hasKids && !isCollapsed && (
+          <div style={{ marginLeft: 20, borderLeft: "1px solid var(--line)" }}>
+            {kids.map((k) => renderNode(k, depth + 1))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className="card" style={{ overflow: "hidden" }}>
+      {spans.length === 0 ? (
+        <div className="fg-2" style={{ padding: 22, textAlign: "center" }}>No spans recorded.</div>
+      ) : (
+        <>
+          <div className="row spread" style={{ padding: "6px 12px", borderBottom: "1px solid var(--line)", background: "var(--bg-1)" }}>
+            <span className="t-caption fg-2 mono">{spans.length} span{spans.length === 1 ? "" : "s"}</span>
+            {allWithKids.length > 0 && (
+              <button onClick={toggleAll} className="t-caption" style={{ background: "none", border: "none", cursor: "pointer", color: "var(--accent)" }}>
+                {anyCollapsed ? "Expand all" : "Collapse all"}
+              </button>
+            )}
+          </div>
+          <div style={{ maxHeight: 460, overflowY: "auto" }}>
+            {roots.map((r) => renderNode(r, 0))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+function Metric({ label, value }: { label: string; value: string }) {
+  return <div className="col" style={{ alignItems: "flex-end" }}><span className="t-display" style={{ fontSize: 18 }}>{value}</span><span className="t-micro">{label}</span></div>;
+}
+
+// Is this a framed REST request/response envelope (vs a generic tool's raw args/return)?
+const isRestReq = (v: any) => v && typeof v === "object" && "method" in v && "url" in v;
+const isRestRes = (v: any) => v && typeof v === "object" && ("status" in v || "final_url" in v);
+const nonEmpty = (v: any) => v != null && !(typeof v === "object" && Object.keys(v).length === 0) && v !== "";
+
+function Code({ value }: { value: any }) {
+  const text = typeof value === "string" ? value : JSON.stringify(value, null, 2);
+  return <pre className="mono-sm" style={{ margin: "2px 0 0", padding: "8px 10px", background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: 6, whiteSpace: "pre-wrap", wordBreak: "break-word", overflowX: "auto", maxHeight: 260, overflowY: "auto" }}>{text}</pre>;
+}
+
+function Row({ label, value }: { label: string; value: any }) {
+  if (!nonEmpty(value)) return null;
+  return <div style={{ marginTop: 10 }}><div className="t-caption fg-2" style={{ marginBottom: 2, textTransform: "uppercase", letterSpacing: 0.4 }}>{label}</div><Code value={value} /></div>;
+}
+
+function SpanDetail({ span }: { span: Span }) {
+  const inp = span.input, out = span.output;
+  return (
+    <div style={{ padding: "12px 16px 16px 30px", borderBottom: "1px solid var(--line)", background: "var(--bg-3)" }}>
+      {isRestReq(inp) ? (
+        <>
+          <div className="t-caption fg-2" style={{ textTransform: "uppercase", letterSpacing: 0.4, marginBottom: 4 }}>Request</div>
+          <div className="mono-sm" style={{ wordBreak: "break-all" }}><span className="pill" style={{ marginRight: 6 }}>{inp.method}</span>{inp.url}</div>
+          <Row label="Agent args" value={inp.args} />
+          <Row label="Query" value={inp.query} />
+          <Row label="Headers" value={inp.headers} />
+          <Row label="Cookies" value={inp.cookies} />
+          <Row label={`Body${inp.body_encoding ? ` · ${inp.body_encoding}` : ""}`} value={inp.body} />
+        </>
+      ) : (
+        <Row label="Agent input" value={inp} />
+      )}
+
+      {isRestRes(out) ? (
+        <div style={{ marginTop: 14 }}>
+          <div className="row gap2" style={{ marginBottom: 4 }}>
+            <span className="t-caption fg-2" style={{ textTransform: "uppercase", letterSpacing: 0.4 }}>Response</span>
+            {out.status != null && <span className={out.status >= 400 ? "pill pill-err" : "pill"} style={{ height: 18 }}>{out.status}</span>}
+            {out.latency_ms != null && <span className="mono-sm fg-2">{out.latency_ms}ms</span>}
+          </div>
+          {out.final_url && out.final_url !== inp?.url && <div className="mono-sm fg-2" style={{ wordBreak: "break-all", marginBottom: 4 }}>→ {out.final_url}</div>}
+          <Row label="Body" value={out.response} />
+          {out.error && <Row label="Error" value={out.error} />}
+        </div>
+      ) : (
+        <Row label="Output" value={out} />
+      )}
+
+      {span.error && <div style={{ marginTop: 12 }}><div className="t-caption" style={{ color: "var(--err)", textTransform: "uppercase", letterSpacing: 0.4, marginBottom: 2 }}>Error</div><Code value={span.error} /></div>}
+    </div>
+  );
+}
diff --git a/apps/web/components/screens/workflows.tsx b/apps/web/components/screens/workflows.tsx
new file mode 100644
index 0000000..f96df64
--- /dev/null
+++ b/apps/web/components/screens/workflows.tsx
@@ -0,0 +1,1299 @@
+"use client";
+/* Workflows list + the React Flow canvas editor (palette · typed nodes · inspector). */
+import "@xyflow/react/dist/style.css";
+import {
+  addEdge, applyEdgeChanges, applyNodeChanges, Background, BackgroundVariant, Controls, MiniMap, ReactFlow, ReactFlowProvider,
+  useEdgesState, useNodesState, useReactFlow, ViewportPortal, type Connection, type Edge, type EdgeChange, type NodeChange,
+} from "@xyflow/react";
+import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
+import { Icon } from "../icons";
+import { StatusPill, Tile } from "../primitives";
+import { ForgeNode, NodeTypesContext } from "../canvas/ForgeNode";
+import { AgentConfig, CollapsibleSection } from "../canvas/AgentConfig";
+import { EdgeOverlay } from "../canvas/EdgeOverlay";
+import { WorkflowTestPanel } from "../canvas/WorkflowTestPanel";
+import { FieldsForm, ModelSelect, MultiSelectChips, type FieldSpec } from "../canvas/ConfigForm";
+import { Field, Toggle } from "../primitives";
+import { VersionHistory } from "../version-history";
+import { ImportExport } from "../import-export";
+import type { ComponentT } from "@/lib/api";
+import { api, openSSE, Agent, McpClientT, NodeType, Tool, ToolSet, Workflow } from "@/lib/api";
+import { NODE_META, NODE_HELP, IO_COLOR, fmtUSD } from "@/lib/data";
+import { canvasToExecutable, canvasToFlow, ioCompatible, newNodeId, starterWorkflow, type FlowEdge, type FlowNode } from "@/lib/graph";
+
+function stripRunData(nds: FlowNode[]): FlowNode[] {
+  return nds.map((n) => {
+    const { status, debug, ...data } = n.data;
+    return { ...n, data };
+  });
+}
+
+function EditableName({
+  value,
+  fallback,
+  className,
+  inputClassName = "input",
+  style,
+  inputStyle,
+  onCommit,
+}: {
+  value?: string | null;
+  fallback: string;
+  className?: string;
+  inputClassName?: string;
+  style?: CSSProperties;
+  inputStyle?: CSSProperties;
+  onCommit: (name: string) => void | Promise<void>;
+}) {
+  const display = (value || "").trim() || fallback;
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(display);
+
+  useEffect(() => {
+    if (!editing) setDraft(display);
+  }, [display, editing]);
+
+  const finish = () => {
+    const next = draft.trim();
+    setEditing(false);
+    if (!next || next === display) {
+      setDraft(display);
+      return;
+    }
+    void onCommit(next);
+  };
+
+  if (editing) {
+    return (
+      <input
+        className={inputClassName}
+        autoFocus
+        value={draft}
+        onChange={(e) => setDraft(e.target.value)}
+        onBlur={finish}
+        onFocus={(e) => e.currentTarget.select()}
+        onClick={(e) => e.stopPropagation()}
+        onPointerDown={(e) => e.stopPropagation()}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") e.currentTarget.blur();
+          if (e.key === "Escape") {
+            setDraft(display);
+            setEditing(false);
+          }
+        }}
+        style={{ minWidth: 0, ...inputStyle }}
+      />
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      className={className}
+      title={display}
+      onClick={(e) => {
+        e.stopPropagation();
+        setDraft(display);
+        setEditing(true);
+      }}
+      onPointerDown={(e) => e.stopPropagation()}
+      style={{
+        display: "block",
+        maxWidth: "100%",
+        minWidth: 0,
+        border: 0,
+        background: "transparent",
+        color: "inherit",
+        padding: 0,
+        textAlign: "left",
+        cursor: "text",
+        ...style,
+      }}
+    >
+      {display}
+    </button>
+  );
+}
+
+/* ============ WORKFLOWS LIST ============ */
+export function WorkflowsScreen({ project, onOpen }: { project: any; onOpen: (w: Workflow) => void }) {
+  const [wfs, setWfs] = useState<Workflow[]>([]);
+  const [loaded, setLoaded] = useState(false);
+  const [busy, setBusy] = useState(false);
+
+  const reload = useCallback(() => {
+    if (!project?.id) return;
+    api.listWorkflows(project.id).then((w) => { setWfs(w); setLoaded(true); }).catch(() => setLoaded(true));
+  }, [project?.id]);
+  useEffect(() => { reload(); }, [reload]);
+
+  async function create() {
+    setBusy(true);
+    try {
+      const s = starterWorkflow();
+      const executable = canvasToExecutable(s.nodes, s.edges, { id: "wf" });
+      const wf = await api.createWorkflow(project.id, { name: "Untitled workflow", canvas: s.canvas, executable });
+      onOpen(wf);
+    } finally { setBusy(false); }
+  }
+
+  const [deleting, setDeleting] = useState<string | null>(null);
+  async function del(e: React.MouseEvent, w: Workflow) {
+    e.stopPropagation();
+    if (!window.confirm(`Delete workflow "${w.name}"?\n\nThis also removes its run history and traces. This cannot be undone.`)) return;
+    setDeleting(w.id);
+    try {
+      setWfs((prev) => prev.filter((x) => x.id !== w.id)); // optimistic
+      await api.deleteWorkflow(project.id, w.id);
+    } catch {
+      reload(); // restore on failure
+    } finally {
+      setDeleting(null);
+    }
+  }
+
+  async function renameWorkflow(w: Workflow, name: string) {
+    if (!project?.id || name === w.name) return;
+    const previous = wfs;
+    setWfs((prev) => prev.map((x) => (x.id === w.id ? { ...x, name } : x)));
+    try {
+      const updated = await api.updateWorkflow(project.id, w.id, { name });
+      setWfs((prev) => prev.map((x) => (x.id === updated.id ? updated : x)));
+    } catch {
+      setWfs(previous);
+    }
+  }
+
+  return (
+    <div className="scroll-y" style={{ flex: 1, padding: "24px 28px" }}>
+      <div className="fade-up" style={{ maxWidth: 1600, margin: "0 auto" }}>
+        <div className="row spread" style={{ marginBottom: 18 }}>
+          <div>
+            <div className="t-display">Workflows</div>
+            <div className="fg-1" style={{ marginTop: 3 }}>Visual graphs compiled to LangGraph. Build agents, routers, tools, and HITL on the canvas.</div>
+          </div>
+          <div className="row gap2">
+            <ImportExport project={project} type="workflow" typeLabel="workflow" size="md" onImported={reload}
+              items={wfs.map((w) => ({ id: w.id, name: w.name || "Untitled workflow", sub: `${(w.executable?.nodes || []).length} nodes` }))} />
+            <button className="btn btn-primary" onClick={create} disabled={busy}><Icon name="plus" size={15} />{busy ? "Creating…" : "New workflow"}</button>
+          </div>
+        </div>
+        {loaded && wfs.length === 0 ? (
+          <div className="card col center" style={{ padding: 48, gap: 12, textAlign: "center" }}>
+            <Tile icon="workflows" color="var(--accent)" size={52} glow />
+            <div className="t-h1">No workflows yet</div>
+            <div className="fg-1" style={{ maxWidth: 360 }}>Create your first workflow and wire nodes on the canvas.</div>
+            <button className="btn btn-primary btn-lg" onClick={create} disabled={busy}><Icon name="plus" size={16} />New workflow</button>
+          </div>
+        ) : (
+          <div className="col gap3">
+            {wfs.map((w) => (
+              <div key={w.id} className="card card-hover" style={{ padding: 14 }} onClick={() => onOpen(w)}>
+                <div className="row gap3">
+                  <Tile icon="workflows" color="var(--accent)" size={38} />
+                  <div className="grow" style={{ minWidth: 0 }}>
+                    <EditableName value={w.name} fallback="Untitled workflow" className="t-h2 truncate" inputStyle={{ height: 28, maxWidth: 360 }} onCommit={(name) => renameWorkflow(w, name)} />
+                    <div className="fg-2 t-caption">{(w.executable?.nodes || []).length} nodes · v{w.active_version}</div>
+                  </div>
+                  <StatusPill status={w.status === "active" ? "active" : "draft"} />
+                  <button className="iconbtn" title="Delete workflow" disabled={deleting === w.id} onClick={(e) => del(e, w)}><Icon name="trash" size={15} /></button>
+                  <Icon name="chevright" size={16} style={{ color: "var(--fg-2)" }} />
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/* ============ CANVAS ============ */
+export function guardCanvasBeforeUnload(dirty: boolean, event: BeforeUnloadEvent): boolean {
+  if (!dirty) return false;
+  event.preventDefault();
+  event.returnValue = "";
+  return true;
+}
+
+export function WorkflowCanvas(props: { project: any; workflowId?: string; onWorkflowChange?: (workflow: Workflow) => void; onBack: () => void; onRun: () => void; onRegisterFlush?: (fn: (() => Promise<void>) | null) => void }) {
+  return (
+    <ReactFlowProvider>
+      <CanvasInner {...props} />
+    </ReactFlowProvider>
+  );
+}
+
+function CanvasInner({ project, workflowId, onWorkflowChange, onBack, onRun, onRegisterFlush }: { project: any; workflowId?: string; onWorkflowChange?: (workflow: Workflow) => void; onBack: () => void; onRun: () => void; onRegisterFlush?: (fn: (() => Promise<void>) | null) => void }) {
+  const [wf, setWf] = useState<Workflow | null>(null);
+  const [registry, setRegistry] = useState<Record<string, NodeType>>({});
+  const [tools, setTools] = useState<Tool[]>([]);
+  const [toolSets, setToolSets] = useState<ToolSet[]>([]);
+  // Saved agent presets (from the Agents tab) - loadable into an agent node.
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [mcpServers, setMcpServers] = useState<McpClientT[]>([]);
+  const [components, setComponents] = useState<ComponentT[]>([]);
+  // Live KB folders + Q&A kinds drive the dropdowns in the retrieval node config.
+  const [kbFolders, setKbFolders] = useState<string[]>([]);
+  const [qaKinds, setQaKinds] = useState<string[]>([]);
+  const [nodes, setNodes] = useNodesState<FlowNode>([]);
+  const [edges, setEdges] = useEdgesState<FlowEdge>([]);
+  const [selId, setSelId] = useState<string | null>(null);
+  const [problems, setProblems] = useState<{ pointer: string; message: string }[]>([]);
+  const [saveState, setSaveState] = useState<"idle" | "saving" | "saved" | "invalid">("idle");
+  const [running, setRunning] = useState(false);
+  const [testOpen, setTestOpen] = useState(false);
+  const [showProblems, setShowProblems] = useState(false);
+  const [reloadKey, setReloadKey] = useState(0);
+  // Unsaved-changes tracking (drives the beforeunload guard + auto-save on navigate-away).
+  const [dirty, setDirty] = useState(false);
+  const dirtyRef = useRef(false);
+  // Undo/redo stacks of {nodes, edges} snapshots. Structural actions push; undo/redo pop.
+  const [past, setPast] = useState<{ nodes: FlowNode[]; edges: FlowEdge[] }[]>([]);
+  const [future, setFuture] = useState<{ nodes: FlowNode[]; edges: FlowEdge[] }[]>([]);
+  // Clipboard for copy/paste/duplicate of a single node.
+  const clipboardRef = useRef<{ nodeType: string; config: Record<string, any> } | null>(null);
+  // Transient, non-blocking connection-type mismatch hint (edges stay permissive).
+  const [connWarning, setConnWarning] = useState<string | null>(null);
+  const [paletteQuery, setPaletteQuery] = useState("");
+  // Hover help for palette items - rendered as a fixed-position card so the palette's
+  // own scroll container can't clip it. Positioned from the hovered item's rect (the
+  // palette's viewport offset varies with the rail/sidebar, so no hardcoded left).
+  const [paletteTip, setPaletteTip] = useState<{ type: string; top: number; left: number } | null>(null);
+  const { fitView } = useReactFlow();
+  const registryReady = Object.keys(registry).length > 0;
+
+  useEffect(() => {
+    api.listNodeTypes().then((nt) => setRegistry(Object.fromEntries(nt.map((n) => [n.type, n])))).catch(() => {});
+    if (project?.id) {
+      api.listTools(project.id).then(setTools).catch(() => {});
+      api.listToolSets(project.id).then(setToolSets).catch(() => {});
+      api.listAgents(project.id).then(setAgents).catch(() => {});
+      api.listMcpClients(project.id).then(setMcpServers).catch(() => {});
+      api.listComponents(project.id).then(setComponents).catch(() => {});
+      api.listFolders(project.id).then(setKbFolders).catch(() => {});
+      api.listQaKinds(project.id).then(setQaKinds).catch(() => {});
+    }
+  }, [project?.id]);
+
+  useEffect(() => {
+    if (!project?.id || !workflowId) return;
+    api.getWorkflow(project.id, workflowId).then((w) => {
+      setWf(w);
+      const flow = w.canvas?.nodes?.length ? canvasToFlow(w.canvas) : starterWorkflow();
+      setNodes(flow.nodes);
+      setEdges(flow.edges as any);
+      setTimeout(() => fitView({ padding: 0.2, duration: 300 }), 90);
+    }).catch(() => {});
+  }, [project?.id, workflowId, reloadKey, setNodes, setEdges, fitView]);
+
+  const nodeTypes = useMemo(() => ({ forge: ForgeNode }), []);
+  const selected = nodes.find((n) => n.id === selId) || null;
+
+  // ---- Canvas UX: dirty tracking, undo/redo, copy/paste/duplicate ----
+  // Refs mirror the latest graph so the history/clipboard callbacks stay stable (no dep churn)
+  // yet always operate on current state; calling snapshot() inside an action captures the
+  // pre-action graph (refs update after render).
+  const nodesRef = useRef(nodes);
+  const edgesRef = useRef(edges);
+  useEffect(() => { nodesRef.current = nodes; }, [nodes]);
+  useEffect(() => { edgesRef.current = edges; }, [edges]);
+  useEffect(() => { dirtyRef.current = dirty; }, [dirty]);
+
+  // A node wired as a deep_agent sub-agent (target of a "subagents" edge) is a folded specialist,
+  // not a flow node - flag it so ForgeNode hides its now-meaningless in/out flow handles.
+  const subagentIds = useMemo(
+    () => new Set(edges.filter((e) => e.sourceHandle === "subagents").map((e) => e.target)),
+    [edges],
+  );
+  const flowNodes = useMemo(
+    () => (subagentIds.size === 0 ? nodes : nodes.map((n) => (subagentIds.has(n.id) ? { ...n, data: { ...n.data, isSubagent: true } } : n))),
+    [nodes, subagentIds],
+  );
+
+  // Warn before closing/reloading the tab with unsaved edits.
+  useEffect(() => {
+    const h = (e: BeforeUnloadEvent) => { guardCanvasBeforeUnload(dirtyRef.current, e); };
+    window.addEventListener("beforeunload", h);
+    return () => window.removeEventListener("beforeunload", h);
+  }, []);
+
+  const snapshot = useCallback(() => {
+    setPast((p) => [...p.slice(-49), { nodes: nodesRef.current, edges: edgesRef.current }]);
+    setFuture([]);
+  }, []);
+
+  const undo = useCallback(() => {
+    setPast((p) => {
+      if (!p.length) return p;
+      const prev = p[p.length - 1];
+      setFuture((f) => [{ nodes: nodesRef.current, edges: edgesRef.current }, ...f].slice(0, 50));
+      setNodes(prev.nodes);
+      setEdges(prev.edges as any);
+      setSelId(null);
+      setDirty(true);
+      return p.slice(0, -1);
+    });
+  }, [setNodes, setEdges]);
+
+  const redo = useCallback(() => {
+    setFuture((f) => {
+      if (!f.length) return f;
+      const next = f[0];
+      setPast((p) => [...p.slice(-49), { nodes: nodesRef.current, edges: edgesRef.current }]);
+      setNodes(next.nodes);
+      setEdges(next.edges as any);
+      setSelId(null);
+      setDirty(true);
+      return f.slice(1);
+    });
+  }, [setNodes, setEdges]);
+
+  const copyNode = useCallback(() => {
+    const n = nodesRef.current.find((x) => x.id === selId);
+    if (n) clipboardRef.current = { nodeType: n.data.nodeType, config: JSON.parse(JSON.stringify(n.data.config || {})) };
+  }, [selId]);
+
+  const pasteNode = useCallback(() => {
+    const clip = clipboardRef.current;
+    if (!clip) return;
+    snapshot();
+    const cur = nodesRef.current;
+    const id = newNodeId(clip.nodeType, cur.map((n) => n.id));
+    const base = cur.find((n) => n.id === selId);
+    const pos = base ? { x: base.position.x + 44, y: base.position.y + 44 } : { x: 360 + (cur.length % 4) * 36, y: 160 + (cur.length % 4) * 36 };
+    setNodes((nds) => [...nds, { id, type: "forge", position: pos, data: { nodeType: clip.nodeType, config: JSON.parse(JSON.stringify(clip.config)) } }]);
+    setSelId(id);
+    setDirty(true);
+  }, [selId, setNodes, snapshot]);
+
+  const duplicateNode = useCallback(() => {
+    const n = nodesRef.current.find((x) => x.id === selId);
+    if (!n) return;
+    clipboardRef.current = { nodeType: n.data.nodeType, config: JSON.parse(JSON.stringify(n.data.config || {})) };
+    pasteNode();
+  }, [selId, pasteNode]);
+
+  // Keyboard: Ctrl/Cmd+Z undo · Ctrl/Cmd+Shift+Z (or Ctrl+Y) redo · Ctrl+C/V copy/paste ·
+  // Ctrl+D duplicate. Ignored while typing in a form field so text editing keeps its own undo.
+  useEffect(() => {
+    const isEditable = (el: EventTarget | null) => {
+      const t = el as HTMLElement | null;
+      if (!t) return false;
+      const tag = t.tagName;
+      return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || !!t.isContentEditable;
+    };
+    const h = (e: KeyboardEvent) => {
+      if (!(e.metaKey || e.ctrlKey) || isEditable(e.target)) return;
+      const k = e.key.toLowerCase();
+      if (k === "z") { e.preventDefault(); if (e.shiftKey) redo(); else undo(); }
+      else if (k === "y") { e.preventDefault(); redo(); }
+      else if (k === "c") { copyNode(); }
+      else if (k === "v") { pasteNode(); }
+      else if (k === "d") { e.preventDefault(); duplicateNode(); }
+    };
+    window.addEventListener("keydown", h);
+    return () => window.removeEventListener("keydown", h);
+  }, [undo, redo, copyNode, pasteNode, duplicateNode]);
+
+  // LangGraph edges are control flow (data moves via shared state), so connections
+  // are permissive: any output -> any input, just not a node to itself. Handle colors
+  // remain as a visual hint of the dominant data type.
+  const isValidConnection = useCallback(
+    (c: Connection | Edge) => {
+      if (!c.source || !c.target || c.source === c.target) return false;
+      // A sub-agent edge (deep_agent's bottom handle) may only connect to an agent it can call.
+      if (c.sourceHandle === "subagents") {
+        const tgt = nodes.find((n) => n.id === c.target)?.data.nodeType;
+        return tgt === "agent" || tgt === "deep_agent";
+      }
+      return true;
+    },
+    [nodes],
+  );
+
+  const stripRouterTargets = useCallback((nds: FlowNode[], removedIds: Set<string>): FlowNode[] => {
+    if (!removedIds.size) return nds;
+    return nds.map((n) => {
+      if (n.data.nodeType !== "router") return n;
+      const cfg = { ...(n.data.config || {}) };
+      const cases = Object.fromEntries(
+        Object.entries(cfg.cases || {}).map(([key, target]) => [key, removedIds.has(String(target)) ? "" : target]),
+      );
+      if (removedIds.has(String(cfg.default))) cfg.default = "";
+      return { ...n, data: { ...n.data, config: { ...cfg, cases } } };
+    });
+  }, []);
+
+  const onNodesChangeSynced = useCallback((changes: NodeChange[]) => {
+    const removedIds = new Set(
+      changes.filter((c) => c.type === "remove").map((c) => c.id),
+    );
+    // Snapshot before a keyboard (Backspace/Delete) removal so it can be undone.
+    if (removedIds.size) snapshot();
+    // Ignore pure selection/measurement churn so the canvas doesn't read as dirty on load.
+    if (changes.some((c) => c.type !== "select" && c.type !== "dimensions")) setDirty(true);
+    setNodes((nds) => stripRouterTargets(applyNodeChanges(changes, nds) as FlowNode[], removedIds));
+  }, [setNodes, stripRouterTargets, snapshot]);
+
+  const syncRouterCaseEdge = useCallback((nodeId: string, key: string, target: string) => {
+    const handle = `case:${key}`;
+    setEdges((eds) => {
+      const rest = eds.filter((e) => !(e.source === nodeId && e.sourceHandle === handle));
+      if (!target) return rest;
+      return [
+        ...rest,
+        {
+          id: `e-${nodeId}-${key}-${target}`,
+          source: nodeId,
+          target,
+          sourceHandle: handle,
+          style: { stroke: IO_COLOR.control || "var(--io-control)", strokeWidth: 2 },
+        } as FlowEdge,
+      ];
+    });
+  }, [setEdges]);
+
+  const renameRouterCaseEdges = useCallback((nodeId: string, oldKey: string, newKey: string) => {
+    setEdges((eds) => eds.map((e) => (
+      e.source === nodeId && e.sourceHandle === `case:${oldKey}`
+        ? { ...e, sourceHandle: `case:${newKey}`, id: `e-${nodeId}-${newKey}-${e.target}` }
+        : e
+    )));
+  }, [setEdges]);
+
+  const removeRouterCaseEdges = useCallback((nodeId: string, key: string) => {
+    setEdges((eds) => eds.filter((e) => !(e.source === nodeId && e.sourceHandle === `case:${key}`)));
+  }, [setEdges]);
+
+  const routerKeyForEdge = useCallback((cfg: Record<string, any>, edge: FlowEdge): string | undefined => {
+    if (edge.sourceHandle?.startsWith("case:")) return edge.sourceHandle.slice(5);
+    const match = Object.entries(cfg.cases || {}).find(([, target]) => target === edge.target);
+    if (match) return match[0];
+    if (cfg.default === edge.target) return "__default__";
+    return undefined;
+  }, []);
+
+  const clearRouterTargetsForRemovedEdges = useCallback((removed: FlowEdge[]) => {
+    if (!removed.length) return;
+    setNodes((nds) => nds.map((n) => {
+      if (n.data.nodeType !== "router") return n;
+      const relevant = removed.filter((e) => e.source === n.id);
+      if (!relevant.length) return n;
+      const cfg = { ...(n.data.config || {}) };
+      let cases = { ...(cfg.cases || {}) };
+      let changed = false;
+      for (const edge of relevant) {
+        const key = routerKeyForEdge(cfg, edge);
+        if (!key) continue;
+        if (key === "__default__") {
+          if (cfg.default) { cfg.default = ""; changed = true; }
+        } else if (Object.prototype.hasOwnProperty.call(cases, key) && cases[key]) {
+          cases = { ...cases, [key]: "" };
+          changed = true;
+        }
+      }
+      return changed ? { ...n, data: { ...n.data, config: { ...cfg, cases } } } : n;
+    }));
+  }, [routerKeyForEdge, setNodes]);
+
+  const onEdgesChangeSynced = useCallback((changes: EdgeChange[]) => {
+    const removedIds = new Set(changes.filter((c) => c.type === "remove").map((c) => c.id));
+    if (removedIds.size) {
+      snapshot();
+      clearRouterTargetsForRemovedEdges(edges.filter((e) => removedIds.has(e.id)));
+    }
+    if (changes.some((c) => c.type !== "select")) setDirty(true);
+    setEdges((eds) => applyEdgeChanges(changes, eds) as FlowEdge[]);
+  }, [clearRouterTargetsForRemovedEdges, edges, setEdges, snapshot]);
+
+  const removeEdge = useCallback((edge: FlowEdge) => {
+    snapshot();
+    setDirty(true);
+    clearRouterTargetsForRemovedEdges([edge]);
+    setEdges((eds) => eds.filter((e) => e.id !== edge.id));
+  }, [clearRouterTargetsForRemovedEdges, setEdges, snapshot]);
+
+  const onConnect = useCallback((params: Connection) => {
+    if (!isValidConnection(params)) return;
+    snapshot();
+    setDirty(true);
+    const sn = nodes.find((n) => n.id === params.source);
+    const fromRouterCase = !!params.sourceHandle?.startsWith("case:") && sn?.data.nodeType === "router";
+    // Dragging from a router's case row wires that case to the target node - the canvas
+    // edge is the picture, config.cases/default is what the compiler routes on.
+    if (params.sourceHandle?.startsWith("case:") && sn?.data.nodeType === "router") {
+      const key = params.sourceHandle.slice(5);
+      setNodes((nds) => nds.map((n) => {
+        if (n.id !== params.source) return n;
+        const cfg = { ...(n.data.config || {}) };
+        if (key === "__default__") cfg.default = params.target;
+        else cfg.cases = { ...(cfg.cases || {}), [key]: params.target };
+        return { ...n, data: { ...n.data, config: cfg } };
+      }));
+    }
+    const sp = registry[sn?.data.nodeType || ""]?.output_ports || [];
+    const io = (sp.find((p) => p.id === params.sourceHandle) || sp[0])?.io_type || "any";
+    // Non-blocking type hint: LangGraph edges are control flow (data moves via shared state),
+    // so a mismatch is allowed - but surface it so the user knows the port types differ.
+    const tn = nodes.find((n) => n.id === params.target);
+    const tp = registry[tn?.data.nodeType || ""]?.input_ports || [];
+    const tio = (tp.find((p) => p.id === params.targetHandle) || tp[0])?.io_type || "any";
+    if (!ioCompatible(io, tio)) {
+      setConnWarning(`Connected ${io} → ${tio}: the port types differ. It still works (data flows through shared state), just double-check this is intended.`);
+      window.setTimeout(() => setConnWarning(null), 6000);
+    }
+    setEdges((eds) => addEdge(
+      { ...params, style: { stroke: IO_COLOR[io] || "var(--io-any)", strokeWidth: 2 } },
+      fromRouterCase ? eds.filter((e) => !(e.source === params.source && e.sourceHandle === params.sourceHandle)) : eds,
+    ));
+  }, [isValidConnection, nodes, registry, setEdges, setNodes, snapshot]);
+
+  const addNode = useCallback((type: string) => {
+    snapshot();
+    setDirty(true);
+    const id = newNodeId(type, nodes.map((n) => n.id));
+    const n = nodes.length;
+    const defConfig: Record<string, any> =
+      type === "agent" || type === "deep_agent" ? { flavor: type === "deep_agent" ? "deep_agent" : "agent", model: "openai:gpt-4o-mini", middleware: [], tools: [] }
+      : type === "router" ? { expression: "intent", cases: {}, default: "" }
+      : type === "llm" ? { model: "openai:gpt-4o-mini", prompt: "" }
+      : type === "retrieval" ? { top_k: 4, include_docs: true, hybrid: false, rerank: false, include_qa: true, qa_threshold: 0.3, qa_top_k: 3, min_score: 0.18, announce_empty: true }
+      : type === "classifier" ? { labels: ["question", "request", "complaint"], output_key: "intent" }
+      : {};
+    setNodes((nds) => [...nds, { id, type: "forge", position: { x: 360 + (n % 4) * 36, y: 140 + (n % 4) * 36 }, data: { nodeType: type, config: defConfig } }]);
+    setSelId(id);
+  }, [nodes, setNodes, snapshot]);
+
+  const updateConfig = useCallback((cfg: Record<string, any>) => {
+    if (!selId) return;
+    setDirty(true);
+    setNodes((nds) => nds.map((n) => (n.id === selId ? { ...n, data: { ...n.data, config: cfg } } : n)));
+  }, [selId, setNodes]);
+
+  const deleteNode = useCallback((id: string) => {
+    snapshot();
+    setDirty(true);
+    setNodes((nds) => stripRouterTargets(nds.filter((n) => n.id !== id), new Set([id])));
+    setEdges((eds) => eds.filter((e) => e.source !== id && e.target !== id));
+    setSelId((cur) => (cur === id ? null : cur));
+  }, [setNodes, setEdges, stripRouterTargets, snapshot]);
+
+  const saveCanvasState = useCallback(async (nextNodes: FlowNode[], nextEdges: FlowEdge[]) => {
+    if (!wf) return;
+    setSaveState("saving");
+    const persistNodes = stripRunData(nextNodes);
+    const executable = canvasToExecutable(persistNodes, nextEdges, { id: wf.id, version: wf.active_version });
+    const canvas = { nodes: persistNodes, edges: nextEdges, viewport: { x: 0, y: 0, zoom: 1 } };
+    try {
+      const res = await api.saveCanvas(project.id, wf.id, canvas, executable);
+      // Errors block publish; warnings are wiring smells (e.g. a router whose expression
+      // nothing writes) - show both in the tray, tagged by level.
+      const warns = ((res as any).warnings || []).map((w: any) => ({ ...w, level: "warning" }));
+      setProblems([...res.errors, ...warns]);
+      setSaveState(res.valid ? "saved" : "invalid");
+      setDirty(false); // canvas is persisted (invalid only blocks publish, not the save)
+      if (!res.valid || warns.length) setShowProblems(true);
+      setTimeout(() => setSaveState((s) => (s === "saved" ? "idle" : s)), 1500);
+    } catch {
+      setSaveState("invalid");
+    }
+  }, [wf, project?.id]);
+
+  const save = useCallback(async () => {
+    await saveCanvasState(nodes, edges);
+  }, [saveCanvasState, nodes, edges]);
+
+  // Register the canvas flush with the parent so the top-bar Publish saves first.
+  useEffect(() => {
+    onRegisterFlush?.(save);
+    return () => onRegisterFlush?.(null);
+  }, [onRegisterFlush, save]);
+
+  const backGuarded = useCallback(async () => {
+    if (dirtyRef.current) { try { await save(); } catch { /* leave anyway */ } }
+    onBack();
+  }, [save, onBack]);
+
+  const renameWorkflowTitle = useCallback(async (name: string) => {
+    if (!wf || !project?.id || name === wf.name) return;
+    const previous = wf;
+    const optimistic = { ...wf, name };
+    setWf(optimistic);
+    onWorkflowChange?.(optimistic);
+    try {
+      const updated = await api.updateWorkflow(project.id, wf.id, { name });
+      setWf(updated);
+      onWorkflowChange?.(updated);
+    } catch {
+      setWf(previous);
+      onWorkflowChange?.(previous);
+    }
+  }, [wf, project?.id, onWorkflowChange]);
+
+  const renameNodeId = useCallback((nodeId: string, rawId: string) => {
+    const nextId = rawId.trim().replace(/\s+/g, "_").replace(/[^a-zA-Z0-9_-]/g, "_").replace(/_+/g, "_").replace(/^_+|_+$/g, "");
+    if (!nextId || nextId === nodeId || nodes.some((n) => n.id === nextId)) return;
+    const nextNodes = nodes.map((n) => {
+      const data = n.data.nodeType === "router"
+        ? {
+            ...n.data,
+            config: {
+              ...(n.data.config || {}),
+              cases: Object.fromEntries(
+                Object.entries(n.data.config?.cases || {}).map(([key, target]) => [
+                  key,
+                  String(target) === nodeId ? nextId : target,
+                ]),
+              ),
+              default: String(n.data.config?.default || "") === nodeId ? nextId : n.data.config?.default,
+            },
+          }
+        : n.data;
+      return n.id === nodeId ? { ...n, id: nextId, data } : { ...n, data };
+    });
+    const nextEdges = edges.map((e) => ({
+      ...e,
+      source: e.source === nodeId ? nextId : e.source,
+      target: e.target === nodeId ? nextId : e.target,
+    }));
+    setNodes(nextNodes);
+    setEdges(nextEdges);
+    setSelId((cur) => (cur === nodeId ? nextId : cur));
+    void saveCanvasState(nextNodes, nextEdges);
+  }, [nodes, edges, saveCanvasState, setNodes, setEdges]);
+
+  const clearRunDebug = useCallback(() => {
+    setNodes((nds) => stripRunData(nds));
+    setRunning(false);
+  }, [setNodes]);
+
+  const markRunNode = useCallback((nodeId: string, status?: "idle" | "running" | "done" | "error", output?: any) => {
+    setNodes((nds) => nds.map((n) => (
+      n.id === nodeId
+        ? { ...n, data: { ...n.data, status, debug: { ...(n.data.debug || {}), ...(output !== undefined ? { output } : {}) } } }
+        : n
+    )));
+  }, [setNodes]);
+
+  const applyFinalDebug = useCallback((debugNodes: Record<string, any> = {}) => {
+    setNodes((nds) => nds.map((n) => {
+      const debug = debugNodes[n.id];
+      return debug ? { ...n, data: { ...n.data, debug: { ...(n.data.debug || {}), ...debug } } } : n;
+    }));
+  }, [setNodes]);
+
+  const closeTestPanel = useCallback(() => {
+    setTestOpen(false);
+    clearRunDebug();
+  }, [clearRunDebug]);
+
+  const palette = useMemo(() => {
+    const groups: Record<string, NodeType[]> = {};
+    Object.values(registry).forEach((nt) => { (groups[nt.category] = groups[nt.category] || []).push(nt); });
+    return groups;
+  }, [registry]);
+
+  return (
+    <div className="col" style={{ flex: 1, minHeight: 0 }}>
+      {/* toolbar */}
+      <div className="row spread" style={{ padding: "10px 16px", borderBottom: "1px solid var(--line)", background: "var(--bg-1)" }}>
+        <div className="row gap2">
+          <button className="iconbtn" onClick={backGuarded}><Icon name="chevleft" size={18} /></button>
+          <Tile icon="workflows" color="var(--accent)" size={28} />
+          <div style={{ minWidth: 0 }}>
+            <EditableName value={wf?.name} fallback="Workflow" className="t-h2 truncate" inputStyle={{ height: 28, minWidth: 220 }} onCommit={renameWorkflowTitle} />
+            <div className="fg-2 t-caption mono">{nodes.length} nodes · {edges.length} edges</div>
+          </div>
+        </div>
+        <div className="row gap2">
+          <div className="row" style={{ gap: 1 }}>
+            <button className="iconbtn" title="Undo (Ctrl+Z)" onClick={undo} disabled={!past.length}><Icon name="undo" size={16} /></button>
+            <button className="iconbtn" title="Redo (Ctrl+Shift+Z)" onClick={redo} disabled={!future.length}><Icon name="redo" size={16} /></button>
+          </div>
+          {problems.length > 0 && (
+            <button className="btn btn-danger btn-sm" onClick={() => setShowProblems((s) => !s)}><Icon name="validate" size={14} />{problems.length} problem{problems.length === 1 ? "" : "s"}</button>
+          )}
+          <button className="btn btn-secondary btn-sm" onClick={() => fitView({ padding: 0.2, duration: 300 })}><Icon name="fit" size={14} />Fit</button>
+          <VersionHistory entityType="workflow" entityId={wf?.id} entityLabel={wf?.name} onRestored={() => setReloadKey((k) => k + 1)} />
+          <button className="btn btn-secondary btn-sm" onClick={save} disabled={saveState === "saving"}>
+            <Icon name={saveState === "saved" ? "check" : "save"} size={14} />
+            {saveState === "saving" ? "Saving…" : saveState === "saved" ? "Saved" : saveState === "invalid" ? "Saved (invalid)" : "Save"}
+            {dirty && saveState === "idle" && <span title="Unsaved changes" style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)", marginLeft: 4 }} />}
+          </button>
+          <button className="btn btn-ghost btn-sm" onClick={async () => { await save(); onRun(); }}><Icon name="playground" size={14} />Playground</button>
+          <button className="btn btn-primary btn-sm" onClick={() => setTestOpen(true)}><Icon name="play" size={14} />{running ? "Testing…" : "Test"}</button>
+        </div>
+      </div>
+
+      <div style={{ display: "flex", alignItems: "stretch", flex: 1, minHeight: 0 }}>
+        {/* palette */}
+        <div className="scroll-y" style={{ width: 200, flex: "none", borderRight: "1px solid var(--line)", background: "var(--bg-1)", padding: 10 }}>
+          <input className="input" placeholder="Search nodes…" value={paletteQuery} onChange={(e) => setPaletteQuery(e.target.value)} style={{ marginBottom: 10 }} />
+          {Object.entries(palette).map(([cat, items]) => {
+            const filtered = items.filter((it) => it.label.toLowerCase().includes(paletteQuery.toLowerCase()) || it.type.includes(paletteQuery.toLowerCase()));
+            if (!filtered.length) return null;
+            return (
+              <div key={cat} style={{ marginBottom: 12 }}>
+                <div className="t-micro" style={{ marginBottom: 6 }}>{cat.replace("_", " & ")}</div>
+                <div className="col gap1">
+                  {filtered.map((it) => {
+                    const meta = NODE_META[it.type] || { icon: "n_agent", color: "var(--fg-2)" };
+                    return (
+                      <button key={it.type} className="row gap2" onClick={() => addNode(it.type)}
+                        style={{ padding: "7px 8px", borderRadius: 7, border: "1px solid var(--line)", background: "var(--bg-2)", cursor: "pointer", textAlign: "left" }}
+                        onMouseEnter={(e) => {
+                          e.currentTarget.style.borderColor = meta.color;
+                          const r = e.currentTarget.getBoundingClientRect();
+                          setPaletteTip({ type: it.type, top: r.top, left: r.right + 10 });
+                        }}
+                        onMouseLeave={(e) => {
+                          e.currentTarget.style.borderColor = "var(--line)";
+                          setPaletteTip(null);
+                        }}>
+                        <Icon name={meta.icon} size={15} style={{ color: meta.color, flexShrink: 0 }} />
+                        <span className="t-body-sm truncate">{it.label}</span>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* palette hover help card */}
+        {paletteTip && NODE_HELP[paletteTip.type] && (() => {
+          const help = NODE_HELP[paletteTip.type];
+          const meta = NODE_META[paletteTip.type] || { icon: "n_agent", color: "var(--fg-2)", label: paletteTip.type };
+          return (
+            <div className="card" style={{
+              position: "fixed", left: paletteTip.left, top: Math.max(60, Math.min(paletteTip.top, (typeof window !== "undefined" ? window.innerHeight : 800) - 210)),
+              width: 290, zIndex: 90, pointerEvents: "none", padding: 12, boxShadow: "var(--sh-pop)",
+            }}>
+              <div className="row gap2" style={{ marginBottom: 6 }}>
+                <Icon name={meta.icon} size={15} style={{ color: meta.color }} />
+                <span className="t-h3">{meta.label}</span>
+                <span className="typechip">{paletteTip.type}</span>
+              </div>
+              <div className="t-body-sm fg-1" style={{ lineHeight: "19px", marginBottom: 8 }}>{help.what}</div>
+              <div style={{ background: "var(--bg-3)", border: "1px solid var(--line)", borderRadius: 7, padding: "7px 9px" }}>
+                <div className="t-micro" style={{ marginBottom: 3 }}>Example</div>
+                <div className="mono-sm fg-1" style={{ fontSize: 11.5, lineHeight: "17px", whiteSpace: "pre-wrap" }}>{help.example}</div>
+              </div>
+            </div>
+          );
+        })()}
+
+        {/* canvas */}
+        <div className="grow forge-canvas" style={{ position: "relative", minWidth: 0, height: "100%" }}>
+          {/* Hide React Flow's native edge layer - we draw connections via EdgeOverlay. */}
+          <style>{`.forge-canvas .react-flow__edge { display: none; }`}</style>
+          <NodeTypesContext.Provider value={registry}>
+            {/* Wait for the node-type registry before mounting React Flow so nodes render
+                WITH their handles on first paint - otherwise React Flow measures handle-less
+                nodes and loaded edges never get drawn (their handle bounds stay empty). */}
+            {registryReady ? (
+              <ReactFlow
+                style={{ width: "100%", height: "100%" }}
+                nodes={flowNodes} edges={edges} nodeTypes={nodeTypes}
+                onNodesChange={onNodesChangeSynced} onEdgesChange={onEdgesChangeSynced} onConnect={onConnect}
+                onNodeDragStart={() => snapshot()}
+                isValidConnection={isValidConnection as any}
+                onNodeClick={(_, n) => setSelId(n.id)} onPaneClick={() => setSelId(null)}
+                deleteKeyCode={["Backspace", "Delete"]}
+                fitView proOptions={{ hideAttribution: true }} defaultEdgeOptions={{ style: { strokeWidth: 2 } }}
+              >
+                <Background variant={BackgroundVariant.Dots} gap={18} size={1} color="var(--canvas-grid)" />
+                <Controls />
+                <MiniMap pannable zoomable style={{ background: "var(--bg-1)" }} nodeColor={(n) => NODE_META[(n.data as any)?.nodeType]?.color || "var(--fg-2)"} />
+                <EdgeOverlay nodes={flowNodes} edges={edges} onRemove={removeEdge} />
+              </ReactFlow>
+            ) : (
+              <div className="col center" style={{ width: "100%", height: "100%", color: "var(--fg-2)" }}>Loading canvas…</div>
+            )}
+          </NodeTypesContext.Provider>
+
+          {connWarning && (
+            <div className="card fade-in" style={{ position: "absolute", top: 12, left: "50%", transform: "translateX(-50%)", maxWidth: 460, padding: "8px 12px", boxShadow: "var(--sh-2)", borderColor: "var(--warn)", zIndex: 5 }}>
+              <div className="row gap2" style={{ alignItems: "flex-start" }}>
+                <Icon name="validate" size={14} style={{ color: "var(--warn)", flexShrink: 0, marginTop: 2 }} />
+                <span className="t-caption fg-1" style={{ flex: 1 }}>{connWarning}</span>
+                <button className="iconbtn" style={{ width: 20, height: 20 }} onClick={() => setConnWarning(null)}><Icon name="x" size={12} /></button>
+              </div>
+            </div>
+          )}
+
+          {showProblems && problems.length > 0 && (
+            <div className="card" style={{ position: "absolute", left: 12, right: 12, bottom: 12, maxHeight: 160, overflow: "auto", boxShadow: "var(--sh-pop)" }}>
+              <div className="row spread" style={{ padding: "8px 12px", borderBottom: "1px solid var(--line)" }}>
+                <div className="t-h3" style={{ color: "var(--err)" }}>Problems</div>
+                <button className="iconbtn" onClick={() => setShowProblems(false)}><Icon name="x" size={15} /></button>
+              </div>
+              <div className="col" style={{ padding: 6 }}>
+                {problems.map((p: any, i) => (
+                  <div key={i} className="row gap2" style={{ padding: "5px 8px", alignItems: "flex-start" }}>
+                    <span className="mono-sm" style={{ color: p.level === "warning" ? "var(--warn)" : "var(--err)", flexShrink: 0 }}>
+                      {p.level === "warning" ? "⚠ " : ""}{p.pointer}
+                    </span>
+                    <span className="t-caption fg-1">{p.message}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* inspector */}
+        <div className={testOpen ? "col" : "scroll-y"} style={{ width: testOpen ? 380 : 340, flex: "none", borderLeft: "1px solid var(--line)", background: "var(--bg-1)", padding: testOpen ? 0 : 16, minHeight: 0, overflow: testOpen ? "hidden" : undefined }}>
+          {testOpen && wf ? (
+            <WorkflowTestPanel
+              project={project}
+              workflow={wf}
+              running={running}
+              onRunningChange={setRunning}
+              onBeforeRun={save}
+              onClose={closeTestPanel}
+              onResetRun={clearRunDebug}
+              onNodeStep={markRunNode}
+              onFinalDebug={applyFinalDebug}
+            />
+          ) : selected ? (
+            <NodeInspector
+              node={selected}
+              nodes={nodes}
+              tools={tools}
+              toolSets={toolSets}
+              agents={agents}
+              mcpServers={mcpServers}
+              components={components}
+              dynamic={{ kb_folders: kbFolders, qa_kinds: qaKinds }}
+              onChange={updateConfig}
+              onRename={renameNodeId}
+              onDelete={deleteNode}
+              onRouterCaseTarget={syncRouterCaseEdge}
+              onRouterCaseRename={renameRouterCaseEdges}
+              onRouterCaseRemove={removeRouterCaseEdges}
+            />
+          ) : (
+            <div className="col gap3">
+              <div className="t-micro">Workflow</div>
+              <div className="fg-1 t-body-sm">Select a node to configure it, or add nodes from the palette.</div>
+              <div className="card" style={{ padding: 12 }}>
+                <div className="t-caption fg-2">State schema</div>
+                <div className="mono-sm" style={{ marginTop: 4 }}>messages · intent</div>
+              </div>
+              <div className="field-help">Routing: a Router node routes by its <b>cases</b> (set in its inspector); other edges define flow.</div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function NodeInspector({
+  node,
+  nodes,
+  tools,
+  toolSets,
+  agents,
+  mcpServers,
+  components,
+  dynamic,
+  onChange,
+  onRename,
+  onDelete,
+  onRouterCaseTarget,
+  onRouterCaseRename,
+  onRouterCaseRemove,
+}: {
+  node: FlowNode;
+  nodes: FlowNode[];
+  tools: Tool[];
+  toolSets: ToolSet[];
+  agents: Agent[];
+  mcpServers: McpClientT[];
+  components: ComponentT[];
+  dynamic?: Record<string, string[]>;
+  onChange: (c: Record<string, any>) => void;
+  onRename: (nodeId: string, name: string) => void;
+  onDelete: (id: string) => void;
+  onRouterCaseTarget: (nodeId: string, key: string, target: string) => void;
+  onRouterCaseRename: (nodeId: string, oldKey: string, newKey: string) => void;
+  onRouterCaseRemove: (nodeId: string, key: string) => void;
+}) {
+  const type = node.data.nodeType;
+  const c = node.data.config || {};
+  const set = (patch: Record<string, any>) => onChange({ ...c, ...patch });
+  const meta = NODE_META[type] || { label: type, color: "var(--fg-2)", icon: "n_agent" };
+  const nodeIds = nodes.map((n) => n.id).filter((id) => id !== node.id);
+
+  return (
+    <div className="col" style={{ gap: 14 }}>
+      <div className="row spread">
+        <div className="row gap2" style={{ minWidth: 0 }}>
+          <Tile icon={meta.icon} color={meta.color} size={28} />
+          <div style={{ minWidth: 0 }}>
+            <div className="t-h2 truncate">{meta.label}</div>
+            <EditableName value={node.id} fallback={node.id} className="mono-sm fg-2 truncate" inputClassName="input mono" inputStyle={{ height: 26, maxWidth: 190 }} onCommit={(name) => onRename(node.id, name)} />
+          </div>
+        </div>
+        <button className="btn btn-danger btn-sm" onClick={() => onDelete(node.id)}><Icon name="trash" size={14} />Delete</button>
+      </div>
+
+      {(type === "agent" || type === "deep_agent") && <AgentConfig config={c} onChange={onChange} tools={tools} toolSets={toolSets} agents={agents} mcpServers={mcpServers} components={components} folders={dynamic?.kb_folders || []} kinds={dynamic?.qa_kinds || []} />}
+
+      {type === "retrieval" && <RetrievalForm c={c} set={set} folders={dynamic?.kb_folders || []} kinds={dynamic?.qa_kinds || []} />}
+
+      {type === "router" && (
+        <RouterForm
+          nodeId={node.id}
+          c={c}
+          set={set}
+          nodeIds={nodeIds}
+          nodes={nodes}
+          onCaseTarget={onRouterCaseTarget}
+          onCaseRename={onRouterCaseRename}
+          onCaseRemove={onRouterCaseRemove}
+        />
+      )}
+
+      {type === "llm" && (
+        <div className="col gap3">
+          <Field label="Model"><ModelSelect value={c.model || ""} onChange={(v) => set({ model: v })} /></Field>
+          <Field label="Prompt" help="The instruction the model runs on the incoming message."><textarea className="textarea" rows={4} value={c.prompt || ""} onChange={(e) => set({ prompt: e.target.value })} /></Field>
+        </div>
+      )}
+
+      {type === "tool_call" && (
+        <div className="col gap3">
+          <Field label="Tool" help={tools.length ? "Which project tool to invoke." : "No tools in this project yet - add them on the Tools screen."}>
+            <select className="select" value={c.tool_id || ""} onChange={(e) => set({ tool_id: e.target.value || undefined })}>
+              <option value="">Select a tool…</option>
+              {tools.map((t) => <option key={t.id} value={t.id}>{t.name} · {t.kind}</option>)}
+            </select>
+          </Field>
+          <Field label="Output state key" help="Where the tool's result is written in state."><input className="input mono" value={c.output_key ?? ""} placeholder="result" onChange={(e) => set({ output_key: e.target.value || undefined })} /></Field>
+        </div>
+      )}
+
+      {NODE_FIELDS[type] && <FieldsForm specs={NODE_FIELDS[type]} config={c} onPatch={set} dynamic={dynamic} />}
+
+      {(type === "start" || type === "end") && <div className="fg-2 t-body-sm">No configuration for this node.</div>}
+
+      {!FORM_NODES.has(type) && (
+        <>
+          <div className="field-label">Config (JSON)</div>
+          <textarea className="textarea mono" rows={8} style={{ fontSize: 12 }} defaultValue={JSON.stringify(c, null, 2)}
+            onChange={(e) => { try { onChange(JSON.parse(e.target.value || "{}")); } catch { /* keep */ } }} />
+        </>
+      )}
+    </div>
+  );
+}
+
+/* Declarative field specs → friendly form widgets (no raw JSON for common nodes). The form
+   merges only its own keys, so any extra config is preserved. Mirrors the node config schemas.
+   (Widgets + FieldSpec live in canvas/ConfigForm.tsx, shared with the middleware stack.) */
+const NODE_FIELDS: Record<string, FieldSpec[]> = {
+  transform: [
+    { key: "input_key", label: "Input state key", widget: "text", placeholder: "messages", help: "Which state field to read." },
+    { key: "output_key", label: "Output state key", widget: "text", placeholder: "result", help: "Which state field to write." },
+    { key: "expression", label: "Expression", widget: "textarea", help: "Sandboxed expression over state (e.g. len(messages))." },
+  ],
+  classifier: [
+    { key: "labels", label: "Intent labels", widget: "csv", placeholder: "return_item, cancel_subscription, get_information", help: "Wire a Router after this with one case per label." },
+    { key: "output_key", label: "Write label to state key", widget: "text", placeholder: "intent", help: "The Router's expression should read this key." },
+    { key: "multi_label", label: "Multi-label (all that apply)", widget: "toggle", help: "Write EVERY applicable label (a list) instead of exactly one. Pair with a Router set to 'Route to every match' so a question with several intents reaches several specialists in parallel." },
+    { key: "model", label: "Model", widget: "model", emptyLabel: "Auto (cheapest model)", help: "Left on Auto, the classifier uses your provider's cheapest model (e.g. gpt-4.1-nano) — not the project default — since classification is high-volume and low-stakes. Pick a model to override." },
+    { key: "instructions", label: "Extra guidance (optional)", widget: "textarea", placeholder: "Domain hints, tie-breaking rules…" },
+  ],
+  human_input: [
+    { key: "prompt", label: "Prompt to reviewer", widget: "textarea", help: "Shown when the run pauses for approval." },
+    { key: "allowed_decisions", label: "Allowed decisions", widget: "csv", placeholder: "approve, reject", help: "The buttons the reviewer sees in the Playground." },
+    { key: "output_key", label: "Write decision to state key", widget: "text", placeholder: "decision", help: "Optional: use a key name like decision. The selected value is written there so a Router can branch approve vs reject." },
+  ],
+  emit_event: [
+    { key: "event", label: "Event name", widget: "text", placeholder: "order.created" },
+  ],
+  webhook_out: [
+    { key: "url", label: "Webhook URL", widget: "text", placeholder: "https://…" },
+    { key: "method", label: "Method", widget: "select", options: ["POST", "PUT", "PATCH", "GET"].map((m) => ({ value: m, label: m })) },
+  ],
+  handoff: [
+    { key: "reason", label: "Reason", widget: "text", placeholder: "Escalated to a human agent.", help: "Why the conversation is handed off (shown in the agent inbox)." },
+    { key: "ack_message", label: "Hold message (optional)", widget: "textarea", placeholder: "A team member will follow up shortly.", help: "Sent to the customer while they wait for a human." },
+  ],
+  // --- flow ---
+  loop: [
+    { key: "max_iter", label: "Max iterations", widget: "number", min: 1, step: 1, help: "Safety cap on how many times the body runs." },
+    { key: "condition", label: "Continue while (expression)", widget: "textarea", placeholder: "keep_going == True", help: "Sandboxed expression over state; loops while truthy. Writes _loop = continue/done - wire a Router on _loop and point its body back to this node." },
+  ],
+  parallel_fanout: [
+    { key: "over", label: "List state key", widget: "text", placeholder: "items", help: "State field holding the list to map over." },
+    { key: "child_node", label: "Child node id", widget: "text", placeholder: "worker", help: "The node run once per item, in parallel (Send)." },
+    { key: "item_key", label: "Item state key", widget: "text", placeholder: "item", help: "Each item is written here for the child to read." },
+  ],
+  join: [
+    { key: "reducer", label: "Combine results", widget: "select", options: ["concat", "merge", "first", "last"].map((m) => ({ value: m, label: m })), help: "How parallel branches converge. Children should write to an add-reducer state key to aggregate." },
+  ],
+  subworkflow: [
+    { key: "workflow_id", label: "Workflow (id or name)", widget: "text", placeholder: "Verify identity", help: "Another workflow in THIS project, run as a reusable component (shares messages state)." },
+  ],
+  // --- triggers ---
+  webhook_in: [
+    { key: "message_path", label: "Message JMESPath (optional)", widget: "text", placeholder: "text", help: "Path into the POSTed JSON body used as the message (empty = the whole body). The webhook URL appears on the Triggers screen after you publish." },
+    { key: "require_signature", label: "Require HMAC signature", widget: "toggle", help: "Verify the X-Forge-Signature (sha256) header using the secret below." },
+    { key: "secret_ref", label: "Signing secret ref", widget: "text", placeholder: "secret://proj/webhook_secret", help: "Secret used to verify the signature." },
+  ],
+  schedule: [
+    { key: "every_minutes", label: "Every N minutes", widget: "number", min: 1, step: 1, help: "Run on a fixed interval. Use this OR cron." },
+    { key: "cron", label: "Cron expression (optional)", widget: "text", placeholder: "0 9 * * 1-5", help: "Standard cron (needs the workers extra). Overrides the interval if set." },
+    { key: "message", label: "Message", widget: "textarea", placeholder: "Summarize today's tickets.", help: "The input sent into the workflow on each run." },
+  ],
+  email_in: [
+    { key: "mailbox", label: "Mailbox", widget: "text", placeholder: "support@yourco.com", help: "The address this trigger handles. Connect an Email channel (Connect screen) to receive mail." },
+    { key: "include_subject", label: "Include subject", widget: "toggle", help: "Prepend the email subject to the message." },
+    { key: "reply", label: "Reply to sender", widget: "toggle", help: "Send the workflow's answer back as a threaded email." },
+  ],
+  app_event: [
+    { key: "poll_url", label: "Poll URL", widget: "text", placeholder: "https://api.example.com/events", help: "Polled on each interval; new items fire the workflow." },
+    { key: "method", label: "Method", widget: "select", options: ["GET", "POST"].map((m) => ({ value: m, label: m })) },
+    { key: "interval_minutes", label: "Poll every N minutes", widget: "number", min: 1, step: 1 },
+    { key: "items_path", label: "Items JMESPath", widget: "text", placeholder: "data.items", help: "Path to the list of items in the response (empty = the whole body)." },
+    { key: "dedupe_key", label: "Dedupe key JMESPath", widget: "text", placeholder: "id", help: "Unique id within each item so it fires only once." },
+    { key: "message_path", label: "Message JMESPath (optional)", widget: "text", placeholder: "title", help: "Path within an item for the message text (empty = the whole item)." },
+  ],
+};
+// Node types that render a real form (agent/router/llm/tool_call have bespoke forms; the rest come from NODE_FIELDS).
+const FORM_NODES = new Set<string>(["agent", "deep_agent", "router", "llm", "tool_call", "retrieval", "start", "end", ...Object.keys(NODE_FIELDS)]);
+
+/** State keys written by upstream-capable nodes, with the values they can take -
+ *  shown in the router form so users branch on real values, not made-up labels. */
+function stateWriters(nodes: FlowNode[]): { key: string; values: string[]; from: string }[] {
+  const out: { key: string; values: string[]; from: string }[] = [];
+  const valuesOf = (value: any, fallback: string[] = []) => (
+    Array.isArray(value)
+      ? value
+      : typeof value === "string"
+        ? value.split(",")
+        : fallback
+  ).map((v) => String(v).trim()).filter(Boolean);
+  for (const n of nodes) {
+    const cfg = n.data.config || {};
+    const t = n.data.nodeType;
+    if (t === "classifier") out.push({ key: cfg.output_key || "intent", values: valuesOf(cfg.labels), from: n.id });
+    if (t === "retrieval" && cfg.route_key) out.push({ key: cfg.route_key, values: ["yes", "no"], from: n.id });
+    if (t === "human_input" && cfg.output_key) out.push({ key: cfg.output_key, values: valuesOf(cfg.allowed_decisions, ["approve", "reject"]), from: n.id });
+  }
+  return out;
+}
+
+/* Retrieval node config - toggleable Knowledge (RAG over documents) + FAQs / Q&A sections,
+   mirroring the agent panel's Knowledge sections (AgentConfig). Document search (include_docs)
+   and Q&A lookup (include_qa) are independent: use either or both. The flat retrieval config is
+   read/written directly. */
+function RetrievalForm({ c, set, folders, kinds }: { c: Record<string, any>; set: (p: Record<string, any>) => void; folders: string[]; kinds: string[] }) {
+  const ragOn = c.include_docs !== false; // RAG on unless explicitly turned off
+  const qaOn = !!c.include_qa;
+  return (
+    <div className="col" style={{ gap: 18 }}>
+      <CollapsibleSection label="Knowledge" badge={ragOn ? "enabled" : undefined}
+        hint="Pull the most relevant document chunks from your knowledge base into context for a grounded agent.">
+        <div className="col gap2">
+          <label className="row gap2" style={{ cursor: "pointer" }}>
+            <Toggle on={ragOn} onChange={(on) => set({ include_docs: on })} />
+            <span className="t-body-sm">Search knowledge base (RAG over documents)</span>
+          </label>
+          {ragOn && (
+            <div className="col gap2" style={{ paddingLeft: 6 }}>
+              <Field label="Folders" help="Limit document search to these folders (none selected = all).">
+                <MultiSelectChips value={c.folders || []} options={folders} onChange={(items) => set({ folders: items })} />
+              </Field>
+              <div className="row gap3 wrap">
+                <Field label="Documents (top K)" help="Chunks returned per search.">
+                  <input className="input" type="number" min={1} max={20} step={1} style={{ width: 92 }}
+                    value={c.top_k ?? 5} onChange={(e) => set({ top_k: Number(e.target.value) || 1 })} />
+                </Field>
+                <Field label="Min score" help="Drop chunks below this similarity (0–1).">
+                  <input className="input" type="number" min={0} max={1} step={0.02} style={{ width: 92 }}
+                    value={c.min_score ?? 0.18} onChange={(e) => set({ min_score: Number(e.target.value) })} />
+                </Field>
+              </div>
+              <label className="row gap2" style={{ cursor: "pointer" }}>
+                <Toggle on={!!c.hybrid} onChange={(on) => set({ hybrid: on })} />
+                <span className="t-body-sm">Hybrid search (BM25 + vector)</span>
+              </label>
+              <div className="field-help">Blend lexical keyword (BM25) ranking with semantic vectors so exact terms - codes, names, SKUs - aren’t missed.</div>
+              <label className="row gap2" style={{ cursor: "pointer" }}>
+                <Toggle on={!!c.rerank} onChange={(on) => set({ rerank: on })} />
+                <span className="t-body-sm">Rerank (cross-encoder)</span>
+              </label>
+              <div className="field-help">Two-stage retrieval: a local cross-encoder re-scores the shortlist and keeps only the best matches. Big accuracy boost; adds some latency. Runs offline on CPU (no extra cost). Min score is ignored while this is on (the reranker score is on a different scale).</div>
+            </div>
+          )}
+        </div>
+      </CollapsibleSection>
+
+      <CollapsibleSection label="FAQs / Q&A" badge={qaOn ? "enabled" : undefined}
+        hint="Also pull curated FAQ / Q&A pairs into context alongside the documents.">
+        <div className="col gap2">
+          <label className="row gap2" style={{ cursor: "pointer" }}>
+            <Toggle on={qaOn} onChange={(on) => set({ include_qa: on })} />
+            <span className="t-body-sm">Include FAQ / Q&A answers</span>
+          </label>
+          {qaOn && (
+            <div className="col gap2" style={{ paddingLeft: 6 }}>
+              <Field label="Kinds" help="Limit Q&A to these kinds/categories (none selected = all).">
+                <MultiSelectChips value={c.qa_kinds || []} options={kinds} onChange={(items) => set({ qa_kinds: items })} />
+              </Field>
+              <div className="row gap3 wrap">
+                <Field label="Pairs (top K)" help="Q&A pairs returned per lookup.">
+                  <input className="input" type="number" min={1} max={20} step={1} style={{ width: 92 }}
+                    value={c.qa_top_k ?? 3} onChange={(e) => set({ qa_top_k: Number(e.target.value) || 1 })} />
+                </Field>
+                <Field label="Match threshold" help="Min similarity for a Q&A pair (0–1).">
+                  <input className="input" type="number" min={0} max={1} step={0.05} style={{ width: 92 }}
+                    value={c.qa_threshold ?? 0.3} onChange={(e) => set({ qa_threshold: Number(e.target.value) })} />
+                </Field>
+              </div>
+            </div>
+          )}
+        </div>
+      </CollapsibleSection>
+
+      <div className="col gap2">
+        <div className="t-micro">When nothing is found</div>
+        <label className="row gap2" style={{ cursor: "pointer" }}>
+          <Toggle on={!!c.announce_empty} onChange={(on) => set({ announce_empty: on })} />
+          <span className="t-body-sm">Announce when empty</span>
+        </label>
+        <div className="field-help">Tells a grounded agent nothing relevant was found, so it says “I don’t know” instead of guessing.</div>
+        <Field label="Route flag (state key)" help="Optional: writes 'yes'/'no' (anything found?) to this state field so a Router can branch found vs not-found.">
+          <input className="input mono" value={c.route_key ?? ""} placeholder="data_found" onChange={(e) => set({ route_key: e.target.value || undefined })} />
+        </Field>
+      </div>
+
+      {!ragOn && !qaOn && (
+        <div className="field-help" style={{ color: "var(--warn)" }}>
+          ⚠ Both sources are off - this node will retrieve nothing. Turn on Knowledge and/or Q&A above.
+        </div>
+      )}
+    </div>
+  );
+}
+
+function RouterForm({
+  nodeId,
+  c,
+  set,
+  nodeIds,
+  nodes,
+  onCaseTarget,
+  onCaseRename,
+  onCaseRemove,
+}: {
+  nodeId: string;
+  c: Record<string, any>;
+  set: (p: Record<string, any>) => void;
+  nodeIds: string[];
+  nodes: FlowNode[];
+  onCaseTarget: (nodeId: string, key: string, target: string) => void;
+  onCaseRename: (nodeId: string, oldKey: string, newKey: string) => void;
+  onCaseRemove: (nodeId: string, key: string) => void;
+}) {
+  const cases: Record<string, string> = c.cases || {};
+  const rows = Object.entries(cases);
+  const setCase = (k: string, v: string) => {
+    set({ cases: { ...cases, [k]: v } });
+    onCaseTarget(nodeId, k, v);
+  };
+  const renameCase = (oldK: string, newK: string) => {
+    if (!newK || newK === oldK) return;
+    const n = { ...cases };
+    const val = n[oldK];
+    delete n[oldK];
+    n[newK] = val;
+    set({ cases: n });
+    onCaseRename(nodeId, oldK, newK);
+  };
+  const removeCase = (k: string) => {
+    const n = { ...cases };
+    delete n[k];
+    set({ cases: n });
+    onCaseRemove(nodeId, k);
+  };
+  const writers = stateWriters(nodes);
+  const activeWriter = writers.find((w) => w.key === (c.expression || "").trim());
+  const nextCaseKey = () => {
+    const nextKnown = activeWriter?.values?.find((value) => value && !Object.prototype.hasOwnProperty.call(cases, value));
+    if (nextKnown) return nextKnown;
+    let i = rows.length + 1;
+    while (Object.prototype.hasOwnProperty.call(cases, `case_${i}`)) i++;
+    return `case_${i}`;
+  };
+  const addCase = () => setCase(nextCaseKey(), "");
+  return (
+    <div className="col gap3">
+      <div>
+        <div className="field-label">Expression (over state)</div>
+        <input className="input mono" value={c.expression || ""} placeholder="intent" list="router-state-keys" onChange={(e) => set({ expression: e.target.value })} />
+        <datalist id="router-state-keys">{writers.map((w) => <option key={w.key} value={w.key} />)}</datalist>
+        {writers.length > 0 ? (
+          <div className="field-help">
+            Keys written upstream: {writers.map((w) => `${w.key} (${w.values.slice(0, 4).join("/") || "…"}, from ${w.from})`).join(" · ")}
+          </div>
+        ) : (
+          <div className="field-help" style={{ color: "var(--warn)" }}>
+            ⚠ No node in this workflow writes a routable state key yet. Add a Classifier (writes a label), or set a route/decision flag on Retrieval or Human Input - otherwise every run takes the Default path.
+          </div>
+        )}
+      </div>
+      <div>
+        <div className="field-label">Cases - when the expression VALUE equals… → go to</div>
+        {activeWriter && (
+          <div className="field-help" style={{ marginBottom: 6 }}>
+            '{activeWriter.key}' takes the values: <b>{activeWriter.values.join(", ") || "(set by " + activeWriter.from + ")"}</b> - use those exact values as case keys.
+          </div>
+        )}
+        <div className="col gap2">
+          {rows.map(([k, v], i) => (
+            <div key={i} className="row gap2">
+              <input className="input mono" style={{ flex: 1 }} value={k} onChange={(e) => renameCase(k, e.target.value)} />
+              <Icon name="chevright" size={14} style={{ color: "var(--fg-2)" }} />
+              <select className="select" style={{ flex: 1 }} value={v} onChange={(e) => setCase(k, e.target.value)}>
+                <option value="">target…</option>
+                {nodeIds.map((id) => <option key={id} value={id}>{id}</option>)}
+              </select>
+              <button className="iconbtn" onClick={() => removeCase(k)}><Icon name="trash" size={14} /></button>
+            </div>
+          ))}
+          <button className="btn btn-secondary btn-sm" style={{ alignSelf: "flex-start" }} onClick={addCase}><Icon name="plus" size={13} />Add case</button>
+        </div>
+      </div>
+      <div>
+        <div className="field-label">Default target</div>
+        <select className="select" value={c.default || ""} onChange={(e) => { set({ default: e.target.value }); onCaseTarget(nodeId, "__default__", e.target.value); }}>
+          <option value="">none</option>
+          {nodeIds.map((id) => <option key={id} value={id}>{id}</option>)}
+        </select>
+        {!c.default && (
+          <div className="field-help" style={{ color: "var(--warn)" }}>
+            ⚠ No default: if the expression value matches no case, the run ends silently with no answer.
+          </div>
+        )}
+      </div>
+      <div>
+        <label className="row gap2" style={{ alignItems: "center", cursor: "pointer" }}>
+          <input type="checkbox" checked={!!c.multi} onChange={(e) => set({ multi: e.target.checked })} />
+          <span className="field-label" style={{ margin: 0 }}>Route to every match (multi)</span>
+        </label>
+        <div className="field-help">
+          For list-valued expressions (a multi-label Classifier): run EVERY matching case in parallel,
+          then converge the branches on one synthesizer agent before End.
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/shell.tsx b/apps/web/components/shell.tsx
new file mode 100644
index 0000000..89af1a5
--- /dev/null
+++ b/apps/web/components/shell.tsx
@@ -0,0 +1,590 @@
+"use client";
+/* Forge app shell: topbar, project sidebar, command palette, assistant. */
+import { ReactNode, useEffect, useMemo, useRef, useState } from "react";
+import { Icon } from "./icons";
+import { Avatar, Tile } from "./primitives";
+import { PROJECT_NAV, NavLeaf } from "@/lib/data";
+import { Markdown } from "./markdown";
+
+/* ---------------- Theme hook ---------------- */
+export function useTheme(): [string, (t: string) => void] {
+  const [theme, setTheme] = useState("light");
+  useEffect(() => {
+    const cur = document.documentElement.getAttribute("data-theme") || "light";
+    setTheme(cur);
+  }, []);
+  useEffect(() => {
+    document.documentElement.setAttribute("data-theme", theme);
+  }, [theme]);
+  return [theme, setTheme];
+}
+
+/* ---------------- Global rail ---------------- */
+function RailBtn({ icon, label, onClick, active }: { icon: string; label: string; onClick?: () => void; active?: boolean }) {
+  const [hv, setHv] = useState(false);
+  return (
+    <div style={{ position: "relative" }} onMouseEnter={() => setHv(true)} onMouseLeave={() => setHv(false)}>
+      <button className={"iconbtn" + (active ? " active" : "")} style={{ width: 38, height: 38 }} onClick={onClick}>
+        <Icon name={icon} size={19} />
+      </button>
+      {hv && <div className="tooltip-pop" style={{ left: 46, top: 9 }}>{label}</div>}
+    </div>
+  );
+}
+
+export function GlobalRail({ theme, setTheme, onCommand, onAssistant, onHome }: { theme: string; setTheme: (t: string) => void; onCommand: () => void; onAssistant: () => void; onHome: () => void }) {
+  return (
+    <div style={{ width: 56, flex: "none", background: "var(--bg-1)", borderRight: "1px solid var(--line)", display: "flex", flexDirection: "column", alignItems: "center", padding: "10px 0", gap: 4 }}>
+      <button onClick={onHome} style={{ width: 34, height: 34, borderRadius: 9, background: "linear-gradient(140deg,var(--accent-bright),var(--accent-dim))", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", marginBottom: 8, boxShadow: "0 2px 10px var(--accent-glow)", border: "none", cursor: "pointer" }}>
+        <Icon name="flame" size={20} />
+      </button>
+      <RailBtn icon="search" label="Search  ⌘K" onClick={onCommand} />
+      <RailBtn icon="sparkles" label="Forge Assistant" onClick={onAssistant} />
+      <div style={{ flex: 1 }} />
+      <RailBtn icon="theme" label={theme === "dark" ? "Light mode" : "Dark console"} onClick={() => setTheme(theme === "dark" ? "light" : "dark")} />
+      <RailBtn icon="help" label="Ask the Forge Assistant" onClick={onAssistant} />
+      <div style={{ marginTop: 6 }}><Avatar name="Riley Cho" size={30} /></div>
+    </div>
+  );
+}
+
+/* ---------------- Account menu (avatar + sign out) ---------------- */
+function AccountMenu() {
+  const [open, setOpen] = useState(false);
+  const [me, setMe] = useState<{ email: string; role: string } | null>(null);
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    let live = true;
+    import("@/lib/api")
+      .then(({ api }) => api.me())
+      .then((m: any) => { if (live) setMe({ email: m.email, role: m.role }); })
+      .catch(() => {});
+    return () => { live = false; };
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    const h = (e: MouseEvent) => { if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false); };
+    window.addEventListener("mousedown", h);
+    return () => window.removeEventListener("mousedown", h);
+  }, [open]);
+  async function signOut() {
+    const { clearTokens } = await import("@/lib/api");
+    clearTokens();
+    window.location.reload();
+  }
+  return (
+    <div ref={ref} style={{ position: "relative", flex: "none" }}>
+      <button onClick={() => setOpen((o) => !o)} title="Account" aria-label="Account"
+        style={{ border: "none", background: "none", cursor: "pointer", padding: 0, borderRadius: "50%", display: "flex" }}>
+        <Avatar name={me?.email || "You"} size={30} />
+      </button>
+      {open && (
+        <div className="card fade-in" style={{ position: "absolute", top: "100%", right: 0, marginTop: 6, zIndex: 6000, minWidth: 210, padding: 6, boxShadow: "var(--sh-pop)" }}>
+          <div style={{ padding: "6px 9px 8px" }}>
+            <div className="t-body-sm truncate" style={{ fontWeight: 600 }}>{me?.email || "Signed in"}</div>
+            {me?.role && <div className="t-caption fg-2" style={{ textTransform: "capitalize", marginTop: 1 }}>{me.role}</div>}
+          </div>
+          <div className="divider" style={{ margin: "2px 0 4px" }} />
+          <button onClick={signOut}
+            style={{ display: "flex", alignItems: "center", gap: 9, width: "100%", textAlign: "left", padding: "7px 9px", border: "none", background: "none", cursor: "pointer", borderRadius: 6, fontSize: 13, fontFamily: "var(--font-ui)", color: "var(--err)" }}>
+            <Icon name="logout" size={15} />Sign out
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ---------------- Topbar ---------------- */
+export interface Crumb { label: string; onClick?: () => void }
+export function Topbar({ crumbs, right, left, onCommand }: { crumbs: Crumb[]; right?: ReactNode; left?: ReactNode; onCommand: () => void }) {
+  return (
+    <div style={{ height: 52, flex: "none", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", padding: "0 16px", gap: 12, background: "var(--bg-1)" }}>
+      {left}
+      <div className="row gap2" style={{ minWidth: 0 }}>
+        {crumbs.map((c, i) => (
+          <div key={i} className="row gap2" style={{ minWidth: 0 }}>
+            {i > 0 && <Icon name="chevright" size={15} style={{ color: "var(--fg-2)", flex: "none" }} />}
+            <button onClick={c.onClick} disabled={!c.onClick}
+              style={{ background: "none", border: "none", cursor: c.onClick ? "pointer" : "default", padding: 0, fontFamily: i === crumbs.length - 1 ? "var(--font-display)" : "var(--font-ui)", fontSize: i === crumbs.length - 1 ? 16 : 13, fontWeight: 600, color: i === crumbs.length - 1 ? "var(--fg-0)" : "var(--fg-2)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+              {c.label}
+            </button>
+          </div>
+        ))}
+      </div>
+      <div style={{ flex: 1 }} />
+      <button className="row gap2" onClick={onCommand}
+        style={{ height: 32, padding: "0 10px", border: "1px solid var(--line-strong)", borderRadius: 6, background: "var(--bg-1)", cursor: "pointer", color: "var(--fg-2)", fontSize: 12.5 }}>
+        <Icon name="search" size={15} />
+        <span style={{ width: 110, textAlign: "left" }}>Search…</span>
+        <span className="kbd">⌘K</span>
+      </button>
+      {right}
+      <AccountMenu />
+    </div>
+  );
+}
+
+/* ---------------- Project sidebar ---------------- */
+export function ProjectSidebar({ project, active, onNav, onBack, refreshKey }: { project: any; active: string; onNav: (id: string) => void; onBack: () => void; refreshKey?: any }) {
+  const [counts, setCounts] = useState<Record<string, number>>({});
+  // api.ts fires this after any create/delete of a counted resource, so the badges
+  // refresh immediately instead of waiting for a page reload.
+  const [countsBump, setCountsBump] = useState(0);
+  useEffect(() => {
+    const onChange = () => setCountsBump((n) => n + 1);
+    window.addEventListener("forge:counts-changed", onChange);
+    return () => window.removeEventListener("forge:counts-changed", onChange);
+  }, []);
+  useEffect(() => {
+    const pid = project?.id;
+    if (!pid) return;
+    let live = true;
+    const refresh = async () => {
+      // One cheap counts call (COUNT(*) per resource) instead of fetching six full lists
+      // just to read their `.length`. Re-runs on create/delete via countsBump so badges
+      // stay in sync. A short poll also keeps the agent-inbox badge current when a workflow
+      // opens a handoff while the operator is on another screen.
+      const { api } = await import("@/lib/api");
+      try {
+        const c = await api.projectCounts(pid);
+        if (live) setCounts(c as unknown as Record<string, number>);
+      } catch {
+        if (live) setCounts({});
+      }
+    };
+    refresh();
+    const timer = window.setInterval(refresh, 15_000);
+    return () => { live = false; window.clearInterval(timer); };
+  }, [project?.id, refreshKey, countsBump]);
+  const renderLeaf = (n: NavLeaf) => {
+    const on = active === n.id;
+    const count = n.countKey ? counts[n.countKey] : undefined;
+    return (
+      <button key={n.id} onClick={() => onNav(n.id)} title={n.help || n.label} className={"sidenav-item" + (on ? " active" : "")}
+        style={{ display: "flex", alignItems: "center", gap: 10, width: "100%", height: 34, padding: "0 10px", marginBottom: 1, borderRadius: 8, border: "none", cursor: "pointer", textAlign: "left", color: on ? "var(--accent)" : "var(--fg-1)", fontSize: 13, fontWeight: on ? 600 : 500, fontFamily: "var(--font-ui)", transition: "color var(--dur-fast)" }}>
+        <Icon name={n.icon} size={16} style={{ flex: "none" }} />
+        <span className="grow truncate">{n.label}</span>
+        {count != null && count > 0 && <span className="badge" style={on ? { background: "var(--accent-glow)", color: "var(--accent)" } : {}}>{count}</span>}
+      </button>
+    );
+  };
+  // Settings is pinned to the bottom (rendered in the footer below), so drop it from the scroll list.
+  const settingsLeaf = PROJECT_NAV.find((e): e is NavLeaf => "id" in e && e.id === "settings");
+  return (
+    <div style={{ width: 224, flex: "none", background: "var(--bg-1)", borderRight: "1px solid var(--line)", display: "flex", flexDirection: "column", minHeight: 0 }}>
+      <button onClick={onBack} className="row gap2" style={{ height: 52, flex: "none", padding: "0 14px", background: "none", border: "none", borderBottom: "1px solid var(--line)", cursor: "pointer", textAlign: "left", alignItems: "center" }}>
+        <div className="t-h2 truncate" style={{ minWidth: 0, flex: 1 }}>{project?.name}</div>
+        <Icon name="chevdown" size={15} style={{ color: "var(--fg-2)", flex: "none" }} />
+      </button>
+      <nav className="scroll-y" style={{ flex: 1, minHeight: 0, padding: 8 }}>
+        {PROJECT_NAV.map((entry) => {
+          if ("id" in entry && entry.id === "settings") return null; // pinned to the footer
+          if ("section" in entry) {
+            // Static section heading (like the design) - no collapse toggle.
+            return (
+              <div key={entry.section}>
+                <div className="t-micro" style={{ letterSpacing: ".06em", textTransform: "uppercase", padding: "14px 10px 5px" }}>{entry.section}</div>
+                {entry.items.map(renderLeaf)}
+              </div>
+            );
+          }
+          return renderLeaf(entry);
+        })}
+      </nav>
+      {/* Settings pinned to the bottom: sits above the scrolling nav (z-index + solid bg + top
+          shadow) so nav items scroll behind it on short viewports. */}
+      {settingsLeaf && (
+        <div style={{ flex: "none", position: "relative", zIndex: 2, padding: 8, borderTop: "1px solid var(--line)", background: "var(--bg-1)", boxShadow: "0 -6px 12px -8px rgba(0,0,0,.18)" }}>
+          {renderLeaf(settingsLeaf)}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ---------------- Command palette ---------------- */
+export function CommandPalette({ open, onClose, onGo, projects }: { open: boolean; onClose: () => void; onGo: (v: any) => void; projects: { id: string; name: string }[] }) {
+  const [q, setQ] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    if (open) { setQ(""); setTimeout(() => inputRef.current?.focus(), 30); }
+  }, [open]);
+  const cmds = useMemo(() => {
+    const first = projects[0]?.id || "p_support";
+    const list = [
+      { sec: "Go to", label: "Home / Dashboard", icon: "dashboard", go: { name: "dashboard" } },
+      { sec: "Go to", label: "Workflow Canvas - Support Router", icon: "workflows", go: { name: "project", project: first, screen: "workflow-canvas" } },
+      { sec: "Go to", label: "Tool Builder", icon: "tools", go: { name: "project", project: first, screen: "tool-builder" } },
+      { sec: "Go to", label: "Agent Config", icon: "agents", go: { name: "project", project: first, screen: "agent-config" } },
+      { sec: "Go to", label: "Playground", icon: "playground", go: { name: "project", project: first, screen: "playground" } },
+      { sec: "Go to", label: "Traces", icon: "traces", go: { name: "project", project: first, screen: "traces" } },
+      { sec: "Go to", label: "Knowledge", icon: "knowledge", go: { name: "project", project: first, screen: "knowledge" } },
+      { sec: "Go to", label: "Settings & Secrets", icon: "secret", go: { name: "project", project: first, screen: "settings" } },
+      { sec: "Actions", label: "New project…", icon: "plus", go: { name: "onboarding" } },
+    ];
+    projects.forEach((p) => list.push({ sec: "Projects", label: p.name, icon: "layers", go: { name: "project", project: p.id, screen: "overview" } }));
+    if (!q) return list;
+    return list.filter((c) => c.label.toLowerCase().includes(q.toLowerCase()));
+  }, [q, projects]);
+  const groups = useMemo(() => { const g: Record<string, any[]> = {}; cmds.forEach((c) => (g[c.sec] = g[c.sec] || []).push(c)); return g; }, [cmds]);
+  if (!open) return null;
+  return (
+    <div className="fade-in" style={{ position: "fixed", inset: 0, zIndex: 8500, background: "rgba(8,10,14,.45)", backdropFilter: "blur(3px)", display: "flex", justifyContent: "center", paddingTop: "12vh" }} onMouseDown={onClose}>
+      <div className="card fade-up" style={{ width: 600, maxWidth: "92vw", height: "fit-content", maxHeight: "70vh", boxShadow: "var(--sh-pop)", display: "flex", flexDirection: "column", overflow: "hidden" }} onMouseDown={(e) => e.stopPropagation()}>
+        <div className="row gap2" style={{ padding: "12px 14px", borderBottom: "1px solid var(--line)" }}>
+          <Icon name="search" size={18} style={{ color: "var(--fg-2)" }} />
+          <input ref={inputRef} value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search projects, workflows, tools, actions…"
+            style={{ flex: 1, border: "none", outline: "none", background: "none", fontSize: 15, color: "var(--fg-0)", fontFamily: "var(--font-ui)" }} />
+          <span className="kbd">esc</span>
+        </div>
+        <div className="scroll-y" style={{ padding: 8 }}>
+          {Object.entries(groups).map(([sec, items]) => (
+            <div key={sec} style={{ marginBottom: 6 }}>
+              <div className="t-micro" style={{ padding: "6px 8px 4px" }}>{sec}</div>
+              {items.map((c, i) => (
+                <button key={i} onClick={() => { onGo(c.go); onClose(); }} className="row gap3"
+                  style={{ width: "100%", padding: "8px", border: "none", background: "none", cursor: "pointer", borderRadius: 7, textAlign: "left", color: "var(--fg-1)" }}
+                  onMouseEnter={(e) => (e.currentTarget.style.background = "var(--bg-3)")}
+                  onMouseLeave={(e) => (e.currentTarget.style.background = "none")}>
+                  <Icon name={c.icon} size={16} style={{ color: "var(--fg-2)" }} />
+                  <span style={{ fontSize: 13.5, color: "var(--fg-0)" }}>{c.label}</span>
+                </button>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ---------------- Forge Assistant ---------------- */
+interface AsstMsg { role: "user" | "assistant"; content: string; thinking?: string; thinkSecs?: number }
+interface AsstStep { name: string; result?: string; turn: number }
+interface AsstTodo { content?: string; status?: string; [k: string]: any }
+
+// Friendly labels for the inline "current step" line (the Steps drawer keeps raw names).
+const TOOL_LABELS: Record<string, string> = {
+  write_todos: "Planning the steps",
+  list_resources: "Reviewing the project",
+  describe_workflow: "Reading the workflow",
+  list_node_types: "Checking available nodes",
+  get_node_schema: "Checking node options",
+  list_middleware_types: "Checking middleware",
+  read_file: "Reading the platform guide",
+  create_agent_preset: "Creating an agent",
+  create_builtin_tool: "Adding a tool",
+  create_rest_tool: "Adding a REST tool",
+  create_auth_provider: "Adding an auth provider",
+  add_qa_pair: "Adding a Q&A pair",
+  add_knowledge_text: "Adding knowledge",
+  create_grounded_workflow: "Building the workflow",
+  create_intent_router_workflow: "Building the workflow",
+  create_custom_workflow: "Building the workflow",
+  add_human_review: "Adding a human-approval step",
+  test_workflow: "Testing the workflow",
+  evaluate_build: "Reviewing the result",
+  delete_workflow: "Removing a workflow",
+};
+const prettyTool = (name: string) => TOOL_LABELS[name] || name.replace(/_/g, " ");
+
+function newThreadId() {
+  return `panel-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+
+export function AssistantPanel({ open, onClose, project, onMutate }: { open: boolean; onClose: () => void; project?: { id: string; name: string } | null; onMutate?: () => void }) {
+  const [msgs, setMsgs] = useState<AsstMsg[]>([]);
+  const [input, setInput] = useState("");
+  const [streaming, setStreaming] = useState("");
+  // GPT-style thinking: while the agent works through intermediate narration, the text
+  // streams as dim auto-scrolling lines under a "Thinking" label; on finish it collapses
+  // to "Thought for Xs" and only the final segment stays as the answer bubble.
+  const [liveThink, setLiveThink] = useState<string | null>(null);
+  const [openThought, setOpenThought] = useState<number | null>(null);
+  // Tool/plan activity lives in the collapsible Steps drawer above the composer
+  // (not as chips in the transcript).
+  const [steps, setSteps] = useState<AsstStep[]>([]);
+  const [currentTool, setCurrentTool] = useState<string | null>(null);
+  const [stepsOpen, setStepsOpen] = useState(false);
+  const [expandedStep, setExpandedStep] = useState<number | null>(null);
+  const [todos, setTodos] = useState<AsstTodo[]>([]);
+  const [busy, setBusy] = useState(false);
+  const [pendingApproval, setPendingApproval] = useState<string | null>(null); // human-readable prompt
+  const turnRef = useRef(0);
+  // Server-side conversation: the backend checkpointer holds the thread (history,
+  // plan, files), so each turn sends ONLY the new message under this thread id.
+  const threadRef = useRef<string>(newThreadId());
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const thinkRef = useRef<HTMLDivElement>(null);
+  const taRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => { scrollRef.current?.scrollTo({ top: 1e9, behavior: "smooth" }); }, [msgs, streaming, currentTool, pendingApproval, liveThink !== null]);
+  // Auto-grow the composer up to ~6 lines, then scroll inside it.
+  useEffect(() => {
+    const ta = taRef.current;
+    if (!ta) return;
+    ta.style.height = "auto";
+    ta.style.height = `${Math.min(ta.scrollHeight, 140)}px`;
+  }, [input]);
+  // The thinking ticker auto-scrolls its own little window as text streams.
+  useEffect(() => { if (thinkRef.current) thinkRef.current.scrollTop = thinkRef.current.scrollHeight; }, [liveThink]);
+  // New project = new conversation thread.
+  useEffect(() => { threadRef.current = newThreadId(); setMsgs([]); setSteps([]); setTodos([]); setPendingApproval(null); setLiveThink(null); }, [project?.id]);
+
+  function describeInterrupt(data: any): string {
+    const flat = (x: any): any[] => (Array.isArray(x) ? x.flatMap(flat) : [x]);
+    for (const item of flat(data?.interrupts ?? data ?? [])) {
+      const v = item && typeof item === "object" && "value" in item ? item.value : item;
+      const reqs = v?.action_requests || (v?.action_request ? [v.action_request] : v?.action ? [v] : null);
+      if (reqs) {
+        return reqs.map((r: any) => r.description || `${r.action || r.name || "action"}(${JSON.stringify(r.args || {}).slice(0, 100)})`).join("; ");
+      }
+      if (v?.prompt) return String(v.prompt);
+    }
+    return "The assistant wants to perform a sensitive action.";
+  }
+
+  async function streamTurn(body: Record<string, unknown>, url: string) {
+    if (!project) return;
+    setStreaming(""); setLiveThink(null); setBusy(true); setPendingApproval(null);
+    const turn = ++turnRef.current;
+    const turnStart = Date.now();
+    let mutated = false; let interruptPrompt: string | null = null; let acted = false;
+    // Segmentation: each AI message in the agent loop is one segment (the backend tags
+    // tokens with the message id; a tool call also closes the segment). Everything
+    // before the LAST segment is "thinking"; the last segment is the answer.
+    let cur = "";                  // current segment
+    let segId: string | null = null;
+    const done: string[] = [];     // completed (thinking) segments
+    let thinking = false;          // becomes true on first tool call / segment change
+
+    const render = () => {
+      if (thinking) {
+        setStreaming("");
+        setLiveThink([...done, cur].filter(Boolean).join("\n\n"));
+      } else {
+        setStreaming(cur);
+      }
+    };
+    const closeSegment = () => {
+      if (cur.trim()) done.push(cur.trim());
+      cur = "";
+    };
+    const activateThinking = () => { thinking = true; };
+
+    try {
+      const { openSSE } = await import("@/lib/api");
+      await openSSE(url, (f) => {
+        if (f.event === "messages" && f.data?.content) {
+          const id = f.data.id || null;
+          if (segId && id && id !== segId) { closeSegment(); activateThinking(); }
+          if (id) segId = id;
+          cur += f.data.content;
+          render();
+        }
+        else if (f.event === "tool" && f.data?.name) {
+          acted = true;
+          closeSegment(); activateThinking(); render();
+          setCurrentTool(f.data.name);
+          setSteps((s) => [...s, { name: f.data.name, result: f.data.result, turn }]);
+        }
+        else if (f.event === "todos" && Array.isArray(f.data?.todos)) { acted = true; setTodos(f.data.todos); }
+        else if (f.event === "interrupt") { interruptPrompt = describeInterrupt(f.data); }
+        else if (f.event === "done") { mutated = (f.data?.mutated || []).length > 0; }
+        else if (f.event === "error") { cur += `\n⚠ ${f.data?.message || "assistant error"}`; render(); }
+      }, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
+    } catch (e: any) {
+      cur += `\n⚠ ${e.message || e}`;
+    } finally {
+      const answer = cur.trim();
+      const thought = thinking ? done.join("\n\n") : "";
+      const secs = Math.max(1, Math.round((Date.now() - turnStart) / 1000));
+      if (answer || thought || acted) {
+        setMsgs((m) => [...m, {
+          role: "assistant",
+          content: answer || (interruptPrompt ? "(paused for your approval)" : "(done - see Steps for details)"),
+          ...(thought ? { thinking: thought, thinkSecs: secs } : {}),
+        }]);
+      }
+      setStreaming(""); setLiveThink(null); setCurrentTool(null); setBusy(false);
+      setPendingApproval(interruptPrompt);
+      if (mutated) onMutate?.();
+    }
+  }
+
+  async function send(text: string) {
+    const q = text.trim();
+    if (!q || busy || !project) return;
+    setMsgs((m) => [...m, { role: "user", content: q }]); setInput("");
+    const { api } = await import("@/lib/api");
+    await streamTurn({ message: q, thread_id: threadRef.current }, api.assistantStreamUrl(project.id));
+  }
+
+  async function decide(decision: "approve" | "reject") {
+    if (!project || busy) return;
+    setMsgs((m) => [...m, { role: "user", content: decision === "approve" ? "✓ Approved" : "✕ Rejected" }]);
+    const { api } = await import("@/lib/api");
+    await streamTurn({ thread_id: threadRef.current, decision }, api.assistantResumeUrl(project.id));
+  }
+
+  function resetChat() {
+    threadRef.current = newThreadId();
+    setMsgs([]); setSteps([]); setTodos([]); setPendingApproval(null); setStreaming(""); setCurrentTool(null); setStepsOpen(false);
+  }
+
+  const suggestions = ["How does my workflow work?", "Build a grounded support workflow", "What's in this project?"];
+
+  if (!open) return null;
+  return (
+    <aside style={{ width: 380, maxWidth: "38vw", flex: "none", background: "var(--bg-1)", borderRight: "1px solid var(--line)", display: "flex", flexDirection: "column", minHeight: 0 }}>
+      <div className="row spread" style={{ padding: "12px 14px", borderBottom: "1px solid var(--line)", flex: "none" }}>
+        <div style={{ minWidth: 0 }}>
+          <div className="t-h2">Forge Assistant</div>
+          <div className="fg-2 t-caption truncate">{project ? `Building in ${project.name}` : "Open a project to build"}</div>
+        </div>
+        <div className="row gap1">
+          <button className="iconbtn" title="New conversation" onClick={resetChat} disabled={busy}><Icon name="refresh" size={15} /></button>
+          <button className="iconbtn" onClick={onClose}><Icon name="x" size={16} /></button>
+        </div>
+      </div>
+      <div style={{ flex: 1, display: "flex", flexDirection: "column", minHeight: 0 }}>
+      <div ref={scrollRef} className="scroll-y col gap4" style={{ padding: 16, flex: 1, minHeight: 0 }}>
+        {msgs.length === 0 && !streaming && (
+          <div className="col gap2" style={{ color: "var(--fg-2)" }}>
+            <div className="row gap2"><Tile icon="sparkles" color="var(--accent)" size={28} /><div style={{ fontSize: 13, lineHeight: "19px", color: "var(--fg-1)" }}>I can build tools, auth providers, Q&A, knowledge, and whole workflows - and explain how Forge works. What should we build?</div></div>
+          </div>
+        )}
+        {msgs.map((m, i) => (
+          <div key={i} className="col" style={{ gap: 4 }}>
+            {m.thinking && (
+              <div style={{ paddingLeft: 37 }}>
+                <button onClick={() => setOpenThought(openThought === i ? null : i)}
+                  style={{ border: "none", background: "none", padding: 0, cursor: "pointer", fontSize: 12, color: "var(--fg-2)", display: "inline-flex", alignItems: "center", gap: 4 }}>
+                  Thought for {m.thinkSecs}s
+                  <Icon name={openThought === i ? "chevdown" : "chevright"} size={11} />
+                </button>
+                {openThought === i && (
+                  <div style={{ marginTop: 4, fontSize: 12, lineHeight: "18px", color: "var(--fg-2)", whiteSpace: "pre-wrap", overflowWrap: "anywhere", maxHeight: 260, overflowY: "auto" }} className="no-scrollbar">
+                    {m.thinking}
+                  </div>
+                )}
+              </div>
+            )}
+            <div className="row" style={{ gap: 9, alignItems: "flex-start", flexDirection: m.role === "user" ? "row-reverse" : "row" }}>
+              {m.role === "assistant" ? <Tile icon="sparkles" color="var(--accent)" size={28} /> : <Avatar name="You" size={28} />}
+              <div style={{ maxWidth: 280, padding: "9px 12px", borderRadius: 11, fontSize: 13, lineHeight: "19px", overflowWrap: "anywhere", whiteSpace: m.role === "user" ? "pre-wrap" : "normal", background: m.role === "user" ? "var(--accent)" : "var(--bg-3)", color: m.role === "user" ? "var(--fg-on-accent)" : "var(--fg-0)", borderTopRightRadius: m.role === "user" ? 3 : 11, borderTopLeftRadius: m.role === "assistant" ? 3 : 11 }}>{m.role === "assistant" ? <Markdown>{m.content}</Markdown> : m.content}</div>
+            </div>
+          </div>
+        ))}
+        {pendingApproval && !busy && (
+          <div className="card col gap2" style={{ padding: 12, borderColor: "var(--warn)" }}>
+            <div className="row gap2" style={{ alignItems: "center" }}><Icon name="bolt" size={14} style={{ color: "var(--warn)" }} /><span className="t-h3">Approval required</span></div>
+            <div className="t-body-sm fg-1" style={{ overflowWrap: "anywhere" }}>{pendingApproval}</div>
+            <div className="row gap2">
+              <button className="btn btn-primary btn-sm" onClick={() => decide("approve")}>Approve</button>
+              <button className="btn btn-secondary btn-sm" onClick={() => decide("reject")}>Reject</button>
+            </div>
+          </div>
+        )}
+        {busy && (
+          (liveThink !== null || currentTool) ? (
+            /* Working: dim reasoning streams up in a small auto-scrolling window AND the
+               current step shows on a single line that updates in place as the run moves
+               from one tool to the next. Collapses to "Thought for Xs" on finish. */
+            <div style={{ paddingLeft: 37 }} className="col gap1">
+              <div style={{ fontSize: 12, color: "var(--fg-2)", display: "inline-flex", alignItems: "center", gap: 5 }}>
+                Thinking
+                <span style={{ display: "inline-block", width: 5, height: 5, borderRadius: "50%", background: "var(--fg-2)", animation: "blink 1s steps(1) infinite" }} />
+              </div>
+              {liveThink && (
+                <div ref={thinkRef} className="no-scrollbar" style={{
+                  maxHeight: 72, overflowY: "auto", fontSize: 12, lineHeight: "18px",
+                  color: "var(--fg-2)", opacity: 0.72, whiteSpace: "pre-wrap", overflowWrap: "anywhere",
+                  WebkitMaskImage: "linear-gradient(to bottom, transparent 0, black 22px)",
+                  maskImage: "linear-gradient(to bottom, transparent 0, black 22px)",
+                }}>
+                  {liveThink}
+                </div>
+              )}
+              {currentTool && (
+                <div className="row gap2" style={{ alignItems: "center", fontSize: 12, color: "var(--fg-1)" }}>
+                  <Icon name="refresh" size={11} style={{ color: "var(--accent)", animation: "spin 1s linear infinite" }} />
+                  <span>{prettyTool(currentTool)}…</span>
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="row" style={{ gap: 9, alignItems: "flex-start" }}>
+              <Tile icon="sparkles" color="var(--accent)" size={28} />
+              <div style={{ maxWidth: 280, padding: "9px 12px", borderRadius: 11, fontSize: 13, lineHeight: "19px", overflowWrap: "anywhere", background: "var(--bg-3)", color: "var(--fg-0)", borderTopLeftRadius: 3 }}>
+                {streaming ? <Markdown>{streaming}</Markdown> : "…"}
+                <span style={{ display: "inline-block", width: 6, height: 13, background: "var(--accent)", marginLeft: 2, verticalAlign: "-2px", animation: "blink 1s steps(1) infinite" }} />
+              </div>
+            </div>
+          )
+        )}
+        {msgs.length === 0 && (
+          <div className="row gap2 wrap" style={{ marginTop: 4 }}>
+            {suggestions.map((s) => (
+              <button key={s} className="chip" style={{ cursor: project ? "pointer" : "not-allowed", opacity: project ? 1 : 0.5 }} onClick={() => send(s)} disabled={!project}>{s}</button>
+            ))}
+          </div>
+        )}
+      </div>
+      {/* Sticky, togglable Steps drawer: plan + every tool call, out of the chat flow. */}
+      {(steps.length > 0 || todos.length > 0) && (
+        <div style={{ flex: "none", borderTop: "1px solid var(--line)", background: "var(--bg-1)" }}>
+          <button className="row spread" onClick={() => setStepsOpen((o) => !o)}
+            style={{ width: "100%", padding: "8px 14px", border: "none", background: "none", cursor: "pointer", alignItems: "center" }}>
+            <span className="row gap2" style={{ alignItems: "center", fontSize: 12.5, fontWeight: 650, color: "var(--fg-1)" }}>
+              <Icon name="list" size={13} />
+              Steps ({steps.length}){todos.length > 0 ? ` · plan ${todos.filter((t) => t.status === "completed").length}/${todos.length}` : ""}
+              {busy && currentTool && <span className="mono-sm" style={{ color: "var(--accent)", fontWeight: 450 }}> · {currentTool}…</span>}
+            </span>
+            <Icon name={stepsOpen ? "chevdown" : "chevup"} size={14} style={{ color: "var(--fg-2)" }} />
+          </button>
+          {stepsOpen && (
+            <div className="scroll-y col gap1" style={{ maxHeight: 220, padding: "0 14px 10px" }}>
+              {todos.length > 0 && (
+                <div className="col gap1" style={{ paddingBottom: 6, borderBottom: "1px solid var(--line)", marginBottom: 4 }}>
+                  <div className="t-micro">Plan</div>
+                  {todos.map((t, i) => (
+                    <div key={i} className="row gap2" style={{ alignItems: "center", fontSize: 12, color: t.status === "completed" ? "var(--fg-2)" : "var(--fg-0)" }}>
+                      <Icon name={t.status === "completed" ? "check" : t.status === "in_progress" ? "refresh" : "minus"} size={11}
+                        style={{ color: t.status === "completed" ? "var(--ok)" : t.status === "in_progress" ? "var(--accent)" : "var(--fg-2)" }} />
+                      <span style={{ textDecoration: t.status === "completed" ? "line-through" : "none" }}>{t.content || JSON.stringify(t)}</span>
+                    </div>
+                  ))}
+                </div>
+              )}
+              {steps.map((s, i) => (
+                <div key={i} className="col" style={{ gap: 2 }}>
+                  <button className="row gap2" onClick={() => setExpandedStep(expandedStep === i ? null : i)}
+                    style={{ border: "none", background: "none", cursor: s.result ? "pointer" : "default", padding: "2px 0", alignItems: "center", textAlign: "left" }}>
+                    <Icon name="check" size={11} style={{ color: "var(--ok)" }} />
+                    <span className="mono-sm" style={{ color: "var(--fg-1)" }}>{s.name}</span>
+                    {s.result && <Icon name={expandedStep === i ? "chevdown" : "chevright"} size={11} style={{ color: "var(--fg-2)" }} />}
+                  </button>
+                  {expandedStep === i && s.result && (
+                    <pre className="mono-sm" style={{ margin: "0 0 4px 18px", padding: "8px 10px", borderRadius: 8, background: "var(--bg-3)", fontSize: 11, lineHeight: "16px", whiteSpace: "pre-wrap", overflowWrap: "anywhere", maxHeight: 160, overflow: "auto" }}>{s.result}</pre>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+      <div style={{ padding: 12, borderTop: "1px solid var(--line)", background: "var(--bg-1)", flex: "none" }}>
+        <div className="row gap2" style={{ alignItems: "flex-end", background: "var(--bg-3)", border: "1px solid var(--line)", borderRadius: 10, padding: "6px 6px 6px 12px" }}>
+          <textarea ref={taRef} value={input} onChange={(e) => setInput(e.target.value)} rows={1}
+            onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(input); } }}
+            placeholder={project ? "Ask or instruct…  (Shift+Enter for a new line)" : "Open a project first"} disabled={!project || busy}
+            style={{ flex: 1, minWidth: 0, border: "none", background: "none", outline: "none", resize: "none", overflowY: "auto", maxHeight: 140, fontSize: 13, lineHeight: "19px", color: "var(--fg-0)", fontFamily: "var(--font-ui)" }} />
+          <button className="btn btn-primary btn-sm" onClick={() => send(input)} disabled={!project || busy} style={{ flex: "none" }}><Icon name={busy ? "refresh" : "bolt"} size={14} style={busy ? { animation: "spin 1s linear infinite" } : {}} /></button>
+        </div>
+      </div>
+      </div>
+    </aside>
+  );
+}
diff --git a/apps/web/components/version-history.tsx b/apps/web/components/version-history.tsx
new file mode 100644
index 0000000..4b110d9
--- /dev/null
+++ b/apps/web/components/version-history.tsx
@@ -0,0 +1,169 @@
+"use client";
+/* Reusable version-history drawer: lists recent versions of an entity (workflow, agent,
+   tool, …) with author + timestamp + label and a Restore action. Wired to the
+   /v1/versions/{entity_type}/{entity_id} endpoints. Drop <VersionHistory .../> into any
+   editor toolbar. */
+import { useCallback, useEffect, useState } from "react";
+import { Icon } from "./icons";
+import { Drawer } from "./primitives";
+import { api, EntityType, EntityVersion } from "@/lib/api";
+
+/** Compact "3m ago" / "2d ago" relative time, falling back to a locale date. */
+function relTime(iso?: string | null): string {
+  if (!iso) return "";
+  const t = new Date(iso).getTime();
+  if (Number.isNaN(t)) return String(iso);
+  const s = Math.round((Date.now() - t) / 1000);
+  if (s < 60) return "just now";
+  const m = Math.round(s / 60);
+  if (m < 60) return `${m}m ago`;
+  const h = Math.round(m / 60);
+  if (h < 24) return `${h}h ago`;
+  const d = Math.round(h / 24);
+  if (d < 30) return `${d}d ago`;
+  return new Date(iso).toLocaleDateString();
+}
+
+export function VersionHistory({
+  entityType,
+  entityId,
+  entityLabel,
+  onRestored,
+  buttonClassName = "btn btn-secondary btn-sm",
+  buttonLabel = "History",
+  allowRestore = true,
+}: {
+  entityType: EntityType;
+  entityId?: string | null;
+  entityLabel?: string;
+  onRestored?: () => void;
+  buttonClassName?: string;
+  buttonLabel?: string;
+  // Some entities (e.g. knowledge sources) version only their config metadata, not the
+  // embedded content, so a "restore" would be misleading - show read-only history instead.
+  allowRestore?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const [rows, setRows] = useState<EntityVersion[] | null>(null);
+  const [err, setErr] = useState<string | null>(null);
+  const [restoring, setRestoring] = useState<number | null>(null);
+  const [expanded, setExpanded] = useState<number | null>(null);
+  const [snapshots, setSnapshots] = useState<Record<number, string>>({});
+
+  const load = useCallback(() => {
+    if (!entityId) return;
+    setRows(null);
+    setErr(null);
+    api
+      .listVersions(entityType, entityId)
+      .then((v) => setRows(v))
+      .catch((e) => setErr(String(e?.message || e)));
+  }, [entityType, entityId]);
+
+  useEffect(() => {
+    if (open) load();
+  }, [open, load]);
+
+  async function peek(versionNo: number) {
+    if (expanded === versionNo) {
+      setExpanded(null);
+      return;
+    }
+    setExpanded(versionNo);
+    if (snapshots[versionNo] || !entityId) return;
+    try {
+      const v = await api.getVersion(entityType, entityId, versionNo);
+      setSnapshots((s) => ({ ...s, [versionNo]: JSON.stringify(v.snapshot ?? {}, null, 2) }));
+    } catch {
+      setSnapshots((s) => ({ ...s, [versionNo]: "(could not load snapshot)" }));
+    }
+  }
+
+  async function restore(versionNo: number) {
+    if (!entityId) return;
+    if (!window.confirm(`Restore version ${versionNo}? The current state is saved as a new version first, so this is reversible.`)) return;
+    setRestoring(versionNo);
+    try {
+      await api.restoreVersion(entityType, entityId, versionNo);
+      setOpen(false);
+      onRestored?.();
+    } catch (e: any) {
+      setErr(String(e?.message || e));
+    } finally {
+      setRestoring(null);
+    }
+  }
+
+  const latest = rows && rows.length ? Math.max(...rows.map((r) => r.version_no)) : null;
+
+  return (
+    <>
+      <button className={buttonClassName} onClick={() => setOpen(true)} disabled={!entityId} title="Version history">
+        <Icon name="clock" size={14} />
+        {buttonLabel}
+      </button>
+      <Drawer open={open} onClose={() => setOpen(false)} title="Version history" sub={entityLabel} width={420}>
+        <div className="col" style={{ padding: 14, gap: 8 }}>
+          {err && (
+            <div className="card" style={{ padding: 12, color: "var(--err)" }}>{err}</div>
+          )}
+          {!err && rows === null && (
+            <div className="fg-2 t-caption" style={{ padding: "8px 2px" }}>Loading versions…</div>
+          )}
+          {!err && rows !== null && rows.length === 0 && (
+            <div className="col center" style={{ padding: "40px 16px", textAlign: "center", gap: 8, color: "var(--fg-2)" }}>
+              <Icon name="clock" size={22} />
+              <div className="t-body-sm">No saved versions yet.</div>
+              <div className="t-caption">Versions are captured each time you save or publish.</div>
+            </div>
+          )}
+          {rows?.map((v) => {
+            const isLatest = v.version_no === latest;
+            const isOpen = expanded === v.version_no;
+            return (
+              <div key={v.id || v.version_no} className="card" style={{ padding: "10px 12px" }}>
+                <div className="row spread" style={{ alignItems: "flex-start", gap: 8 }}>
+                  <div className="col" style={{ gap: 3, minWidth: 0 }}>
+                    <div className="row gap2" style={{ alignItems: "center" }}>
+                      <span className="mono-sm" style={{ fontWeight: 600 }}>v{v.version_no}</span>
+                      {isLatest && <span className="pill pill-muted" style={{ height: 18 }}>current</span>}
+                      {v.label && <span className="t-body-sm truncate">{v.label}</span>}
+                    </div>
+                    <div className="t-caption fg-2 truncate">
+                      {v.author_email || "unknown"}
+                      {v.created_at ? ` · ${relTime(v.created_at)}` : ""}
+                    </div>
+                  </div>
+                  <div className="row gap1" style={{ flex: "none" }}>
+                    <button className="iconbtn" title="Inspect snapshot" onClick={() => peek(v.version_no)}>
+                      <Icon name={isOpen ? "eyeoff" : "eye"} size={14} />
+                    </button>
+                    {allowRestore && (
+                      <button
+                        className="btn btn-secondary btn-sm"
+                        disabled={isLatest || restoring != null}
+                        title={isLatest ? "This is the current version" : `Restore v${v.version_no}`}
+                        onClick={() => restore(v.version_no)}
+                      >
+                        <Icon name="rotate" size={13} />
+                        {restoring === v.version_no ? "…" : "Restore"}
+                      </button>
+                    )}
+                  </div>
+                </div>
+                {isOpen && (
+                  <pre
+                    className="mono no-scrollbar"
+                    style={{ margin: "8px 0 0", padding: 10, background: "var(--bg-0)", border: "1px solid var(--line)", borderRadius: "var(--r-sm)", fontSize: 11, lineHeight: "16px", maxHeight: 220, overflow: "auto", color: "var(--fg-1)", whiteSpace: "pre-wrap", overflowWrap: "anywhere" }}
+                  >
+                    {snapshots[v.version_no] ?? "Loading…"}
+                  </pre>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </Drawer>
+    </>
+  );
+}
diff --git a/apps/web/lib/api.ts b/apps/web/lib/api.ts
new file mode 100644
index 0000000..bd58365
--- /dev/null
+++ b/apps/web/lib/api.ts
@@ -0,0 +1,726 @@
+/* Forge API client. Calls are proxied through Next (/api/forge/* -> backend) so the
+   app and API share an origin in dev (see next.config.mjs). */
+
+const BASE = "/api/forge";
+const DIRECT_API = (process.env.NEXT_PUBLIC_FORGE_API_URL || "").replace(/\/$/, "");
+
+function isLocalWebHost(hostname: string) {
+  return hostname === "localhost" || hostname === "127.0.0.1" || hostname === "::1";
+}
+
+function sseBase() {
+  if (DIRECT_API) return DIRECT_API;
+  if (typeof window !== "undefined" && isLocalWebHost(window.location.hostname)) {
+    return "http://127.0.0.1:8000";
+  }
+  return BASE;
+}
+
+function sseUrl(path: string) {
+  return `${sseBase()}${path}`;
+}
+
+export interface Project {
+  id: string;
+  name: string;
+  slug: string;
+  description?: string | null;
+  status: string;
+  config?: Record<string, unknown>;
+}
+
+export interface Workflow {
+  id: string;
+  project_id: string;
+  name: string;
+  description?: string | null;
+  status: string;
+  active_version: number;
+  executable: Record<string, any>;
+  canvas: Record<string, any>;
+}
+
+export interface ValidateResult {
+  valid: boolean;
+  errors: { pointer: string; message: string; node_id?: string }[];
+}
+
+/** Model catalog served from the backend (GET /v1/models) - the single source of truth for
+ *  every model picker, so the frontend hardcodes no model lists. See forge/model_catalog.py. */
+export interface ModelInfo {
+  id: string;
+  name: string;
+  provider: string;
+  ctx: string;
+  tools: boolean;
+  vision: boolean;
+}
+export interface EmbeddingModelInfo {
+  id: string;
+  name: string;
+  provider: string;
+  dim: number;
+  billed: boolean;
+  default: boolean;
+}
+export interface RerankerModelInfo {
+  id: string;
+  name: string;
+  note: string;
+  default: boolean;
+}
+export interface ModelCatalog {
+  chat: ModelInfo[];
+  embedding: EmbeddingModelInfo[];
+  reranker: RerankerModelInfo[];
+}
+
+export interface Tool {
+  id: string;
+  project_id: string;
+  name: string;
+  kind: string;
+  enabled: boolean;
+  auth_provider_id?: string | null;
+  last_tested?: string | null;
+  config: Record<string, any>;
+}
+
+export interface ToolSet {
+  id: string;
+  project_id: string;
+  name: string;
+  slug: string;
+  description: string;
+  icon?: string | null;
+  is_default: boolean;
+  exposed: boolean;
+  tool_ids: string[];
+}
+
+export interface McpToken {
+  id: string;
+  name: string;
+  prefix: string;
+  project_id?: string | null;
+  status: string;
+  created_at?: string | null;
+  last_used_at?: string | null;
+  expires_at?: string | null;
+  token?: string | null;
+}
+
+export interface ComponentT {
+  id: string;
+  name: string;
+  title?: string | null;
+  description: string;
+  props_schema: Record<string, any>;
+  html: string;
+  css: string;
+  actions: Record<string, any>[];
+  sample_props: Record<string, any>;
+  kind: string;
+  enabled: boolean;
+  version: number;
+}
+
+export interface RedirectInfo {
+  followed: boolean;
+  status?: number;
+  final_status?: number;
+  requested_url?: string;
+  final_url?: string;
+  location?: string | null;
+  chain?: string[];
+  note?: string;
+}
+
+export interface ToolTestResult {
+  ok: boolean;
+  error?: string;
+  status?: number;
+  latency_ms?: number;
+  raw?: any;
+  projected?: any;
+  raw_tokens?: number;
+  projected_tokens?: number;
+  final_url?: string;
+  redirect?: RedirectInfo | null;
+}
+
+export interface AuthProviderT {
+  id: string;
+  project_id: string;
+  name: string;
+  kind: string;
+  credentials_ref?: string | null;
+  config: Record<string, any>;
+}
+
+/** A per-user ("external") credential the current user connects themselves. Minimal, connector-safe
+ *  shape from GET /v1/projects/{id}/connections (no provider config / secret refs). */
+export interface MyConnection {
+  id: string;
+  name: string;
+  kind: string;
+  connected: boolean;
+}
+
+export interface Agent {
+  id: string;
+  project_id: string;
+  name: string;
+  config: Record<string, any>;
+  created_by?: string | null;
+  created_by_email?: string | null;
+}
+
+export interface KbSource { id: string; project_id: string; kind: string; name: string; folder?: string; uri?: string | null; status: string; chunks: number; embedding_model?: string | null; chunking_strategy?: string | null; chunk_size?: number | null; chunk_overlap?: number | null; }
+export interface RechunkSettings { chunking_strategy?: string; chunk_size?: number; chunk_overlap?: number; }
+export interface QaPair { id: string; question: string; answer: string; kind: string; tags: string[]; upvotes: number; }
+export interface SearchHit { text: string; score: number; source_id?: string; }
+// Chunk-map visualizer (POST /knowledge/map): a 2-D (PCA) projection of the stored chunk vectors.
+export interface ChunkPoint { id: string; x: number; y: number; source_id?: string | null; chunk_idx?: number | null; parent_id?: string | null; preview: string; retrieved?: number; }
+export interface ChunkMapResult { points: ChunkPoint[]; sources: { id: string; name: string }[]; query_point: [number, number] | null; query: string | null; total: number; truncated: boolean; }
+export interface ChunkDetail { id: string; text: string; source_id?: string | null; chunk_idx?: number | null; parent_id?: string | null; }
+export interface Trace { id: string; run_id: string; workflow_id?: string | null; name: string; status: string; started_at?: string | null; ended_at?: string | null; latency_ms: number; total_tokens: number; total_cost_usd: number; }
+export interface Span { id: string; parent_span_id?: string | null; name: string; kind: string; latency_ms: number; input?: any; output?: any; model?: string | null; input_tokens: number; output_tokens: number; cost_usd: number; error?: string | null; }
+export interface Conversation { thread_id: string; actor: string; source: string; end_user_id?: string | null; workflow_id?: string | null; turns: number; total_tokens: number; total_cost_usd: number; started_at?: string | null; last_activity?: string | null; status: string; preview: string; }
+export interface Turn { trace_id: string; run_id: string; source: string; user_message?: string | null; ai_response?: string | null; status: string; error?: string | null; latency_ms: number; total_tokens: number; total_cost_usd: number; started_at?: string | null; }
+export interface ConversationDetail { conversation: Conversation; turns: Turn[]; }
+export interface Facets { actors: string[]; sources: string[]; }
+export interface Secret { id: string; name: string; kind: string; version: number; }
+
+export interface StatRollup { runs: number; tokens: number; cost_usd: number; avg_latency_ms: number; errors?: number; error_rate?: number; }
+export interface ReportRow extends StatRollup { label: string; kind: "workflow" | "assistant" | "other"; }
+
+/* ---- analytics dashboard (time-series + breakdowns over a date range) ---- */
+export interface TimeBucket { date: string; runs: number; tokens: number; cost_usd: number; avg_latency_ms: number; errors: number; success: number; }
+export interface SourceRollup extends StatRollup { source: string; }
+export interface ToolStat { name: string; calls: number; avg_latency_ms: number; errors: number; cost_usd: number; tokens: number; }
+export interface ModelStat { model: string; calls: number; tokens: number; cost_usd: number; avg_latency_ms: number; }
+export interface LatencyBucket { label: string; count: number; }
+export interface AnalyticsRange { days: number; since: string; until: string; bucket: string; }
+export interface AnalyticsRecentRun { id: string; workflow: string; project: string; status: string; tokens: number; latency_ms: number; cost_usd: number; started_at: string | null; }
+export interface Analytics {
+  range: AnalyticsRange;
+  totals: StatRollup;
+  prev_totals: StatRollup;
+  timeseries: TimeBucket[];
+  by_source: SourceRollup[];
+  by_workflow: ReportRow[];
+  tools: ToolStat[];
+  models: ModelStat[];
+  latency_histogram: LatencyBucket[];
+  recent: AnalyticsRecentRun[];
+}
+export interface ProjectStats {
+  totals: StatRollup;
+  last_7d: StatRollup;
+  assistant: StatRollup & { turns: number };
+  reports: ReportRow[];
+}
+
+// Sidebar badge counts (keys match countKey in data.ts PROJECT_NAV). One cheap call
+// replaces six full-list fetches that were only ever read for their `.length`.
+export interface ProjectCounts {
+  workflows: number; agents: number; tools: number; components: number; knowledge: number; auth: number; handoffs: number;
+}
+
+export interface DashboardStats {
+  runs_7d: number;
+  total_runs: number;
+  success_rate: number;
+  avg_latency_ms: number;
+  spend_7d: number;
+  recent: { id: string; workflow: string; project: string; status: string; tokens: number; latency_ms: number; cost_usd: number; started_at: string | null }[];
+  projects: Record<string, { workflows: number; tools: number; runs_7d: number }>;
+  reports: (StatRollup & { project_id: string; project: string; assistant_cost_usd: number; assistant_turns: number })[];
+  totals: StatRollup;
+}
+
+/* ---- import / export (portable single-type bundles) ---- */
+export type PortableType = "tool" | "workflow" | "component" | "agent";
+const PORTABLE_PLURAL: Record<PortableType, string> = {
+  tool: "tools", workflow: "workflows", component: "components", agent: "agents",
+};
+export interface ExportBundle {
+  format?: string;
+  type: string;
+  exported_at?: string;
+  source?: { project_id?: string; project_name?: string | null };
+  items: Record<string, any>[];
+}
+export interface ImportReportItem {
+  id?: string;
+  name?: string;
+  original_name?: string;
+  renamed?: boolean;
+  skipped?: boolean;
+}
+export interface ImportReport {
+  type: string;
+  imported: number;
+  skipped: number;
+  items: ImportReportItem[];
+  warnings: string[];
+  toolsets_imported?: number;
+}
+
+export interface NodeType {
+  type: string;
+  category: string;
+  label: string;
+  description: string;
+  schema_id: string;
+  allows_cycle: boolean;
+  input_ports: { id: string; io_type: string; direction: string }[];
+  output_ports: { id: string; io_type: string; direction: string }[];
+}
+
+/* ---- auth token storage (JWT). Sent as a Bearer header on every request. ---- */
+const TOKEN_KEY = "forge_access_token";
+const REFRESH_KEY = "forge_refresh_token";
+
+export function getToken(): string | null {
+  return typeof window !== "undefined" ? window.localStorage.getItem(TOKEN_KEY) : null;
+}
+export function setTokens(access: string, refresh?: string) {
+  if (typeof window === "undefined") return;
+  window.localStorage.setItem(TOKEN_KEY, access);
+  if (refresh) window.localStorage.setItem(REFRESH_KEY, refresh);
+}
+export function clearTokens() {
+  if (typeof window === "undefined") return;
+  window.localStorage.removeItem(TOKEN_KEY);
+  window.localStorage.removeItem(REFRESH_KEY);
+}
+export function authHeader(): Record<string, string> {
+  const t = getToken();
+  return t ? { Authorization: `Bearer ${t}` } : {};
+}
+export const UNAUTHORIZED_EVENT = "forge:unauthorized";
+
+function on401() {
+  if (typeof window !== "undefined") {
+    clearTokens();
+    window.dispatchEvent(new CustomEvent(UNAUTHORIZED_EVENT));
+  }
+}
+
+// In-flight GET de-duplication: identical GET requests issued while one is still pending
+// share a single promise (and thus one network round-trip). This collapses React
+// StrictMode's double-invoked effects in dev AND any accidental concurrent duplicate
+// fetches (e.g. sidebar + overview both asking for counts). There is NO time-based cache -
+// the entry is dropped the moment the request settles, so data is never served stale.
+const _inflight = new Map<string, Promise<any>>();
+
+async function json<T>(path: string, init?: RequestInit): Promise<T> {
+  const method = (init?.method || "GET").toUpperCase();
+  const key = method === "GET" ? path : null;
+  if (key && _inflight.has(key)) return _inflight.get(key) as Promise<T>;
+  const p = (async () => {
+    const res = await fetch(`${BASE}${path}`, {
+      headers: { "Content-Type": "application/json", ...authHeader(), ...(init?.headers || {}) },
+      ...init,
+    });
+    if (res.status === 401) on401();
+    if (!res.ok) throw new Error(`${res.status} ${res.statusText} on ${path}`);
+    return res.json() as Promise<T>;
+  })();
+  if (key) {
+    _inflight.set(key, p);
+    const done = () => _inflight.delete(key);
+    p.then(done, done); // clear on settle (both fulfil + reject); never itself rejects
+  }
+  return p;
+}
+
+/** Fired after any create/delete of a counted resource so the project sidebar can
+ *  refresh its badge counts without a page reload. */
+export const COUNTS_CHANGED_EVENT = "forge:counts-changed";
+
+function notifyCounts<T>(p: Promise<T>): Promise<T> {
+  return p.then((v) => {
+    if (typeof window !== "undefined") window.dispatchEvent(new CustomEvent(COUNTS_CHANGED_EVENT));
+    return v;
+  });
+}
+
+export const api = {
+  listProjects: () => json<Project[]>("/v1/projects"),
+  getProject: (id: string) => json<Project>(`/v1/projects/${id}`),
+  projectCounts: (pid: string) => json<ProjectCounts>(`/v1/projects/${pid}/counts`),
+  createProject: (body: { name: string; slug?: string; description?: string; config?: Record<string, unknown> }) =>
+    json<Project>("/v1/projects", { method: "POST", body: JSON.stringify(body) }),
+  listWorkflows: (pid: string) => json<Workflow[]>(`/v1/projects/${pid}/workflows`),
+  getWorkflow: (pid: string, wid: string) => json<Workflow>(`/v1/projects/${pid}/workflows/${wid}`),
+  validateExecutable: (pid: string, executable: Record<string, unknown>) =>
+    json<ValidateResult>(`/v1/projects/${pid}/workflows/validate`, {
+      method: "POST",
+      body: JSON.stringify({ executable }),
+    }),
+  createRun: (pid: string, wid: string, input: Record<string, unknown>, threadId?: string, endUser?: Record<string, unknown> | null) =>
+    json<{ id: string; status: string; thread_id: string }>(
+      `/v1/projects/${pid}/workflows/${wid}/runs`,
+      { method: "POST", body: JSON.stringify({ input, ...(threadId ? { thread_id: threadId } : {}), ...(endUser ? { end_user: endUser } : {}) }) },
+    ),
+  resumeRun: (pid: string, wid: string, rid: string, value: unknown) =>
+    json<{ status?: string; messages?: any[]; interrupted?: boolean; error?: string }>(
+      `/v1/projects/${pid}/workflows/${wid}/runs/${rid}/resume`,
+      { method: "POST", body: JSON.stringify({ value }) },
+    ),
+  createWorkflow: (pid: string, body: { name: string; description?: string; executable?: Record<string, unknown>; canvas?: Record<string, unknown> }) =>
+    notifyCounts(json<Workflow>(`/v1/projects/${pid}/workflows`, { method: "POST", body: JSON.stringify(body) })),
+  updateWorkflow: (pid: string, wid: string, body: { name?: string; description?: string }) =>
+    json<Workflow>(`/v1/projects/${pid}/workflows/${wid}`, { method: "PATCH", body: JSON.stringify(body) }),
+  saveCanvas: (pid: string, wid: string, canvas: Record<string, unknown>, executable: Record<string, unknown>) =>
+    json<ValidateResult>(`/v1/projects/${pid}/workflows/${wid}/canvas`, { method: "PUT", body: JSON.stringify({ canvas, executable }) }),
+  publishWorkflow: (pid: string, wid: string) =>
+    json<Workflow>(`/v1/projects/${pid}/workflows/${wid}/publish`, { method: "POST" }),
+  deleteWorkflow: (pid: string, wid: string) =>
+    notifyCounts(fetch(`${BASE}/v1/projects/${pid}/workflows/${wid}`, { method: "DELETE", headers: authHeader() })),
+  dashboardStats: () => json<DashboardStats>("/v1/stats/dashboard"),
+  projectStats: (pid: string) => json<ProjectStats>(`/v1/stats/projects/${pid}`),
+  projectAnalytics: (pid: string, days = 30) => json<Analytics>(`/v1/stats/projects/${pid}/analytics?days=${days}`),
+  listAgents: (pid: string) => json<Agent[]>(`/v1/projects/${pid}/agents`),
+  getAgent: (pid: string, aid: string) => json<Agent>(`/v1/projects/${pid}/agents/${aid}`),
+  createAgent: (pid: string, body: { name: string; config: Record<string, unknown> }) =>
+    notifyCounts(json<Agent>(`/v1/projects/${pid}/agents`, { method: "POST", body: JSON.stringify(body) })),
+  updateAgent: (pid: string, aid: string, body: { name?: string; config?: Record<string, unknown> }) =>
+    json<Agent>(`/v1/projects/${pid}/agents/${aid}`, { method: "PATCH", body: JSON.stringify(body) }),
+  deleteAgent: (pid: string, aid: string) =>
+    notifyCounts(fetch(`${BASE}/v1/projects/${pid}/agents/${aid}`, { method: "DELETE", headers: authHeader() })),
+  listTools: (pid: string) => json<Tool[]>(`/v1/projects/${pid}/tools`),
+  getTool: (pid: string, tid: string) => json<Tool>(`/v1/projects/${pid}/tools/${tid}`),
+  createTool: (pid: string, body: { name: string; kind: string; config: Record<string, unknown>; auth_provider_id?: string }) =>
+    notifyCounts(json<Tool>(`/v1/projects/${pid}/tools`, { method: "POST", body: JSON.stringify(body) })),
+  updateTool: (pid: string, tid: string, body: { name?: string; config?: Record<string, unknown>; auth_provider_id?: string | null; enabled?: boolean }) =>
+    json<Tool>(`/v1/projects/${pid}/tools/${tid}`, { method: "PATCH", body: JSON.stringify(body) }),
+  deleteTool: (pid: string, tid: string) =>
+    notifyCounts(fetch(`${BASE}/v1/projects/${pid}/tools/${tid}`, { method: "DELETE", headers: authHeader() })),
+  testTool: (pid: string, tid: string, args: Record<string, unknown>, context?: Record<string, unknown>) =>
+    json<ToolTestResult>(`/v1/projects/${pid}/tools/${tid}/test`, {
+      method: "POST",
+      body: JSON.stringify({ args, context }),
+    }),
+  // tool sets (describable groups of tools; organize the Tools screen + publish over MCP)
+  listToolSets: (pid: string) => json<ToolSet[]>(`/v1/projects/${pid}/tool-sets`),
+  createToolSet: (pid: string, body: { name: string; description?: string; icon?: string | null; is_default?: boolean; exposed?: boolean; tool_ids?: string[] }) =>
+    json<ToolSet>(`/v1/projects/${pid}/tool-sets`, { method: "POST", body: JSON.stringify(body) }),
+  updateToolSet: (pid: string, sid: string, body: Partial<{ name: string; description: string; icon: string | null; is_default: boolean; exposed: boolean; tool_ids: string[] }>) =>
+    json<ToolSet>(`/v1/projects/${pid}/tool-sets/${sid}`, { method: "PATCH", body: JSON.stringify(body) }),
+  deleteToolSet: (pid: string, sid: string) =>
+    fetch(`${BASE}/v1/projects/${pid}/tool-sets/${sid}`, { method: "DELETE", headers: authHeader() }),
+  addToolToSet: (pid: string, sid: string, tid: string) =>
+    fetch(`${BASE}/v1/projects/${pid}/tool-sets/${sid}/tools/${tid}`, { method: "POST", headers: authHeader() }),
+  removeToolFromSet: (pid: string, sid: string, tid: string) =>
+    fetch(`${BASE}/v1/projects/${pid}/tool-sets/${sid}/tools/${tid}`, { method: "DELETE", headers: authHeader() }),
+  // MCP personal access tokens (per-user MCP auth; the plaintext is returned once on create)
+  listMcpTokens: (pid: string) => json<McpToken[]>(`/v1/projects/${pid}/mcp-tokens`),
+  createMcpToken: (pid: string, body: { name?: string; ttl_days?: number }) =>
+    json<McpToken>(`/v1/projects/${pid}/mcp-tokens`, { method: "POST", body: JSON.stringify(body) }),
+  revokeMcpToken: (pid: string, tid: string) =>
+    fetch(`${BASE}/v1/projects/${pid}/mcp-tokens/${tid}`, { method: "DELETE", headers: authHeader() }),
+  // components (Feature 2 - generative UI widgets)
+  listComponents: (pid: string) => json<ComponentT[]>(`/v1/projects/${pid}/components`),
+  getComponent: (pid: string, cid: string) => json<ComponentT>(`/v1/projects/${pid}/components/${cid}`),
+  createComponent: (pid: string, body: Record<string, unknown> & { name: string }) =>
+    notifyCounts(json<ComponentT>(`/v1/projects/${pid}/components`, { method: "POST", body: JSON.stringify(body) })),
+  updateComponent: (pid: string, cid: string, body: Record<string, unknown>) =>
+    json<ComponentT>(`/v1/projects/${pid}/components/${cid}`, { method: "PATCH", body: JSON.stringify(body) }),
+  deleteComponent: (pid: string, cid: string) =>
+    notifyCounts(fetch(`${BASE}/v1/projects/${pid}/components/${cid}`, { method: "DELETE", headers: authHeader() })),
+  // import / export - serialize the selected rows of one type into a downloadable bundle,
+  // and re-create a bundle's items in a target project (new ids, auto-renamed on collision).
+  exportBundle: (pid: string, type: PortableType, ids: string[]) =>
+    json<ExportBundle>(`/v1/projects/${pid}/${PORTABLE_PLURAL[type]}/export`, { method: "POST", body: JSON.stringify({ ids }) }),
+  importBundle: async (pid: string, type: PortableType, bundle: unknown): Promise<ImportReport> => {
+    // Direct fetch (not the shared `json` helper) so the backend's error `detail` - e.g. a
+    // wrong-type file or validation message - surfaces to the user instead of a bare status.
+    const res = await fetch(`${BASE}/v1/projects/${pid}/${PORTABLE_PLURAL[type]}/import`, {
+      method: "POST", headers: { "Content-Type": "application/json", ...authHeader() }, body: JSON.stringify(bundle),
+    });
+    if (res.status === 401) on401();
+    if (!res.ok) {
+      const detail = await res.json().then((d) => d?.detail).catch(() => null);
+      throw new Error(typeof detail === "string" ? detail : `${res.status} ${res.statusText}`);
+    }
+    if (typeof window !== "undefined") window.dispatchEvent(new CustomEvent(COUNTS_CHANGED_EVENT));
+    return res.json() as Promise<ImportReport>;
+  },
+  listAuthProviders: (pid: string) => json<AuthProviderT[]>(`/v1/projects/${pid}/auth-providers`),
+  createAuthProvider: (pid: string, body: { name: string; kind: string; config: Record<string, unknown>; credentials_ref?: string }) =>
+    notifyCounts(json<AuthProviderT>(`/v1/projects/${pid}/auth-providers`, { method: "POST", body: JSON.stringify(body) })),
+  updateAuthProvider: (pid: string, aid: string, body: { name?: string; kind?: string; config?: Record<string, unknown>; credentials_ref?: string }) =>
+    json<AuthProviderT>(`/v1/projects/${pid}/auth-providers/${aid}`, { method: "PATCH", body: JSON.stringify(body) }),
+  testAuthProvider: (pid: string, aid: string, context?: Record<string, unknown>) =>
+    json<any>(`/v1/projects/${pid}/auth-providers/${aid}/test`, { method: "POST", body: JSON.stringify({ context }) }),
+  listMcpClients: (pid: string) => json<McpClientT[]>(`/v1/projects/${pid}/mcp-clients`),
+  createMcpClient: (pid: string, body: { name: string; transport?: string; url?: string; command?: string; args?: any; headers_ref?: string }) =>
+    json<McpClientT>(`/v1/projects/${pid}/mcp-clients`, { method: "POST", body: JSON.stringify(body) }),
+  updateMcpClient: (pid: string, cid: string, body: Partial<{ name: string; enabled: boolean; disabled_tools: string[]; url: string; headers_ref: string }>) =>
+    json<McpClientT>(`/v1/projects/${pid}/mcp-clients/${cid}`, { method: "PATCH", body: JSON.stringify(body) }),
+  deleteMcpClient: (pid: string, cid: string) =>
+    json<{ ok: boolean }>(`/v1/projects/${pid}/mcp-clients/${cid}`, { method: "DELETE" }),
+  discoverMcpTools: (pid: string, cid: string) =>
+    json<{ ok: boolean; tools?: { name: string; description?: string }[]; error?: string }>(`/v1/projects/${pid}/mcp-clients/${cid}/tools`),
+  oauthStart: (pid: string, aid: string) =>
+    json<{ authorize_url: string }>(`/v1/projects/${pid}/auth-providers/${aid}/oauth/start`, { method: "POST" }),
+  oauthStatus: (pid: string, aid: string) =>
+    json<{ connected: boolean; expires_at?: number | null; scope?: string | null; has_refresh?: boolean }>(`/v1/projects/${pid}/auth-providers/${aid}/oauth/status`),
+  deleteAuthProvider: (pid: string, aid: string) =>
+    notifyCounts(fetch(`${BASE}/v1/projects/${pid}/auth-providers/${aid}`, { method: "DELETE", headers: authHeader() })),
+  // Per-user ("external") auth via the connector-safe /connections router (NOT the auth-providers
+  // admin surface). The current user's own downstream credential for a per-user provider, keyed
+  // server-side by their user id (the same id the MCP PAT resolves to), so a tool acts as them
+  // without a shared secret. Used by owners (Auth screen) and connectors (their token page) alike.
+  listMyConnections: (pid: string) => json<MyConnection[]>(`/v1/projects/${pid}/connections`),
+  getMyConnection: (pid: string, aid: string) =>
+    json<{ connected: boolean; expires_at?: number | null }>(`/v1/projects/${pid}/connections/${aid}`),
+  setMyConnection: (pid: string, aid: string, access_token: string) =>
+    fetch(`${BASE}/v1/projects/${pid}/connections/${aid}`, {
+      method: "PUT", headers: { "Content-Type": "application/json", ...authHeader() }, body: JSON.stringify({ access_token }),
+    }),
+  clearMyConnection: (pid: string, aid: string) =>
+    fetch(`${BASE}/v1/projects/${pid}/connections/${aid}`, { method: "DELETE", headers: authHeader() }),
+  // knowledge
+  listSources: (pid: string) => json<KbSource[]>(`/v1/projects/${pid}/knowledge/sources`),
+  listFolders: (pid: string) => json<string[]>(`/v1/projects/${pid}/knowledge/folders`),
+  addSource: (pid: string, body: { kind: string; name: string; folder?: string; uri?: string; text?: string; chunking_strategy?: string }) =>
+    notifyCounts(json<KbSource>(`/v1/projects/${pid}/knowledge/sources`, { method: "POST", body: JSON.stringify(body) })),
+  uploadSource: async (pid: string, file: globalThis.File, folder?: string, chunkingStrategy?: string) => {
+    const fd = new FormData();
+    fd.append("file", file);
+    if (folder) fd.append("folder", folder);
+    if (chunkingStrategy) fd.append("chunking_strategy", chunkingStrategy);
+    const res = await fetch(`${BASE}/v1/projects/${pid}/knowledge/sources/upload`, { method: "POST", body: fd, headers: authHeader() });
+    if (!res.ok) {
+      const detail = await res.json().then((d) => d?.detail).catch(() => null);
+      throw new Error(detail || `${res.status} ${res.statusText} on upload`);
+    }
+    if (typeof window !== "undefined") window.dispatchEvent(new CustomEvent(COUNTS_CHANGED_EVENT));
+    return res.json() as Promise<KbSource>;
+  },
+  moveSource: (pid: string, sid: string, folder: string) =>
+    json<KbSource>(`/v1/projects/${pid}/knowledge/sources/${sid}`, { method: "PATCH", body: JSON.stringify({ folder }) }),
+  reingestSource: (pid: string, sid: string, settings?: RechunkSettings) =>
+    notifyCounts(json<{ id: string; status: string; chunks: number }>(`/v1/projects/${pid}/knowledge/sources/${sid}/reingest`, { method: "POST", body: JSON.stringify(settings || {}) })),
+  rechunkSources: (pid: string, source_ids: string[], settings: RechunkSettings) =>
+    notifyCounts(json<{ id: string; status: string; chunks: number }[]>(`/v1/projects/${pid}/knowledge/sources/rechunk`, { method: "POST", body: JSON.stringify({ source_ids, ...settings }) })),
+  embeddingHealth: (pid: string) =>
+    json<{ current_model: string; current_dim: number; sources: number; needs_reembed: boolean; mismatched: { id: string; name: string; embedded_with: string; dim: number }[] }>(`/v1/projects/${pid}/knowledge/health`),
+  deleteSource: (pid: string, sid: string) => notifyCounts(fetch(`${BASE}/v1/projects/${pid}/knowledge/sources/${sid}`, { method: "DELETE", headers: authHeader() })),
+  searchKnowledge: (pid: string, query: string, top_k = 5, folders?: string[], hybrid = false, rerank = false) =>
+    json<SearchHit[]>(`/v1/projects/${pid}/knowledge/search`, { method: "POST", body: JSON.stringify({ query, top_k, hybrid, rerank, ...(folders?.length ? { folders } : {}) }) }),
+  chunkMap: (pid: string, body: { query?: string; folders?: string[]; source_ids?: string[]; limit?: number; hybrid?: boolean; rerank?: boolean; top_k?: number }) =>
+    json<ChunkMapResult>(`/v1/projects/${pid}/knowledge/map`, { method: "POST", body: JSON.stringify(body) }),
+  // Full text of one chunk, fetched on demand for the chunk-map detail panel (the map response
+  // itself carries only a short preview, so the payload stays lean at large point budgets).
+  chunkDetail: (pid: string, chunkId: string) =>
+    json<ChunkDetail>(`/v1/projects/${pid}/knowledge/chunk?chunk_id=${encodeURIComponent(chunkId)}`),
+  dedupeChunks: (pid: string) =>
+    json<{ removed: number; groups: number; sources_affected: number; remaining: number }>(`/v1/projects/${pid}/knowledge/dedupe`, { method: "POST" }),
+  listQa: (pid: string) => json<QaPair[]>(`/v1/projects/${pid}/qa-pairs`),
+  listQaKinds: (pid: string) => json<string[]>(`/v1/projects/${pid}/qa-pairs/kinds`),
+  addQa: (pid: string, body: { question: string; answer: string; kind?: string; tags?: string[] }) =>
+    json<QaPair>(`/v1/projects/${pid}/qa-pairs`, { method: "POST", body: JSON.stringify(body) }),
+  updateQa: (pid: string, qid: string, body: { question?: string; answer?: string; kind?: string; tags?: string[] }) =>
+    json<QaPair>(`/v1/projects/${pid}/qa-pairs/${qid}`, { method: "PATCH", body: JSON.stringify(body) }),
+  deleteQa: (pid: string, qid: string) => fetch(`${BASE}/v1/projects/${pid}/qa-pairs/${qid}`, { method: "DELETE", headers: authHeader() }),
+  // traces + conversations (Traces view)
+  listTraces: (pid: string) => json<Trace[]>(`/v1/projects/${pid}/traces`),
+  getTrace: (pid: string, trid: string) => json<{ trace: Trace; spans: Span[] }>(`/v1/projects/${pid}/traces/${trid}`),
+  listConversations: (pid: string, opts?: { actor?: string; source?: string; status?: string; search?: string; limit?: number; offset?: number }) => {
+    const q = new URLSearchParams();
+    if (opts?.actor) q.set("actor", opts.actor);
+    if (opts?.source) q.set("source", opts.source);
+    if (opts?.status) q.set("status", opts.status);
+    if (opts?.search) q.set("search", opts.search);
+    if (opts?.limit != null) q.set("limit", String(opts.limit));
+    if (opts?.offset != null) q.set("offset", String(opts.offset));
+    const qs = q.toString();
+    return json<Conversation[]>(`/v1/projects/${pid}/conversations${qs ? `?${qs}` : ""}`);
+  },
+  // Re-run a past run with the same input (fresh thread). Used by the Traces "re-run" button.
+  rerunRun: (pid: string, wid: string, rid: string) =>
+    json<{ id: string; status: string; thread_id: string }>(
+      `/v1/projects/${pid}/workflows/${wid}/runs/${rid}/rerun`, { method: "POST" },
+    ),
+  getConversation: (pid: string, threadId: string) =>
+    json<ConversationDetail>(`/v1/projects/${pid}/conversations/${encodeURIComponent(threadId)}`),
+  conversationFacets: (pid: string) => json<Facets>(`/v1/projects/${pid}/conversations/facets`),
+  purgeConversations: (pid: string, olderThanDays: number) =>
+    json<{ removed: number }>(`/v1/projects/${pid}/conversations/purge?older_than_days=${olderThanDays}`, { method: "POST" }),
+  // secrets
+  listSecrets: (pid: string) => json<Secret[]>(`/v1/projects/${pid}/secrets`),
+  createSecret: (pid: string, body: { name: string; value: unknown; kind?: string }) =>
+    json<Secret>(`/v1/projects/${pid}/secrets`, { method: "POST", body: JSON.stringify(body) }),
+  secretUsage: (pid: string, name: string) =>
+    json<{ count: number; references: { type: string; label: string }[] }>(`/v1/projects/${pid}/secrets/${encodeURIComponent(name)}/usage`),
+  deleteSecret: (pid: string, name: string, force = false) =>
+    fetch(`${BASE}/v1/projects/${pid}/secrets/${encodeURIComponent(name)}${force ? "?force=true" : ""}`, { method: "DELETE", headers: authHeader() }),
+  // project
+  updateProject: (pid: string, body: { name?: string; description?: string; config?: Record<string, unknown> }) =>
+    json<Project>(`/v1/projects/${pid}`, { method: "PATCH", body: JSON.stringify(body) }),
+  deleteProject: async (pid: string) => {
+    const res = await fetch(`${BASE}/v1/projects/${pid}`, { method: "DELETE", headers: authHeader() });
+    if (!res.ok) throw new Error(`${res.status} ${res.statusText} on /v1/projects/${pid}`);
+  },
+  listNodeTypes: () => json<NodeType[]>("/v1/node-types"),
+  runStreamUrl: (pid: string, wid: string, runId: string) =>
+    sseUrl(`/v1/projects/${pid}/workflows/${wid}/runs/${runId}/stream`),
+  assistantStreamUrl: (pid: string) => sseUrl(`/v1/projects/${pid}/assistant/stream`),
+  assistantResumeUrl: (pid: string) => sseUrl(`/v1/projects/${pid}/assistant/resume`),
+  // auth + team
+  register: (email: string, password: string, workspace_name?: string) =>
+    json<AuthResult>("/v1/auth/register", { method: "POST", body: JSON.stringify({ email, password, workspace_name }) }),
+  login: (email: string, password: string) =>
+    json<AuthResult>("/v1/auth/login", { method: "POST", body: JSON.stringify({ email, password }) }),
+  me: () => json<MeResult>("/v1/auth/me"),
+  inviteInfo: (token: string) => json<{ email: string; role: string }>(`/v1/auth/invite-info?token=${encodeURIComponent(token)}`),
+  acceptInvite: (token: string, password: string) =>
+    json<AuthResult>("/v1/auth/accept-invite", { method: "POST", body: JSON.stringify({ token, password }) }),
+  listTeam: () => json<TeamMember[]>("/v1/team/members"),
+  listModels: () => json<ModelCatalog>("/v1/models"),
+  listPricing: () => json<Record<string, { input_per_1m: number; output_per_1m: number }>>("/v1/pricing"),
+  setPricing: (model: string, body: { input_per_1m: number; output_per_1m: number }) =>
+    json<any>(`/v1/pricing/${encodeURIComponent(model)}`, { method: "PUT", body: JSON.stringify(body) }),
+  // version history (workflow | agent | tool | component | auth_provider | kb_source | project)
+  listVersions: (entityType: EntityType, entityId: string) =>
+    json<EntityVersion[]>(`/v1/versions/${entityType}/${entityId}`),
+  getVersion: (entityType: EntityType, entityId: string, versionNo: number) =>
+    json<EntityVersion & { snapshot: Record<string, any> }>(`/v1/versions/${entityType}/${entityId}/${versionNo}`),
+  restoreVersion: (entityType: EntityType, entityId: string, versionNo: number) =>
+    json<{ ok?: boolean; version_no?: number }>(`/v1/versions/${entityType}/${entityId}/restore`, { method: "POST", body: JSON.stringify({ version_no: versionNo }) }),
+  // read-only project-wide knowledge activity (added | changed | removed) for the Knowledge History
+  knowledgeActivity: (projectId: string) =>
+    json<ActivityEntry[]>(`/v1/versions/project/${projectId}/activity`),
+  // full project config snapshots (newest first) so Settings > History can diff by section
+  projectConfigHistory: (projectId: string) =>
+    json<ProjectVersion[]>(`/v1/versions/project/${projectId}/config-history`),
+  inviteMember: (body: { email: string; role?: string; password?: string }) =>
+    json<InviteResult>("/v1/team/members", { method: "POST", body: JSON.stringify(body) }),
+  updateMember: (uid: string, body: { role?: string; status?: string }) =>
+    json<TeamMember>(`/v1/team/members/${uid}`, { method: "PATCH", body: JSON.stringify(body) }),
+  deactivateMember: (uid: string) =>
+    json<{ ok: boolean }>(`/v1/team/members/${uid}`, { method: "DELETE" }),
+  // channels
+  listChannels: (pid: string) => json<Channel[]>(`/v1/projects/${pid}/channels`),
+  createChannel: (pid: string, body: { type: string; name: string; workflow_id?: string; config?: Record<string, any> }) =>
+    json<Channel>(`/v1/projects/${pid}/channels`, { method: "POST", body: JSON.stringify(body) }),
+  updateChannel: (pid: string, cid: string, body: { name?: string; workflow_id?: string; config?: Record<string, any>; enabled?: boolean }) =>
+    json<Channel>(`/v1/projects/${pid}/channels/${cid}`, { method: "PATCH", body: JSON.stringify(body) }),
+  deleteChannel: (pid: string, cid: string) =>
+    json<{ ok: boolean }>(`/v1/projects/${pid}/channels/${cid}`, { method: "DELETE" }),
+  // triggers
+  listTriggers: (pid: string) => json<Trigger[]>(`/v1/projects/${pid}/triggers`),
+  // datasets / eval
+  listDatasets: (pid: string) => json<Dataset[]>(`/v1/projects/${pid}/datasets`),
+  createDataset: (pid: string, body: { name: string; workflow_id?: string; score_mode?: string; items?: any[] }) =>
+    json<Dataset>(`/v1/projects/${pid}/datasets`, { method: "POST", body: JSON.stringify(body) }),
+  updateDataset: (pid: string, did: string, body: { name: string; workflow_id?: string; score_mode?: string; items?: any[] }) =>
+    json<Dataset>(`/v1/projects/${pid}/datasets/${did}`, { method: "PATCH", body: JSON.stringify(body) }),
+  runDataset: (pid: string, did: string) =>
+    json<EvalRunResult>(`/v1/projects/${pid}/datasets/${did}/run`, { method: "POST" }),
+  runDatasetStreamUrl: (pid: string, did: string) =>
+    sseUrl(`/v1/projects/${pid}/datasets/${did}/run/stream`),
+  deleteDataset: (pid: string, did: string) =>
+    json<{ ok: boolean }>(`/v1/projects/${pid}/datasets/${did}`, { method: "DELETE" }),
+  // handoff inbox
+  listHandoffs: (pid: string, status = "open") => json<Handoff[]>(`/v1/projects/${pid}/handoffs?status=${status}`),
+  replyHandoff: (pid: string, hid: string, message: string) =>
+    json<{ ok: boolean }>(`/v1/projects/${pid}/handoffs/${hid}/reply`, { method: "POST", body: JSON.stringify({ message }) }),
+  // embed (widget)
+  getEmbed: (pid: string) => json<EmbedSettings>(`/v1/projects/${pid}/embed`),
+  setEmbed: (pid: string, body: { enabled: boolean; allowed_origins: string[]; workflow_id?: string | null }) =>
+    json<EmbedSettings>(`/v1/projects/${pid}/embed`, { method: "PUT", body: JSON.stringify(body) }),
+};
+
+export interface InviteResult extends TeamMember { email_sent: boolean; invite_url?: string; }
+export interface Channel { id: string; type: string; name: string; workflow_id?: string | null; enabled: boolean; config: Record<string, any>; key?: string | null; inbound_url?: string; }
+export interface Trigger { id: string; workflow_id: string; node_id: string; kind: string; enabled: boolean; config: Record<string, any>; webhook_url?: string; last_fired_at?: string | null; }
+export interface Dataset { id: string; name: string; workflow_id?: string | null; score_mode: string; items: any[]; n_items: number; last_pass_rate?: number | null; }
+/** One scored case. `status` is "scored" for a normal pass/fail, else an inconclusive outcome
+ *  ("run_failed" / "unavailable" / "error"). tokens/cost/latency_ms are per-case run metrics
+ *  (absent on old runs). */
+export interface EvalResult {
+  input: string; expected: string; answer: string; passed: boolean; reason?: string | null;
+  status?: string; score?: number | null; tokens?: number; cost?: number; latency_ms?: number;
+}
+export interface EvalSummary { total: number; passed: number; pass_rate: number; inconclusive?: number; tokens?: number; cost_usd?: number; eval_run_id?: string | null; }
+export interface EvalReport { summary: EvalSummary; results: EvalResult[]; }
+/** A dataset run either scores (EvalReport) or fails before scoring (no workflow bound,
+ *  quota exceeded, …) - the backend returns a bare `{error}` for the latter, so callers
+ *  must narrow before reading `summary`/`results`. */
+export type EvalRunResult = EvalReport | { error: string };
+/** SSE frames from the streaming run endpoint (run/stream). */
+export interface EvalStreamStart { total: number; truncated?: boolean; items: { index: number; input: string; expected: string }[]; }
+export interface EvalStreamItem extends EvalResult { index: number; }
+export interface EvalStreamDone { summary: EvalSummary; results: EvalResult[]; }
+export interface Handoff { id: string; run_id: string; workflow_id?: string | null; customer?: string | null; customer_message?: string | null; reason?: string | null; status: string; at?: string | null; }
+export interface EmbedSettings { enabled: boolean; allowed_origins: string[]; workflow_id?: string | null; publishable_key?: string | null; embed_src?: string | null; }
+
+export type EntityType = "workflow" | "agent" | "tool" | "component" | "auth_provider" | "kb_source" | "project";
+export interface EntityVersion { id: string; version_no: number; label?: string | null; author_email?: string | null; created_at?: string | null; }
+// One row of the read-only Knowledge activity feed (a file or Q&A pair added/changed/removed).
+export interface ActivityEntry { id: string; entity_type: "kb_source" | "qa_pair"; entity_id: string; action?: string | null; title: string; author_email?: string | null; created_at?: string | null; }
+// A full project config snapshot (Settings > History diffs consecutive ones per section).
+export interface ProjectVersion { id: string; version_no: number; author_email?: string | null; created_at?: string | null; snapshot: Record<string, any>; }
+
+export interface MeResult { id: string; email: string | null; role: string; tenant_id: string; is_fallback: boolean; }
+export interface AuthResult { access_token: string; refresh_token: string; user: { id: string; email: string; role: string }; }
+export interface TeamMember { id: string; email: string; role: string; status: string; tenant_id: string; }
+export interface McpClientT { id: string; name: string; transport: string; url?: string | null; command?: string | null; args?: any; headers_ref?: string | null; enabled: boolean; disabled_tools?: string[]; }
+
+export interface SSEFrame {
+  event: string;
+  data: any;
+}
+
+/** Open an SSE stream and invoke `onFrame` per event. Supports GET (default) or POST
+ *  (pass init.method/body) - the backend assistant endpoint streams over POST. */
+export async function openSSE(
+  url: string,
+  onFrame: (frame: SSEFrame) => void,
+  init?: RequestInit,
+): Promise<void> {
+  const res = await fetch(url, {
+    ...init,
+    cache: "no-store",
+    headers: { Accept: "text/event-stream", "Cache-Control": "no-cache", ...authHeader(), ...(init?.headers || {}) },
+  });
+  if (!res.ok) throw new Error(`${res.status} ${res.statusText} on ${url}`);
+  if (!res.body) throw new Error("No response body for SSE");
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    buffer += decoder.decode(value, { stream: true });
+    // SSE frames are separated by a blank line - handle both \n\n and \r\n\r\n.
+    const chunks = buffer.split(/\r?\n\r?\n/);
+    buffer = chunks.pop() || "";
+    for (const chunk of chunks) {
+      let event = "message";
+      const dataLines: string[] = [];
+      for (const line of chunk.split(/\r?\n/)) {
+        if (line.startsWith("event:")) event = line.slice(6).trim();
+        else if (line.startsWith("data:")) dataLines.push(line.slice(5).trim());
+      }
+      if (dataLines.length) {
+        const raw = dataLines.join("\n");
+        let data: any = raw;
+        try {
+          data = JSON.parse(raw);
+        } catch {
+          /* keep raw string */
+        }
+        onFrame({ event, data });
+      }
+    }
+  }
+}
diff --git a/apps/web/lib/chat-parts.ts b/apps/web/lib/chat-parts.ts
new file mode 100644
index 0000000..a408141
--- /dev/null
+++ b/apps/web/lib/chat-parts.ts
@@ -0,0 +1,140 @@
+/* Assembles an assistant reply into ordered parts (markdown text + inline UI components).
+
+   The problem this solves: a component is rendered as a side-effect of a tool call, which the
+   agent runs BEFORE it writes its prose (the prose is generated in the final turn, after every
+   tool returns). So if we placed components in frame-arrival order, every widget would jump to
+   the TOP of the reply, ahead of all text - never in the middle, never at the end.
+
+   The fix (how ChatGPT/Claude interleave widgets): the component tool returns a tiny placeholder
+   marker - [[forge:component:<instance_id>]] - and the model copies it into its reply text at the
+   exact spot the widget belongs. Here we split the text on those markers and splice each
+   already-received component instance into its place. The heavy props/markup never enter the
+   token stream (only the ~10-token marker does); the model gets full control over ordering. */
+
+export interface ComponentInstance {
+  component_id: string;
+  instance_id?: string;
+  name?: string;
+  version?: number;
+  props?: Record<string, any>;
+  actions?: Record<string, any>[];
+}
+
+export type Part =
+  | { kind: "text"; text: string }
+  | { kind: "component"; inst: ComponentInstance };
+
+// The literal a component tool's ack tells the model to place. Keep in sync with the backend
+// (tools/components.py COMPONENT_MARKER). Instance ids are uuid4().hex, but we accept any
+// url-safe token so a slightly-mangled id still matches.
+const MARKER_PREFIX = "[[forge:component:";
+const MARKER_RE = /\[\[forge:component:([A-Za-z0-9_-]+)\]\]/g;
+
+/* While streaming, the closing `]]` of a marker may not have arrived yet (e.g. the buffer ends
+   with "…[[forge:comp"). Return the index where such a half-typed marker begins so the caller can
+   hide it until it completes - otherwise it flashes as raw text. -1 when there's no partial tail. */
+function trailingPartialMarkerStart(text: string): number {
+  // 1) the "[[forge:component:" prefix itself is still being typed - longest suffix of `text`
+  //    that equals a non-empty prefix of MARKER_PREFIX.
+  for (let n = Math.min(MARKER_PREFIX.length, text.length); n > 0; n--) {
+    if (text.slice(text.length - n) === MARKER_PREFIX.slice(0, n)) return text.length - n;
+  }
+  // 2) the prefix is complete and the id is streaming, but the closing `]]` hasn't arrived.
+  const m = /\[\[forge:component:[A-Za-z0-9_-]*$/.exec(text);
+  return m ? m.index : -1;
+}
+
+/* Split `raw` on component markers and produce ordered parts, resolving each marker to its
+   component instance. Unknown markers (no matching instance) are dropped from the text. When
+   not streaming, any rendered component the model never referenced with a marker is appended at
+   the end (in arrival order) so a widget is never lost - and never jumps ahead of the prose. */
+function assembleParts(
+  raw: string,
+  instances: Record<string, ComponentInstance>,
+  order: string[],
+  streaming: boolean,
+): Part[] {
+  let text = raw || "";
+  if (streaming) {
+    const cut = trailingPartialMarkerStart(text);
+    if (cut >= 0) text = text.slice(0, cut);
+  }
+  const parts: Part[] = [];
+  const used = new Set<string>();
+  const push = (s: string) => {
+    if (!s) return;
+    const last = parts[parts.length - 1];
+    if (last && last.kind === "text") last.text += s;
+    else parts.push({ kind: "text", text: s });
+  };
+  const re = new RegExp(MARKER_RE.source, "g");
+  let last = 0;
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(text)) !== null) {
+    push(text.slice(last, m.index));
+    const inst = instances[m[1]];
+    // Render each instance at most once (a duplicated marker is ignored); an unknown id is
+    // simply dropped so a stray/hallucinated marker never shows as literal text.
+    if (inst && !used.has(m[1])) {
+      parts.push({ kind: "component", inst });
+      used.add(m[1]);
+    }
+    last = m.index + m[0].length;
+  }
+  push(text.slice(last));
+  if (!streaming) {
+    for (const id of order) {
+      if (!used.has(id) && instances[id]) parts.push({ kind: "component", inst: instances[id] });
+    }
+  }
+  // Drop whitespace-only text parts (e.g. the blank line between two adjacent components) - each
+  // text part renders as its own markdown block, so leading/trailing whitespace is meaningless.
+  return parts.filter((p) => p.kind === "component" || p.text.trim().length > 0);
+}
+
+/* Accumulates a streaming assistant reply: token text plus the component instances the agent
+   rendered (keyed by instance_id). `parts()` produces the ordered render list at any point.
+
+   Shared by every chat surface (Playground, embed widget, workflow test panel) so they stay
+   consistent. */
+export class ReplyAccumulator {
+  text = "";
+  private instances: Record<string, ComponentInstance> = {};
+  private order: string[] = [];
+
+  addText(s: string) {
+    this.text += s;
+  }
+
+  addComponent(inst: ComponentInstance) {
+    const id = String(inst?.instance_id || `c${this.order.length}`);
+    if (!(id in this.instances)) this.order.push(id);
+    this.instances[id] = inst;
+  }
+
+  hasComponents() {
+    return this.order.length > 0;
+  }
+
+  /** Ordered parts for rendering. `streaming` hides a half-arrived marker and withholds any
+      component whose marker hasn't streamed in yet (it appears the moment the marker does, in
+      its proper place). Pass `finalText` to render the reconciled final text instead of the
+      live token buffer. */
+  parts(opts?: { streaming?: boolean; finalText?: string }): Part[] {
+    const text = opts?.finalText ?? this.text;
+    return assembleParts(text, this.instances, this.order, !!opts?.streaming);
+  }
+
+  /** Reconcile the streamed token buffer with the run's authoritative final answer. Prefer the
+      streamed text (it spans every turn, in order, and carries the markers); fall back to - or
+      append - the final answer only when it adds something the stream didn't (a non-LLM node's
+      output, or an error message). */
+  resolveText(finalAnswer?: string): string {
+    const buf = this.text;
+    const fa = (finalAnswer || "").trim();
+    if (!fa) return buf;
+    if (!buf.trim()) return finalAnswer || "";
+    if (buf.includes(fa)) return buf;
+    return `${buf}\n\n${finalAnswer}`;
+  }
+}
diff --git a/apps/web/lib/data.ts b/apps/web/lib/data.ts
new file mode 100644
index 0000000..18a2825
--- /dev/null
+++ b/apps/web/lib/data.ts
@@ -0,0 +1,393 @@
+/* Forge mock data - generic, plausible SaaS content. Ported from the design handoff.
+   Screens not yet wired to the live API render from this; the Dashboard merges live
+   projects from the backend when available (see lib/api.ts). */
+
+export const spark = (n: number, base: number, amp: number): number[] =>
+  Array.from({ length: n }, (_, i) =>
+    Math.max(0, Math.round(base + Math.sin(i * 0.8) * amp + (Math.random() - 0.5) * amp * 0.8)),
+  );
+
+/* Format a USD cost. Cheap models cost fractions of a cent per run, so a flat
+   $0.00 reads as "broken" even when tracking works - show small amounts with
+   enough precision (down to a sub-cent floor) so non-zero cost is visible. */
+export const fmtUSD = (v: number | null | undefined): string => {
+  const n = v || 0;
+  if (n <= 0) return "$0.00";
+  if (n >= 0.01) return `$${n.toFixed(2)}`;
+  if (n >= 0.0001) return `$${n.toFixed(4)}`;
+  return "<$0.0001";
+};
+
+// The model catalog now lives on the backend (single source of truth so the picker and cost
+// engine can't disagree). Fetch it with `useModels()` from lib/models.ts.
+
+export const NODE_CATALOG = [
+  { group: "Flow", color: "var(--io-control)", items: [
+    { type: "start", icon: "n_start", label: "Start", desc: "Entry marker" },
+    { type: "end", icon: "n_end", label: "End", desc: "Terminal node" },
+    { type: "router", icon: "n_router", label: "Router", desc: "Conditional branch" },
+    { type: "loop", icon: "n_loop", label: "Loop", desc: "Bounded iteration" },
+    { type: "parallel_fanout", icon: "n_fanout", label: "Fan-out", desc: "Map over a list" },
+    { type: "join", icon: "n_join", label: "Join", desc: "Wait-for-all / reduce" },
+  ]},
+  { group: "Agents", color: "var(--accent)", items: [
+    { type: "agent", icon: "n_agent", label: "Agent", desc: "ReAct tool loop" },
+    { type: "deep_agent", icon: "n_deepagent", label: "Deep Agent", desc: "Planning + subagents harness" },
+  ]},
+  { group: "Model & Tools", color: "var(--io-json)", items: [
+    { type: "llm", icon: "n_llm", label: "LLM", desc: "Single model call" },
+    { type: "classifier", icon: "n_router", label: "Classifier", desc: "Intent classification" },
+    { type: "tool_call", icon: "n_tool", label: "Tool Call", desc: "Run a specific tool" },
+    { type: "transform", icon: "n_transform", label: "Transform", desc: "JMESPath data map" },
+  ]},
+  { group: "Knowledge", color: "var(--io-vector)", items: [
+    { type: "retrieval", icon: "n_retrieval", label: "Retrieval", desc: "RAG + Q&A" },
+  ]},
+  { group: "Human", color: "var(--warn)", items: [
+    { type: "human_input", icon: "n_human", label: "Human Input", desc: "HITL pause via interrupt" },
+  ]},
+  { group: "Integrations", color: "var(--signal)", items: [
+    { type: "subworkflow", icon: "n_subworkflow", label: "Subworkflow", desc: "Embed another graph" },
+    { type: "webhook_out", icon: "n_webhook", label: "Webhook", desc: "Call external URL" },
+    { type: "emit_event", icon: "n_emit", label: "Emit Event", desc: "Push custom SSE frame" },
+  ]},
+];
+
+export const NODE_META: Record<string, any> = {};
+NODE_CATALOG.forEach((g) => g.items.forEach((it) => (NODE_META[it.type] = { ...it, group: g.group, color: g.color })));
+
+/* The friendly, human-readable name for a node - the SAME string the canvas shows on the node
+   card (ForgeNode): the operator-set `config.name`, else the node type's catalog label, else the
+   raw type. Runs, traces and the RUN STEPS list key everything on the node `id` (needed for the
+   graph and the per-node cost rollup), so the id stays canonical - this is a DISPLAY layer that
+   makes a bigger workflow readable without losing traceability (the id is still shown alongside). */
+export type NodeLabel = { label: string; type: string };
+
+// Build an `id -> {label, type}` map from a workflow definition. Accepts either the executable
+// (`{id,type,config}`) or the canvas / React-Flow (`{id, data:{nodeType, config}}`) node shape, so
+// callers can pass whichever they have (mirrors WorkflowTestPanel's dual-shape read).
+export function buildNodeLabels(workflow: any): Record<string, NodeLabel> {
+  const nodes = workflow?.executable?.nodes || workflow?.canvas?.nodes || workflow?.nodes || [];
+  const map: Record<string, NodeLabel> = {};
+  for (const n of nodes) {
+    if (!n?.id) continue;
+    const type = n.type ?? n?.data?.nodeType ?? "";
+    const name = n?.config?.name ?? n?.data?.config?.name;
+    map[n.id] = { label: name || NODE_META[type]?.label || type || n.id, type };
+  }
+  return map;
+}
+
+// The label to show for a run step / span whose canonical name is a node id. Falls back to the
+// raw name for spans that aren't graph nodes (e.g. "model · …", "embedding · …", a subagent).
+export function nodeLabel(name: string, labels: Record<string, NodeLabel>): string {
+  return labels[name]?.label || name;
+}
+
+/* Hover help for the canvas palette: what each node is for + a tiny concrete example.
+   Keep these in plain product language - they're the first thing a new user reads. */
+export const NODE_HELP: Record<string, { what: string; example: string }> = {
+  start: {
+    what: "The entry point. Every run begins here - wire it to your first real step.",
+    example: "Start → Retrieval → Agent → End",
+  },
+  end: {
+    what: "Marks where the run finishes. A workflow can have several Ends (one per branch).",
+    example: "FAQ hit → End (answered early), miss → Agent → End",
+  },
+  router: {
+    what: "Branches the flow based on a value already in state - no model call. One labeled connector per case, plus Else. With 'multi' on, a list value (multi-label Classifier) runs EVERY matching branch in parallel. Always set a Default - without one, an unmatched value ends the run silently.",
+    example: "intent = 'refund' → refund_agent · 'cancel' → retention_agent · Else → general_agent",
+  },
+  classifier: {
+    what: "Calls the model once (structured output) to pick a label from your list and writes it to state (default: intent). Multi-label mode writes EVERY applicable label (a list) - pair with a multi Router so two-part questions reach both specialists. Put a Router after it to branch.",
+    example: "labels: return_item, cancel, question - “I want my money back” → return_item",
+  },
+  agent: {
+    what: "A model with tools and a system prompt that loops reason → act until it can answer (ReAct). The workhorse node for answering users.",
+    example: "Support agent with a weather tool + knowledge-base grounding",
+  },
+  deep_agent: {
+    what: "An agent plus planning (write_todos), a virtual filesystem, and subagents - for long, multi-step tasks that need decomposition.",
+    example: "“Research our top 3 competitors and draft a comparison”",
+  },
+  llm: {
+    what: "One single model call - no tools, no loop. A cheap text step for rewriting, summarizing, or extracting.",
+    example: "“Summarize the conversation so far into 2 sentences”",
+  },
+  transform: {
+    what: "Reshapes state with a JMESPath expression - pure data, no model. Reads input_key, writes output_key.",
+    example: "messages[-1].content → question",
+  },
+  tool_call: {
+    what: "Invokes one specific project tool directly with fixed arguments - no model deciding whether to call it. Result lands in a state key.",
+    example: "Always fetch get_weather before the agent answers",
+  },
+  human_input: {
+    what: "PAUSES the run with a real interrupt until a person approves or rejects in the Playground. Use for irreversible or sensitive steps.",
+    example: "Agent drafts a refund email → human approves → it goes out",
+  },
+  webhook_out: {
+    what: "Sends data from the run to an external URL (POST/PUT/…) - push results into your own systems.",
+    example: "POST the final answer to your Slack webhook",
+  },
+  emit_event: {
+    what: "Emits a named custom event into the run's live stream - for UI badges, metrics, or integrations listening to the run.",
+    example: "Emit 'escalated' when the agent hands off to a human",
+  },
+  retrieval: {
+    what: "Pulls the most relevant knowledge into context for the user's question - place it right before a grounded agent. Toggle DOCUMENTS (RAG over your chunks) and Q&A PAIRS independently: use either or both. Tip: for multi-part questions, give the agent a knowledge_search TOOL instead, so it can search per sub-question.",
+    example: "KB says “returns within 30 days” → agent answers with that policy",
+  },
+  // --- flow ---
+  loop: {
+    what: "Repeats a section of the graph until a condition is false or a max-iteration cap is hit. It increments _loop_count and writes _loop = continue/done - wire a Router on _loop and point the 'continue' branch back to this node.",
+    example: "Refine a draft up to 3 times: loop → agent → loop (until good enough)",
+  },
+  parallel_fanout: {
+    what: "Maps over a list in state: runs a child node ONCE PER ITEM, all in parallel (LangGraph Send). Each child reads its item from the chosen state key. Children write to an add-reducer key so results aggregate.",
+    example: "over: tickets → run a summarizer per ticket, in parallel",
+  },
+  join: {
+    what: "A convergence point where parallel branches (e.g. a Parallel Fanout's children) meet before the flow continues. Results aggregate via an add-reducer state key.",
+    example: "Fanout → (summarize each) → Join → final agent composes the digest",
+  },
+  subworkflow: {
+    what: "Runs ANOTHER workflow in this project as a reusable component (shares the messages state). Build a flow once - 'verify identity', 'look up order' - and drop it into many workflows.",
+    example: "Support flow → Subworkflow: 'verify_identity' → continue",
+  },
+  handoff: {
+    what: "Escalates the conversation to a HUMAN: pauses the run and opens a ticket in the Agent inbox. When an agent replies there, their message becomes the assistant's answer and is delivered over the channel.",
+    example: "Agent can't resolve → Handoff → a person replies from the inbox",
+  },
+  // --- triggers (entry points) ---
+  webhook_in: {
+    what: "Starts the workflow when an external system POSTs to this workflow's hook URL (shown on the Triggers screen after publish). Optionally verify an HMAC signature. Map the JSON body to the message with a JMESPath.",
+    example: "Your app POSTs {text: '…'} → the workflow runs and replies",
+  },
+  schedule: {
+    what: "Runs the workflow on a recurring schedule - every N minutes or a cron expression. Sends a fixed message into the flow each time.",
+    example: "Every weekday 9am → 'Summarize overnight tickets'",
+  },
+  email_in: {
+    what: "Starts the workflow when an email arrives in the connected mailbox (configure the Email channel under Connect → Channels). Optionally replies to the sender with the answer.",
+    example: "support@yourco.com receives a question → agent replies by email",
+  },
+  app_event: {
+    what: "Polls an external source on an interval and runs the workflow once PER NEW item (deduped by a key you choose). Turns any API/feed into an event source.",
+    example: "Poll the issues API every 5 min → triage each new issue",
+  },
+};
+
+export const CAT_BY_TYPE: Record<string, string> = {
+  start: "control", end: "control", router: "control", loop: "control", parallel_fanout: "control", join: "control",
+  agent: "agent", deep_agent: "agent",
+  llm: "json", tool_call: "json", transform: "json", code: "json",
+  retrieval: "vector",
+  human_input: "human",
+  subworkflow: "signal", webhook_out: "signal", emit_event: "signal",
+};
+
+export const workflowNodes = [
+  { id: "start", type: "start", position: { x: 40, y: 300 }, data: {}, summary: [] as string[] },
+  { id: "faq_deflect", type: "retrieval", position: { x: 220, y: 286 }, data: { top_k: 5, include_qa: true }, title: "Knowledge", summary: ["docs top_k 5", "+ Q&A"] },
+  { id: "intent_router", type: "router", position: { x: 430, y: 280 }, data: {}, title: "Intent Router", summary: ["expression · state.intent", "billing · technical · default"], cases: ["billing", "technical", "default"] },
+  { id: "kb_search", type: "retrieval", position: { x: 700, y: 110 }, data: {}, title: "Help Docs", summary: ["3 sources · top_k 5", "hybrid + rerank"] },
+  { id: "billing_agent", type: "agent", position: { x: 690, y: 270 }, data: {}, title: "Billing Agent", summary: ["claude-sonnet-4-6", "2 tools · 4 middleware"], mw: ["summarization", "tool_call_limit", "human_in_the_loop", "pii"] },
+  { id: "tech_agent", type: "deep_agent", position: { x: 690, y: 470 }, data: {}, title: "Tech Agent", summary: ["gpt-5.4 · deep agent", "subagents 2 · planning on"], mw: ["summarization", "context_editing"] },
+  { id: "approve_refund", type: "human_input", position: { x: 980, y: 270 }, data: {}, title: "Approve Refund", summary: ['"Approve this refund?"', "approve · edit · reject"] },
+  { id: "end", type: "end", position: { x: 1210, y: 320 }, data: {}, summary: [] as string[] },
+];
+export const workflowEdges = [
+  { id: "e1", source: "start", target: "faq_deflect", io: "control" },
+  { id: "e2", source: "faq_deflect", target: "intent_router", io: "messages" },
+  { id: "e3", source: "intent_router", target: "billing_agent", io: "control", label: "billing" },
+  { id: "e4", source: "intent_router", target: "tech_agent", io: "control", label: "technical" },
+  { id: "e5", source: "kb_search", target: "billing_agent", io: "json" },
+  { id: "e6", source: "billing_agent", target: "approve_refund", io: "messages" },
+  { id: "e7", source: "approve_refund", target: "end", io: "messages" },
+  { id: "e8", source: "tech_agent", target: "end", io: "messages" },
+];
+export const runOrder = ["start", "faq_deflect", "intent_router", "kb_search", "billing_agent", "approve_refund", "end"];
+
+export const TOOLS = [
+  { id: "t_get_order", name: "get_order", kind: "rest_api", auth: "orders_session", enabled: true, tested: "pass", version: 4, desc: "Fetch an order by ID from the commerce API, including line items and totals.", method: "GET", url: "https://api.acme.dev/v2/orders/{order_id}", rawTok: 1240, projTok: 92 },
+  { id: "t_get_invoice", name: "get_invoice", kind: "rest_api", auth: "orders_session", enabled: true, tested: "pass", version: 2, desc: "Retrieve a customer invoice and its payment status.", method: "GET", url: "https://api.acme.dev/v2/invoices/{invoice_id}", rawTok: 880, projTok: 64 },
+  { id: "t_search_kb", name: "search_catalog", kind: "graphql", auth: null, enabled: true, tested: "pass", version: 1, desc: "Query the product catalog via GraphQL.", method: "POST", url: "https://api.acme.dev/graphql", rawTok: 2100, projTok: 140 },
+  { id: "t_refund", name: "submit_refund", kind: "rest_api", auth: "orders_session", enabled: true, tested: "fail", version: 3, desc: "Issue a refund against an order. Requires human approval.", method: "POST", url: "https://api.acme.dev/v2/orders/{order_id}/refunds", rawTok: 320, projTok: 48 },
+  { id: "t_geo", name: "geocode_address", kind: "code", auth: null, enabled: true, tested: "untested", version: 1, desc: "Normalize and geocode a postal address using a sandboxed Python function.", rawTok: 0, projTok: 0 },
+  { id: "t_jira", name: "create_ticket", kind: "mcp", auth: "jira_oauth", enabled: true, tested: "pass", version: 1, desc: "Create an issue in the project tracker over MCP.", rawTok: 540, projTok: 70 },
+  { id: "t_web", name: "web_search", kind: "builtin", auth: null, enabled: false, tested: "untested", version: 1, desc: "Search the public web (Tavily).", rawTok: 0, projTok: 0 },
+];
+
+export const AUTH_PROVIDERS = [
+  { id: "orders_session", name: "orders_session", kind: "csrf_session", tested: "pass", usedBy: 3, ttl: 1800 },
+  { id: "jira_oauth", name: "jira_oauth", kind: "oauth2_client_credentials", tested: "pass", usedBy: 1, ttl: 3600 },
+  { id: "stripe_bearer", name: "stripe_bearer", kind: "bearer", tested: "pass", usedBy: 2, ttl: 0 },
+  { id: "legacy_basic", name: "legacy_basic", kind: "basic", tested: "untested", usedBy: 0, ttl: 0 },
+];
+
+export const AGENTS = [
+  { id: "a_billing", name: "billing_agent", flavor: "agent", model: "anthropic:claude-sonnet-4-6", tools: 2, mw: 4, updated: "2h ago" },
+  { id: "a_tech", name: "tech_agent", flavor: "deep_agent", model: "openai:gpt-5.4", tools: 5, mw: 3, updated: "1d ago" },
+  { id: "a_triage", name: "triage_agent", flavor: "agent", model: "openai:gpt-5.4-mini", tools: 1, mw: 2, updated: "3d ago" },
+  { id: "a_research", name: "research_agent", flavor: "deep_agent", model: "google_genai:gemini-3.1-pro-preview", tools: 3, mw: 5, updated: "5d ago" },
+];
+
+export const MIDDLEWARE_CATALOG = [
+  { cat: "Memory & Context", color: "var(--signal)", items: [
+    { type: "summarization", name: "Summarization", desc: "Summarize older messages near a token limit." },
+    { type: "context_editing", name: "Context Editing", desc: "Clear old tool outputs past a threshold." },
+    { type: "todo", name: "Planning (To-do)", desc: "Add a write_todos planning tool." },
+  ]},
+  { cat: "Safety & Guardrails", color: "var(--err)", items: [
+    { type: "pii", name: "PII Handling", desc: "Detect & redact/mask/block PII." },
+    { type: "guardrail_regex", name: "Regex Guardrail", desc: "Block or flag matched patterns." },
+    { type: "openai_moderation", name: "Moderation", desc: "OpenAI moderation on input/output." },
+  ]},
+  { cat: "Reliability", color: "var(--info)", items: [
+    { type: "tool_retry", name: "Tool Retry", desc: "Retry failed tool calls with backoff." },
+    { type: "model_retry", name: "Model Retry", desc: "Retry failed model calls." },
+    { type: "model_fallback", name: "Model Fallback", desc: "Failover across providers." },
+  ]},
+  { cat: "Cost & Limits", color: "var(--warn)", items: [
+    { type: "model_call_limit", name: "Model Call Limit", desc: "Cap model calls per run/thread." },
+    { type: "tool_call_limit", name: "Tool Call Limit", desc: "Cap tool calls, global or per-tool." },
+    { type: "tenant_budget", name: "Budget Cap", desc: "Stop when cost/tokens exceed a cap." },
+    { type: "llm_tool_selector", name: "Tool Selector", desc: "Pre-select relevant tools (saves tokens)." },
+  ]},
+  { cat: "Human Oversight", color: "var(--accent)", items: [
+    { type: "human_in_the_loop", name: "Human-in-the-loop", desc: "Pause for approval on sensitive tools." },
+  ]},
+  { cat: "Provider-specific", color: "var(--io-json)", items: [
+    { type: "anthropic_prompt_caching", name: "Prompt Caching", desc: "Cache the system prompt (Anthropic)." },
+  ]},
+  { cat: "Advanced", color: "var(--io-vector)", items: [
+    { type: "dynamic_model_by_state", name: "Dynamic Model", desc: "Switch model at runtime by state." },
+    { type: "tool_filter_by_context", name: "Tool Filter", desc: "Show/hide tools by context/role." },
+  ]},
+];
+export const MW_META: Record<string, any> = {};
+MIDDLEWARE_CATALOG.forEach((c) => c.items.forEach((it) => (MW_META[it.type] = { ...it, cat: c.cat, color: c.color })));
+
+export const AGENT_MW_STACK = [
+  { type: "summarization", enabled: true, summary: "Summarize when > 4,000 tok · keep last 20 msgs" },
+  { type: "tool_call_limit", enabled: true, summary: "get_order · max 3 calls per run" },
+  { type: "human_in_the_loop", enabled: true, summary: "submit_refund → approve · edit · reject" },
+  { type: "pii", enabled: false, summary: "email → redact (input)" },
+];
+
+export const PROJECTS = [
+  { id: "p_support", name: "Customer Support", slug: "customer-support", status: "active", workflows: 4, tools: 7, runs7d: 1840, spark: spark(14, 60, 30), edited: "12m ago" },
+  { id: "p_ops", name: "Internal Ops Bot", slug: "internal-ops-bot", status: "active", workflows: 2, tools: 5, runs7d: 620, spark: spark(14, 28, 16), edited: "3h ago" },
+  { id: "p_sales", name: "Sales Assistant", slug: "sales-assistant", status: "active", workflows: 3, tools: 9, runs7d: 980, spark: spark(14, 40, 22), edited: "1d ago" },
+  { id: "p_research", name: "Research Copilot", slug: "research-copilot", status: "draft", workflows: 1, tools: 3, runs7d: 40, spark: spark(14, 6, 6), edited: "2d ago" },
+  { id: "p_data", name: "Data Q&A", slug: "data-qa", status: "active", workflows: 2, tools: 4, runs7d: 410, spark: spark(14, 20, 12), edited: "4d ago" },
+  { id: "p_archived", name: "Legacy Triage", slug: "legacy-triage", status: "draft", workflows: 1, tools: 2, runs7d: 0, spark: spark(14, 2, 2), edited: "3w ago" },
+];
+
+export const RECENT_RUNS = [
+  { id: "r1", project: "Customer Support", workflow: "Support Router", status: "done", dur: "4.2s", tokens: "12.4k", trigger: "email", time: "2m ago" },
+  { id: "r2", project: "Sales Assistant", workflow: "Lead Qualifier", status: "done", dur: "2.1s", tokens: "6.1k", trigger: "api", time: "5m ago" },
+  { id: "r3", project: "Customer Support", workflow: "Support Router", status: "interrupted", dur: "1.8s", tokens: "3.2k", trigger: "email", time: "8m ago" },
+  { id: "r4", project: "Internal Ops Bot", workflow: "PR Summarizer", status: "error", dur: "0.9s", tokens: "1.1k", trigger: "mcp", time: "14m ago" },
+  { id: "r5", project: "Data Q&A", workflow: "Metrics Explainer", status: "done", dur: "3.6s", tokens: "9.8k", trigger: "playground", time: "21m ago" },
+  { id: "r6", project: "Customer Support", workflow: "Refund Flow", status: "done", dur: "5.5s", tokens: "15.2k", trigger: "email", time: "33m ago" },
+];
+
+export const KB_SOURCES = [
+  { id: "k1", name: "Help Center (acme.dev/help)", kind: "url", status: "ready", chunks: 482, size: "3.1 MB", model: "text-embedding-3-small", updated: "1h ago" },
+  { id: "k2", name: "Billing FAQ.pdf", kind: "file", status: "ready", chunks: 96, size: "740 KB", model: "text-embedding-3-small", updated: "1d ago" },
+  { id: "k3", name: "API Reference.pdf", kind: "file", status: "processing", prog: 62, chunks: 210, size: "2.4 MB", model: "text-embedding-3-small", updated: "now" },
+  { id: "k4", name: "s3://acme-docs/policies", kind: "s3", status: "ready", chunks: 154, size: "1.2 MB", model: "text-embedding-3-small", updated: "3d ago" },
+  { id: "k5", name: "Onboarding notes", kind: "text", status: "error", chunks: 0, size: "12 KB", model: "-", updated: "5d ago" },
+];
+export const QA_PAIRS = [
+  { id: "q1", q: "How do I reset my password?", a: "Go to Settings → Security → Reset password. A link is emailed to you.", kind: "faq", tags: ["account"], upvotes: 42, used: "3m ago" },
+  { id: "q2", q: 'Why is my order stuck in "processing"?', a: "Processing clears within 30 min. If longer, the payment hold failed - retry the card.", kind: "error_workaround", tags: ["orders", "billing"], upvotes: 31, used: "18m ago" },
+  { id: "q3", q: "Can I change my plan mid-cycle?", a: "Yes. Upgrades are prorated immediately; downgrades apply next cycle.", kind: "faq", tags: ["billing"], upvotes: 27, used: "1h ago" },
+  { id: "q4", q: "Error E-4012 on checkout", a: "E-4012 means an expired CSRF token. Refresh the page and retry.", kind: "error_workaround", tags: ["errors"], upvotes: 19, used: "2h ago" },
+];
+export const SEARCH_HITS = [
+  { title: "Billing FAQ.pdf · §3 Refunds", vec: 0.91, fts: 0.74, fused: 0.88, text: "Refunds are issued to the original payment method within 5–7 business days…" },
+  { title: "Help Center · Cancel an order", vec: 0.86, fts: 0.81, fused: 0.85, text: "You can cancel an order before it ships from the Orders page…" },
+  { title: "API Reference.pdf · POST /refunds", vec: 0.83, fts: 0.62, fused: 0.79, text: "Creates a refund object. Requires an order in a refundable state…" },
+  { title: "Policies · Returns window", vec: 0.71, fts: 0.55, fused: 0.68, text: "Items may be returned within 30 days of delivery for a full refund…" },
+];
+
+export const TRACE_RUNS = [
+  { id: "tr1", workflow: "Support Router", status: "done", started: "14:22:08", dur: "4.2s", tokens: "12.4k", cost: "$0.038", trigger: "email" },
+  { id: "tr2", workflow: "Support Router", status: "interrupted", started: "14:18:51", dur: "1.8s", tokens: "3.2k", cost: "$0.009", trigger: "email" },
+  { id: "tr3", workflow: "Refund Flow", status: "done", started: "14:10:33", dur: "5.5s", tokens: "15.2k", cost: "$0.047", trigger: "api" },
+  { id: "tr4", workflow: "PR Summarizer", status: "error", started: "13:58:02", dur: "0.9s", tokens: "1.1k", cost: "$0.003", trigger: "mcp" },
+  { id: "tr5", workflow: "Metrics Explainer", status: "done", started: "13:44:19", dur: "3.6s", tokens: "9.8k", cost: "$0.030", trigger: "playground" },
+];
+export const SPANS = [
+  { id: "s0", name: "Support Router", kind: "chain", depth: 0, start: 0, dur: 4200, tokens: "12.4k", cost: "$0.038" },
+  { id: "s1", name: "faq_deflect", kind: "retriever", depth: 1, start: 40, dur: 210, tokens: "-", cost: "$0.000" },
+  { id: "s2", name: "intent_router", kind: "node", depth: 1, start: 260, dur: 60, tokens: "-", cost: "$0.000" },
+  { id: "s3", name: "billing_agent", kind: "agent", depth: 1, start: 330, dur: 3600, tokens: "11.9k", cost: "$0.036" },
+  { id: "s4", name: "model · claude-sonnet-4-6", kind: "llm", depth: 2, start: 360, dur: 1400, tokens: "4.1k", cost: "$0.013" },
+  { id: "s5", name: "tool · get_order", kind: "tool", depth: 2, start: 1780, dur: 320, tokens: "92", cost: "$0.000" },
+  { id: "s6", name: "model · claude-sonnet-4-6", kind: "llm", depth: 2, start: 2130, dur: 1700, tokens: "7.7k", cost: "$0.023" },
+  { id: "s7", name: "approve_refund", kind: "node", depth: 1, start: 3950, dur: 250, tokens: "-", cost: "$0.000" },
+];
+export const COST_BY_NODE = [
+  { name: "billing_agent", cost: 0.036, color: "var(--accent)" },
+  { name: "tech_agent", cost: 0.0, color: "var(--io-json)" },
+  { name: "kb_search", cost: 0.001, color: "var(--io-vector)" },
+  { name: "router", cost: 0.0005, color: "var(--io-control)" },
+];
+
+export const SECRETS = [
+  { id: "sec1", name: "orders_api_creds", kind: "csrf_session", version: 3, used: "2m ago" },
+  { id: "sec2", name: "openai_key", kind: "api_key", version: 1, used: "1m ago" },
+  { id: "sec3", name: "anthropic_key", kind: "api_key", version: 1, used: "1m ago" },
+  { id: "sec4", name: "jira_client_secret", kind: "oauth2", version: 2, used: "1h ago" },
+  { id: "sec5", name: "stripe_secret", kind: "bearer", version: 1, used: "3h ago" },
+];
+export const AUDIT = [
+  { action: "secret.read", actor: "orders_session", resource: "orders_api_creds", at: "14:22:09" },
+  { action: "workflow.publish", actor: "you@acme.dev", resource: "Support Router v7", at: "13:40:11" },
+  { action: "tool.test", actor: "you@acme.dev", resource: "submit_refund", at: "13:38:55" },
+  { action: "secret.write", actor: "you@acme.dev", resource: "stripe_secret", at: "11:02:30" },
+];
+
+// Sectioned nav: top-level leaves (Overview, Settings) plus collapsible groups
+// (Build / Deploy / Observe). The sidebar renders a leaf as a button and a group as a
+// labeled, collapsible section. `countKey` shows a live badge.
+export type NavLeaf = { id: string; label: string; icon: string; help?: string; countKey?: string };
+export type NavGroup = { section: string; items: NavLeaf[] };
+export type NavEntry = NavLeaf | NavGroup;
+
+export const PROJECT_NAV: NavEntry[] = [
+  { id: "overview", label: "Analytics", icon: "layout-dashboard", help: "Observability dashboard - volume, latency, cost, tokens, and per-source/tool breakdowns over time." },
+  { section: "Build", items: [
+    { id: "playground", label: "Playground", icon: "playground", help: "Chat with a workflow to test it live, with token + cost metering." },
+    { id: "workflows", label: "Workflows", icon: "workflow", countKey: "workflows", help: "The visual canvas - wire nodes (agents, tools, routers, triggers) into a graph." },
+    { id: "agents", label: "Agents", icon: "bot", countKey: "agents", help: "Reusable agent presets (model + prompt + tools + middleware) to drop into workflows." },
+    { id: "tools", label: "Tools", icon: "tools", countKey: "tools", help: "Capabilities an agent can call: REST, GraphQL, Code, SQL, or built-ins." },
+    { id: "components", label: "Components", icon: "grid", countKey: "components", help: "User-defined UI widgets (HTML/CSS) an agent can render in chat - tables, cards, forms, actions." },
+    { id: "knowledge", label: "Knowledge", icon: "book-open", countKey: "knowledge", help: "Documents + Q&A pairs that ground answers (RAG). Add text, URLs, files, or crawl a site." },
+    { id: "auth", label: "Auth Providers", icon: "shield-check", countKey: "auth", help: "Reusable credential strategies (Bearer, API key, OAuth, CSRF) that tools attach to." },
+    { id: "mcp", label: "External MCP", icon: "server", help: "Connect external MCP servers (GitHub, Slack, …) and toggle which of their tools agents and workflows can use." },
+  ] },
+  { section: "Deploy", items: [
+    { id: "channels", label: "Channels", icon: "mail", help: "Deploy a workflow to an email surface." },
+    { id: "triggers", label: "Triggers", icon: "bolt", help: "Event-driven entry points - webhook URLs, schedules, and pollers that start runs." },
+    { id: "connect", label: "Connect", icon: "plug-zap", help: "Connect this project to external systems: the Run API, integration reference, MCP server, and the embeddable chat widget." },
+  ] },
+  { section: "Observe", items: [
+    { id: "traces", label: "Traces", icon: "activity", help: "Per-run span waterfall with model calls, tokens, latency, and cost." },
+    { id: "datasets", label: "Evaluations", icon: "validate", help: "Test datasets (input + expected) scored against a workflow to catch regressions." },
+    { id: "handoff", label: "Agent inbox", icon: "inbox", countKey: "handoffs", help: "Live conversations escalated to a human - reply here to resume the run." },
+  ] },
+  { id: "settings", label: "Settings", icon: "settings", help: "Model defaults, provider keys, secrets, team & roles, and the audit log." },
+];
+
+export const IO_COLOR: Record<string, string> = {
+  messages: "var(--io-messages)", text: "var(--io-text)", json: "var(--io-json)", tool: "var(--io-tool)",
+  embedding: "var(--io-vector)", vector: "var(--io-vector)", any: "var(--io-any)", control: "var(--io-control)",
+};
+export const KIND_LABEL: Record<string, string> = { rest_api: "REST", graphql: "GraphQL", code: "Code", sql: "SQL", builtin: "Builtin" };
+export const KIND_ICON: Record<string, string> = { rest_api: "k_rest", graphql: "k_graphql", code: "k_code", sql: "db", builtin: "k_builtin" };
diff --git a/apps/web/lib/graph.ts b/apps/web/lib/graph.ts
new file mode 100644
index 0000000..b626c1c
--- /dev/null
+++ b/apps/web/lib/graph.ts
@@ -0,0 +1,191 @@
+/* Canvas (React Flow) <-> executable JSON translation + IOType rules.
+   Canvas JSON is React-Flow-shaped (UI owns it); executable is the compiler input. */
+import type { Edge, Node } from "@xyflow/react";
+
+export interface ForgeNodeData {
+  nodeType: string;
+  config: Record<string, any>;
+  status?: "idle" | "running" | "done" | "error";
+  [k: string]: any;
+}
+export type FlowNode = Node<ForgeNodeData>;
+export type FlowEdge = Edge;
+
+export const DEFAULT_STATE: Record<string, any> = {
+  messages: { type: "list[message]", reducer: "add_messages" },
+  intent: { type: "str", reducer: "last" },
+};
+
+/** `any` matches all; `control` only connects to `control`; else exact match. */
+export function ioCompatible(a: string, b: string): boolean {
+  if (a === "control" || b === "control") return a === "control" && b === "control";
+  if (a === "any" || b === "any") return true;
+  return a === b;
+}
+
+export function newNodeId(type: string, existing: Iterable<string>): string {
+  const ids = new Set(existing);
+  let i = 1;
+  while (ids.has(`${type}_${i}`)) i++;
+  return `${type}_${i}`;
+}
+
+/** Ensure a node's config carries schema-required fields the UI only defaults visually,
+ *  so the saved executable always validates. Agent/deep_agent need an explicit `flavor`
+ *  derived from the node type - a deep_agent must never silently compile as a plain agent. */
+export function normalizeNodeConfig(nodeType: string, config: Record<string, any>): Record<string, any> {
+  if (nodeType === "agent" || nodeType === "deep_agent") {
+    return { ...config, flavor: config.flavor || nodeType };
+  }
+  return config;
+}
+
+const ROUTER_CASE_HANDLE = "case:";
+
+function routerCaseFromEdge(node: FlowNode | undefined, edge: FlowEdge): string | undefined {
+  const rawHandle = edge.sourceHandle ?? (edge as any).source_handle ?? null;
+  if (typeof rawHandle === "string" && rawHandle.startsWith(ROUTER_CASE_HANDLE)) {
+    return rawHandle.slice(ROUTER_CASE_HANDLE.length);
+  }
+  if (!node || node.data.nodeType !== "router") return undefined;
+
+  const cfg = node.data.config || {};
+  const label = (edge as any).label;
+  if (label != null && Object.prototype.hasOwnProperty.call(cfg.cases || {}, String(label))) {
+    return String(label);
+  }
+
+  const caseMatch = Object.entries(cfg.cases || {}).find(([, target]) => target === edge.target);
+  if (caseMatch) return caseMatch[0];
+  if (cfg.default === edge.target) return "__default__";
+  return undefined;
+}
+
+function normalizeRouterConfigFromEdges(node: FlowNode, edges: FlowEdge[]): Record<string, any> {
+  const cfg = { ...(node.data.config || {}) };
+  if (node.data.nodeType !== "router") return cfg;
+
+  const cases: Record<string, string> = { ...(cfg.cases || {}) };
+  for (const edge of edges) {
+    if (edge.source !== node.id) continue;
+    const key = routerCaseFromEdge(node, edge);
+    if (!key) continue;
+    if (key === "__default__") cfg.default = edge.target;
+    else if (Object.prototype.hasOwnProperty.call(cases, key)) cases[key] = edge.target;
+  }
+  return { ...cfg, cases };
+}
+
+/** State keys each node type writes (from its config), so the workflow state can declare
+ *  them automatically - LangGraph rejects writes to undeclared keys, which would silently
+ *  break any router branching on a classifier label, qa/retrieval route flag, or human
+ *  decision in a canvas-built workflow. */
+function nodeWrittenKeys(nodeType: string, c: Record<string, any>): [string, string][] {
+  switch (nodeType) {
+    case "classifier": return [[c.output_key || "intent", c.multi_label ? "list[str]" : "str"]];
+    case "retrieval": return c.route_key ? [[c.route_key, "str"]] : [];
+    case "human_input": return c.output_key ? [[c.output_key, "str"]] : [];
+    case "transform": return [[c.output_key || "data", "json"]];
+    case "tool_call": return c.output_key ? [[c.output_key, "json"]] : [];
+    case "webhook_out": return [[c.output_key || "webhook_result", "json"]];
+    default: return [];
+  }
+}
+
+export function canvasToExecutable(
+  nodes: FlowNode[],
+  edges: FlowEdge[],
+  meta: { id: string; version?: number; state?: Record<string, any> },
+): Record<string, any> {
+  // Entry: a Start marker, else a trigger node (webhook/schedule/email/app_event),
+  // else a node with no incoming edge, else the first node.
+  const TRIGGERS = new Set(["webhook_in", "schedule", "email_in", "app_event"]);
+  const hasIncoming = new Set(edges.map((e) => e.target));
+  const start =
+    nodes.find((n) => n.data.nodeType === "start") ||
+    nodes.find((n) => TRIGGERS.has(n.data.nodeType)) ||
+    nodes.find((n) => !hasIncoming.has(n.id));
+  const state: Record<string, any> = { ...(meta.state || DEFAULT_STATE) };
+  for (const n of nodes) {
+    for (const [key, type] of nodeWrittenKeys(n.data.nodeType, n.data.config || {})) {
+      if (key && !state[key]) state[key] = { type, reducer: "last" };
+    }
+  }
+  return {
+    id: meta.id,
+    version: meta.version || 1,
+    state,
+    entry_node: start?.id || nodes[0]?.id || "start",
+    nodes: nodes.map((n) => ({
+      id: n.id,
+      type: n.data.nodeType,
+      config: normalizeNodeConfig(n.data.nodeType, normalizeRouterConfigFromEdges(n, edges)),
+      position: { x: Math.round(n.position.x), y: Math.round(n.position.y) },
+    })),
+    edges: edges.map((e) => ({
+      source: e.source,
+      target: e.target,
+      source_handle: e.sourceHandle || undefined,
+      target_handle: e.targetHandle || undefined,
+    })),
+  };
+}
+
+export function canvasToFlow(canvas: any): { nodes: FlowNode[]; edges: FlowEdge[] } {
+  const nodes: FlowNode[] = (canvas?.nodes || []).map((n: any) => ({
+    id: n.id,
+    type: "forge",
+    position: n.position || { x: 0, y: 0 },
+    data: { nodeType: n.data?.nodeType || n.type, config: n.data?.config || {} },
+  }));
+  const byId: Record<string, FlowNode> = Object.fromEntries(nodes.map((n) => [n.id, n]));
+  // Forge nodes use React Flow's default handle (one in/out per node), so edges carry no
+  // handle id - they attach to the default handle. Any stored handle id is still honored.
+  const edges: FlowEdge[] = (canvas?.edges || []).map((e: any, i: number) => ({
+    id: e.id || `e${i}`,
+    source: e.source,
+    target: e.target,
+    sourceHandle: e.sourceHandle ?? e.source_handle ?? (
+      routerCaseFromEdge(byId[e.source], e as FlowEdge)
+        ? `${ROUTER_CASE_HANDLE}${routerCaseFromEdge(byId[e.source], e as FlowEdge)}`
+        : null
+    ),
+    targetHandle: e.targetHandle ?? e.target_handle ?? null,
+    label: e.label,
+  }));
+  return { nodes, edges };
+}
+
+/** A minimal runnable starter: start -> end. */
+export function starterWorkflow(): { canvas: any; nodes: FlowNode[]; edges: FlowEdge[] } {
+  const nodes: FlowNode[] = [
+    { id: "start", type: "forge", position: { x: 80, y: 220 }, data: { nodeType: "start", config: {} } },
+    { id: "end", type: "forge", position: { x: 520, y: 220 }, data: { nodeType: "end", config: {} } },
+  ];
+  const edges: FlowEdge[] = [{ id: "e0", source: "start", target: "end" }];
+  return { canvas: { nodes, edges, viewport: { x: 0, y: 0, zoom: 1 } }, nodes, edges };
+}
+
+const GROUNDING_PROMPT =
+  "You are the support assistant for this project. Be friendly, natural, and concise. " +
+  "For greetings, thanks, or small talk (e.g. 'hi', 'thanks'), reply naturally and briefly and invite " +
+  "the user's question - do NOT refuse these. For questions about this project/product, answer using ONLY " +
+  "the KNOWLEDGE BASE context provided in the conversation (documents and FAQs); if it doesn't contain the " +
+  "answer, say you don't have that information and offer to connect them with a human. Never invent facts " +
+  "or use outside knowledge for such questions. Use the prior conversation turns for context.";
+
+/** A complete grounded support flow: start -> retrieval (RAG over KB + Q&A) -> agent -> end. */
+export function groundedWorkflow(model = "openai:gpt-4o-mini"): { canvas: any; executable: Record<string, any> } {
+  const nodes: FlowNode[] = [
+    { id: "start", type: "forge", position: { x: 60, y: 180 }, data: { nodeType: "start", config: {} } },
+    { id: "retrieval_1", type: "forge", position: { x: 300, y: 180 }, data: { nodeType: "retrieval", config: { top_k: 4, include_qa: true, announce_empty: true, min_score: 0.18 } } },
+    { id: "agent_1", type: "forge", position: { x: 560, y: 180 }, data: { nodeType: "agent", config: { flavor: "agent", name: "support_agent", model, system_prompt: GROUNDING_PROMPT, tools: [], middleware: [] } } },
+    { id: "end", type: "forge", position: { x: 820, y: 180 }, data: { nodeType: "end", config: {} } },
+  ];
+  const edges: FlowEdge[] = [
+    { id: "e0", source: "start", target: "retrieval_1" },
+    { id: "e1", source: "retrieval_1", target: "agent_1" },
+    { id: "e2", source: "agent_1", target: "end" },
+  ];
+  return { canvas: { nodes, edges, viewport: { x: 0, y: 0, zoom: 1 } }, executable: canvasToExecutable(nodes, edges, { id: "grounded_support" }) };
+}
diff --git a/apps/web/lib/models.ts b/apps/web/lib/models.ts
new file mode 100644
index 0000000..d1153bd
--- /dev/null
+++ b/apps/web/lib/models.ts
@@ -0,0 +1,46 @@
+"use client";
+/* Model picker data. The catalog (chat + embedding + reranker) is served by the backend
+   (GET /v1/models) from its canonical lists, so no model dropdown hardcodes options in the
+   frontend and the picker can only offer models the backend actually runs (and, for chat,
+   prices). See forge/model_catalog.py. */
+import { useEffect, useState } from "react";
+import { api, type EmbeddingModelInfo, type ModelCatalog, type ModelInfo, type RerankerModelInfo } from "./api";
+
+const EMPTY: ModelCatalog = { chat: [], embedding: [], reranker: [] };
+
+// Fetched once, shared across every picker. api.json() also de-dupes concurrent GETs, so even
+// a cold cache is a single round-trip.
+let _cache: ModelCatalog | null = null;
+
+function useModelCatalog(): ModelCatalog {
+  const [catalog, setCatalog] = useState<ModelCatalog>(() => _cache ?? EMPTY);
+  useEffect(() => {
+    if (_cache) return;
+    let alive = true;
+    api
+      .listModels()
+      .then((c) => {
+        _cache = c;
+        if (alive) setCatalog(c);
+      })
+      .catch(() => {
+        /* leave empty: selects still show the current value + any hardcoded default option */
+      });
+    return () => {
+      alive = false;
+    };
+  }, []);
+  return catalog;
+}
+
+export function useModels(): ModelInfo[] {
+  return useModelCatalog().chat;
+}
+
+export function useEmbeddingModels(): EmbeddingModelInfo[] {
+  return useModelCatalog().embedding;
+}
+
+export function useRerankerModels(): RerankerModelInfo[] {
+  return useModelCatalog().reranker;
+}
diff --git a/apps/web/middleware.ts b/apps/web/middleware.ts
new file mode 100644
index 0000000..43286ed
--- /dev/null
+++ b/apps/web/middleware.ts
@@ -0,0 +1,42 @@
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+
+/* Security headers for every app route. The /embed widget is intentionally framable by the
+   project's configured allowed_origins (Phase 3b); every OTHER route - the authenticated operator
+   dashboard - is never framable, to stop clickjacking of one-click destructive actions (audit M7).
+   Static assets are excluded from the matcher. */
+export const config = { matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"] };
+
+export async function middleware(req: NextRequest) {
+  const res = NextResponse.next();
+  res.headers.set("X-Content-Type-Options", "nosniff");
+  res.headers.set("Referrer-Policy", "strict-origin-when-cross-origin");
+
+  if (req.nextUrl.pathname === "/embed") {
+    // Widget: restrict which sites may embed it via `frame-ancestors`, derived from the project's
+    // configured allowed_origins. Default 'self' blocks external embedding until a project
+    // explicitly allow-lists an origin - a secure default.
+    const key = req.nextUrl.searchParams.get("key");
+    let origins: string[] = [];
+    if (key) {
+      try {
+        // Resolve the config from the backend via a BUILD-time-trusted base, never the request's
+        // own origin: req.nextUrl.origin reflects the (spoofable) Host header, so using it to build
+        // the fetch target is an SSRF vector. FORGE_API_URL is the same internal API address the
+        // Next rewrite proxies to (container-internal in compose, 127.0.0.1:8000 on host dev).
+        const apiBase = (process.env.FORGE_API_URL || "http://127.0.0.1:8000").replace(/\/$/, "");
+        const r = await fetch(`${apiBase}/v1/embed/${encodeURIComponent(key)}/config`, { cache: "no-store" });
+        if (r.ok) origins = (await r.json())?.allowed_origins || [];
+      } catch {
+        /* fall back to the secure default below */
+      }
+    }
+    const ancestors = ["'self'", ...origins].join(" ");
+    res.headers.set("Content-Security-Policy", `frame-ancestors ${ancestors}`);
+  } else {
+    // Operator dashboard + everything else: never framable (clickjacking defense, audit M7).
+    res.headers.set("Content-Security-Policy", "frame-ancestors 'none'");
+    res.headers.set("X-Frame-Options", "DENY");
+  }
+  return res;
+}
diff --git a/apps/web/next-env.d.ts b/apps/web/next-env.d.ts
new file mode 100644
index 0000000..40c3d68
--- /dev/null
+++ b/apps/web/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/apps/web/next.config.mjs b/apps/web/next.config.mjs
new file mode 100644
index 0000000..13486c3
--- /dev/null
+++ b/apps/web/next.config.mjs
@@ -0,0 +1,24 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  // Emit a minimal self-contained server bundle (.next/standalone) for a lean prod image.
+  // Gated on an env var: the standalone copy step uses symlinks that fail on Windows dev
+  // (EPERM) - the Docker build sets NEXT_OUTPUT=standalone; local `pnpm build` stays plain.
+  output: process.env.NEXT_OUTPUT === "standalone" ? "standalone" : undefined,
+  env: {
+    // Browser-facing base for DIRECT client calls (e.g. split-origin SSE). Leave EMPTY for
+    // container / single-origin deploys so the browser uses the same-origin /api/forge proxy.
+    // NOT derived from FORGE_API_URL: that is the container-internal rewrite host (e.g.
+    // http://api:8000) which the browser cannot resolve. Set only for a split-origin deploy.
+    NEXT_PUBLIC_FORGE_API_URL: process.env.NEXT_PUBLIC_FORGE_API_URL || "",
+  },
+  async rewrites() {
+    // Server-side proxy target, baked at BUILD time for standalone output (the destination is
+    // frozen into the routes manifest, so the runtime env cannot change it). In compose this is
+    // the container-internal API address, passed via the Dockerfile ARG (build.args
+    // FORGE_API_URL=http://api:8000). Host `pnpm dev` leaves FORGE_API_URL unset -> 127.0.0.1:8000.
+    const api = process.env.FORGE_API_URL || "http://127.0.0.1:8000";
+    return [{ source: "/api/forge/:path*", destination: `${api}/:path*` }];
+  },
+};
+export default nextConfig;
diff --git a/apps/web/package.json b/apps/web/package.json
new file mode 100644
index 0000000..11a2826
--- /dev/null
+++ b/apps/web/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "web",
+  "version": "0.1.0",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "dev": "next dev -p 3000",
+    "build": "next build",
+    "start": "next start -p 3000",
+    "lint": "next lint",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@xyflow/react": "^12.3.5",
+    "jmespath": "^0.16.0",
+    "mustache": "^4.2.0",
+    "next": "14.2.18",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-markdown": "^9.0.1",
+    "recharts": "^3.10.0",
+    "remark-gfm": "^4.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jmespath": "^0.15.2",
+    "@types/mustache": "^4.2.5",
+    "@types/node": "^22.9.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.7.0",
+    "jsdom": "^25.0.1",
+    "typescript": "^5.6.3",
+    "vitest": "^2.1.9"
+  }
+}
diff --git a/apps/web/public/launcher.js b/apps/web/public/launcher.js
new file mode 100644
index 0000000..6e53012
--- /dev/null
+++ b/apps/web/public/launcher.js
@@ -0,0 +1,108 @@
+/* Forge chat launcher - a self-contained, dependency-free floating chat bubble that embeds the
+ * Forge widget (/embed) in an iframe. Drop one <script> tag on any allowed site:
+ *
+ *   <script src="https://YOUR-FORGE/launcher.js"
+ *           data-forge-key="pk_…"
+ *           data-forge-origin="https://YOUR-FORGE"
+ *           data-forge-title="Chat with us"
+ *           data-forge-color="#4f46e5"
+ *           data-forge-token="OPTIONAL_SERVER_MINTED_SESSION_TOKEN"
+ *           defer></script>
+ *
+ * The host site must be in the project's allowed_origins (the /embed page sets a
+ * frame-ancestors CSP) - the launcher cannot bypass that. The publishable key is safe to ship;
+ * the optional session_token must be minted server-side and injected per request.
+ */
+(function () {
+  "use strict";
+  var me = document.currentScript || document.querySelector("script[data-forge-key]");
+  if (!me) return;
+  var ds = me.dataset;
+  var KEY = ds.forgeKey;
+  var TOKEN = ds.forgeToken || "";
+  var TITLE = ds.forgeTitle || "Chat";
+  var COLOR = ds.forgeColor || "#4f46e5";
+  var ORIGIN = ds.forgeOrigin || new URL(me.src, location.href).origin;
+  if (!KEY) { console.warn("[forge] launcher: missing data-forge-key"); return; }
+  if (window.__forgeLauncher) return; // idempotent
+  window.__forgeLauncher = true;
+
+  // Pass our (the host page's) origin so the widget can validate the postMessage channel
+  // strictly, without depending on the referrer (which strict Referrer-Policy can strip).
+  var src = ORIGIN + "/embed?key=" + encodeURIComponent(KEY) + "&host=" + encodeURIComponent(location.origin);
+  if (TOKEN) src += "&session_token=" + encodeURIComponent(TOKEN);
+
+  var REDUCED = (window.matchMedia && matchMedia("(prefers-reduced-motion: reduce)").matches);
+
+  var css =
+    ".forge-fab{position:fixed;bottom:20px;right:20px;width:56px;height:56px;border-radius:50%;" +
+    "border:0;cursor:pointer;z-index:2147483000;background:" + COLOR + ";color:#fff;" +
+    "box-shadow:0 4px 14px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;" +
+    "padding:0;transition:" + (REDUCED ? "none" : "transform .15s ease") + "}" +
+    ".forge-fab:hover{transform:" + (REDUCED ? "none" : "scale(1.05)") + "}" +
+    ".forge-fab:focus-visible{outline:3px solid rgba(0,0,0,.35);outline-offset:2px}" +
+    ".forge-fab svg{width:26px;height:26px;display:block}" +
+    ".forge-panel{position:fixed;bottom:88px;right:20px;width:400px;height:600px;" +
+    "max-height:calc(100vh - 108px);border:0;border-radius:16px;overflow:hidden;z-index:2147483000;" +
+    "background:#fff;box-shadow:0 12px 40px rgba(0,0,0,.28);display:none}" +
+    ".forge-panel.forge-open{display:block}" +
+    ".forge-panel iframe{width:100%;height:100%;border:0;display:block}" +
+    "@media (max-width:480px){.forge-panel{bottom:0;right:0;left:0;top:0;width:100%;height:100%;" +
+    "max-height:100%;border-radius:0}.forge-fab.forge-hidden{display:none}}";
+  var style = document.createElement("style");
+  style.textContent = css;
+  document.head.appendChild(style);
+
+  var openIcon = '<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 3C6.5 3 2 6.7 2 11.2c0 2.5 1.4 4.7 3.5 6.2-.1.9-.5 2.1-1.3 3.1 1.6-.2 3-.8 4.1-1.6 1.1.3 2.3.5 3.7.5 5.5 0 10-3.7 10-8.2S17.5 3 12 3z"/></svg>';
+  var closeIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>';
+
+  var fab = document.createElement("button");
+  fab.type = "button";
+  fab.className = "forge-fab";
+  fab.setAttribute("aria-haspopup", "dialog");
+  fab.setAttribute("aria-expanded", "false");
+  fab.setAttribute("aria-label", "Open " + TITLE);
+  fab.innerHTML = openIcon;
+
+  var panel = document.createElement("div");
+  panel.className = "forge-panel";
+  panel.setAttribute("role", "dialog");
+  panel.setAttribute("aria-label", TITLE);
+  var iframe = document.createElement("iframe");
+  iframe.title = TITLE;
+  iframe.setAttribute("allow", "clipboard-write");
+  panel.appendChild(iframe);
+
+  var open = false, loaded = false;
+  function setOpen(next) {
+    open = next;
+    if (open && !loaded) { iframe.src = src; loaded = true; } // lazy-load on first open
+    panel.classList.toggle("forge-open", open);
+    fab.classList.toggle("forge-hidden", open);
+    fab.setAttribute("aria-expanded", String(open));
+    fab.setAttribute("aria-label", (open ? "Close " : "Open ") + TITLE);
+    fab.innerHTML = open ? closeIcon : openIcon;
+    if (open) { try { iframe.focus(); } catch (e) {} }
+    else { try { fab.focus(); } catch (e) {} }
+  }
+  fab.addEventListener("click", function () { setOpen(!open); });
+  document.addEventListener("keydown", function (e) { if (e.key === "Escape" && open) setOpen(false); });
+
+  document.body.appendChild(panel);
+  document.body.appendChild(fab);
+
+  // postMessage: accept ONLY forge:-namespaced messages from OUR iframe at the Forge ORIGIN.
+  window.addEventListener("message", function (e) {
+    if (e.origin !== ORIGIN) return;
+    if (e.source !== iframe.contentWindow) return;
+    var m = e.data;
+    if (!m || typeof m !== "object" || typeof m.type !== "string" || m.type.indexOf("forge:") !== 0) return;
+    if (m.type === "forge:ready") {
+      iframe.contentWindow.postMessage({ type: "forge:host", host: location.origin, title: TITLE, color: COLOR }, ORIGIN);
+    } else if (m.type === "forge:close") {
+      setOpen(false);
+    } else if (m.type === "forge:open") {
+      setOpen(true);
+    }
+  });
+})();
diff --git a/apps/web/test/console-smoke.test.tsx b/apps/web/test/console-smoke.test.tsx
new file mode 100644
index 0000000..5601976
--- /dev/null
+++ b/apps/web/test/console-smoke.test.tsx
@@ -0,0 +1,115 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("@/lib/api", async () => {
+  const actual = await vi.importActual<typeof import("@/lib/api")>("@/lib/api");
+  return {
+    ...actual,
+    api: {
+      ...actual.api,
+      getProject: vi.fn(),
+      listSecrets: vi.fn(),
+      listComponents: vi.fn(),
+      listWorkflows: vi.fn(),
+      createRun: vi.fn(),
+      runStreamUrl: vi.fn(),
+      listVersions: vi.fn(),
+      restoreVersion: vi.fn(),
+    },
+    openSSE: vi.fn(),
+  };
+});
+
+import { SettingsScreen } from "@/components/screens/settings";
+import { PlaygroundScreen } from "@/components/screens/playground";
+import { guardCanvasBeforeUnload } from "@/components/screens/workflows";
+import { VersionHistory } from "@/components/version-history";
+import { api, openSSE } from "@/lib/api";
+
+const apiMock = vi.mocked(api);
+const openSSEMock = vi.mocked(openSSE);
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  apiMock.getProject.mockResolvedValue({
+    id: "p1", name: "Forge", slug: "forge", description: "", status: "active", config: {},
+  });
+  apiMock.listSecrets.mockResolvedValue([]);
+  apiMock.listComponents.mockResolvedValue([]);
+  apiMock.listWorkflows.mockResolvedValue([
+    { id: "wf1", project_id: "p1", name: "Support", status: "active", active_version: 1, executable: {}, canvas: {} },
+  ]);
+  apiMock.createRun
+    .mockResolvedValueOnce({ id: "run1", status: "queued", thread_id: "thread-1" })
+    .mockResolvedValueOnce({ id: "run2", status: "queued", thread_id: "thread-2" });
+  apiMock.runStreamUrl.mockImplementation((_pid, _wid, runId) => `/stream/${runId}`);
+  openSSEMock.mockImplementation(async (_url, onFrame) => {
+    onFrame({ event: "done", data: { answer: "Done", total_tokens: 1, total_cost_usd: 0 } });
+  });
+});
+
+describe("Forge console smoke coverage", () => {
+  it("navigates to the Versioning settings section", async () => {
+    const user = userEvent.setup();
+    render(<SettingsScreen project={{ id: "p1" }} />);
+
+    await waitFor(() => expect(apiMock.getProject).toHaveBeenCalledWith("p1"));
+    await user.click(screen.getByRole("button", { name: "Versioning" }));
+
+    expect(screen.getByText("Version history")).toBeInTheDocument();
+    expect(screen.getByText("Versions kept per entity")).toBeInTheDocument();
+  });
+
+  it("Playground reset clears the server-side thread handle", async () => {
+    const user = userEvent.setup();
+    render(<PlaygroundScreen project={{ id: "p1" }} />);
+
+    const composer = await screen.findByPlaceholderText("Message the workflow…");
+    await user.type(composer, "first turn");
+    await user.click(screen.getByRole("button", { name: "Run" }));
+    await waitFor(() => expect(apiMock.createRun).toHaveBeenCalledTimes(1));
+
+    await user.click(screen.getByRole("button", { name: "Reset" }));
+    await user.type(composer, "fresh turn");
+    await user.click(screen.getByRole("button", { name: "Run" }));
+    await waitFor(() => expect(apiMock.createRun).toHaveBeenCalledTimes(2));
+
+    expect(apiMock.createRun.mock.calls[1][3]).toBeUndefined();
+  });
+
+  it("lists and restores a prior entity version", async () => {
+    const user = userEvent.setup();
+    apiMock.listVersions.mockResolvedValue([
+      { id: "v2", version_no: 2, label: "Current", author_email: "dev@forge.test" },
+      { id: "v1", version_no: 1, label: "Before prompt edit", author_email: "dev@forge.test" },
+    ]);
+    apiMock.restoreVersion.mockResolvedValue({ ok: true } as never);
+    const onRestored = vi.fn();
+    render(<VersionHistory entityType="workflow" entityId="wf1" onRestored={onRestored} />);
+
+    await user.click(screen.getByRole("button", { name: "History" }));
+    expect(await screen.findByText("Before prompt edit")).toBeInTheDocument();
+    await user.click(screen.getByTitle("Restore v1"));
+
+    await waitFor(() => expect(apiMock.restoreVersion).toHaveBeenCalledWith("workflow", "wf1", 1));
+    expect(onRestored).toHaveBeenCalledOnce();
+  });
+
+  it("blocks tab unload only when the canvas is dirty", () => {
+    const clean = new Event("beforeunload", { cancelable: true }) as BeforeUnloadEvent;
+    const dirty = new Event("beforeunload", { cancelable: true }) as BeforeUnloadEvent;
+
+    expect(guardCanvasBeforeUnload(false, clean)).toBe(false);
+    expect(clean.defaultPrevented).toBe(false);
+    expect(guardCanvasBeforeUnload(true, dirty)).toBe(true);
+    expect(dirty.defaultPrevented).toBe(true);
+
+    // The helper used by WorkflowCanvas also behaves correctly as an actual event listener.
+    const listener = (event: Event) => guardCanvasBeforeUnload(true, event as BeforeUnloadEvent);
+    window.addEventListener("beforeunload", listener);
+    const dispatched = fireEvent(window, new Event("beforeunload", { cancelable: true }));
+    window.removeEventListener("beforeunload", listener);
+    expect(dispatched).toBe(false);
+  });
+});
diff --git a/apps/web/test/setup.ts b/apps/web/test/setup.ts
new file mode 100644
index 0000000..277a74a
--- /dev/null
+++ b/apps/web/test/setup.ts
@@ -0,0 +1,15 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup } from "@testing-library/react";
+import { afterEach, vi } from "vitest";
+
+afterEach(() => cleanup());
+
+Object.defineProperty(HTMLElement.prototype, "scrollTo", {
+  configurable: true,
+  value: vi.fn(),
+});
+
+Object.defineProperty(window, "confirm", {
+  configurable: true,
+  value: vi.fn(() => true),
+});
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
new file mode 100644
index 0000000..f5fc2f7
--- /dev/null
+++ b/apps/web/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": { "@/*": ["./*"] }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/apps/web/vitest.config.mts b/apps/web/vitest.config.mts
new file mode 100644
index 0000000..9f7f31f
--- /dev/null
+++ b/apps/web/vitest.config.mts
@@ -0,0 +1,18 @@
+import { fileURLToPath } from "node:url";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vitest/config";
+
+const appRoot = fileURLToPath(new URL(".", import.meta.url));
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: { "@": appRoot },
+  },
+  test: {
+    environment: "jsdom",
+    setupFiles: ["./test/setup.ts"],
+    include: ["test/**/*.test.ts", "test/**/*.test.tsx"],
+    restoreMocks: true,
+  },
+});
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..fc42330
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,190 @@
+# Forge - production-shaped local stack: Postgres (app DB + durable checkpointer),
+# Redis (shared rate-limit/idempotency + future worker queue), the API, and the web
+# console. Copy .env.example to .env at the repo root and SET REAL SECRETS before using.
+#
+#   docker compose up --build
+#
+# Notes:
+# - FORGE_ENVIRONMENT=production turns on the hardening guard (validate_production); the
+#   app refuses to boot with default secrets / sqlite / non-durable checkpointer.
+# - The scheduler runs only on the single `api` service (scheduler_leader); scale `api`
+#   replicas freely behind a load balancer - limits/idempotency are shared via Redis.
+
+services:
+  postgres:
+    # pgvector/pgvector ships the `vector` extension (plain postgres:16 does not), so the
+    # pgvector store (FORGE_VECTOR_BACKEND=pgvector) can CREATE EXTENSION vector on first use.
+    image: pgvector/pgvector:pg16
+    environment:
+      POSTGRES_USER: forge
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-forge-dev-pw}
+      POSTGRES_DB: forge
+    volumes:
+      - pgdata:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U forge"]
+      interval: 5s
+      timeout: 3s
+      retries: 10
+
+  redis:
+    image: redis:7-alpine
+    command: ["redis-server", "--save", "", "--appendonly", "no"]
+    healthcheck:
+      test: ["CMD", "redis-cli", "ping"]
+      interval: 5s
+      timeout: 3s
+      retries: 10
+
+  api:
+    build:
+      context: .
+      dockerfile: apps/api/Dockerfile
+    depends_on:
+      postgres:
+        condition: service_healthy
+      redis:
+        condition: service_healthy
+    # Resolve host.docker.internal to the Docker host so tools/knowledge/webhooks can reach a
+    # service running on the host (its localhost != the container's). Docker Desktop (Windows/Mac)
+    # provides this automatically; native Linux needs the host-gateway mapping below. Pair with
+    # FORGE_EGRESS_ALLOW_PRIVATE_HOSTS=["host.docker.internal"] so the SSRF guard permits it.
+    extra_hosts:
+      - "host.docker.internal:host-gateway"
+    environment:
+      # Defaults to production (turns on the hardening guard: refuses default secrets / sqlite /
+      # non-durable checkpointer / non-https public URLs). For a local bring-up on http://localhost
+      # set FORGE_ENVIRONMENT=development in .env - Postgres/pgvector/Redis still run (set below,
+      # env-independent), you just skip the https/trusted-hosts asserts that can't hold on localhost.
+      FORGE_ENVIRONMENT: ${FORGE_ENVIRONMENT:-production}
+      FORGE_DATABASE_URL: postgresql+asyncpg://forge:${POSTGRES_PASSWORD:-forge-dev-pw}@postgres:5432/forge
+      FORGE_CHECKPOINT_BACKEND: postgres
+      # Store embedding vectors in Postgres (reusing FORGE_DATABASE_URL) instead of the embedded
+      # single-writer Chroma index, so api and worker share one vector store across replicas.
+      FORGE_VECTOR_BACKEND: pgvector
+      FORGE_REDIS_URL: redis://redis:6379/0
+      # Run the scheduler/reaper on this single instance (the leader). If you scale `api`
+      # to multiple replicas, keep this on ONE of them only.
+      FORGE_ENABLE_SCHEDULER: "true"
+      FORGE_JWT_SECRET: ${FORGE_JWT_SECRET:?set a strong random secret}
+      FORGE_BOOTSTRAP_ADMIN_EMAIL: ${FORGE_BOOTSTRAP_ADMIN_EMAIL:-admin@forge.local}
+      FORGE_BOOTSTRAP_ADMIN_PASSWORD: ${FORGE_BOOTSTRAP_ADMIN_PASSWORD:?set a real admin password}
+      FORGE_PUBLIC_BASE_URL: ${FORGE_PUBLIC_BASE_URL:-http://localhost:8000}
+      FORGE_PUBLIC_CONSOLE_URL: ${FORGE_PUBLIC_CONSOLE_URL:-http://localhost:3000}
+      FORGE_CORS_ORIGINS: '["http://localhost:3000"]'
+      # Expose the MCP OAuth 2.1 authorization server so MCP clients can authenticate a user by
+      # logging in (in addition to API keys / personal access tokens). Uses FORGE_PUBLIC_BASE_URL
+      # for its discovery + redirect URLs. SECURITY: the consent/login screen is intentionally
+      # minimal and not yet hardened (minimal consent UX, no per-client consent memory, MFA
+      # accounts refused) - see forge/routers/mcp_oauth.py. Override to "false" for a real prod
+      # deploy until it's reviewed.
+      FORGE_MCP_OAUTH_ENABLED: ${FORGE_MCP_OAUTH_ENABLED:-true}
+      # Static bearer that authenticates a trusted server-to-server caller (e.g. an app backend
+      # driving runs on behalf of its users) as a least-privilege service identity. Empty =
+      # disabled. Generate a long random secret and set FORGE_SERVICE_API_TOKEN in .env.
+      FORGE_SERVICE_API_TOKEN: ${FORGE_SERVICE_API_TOKEN:-}
+      # Hosts allowed to resolve to a private/loopback address even with the SSRF guard on
+      # (default-deny, explicit-allow). JSON array. From inside the container "localhost" is the
+      # container itself - use ["host.docker.internal"] to reach a service on the Docker host.
+      FORGE_EGRESS_ALLOW_PRIVATE_HOSTS: ${FORGE_EGRESS_ALLOW_PRIVATE_HOSTS:-}
+      # Suppress IPv6 (AAAA) DNS lookups at the glibc resolver. Docker's embedded resolver
+      # (127.0.0.11) STALLS ~4-5s on the AAAA query for hosts with no IPv6 address (api.openai.com,
+      # ...), and glibc waits for it before falling back to the A record - so the FIRST (cold)
+      # outbound call of every idle connection paid a multi-second penalty (measured: cold OpenAI
+      # call 5.0s -> 0.9s with this set). Must be a real process env var (not set in-code): the
+      # server runs on uvloop, whose C-level resolver bypasses a Python socket.getaddrinfo patch,
+      # and glibc reads RES_OPTIONS once at process start. Needs glibc >= 2.36 (image has 2.41).
+      # Set RES_OPTIONS= (empty) in .env to re-enable IPv6 for an IPv6-only egress network.
+      RES_OPTIONS: ${RES_OPTIONS:-no-aaaa}
+      # Provider keys (set the ones you use):
+      OPENAI_API_KEY: ${OPENAI_API_KEY:-}
+      ANTHROPIC_API_KEY: ${ANTHROPIC_API_KEY:-}
+    volumes:
+      # Persist the Fernet master.key across image rebuilds, and SHARE it with the worker. This is
+      # container-filesystem state (/app/.data), NOT in the pgdata volume, so without this it is
+      # wiped on every `up --build` - regenerating master.key would leave every secret already
+      # stored in Postgres undecryptable. (Vectors now live in Postgres via pgvector, not here.)
+      - forge-data:/app/.data
+    ports:
+      - "8000:8000"
+
+  # Offloaded run execution (webhook/schedule triggers). Scale freely: `--scale worker=N`.
+  worker:
+    build:
+      context: .
+      dockerfile: apps/api/Dockerfile
+    command: ["arq", "forge.worker.WorkerSettings"]
+    # The worker runs arq, not the HTTP server, so the api image's baked HEALTHCHECK
+    # (curl :8000/readyz) can never pass and would leave the container perpetually
+    # "unhealthy" (and hang anything gating on `worker: service_healthy`, incl. scaled
+    # replicas). Disable it: the container's run state already reflects arq liveness.
+    healthcheck:
+      disable: true
+    depends_on:
+      postgres:
+        condition: service_healthy
+      redis:
+        condition: service_healthy
+      # Start only after api has run `alembic upgrade head` and is serving, so a run_job
+      # never hits app tables before they exist.
+      api:
+        condition: service_healthy
+    # Same host-gateway mapping as api, so worker-executed tool runs (webhook/schedule triggers)
+    # can also reach a service on the Docker host via host.docker.internal.
+    extra_hosts:
+      - "host.docker.internal:host-gateway"
+    environment:
+      # Mirror the api's environment (see the note there); defaults to production.
+      FORGE_ENVIRONMENT: ${FORGE_ENVIRONMENT:-production}
+      FORGE_DATABASE_URL: postgresql+asyncpg://forge:${POSTGRES_PASSWORD:-forge-dev-pw}@postgres:5432/forge
+      FORGE_CHECKPOINT_BACKEND: postgres
+      # Same vector store as the api (Postgres/pgvector), so worker-executed ingests/queries hit
+      # the shared vectors rather than a private Chroma index.
+      FORGE_VECTOR_BACKEND: pgvector
+      FORGE_REDIS_URL: redis://redis:6379/0
+      FORGE_JWT_SECRET: ${FORGE_JWT_SECRET:?set a strong random secret}
+      # Not used by the worker (only the api seeds the admin), but the shared production guard
+      # (validate_production) checks it, so provide the same value the api uses.
+      FORGE_BOOTSTRAP_ADMIN_PASSWORD: ${FORGE_BOOTSTRAP_ADMIN_PASSWORD:?set a real admin password}
+      # The worker does not run the scheduler (the api leader does).
+      FORGE_ENABLE_SCHEDULER: "false"
+      # Pin leader off too so the single-scheduler-leader invariant is expressed in config: a
+      # future change that runs the scheduler/reaper on workers can't double-fire across replicas.
+      FORGE_SCHEDULER_LEADER: "false"
+      # Same egress allowances as the api, so worker-executed tool runs (webhook/schedule
+      # triggers) can reach the same internal targets (default-deny, explicit-allow).
+      FORGE_EGRESS_ALLOW_PRIVATE_HOSTS: ${FORGE_EGRESS_ALLOW_PRIVATE_HOSTS:-}
+      # Suppress the slow IPv6/AAAA DNS lookup on cold outbound connections - same fix and rationale
+      # as the api service (see the comment there); the worker makes the same LLM/tool calls.
+      RES_OPTIONS: ${RES_OPTIONS:-no-aaaa}
+      OPENAI_API_KEY: ${OPENAI_API_KEY:-}
+      ANTHROPIC_API_KEY: ${ANTHROPIC_API_KEY:-}
+    volumes:
+      # Same shared volume as api: the worker decrypts run secrets with the SAME master.key.
+      # A separate key here would fail to decrypt anything the api encrypted. (Vectors are shared
+      # via Postgres/pgvector now, not this volume.)
+      - forge-data:/app/.data
+
+  web:
+    build:
+      context: .
+      dockerfile: apps/web/Dockerfile
+      args:
+        # Baked into the standalone rewrite at BUILD time (a standalone build freezes the rewrite
+        # destination; runtime env can't change it). The browser stays same-origin, so this
+        # container-internal host never reaches the client (see apps/web/next.config.mjs).
+        FORGE_API_URL: http://api:8000
+    depends_on:
+      # Gate on api readiness (its /readyz HEALTHCHECK) so the first browser requests aren't
+      # proxied before api has migrated and bound :8000.
+      api:
+        condition: service_healthy
+    ports:
+      - "3000:3000"
+
+volumes:
+  pgdata:
+  # Fernet master.key, shared by api and worker and persisted across rebuilds (container-
+  # filesystem state under /app/.data, not part of the Postgres pgdata volume). Vectors live
+  # in Postgres (pgvector) now, so this volume no longer holds the Chroma index.
+  forge-data:
diff --git a/docs/MANUAL.md b/docs/MANUAL.md
new file mode 100644
index 0000000..eed9d8f
--- /dev/null
+++ b/docs/MANUAL.md
@@ -0,0 +1,386 @@
+# Forge - User Manual
+
+Forge is a self‑hosted platform for **building, testing, and shipping AI agents and
+workflows** - visually, without writing framework code. You wire together nodes (agents,
+tools, knowledge, logic) on a canvas, ground them in your own data, connect them to your
+systems, and deploy them to email, an API, an MCP server, or an embeddable web widget. It
+runs on the open‑source LangChain/LangGraph engine; nothing is sent to a third‑party
+orchestration service.
+
+This manual is written for **everyone** - you don't need to be a developer to follow it.
+
+---
+
+## 1. Getting started
+
+### Logging in
+When you open Forge you'll see a **login screen**.
+- **Dev / first run:** sign in with **`you@forge.local`** / **`forge-admin`**, or click
+  *Create a workspace* to register a fresh account.
+- Need teammates? Open **Settings → Members & Roles** to invite them (owner / admin / editor / viewer / connector roles).
+
+### Creating your first project
+A **project** is a workspace for one assistant or automation - its workflows, tools,
+knowledge, and settings live together and are isolated from other projects.
+
+1. Click **New project**, give it a name.
+2. (Recommended) Open **Settings → API Keys** and paste an OpenAI / Anthropic / Google key
+   under **Model providers**. Until you do, Forge uses an offline “fake” model so you can
+   build and test the *plumbing* without spending anything - but answers won't be real.
+3. Pick a **Default model** under **Settings → General** (e.g. `openai:gpt-4.1-mini`).
+
+### The left sidebar (hover any tab for a tooltip)
+The nav is grouped into **Build**, **Deploy**, and **Observe**, with **Overview** at the top
+and **Settings** pinned at the bottom.
+
+| Group | Tab | What it's for |
+|---|---|---|
+| — | **Overview** | Dashboard: usage, cost, recent activity. |
+| **Build** | **Playground** | Chat with a workflow live to test it (with token + cost metering). |
+| | **Workflows** | The visual canvas - wire nodes into a graph. |
+| | **Agents** | Reusable agent presets (model + prompt + tools + knowledge) to drop into workflows. |
+| | **Tools** | Capabilities an agent can call: REST, GraphQL, Code, SQL, MCP, built‑ins - organized into **tool sets**. |
+| | **Components** | Generative‑UI components an agent can render (tables, cards, forms). |
+| | **Knowledge** | Documents + Q&A that ground answers (RAG). Add text, URLs, files, or crawl a site. |
+| | **Auth Providers** | Reusable credential strategies (Bearer, API key, OAuth…) tools attach to. |
+| | **External MCP** | Register outside MCP servers so their tools can be consumed here. |
+| **Deploy** | **Channels** | Deploy a workflow to an email surface. |
+| | **Triggers** | Event entry points - webhook URLs, schedules, pollers. |
+| | **Connect** | Expose this project - as an MCP server, the run API, or an embeddable web widget. |
+| **Observe** | **Traces** | Per‑run waterfall: model calls, tokens, latency, cost. |
+| | **Evaluations** | Test datasets (input + expected) scored against a workflow. |
+| | **Agent inbox** | Live conversations escalated to a human - reply to resume the run. |
+| — | **Settings** | Model keys & secrets, members & roles, guardrails & egress, budgets, versioning, and more. |
+
+---
+
+## 2. Core concepts
+
+- **Workflow** - a graph of **nodes** wired `start → … → end`. A user message (or a trigger
+  event) flows through it. Built on the Workflows canvas.
+- **Node** - one step. Hover any node in the palette for a description + example.
+- **Agent** - a model with a system prompt, tools, and optional knowledge that *reasons →
+  acts* in a loop until it can answer (the workhorse).
+- **Tool** - an external capability an agent (or a `tool_call` node) can invoke.
+- **Knowledge** - your documents + Q&A pairs, embedded for semantic search (RAG).
+- **Trigger** - what *starts* a workflow (a person chatting, a webhook, a schedule…).
+- **Channel** - where a workflow is *deployed* (email).
+- **State** - the data carried through a run (always includes `messages`; you can add keys).
+
+---
+
+## 3. Workflows & the node catalog
+
+Open **Workflows → New**, then drag/click nodes from the palette and connect them. Click a
+node to configure it in the inspector (friendly forms - no JSON). **Publish** to make it
+live; **Run** (or the Playground) to test.
+
+### Flow
+| Node | What it does | Key config |
+|---|---|---|
+| **Start / End** | Entry / exit markers. | - |
+| **Router** | Branches on a state value (no model call). One case per value + an **Else/Default**. `multi` runs every matching branch in parallel. | `expression` (state key), `cases`, `default` |
+| **Loop** | Repeats a section until a condition is false or a max‑iteration cap. Writes `_loop=continue/done` - pair with a Router that loops the body back. | `max_iter`, `condition` |
+| **Parallel Fanout** | Maps over a list in state - runs a child node **once per item, in parallel**. | `over` (list key), `child_node`, `item_key` |
+| **Join** | Where parallel branches converge before continuing (results aggregate via an add‑reducer key). | `reducer` |
+| **Subworkflow** | Runs **another workflow in this project** as a reusable component. | `workflow_id` |
+
+### Agents & model
+| Node | What it does |
+|---|---|
+| **Agent** | Model + prompt + tools, ReAct loop. Toggle **knowledge** (RAG / Q&A) right on the agent so it searches per sub‑question. |
+| **Deep Agent** | Agent + optional planning / virtual filesystem / **sub‑agents** for long multi‑step tasks. Drag from its **subagents** handle (bottom of the node) to any specialist **Agent** node to make it a callable sub‑agent — the supervisor dispatches it via the `task` tool. Each sub‑agent keeps its own model, tools, and prompt; set the specialist's **description** so the supervisor knows when to call it. |
+| **LLM** | One single model call (cheap rewriting/summarizing). |
+| **Classifier** | One model call picks a label (e.g. intent) into state. `multi_label` writes all that apply. |
+
+### Tools, data & humans
+| Node | What it does |
+|---|---|
+| **Tool Call** | Invokes one specific tool with fixed/mapped arguments (deterministic). |
+| **Transform** | Reshapes state with a JMESPath expression (no model). |
+| **Retrieval** | Pulls knowledge into context - documents (RAG) and/or curated Q&A pairs, each toggleable. Place before a grounded agent. |
+| **Human Input** | Pauses the run for approve/reject in the Playground. |
+| **Human Handoff** | Escalates to a person via the **Agent inbox**; their reply becomes the answer and is delivered over the channel. |
+| **Webhook Out** | POSTs run data to an external URL. |
+| **Emit Event** | Emits a custom event into the live run stream. |
+
+### Triggers (entry points)
+| Node | Starts the workflow when… | Key config |
+|---|---|---|
+| **Webhook** | An external system POSTs to the workflow's hook URL (shown on **Triggers** after publish). | `message_path`, `require_signature`, `secret_ref` |
+| **Schedule** | A recurring time (interval or cron) - sends a fixed message each run. | `every_minutes` or `cron`, `message` |
+| **Email** | Mail arrives in the connected mailbox (configure an Email **channel**). | `mailbox`, `reply` |
+| **App Event** | Polling a URL returns a **new** item (deduped) - turns any feed into events. | `poll_url`, `interval_minutes`, `items_path`, `dedupe_key` |
+
+> **Error fallback:** set a workflow's `on_error.message` (via the Forge Assistant) to send a
+> graceful reply when a run fails instead of erroring silently.
+
+---
+
+## 4. Tools
+
+**Tools → New** then pick a kind. Each tool has a **description** (what the model reads to
+decide when to use it) and is tested live on the right.
+
+| Kind | Configure | Example |
+|---|---|---|
+| **REST** | method + URL (with `{placeholders}`), headers, input fields, optional **response projection** (JMESPath to trim the payload → fewer tokens). | `GET https://api.acme.dev/orders/{order_id}` |
+| **GraphQL** | endpoint + query + variables. | A `query { order(id:$id){…} }` |
+| **Code** | Python `def main(**kwargs): return …` (sandboxed; pure‑stdlib imports) + an **arguments JSON Schema**. | uppercase / reshape / compute |
+| **SQL** | a **connection secret** (DB URL), a parameterized `SELECT … :id`, args schema, read‑only. | look up a customer by id |
+| **MCP** | pick a registered **MCP server** (Connect screen) + the remote tool name. | a tool from a GitHub/Slack MCP server |
+| **Built‑in** | `calculator`, `current_time`, `web_fetch`, `web_search`, `knowledge_search`, **`remember` / `recall`** (long‑term memory). | give an agent memory across chats |
+
+**Built‑ins are project defaults:** every project is auto‑provisioned the built‑ins above; they
+sit pinned at the top of the Tools screen, **can't be deleted** (disable instead), and never travel
+in import/export bundles — so importing a project neither duplicates nor loses them.
+
+**Per‑environment endpoints (`{{env.*}}`):** a REST URL / GraphQL endpoint (or an auth template)
+can reference `{{env.<key>}}`, resolved from the `FORGE_TOOL_VARS` JSON map set per deploy — so the
+**same** tool row points at your dev / qa / prod host without editing it. A referenced key that
+isn't defined **fails the call loudly** (never a broken URL). (`{{ctx.*}}` per‑run values stay
+lenient — a missing one renders empty.)
+
+**Response projection (cost lever):** for REST/GraphQL, the Projection tab trims the raw
+response with JMESPath before it reaches the model - watch the Raw→Projected token meter shrink.
+
+**Reliability:** REST tools support `retry` (with backoff), `rate_limit.per_minute`, and
+`cache.ttl_seconds` (caches idempotent GETs).
+
+**Safety:** every outbound call (tools, webhooks, fetch, crawl) is checked by the **SSRF guard**
+- private/loopback/cloud‑metadata addresses are blocked. A project‑level **egress policy**
+(Settings → Guardrails & Egress) can further allow/deny hosts across every tool at once (§9).
+
+**Tool sets:** group related tools into a **tool set** - a reusable, many‑to‑many folder. Sets
+organize the Tools screen (filter chips + a "Manage toolsets" drawer), can be granted to an agent
+in one click (instead of picking tools one by one), and can be published over the project's MCP
+server as a *toolset* (§10).
+
+---
+
+## 5. Auth Providers & OAuth
+
+**Auth Providers** hold a reusable credential strategy that tools attach to. Secrets are
+referenced (never pasted into config) as `secret://proj/<name>` - set the values in
+**Settings → Secrets**.
+
+| Strategy | Use for |
+|---|---|
+| **Bearer** | A static API token in `Authorization: Bearer …`. |
+| **API key** | A key in a header or query param. |
+| **Basic** | username/password. |
+| **OAuth2 client‑creds** | Machine‑to‑machine token from a token URL. |
+| **OAuth2 (user login)** | 3‑legged OAuth: click **Connect**, grant access in the popup; Forge stores + **auto‑refreshes** tokens. Use for Google/HubSpot/Notion‑style user auth. |
+| **CSRF + session** | Log in, extract a CSRF/session token, inject it on each call. |
+
+**Per‑user connected credentials:** an OAuth2 (user‑login) provider can key its token bundle
+**per end user** instead of sharing one account. Each end user then links their own downstream
+account on the **Connect** screen (§10, *"Connect your accounts"*), and Forge injects *their*
+credential when acting on their behalf over MCP or the run API - no token is ever passed through.
+
+---
+
+## 6. Knowledge (RAG)
+
+**Knowledge → Files** to add sources; **Q&A** for curated question/answer pairs.
+
+- **Add a source:** *Paste text*, a *URL*, *Crawl site* (same‑domain pages), or *Upload file*
+  (.txt/.md/.csv/.json/.html/.pdf). Organize with folders.
+- **Re‑ingest (↻)** a source to re‑fetch/re‑crawl or re‑embed under your current model.
+- **Health banner:** if you switch embedding models, Forge flags sources that need
+  re‑embedding (otherwise they'd silently vanish from search) - click **Re‑embed all**.
+- **Use it:** add a **Retrieval** node before an agent (it grounds on documents and/or Q&A
+  pairs, each toggleable), or enable **knowledge** directly on an Agent node so it searches
+  per sub‑question.
+
+---
+
+## 7. Triggers & Channels (deploying)
+
+**Channels** put a workflow in front of real users:
+
+- **Email** - create an Email channel, enter **SMTP** (host/port/user/from + a password
+  secret) for replies. Your provider (Mailgun/SendGrid/Postmark) posts inbound mail to the
+  channel's inbound URL.
+- **Live handoff** - add a **Human Handoff** node; escalated chats appear in the **Agent
+  inbox**, and your reply is delivered back over the same channel.
+
+**Triggers** lists each workflow's event entry points (webhook URLs, schedules) after you
+publish a workflow containing a trigger node.
+
+---
+
+## 8. Evaluations
+
+**Evaluations → New dataset:** pick a workflow, a scoring mode (`contains` / `exact` /
+`regex` / LLM‑`judge`), and add `{input, expected}` rows. **Run** to get a pass rate - use it
+to catch regressions before publishing a change. The run **streams live**: every case appears
+immediately and resolves as it finishes (a progress bar, a running/pass/fail pill, and per‑case
+latency + tokens), so a big dataset shows progress instead of blocking. Each case runs on behalf
+of you (the launching editor), so per‑user tool auth resolves your connected credential.
+
+---
+
+## 9. Observability & Settings
+
+- **Traces** - every run as a **collapsible span tree** (model calls, tools, chains, sub‑agents)
+  with tokens, latency, and **cost**, nested by real parent/child and labeled with your canvas node
+  names. A deep‑agent dispatch shows as a named `subagent · <name>` span; collapse/expand all.
+- **Playground** streams a live **Agent activity** timeline while a run is in flight — which
+  sub‑agent (prominent) or tool (dimmed) is running, ticking to done/error as each finishes — and
+  attributes the run to you (the signed‑in operator), so per‑user tool auth resolves your credential.
+- **OpenTelemetry** - point `FORGE_OTEL_EXPORTER_OTLP_ENDPOINT` at a collector or Langfuse to export
+  run traces (also configurable under Settings → Observability & Retention).
+
+**Settings** is a section sidebar:
+
+| Section | What's inside |
+|---|---|
+| **General** | Project name/description, **default model**, workspace ID. |
+| **Members & Roles** | Invite members; set roles (owner/admin/editor/viewer/connector). |
+| **API Keys** | **Model providers** (LLM keys) and **Secrets** (write‑only, encrypted, referenced as `secret://proj/<name>`), plus scoped, revocable platform API keys. |
+| **Model Pricing** | Per‑model $/token rates that drive the cost meter. |
+| **Budgets & Quotas** | USD / token caps and allowed‑model enforcement per project. |
+| **Guardrails & Egress** | One I/O policy enforced on every agent (see below). |
+| **Knowledge & Embeddings** | Embedding model, chunking defaults, and re‑embed health. |
+| **Versioning** | Retention limit for entity **version history** (view/restore on each entity). |
+| **Observability & Retention** | OpenTelemetry export + scheduled data‑retention purge. |
+| **Advanced** | Feature flags and a **Danger zone** (delete project). |
+| **History** | A read‑only log of settings changes. |
+
+> Every successful mutation is also recorded to an **audit log** (who changed what, plus auth
+> events), retained per your settings and exportable via the API.
+
+### Guardrails & Egress
+A single, admin‑gated policy that applies to **every agent in the project by default** - no
+per‑agent wiring:
+- **Content guardrails** - redact PII (email / card / IP / MAC / URL), add custom `Label = regex`
+  patterns (phone, national ID…), and block terms, each with a *redact / mask / hash / block / flag*
+  strategy, scanning input and/or output.
+- **Network egress** - block private/loopback hosts and set allow/deny domain lists across every
+  REST/GraphQL tool, webhook, `web_fetch`, and SQL host at once. A project can only **tighten** the
+  server's egress policy, never loosen it.
+
+---
+
+## 10. Connect - MCP server, run API & embed
+
+The **Connect** screen (Deploy → Connect) is where you expose this project to the outside world.
+It covers the **run API**, an **integration reference**, the **MCP server**, and the **Embed**
+widget.
+
+### Expose an MCP server
+Publish your project's tools to any MCP client (Claude Desktop, Cursor, VS Code). The endpoint is a
+single URL - `…/v1/mcp/<project_id>` - and the surface is exactly the **enabled tools of the tool
+sets you toggle "Expose"** (plus, optionally, `run_workflow`, `search_knowledge_base`, and
+`lookup_faq`). Native clients connect **directly over Streamable‑HTTP/SSE** - no `mcp-remote`
+bridge needed.
+
+Choose how clients authenticate:
+- **Project API key** - one shared key sent as `Authorization: Bearer <key>`. Server‑to‑server, no
+  per‑user identity. Generate it on the screen.
+- **Personal access token (PAT)** - a per‑user token (`forge_pat_…`) each teammate generates (and
+  revokes) for themselves; the server then acts as *that* user (entitlements, `{{ctx.*}}`).
+- **OAuth 2.1** *(optional, off by default)* - when enabled, a standard MCP client discovers Forge
+  and the user logs in, with no pre‑shared key. Turn on with `FORGE_MCP_OAUTH_ENABLED` (review the
+  security notes first).
+
+**Connect your accounts:** if the project has per‑user auth providers (§5), each signed‑in user
+links their own downstream account here so Forge can act on their behalf.
+
+> **Connector role:** invite integration users as **connector** (Settings → Members & Roles) - the
+> least‑privileged role. They can authenticate, self‑serve an MCP token, and call tools, but see no
+> projects or settings.
+
+### Consume external MCP servers
+Under **Build → External MCP**, register an outside server (e.g. a GitHub or Slack MCP server),
+then create an **MCP tool** (§4) that calls one of its tools.
+
+### Run API & embed
+The same screen also shows the **run API** (call a workflow server‑to‑server), a copy‑paste
+**integration reference**, and the **Embed** snippet - a floating chat bubble you drop onto any
+website, locked to the origins you allow. End users see only the conversation; steps, tokens, cost,
+and node names stay private in the dashboard.
+
+---
+
+## 11. Import & export (portability)
+
+Move your build between projects - or share it - as portable JSON **bundles**. On the **Tools**,
+**Workflows**, **Agents**, and **Components** screens, use **Export** (pick items → download a
+`forge.bundle/1` file) and **Import** (upload a bundle into the current project).
+
+- **What travels:** the entity's full configuration. **Secret *values* never leave** - only
+  `secret://…` *references* do, so after importing you recreate those secrets (and any missing auth
+  provider) in the target project; the importer tells you which.
+- **Never overwrites:** every import creates fresh items with new IDs, and a name clash is
+  auto‑renamed (`…_imported`). References *within* a bundle (a workflow's subworkflows, an agent's
+  tools/components) are rewritten to the new IDs.
+- **Lands as a draft:** imported workflows arrive unpublished - review, then publish.
+- **Permissions:** importing requires the **editor** role.
+
+---
+
+## 12. Sample use cases (end‑to‑end)
+
+### A. Grounded support chatbot on your website
+1. **Knowledge** → add your help docs (URL/crawl/upload) + a few **Q&A** pairs.
+2. **Workflows** → `start → Retrieval (include Q&A) → Agent → end`. Agent prompt: “Answer only
+   from the knowledge base; if it's not there, say you don't know and offer a human.”
+3. **Publish**, test in the **Playground**.
+4. **Deploy** via **Connect (MCP)** (point an MCP client at it) or call the run API from your
+   own site's chat UI.
+*Result: visitors chat with an assistant grounded in your docs, through your own front‑end.*
+
+### B. Email support agent with human handoff
+1. Build `email_in trigger → Retrieval → Agent → Human Handoff → end`.
+2. **Channels** → **Email** channel with your SMTP settings (+ password secret); wire your
+   inbound‑mail provider to the channel's inbound URL.
+3. When the agent is unsure, the chat lands in the **Agent inbox**; a teammate replies and the
+   answer is emailed back.
+
+### C. Scheduled daily digest
+1. `schedule trigger (cron 0 9 * * 1-5, message "Summarize overnight tickets") → Tool Call
+   (your tickets API) → Agent (summarize) → Webhook Out (post to your channel)`.
+2. Publish - the in‑process scheduler fires it each weekday at 9am.
+
+### D. Multi‑intent router
+1. `start → Classifier (labels: billing, technical, sales) → Router (one case each, Else =
+   general) → a specialist Agent per intent → end`.
+2. For two‑part questions, set Classifier `multi_label` + Router `multi`, and converge on a
+   synthesizer agent before `end`.
+
+### E. Tool‑using agent (e.g. order lookup)
+1. **Tools** → REST tool `get_order` with a response projection; attach an **Auth Provider**.
+2. **Agents** → an agent with that tool. **Workflows** → `start → Agent → end`.
+3. Ask “where's order A‑1007?” - the agent calls the tool and answers from the projected result.
+
+---
+
+## 13. Going to production
+
+Forge runs locally with **zero external infra** (SQLite + embedded Chroma + in‑process
+scheduler). For production, set these and restart (the app **refuses to boot** if they're wrong):
+
+- `FORGE_ENVIRONMENT=production`
+- `FORGE_JWT_SECRET=<strong random>`  ·  `FORGE_AUTH_REQUIRED=true`
+- `FORGE_BOOTSTRAP_ADMIN_PASSWORD=<your own>` (not the dev default)
+- `FORGE_DATABASE_URL=postgresql+psycopg://…` (Postgres), then `alembic upgrade head`
+  (and optionally apply `infra/postgres_rls.sql` for row‑level tenant isolation)
+- `FORGE_PUBLIC_BASE_URL=https://forge.yourco.com` (OAuth redirects + webhook/channel URLs)
+- Optional: `FORGE_REDIS_URL` (multi‑worker), `FORGE_OTEL_*` (tracing), `FORGE_EGRESS_ALLOW_HOSTS`,
+  `FORGE_MCP_OAUTH_ENABLED=true` (delegated OAuth 2.1 for MCP clients).
+
+See `.env.example` for the full, annotated list.
+
+---
+
+## 14. Glossary
+
+- **RAG** - Retrieval‑Augmented Generation: search your docs, feed the best chunks to the model.
+- **ReAct** - the agent loop: reason → call a tool → observe → repeat → answer.
+- **Projection** - trimming a tool's response (JMESPath) so fewer tokens reach the model.
+- **MCP** - Model Context Protocol: a standard way for AI clients to call tools/servers.
+- **Trigger / Channel** - what *starts* a workflow vs. where it's *deployed*.
+- **State / reducer** - the run's data and how parallel writes to a key are merged.
+- **Idempotency key** - a header so a retried request doesn't run twice.
diff --git a/docs/ROADMAP.md b/docs/ROADMAP.md
new file mode 100644
index 0000000..d11b0e7
--- /dev/null
+++ b/docs/ROADMAP.md
@@ -0,0 +1,80 @@
+# Forge Roadmap & Status
+
+Forge implements the original product design end to end. This page tracks what's
+**shipped**, what's **in progress**, and what's **planned** next. Contributions toward any
+planned item are welcome - see [Contributing](../README.md#contributing).
+
+## Shipped
+
+### Core engine
+- Visual workflow compiler on **LangGraph v1** - graphs compiled from a canvas into an executable, with typed state and reducers.
+- Full node catalog: start/end, router, loop, parallel fan-out/join, subworkflow, transform, agent, deep agent, LLM, classifier, tool call, retrieval, Q&A lookup, human input, human handoff, webhook out, emit event.
+- Provider-agnostic models (OpenAI, Anthropic, Google, or any LangChain provider) plus an offline `fake:` model for cost-free building.
+- Reorderable middleware stack (prompt caching, **semantic response cache**, moderation, summarization, guardrails, model fallback, per-tenant budgets, and more).
+- **Run cancellation** and graceful mid-stream error frames.
+- **Durable run streaming**: execution is detached from the SSE connection, so a client disconnect leaves the run going; reconnect with `Last-Event-ID` to replay missed frames and reattach to a still-running run.
+
+### Visual builder
+- React Flow canvas with typed handles, connection validation, minimap, node inspector, save/validate, and a live-run overlay that lights up nodes over SSE.
+- Canvas editing quality-of-life: unsaved-changes guard, undo/redo, and copy/paste.
+- **Entity version history** - every save snapshots; view + restore across workflows, agents, tools, components, auth providers, knowledge sources, and projects, pruned to a configurable retention limit.
+- Agent builder with a "what the model sees" panel (compiled prompt + middleware execution order).
+- **Deep-agent supervisors on the canvas**: a `subagents` handle folds specialist agent nodes into a supervisor as callable sub-agents (org-chart branch), each with its own model/tools/prompt; deep agents build as `create_agent` + only the opt-in deepagents middleware (planning / filesystem / sub-agents / skills).
+- Playground chat wired to the live run stream with token and cost metering, plus Stop and thread reset, and a **live agent-activity timeline** (sub-agent/tool dispatches as they happen). Console runs are attributed to the signed-in operator.
+- Light/dark theme, command palette, and the in-product Forge Assistant.
+
+### Tools & integrations
+- Tool kinds: **REST, GraphQL, Code (sandboxed), SQL, MCP**, and built-ins (calculator, time, web fetch/search, knowledge search, long-term `remember`/`recall` memory).
+- **JMESPath response projection** with a raw-to-projected token meter.
+- **Per-environment endpoints** via `{{env.*}}` (from `FORGE_TOOL_VARS`) so one tool row resolves to your dev/qa/prod host per deploy (missing keys fail loud); built-ins are auto-provisioned into every project and protected from deletion.
+- Reliability: retries with backoff, rate limits, and response caching; an **SSRF guard** on every outbound call.
+- Auth Providers: Bearer, API key, Basic, OAuth2 (client-credentials and 3-legged with auto-refresh), and CSRF/session - backed by encrypted, reference-only secrets.
+- **Tool sets**: many-to-many groups that organize the Tools screen, are granted to an agent in one click, and publish as MCP toolsets.
+- **Per-user connected credentials**: an OAuth provider can key its token bundle per end user (via the connections API), so an agent acts as the acting user - with no token passthrough.
+
+### Knowledge & RAG
+- Ingestion from pasted text, URLs, site crawls, or file uploads; recursive / section / sentence / semantic chunking; folders.
+- **Local open-source embedder (fastembed) by default** - free and offline; provider embedders optional.
+- Vectors in Chroma (embedded, zero-infra) **or pgvector** (Postgres-backed, shared across workers) - selected by the `vector_backend` setting behind one interface; curated Q&A pairs with deflection; a search debugger; and re-embed health checks.
+- Grounded answers: calibrated relevance floor, hybrid cosine thresholding + rerank floor, chunk citations, crawl provenance, and MMR diversity.
+
+### Deploy
+- Channels: **Email**.
+- Triggers: webhook, schedule (interval/cron), inbound email, and polling app-events.
+- An **embeddable web widget** (origin-locked), the run API, and a per-project **MCP server** over native **Streamable-HTTP/SSE** (clients connect directly - no bridge), authenticated by a project key, per-user **personal access token**, or optional **OAuth 2.1** - exposing **tool sets**, knowledge, Q&A, or an entire **workflow as a single tool**, with per-user identity; plus consumption of external MCP servers and a least-privileged **connector** role.
+- **Import / export**: tools, workflows, agents, and components as portable `forge.bundle/1` JSON files (secret values never leave; imports never overwrite).
+- Human-in-the-loop: approval pauses and live handoff to an Agent inbox.
+
+### Observability & quality
+- Per-run **collapsible span tree** with tokens, latency, and cost (real parent/child hierarchy, friendly node names); deep-agent dispatches as named `subagent · <name>` spans; OpenTelemetry / Langfuse export; retriever + embedding spans.
+- **Tool-I/O redaction** on by default in production traces.
+- **Evaluations**: datasets scored by `contains` / `exact` / `regex` / LLM-`judge`, with persisted run history and a regression gate, **streamed live** (per-case status/latency/tokens as each finishes).
+
+### Security & operations
+- Email/password auth with JWT; **refresh-token rotation, logout, password reset + email verification, and optional TOTP MFA**; login rate-limiting.
+- Roles (owner/admin/editor/viewer/connector) plus **per-project RBAC** and **scoped, revocable API keys**; an audit log with pagination + export; per-tenant isolation (row-level security on Postgres).
+- **Project budgets** (USD / token caps) and **allowed-model** enforcement; scheduled **data-retention purge**.
+- **Guardrails & Egress policy** (project-level, admin-gated): PII redaction, blocked terms, and a network allow/deny egress list enforced on every agent by default; a project can only tighten the inherited egress policy.
+- A production hardening guard that refuses to boot with unsafe defaults; a worker dead-letter queue.
+- Zero-infra local stack (SQLite + embedded Chroma + in-process scheduler) that swaps - config-only - to Postgres + pgvector, Redis + an arq worker, and a durable checkpointer. Docker Compose stack included.
+
+## In progress / next
+- pgvector **ANN indexing** (HNSW per embedding dim) - the shared store ships with exact search today.
+- Cross-worker durable streaming: today's reconnect/reattach is in-process; a multi-worker deployment relies on the DB run status + stale-run reaper.
+- Canvas polish: auto-layout ("Tidy") and drag-from-palette.
+- Remote / Docker-isolated code sandbox (a subprocess sandbox ships today).
+- MCP server: stateful sessions + server-push SSE, and a formal security sign-off on the (default-off) OAuth 2.1 authorization server before internet-facing use.
+- Correctness follow-ups: retry exception-name mapping, tenant-budget `jump_to:"end"` semantics, and true guardrail message replacement.
+
+## Planned / exploring
+Where the project is headed. Ideas and pull requests welcome.
+
+- **Connectors** - a library of prebuilt, **one-click sign-in (OAuth)** integrations (Google, Slack, Notion, GitHub, HubSpot, Salesforce, and more) so adding a service is one click instead of hand-configuring a REST tool plus an auth provider.
+- **More channels** - Slack, WhatsApp, Discord, and a standalone hosted web chat.
+- **Template & connector marketplace** - a hosted place to browse and one-click install workflows, agents, components, and connectors (file-based **import/export** ships today).
+- **Multi-modal** - image, file, and voice input/output across agents and channels.
+- **Team collaboration** - multi-user canvas editing, comments, and workflow versioning with diffs.
+- **Governance & SSO** - SAML/OIDC single sign-on, SCIM provisioning, and finer-grained RBAC.
+- **Managed & one-click deploy** - Helm chart / Kubernetes manifests and a hosted option.
+- **Proactive agents** - long-running background and scheduled agents with richer Deep Agent tooling.
+- **Cost & routing** - budget alerts and automatic model routing for cost and latency.
diff --git a/docs/media/Agents.png b/docs/media/Agents.png
new file mode 100644
index 0000000..4c16eea
Binary files /dev/null and b/docs/media/Agents.png differ
diff --git a/docs/media/Components.png b/docs/media/Components.png
new file mode 100644
index 0000000..d48997c
Binary files /dev/null and b/docs/media/Components.png differ
diff --git a/docs/media/Embeddings.png b/docs/media/Embeddings.png
new file mode 100644
index 0000000..1db73d8
Binary files /dev/null and b/docs/media/Embeddings.png differ
diff --git a/docs/media/Forge_demo.mp4 b/docs/media/Forge_demo.mp4
new file mode 100644
index 0000000..a029ce0
Binary files /dev/null and b/docs/media/Forge_demo.mp4 differ
diff --git a/docs/media/Integrations.png b/docs/media/Integrations.png
new file mode 100644
index 0000000..2304b31
Binary files /dev/null and b/docs/media/Integrations.png differ
diff --git a/docs/media/Knowledge.png b/docs/media/Knowledge.png
new file mode 100644
index 0000000..71745a9
Binary files /dev/null and b/docs/media/Knowledge.png differ
diff --git a/docs/media/Knowledge_storage_debugger.png b/docs/media/Knowledge_storage_debugger.png
new file mode 100644
index 0000000..e702b45
Binary files /dev/null and b/docs/media/Knowledge_storage_debugger.png differ
diff --git a/docs/media/Settings.png b/docs/media/Settings.png
new file mode 100644
index 0000000..03f85c5
Binary files /dev/null and b/docs/media/Settings.png differ
diff --git a/docs/media/Tools.png b/docs/media/Tools.png
new file mode 100644
index 0000000..708b922
Binary files /dev/null and b/docs/media/Tools.png differ
diff --git a/docs/media/Tools_dashboard.png b/docs/media/Tools_dashboard.png
new file mode 100644
index 0000000..6a35eb2
Binary files /dev/null and b/docs/media/Tools_dashboard.png differ
diff --git a/docs/media/Traces.png b/docs/media/Traces.png
new file mode 100644
index 0000000..9884db4
Binary files /dev/null and b/docs/media/Traces.png differ
diff --git a/docs/media/Workflow.png b/docs/media/Workflow.png
new file mode 100644
index 0000000..52fe061
Binary files /dev/null and b/docs/media/Workflow.png differ
diff --git a/docs/media/forge-assistant-demo.mp4 b/docs/media/forge-assistant-demo.mp4
new file mode 100644
index 0000000..83ebd5c
Binary files /dev/null and b/docs/media/forge-assistant-demo.mp4 differ
diff --git a/infra/postgres_rls.sql b/infra/postgres_rls.sql
new file mode 100644
index 0000000..9cfc0f6
--- /dev/null
+++ b/infra/postgres_rls.sql
@@ -0,0 +1,52 @@
+-- Postgres Row-Level Security for Forge (defense-in-depth tenant isolation).
+--
+-- Forge already scopes every query by tenant_id (forge.db.scoping.tenant_scoped). RLS
+-- makes that a DB-level guarantee: even a query that forgets the filter returns only the
+-- current tenant's rows. Apply this AFTER `alembic upgrade head` on a Postgres database.
+--
+-- NOTE: the version-history, eval-history, and platform-hardening tables (entity_versions,
+-- eval_runs, eval_results, api_keys, project_members, user_security) are created by Alembic
+-- migration 0004 - run `alembic upgrade head` before applying this file.
+--
+-- Runtime: the application must set the tenant for each connection/transaction, e.g.
+--   SET LOCAL app.current_tenant = '<tenant-uuid>';
+-- (run it at the start of each request's DB transaction). With no setting, policies match
+-- nothing, so a misconfigured connection is fail-closed.
+
+DO $$
+DECLARE t text;
+BEGIN
+  FOREACH t IN ARRAY ARRAY[
+    'users','projects','workflows','tools','agents','auth_providers','secrets',
+    'kb_sources','qa_pairs','mcp_clients','threads','runs','traces','spans',
+    'triggers','channels','handoff_requests','datasets','memories',
+    'entity_versions','eval_runs','eval_results',
+    'api_keys','project_members','user_security'
+  ]
+  LOOP
+    EXECUTE format('ALTER TABLE %I ENABLE ROW LEVEL SECURITY;', t);
+    EXECUTE format('ALTER TABLE %I FORCE ROW LEVEL SECURITY;', t);
+    EXECUTE format($f$
+      CREATE POLICY tenant_isolation ON %I
+        USING (tenant_id = current_setting('app.current_tenant', true))
+        WITH CHECK (tenant_id = current_setting('app.current_tenant', true));
+    $f$, t);
+  END LOOP;
+END $$;
+
+-- audit_logs: tenant-isolated AND append-only (finding g). SELECT/INSERT/DELETE are permitted
+-- (DELETE only serves the time-based retention purge in services/retention.py); there is
+-- deliberately NO "FOR UPDATE" policy, so under FORCE RLS an UPDATE matches no policy and is
+-- denied - existing audit records are immutable and can never be silently rewritten.
+ALTER TABLE audit_logs ENABLE ROW LEVEL SECURITY;
+ALTER TABLE audit_logs FORCE ROW LEVEL SECURITY;
+DROP POLICY IF EXISTS tenant_isolation ON audit_logs;
+DROP POLICY IF EXISTS audit_select ON audit_logs;
+DROP POLICY IF EXISTS audit_insert ON audit_logs;
+DROP POLICY IF EXISTS audit_delete ON audit_logs;
+CREATE POLICY audit_select ON audit_logs FOR SELECT
+  USING (tenant_id = current_setting('app.current_tenant', true));
+CREATE POLICY audit_insert ON audit_logs FOR INSERT
+  WITH CHECK (tenant_id = current_setting('app.current_tenant', true));
+CREATE POLICY audit_delete ON audit_logs FOR DELETE
+  USING (tenant_id = current_setting('app.current_tenant', true));
diff --git a/packages/schemas/forge/auth_provider.json b/packages/schemas/forge/auth_provider.json
new file mode 100644
index 0000000..dee9647
--- /dev/null
+++ b/packages/schemas/forge/auth_provider.json
@@ -0,0 +1,117 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "forge/auth_provider",
+  "type": "object",
+  "required": ["name", "kind"],
+  "properties": {
+    "name": { "$ref": "forge/common#/$defs/Identifier" },
+    "kind": { "type": "string", "enum": ["csrf_session", "oauth2_client_credentials", "oauth2_authorization_code", "bearer", "basic", "api_key", "custom_script"], "x-ui": { "widget": "segmented" } },
+    "credentials_ref": { "$ref": "forge/common#/$defs/SecretRef" },
+    "cache_ttl_seconds": { "type": "integer", "default": 1800 },
+    "refresh_on": { "type": "array", "items": { "type": "integer" }, "default": [401, 403] },
+    "per_user_context_keys": { "type": "array", "items": { "type": "string" }, "description": "Context keys (e.g. csrf, session from the widget) that vary the cache key and feed templates as {{ctx.*}}." },
+    "token_ctx_key": { "type": "string", "description": "Per-user bearer/api_key only: a run-context key (X-Forge-Context) whose value is used as the token when present, taking precedence over the stored per-user connection. Lets a server-to-server caller (e.g. a web chat) forward the acting user's token inline while MCP/console fall back to the stored credential." },
+    "extra_headers": { "type": "object", "additionalProperties": { "type": "string" }, "x-ui": { "widget": "rows-table", "section": "Extra headers" }, "description": "Fixed headers stamped on every outbound call in addition to the primary auth header. Each value is a literal OR a secret:// ref (resolved from the secret store). Define shared service/attestation headers (e.g. X-Forge-Client-Id, a service token) once here instead of hardcoding them per tool." }
+  },
+  "allOf": [
+    { "if": { "properties": { "kind": { "const": "csrf_session" } } }, "then": { "$ref": "#/$defs/FetchExtractInject" } },
+    { "if": { "properties": { "kind": { "const": "oauth2_client_credentials" } } }, "then": { "$ref": "#/$defs/OAuth2" } },
+    { "if": { "properties": { "kind": { "const": "oauth2_authorization_code" } } }, "then": { "$ref": "#/$defs/OAuth2AuthCode" } },
+    { "if": { "properties": { "kind": { "const": "bearer" } } }, "then": { "$ref": "#/$defs/Bearer" } },
+    { "if": { "properties": { "kind": { "const": "basic" } } }, "then": { "$ref": "#/$defs/Basic" } },
+    { "if": { "properties": { "kind": { "const": "api_key" } } }, "then": { "$ref": "#/$defs/ApiKey" } },
+    { "if": { "properties": { "kind": { "const": "custom_script" } } }, "then": { "$ref": "#/$defs/CustomScript" } }
+  ],
+  "$defs": {
+    "ExtractRule": {
+      "type": "object",
+      "required": ["name", "from"],
+      "properties": {
+        "name": { "type": "string" },
+        "from": { "type": "string", "enum": ["header", "cookie", "json"] },
+        "header": { "type": "string" },
+        "cookie": { "type": "string" },
+        "json_path": { "type": "string" },
+        "kind": { "type": "string", "enum": ["value", "ttl"], "default": "value" }
+      }
+    },
+    "InjectRule": {
+      "type": "object",
+      "required": ["to", "name", "value"],
+      "properties": {
+        "to": { "type": "string", "enum": ["header", "cookie", "query"] },
+        "name": { "type": "string" },
+        "value": { "$ref": "forge/common#/$defs/TemplateString", "x-ui": { "widget": "token-template", "tokens": ["extracted"] } }
+      }
+    },
+    "FetchExtractInject": {
+      "required": ["token_fetch", "extract", "inject"],
+      "properties": {
+        "token_fetch": {
+          "type": "object",
+          "required": ["method", "url"],
+          "x-ui": { "section": "Token fetch" },
+          "properties": {
+            "method": { "type": "string", "enum": ["GET", "POST"] },
+            "url": { "type": "string" },
+            "headers": { "type": "object", "x-ui": { "widget": "token-template", "tokens": ["cred", "ctx"] } },
+            "body": { "type": "object", "x-ui": { "widget": "token-template", "tokens": ["cred", "ctx"] } }
+          }
+        },
+        "extract": { "type": "array", "items": { "$ref": "#/$defs/ExtractRule" }, "x-ui": { "widget": "rows-table", "section": "Extract" } },
+        "inject": { "type": "array", "items": { "$ref": "#/$defs/InjectRule" }, "x-ui": { "widget": "rows-table", "section": "Inject" } }
+      }
+    },
+    "OAuth2": {
+      "required": ["token_url"],
+      "properties": {
+        "token_url": { "type": "string" },
+        "scope": { "type": "string" },
+        "client_id_ref": { "$ref": "forge/common#/$defs/SecretRef" },
+        "client_secret_ref": { "$ref": "forge/common#/$defs/SecretRef" },
+        "audience": { "type": "string" }
+      }
+    },
+    "OAuth2AuthCode": {
+      "required": ["authorize_url", "token_url"],
+      "properties": {
+        "authorize_url": { "type": "string", "x-ui": { "help": "Provider's authorization endpoint (the user is redirected here to grant access)." } },
+        "token_url": { "type": "string" },
+        "scope": { "type": "string" },
+        "client_id_ref": { "$ref": "forge/common#/$defs/SecretRef" },
+        "client_secret_ref": { "$ref": "forge/common#/$defs/SecretRef" },
+        "redirect_uri": { "type": "string", "description": "Optional override; defaults to {oauth_redirect_base}/v1/oauth/callback." },
+        "header_name": { "type": "string", "default": "Authorization" },
+        "prefix": { "type": "string", "default": "Bearer " },
+        "token_bundle_ref": { "$ref": "forge/common#/$defs/SecretRef", "description": "Where the connected access/refresh tokens are stored (set by the connect flow)." }
+      }
+    },
+    "Bearer": {
+      "properties": {
+        "token_ref": { "$ref": "forge/common#/$defs/SecretRef" },
+        "header_name": { "type": "string", "default": "Authorization" },
+        "prefix": { "type": "string", "default": "Bearer " }
+      }
+    },
+    "Basic": {
+      "properties": {
+        "username_ref": { "$ref": "forge/common#/$defs/SecretRef" },
+        "password_ref": { "$ref": "forge/common#/$defs/SecretRef" }
+      }
+    },
+    "ApiKey": {
+      "required": ["in", "name"],
+      "properties": {
+        "in": { "type": "string", "enum": ["header", "query"] },
+        "name": { "type": "string" },
+        "value_ref": { "$ref": "forge/common#/$defs/SecretRef" }
+      }
+    },
+    "CustomScript": {
+      "required": ["source"],
+      "properties": {
+        "source": { "type": "string", "x-ui": { "widget": "code", "language": "python", "help": "RestrictedPython returning {headers, cookies, ttl}. Advanced - audited." } }
+      }
+    }
+  }
+}
diff --git a/packages/schemas/forge/common.json b/packages/schemas/forge/common.json
new file mode 100644
index 0000000..7fc10fc
--- /dev/null
+++ b/packages/schemas/forge/common.json
@@ -0,0 +1,68 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "forge/common",
+  "$defs": {
+    "IOType": {
+      "type": "string",
+      "enum": ["messages", "text", "json", "tool", "embedding", "vector", "any", "control"],
+      "description": "Port data type. Connection valid iff source/target compatible; 'any' matches all; 'control' only connects to 'control'."
+    },
+    "Port": {
+      "type": "object",
+      "required": ["id", "io_type", "direction"],
+      "properties": {
+        "id": { "type": "string", "pattern": "^[a-z0-9_]+$" },
+        "label": { "type": "string" },
+        "io_type": { "$ref": "forge/common#/$defs/IOType" },
+        "direction": { "type": "string", "enum": ["in", "out"] },
+        "required": { "type": "boolean", "default": true },
+        "many": { "type": "boolean", "default": false, "description": "Accepts/produces multiple connections (e.g. fanout/join control ports)." }
+      }
+    },
+    "ModelRef": {
+      "type": "string",
+      "description": "Provider-prefixed model id, e.g. 'anthropic:claude-sonnet-4-6', 'openai:gpt-5.4', 'google_genai:gemini-3.1-pro-preview', or a gateway 'litellm:...'/'openrouter:...'.",
+      "x-ui": { "widget": "model-picker" }
+    },
+    "ContextSize": {
+      "type": "array",
+      "minItems": 2,
+      "maxItems": 2,
+      "prefixItems": [
+        { "type": "string", "enum": ["tokens", "messages", "fraction"] },
+        { "type": "number" }
+      ],
+      "description": "LangChain ContextSize tuple, e.g. ['tokens',4000] or ['fraction',0.8]."
+    },
+    "TemplateString": {
+      "type": "string",
+      "description": "May contain {{...}} token references resolved at runtime."
+    },
+    "Identifier": {
+      "type": "string",
+      "pattern": "^[a-zA-Z0-9_-]+$",
+      "description": "snake_case/kebab; no spaces (provider compatibility)."
+    },
+    "SecretRef": {
+      "type": "string",
+      "pattern": "^(secret|vault)://.+",
+      "description": "Reference to a stored secret; never a plaintext value.",
+      "x-ui": { "widget": "secret-ref" }
+    },
+    "Expression": {
+      "type": "string",
+      "description": "RestrictedPython expression evaluated over the run state/context. No imports, no attribute escapes."
+    },
+    "RetryPolicy": {
+      "type": "object",
+      "properties": {
+        "max_retries": { "type": "integer", "minimum": 0, "default": 2 },
+        "backoff_factor": { "type": "number", "default": 2.0 },
+        "initial_delay": { "type": "number", "default": 1.0 },
+        "max_delay": { "type": "number", "default": 60.0 },
+        "jitter": { "type": "boolean", "default": true },
+        "retry_on": { "type": "array", "items": { "type": "string" }, "description": "Failure kinds to retry: exception, timeout, connection, http_error, value_error, key_error, runtime_error. Empty = retry any exception." }
+      }
+    }
+  }
+}
diff --git a/packages/schemas/forge/middleware.json b/packages/schemas/forge/middleware.json
new file mode 100644
index 0000000..91a0467
--- /dev/null
+++ b/packages/schemas/forge/middleware.json
@@ -0,0 +1,205 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "forge/middleware",
+  "$defs": {
+    "MiddlewareEntry": {
+      "type": "object",
+      "required": ["type"],
+      "properties": {
+        "type": { "type": "string", "description": "Middleware type key (see config_schemas)." },
+        "enabled": { "type": "boolean", "default": true },
+        "config": { "type": "object", "description": "Validated against the per-type schema in config_schemas." }
+      },
+      "x-ui": {
+        "category-map": {
+          "summarization": "context", "context_editing": "context", "todo": "context",
+          "pii": "safety", "guardrail_regex": "safety", "openai_moderation": "safety",
+          "tool_retry": "reliability", "model_retry": "reliability", "model_fallback": "reliability",
+          "model_call_limit": "cost", "tool_call_limit": "cost", "tenant_budget": "cost", "llm_tool_selector": "cost",
+          "semantic_cache": "cost",
+          "human_in_the_loop": "human",
+          "anthropic_prompt_caching": "provider",
+          "tool_emulator": "testing",
+          "dynamic_model_by_state": "advanced", "tool_filter_by_context": "advanced"
+        }
+      }
+    }
+  },
+  "config_schemas": {
+    "summarization": {
+      "type": "object",
+      "properties": {
+        "model": { "$ref": "forge/common#/$defs/ModelRef" },
+        "trigger": { "oneOf": [{ "$ref": "forge/common#/$defs/ContextSize" }, { "type": "array", "items": { "$ref": "forge/common#/$defs/ContextSize" } }] },
+        "keep": { "$ref": "forge/common#/$defs/ContextSize" },
+        "summary_prompt": { "type": "string", "x-ui": { "widget": "textarea", "advanced": true } }
+      },
+      "x-ui": { "help": "Summarize older messages when the conversation grows past the trigger; keep the most recent." }
+    },
+    "human_in_the_loop": {
+      "type": "object",
+      "required": ["interrupt_on"],
+      "properties": {
+        "interrupt_on": {
+          "type": "object",
+          "additionalProperties": {
+            "oneOf": [
+              { "type": "boolean" },
+              { "type": "object", "properties": { "allowed_decisions": { "type": "array", "items": { "type": "string", "enum": ["approve", "edit", "reject"] } } } }
+            ]
+          },
+          "x-ui": { "widget": "rows-table", "columns": ["tool", "allowed_decisions"] }
+        }
+      },
+      "x-ui": { "help": "Pause for human approval before chosen tools run. Requires a checkpointer." }
+    },
+    "model_call_limit": {
+      "type": "object",
+      "properties": {
+        "thread_limit": { "type": "integer" },
+        "run_limit": { "type": "integer" },
+        "exit_behavior": { "type": "string", "enum": ["end", "error"], "default": "end" }
+      }
+    },
+    "tool_call_limit": {
+      "type": "object",
+      "properties": {
+        "tool_name": { "type": "string", "x-ui": { "widget": "reference", "refType": "tool" } },
+        "thread_limit": { "type": "integer" },
+        "run_limit": { "type": "integer" },
+        "exit_behavior": { "type": "string", "enum": ["continue", "error", "end"], "default": "continue" }
+      }
+    },
+    "model_fallback": {
+      "type": "object",
+      "required": ["models"],
+      "properties": {
+        "models": { "type": "array", "items": { "$ref": "forge/common#/$defs/ModelRef" }, "minItems": 1, "x-ui": { "widget": "chips", "help": "Tried in order if the primary model fails." } }
+      }
+    },
+    "pii": {
+      "type": "object",
+      "required": ["pii_type"],
+      "properties": {
+        "pii_type": { "type": "string", "description": "email|credit_card|ip|mac_address|url|<custom>" },
+        "strategy": { "type": "string", "enum": ["block", "redact", "mask", "hash"], "default": "redact" },
+        "detector": { "type": "string", "description": "Regex pattern for custom types.", "x-ui": { "widget": "mono", "advanced": true } },
+        "apply_to_input": { "type": "boolean", "default": true },
+        "apply_to_output": { "type": "boolean", "default": false },
+        "apply_to_tool_results": { "type": "boolean", "default": false }
+      }
+    },
+    "todo": {
+      "type": "object",
+      "properties": { "system_prompt": { "type": "string", "x-ui": { "widget": "textarea", "advanced": true } } }
+    },
+    "llm_tool_selector": {
+      "type": "object",
+      "properties": {
+        "model": { "$ref": "forge/common#/$defs/ModelRef" },
+        "max_tools": { "type": "integer" },
+        "always_include": { "type": "array", "items": { "type": "string" }, "x-ui": { "widget": "chips", "refType": "tool" } }
+      },
+      "x-ui": { "help": "Pre-select relevant tools before the main model call (saves tokens when many tools exist)." }
+    },
+    "tool_retry": {
+      "allOf": [{ "$ref": "forge/common#/$defs/RetryPolicy" }],
+      "properties": {
+        "tools": { "type": "array", "items": { "type": "string" }, "x-ui": { "widget": "chips", "refType": "tool" } },
+        "on_failure": { "type": "string", "enum": ["return_message", "raise", "continue"], "default": "return_message" }
+      }
+    },
+    "model_retry": {
+      "allOf": [{ "$ref": "forge/common#/$defs/RetryPolicy" }],
+      "properties": { "on_failure": { "type": "string", "enum": ["continue", "error"], "default": "continue" } }
+    },
+    "tool_emulator": {
+      "type": "object",
+      "properties": {
+        "tools": { "type": "array", "items": { "type": "string" }, "x-ui": { "widget": "chips", "refType": "tool" } },
+        "model": { "$ref": "forge/common#/$defs/ModelRef" }
+      },
+      "x-ui": { "help": "Emulate tool outputs with an LLM (no real calls). For testing." }
+    },
+    "context_editing": {
+      "type": "object",
+      "properties": {
+        "edits": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "trigger": { "type": "integer", "default": 100000 },
+              "keep": { "type": "integer", "default": 3 },
+              "clear_at_least": { "type": "integer", "default": 0 },
+              "clear_tool_inputs": { "type": "boolean", "default": false },
+              "exclude_tools": { "type": "array", "items": { "type": "string" } },
+              "placeholder": { "type": "string", "default": "[cleared]" }
+            }
+          }
+        }
+      },
+      "x-ui": { "help": "Clear older tool outputs once the conversation passes the trigger; keep the most recent N." }
+    },
+    "anthropic_prompt_caching": {
+      "type": "object",
+      "properties": { "ttl": { "type": "string", "enum": ["5m", "1h"], "default": "5m" } },
+      "x-ui": { "help": "Cache the system prompt block on Anthropic models (cost/latency).", "showWhen": "model.startsWith(anthropic)" }
+    },
+    "openai_moderation": {
+      "type": "object",
+      "properties": {
+        "apply_to_input": { "type": "boolean", "default": true },
+        "apply_to_output": { "type": "boolean", "default": true }
+      }
+    },
+    "dynamic_model_by_state": {
+      "type": "object",
+      "required": ["rules"],
+      "properties": {
+        "rules": {
+          "type": "array",
+          "items": { "type": "object", "properties": { "when": { "$ref": "forge/common#/$defs/Expression" }, "use": { "$ref": "forge/common#/$defs/ModelRef" } } },
+          "x-ui": { "widget": "rows-table" }
+        },
+        "default": { "$ref": "forge/common#/$defs/ModelRef" }
+      },
+      "x-ui": { "help": "Switch model at runtime based on state (compiles to @wrap_model_call)." }
+    },
+    "tool_filter_by_context": {
+      "type": "object",
+      "properties": {
+        "expose_when": { "type": "object", "description": "e.g. {role:['admin']} matched against runtime.context." },
+        "tools": { "type": "array", "items": { "type": "string" }, "x-ui": { "widget": "chips", "refType": "tool" } }
+      },
+      "x-ui": { "help": "Show/hide tools at runtime by context (auth state, role, flags)." }
+    },
+    "guardrail_regex": {
+      "type": "object",
+      "properties": {
+        "patterns": { "type": "array", "items": { "type": "string" }, "x-ui": { "widget": "chips" } },
+        "on_match": { "type": "string", "enum": ["block", "redact", "flag"], "default": "block" },
+        "apply_to": { "type": "string", "enum": ["input", "output", "both"], "default": "output" }
+      }
+    },
+    "tenant_budget": {
+      "type": "object",
+      "properties": {
+        "max_usd_per_thread": { "type": "number" },
+        "max_tokens_per_run": { "type": "integer" },
+        "on_exceed": { "type": "string", "enum": ["end", "error"], "default": "end" }
+      },
+      "x-ui": { "help": "Stop the run when accumulated cost/tokens exceed the cap (before_model)." }
+    },
+    "semantic_cache": {
+      "type": "object",
+      "properties": {
+        "threshold": { "type": "number", "minimum": 0, "maximum": 1, "default": 0.95, "description": "Minimum cosine similarity for a cached answer to be reused. High by design - a wrong cache hit is worse than a miss." },
+        "ttl": { "type": "integer", "default": 3600, "description": "Seconds a cached answer stays valid." },
+        "scope": { "type": "string", "default": "default", "description": "Cache partition (e.g. per-locale/per-tenant-segment); questions only match within the same scope." },
+        "min_question_chars": { "type": "integer", "default": 8, "description": "Skip caching for questions shorter than this (too generic to key on)." }
+      },
+      "x-ui": { "help": "Reuse a previous answer when a semantically-equivalent question was already answered - skips the model/tool loop entirely on a hit." }
+    }
+  }
+}
diff --git a/packages/schemas/forge/nodes/agent.json b/packages/schemas/forge/nodes/agent.json
new file mode 100644
index 0000000..832f70e
--- /dev/null
+++ b/packages/schemas/forge/nodes/agent.json
@@ -0,0 +1,173 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "forge/nodes/agent",
+  "type": "object",
+  "anyOf": [{ "required": ["model"] }, { "required": ["agent_ref"] }],
+  "properties": {
+    "agent_ref": { "type": "string", "description": "Id of a saved Agent preset this node mirrors. When set, the saved agent's config drives this node (live - edits in the Agents tab apply).", "x-ui": { "widget": "reference", "refType": "agent", "section": "Flavor", "order": 0 } },
+    "flavor": { "type": "string", "enum": ["agent", "deep_agent"], "default": "agent", "x-ui": { "widget": "segmented", "order": 1, "section": "Flavor" } },
+    "name": { "$ref": "forge/common#/$defs/Identifier", "x-ui": { "section": "Flavor" } },
+    "description": { "type": "string", "description": "When this agent is used as a deep-agent sub-agent, the supervisor reads this to decide when to call it (like a tool description).", "x-ui": { "section": "Flavor", "widget": "textarea" } },
+    "model": { "$ref": "forge/common#/$defs/ModelRef", "x-ui": { "section": "Model", "order": 2 } },
+    "model_params": {
+      "type": "object",
+      "x-ui": { "section": "Model", "advanced": true },
+      "properties": {
+        "temperature": { "type": "number" },
+        "max_tokens": { "type": "integer" },
+        "timeout": { "type": "integer" },
+        "base_url": { "type": "string" }
+      }
+    },
+    "dynamic_model": {
+      "type": "object",
+      "x-ui": { "section": "Model", "advanced": true },
+      "description": "Compiles to a @wrap_model_call middleware.",
+      "properties": {
+        "enabled": { "type": "boolean", "default": false },
+        "rules": {
+          "type": "array",
+          "items": { "type": "object", "required": ["when", "use"], "properties": { "when": { "$ref": "forge/common#/$defs/Expression" }, "use": { "$ref": "forge/common#/$defs/ModelRef" } } },
+          "x-ui": { "widget": "rows-table" }
+        },
+        "default": { "$ref": "forge/common#/$defs/ModelRef" }
+      }
+    },
+    "system_prompt": { "type": "string", "x-ui": { "widget": "textarea", "section": "Instructions", "order": 3, "modelView": true } },
+    "dynamic_prompt": {
+      "type": "object",
+      "x-ui": { "section": "Instructions", "advanced": true },
+      "properties": {
+        "enabled": { "type": "boolean" },
+        "rules": {
+          "type": "array",
+          "items": { "type": "object", "properties": { "when": { "$ref": "forge/common#/$defs/Expression" }, "prompt": { "type": "string" } } },
+          "x-ui": { "widget": "rows-table" }
+        }
+      }
+    },
+    "tools": { "type": "array", "items": { "type": "string" }, "description": "Tool ids (incl. MCP tool ids) available to the agent.", "x-ui": { "widget": "chips", "refType": "tool", "section": "Tools", "order": 4 } },
+    "toolsets": { "type": "array", "items": { "type": "string" }, "description": "Tool set ids granted to the agent - every tool in each set becomes available (in addition to any individually-listed tools).", "x-ui": { "widget": "chips", "refType": "tool_set", "section": "Tools", "order": 4.5 } },
+    "knowledge": {
+      "type": "object",
+      "description": "Built-in knowledge-base access for the agent (no separate Tool needed). Compiles to agent-callable tools: RAG over documents and/or curated Q&A lookup, each scoped by folders/kinds. Prefer this over a fixed retrieval node for conversational or multi-part agents.",
+      "x-ui": { "section": "Knowledge", "order": 5 },
+      "properties": {
+        "rag": {
+          "type": "object",
+          "description": "Document search (RAG) as a tool the agent calls per sub-question.",
+          "properties": {
+            "enabled": { "type": "boolean", "default": false },
+            "folders": { "type": "array", "items": { "type": "string" }, "x-ui": { "widget": "chips", "refType": "kb_folder" }, "description": "Restrict to these knowledge folders (empty = all)." },
+            "top_k": { "type": "integer", "default": 4, "description": "Document chunks returned per search." },
+            "min_score": { "type": "number", "default": 0.18, "description": "Drop chunks below this cosine similarity so off-topic queries surface nothing. Not applied when rerank is on (the cross-encoder score is on a different scale)." },
+            "hybrid": { "type": "boolean", "default": false, "description": "Blend lexical BM25 keyword ranking with vector search (RRF) so exact terms - codes, names, SKUs - aren't missed." },
+            "rerank": { "type": "boolean", "default": false, "description": "Two-stage retrieval: a local cross-encoder re-scores the shortlist and keeps only the best matches. Big accuracy boost; adds some latency. Runs offline on CPU (no extra cost)." },
+            "rerank_top_n": { "type": "integer", "description": "How many chunks to pull into the rerank shortlist before the cross-encoder trims them to top_k (only when rerank is on). Leave unset to auto-size (roughly 6× top_k, minimum 25)." }
+          }
+        },
+        "qa": {
+          "type": "object",
+          "description": "FAQ / Q&A lookup as a tool the agent calls for common questions.",
+          "properties": {
+            "enabled": { "type": "boolean", "default": false },
+            "kinds": { "type": "array", "items": { "type": "string" }, "x-ui": { "widget": "chips", "refType": "qa_kind" }, "description": "Restrict to these Q&A kinds/categories (empty = all)." },
+            "threshold": { "type": "number", "default": 0.3, "description": "Minimum similarity for a Q&A pair to be returned." },
+            "top_k": { "type": "integer", "default": 3, "description": "Q&A pairs returned per lookup." }
+          }
+        }
+      }
+    },
+    "mcp_servers": {
+      "type": "array",
+      "items": { "type": "string" },
+      "description": "Registered MCP servers (by id) this agent can use - each server's enabled tools become agent-callable.",
+      "x-ui": { "widget": "chips", "refType": "mcp_client", "section": "MCP Servers", "order": 5.5 }
+    },
+    "response_format": { "$ref": "#/$defs/ResponseFormat", "x-ui": { "section": "Output", "order": 6 } },
+    "middleware": { "type": "array", "items": { "$ref": "forge/middleware#/$defs/MiddlewareEntry" }, "x-ui": { "widget": "middleware-stack", "section": "Middleware", "order": 6 } },
+    "memory": {
+      "type": "object",
+      "x-ui": { "section": "Memory", "order": 7 },
+      "properties": {
+        "long_term": { "type": "boolean", "default": false, "x-ui": { "effect": "Persist memory across conversations" } },
+        "store_namespace": { "type": "string" },
+        "state_extensions": {
+          "type": "array",
+          "items": { "type": "object", "properties": { "name": { "type": "string" }, "type": { "type": "string" }, "reducer": { "type": "string" } } },
+          "x-ui": { "widget": "rows-table" }
+        }
+      }
+    },
+    "planning": { "type": "boolean", "default": true, "x-ui": { "section": "Deep Agent", "order": 8, "effect": "Adds write_todos planning tool", "showWhen": "flavor=deep_agent" } },
+    "subagents": { "type": "array", "items": { "$ref": "#/$defs/SubAgent" }, "x-ui": { "section": "Deep Agent", "order": 9, "showWhen": "flavor=deep_agent" } },
+    "filesystem": { "$ref": "#/$defs/FilesystemBackend", "x-ui": { "section": "Deep Agent", "order": 10, "showWhen": "flavor=deep_agent" } },
+    "sandbox": { "$ref": "#/$defs/SandboxConfig", "x-ui": { "section": "Deep Agent", "order": 11, "showWhen": "flavor=deep_agent" } },
+    "skills": { "type": "array", "items": { "type": "string" }, "x-ui": { "section": "Deep Agent", "showWhen": "flavor=deep_agent" } },
+    "permissions": {
+      "type": "array",
+      "items": { "type": "object", "properties": { "path": { "type": "string" }, "access": { "type": "string", "enum": ["read", "write", "none"] } } },
+      "x-ui": { "widget": "rows-table", "section": "Deep Agent", "showWhen": "flavor=deep_agent" }
+    }
+  },
+  "$defs": {
+    "ResponseFormat": {
+      "oneOf": [
+        { "type": "object", "properties": { "mode": { "const": "freeform" } } },
+        { "type": "object", "required": ["mode", "schema"], "properties": { "mode": { "const": "structured" }, "strategy": { "type": "string", "enum": ["auto", "provider", "tool"], "default": "auto" }, "schema": { "type": "object", "description": "JSON Schema of the desired structured output." } } }
+      ],
+      "x-ui": { "widget": "kind-switcher", "discriminator": "mode" }
+    },
+    "SubAgent": {
+      "oneOf": [
+        {
+          "type": "object",
+          "required": ["name", "description"],
+          "properties": {
+            "name": { "$ref": "forge/common#/$defs/Identifier" },
+            "description": { "type": "string", "x-ui": { "modelView": true } },
+            "system_prompt": { "type": "string", "x-ui": { "widget": "textarea" } },
+            "tools": { "type": "array", "items": { "type": "string" }, "x-ui": { "widget": "chips", "refType": "tool" } },
+            "toolsets": { "type": "array", "items": { "type": "string" }, "x-ui": { "widget": "chips", "refType": "tool_set" } },
+            "model": { "$ref": "forge/common#/$defs/ModelRef" },
+            "middleware": { "type": "array", "items": { "$ref": "forge/middleware#/$defs/MiddlewareEntry" } }
+          }
+        },
+        {
+          "type": "object",
+          "required": ["name", "workflow_ref"],
+          "properties": {
+            "name": { "$ref": "forge/common#/$defs/Identifier" },
+            "description": { "type": "string" },
+            "workflow_ref": { "type": "object", "properties": { "workflow_id": { "type": "string" }, "version": { "type": "integer" } }, "description": "Wrap a compiled workflow as CompiledSubAgent.", "x-ui": { "widget": "reference", "refType": "workflow" } }
+          }
+        }
+      ]
+    },
+    "FilesystemBackend": {
+      "type": "object",
+      "properties": {
+        "kind": { "type": "string", "enum": ["state", "disk", "store", "composite"], "default": "state" },
+        "routes": { "type": "object", "additionalProperties": { "type": "string", "enum": ["state", "disk", "store"] }, "description": "For composite, e.g. {'/memories/':'store'}." }
+      }
+    },
+    "SandboxConfig": {
+      "type": "object",
+      "properties": {
+        "kind": { "type": "string", "enum": ["none", "docker", "remote"], "default": "none" },
+        "provider": { "type": "string", "enum": ["e2b", "modal", "daytona", "runloop", "agentcore"], "x-ui": { "showWhen": "kind=remote" } },
+        "pattern": { "type": "string", "enum": ["agent_in_sandbox", "sandbox_as_tool"], "default": "sandbox_as_tool" },
+        "limits": { "$ref": "#/$defs/Limits" }
+      }
+    },
+    "Limits": {
+      "type": "object",
+      "properties": {
+        "cpu_seconds": { "type": "integer", "default": 10 },
+        "memory_mb": { "type": "integer", "default": 512 },
+        "timeout_seconds": { "type": "integer", "default": 30 },
+        "egress_allowlist": { "type": "array", "items": { "type": "string" } }
+      }
+    }
+  }
+}
diff --git a/packages/schemas/forge/nodes/classifier.json b/packages/schemas/forge/nodes/classifier.json
new file mode 100644
index 0000000..5bfa731
--- /dev/null
+++ b/packages/schemas/forge/nodes/classifier.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "forge/nodes/classifier",
+  "type": "object",
+  "required": ["labels"],
+  "properties": {
+    "labels": { "type": "array", "items": { "type": "string" }, "minItems": 1, "description": "The intent labels to classify into (e.g. return_item, cancel_subscription, get_information)." },
+    "output_key": { "type": "string", "default": "intent", "description": "State field the chosen label is written to - a Router downstream branches on it." },
+    "multi_label": { "type": "boolean", "default": false, "x-ui": { "effect": "Write EVERY applicable label (a list) instead of exactly one - pair with a Router set to 'multi' so a question with several intents fans out to every matching branch in parallel." } },
+    "model": { "$ref": "forge/common#/$defs/ModelRef", "description": "Empty = project default model." },
+    "instructions": { "type": "string", "description": "Optional extra guidance for the classification (domain hints, tie-breaking rules)." }
+  },
+  "$comment": "ports: in:text, out:text. Routing pattern: classifier -> router(expression=output_key, cases per label). multi_label writes list[str]."
+}
diff --git a/packages/schemas/forge/nodes/emit_event.json b/packages/schemas/forge/nodes/emit_event.json
new file mode 100644
index 0000000..550e33a
--- /dev/null
+++ b/packages/schemas/forge/nodes/emit_event.json
@@ -0,0 +1,11 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "forge/nodes/emit_event",
+  "type": "object",
+  "required": ["channel"],
+  "properties": {
+    "channel": { "type": "string" },
+    "payload": { "type": "object" }
+  },
+  "$comment": "ports: in:any, out:any (pushes a custom SSE frame)"
+}
diff --git a/packages/schemas/forge/nodes/end.json b/packages/schemas/forge/nodes/end.json
new file mode 100644
index 0000000..4cfb780
--- /dev/null
+++ b/packages/schemas/forge/nodes/end.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "forge/nodes/end",
+  "type": "object",
+  "properties": {},
+  "additionalProperties": false,
+  "$comment": "ports: in:control"
+}
diff --git a/packages/schemas/forge/nodes/handoff.json b/packages/schemas/forge/nodes/handoff.json
new file mode 100644
index 0000000..4636f67
--- /dev/null
+++ b/packages/schemas/forge/nodes/handoff.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "forge/nodes/handoff",
+  "type": "object",
+  "properties": {
+    "reason": { "type": "string", "default": "Escalated to a human agent.", "x-ui": { "help": "Why the conversation is being handed off (shown in the agent inbox)." } },
+    "ack_message": { "type": "string", "x-ui": { "help": "Optional message sent to the customer while they wait for a human." } }
+  }
+}
diff --git a/packages/schemas/forge/nodes/human_input.json b/packages/schemas/forge/nodes/human_input.json
new file mode 100644
index 0000000..f1a9329
--- /dev/null
+++ b/packages/schemas/forge/nodes/human_input.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "forge/nodes/human_input",
+  "type": "object",
+  "required": ["prompt"],
+  "properties": {
+    "prompt": { "type": "string", "x-ui": { "widget": "textarea" } },
+    "schema": { "type": "object", "description": "Optional structured input schema requested from the human." },
+    "allowed_decisions": { "type": "array", "items": { "type": "string", "enum": ["approve", "edit", "reject"] }, "default": ["approve", "reject"] },
+    "timeout_seconds": { "type": "integer", "minimum": 1, "description": "Optional approval deadline in seconds (overrides the global HITL timeout)." },
+    "timeout_default": { "type": "string", "enum": ["approve", "edit", "reject"], "description": "Decision used to resume automatically when the approval deadline expires. Leave empty to fail the run instead." },
+    "output_key": { "type": "string", "description": "Optional state key the decision string is written to, so a Router can branch approve → continue / reject → end." }
+  },
+  "$comment": "ports: in:any, out:any (calls interrupt(); requires checkpointer)"
+}
diff --git a/packages/schemas/forge/nodes/join.json b/packages/schemas/forge/nodes/join.json
new file mode 100644
index 0000000..b504c57
--- /dev/null
+++ b/packages/schemas/forge/nodes/join.json
@@ -0,0 +1,11 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "forge/nodes/join",
+  "type": "object",
+  "properties": {
+    "reducer": { "type": "string", "enum": ["concat", "merge", "first", "last"], "default": "concat" },
+    "input_key": { "type": "string", "description": "State key holding the fan-out results to re-aggregate. Omit to use the join purely as a convergence marker (results are then aggregated by that key's own add-reducer)." },
+    "output_key": { "type": "string", "description": "State key to write the aggregated result to (defaults to input_key). Point at a 'last'-reducer field to overwrite cleanly rather than append." }
+  },
+  "$comment": "ports: in:control[], out:json"
+}
diff --git a/packages/schemas/forge/nodes/llm.json b/packages/schemas/forge/nodes/llm.json
new file mode 100644
index 0000000..f52cd3c
--- /dev/null
+++ b/packages/schemas/forge/nodes/llm.json
@@ -0,0 +1,13 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "forge/nodes/llm",
+  "type": "object",
+  "required": ["model", "prompt"],
+  "properties": {
+    "model": { "$ref": "forge/common#/$defs/ModelRef" },
+    "prompt": { "$ref": "forge/common#/$defs/TemplateString", "x-ui": { "widget": "textarea", "modelView": true } },
+    "model_params": { "type": "object" },
+    "response_format": { "$ref": "forge/nodes/agent#/$defs/ResponseFormat" }
+  },
+  "$comment": "ports: in:[text,json], out:[text,json]"
+}
diff --git a/packages/schemas/forge/nodes/loop.json b/packages/schemas/forge/nodes/loop.json
new file mode 100644
index 0000000..53d49ed
--- /dev/null
+++ b/packages/schemas/forge/nodes/loop.json
@@ -0,0 +1,11 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "forge/nodes/loop",
+  "type": "object",
+  "required": ["condition", "max_iter"],
+  "properties": {
+    "condition": { "$ref": "forge/common#/$defs/Expression" },
+    "max_iter": { "type": "integer", "default": 10 }
+  },
+  "$comment": "ports: in:any, out:any (allows_cycle = true)"
+}
diff --git a/packages/schemas/forge/nodes/parallel_fanout.json b/packages/schemas/forge/nodes/parallel_fanout.json
new file mode 100644
index 0000000..cc7de7a
--- /dev/null
+++ b/packages/schemas/forge/nodes/parallel_fanout.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "forge/nodes/parallel_fanout",
+  "type": "object",
+  "required": ["over", "child_node", "item_key"],
+  "properties": {
+    "over": { "type": "string", "description": "State key holding a list." },
+    "child_node": { "type": "string", "description": "Node id to run per item via Send." },
+    "item_key": { "type": "string", "description": "State key the item is written to for each child." },
+    "index_key": { "type": "string", "default": "_fanout_index", "description": "Key each child receives its 0-based input index under (also gets _fanout_total), so results can be reordered deterministically despite parallel completion order." },
+    "on_item_error": { "type": "string", "enum": ["fail", "skip"], "default": "fail", "description": "fail: one item's error aborts the whole batch (default). skip: isolate it - log and drop that item's contribution, keep the rest. (Also enabled by workflow error_policy 'continue'.)" },
+    "item_timeout_seconds": { "type": "number", "description": "Optional per-item timeout. Applies to async children / subgraphs (sync children can't be preempted). A timed-out item follows on_item_error." }
+  },
+  "$comment": "ports: in:json, out:control[]"
+}
diff --git a/packages/schemas/forge/nodes/retrieval.json b/packages/schemas/forge/nodes/retrieval.json
new file mode 100644
index 0000000..fc0fe7c
--- /dev/null
+++ b/packages/schemas/forge/nodes/retrieval.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "forge/nodes/retrieval",
+  "type": "object",
+  "properties": {
+    "include_docs": { "type": "boolean", "default": true, "x-ui": { "effect": "Search the knowledge-base DOCUMENTS (RAG). Turn off for a Q&A-only node that pulls only curated FAQ pairs." } },
+    "top_k": { "type": "integer", "default": 5, "description": "How many knowledge-base document chunks to retrieve (only when include_docs is true)." },
+    "hybrid": { "type": "boolean", "default": false, "x-ui": { "effect": "Hybrid search: blend lexical BM25 keyword matching with semantic vectors (RRF). Catches exact terms - codes, names, SKUs - that pure vector search can miss." } },
+    "rerank": { "type": "boolean", "default": false, "x-ui": { "effect": "Two-stage retrieval: after the initial search, a local cross-encoder re-scores the shortlist and keeps only the best matches. Big accuracy boost; adds some latency. Runs offline on CPU (no extra cost)." } },
+    "rerank_top_n": { "type": "integer", "description": "How many chunks to pull into the rerank shortlist before the cross-encoder trims them to top_k (only when rerank is true). Leave unset to auto-size the shortlist (roughly 6× top_k, minimum 25)." },
+    "rerank_min_score": { "type": "number", "default": 0.3, "description": "Drop reranked chunks below this cross-encoder relevance (0-1 sigmoid scale) so an off-topic query still yields nothing when rerank is on. Only applied when rerank is true (min_score is a cosine floor on a different scale and is skipped then)." },
+    "mmr": { "type": "boolean", "default": false, "x-ui": { "effect": "Diversify results (Maximal Marginal Relevance): trade a little relevance to avoid returning several near-duplicate chunks. Useful when one topic dominates the knowledge base." } },
+    "mmr_lambda": { "type": "number", "default": 0.5, "description": "MMR relevance/diversity balance (0-1): 1.0 = pure relevance, lower = more diverse. Only applied when mmr is true." },
+    "include_qa": { "type": "boolean", "default": false, "x-ui": { "effect": "Also pull matching Q&A pairs into context - retrieval then grounds the agent on BOTH KB docs and Q&A." } },
+    "qa_threshold": { "type": "number", "default": 0.3, "description": "Minimum similarity for a Q&A pair to be included (only when include_qa is true)." },
+    "qa_top_k": { "type": "integer", "default": 3, "description": "How many Q&A pairs to retrieve (only when include_qa is true)." },
+    "qa_kinds": { "type": "array", "items": { "type": "string" }, "x-ui": { "widget": "chips", "refType": "qa_kind" }, "description": "Only include Q&A pairs of these kinds/categories (empty = all; only when include_qa is true)." },
+    "min_score": { "type": "number", "default": 0.6, "description": "Drop document chunks below this cosine similarity so off-topic queries surface nothing. Calibrated for the default local BGE embedder (related pairs ~0.75+, unrelated ~0.4-0.5); lower it for a hosted model on a smaller cosine scale. In hybrid mode it is applied to the underlying cosine (not the fused rank). Not applied when rerank is on (see rerank_min_score)." },
+    "announce_empty": { "type": "boolean", "default": false, "x-ui": { "effect": "When nothing relevant is found, inject a note so a grounded agent says it doesn't know instead of guessing." } },
+    "source_filter": { "type": "array", "items": { "type": "string" }, "x-ui": { "widget": "chips", "refType": "kb_source" }, "description": "Restrict retrieval to specific knowledge sources." },
+    "folders": { "type": "array", "items": { "type": "string" }, "x-ui": { "widget": "chips", "refType": "kb_folder" }, "description": "Restrict retrieval to sources in these knowledge folders (empty = all)." },
+    "route_key": { "type": "string", "description": "Optional state key set to 'yes'/'no' (anything found?) so a Router can branch found → agent / not-found → escalation." }
+  },
+  "$comment": "ports: in:text, out:json. Fields mirror forge/nodes/rag.py retrieval_factory."
+}
diff --git a/packages/schemas/forge/nodes/router.json b/packages/schemas/forge/nodes/router.json
new file mode 100644
index 0000000..939d887
--- /dev/null
+++ b/packages/schemas/forge/nodes/router.json
@@ -0,0 +1,13 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "forge/nodes/router",
+  "type": "object",
+  "required": ["expression", "cases"],
+  "properties": {
+    "expression": { "$ref": "forge/common#/$defs/Expression", "x-ui": { "help": "Evaluated over state; result matched against cases." } },
+    "cases": { "type": "object", "additionalProperties": { "type": "string" }, "x-ui": { "widget": "rows-table", "columns": ["value", "target"] } },
+    "default": { "type": "string", "description": "Fallback target node id." },
+    "multi": { "type": "boolean", "default": false, "x-ui": { "effect": "When the expression value is a LIST (multi-label Classifier output), route to EVERY matching case in parallel instead of one." } }
+  },
+  "$comment": "ports: in:any, out: one control port per case + default"
+}
diff --git a/packages/schemas/forge/nodes/start.json b/packages/schemas/forge/nodes/start.json
new file mode 100644
index 0000000..ebf1627
--- /dev/null
+++ b/packages/schemas/forge/nodes/start.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "forge/nodes/start",
+  "type": "object",
+  "properties": {},
+  "additionalProperties": false,
+  "$comment": "ports: out:control"
+}
diff --git a/packages/schemas/forge/nodes/subworkflow.json b/packages/schemas/forge/nodes/subworkflow.json
new file mode 100644
index 0000000..5fddc3f
--- /dev/null
+++ b/packages/schemas/forge/nodes/subworkflow.json
@@ -0,0 +1,13 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "forge/nodes/subworkflow",
+  "type": "object",
+  "required": ["workflow_id"],
+  "properties": {
+    "workflow_id": { "type": "string", "x-ui": { "widget": "reference", "refType": "workflow" } },
+    "version": { "type": "integer" },
+    "input_mapping": { "type": "object", "x-ui": { "widget": "rows-table" } },
+    "output_mapping": { "type": "object", "x-ui": { "widget": "rows-table" } }
+  },
+  "$comment": "ports: in:[messages,json], out:[messages,json]"
+}
diff --git a/packages/schemas/forge/nodes/tool_call.json b/packages/schemas/forge/nodes/tool_call.json
new file mode 100644
index 0000000..37a17e4
--- /dev/null
+++ b/packages/schemas/forge/nodes/tool_call.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "forge/nodes/tool_call",
+  "type": "object",
+  "required": ["tool_id"],
+  "properties": {
+    "tool_id": { "type": "string", "x-ui": { "widget": "reference", "refType": "tool" } },
+    "input_mapping": { "type": "object", "description": "Maps state/inputs -> tool args (JMESPath/templates).", "x-ui": { "widget": "rows-table" } },
+    "handle_tool_errors": { "oneOf": [{ "type": "boolean" }, { "type": "string" }], "default": true }
+  },
+  "$comment": "ports: in:json, out:json"
+}
diff --git a/packages/schemas/forge/nodes/transform.json b/packages/schemas/forge/nodes/transform.json
new file mode 100644
index 0000000..ba6e033
--- /dev/null
+++ b/packages/schemas/forge/nodes/transform.json
@@ -0,0 +1,13 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "forge/nodes/transform",
+  "type": "object",
+  "required": ["expression"],
+  "properties": {
+    "engine": { "type": "string", "enum": ["jmespath", "jq"], "default": "jmespath" },
+    "expression": { "type": "string", "x-ui": { "widget": "jmespath", "tokenMeter": false } },
+    "input_key": { "type": "string", "description": "State key to read as input (omit to use whole state)." },
+    "output_key": { "type": "string", "default": "data", "description": "State key to write the result to (must be a declared state field)." }
+  },
+  "$comment": "ports: in:json, out:json"
+}
diff --git a/packages/schemas/forge/nodes/trigger_app_event.json b/packages/schemas/forge/nodes/trigger_app_event.json
new file mode 100644
index 0000000..b8c6f6b
--- /dev/null
+++ b/packages/schemas/forge/nodes/trigger_app_event.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "forge/nodes/trigger_app_event",
+  "type": "object",
+  "required": ["poll_url"],
+  "properties": {
+    "poll_url": { "type": "string", "x-ui": { "help": "URL polled on each interval; new items fire the workflow." } },
+    "method": { "type": "string", "enum": ["GET", "POST"], "default": "GET" },
+    "interval_minutes": { "type": "integer", "minimum": 1, "default": 5 },
+    "items_path": { "type": "string", "x-ui": { "help": "JMESPath to the list of items in the response (empty = the whole body)." } },
+    "dedupe_key": { "type": "string", "x-ui": { "help": "JMESPath within each item for its unique id (so each item fires once)." } },
+    "message_path": { "type": "string", "x-ui": { "help": "JMESPath within an item for the message text (empty = the whole item as JSON)." } }
+  }
+}
diff --git a/packages/schemas/forge/nodes/trigger_email.json b/packages/schemas/forge/nodes/trigger_email.json
new file mode 100644
index 0000000..a7efa79
--- /dev/null
+++ b/packages/schemas/forge/nodes/trigger_email.json
@@ -0,0 +1,10 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "forge/nodes/trigger_email",
+  "type": "object",
+  "properties": {
+    "mailbox": { "type": "string", "x-ui": { "help": "Address/label this trigger handles (informational; routing is per inbound-mailbox config)." } },
+    "include_subject": { "type": "boolean", "default": true },
+    "reply": { "type": "boolean", "default": true, "x-ui": { "help": "Send the workflow's answer back as a threaded email reply." } }
+  }
+}
diff --git a/packages/schemas/forge/nodes/trigger_schedule.json b/packages/schemas/forge/nodes/trigger_schedule.json
new file mode 100644
index 0000000..f5b0e5a
--- /dev/null
+++ b/packages/schemas/forge/nodes/trigger_schedule.json
@@ -0,0 +1,10 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "forge/nodes/trigger_schedule",
+  "type": "object",
+  "properties": {
+    "every_minutes": { "type": "integer", "minimum": 1, "x-ui": { "help": "Run every N minutes. Use this OR cron." } },
+    "cron": { "type": "string", "x-ui": { "help": "Cron expression (min hour dom mon dow). Requires croniter; otherwise use every_minutes." } },
+    "message": { "type": "string", "x-ui": { "help": "The input message sent into the workflow on each fire." } }
+  }
+}
diff --git a/packages/schemas/forge/nodes/trigger_webhook.json b/packages/schemas/forge/nodes/trigger_webhook.json
new file mode 100644
index 0000000..3eb0238
--- /dev/null
+++ b/packages/schemas/forge/nodes/trigger_webhook.json
@@ -0,0 +1,10 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "forge/nodes/trigger_webhook",
+  "type": "object",
+  "properties": {
+    "message_path": { "type": "string", "x-ui": { "help": "JMESPath into the webhook JSON body to use as the user message (empty = the whole body)." } },
+    "require_signature": { "type": "boolean", "default": false, "x-ui": { "help": "Require a valid HMAC-SHA256 signature (X-Forge-Signature) computed with the secret." } },
+    "secret_ref": { "$ref": "forge/common#/$defs/SecretRef" }
+  }
+}
diff --git a/packages/schemas/forge/nodes/webhook_out.json b/packages/schemas/forge/nodes/webhook_out.json
new file mode 100644
index 0000000..daabdae
--- /dev/null
+++ b/packages/schemas/forge/nodes/webhook_out.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "forge/nodes/webhook_out",
+  "type": "object",
+  "required": ["url", "method"],
+  "properties": {
+    "url": { "$ref": "forge/common#/$defs/TemplateString" },
+    "method": { "type": "string", "enum": ["GET", "POST", "PUT", "PATCH", "DELETE"] },
+    "auth_provider_id": { "type": "string", "x-ui": { "widget": "reference", "refType": "auth_provider" } },
+    "body": { "type": "object" },
+    "headers": { "type": "object" },
+    "output_key": { "type": "string", "default": "webhook_result", "description": "State key to write the response to (must be a declared state field)." }
+  },
+  "$comment": "ports: in:json, out:json"
+}
diff --git a/packages/schemas/forge/project.json b/packages/schemas/forge/project.json
new file mode 100644
index 0000000..b8dee48
--- /dev/null
+++ b/packages/schemas/forge/project.json
@@ -0,0 +1,52 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "forge/project",
+  "type": "object",
+  "properties": {
+    "default_model": { "$ref": "forge/common#/$defs/ModelRef" },
+    "allowed_models": { "type": "array", "items": { "$ref": "forge/common#/$defs/ModelRef" }, "x-ui": { "widget": "chips" } },
+    "provider_credentials": {
+      "type": "object",
+      "additionalProperties": { "$ref": "forge/common#/$defs/SecretRef" },
+      "description": "provider -> secret ref, e.g. {openai:'secret://proj/openai_key'}"
+    },
+    "budgets": {
+      "type": "object",
+      "properties": {
+        "max_usd_per_run": { "type": "number" },
+        "max_tokens_per_run": { "type": "integer" },
+        "monthly_usd_cap": { "type": "number" },
+        "alert_at_fraction": { "type": "number", "default": 0.8 }
+      }
+    },
+    "default_middleware": { "type": "array", "items": { "$ref": "forge/middleware#/$defs/MiddlewareEntry" }, "x-ui": { "widget": "middleware-stack" } },
+    "data_region": { "type": "string" },
+    "rag_defaults": {
+      "type": "object",
+      "properties": {
+        "embedding_model": { "type": "string", "default": "fastembed:BAAI/bge-small-en-v1.5", "x-ui": { "effect": "Embedder for RAG. Default 'fastembed:BAAI/bge-small-en-v1.5' is local, open-source, and free (runs offline). 'openai:text-embedding-3-small|large' is billed per token at ingest AND per query. Changing the model changes the vector dimension, so existing sources must be re-embedded." } },
+        "chunk_size": { "type": "integer", "default": 1000 },
+        "chunk_overlap": { "type": "integer", "default": 200 },
+        "chunking_strategy": { "type": "string", "enum": ["recursive", "section", "sentence", "semantic"], "default": "recursive", "x-ui": { "effect": "Default chunking when a source doesn't specify one: recursive (general), section (Markdown headings), sentence (sentence-aware), semantic (splits where meaning shifts - uses the embedder, slower to ingest)." } },
+        "retrieval_mode": { "type": "string", "enum": ["chunk", "parent_child"], "default": "chunk", "x-ui": { "effect": "chunk: search and return the same chunks (default). parent_child: embed small child chunks for precise matching but feed the agent the larger parent passage for context. Changing this requires re-ingesting existing sources." } },
+        "child_chunk_size": { "type": "integer", "default": 300, "description": "Size (chars) of the small child chunks that get embedded in parent_child mode. The parent window uses chunk_size. Ignored in chunk mode." },
+        "reranker_model": { "type": "string", "default": "Xenova/ms-marco-MiniLM-L-6-v2", "x-ui": { "effect": "Local cross-encoder used when a retrieval node has rerank on. Default 'Xenova/ms-marco-MiniLM-L-6-v2' is small and CPU-fast; 'BAAI/bge-reranker-base' is heavier and more accurate. Runs offline, no API cost." } }
+      }
+    },
+    "features": {
+      "type": "object",
+      "properties": {
+        "code_nodes": { "type": "boolean", "default": false },
+        "remote_sandbox": { "type": "boolean", "default": false },
+        "advanced_scripts": { "type": "boolean", "default": false }
+      }
+    },
+    "tracing": {
+      "type": "object",
+      "properties": {
+        "retention_days": { "type": "integer", "default": 30 },
+        "langfuse_otlp_url": { "type": "string" }
+      }
+    }
+  }
+}
diff --git a/packages/schemas/forge/tool.json b/packages/schemas/forge/tool.json
new file mode 100644
index 0000000..174e6f9
--- /dev/null
+++ b/packages/schemas/forge/tool.json
@@ -0,0 +1,114 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "forge/tool",
+  "type": "object",
+  "required": ["name", "description", "kind"],
+  "properties": {
+    "name": { "$ref": "forge/common#/$defs/Identifier", "x-ui": { "section": "Identity", "modelView": false } },
+    "display_name": { "type": "string", "x-ui": { "section": "Identity", "modelView": false, "help": "Human-readable name shown in chat/streaming activity. The model still calls the tool by its identifier above; leave blank to show the identifier." } },
+    "description": { "type": "string", "x-ui": { "section": "Identity", "widget": "textarea", "modelView": true, "help": "This is what the model reads to decide when to use the tool." } },
+    "kind": { "type": "string", "enum": ["rest_api", "graphql", "code", "sql", "builtin", "mcp"], "x-ui": { "section": "Identity", "widget": "segmented" } },
+    "auth_provider_id": { "type": "string", "x-ui": { "section": "Auth", "widget": "reference", "refType": "auth_provider" } },
+    "rate_limit": { "type": "object", "properties": { "per_minute": { "type": "integer" } }, "x-ui": { "section": "Reliability" } },
+    "timeout_seconds": { "type": "integer", "default": 30, "x-ui": { "section": "Reliability" } },
+    "retry": { "$ref": "forge/common#/$defs/RetryPolicy", "x-ui": { "section": "Reliability", "advanced": true } },
+    "cache": { "type": "object", "properties": { "ttl_seconds": { "type": "integer", "default": 0 } }, "x-ui": { "section": "Reliability", "advanced": true } }
+  },
+  "allOf": [
+    { "if": { "properties": { "kind": { "const": "rest_api" } } }, "then": { "$ref": "#/$defs/RestConfig" } },
+    { "if": { "properties": { "kind": { "const": "graphql" } } }, "then": { "$ref": "#/$defs/GraphQLConfig" } },
+    { "if": { "properties": { "kind": { "const": "code" } } }, "then": { "$ref": "#/$defs/CodeConfig" } },
+    { "if": { "properties": { "kind": { "const": "sql" } } }, "then": { "$ref": "#/$defs/SqlConfig" } },
+    { "if": { "properties": { "kind": { "const": "builtin" } } }, "then": { "$ref": "#/$defs/BuiltinConfig" } }
+  ],
+  "$defs": {
+    "FieldSpec": {
+      "type": "object",
+      "required": ["path", "type", "in"],
+      "properties": {
+        "path": { "type": "string", "x-ui": { "widget": "mono" } },
+        "type": { "type": "string", "enum": ["string", "integer", "number", "boolean", "object", "array"] },
+        "in": { "type": "string", "enum": ["path", "query", "header", "body", "cookie"] },
+        "required": { "type": "boolean", "default": false },
+        "llm_visible": { "type": "boolean", "default": true, "x-ui": { "effect": "Model can set this argument" } },
+        "description": { "type": "string", "x-ui": { "modelView": true } },
+        "default": {}
+      }
+    },
+    "ResponseFieldSpec": {
+      "type": "object",
+      "required": ["path"],
+      "properties": {
+        "path": { "type": "string", "x-ui": { "widget": "mono" } },
+        "description": { "type": "string", "x-ui": { "modelView": true } },
+        "include_in_llm": { "type": "boolean", "default": true }
+      }
+    },
+    "RestConfig": {
+      "required": ["request"],
+      "properties": {
+        "request": {
+          "type": "object",
+          "required": ["method", "url_template"],
+          "x-ui": { "section": "Request" },
+          "properties": {
+            "method": { "type": "string", "enum": ["GET", "POST", "PUT", "PATCH", "DELETE"] },
+            "url_template": { "$ref": "forge/common#/$defs/TemplateString" },
+            "body_encoding": { "type": "string", "enum": ["json", "form", "multipart", "raw"], "x-ui": { "section": "Request", "help": "How the request body is encoded. Unset (auto): a structured body is JSON, a body template is sent as-is. json: application/json. form: application/x-www-form-urlencoded — in:body fields (and JSON body templates) are URL-encoded and the Content-Type is set for you; use this for classic HTML form posts, including multi-line values and repeated keys. multipart: multipart/form-data — in:body fields become form parts (a value shaped [filename, content] or {content, filename?, content_type?} is sent as a file part); the Content-Type + boundary are set for you. raw: send the body template string verbatim." } },
+            "body_template": { "$ref": "forge/common#/$defs/TemplateString", "x-ui": { "section": "Request", "widget": "textarea", "help": "Free-form body interpolating {{input.*}} (validated tool args) and {{ctx.*}} (run context). Parsed as JSON when possible, else sent as raw content. For form posts prefer in:body fields with body_encoding=form (auto URL-encoded)." } },
+            "fields": { "type": "array", "items": { "$ref": "#/$defs/FieldSpec" }, "x-ui": { "widget": "rows-table" } },
+            "headers": { "type": "array", "items": { "type": "object", "properties": { "name": { "type": "string" }, "value": { "$ref": "forge/common#/$defs/TemplateString" } } }, "x-ui": { "widget": "rows-table" } },
+            "follow_redirects": { "type": "boolean", "default": false, "x-ui": { "help": "Follow 3xx redirects to the target URL. Each hop is re-checked by the SSRF guard. When off, the redirect's target URL is still reported to the model so it can act on it." } },
+            "tls_skip_verify": { "type": "boolean", "default": false, "x-ui": { "help": "Skip TLS certificate verification. Honored ONLY when the target host is on the server's FORGE_EGRESS_ALLOW_PRIVATE_HOSTS allow-list (a trusted internal/dev target); ignored for any other host. Use for internal services with self-signed certs - never for public endpoints." } }
+          }
+        },
+        "response": {
+          "type": "object",
+          "x-ui": { "section": "Response shaping" },
+          "properties": {
+            "fields": { "type": "array", "items": { "$ref": "#/$defs/ResponseFieldSpec" }, "x-ui": { "widget": "rows-table" } },
+            "projection_jmespath": { "type": "string", "x-ui": { "widget": "jmespath", "tokenMeter": true, "help": "Cut the payload before it reaches the model. Compare Raw vs Projected tokens." } }
+          }
+        }
+      }
+    },
+    "GraphQLConfig": {
+      "required": ["endpoint", "query"],
+      "properties": {
+        "endpoint": { "type": "string" },
+        "query": { "type": "string", "x-ui": { "widget": "code", "language": "graphql" } },
+        "operation_name": { "type": "string", "x-ui": { "section": "Request", "help": "operationName to run when the query document defines more than one operation. Leave blank for a single-operation document." } },
+        "variables": { "type": "array", "items": { "$ref": "#/$defs/FieldSpec" }, "x-ui": { "widget": "rows-table" } },
+        "follow_redirects": { "type": "boolean", "default": false, "x-ui": { "help": "Follow 3xx redirects to the target endpoint (each hop re-checked by the SSRF guard)." } },
+        "tls_skip_verify": { "type": "boolean", "default": false, "x-ui": { "help": "Skip TLS certificate verification. Honored ONLY when the endpoint host is on the server's FORGE_EGRESS_ALLOW_PRIVATE_HOSTS allow-list (a trusted internal/dev target); ignored otherwise. Use for internal services with self-signed certs - never for public endpoints." } },
+        "response": { "$ref": "#/$defs/RestConfig/properties/response" }
+      }
+    },
+    "CodeConfig": {
+      "required": ["language", "source"],
+      "properties": {
+        "language": { "type": "string", "enum": ["python"], "default": "python" },
+        "source": { "type": "string", "x-ui": { "widget": "code", "language": "python", "help": "Define def main(**kwargs): return ... (RestrictedPython sandbox; imports limited to pure stdlib)." } },
+        "args_schema": { "type": "object", "description": "JSON Schema of the tool's LLM-visible args." },
+        "timeout_seconds": { "type": "integer", "default": 5 }
+      }
+    },
+    "SqlConfig": {
+      "required": ["query", "connection_ref"],
+      "properties": {
+        "connection_ref": { "type": "string", "x-ui": { "widget": "reference", "refType": "secret", "help": "Secret holding the SQLAlchemy DB URL (e.g. postgresql+psycopg://…)." } },
+        "query": { "type": "string", "x-ui": { "widget": "code", "language": "sql", "help": "Parameterized SELECT using :named binds. Read-only is enforced by default." } },
+        "args_schema": { "type": "object", "description": "JSON Schema of the query's :named parameters (the LLM-visible args)." },
+        "read_only": { "type": "boolean", "default": true },
+        "max_rows": { "type": "integer", "default": 100 }
+      }
+    },
+    "BuiltinConfig": {
+      "required": ["builtin"],
+      "properties": {
+        "builtin": { "type": "string", "enum": ["web_search", "web_fetch", "current_time", "calculator", "knowledge_search", "remember", "recall"] },
+        "options": { "type": "object" }
+      }
+    }
+  }
+}
diff --git a/packages/schemas/forge/workflow.json b/packages/schemas/forge/workflow.json
new file mode 100644
index 0000000..c7c056f
--- /dev/null
+++ b/packages/schemas/forge/workflow.json
@@ -0,0 +1,72 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "forge/workflow",
+  "type": "object",
+  "required": ["id", "version", "state", "entry_node", "nodes", "edges"],
+  "properties": {
+    "id": { "$ref": "forge/common#/$defs/Identifier" },
+    "version": { "type": "integer", "minimum": 1 },
+    "state": {
+      "type": "object",
+      "description": "Map of state field name -> StateFieldSpec. Compiled to a TypedDict (NOT pydantic).",
+      "additionalProperties": { "$ref": "#/$defs/StateFieldSpec" },
+      "x-ui": { "widget": "rows-table", "section": "State schema", "columns": ["__key__", "type", "reducer"] }
+    },
+    "entry_node": { "type": "string" },
+    "global_middleware": {
+      "type": "array",
+      "items": { "$ref": "forge/middleware#/$defs/MiddlewareEntry" },
+      "description": "Prepended to every agent node's stack at compile time.",
+      "x-ui": { "widget": "middleware-stack", "section": "Global middleware" }
+    },
+    "error_policy": { "type": "string", "enum": ["halt", "continue", "route_to_error_node"], "default": "halt" },
+    "on_error": {
+      "type": "object",
+      "description": "Graceful fallback when the run errors: send this message instead of failing silently, and optionally open a human handoff.",
+      "properties": {
+        "message": { "type": "string", "x-ui": { "help": "Customer-facing fallback reply when the workflow errors." } },
+        "escalate": { "type": "boolean", "default": false, "x-ui": { "help": "Also open a human-handoff queue item on error." } }
+      }
+    },
+    "timeout_seconds": { "type": "integer", "default": 600 },
+    "max_concurrency": { "type": "integer", "default": 8 },
+    "nodes": { "type": "array", "items": { "$ref": "#/$defs/NodeInstance" }, "minItems": 1 },
+    "edges": { "type": "array", "items": { "$ref": "#/$defs/Edge" } }
+  },
+  "$defs": {
+    "StateFieldSpec": {
+      "type": "object",
+      "required": ["type", "reducer"],
+      "properties": {
+        "type": { "type": "string", "enum": ["list[message]", "list[str]", "list[json]", "str", "int", "float", "bool", "json"] },
+        "reducer": {
+          "type": "string",
+          "enum": ["add_messages", "add", "last", "merge"],
+          "description": "add_messages for messages; add for accumulating lists; last for overwrite; merge for dict."
+        }
+      }
+    },
+    "NodeInstance": {
+      "type": "object",
+      "required": ["id", "type", "config"],
+      "properties": {
+        "id": { "$ref": "forge/common#/$defs/Identifier" },
+        "type": { "type": "string", "description": "Must exist in the Node Type Registry." },
+        "config": { "type": "object", "description": "Validated against the node type's own schema (Section 3)." },
+        "position": { "type": "object", "properties": { "x": { "type": "number" }, "y": { "type": "number" } } }
+      }
+    },
+    "Edge": {
+      "type": "object",
+      "required": ["source", "target"],
+      "properties": {
+        "source": { "type": "string" },
+        "source_handle": { "type": "string" },
+        "target": { "type": "string", "description": "Target node id or 'END'." },
+        "target_handle": { "type": "string" },
+        "condition": { "$ref": "forge/common#/$defs/Expression", "description": "If present, becomes a conditional edge." },
+        "branches": { "type": "object", "additionalProperties": { "type": "string" }, "description": "value -> target-node-id map for routers." }
+      }
+    }
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..eb4475a
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,3622 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  apps/web:
+    dependencies:
+      '@xyflow/react':
+        specifier: ^12.3.5
+        version: 12.11.0(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(immer@11.1.15)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      jmespath:
+        specifier: ^0.16.0
+        version: 0.16.0
+      mustache:
+        specifier: ^4.2.0
+        version: 4.2.0
+      next:
+        specifier: 14.2.18
+        version: 14.2.18(@babel/core@7.29.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react:
+        specifier: 18.3.1
+        version: 18.3.1
+      react-dom:
+        specifier: 18.3.1
+        version: 18.3.1(react@18.3.1)
+      react-markdown:
+        specifier: ^9.0.1
+        version: 9.1.0(@types/react@18.3.31)(react@18.3.1)
+      recharts:
+        specifier: ^3.10.0
+        version: 3.10.0(@types/react@18.3.31)(react-dom@18.3.1(react@18.3.1))(react-is@18.3.1)(react@18.3.1)(redux@5.0.1)
+      remark-gfm:
+        specifier: ^4.0.0
+        version: 4.0.1
+    devDependencies:
+      '@testing-library/jest-dom':
+        specifier: ^6.9.1
+        version: 6.9.1
+      '@testing-library/react':
+        specifier: ^16.3.2
+        version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@testing-library/user-event':
+        specifier: ^14.6.1
+        version: 14.6.1(@testing-library/dom@10.4.1)
+      '@types/jmespath':
+        specifier: ^0.15.2
+        version: 0.15.2
+      '@types/mustache':
+        specifier: ^4.2.5
+        version: 4.2.6
+      '@types/node':
+        specifier: ^22.9.0
+        version: 22.19.20
+      '@types/react':
+        specifier: ^18.3.12
+        version: 18.3.31
+      '@types/react-dom':
+        specifier: ^18.3.1
+        version: 18.3.7(@types/react@18.3.31)
+      '@vitejs/plugin-react':
+        specifier: ^4.7.0
+        version: 4.7.0(vite@5.4.21(@types/node@22.19.20))
+      jsdom:
+        specifier: ^25.0.1
+        version: 25.0.1
+      typescript:
+        specifier: ^5.6.3
+        version: 5.9.3
+      vitest:
+        specifier: ^2.1.9
+        version: 2.1.9(@types/node@22.19.20)(jsdom@25.0.1)
+
+packages:
+
+  '@adobe/css-tools@4.5.0':
+    resolution: {integrity: sha512-6OzddxPio9UiWTCemp4N8cYLV2ZN1ncRnV1cVGtve7dhPOtRkleRyx32GQCYSwDYgaHU3USMm84tNsvKzRCa1Q==}
+
+  '@asamuzakjp/css-color@3.2.0':
+    resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==}
+
+  '@babel/code-frame@7.29.7':
+    resolution: {integrity: sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/compat-data@7.29.7':
+    resolution: {integrity: sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/core@7.29.7':
+    resolution: {integrity: sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.29.7':
+    resolution: {integrity: sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-compilation-targets@7.29.7':
+    resolution: {integrity: sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-globals@7.29.7':
+    resolution: {integrity: sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.29.7':
+    resolution: {integrity: sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-transforms@7.29.7':
+    resolution: {integrity: sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-plugin-utils@7.29.7':
+    resolution: {integrity: sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-string-parser@7.29.7':
+    resolution: {integrity: sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.29.7':
+    resolution: {integrity: sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-option@7.29.7':
+    resolution: {integrity: sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helpers@7.29.7':
+    resolution: {integrity: sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.29.7':
+    resolution: {integrity: sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/plugin-transform-react-jsx-self@7.29.7':
+    resolution: {integrity: sha512-TL0hMc9xzy86VD31nUiwzd5otRAcyEPcsegCxolO0PvcXuH1v0kECe/UIznYFihpkvU5wg/jk4v0TTEFfm53fw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-react-jsx-source@7.29.7':
+    resolution: {integrity: sha512-06IyK09H3wi4cGbhDBwp5gUGo0IKtnYa8tyTiephirPCK6fbobVGiXMMI5zLQ4aKEYP3wZ3ArU44o+8KMrSG/Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/runtime@7.29.7':
+    resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/template@7.29.7':
+    resolution: {integrity: sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.29.7':
+    resolution: {integrity: sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.29.7':
+    resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
+    engines: {node: '>=6.9.0'}
+
+  '@csstools/color-helpers@5.1.0':
+    resolution: {integrity: sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==}
+    engines: {node: '>=18'}
+
+  '@csstools/css-calc@2.1.4':
+    resolution: {integrity: sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-color-parser@3.1.0':
+    resolution: {integrity: sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-parser-algorithms@3.0.5':
+    resolution: {integrity: sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-tokenizer@3.0.4':
+    resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
+    engines: {node: '>=18'}
+
+  '@esbuild/aix-ppc64@0.21.5':
+    resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.21.5':
+    resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.21.5':
+    resolution: {integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.21.5':
+    resolution: {integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.21.5':
+    resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.21.5':
+    resolution: {integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.21.5':
+    resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.21.5':
+    resolution: {integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.21.5':
+    resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.21.5':
+    resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.21.5':
+    resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.21.5':
+    resolution: {integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.21.5':
+    resolution: {integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.21.5':
+    resolution: {integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.21.5':
+    resolution: {integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.21.5':
+    resolution: {integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.21.5':
+    resolution: {integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-x64@0.21.5':
+    resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-x64@0.21.5':
+    resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/sunos-x64@0.21.5':
+    resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.21.5':
+    resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.21.5':
+    resolution: {integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.21.5':
+    resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@next/env@14.2.18':
+    resolution: {integrity: sha512-2vWLOUwIPgoqMJKG6dt35fVXVhgM09tw4tK3/Q34GFXDrfiHlG7iS33VA4ggnjWxjiz9KV5xzfsQzJX6vGAekA==}
+
+  '@next/swc-darwin-arm64@14.2.18':
+    resolution: {integrity: sha512-tOBlDHCjGdyLf0ube/rDUs6VtwNOajaWV+5FV/ajPgrvHeisllEdymY/oDgv2cx561+gJksfMUtqf8crug7sbA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@next/swc-darwin-x64@14.2.18':
+    resolution: {integrity: sha512-uJCEjutt5VeJ30jjrHV1VIHCsbMYnEqytQgvREx+DjURd/fmKy15NaVK4aR/u98S1LGTnjq35lRTnRyygglxoA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@next/swc-linux-arm64-gnu@14.2.18':
+    resolution: {integrity: sha512-IL6rU8vnBB+BAm6YSWZewc+qvdL1EaA+VhLQ6tlUc0xp+kkdxQrVqAnh8Zek1ccKHlTDFRyAft0e60gteYmQ4A==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@next/swc-linux-arm64-musl@14.2.18':
+    resolution: {integrity: sha512-RCaENbIZqKKqTlL8KNd+AZV/yAdCsovblOpYFp0OJ7ZxgLNbV5w23CUU1G5On+0fgafrsGcW+GdMKdFjaRwyYA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@next/swc-linux-x64-gnu@14.2.18':
+    resolution: {integrity: sha512-3kmv8DlyhPRCEBM1Vavn8NjyXtMeQ49ID0Olr/Sut7pgzaQTo4h01S7Z8YNE0VtbowyuAL26ibcz0ka6xCTH5g==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@next/swc-linux-x64-musl@14.2.18':
+    resolution: {integrity: sha512-mliTfa8seVSpTbVEcKEXGjC18+TDII8ykW4a36au97spm9XMPqQTpdGPNBJ9RySSFw9/hLuaCMByluQIAnkzlw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@next/swc-win32-arm64-msvc@14.2.18':
+    resolution: {integrity: sha512-J5g0UFPbAjKYmqS3Cy7l2fetFmWMY9Oao32eUsBPYohts26BdrMUyfCJnZFQkX9npYaHNDOWqZ6uV9hSDPw9NA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@next/swc-win32-ia32-msvc@14.2.18':
+    resolution: {integrity: sha512-Ynxuk4ZgIpdcN7d16ivJdjsDG1+3hTvK24Pp8DiDmIa2+A4CfhJSEHHVndCHok6rnLUzAZD+/UOKESQgTsAZGg==}
+    engines: {node: '>= 10'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@next/swc-win32-x64-msvc@14.2.18':
+    resolution: {integrity: sha512-dtRGMhiU9TN5nyhwzce+7c/4CCeykYS+ipY/4mIrGzJ71+7zNo55ZxCB7cAVuNqdwtYniFNR2c9OFQ6UdFIMcg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@reduxjs/toolkit@2.12.0':
+    resolution: {integrity: sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw==}
+    peerDependencies:
+      react: ^16.9.0 || ^17.0.0 || ^18 || ^19
+      react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-redux:
+        optional: true
+
+  '@rolldown/pluginutils@1.0.0-beta.27':
+    resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==}
+
+  '@rollup/rollup-android-arm-eabi@4.62.2':
+    resolution: {integrity: sha512-6o7ZLZK+BeenkZCFNDXqpbjw9bD6nuWonvS/lwQJp7NoVVxm6p3qE7qQ5jGuBjiFsgvqjD8mZAU5oWxTmbOeOg==}
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.62.2':
+    resolution: {integrity: sha512-BaH7BllCACHoH1LguOU56UItGfUWjujlO65kS9LAodViaN4bwIKd7oeW/ZHJ/4ljr/7MIiENnNy3HJ0zXv8Zkw==}
+    cpu: [arm64]
+    os: [android]
+
+  '@rollup/rollup-darwin-arm64@4.62.2':
+    resolution: {integrity: sha512-v39RCCvj4He82I9sFmk+M1VZ0PLM9sfsLVikjfx2hYBNALhrrOR2D3JjQA6AhlaSOgcR+RzrKY7e1+bT6SUO/A==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rollup/rollup-darwin-x64@4.62.2':
+    resolution: {integrity: sha512-yl0y2vq3S3lHeuXhEdss6TWfKW8vkujImO12tn4ZkG/4oghr09LvdYm2RElVjokTQiUvDUGXLGsYeLqUMCKpGA==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rollup/rollup-freebsd-arm64@4.62.2':
+    resolution: {integrity: sha512-tT4pvt4qXD+vEoezupCWi+a1F0vvDiksiHc+PxRlYTOH1I6/X4id9jPxTP+Fg+545euaFT1jJVs4CEdHZAU1vw==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.62.2':
+    resolution: {integrity: sha512-6nU5F2wCW+qvCBhTn1pdIU3bzsIoF7EUwsCDRxilWGprQR6yd508YnH9+OKFCwpfS8pjZqDUmnCAr7exax0XCg==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.62.2':
+    resolution: {integrity: sha512-n1GJHPOvpIfhi3TmrCeh6S6URt9BFCt0KQE3qvexyGCTAKpR4Lg+eWvNZEqu7epxwus/8ElT3hacYEucm49SZg==}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-arm-musleabihf@4.62.2':
+    resolution: {integrity: sha512-JqgflS8wEB+UXV/vS1RpRbifGBeN4D5lz8D8oOFbFZw4vedvdOgCFAjfBmIMdW3yL10XpQQ0Ambepw6MXrhOnA==}
+    cpu: [arm]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-arm64-gnu@4.62.2':
+    resolution: {integrity: sha512-wnFJkogWvN4jm/hQRF2UBaeUmk20j5+DmHvoyWii2b8HJDyvz1MF2OU/6ynXt2KR63rbZLWkFpoytpdc/yBuSA==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-arm64-musl@4.62.2':
+    resolution: {integrity: sha512-HVu2bp0zhvJ8xHEV9+UUs7S90VadmBSY3LcIMvozbPo4AuMGDWlz3ymHLHZPX4hR67TKTt8Qp5PJ5RBg/i+RMQ==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-loong64-gnu@4.62.2':
+    resolution: {integrity: sha512-mQqqAV8QaoSgr9I2fKDLY2BAVvmKjWoGiu/cSYQonsLvtqwEn1E4QYfnCOcp5zoEqNhsDYin1s6jx/VJmrxlZg==}
+    cpu: [loong64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-loong64-musl@4.62.2':
+    resolution: {integrity: sha512-IxKLoxCQ2IWi6bT2akyDUBGsOImDKB+sPp4EsTmwFQ/fMwpCKm8uLSSgP/Kx/QYUgKis6SEZ5/Nlhup0DIA0PQ==}
+    cpu: [loong64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-ppc64-gnu@4.62.2':
+    resolution: {integrity: sha512-Mk5ha2RQSgyFfmYYLkBpPnUk8D8FriBxesO1u9O75X0mHgXL1UQcH5Itl2lurWL2tj0RxV9b9tJgipac0hRY9A==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-ppc64-musl@4.62.2':
+    resolution: {integrity: sha512-CjvEnqJL/0/TQ3TXX3OPIJ/kmBellrWd4heXUmHeJlTnmwjKpSJzoehLaL6Xk0ZnMHBu9dZuFADNOrtjF4v+2w==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.62.2':
+    resolution: {integrity: sha512-1SiZbzwdkaDURsew/tSOrooKiYy7EQGT6m8ufavAi9NEyQb/6VuIxFXAL1fqa4iZe3g4NbNk4P7J32z2tw5Mgg==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-riscv64-musl@4.62.2':
+    resolution: {integrity: sha512-nQts12zJ3NQRoE6uYljOH89v7szzLDvG2JD/vsX+vGXU8w/At1GowTZ5/7qeFQ8m7L55rpR8Okugnuo5bgjy2Q==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-s390x-gnu@4.62.2':
+    resolution: {integrity: sha512-E9/ll019jhPIJgpzfZoIkBGhcz+kKNgVWYRY0zr9srBdPPFVpvOKW8VaJKUbeK+eZXyQF9ltME+Kk6affeaPgg==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-x64-gnu@4.62.2':
+    resolution: {integrity: sha512-5BqxR/pshjey51iliyzTD5Xi3EN0aLmQ2lZ3lvefVV9c82BvrLo2/6OT55iifpWBufs6kdwWbuOKS841DrmK9A==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-x64-musl@4.62.2':
+    resolution: {integrity: sha512-uNN83XxQrRAh/w0/pmAfibcwyb6YWt4gP+dpnQKPVJshAloQ785ii8CT8ZCIxkGg9opVsvAlGhFitSm6D1Jjpg==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-openbsd-x64@4.62.2':
+    resolution: {integrity: sha512-srjEIxSH3LRnJN6THczDHWQplqEMFiAJrTab0msUryh9kwNpkICf3Ea6q6MN/2cZwRFUNx5w+h6Hpi4QuHS6Zg==}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@rollup/rollup-openharmony-arm64@4.62.2':
+    resolution: {integrity: sha512-8hOJnxgbyObnCm5AlRA3A931xX19xq80RjVTKgJOvEKWqJruP/Uf12IbAOaDjjEXYRewwHLfmF0YRIdK3OwKWA==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rollup/rollup-win32-arm64-msvc@4.62.2':
+    resolution: {integrity: sha512-mmF4AY1i0hG/bLWUctUq59gtmgaSIRa3cu/A3JFRp/sCNEme2bgDEiDS22P9FbnJB8NJNF4jPJiSP5RHQpUTDg==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rollup/rollup-win32-ia32-msvc@4.62.2':
+    resolution: {integrity: sha512-DZgkknc6jhHrk46V25vbAM0zZkyP0nSDkJB8/dRkLTxv470dOmWDqGoEJl/9A0dFfS7yE3REOwNDxpHwSLSt0Q==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-gnu@4.62.2':
+    resolution: {integrity: sha512-T6xr6ucWSFto+VGajA8YH26LdpHRuP4YLHEKAtCWvJDOlnmWcDZVCI2Jmjr+IFHDlt2zRaTAKE4tfjTaWLgJBg==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.62.2':
+    resolution: {integrity: sha512-BfzEnDJOt9T8M989/lA37EcJgat01wLRnoi5dQf3QzOH7jzpqTAzdDbVfRljVr5r+jzKqpbHeyOfAaXxAd0PAA==}
+    cpu: [x64]
+    os: [win32]
+
+  '@standard-schema/spec@1.1.0':
+    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
+
+  '@standard-schema/utils@0.3.0':
+    resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
+
+  '@swc/counter@0.1.3':
+    resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
+
+  '@swc/helpers@0.5.5':
+    resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==}
+
+  '@testing-library/dom@10.4.1':
+    resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
+    engines: {node: '>=18'}
+
+  '@testing-library/jest-dom@6.9.1':
+    resolution: {integrity: sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==}
+    engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
+
+  '@testing-library/react@16.3.2':
+    resolution: {integrity: sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@testing-library/dom': ^10.0.0
+      '@types/react': ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^18.0.0 || ^19.0.0
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@testing-library/user-event@14.6.1':
+    resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==}
+    engines: {node: '>=12', npm: '>=6'}
+    peerDependencies:
+      '@testing-library/dom': '>=7.21.4'
+
+  '@types/aria-query@5.0.4':
+    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
+
+  '@types/babel__core@7.20.5':
+    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
+
+  '@types/babel__generator@7.27.0':
+    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
+
+  '@types/babel__template@7.4.4':
+    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
+
+  '@types/babel__traverse@7.28.0':
+    resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
+
+  '@types/d3-array@3.2.2':
+    resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}
+
+  '@types/d3-color@3.1.3':
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+
+  '@types/d3-drag@3.0.7':
+    resolution: {integrity: sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==}
+
+  '@types/d3-ease@3.0.2':
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
+
+  '@types/d3-interpolate@3.0.4':
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+
+  '@types/d3-path@3.1.1':
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
+
+  '@types/d3-scale@4.0.9':
+    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
+
+  '@types/d3-selection@3.0.11':
+    resolution: {integrity: sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==}
+
+  '@types/d3-shape@3.1.8':
+    resolution: {integrity: sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==}
+
+  '@types/d3-time@3.0.4':
+    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
+
+  '@types/d3-timer@3.0.2':
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
+
+  '@types/d3-transition@3.0.9':
+    resolution: {integrity: sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==}
+
+  '@types/d3-zoom@3.0.8':
+    resolution: {integrity: sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==}
+
+  '@types/debug@4.1.13':
+    resolution: {integrity: sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==}
+
+  '@types/estree-jsx@1.0.5':
+    resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
+
+  '@types/estree@1.0.9':
+    resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
+
+  '@types/hast@3.0.4':
+    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
+
+  '@types/jmespath@0.15.2':
+    resolution: {integrity: sha512-pegh49FtNsC389Flyo9y8AfkVIZn9MMPE9yJrO9svhq6Fks2MwymULWjZqySuxmctd3ZH4/n7Mr98D+1Qo5vGA==}
+
+  '@types/mdast@4.0.4':
+    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
+
+  '@types/ms@2.1.0':
+    resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
+
+  '@types/mustache@4.2.6':
+    resolution: {integrity: sha512-t+8/QWTAhOFlrF1IVZqKnMRJi84EgkIK5Kh0p2JV4OLywUvCwJPFxbJAl7XAow7DVIHsF+xW9f1MVzg0L6Szjw==}
+
+  '@types/node@22.19.20':
+    resolution: {integrity: sha512-6tELRwSDYWW9EdZhbeZmYGZ1/7Djkt+Ah3/ScEYT9cDord7UJzasR/4D3VONg9tQI5CDp+/CZC1AXj2pCFOvpw==}
+
+  '@types/prop-types@15.7.15':
+    resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==}
+
+  '@types/react-dom@18.3.7':
+    resolution: {integrity: sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==}
+    peerDependencies:
+      '@types/react': ^18.0.0
+
+  '@types/react@18.3.31':
+    resolution: {integrity: sha512-vfEqpXTvwT91yhmwdfouStN2hSKwTvyRs8qpLfADyrq/kxDw0hZM7Wk9Ug1FELj8hIby+S/+kQCSRFF32nv2Qw==}
+
+  '@types/unist@2.0.11':
+    resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
+
+  '@types/unist@3.0.3':
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
+
+  '@types/use-sync-external-store@0.0.6':
+    resolution: {integrity: sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==}
+
+  '@ungap/structured-clone@1.3.1':
+    resolution: {integrity: sha512-mUFwbeTqrVgDQxFveS+df2yfap6iuP20NAKAsBt5jDEoOTDew+zwLAOilHCeQJOVSvmgCX4ogqIrA0mnyr08yQ==}
+
+  '@vitejs/plugin-react@4.7.0':
+    resolution: {integrity: sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+
+  '@vitest/expect@2.1.9':
+    resolution: {integrity: sha512-UJCIkTBenHeKT1TTlKMJWy1laZewsRIzYighyYiJKZreqtdxSos/S1t+ktRMQWu2CKqaarrkeszJx1cgC5tGZw==}
+
+  '@vitest/mocker@2.1.9':
+    resolution: {integrity: sha512-tVL6uJgoUdi6icpxmdrn5YNo3g3Dxv+IHJBr0GXHaEdTcw3F+cPKnsXFhli6nO+f/6SDKPHEK1UN+k+TQv0Ehg==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^5.0.0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+
+  '@vitest/pretty-format@2.1.9':
+    resolution: {integrity: sha512-KhRIdGV2U9HOUzxfiHmY8IFHTdqtOhIzCpd8WRdJiE7D/HUcZVD0EgQCVjm+Q9gkUXWgBvMmTtZgIG48wq7sOQ==}
+
+  '@vitest/runner@2.1.9':
+    resolution: {integrity: sha512-ZXSSqTFIrzduD63btIfEyOmNcBmQvgOVsPNPe0jYtESiXkhd8u2erDLnMxmGrDCwHCCHE7hxwRDCT3pt0esT4g==}
+
+  '@vitest/snapshot@2.1.9':
+    resolution: {integrity: sha512-oBO82rEjsxLNJincVhLhaxxZdEtV0EFHMK5Kmx5sJ6H9L183dHECjiefOAdnqpIgT5eZwT04PoggUnW88vOBNQ==}
+
+  '@vitest/spy@2.1.9':
+    resolution: {integrity: sha512-E1B35FwzXXTs9FHNK6bDszs7mtydNi5MIfUWpceJ8Xbfb1gBMscAnwLbEu+B44ed6W3XjL9/ehLPHR1fkf1KLQ==}
+
+  '@vitest/utils@2.1.9':
+    resolution: {integrity: sha512-v0psaMSkNJ3A2NMrUEHFRzJtDPFn+/VWZ5WxImB21T9fjucJRmS7xCS3ppEnARb9y11OAzaD+P2Ps+b+BGX5iQ==}
+
+  '@xyflow/react@12.11.0':
+    resolution: {integrity: sha512-na4IO33FSs2OS72hASgZDmTYwFAkef7Z74uBUVrong3ARmQQHfnRUVaCFn1kTt5LbS6pK03TbYjCPGLjLFfziA==}
+    peerDependencies:
+      '@types/react': '>=17'
+      '@types/react-dom': '>=17'
+      react: '>=17'
+      react-dom: '>=17'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@xyflow/system@0.0.77':
+    resolution: {integrity: sha512-qCDCMCQAAgUu8yHnhloHG9F5mwPX5E+Wl8McpYIOPSSXfzFJJoZcwOcsDiAjitVKIg2de1WmJbCHfpcvxprsgg==}
+
+  agent-base@7.1.4:
+    resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
+    engines: {node: '>= 14'}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-styles@5.2.0:
+    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
+    engines: {node: '>=10'}
+
+  aria-query@5.3.0:
+    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
+
+  aria-query@5.3.2:
+    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
+    engines: {node: '>= 0.4'}
+
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
+
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
+  bail@2.0.2:
+    resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
+
+  baseline-browser-mapping@2.10.43:
+    resolution: {integrity: sha512-AjYpR78kDWAY3Efj+cDTFH9t9SCoL7OoTp1BOb0mQV7S+6CiLwnWM3FyxhJtdPufDFKzmCSFoUncKjWgJEZTCQ==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  browserslist@4.28.6:
+    resolution: {integrity: sha512-FQBYNK15VMslhLHpA7+n+n1GOlF1kId2xcCg7/j95f24AOF6VDYMNH4mFxF7KuaTdv627faazpOAjFzMrfJOUw==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  busboy@1.6.0:
+    resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
+    engines: {node: '>=10.16.0'}
+
+  cac@6.7.14:
+    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
+    engines: {node: '>=8'}
+
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
+  caniuse-lite@1.0.30001797:
+    resolution: {integrity: sha512-l8xKG+gwAIExZGl9FrF7KUwuOmk6wbEPC9Xoy/RtnWv1XG0Q4LFlagaLpUv3Kiza3W/wm27zy0yWJEieYKAP6w==}
+
+  caniuse-lite@1.0.30001805:
+    resolution: {integrity: sha512-52noaS3DubycKSXaU30TwPGIp+POyQSUVa5jBEq3vkRkY0kjyb3LQgvhU6WGyCcyXqVLWO0Cw0Q6BSdD0kUfVA==}
+
+  ccount@2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+
+  chai@5.3.3:
+    resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
+    engines: {node: '>=18'}
+
+  character-entities-html4@2.1.0:
+    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
+
+  character-entities-legacy@3.0.0:
+    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
+
+  character-entities@2.0.2:
+    resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
+
+  character-reference-invalid@2.0.1:
+    resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
+
+  check-error@2.1.3:
+    resolution: {integrity: sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==}
+    engines: {node: '>= 16'}
+
+  classcat@5.0.5:
+    resolution: {integrity: sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==}
+
+  client-only@0.0.1:
+    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
+  comma-separated-tokens@2.0.3:
+    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
+
+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+
+  css.escape@1.5.1:
+    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
+
+  cssstyle@4.6.0:
+    resolution: {integrity: sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==}
+    engines: {node: '>=18'}
+
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
+
+  d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-dispatch@3.0.1:
+    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
+    engines: {node: '>=12'}
+
+  d3-drag@3.0.0:
+    resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
+    engines: {node: '>=12'}
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-format@3.1.2:
+    resolution: {integrity: sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+
+  d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+
+  d3-selection@3.0.0:
+    resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
+    engines: {node: '>=12'}
+
+  d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+
+  d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+
+  d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
+  d3-transition@3.0.1:
+    resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      d3-selection: 2 - 3
+
+  d3-zoom@3.0.0:
+    resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
+    engines: {node: '>=12'}
+
+  data-urls@5.0.0:
+    resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
+    engines: {node: '>=18'}
+
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  decimal.js-light@2.5.1:
+    resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
+
+  decimal.js@10.6.0:
+    resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
+
+  decode-named-character-reference@1.3.0:
+    resolution: {integrity: sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==}
+
+  deep-eql@5.0.2:
+    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
+    engines: {node: '>=6'}
+
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
+  devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+
+  dom-accessibility-api@0.5.16:
+    resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
+
+  dom-accessibility-api@0.6.3:
+    resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
+
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
+  electron-to-chromium@1.5.389:
+    resolution: {integrity: sha512-cEto7aeOqBfU1D+c5py5pE+ooscKE75JifxLBdFUZsqAxRS6y7kebtxAZvICszSl05gPjYHDTjY+lXpyGvpJbg==}
+
+  entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
+    engines: {node: '>=0.12'}
+
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  es-module-lexer@1.7.0:
+    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
+
+  es-object-atoms@1.1.2:
+    resolution: {integrity: sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==}
+    engines: {node: '>= 0.4'}
+
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+
+  es-toolkit@1.49.0:
+    resolution: {integrity: sha512-G5iZ6Pc/FNRY/soKZHC+TxGDD83rHUDXxzaWhGCX44vAv/tMs56WMusnm/KMNK+luUPsgA9U28cGr4RDlSzL2g==}
+
+  esbuild@0.21.5:
+    resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
+    engines: {node: '>=12'}
+    hasBin: true
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  escape-string-regexp@5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+
+  estree-util-is-identifier-name@3.0.0:
+    resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
+
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
+  eventemitter3@5.0.4:
+    resolution: {integrity: sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==}
+
+  expect-type@1.4.0:
+    resolution: {integrity: sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==}
+    engines: {node: '>=12.0.0'}
+
+  extend@3.0.2:
+    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
+
+  form-data@4.0.6:
+    resolution: {integrity: sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==}
+    engines: {node: '>= 6'}
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+
+  hasown@2.0.4:
+    resolution: {integrity: sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==}
+    engines: {node: '>= 0.4'}
+
+  hast-util-to-jsx-runtime@2.3.6:
+    resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==}
+
+  hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+
+  html-encoding-sniffer@4.0.0:
+    resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
+    engines: {node: '>=18'}
+
+  html-url-attributes@3.0.1:
+    resolution: {integrity: sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==}
+
+  http-proxy-agent@7.0.2:
+    resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
+    engines: {node: '>= 14'}
+
+  https-proxy-agent@7.0.6:
+    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
+    engines: {node: '>= 14'}
+
+  iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+
+  immer@11.1.15:
+    resolution: {integrity: sha512-VrNANlmnWQnh5COXIIOQXM9oOJw7naGKlBT74ZOOR6lpVXc3gFEu9FJLDFcpCJ2j+NWr8TIwtWD//T6ZX6TKiQ==}
+
+  indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
+
+  inline-style-parser@0.2.7:
+    resolution: {integrity: sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==}
+
+  internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+
+  is-alphabetical@2.0.1:
+    resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
+
+  is-alphanumerical@2.0.1:
+    resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
+
+  is-decimal@2.0.1:
+    resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
+
+  is-hexadecimal@2.0.1:
+    resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
+
+  is-plain-obj@4.1.0:
+    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
+    engines: {node: '>=12'}
+
+  is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+
+  jmespath@0.16.0:
+    resolution: {integrity: sha512-9FzQjJ7MATs1tSpnco1K6ayiYE3figslrXA72G2HQ/n76RzvYlofyi5QM+iX4YRs/pu3yzxlVQSST23+dMDknw==}
+    engines: {node: '>= 0.6.0'}
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  jsdom@25.0.1:
+    resolution: {integrity: sha512-8i7LzZj7BF8uplX+ZyOlIz86V6TAsSs+np6m1kpW9u0JWi4z/1t+FzcK1aek+ybTnAC4KhBL4uXCNT0wcUIeCw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      canvas: ^2.11.2
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  longest-streak@3.1.0:
+    resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
+
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
+  loupe@3.2.1:
+    resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
+
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+
+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+
+  lz-string@1.5.0:
+    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
+    hasBin: true
+
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  markdown-table@3.0.4:
+    resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
+
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
+  mdast-util-find-and-replace@3.0.2:
+    resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
+
+  mdast-util-from-markdown@2.0.3:
+    resolution: {integrity: sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==}
+
+  mdast-util-gfm-autolink-literal@2.0.1:
+    resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==}
+
+  mdast-util-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==}
+
+  mdast-util-gfm-strikethrough@2.0.0:
+    resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==}
+
+  mdast-util-gfm-table@2.0.0:
+    resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==}
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==}
+
+  mdast-util-gfm@3.1.0:
+    resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==}
+
+  mdast-util-mdx-expression@2.0.1:
+    resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==}
+
+  mdast-util-mdx-jsx@3.2.0:
+    resolution: {integrity: sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==}
+
+  mdast-util-mdxjs-esm@2.0.1:
+    resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==}
+
+  mdast-util-phrasing@4.1.0:
+    resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
+
+  mdast-util-to-hast@13.2.1:
+    resolution: {integrity: sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==}
+
+  mdast-util-to-markdown@2.1.2:
+    resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==}
+
+  mdast-util-to-string@4.0.0:
+    resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
+
+  micromark-core-commonmark@2.0.3:
+    resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
+
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==}
+
+  micromark-extension-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==}
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==}
+
+  micromark-extension-gfm-table@2.1.1:
+    resolution: {integrity: sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==}
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==}
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==}
+
+  micromark-extension-gfm@3.0.0:
+    resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==}
+
+  micromark-factory-destination@2.0.1:
+    resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
+
+  micromark-factory-label@2.0.1:
+    resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
+
+  micromark-factory-space@2.0.1:
+    resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
+
+  micromark-factory-title@2.0.1:
+    resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
+
+  micromark-factory-whitespace@2.0.1:
+    resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
+
+  micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
+
+  micromark-util-chunked@2.0.1:
+    resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
+
+  micromark-util-classify-character@2.0.1:
+    resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
+
+  micromark-util-combine-extensions@2.0.1:
+    resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
+
+  micromark-util-decode-string@2.0.1:
+    resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==}
+
+  micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
+
+  micromark-util-html-tag-name@2.0.1:
+    resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
+
+  micromark-util-normalize-identifier@2.0.1:
+    resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
+
+  micromark-util-resolve-all@2.0.1:
+    resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
+
+  micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
+
+  micromark-util-subtokenize@2.1.0:
+    resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==}
+
+  micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
+
+  micromark-util-types@2.0.2:
+    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
+
+  micromark@4.0.2:
+    resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==}
+
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
+  min-indent@1.0.1:
+    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
+    engines: {node: '>=4'}
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  mustache@4.2.0:
+    resolution: {integrity: sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==}
+    hasBin: true
+
+  nanoid@3.3.12:
+    resolution: {integrity: sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  next@14.2.18:
+    resolution: {integrity: sha512-H9qbjDuGivUDEnK6wa+p2XKO+iMzgVgyr9Zp/4Iv29lKa+DYaxJGjOeEA+5VOvJh/M7HLiskehInSa0cWxVXUw==}
+    engines: {node: '>=18.17.0'}
+    deprecated: This version has a security vulnerability. Please upgrade to a patched version. See https://nextjs.org/blog/security-update-2025-12-11 for more details.
+    hasBin: true
+    peerDependencies:
+      '@opentelemetry/api': ^1.1.0
+      '@playwright/test': ^1.41.2
+      react: ^18.2.0
+      react-dom: ^18.2.0
+      sass: ^1.3.0
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
+      '@playwright/test':
+        optional: true
+      sass:
+        optional: true
+
+  node-releases@2.0.51:
+    resolution: {integrity: sha512-wRNIrw4DmVLKQlbgOMdkMx27Wrpzes2hh5Jtbi2bjPd+4wJstWIqP5A+lscnqbm0xxmT5Bpg8Lec5ItEBwx6BQ==}
+    engines: {node: '>=18'}
+
+  nwsapi@2.2.24:
+    resolution: {integrity: sha512-7YRhZ3jS45LwmSCT4b2sVFHt/WuovaktDU07QrtOBY2PXskss5a9jfmR9jptyumwXST+rFjrmppMY1KT/yn35A==}
+
+  parse-entities@4.0.2:
+    resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}
+
+  parse5@7.3.0:
+    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
+
+  pathe@1.1.2:
+    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
+
+  pathval@2.0.1:
+    resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==}
+    engines: {node: '>= 14.16'}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  postcss@8.4.31:
+    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  postcss@8.5.19:
+    resolution: {integrity: sha512-Mz8SaolMd8nB+G13WkORcxQKHZ/NE4xXevtkJHVuG+guo9/wYKlIMTKAqGdEmYOXR2ijPjTYNHssizdaVSUNdQ==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  pretty-format@27.5.1:
+    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  property-information@7.2.0:
+    resolution: {integrity: sha512-IAtzIB6sUiWaJYrX9smp3V46pBGbBeLFRGdh25kg1334VcBlD8HzhPeNIWQH9zhGmo2itIe25EHt9dQP7G5hmg==}
+
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
+  react-dom@18.3.1:
+    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
+    peerDependencies:
+      react: ^18.3.1
+
+  react-is@17.0.2:
+    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
+
+  react-is@18.3.1:
+    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
+
+  react-markdown@9.1.0:
+    resolution: {integrity: sha512-xaijuJB0kzGiUdG7nc2MOMDUDBWPyGAjZtUrow9XxUeua8IqeP+VlIfAZ3bphpcLTnSZXz6z9jcVC/TCwbfgdw==}
+    peerDependencies:
+      '@types/react': '>=18'
+      react: '>=18'
+
+  react-redux@9.3.0:
+    resolution: {integrity: sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==}
+    peerDependencies:
+      '@types/react': ^18.2.25 || ^19
+      react: ^18.0 || ^19
+      redux: ^5.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      redux:
+        optional: true
+
+  react-refresh@0.17.0:
+    resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
+    engines: {node: '>=0.10.0'}
+
+  react@18.3.1:
+    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
+    engines: {node: '>=0.10.0'}
+
+  recharts@3.10.0:
+    resolution: {integrity: sha512-wulMvfncpIlmu2uFtRU/mE5/+NiVtASXkw2KdwJTdHs3WsASX0WxZlX+rpKgyn5BDbIhkPtCpUKkB9XNK5KE0w==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-is: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  redent@3.0.0:
+    resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
+    engines: {node: '>=8'}
+
+  redux-thunk@3.1.0:
+    resolution: {integrity: sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==}
+    peerDependencies:
+      redux: ^5.0.0
+
+  redux@5.0.1:
+    resolution: {integrity: sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==}
+
+  remark-gfm@4.0.1:
+    resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
+
+  remark-parse@11.0.0:
+    resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
+
+  remark-rehype@11.1.2:
+    resolution: {integrity: sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==}
+
+  remark-stringify@11.0.0:
+    resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
+
+  reselect@5.2.0:
+    resolution: {integrity: sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==}
+
+  rollup@4.62.2:
+    resolution: {integrity: sha512-RFnrW4lhXA3s3eqHDZvN654g8OTjzRfqpIRJYczCGB6HzphckVAi/Qh4tbPUbRuDi7s1Llv8g/NspLkttY3gTA==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
+  rrweb-cssom@0.7.1:
+    resolution: {integrity: sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==}
+
+  rrweb-cssom@0.8.0:
+    resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==}
+
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  saxes@6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
+
+  scheduler@0.23.2:
+    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
+
+  semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+
+  siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  space-separated-tokens@2.0.2:
+    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
+
+  stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+
+  std-env@3.10.0:
+    resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==}
+
+  streamsearch@1.1.0:
+    resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
+    engines: {node: '>=10.0.0'}
+
+  stringify-entities@4.0.4:
+    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
+
+  strip-indent@3.0.0:
+    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
+    engines: {node: '>=8'}
+
+  style-to-js@1.1.21:
+    resolution: {integrity: sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==}
+
+  style-to-object@1.0.14:
+    resolution: {integrity: sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==}
+
+  styled-jsx@5.1.1:
+    resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
+    engines: {node: '>= 12.0.0'}
+    peerDependencies:
+      '@babel/core': '*'
+      babel-plugin-macros: '*'
+      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      babel-plugin-macros:
+        optional: true
+
+  symbol-tree@3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
+  tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+
+  tinyexec@0.3.2:
+    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
+
+  tinypool@1.1.1:
+    resolution: {integrity: sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+
+  tinyrainbow@1.2.0:
+    resolution: {integrity: sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==}
+    engines: {node: '>=14.0.0'}
+
+  tinyspy@3.0.2:
+    resolution: {integrity: sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==}
+    engines: {node: '>=14.0.0'}
+
+  tldts-core@6.1.86:
+    resolution: {integrity: sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==}
+
+  tldts@6.1.86:
+    resolution: {integrity: sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==}
+    hasBin: true
+
+  tough-cookie@5.1.2:
+    resolution: {integrity: sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==}
+    engines: {node: '>=16'}
+
+  tr46@5.1.1:
+    resolution: {integrity: sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==}
+    engines: {node: '>=18'}
+
+  trim-lines@3.0.1:
+    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+
+  trough@2.2.0:
+    resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  typescript@5.9.3:
+    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  undici-types@6.21.0:
+    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+
+  unified@11.0.5:
+    resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
+
+  unist-util-is@6.0.1:
+    resolution: {integrity: sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==}
+
+  unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+
+  unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+
+  unist-util-visit-parents@6.0.2:
+    resolution: {integrity: sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==}
+
+  unist-util-visit@5.1.0:
+    resolution: {integrity: sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==}
+
+  update-browserslist-db@1.2.3:
+    resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
+  use-sync-external-store@1.6.0:
+    resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  vfile-message@4.0.3:
+    resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
+
+  vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+
+  victory-vendor@37.3.6:
+    resolution: {integrity: sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==}
+
+  vite-node@2.1.9:
+    resolution: {integrity: sha512-AM9aQ/IPrW/6ENLQg3AGY4K1N2TGZdR5e4gu/MmmR2xR3Ll1+dib+nook92g4TV3PXVyeyxdWwtaCAiUL0hMxA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+
+  vite@5.4.21:
+    resolution: {integrity: sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || >=20.0.0
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      sass-embedded: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+
+  vitest@2.1.9:
+    resolution: {integrity: sha512-MSmPM9REYqDGBI8439mA4mWhV5sKmDlBKWIYbA3lRb2PTHACE0mgKwA8yQ2xq9vxDTuk4iPrECBAEW2aoFXY0Q==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@types/node': ^18.0.0 || >=20.0.0
+      '@vitest/browser': 2.1.9
+      '@vitest/ui': 2.1.9
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+
+  w3c-xmlserializer@5.0.0:
+    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
+    engines: {node: '>=18'}
+
+  webidl-conversions@7.0.0:
+    resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
+    engines: {node: '>=12'}
+
+  whatwg-encoding@3.1.1:
+    resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
+    engines: {node: '>=18'}
+    deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation
+
+  whatwg-mimetype@4.0.0:
+    resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
+    engines: {node: '>=18'}
+
+  whatwg-url@14.2.0:
+    resolution: {integrity: sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==}
+    engines: {node: '>=18'}
+
+  why-is-node-running@2.3.0:
+    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
+    engines: {node: '>=8'}
+    hasBin: true
+
+  ws@8.21.0:
+    resolution: {integrity: sha512-Vsp28b7DRcimFQvrqu2Wek3z1iYxDCWqHYB8Qsnk/S4RfaCQzPGPyBNuVjJV3cd6UiKtUtp6sNM77gWvzcCH+g==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+  xml-name-validator@5.0.0:
+    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
+    engines: {node: '>=18'}
+
+  xmlchars@2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+
+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
+  zustand@4.5.7:
+    resolution: {integrity: sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==}
+    engines: {node: '>=12.7.0'}
+    peerDependencies:
+      '@types/react': '>=16.8'
+      immer: '>=9.0.6'
+      react: '>=16.8'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+
+  zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+
+snapshots:
+
+  '@adobe/css-tools@4.5.0': {}
+
+  '@asamuzakjp/css-color@3.2.0':
+    dependencies:
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      lru-cache: 10.4.3
+
+  '@babel/code-frame@7.29.7':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.29.7
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/compat-data@7.29.7': {}
+
+  '@babel/core@7.29.7':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/generator': 7.29.7
+      '@babel/helper-compilation-targets': 7.29.7
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)
+      '@babel/helpers': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/template': 7.29.7
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.3
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/generator@7.29.7':
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
+  '@babel/helper-compilation-targets@7.29.7':
+    dependencies:
+      '@babel/compat-data': 7.29.7
+      '@babel/helper-validator-option': 7.29.7
+      browserslist: 4.28.6
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-globals@7.29.7': {}
+
+  '@babel/helper-module-imports@7.29.7':
+    dependencies:
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-module-imports': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+      '@babel/traverse': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-plugin-utils@7.29.7': {}
+
+  '@babel/helper-string-parser@7.29.7': {}
+
+  '@babel/helper-validator-identifier@7.29.7': {}
+
+  '@babel/helper-validator-option@7.29.7': {}
+
+  '@babel/helpers@7.29.7':
+    dependencies:
+      '@babel/template': 7.29.7
+      '@babel/types': 7.29.7
+
+  '@babel/parser@7.29.7':
+    dependencies:
+      '@babel/types': 7.29.7
+
+  '@babel/plugin-transform-react-jsx-self@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-react-jsx-source@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/runtime@7.29.7': {}
+
+  '@babel/template@7.29.7':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+
+  '@babel/traverse@7.29.7':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/generator': 7.29.7
+      '@babel/helper-globals': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/template': 7.29.7
+      '@babel/types': 7.29.7
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/types@7.29.7':
+    dependencies:
+      '@babel/helper-string-parser': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+
+  '@csstools/color-helpers@5.1.0': {}
+
+  '@csstools/css-calc@2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-color-parser@3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/color-helpers': 5.1.0
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-tokenizer@3.0.4': {}
+
+  '@esbuild/aix-ppc64@0.21.5':
+    optional: true
+
+  '@esbuild/android-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/android-arm@0.21.5':
+    optional: true
+
+  '@esbuild/android-x64@0.21.5':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/darwin-x64@0.21.5':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-arm@0.21.5':
+    optional: true
+
+  '@esbuild/linux-ia32@0.21.5':
+    optional: true
+
+  '@esbuild/linux-loong64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.21.5':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-s390x@0.21.5':
+    optional: true
+
+  '@esbuild/linux-x64@0.21.5':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.21.5':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.21.5':
+    optional: true
+
+  '@esbuild/sunos-x64@0.21.5':
+    optional: true
+
+  '@esbuild/win32-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/win32-ia32@0.21.5':
+    optional: true
+
+  '@esbuild/win32-x64@0.21.5':
+    optional: true
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@next/env@14.2.18': {}
+
+  '@next/swc-darwin-arm64@14.2.18':
+    optional: true
+
+  '@next/swc-darwin-x64@14.2.18':
+    optional: true
+
+  '@next/swc-linux-arm64-gnu@14.2.18':
+    optional: true
+
+  '@next/swc-linux-arm64-musl@14.2.18':
+    optional: true
+
+  '@next/swc-linux-x64-gnu@14.2.18':
+    optional: true
+
+  '@next/swc-linux-x64-musl@14.2.18':
+    optional: true
+
+  '@next/swc-win32-arm64-msvc@14.2.18':
+    optional: true
+
+  '@next/swc-win32-ia32-msvc@14.2.18':
+    optional: true
+
+  '@next/swc-win32-x64-msvc@14.2.18':
+    optional: true
+
+  '@reduxjs/toolkit@2.12.0(react-redux@9.3.0(@types/react@18.3.31)(react@18.3.1)(redux@5.0.1))(react@18.3.1)':
+    dependencies:
+      '@standard-schema/spec': 1.1.0
+      '@standard-schema/utils': 0.3.0
+      immer: 11.1.15
+      redux: 5.0.1
+      redux-thunk: 3.1.0(redux@5.0.1)
+      reselect: 5.2.0
+    optionalDependencies:
+      react: 18.3.1
+      react-redux: 9.3.0(@types/react@18.3.31)(react@18.3.1)(redux@5.0.1)
+
+  '@rolldown/pluginutils@1.0.0-beta.27': {}
+
+  '@rollup/rollup-android-arm-eabi@4.62.2':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.62.2':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.62.2':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.62.2':
+    optional: true
+
+  '@rollup/rollup-freebsd-arm64@4.62.2':
+    optional: true
+
+  '@rollup/rollup-freebsd-x64@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-gnu@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-musl@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-gnu@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-musl@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-musl@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.62.2':
+    optional: true
+
+  '@rollup/rollup-openbsd-x64@4.62.2':
+    optional: true
+
+  '@rollup/rollup-openharmony-arm64@4.62.2':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.62.2':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.62.2':
+    optional: true
+
+  '@rollup/rollup-win32-x64-gnu@4.62.2':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.62.2':
+    optional: true
+
+  '@standard-schema/spec@1.1.0': {}
+
+  '@standard-schema/utils@0.3.0': {}
+
+  '@swc/counter@0.1.3': {}
+
+  '@swc/helpers@0.5.5':
+    dependencies:
+      '@swc/counter': 0.1.3
+      tslib: 2.8.1
+
+  '@testing-library/dom@10.4.1':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/runtime': 7.29.7
+      '@types/aria-query': 5.0.4
+      aria-query: 5.3.0
+      dom-accessibility-api: 0.5.16
+      lz-string: 1.5.0
+      picocolors: 1.1.1
+      pretty-format: 27.5.1
+
+  '@testing-library/jest-dom@6.9.1':
+    dependencies:
+      '@adobe/css-tools': 4.5.0
+      aria-query: 5.3.2
+      css.escape: 1.5.1
+      dom-accessibility-api: 0.6.3
+      picocolors: 1.1.1
+      redent: 3.0.0
+
+  '@testing-library/react@16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@testing-library/dom': 10.4.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.31
+      '@types/react-dom': 18.3.7(@types/react@18.3.31)
+
+  '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.1)':
+    dependencies:
+      '@testing-library/dom': 10.4.1
+
+  '@types/aria-query@5.0.4': {}
+
+  '@types/babel__core@7.20.5':
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+      '@types/babel__generator': 7.27.0
+      '@types/babel__template': 7.4.4
+      '@types/babel__traverse': 7.28.0
+
+  '@types/babel__generator@7.27.0':
+    dependencies:
+      '@babel/types': 7.29.7
+
+  '@types/babel__template@7.4.4':
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+
+  '@types/babel__traverse@7.28.0':
+    dependencies:
+      '@babel/types': 7.29.7
+
+  '@types/d3-array@3.2.2': {}
+
+  '@types/d3-color@3.1.3': {}
+
+  '@types/d3-drag@3.0.7':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-ease@3.0.2': {}
+
+  '@types/d3-interpolate@3.0.4':
+    dependencies:
+      '@types/d3-color': 3.1.3
+
+  '@types/d3-path@3.1.1': {}
+
+  '@types/d3-scale@4.0.9':
+    dependencies:
+      '@types/d3-time': 3.0.4
+
+  '@types/d3-selection@3.0.11': {}
+
+  '@types/d3-shape@3.1.8':
+    dependencies:
+      '@types/d3-path': 3.1.1
+
+  '@types/d3-time@3.0.4': {}
+
+  '@types/d3-timer@3.0.2': {}
+
+  '@types/d3-transition@3.0.9':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-zoom@3.0.8':
+    dependencies:
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-selection': 3.0.11
+
+  '@types/debug@4.1.13':
+    dependencies:
+      '@types/ms': 2.1.0
+
+  '@types/estree-jsx@1.0.5':
+    dependencies:
+      '@types/estree': 1.0.9
+
+  '@types/estree@1.0.9': {}
+
+  '@types/hast@3.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
+  '@types/jmespath@0.15.2': {}
+
+  '@types/mdast@4.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
+  '@types/ms@2.1.0': {}
+
+  '@types/mustache@4.2.6': {}
+
+  '@types/node@22.19.20':
+    dependencies:
+      undici-types: 6.21.0
+
+  '@types/prop-types@15.7.15': {}
+
+  '@types/react-dom@18.3.7(@types/react@18.3.31)':
+    dependencies:
+      '@types/react': 18.3.31
+
+  '@types/react@18.3.31':
+    dependencies:
+      '@types/prop-types': 15.7.15
+      csstype: 3.2.3
+
+  '@types/unist@2.0.11': {}
+
+  '@types/unist@3.0.3': {}
+
+  '@types/use-sync-external-store@0.0.6': {}
+
+  '@ungap/structured-clone@1.3.1': {}
+
+  '@vitejs/plugin-react@4.7.0(vite@5.4.21(@types/node@22.19.20))':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/plugin-transform-react-jsx-self': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-react-jsx-source': 7.29.7(@babel/core@7.29.7)
+      '@rolldown/pluginutils': 1.0.0-beta.27
+      '@types/babel__core': 7.20.5
+      react-refresh: 0.17.0
+      vite: 5.4.21(@types/node@22.19.20)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vitest/expect@2.1.9':
+    dependencies:
+      '@vitest/spy': 2.1.9
+      '@vitest/utils': 2.1.9
+      chai: 5.3.3
+      tinyrainbow: 1.2.0
+
+  '@vitest/mocker@2.1.9(vite@5.4.21(@types/node@22.19.20))':
+    dependencies:
+      '@vitest/spy': 2.1.9
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 5.4.21(@types/node@22.19.20)
+
+  '@vitest/pretty-format@2.1.9':
+    dependencies:
+      tinyrainbow: 1.2.0
+
+  '@vitest/runner@2.1.9':
+    dependencies:
+      '@vitest/utils': 2.1.9
+      pathe: 1.1.2
+
+  '@vitest/snapshot@2.1.9':
+    dependencies:
+      '@vitest/pretty-format': 2.1.9
+      magic-string: 0.30.21
+      pathe: 1.1.2
+
+  '@vitest/spy@2.1.9':
+    dependencies:
+      tinyspy: 3.0.2
+
+  '@vitest/utils@2.1.9':
+    dependencies:
+      '@vitest/pretty-format': 2.1.9
+      loupe: 3.2.1
+      tinyrainbow: 1.2.0
+
+  '@xyflow/react@12.11.0(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(immer@11.1.15)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@xyflow/system': 0.0.77
+      classcat: 5.0.5
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      zustand: 4.5.7(@types/react@18.3.31)(immer@11.1.15)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.31
+      '@types/react-dom': 18.3.7(@types/react@18.3.31)
+    transitivePeerDependencies:
+      - immer
+
+  '@xyflow/system@0.0.77':
+    dependencies:
+      '@types/d3-drag': 3.0.7
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-selection': 3.0.11
+      '@types/d3-transition': 3.0.9
+      '@types/d3-zoom': 3.0.8
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
+
+  agent-base@7.1.4: {}
+
+  ansi-regex@5.0.1: {}
+
+  ansi-styles@5.2.0: {}
+
+  aria-query@5.3.0:
+    dependencies:
+      dequal: 2.0.3
+
+  aria-query@5.3.2: {}
+
+  assertion-error@2.0.1: {}
+
+  asynckit@0.4.0: {}
+
+  bail@2.0.2: {}
+
+  baseline-browser-mapping@2.10.43: {}
+
+  browserslist@4.28.6:
+    dependencies:
+      baseline-browser-mapping: 2.10.43
+      caniuse-lite: 1.0.30001805
+      electron-to-chromium: 1.5.389
+      node-releases: 2.0.51
+      update-browserslist-db: 1.2.3(browserslist@4.28.6)
+
+  busboy@1.6.0:
+    dependencies:
+      streamsearch: 1.1.0
+
+  cac@6.7.14: {}
+
+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
+  caniuse-lite@1.0.30001797: {}
+
+  caniuse-lite@1.0.30001805: {}
+
+  ccount@2.0.1: {}
+
+  chai@5.3.3:
+    dependencies:
+      assertion-error: 2.0.1
+      check-error: 2.1.3
+      deep-eql: 5.0.2
+      loupe: 3.2.1
+      pathval: 2.0.1
+
+  character-entities-html4@2.1.0: {}
+
+  character-entities-legacy@3.0.0: {}
+
+  character-entities@2.0.2: {}
+
+  character-reference-invalid@2.0.1: {}
+
+  check-error@2.1.3: {}
+
+  classcat@5.0.5: {}
+
+  client-only@0.0.1: {}
+
+  clsx@2.1.1: {}
+
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
+  comma-separated-tokens@2.0.3: {}
+
+  convert-source-map@2.0.0: {}
+
+  css.escape@1.5.1: {}
+
+  cssstyle@4.6.0:
+    dependencies:
+      '@asamuzakjp/css-color': 3.2.0
+      rrweb-cssom: 0.8.0
+
+  csstype@3.2.3: {}
+
+  d3-array@3.2.4:
+    dependencies:
+      internmap: 2.0.3
+
+  d3-color@3.1.0: {}
+
+  d3-dispatch@3.0.1: {}
+
+  d3-drag@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-selection: 3.0.0
+
+  d3-ease@3.0.1: {}
+
+  d3-format@3.1.2: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-path@3.1.0: {}
+
+  d3-scale@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.2
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+
+  d3-selection@3.0.0: {}
+
+  d3-shape@3.2.0:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-time-format@4.1.0:
+    dependencies:
+      d3-time: 3.1.0
+
+  d3-time@3.1.0:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-timer@3.0.1: {}
+
+  d3-transition@3.0.1(d3-selection@3.0.0):
+    dependencies:
+      d3-color: 3.1.0
+      d3-dispatch: 3.0.1
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-timer: 3.0.1
+
+  d3-zoom@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
+  data-urls@5.0.0:
+    dependencies:
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.2.0
+
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
+  decimal.js-light@2.5.1: {}
+
+  decimal.js@10.6.0: {}
+
+  decode-named-character-reference@1.3.0:
+    dependencies:
+      character-entities: 2.0.2
+
+  deep-eql@5.0.2: {}
+
+  delayed-stream@1.0.0: {}
+
+  dequal@2.0.3: {}
+
+  devlop@1.1.0:
+    dependencies:
+      dequal: 2.0.3
+
+  dom-accessibility-api@0.5.16: {}
+
+  dom-accessibility-api@0.6.3: {}
+
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  electron-to-chromium@1.5.389: {}
+
+  entities@6.0.1: {}
+
+  es-define-property@1.0.1: {}
+
+  es-errors@1.3.0: {}
+
+  es-module-lexer@1.7.0: {}
+
+  es-object-atoms@1.1.2:
+    dependencies:
+      es-errors: 1.3.0
+
+  es-set-tostringtag@2.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.4
+
+  es-toolkit@1.49.0: {}
+
+  esbuild@0.21.5:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.21.5
+      '@esbuild/android-arm': 0.21.5
+      '@esbuild/android-arm64': 0.21.5
+      '@esbuild/android-x64': 0.21.5
+      '@esbuild/darwin-arm64': 0.21.5
+      '@esbuild/darwin-x64': 0.21.5
+      '@esbuild/freebsd-arm64': 0.21.5
+      '@esbuild/freebsd-x64': 0.21.5
+      '@esbuild/linux-arm': 0.21.5
+      '@esbuild/linux-arm64': 0.21.5
+      '@esbuild/linux-ia32': 0.21.5
+      '@esbuild/linux-loong64': 0.21.5
+      '@esbuild/linux-mips64el': 0.21.5
+      '@esbuild/linux-ppc64': 0.21.5
+      '@esbuild/linux-riscv64': 0.21.5
+      '@esbuild/linux-s390x': 0.21.5
+      '@esbuild/linux-x64': 0.21.5
+      '@esbuild/netbsd-x64': 0.21.5
+      '@esbuild/openbsd-x64': 0.21.5
+      '@esbuild/sunos-x64': 0.21.5
+      '@esbuild/win32-arm64': 0.21.5
+      '@esbuild/win32-ia32': 0.21.5
+      '@esbuild/win32-x64': 0.21.5
+
+  escalade@3.2.0: {}
+
+  escape-string-regexp@5.0.0: {}
+
+  estree-util-is-identifier-name@3.0.0: {}
+
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.9
+
+  eventemitter3@5.0.4: {}
+
+  expect-type@1.4.0: {}
+
+  extend@3.0.2: {}
+
+  form-data@4.0.6:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
+      hasown: 2.0.4
+      mime-types: 2.1.35
+
+  fsevents@2.3.3:
+    optional: true
+
+  function-bind@1.1.2: {}
+
+  gensync@1.0.0-beta.2: {}
+
+  get-intrinsic@1.3.0:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.2
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.4
+      math-intrinsics: 1.1.0
+
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.2
+
+  gopd@1.2.0: {}
+
+  graceful-fs@4.2.11: {}
+
+  has-symbols@1.1.0: {}
+
+  has-tostringtag@1.0.2:
+    dependencies:
+      has-symbols: 1.1.0
+
+  hasown@2.0.4:
+    dependencies:
+      function-bind: 1.1.2
+
+  hast-util-to-jsx-runtime@2.3.6:
+    dependencies:
+      '@types/estree': 1.0.9
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      hast-util-whitespace: 3.0.0
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-mdxjs-esm: 2.0.1
+      property-information: 7.2.0
+      space-separated-tokens: 2.0.2
+      style-to-js: 1.1.21
+      unist-util-position: 5.0.0
+      vfile-message: 4.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  hast-util-whitespace@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  html-encoding-sniffer@4.0.0:
+    dependencies:
+      whatwg-encoding: 3.1.1
+
+  html-url-attributes@3.0.1: {}
+
+  http-proxy-agent@7.0.2:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  https-proxy-agent@7.0.6:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  iconv-lite@0.6.3:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  immer@11.1.15: {}
+
+  indent-string@4.0.0: {}
+
+  inline-style-parser@0.2.7: {}
+
+  internmap@2.0.3: {}
+
+  is-alphabetical@2.0.1: {}
+
+  is-alphanumerical@2.0.1:
+    dependencies:
+      is-alphabetical: 2.0.1
+      is-decimal: 2.0.1
+
+  is-decimal@2.0.1: {}
+
+  is-hexadecimal@2.0.1: {}
+
+  is-plain-obj@4.1.0: {}
+
+  is-potential-custom-element-name@1.0.1: {}
+
+  jmespath@0.16.0: {}
+
+  js-tokens@4.0.0: {}
+
+  jsdom@25.0.1:
+    dependencies:
+      cssstyle: 4.6.0
+      data-urls: 5.0.0
+      decimal.js: 10.6.0
+      form-data: 4.0.6
+      html-encoding-sniffer: 4.0.0
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      is-potential-custom-element-name: 1.0.1
+      nwsapi: 2.2.24
+      parse5: 7.3.0
+      rrweb-cssom: 0.7.1
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 5.1.2
+      w3c-xmlserializer: 5.0.0
+      webidl-conversions: 7.0.0
+      whatwg-encoding: 3.1.1
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.2.0
+      ws: 8.21.0
+      xml-name-validator: 5.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  jsesc@3.1.0: {}
+
+  json5@2.2.3: {}
+
+  longest-streak@3.1.0: {}
+
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+
+  loupe@3.2.1: {}
+
+  lru-cache@10.4.3: {}
+
+  lru-cache@5.1.1:
+    dependencies:
+      yallist: 3.1.1
+
+  lz-string@1.5.0: {}
+
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  markdown-table@3.0.4: {}
+
+  math-intrinsics@1.1.0: {}
+
+  mdast-util-find-and-replace@3.0.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      escape-string-regexp: 5.0.0
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.0.2
+
+  mdast-util-from-markdown@2.0.3:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      mdast-util-to-string: 4.0.0
+      micromark: 4.0.2
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-decode-string: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-stringify-position: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-autolink-literal@2.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-find-and-replace: 3.0.2
+      micromark-util-character: 2.1.1
+
+  mdast-util-gfm-footnote@2.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+      micromark-util-normalize-identifier: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-strikethrough@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-table@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      markdown-table: 3.0.4
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm@3.1.0:
+    dependencies:
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-gfm-autolink-literal: 2.0.1
+      mdast-util-gfm-footnote: 2.1.0
+      mdast-util-gfm-strikethrough: 2.0.0
+      mdast-util-gfm-table: 2.0.0
+      mdast-util-gfm-task-list-item: 2.0.0
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx-expression@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx-jsx@3.2.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+      parse-entities: 4.0.2
+      stringify-entities: 4.0.4
+      unist-util-stringify-position: 4.0.0
+      vfile-message: 4.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdxjs-esm@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-phrasing@4.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      unist-util-is: 6.0.1
+
+  mdast-util-to-hast@13.2.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.3.1
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.1
+      trim-lines: 3.0.1
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.1.0
+      vfile: 6.0.3
+
+  mdast-util-to-markdown@2.1.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      longest-streak: 3.1.0
+      mdast-util-phrasing: 4.1.0
+      mdast-util-to-string: 4.0.0
+      micromark-util-classify-character: 2.0.1
+      micromark-util-decode-string: 2.0.1
+      unist-util-visit: 5.1.0
+      zwitch: 2.0.4
+
+  mdast-util-to-string@4.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+
+  micromark-core-commonmark@2.0.3:
+    dependencies:
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      micromark-factory-destination: 2.0.1
+      micromark-factory-label: 2.0.1
+      micromark-factory-space: 2.0.1
+      micromark-factory-title: 2.0.1
+      micromark-factory-whitespace: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-html-tag-name: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-footnote@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-table@2.1.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm@3.0.0:
+    dependencies:
+      micromark-extension-gfm-autolink-literal: 2.1.0
+      micromark-extension-gfm-footnote: 2.1.0
+      micromark-extension-gfm-strikethrough: 2.1.0
+      micromark-extension-gfm-table: 2.1.1
+      micromark-extension-gfm-tagfilter: 2.0.0
+      micromark-extension-gfm-task-list-item: 2.1.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-destination@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-label@2.0.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-space@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-title@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-whitespace@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-character@2.1.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-chunked@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-classify-character@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-combine-extensions@2.0.1:
+    dependencies:
+      micromark-util-chunked: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-decode-string@2.0.1:
+    dependencies:
+      decode-named-character-reference: 1.3.0
+      micromark-util-character: 2.1.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-encode@2.0.1: {}
+
+  micromark-util-html-tag-name@2.0.1: {}
+
+  micromark-util-normalize-identifier@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-resolve-all@2.0.1:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-util-sanitize-uri@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-encode: 2.0.1
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-subtokenize@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-symbol@2.0.1: {}
+
+  micromark-util-types@2.0.2: {}
+
+  micromark@4.0.2:
+    dependencies:
+      '@types/debug': 4.1.13
+      debug: 4.4.3
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-encode: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mime-db@1.52.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
+  min-indent@1.0.1: {}
+
+  ms@2.1.3: {}
+
+  mustache@4.2.0: {}
+
+  nanoid@3.3.12: {}
+
+  next@14.2.18(@babel/core@7.29.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@next/env': 14.2.18
+      '@swc/helpers': 0.5.5
+      busboy: 1.6.0
+      caniuse-lite: 1.0.30001797
+      graceful-fs: 4.2.11
+      postcss: 8.4.31
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      styled-jsx: 5.1.1(@babel/core@7.29.7)(react@18.3.1)
+    optionalDependencies:
+      '@next/swc-darwin-arm64': 14.2.18
+      '@next/swc-darwin-x64': 14.2.18
+      '@next/swc-linux-arm64-gnu': 14.2.18
+      '@next/swc-linux-arm64-musl': 14.2.18
+      '@next/swc-linux-x64-gnu': 14.2.18
+      '@next/swc-linux-x64-musl': 14.2.18
+      '@next/swc-win32-arm64-msvc': 14.2.18
+      '@next/swc-win32-ia32-msvc': 14.2.18
+      '@next/swc-win32-x64-msvc': 14.2.18
+    transitivePeerDependencies:
+      - '@babel/core'
+      - babel-plugin-macros
+
+  node-releases@2.0.51: {}
+
+  nwsapi@2.2.24: {}
+
+  parse-entities@4.0.2:
+    dependencies:
+      '@types/unist': 2.0.11
+      character-entities-legacy: 3.0.0
+      character-reference-invalid: 2.0.1
+      decode-named-character-reference: 1.3.0
+      is-alphanumerical: 2.0.1
+      is-decimal: 2.0.1
+      is-hexadecimal: 2.0.1
+
+  parse5@7.3.0:
+    dependencies:
+      entities: 6.0.1
+
+  pathe@1.1.2: {}
+
+  pathval@2.0.1: {}
+
+  picocolors@1.1.1: {}
+
+  postcss@8.4.31:
+    dependencies:
+      nanoid: 3.3.12
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  postcss@8.5.19:
+    dependencies:
+      nanoid: 3.3.12
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  pretty-format@27.5.1:
+    dependencies:
+      ansi-regex: 5.0.1
+      ansi-styles: 5.2.0
+      react-is: 17.0.2
+
+  property-information@7.2.0: {}
+
+  punycode@2.3.1: {}
+
+  react-dom@18.3.1(react@18.3.1):
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.3.1
+      scheduler: 0.23.2
+
+  react-is@17.0.2: {}
+
+  react-is@18.3.1: {}
+
+  react-markdown@9.1.0(@types/react@18.3.31)(react@18.3.1):
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@types/react': 18.3.31
+      devlop: 1.1.0
+      hast-util-to-jsx-runtime: 2.3.6
+      html-url-attributes: 3.0.1
+      mdast-util-to-hast: 13.2.1
+      react: 18.3.1
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.2
+      unified: 11.0.5
+      unist-util-visit: 5.1.0
+      vfile: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  react-redux@9.3.0(@types/react@18.3.31)(react@18.3.1)(redux@5.0.1):
+    dependencies:
+      '@types/use-sync-external-store': 0.0.6
+      react: 18.3.1
+      use-sync-external-store: 1.6.0(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.31
+      redux: 5.0.1
+
+  react-refresh@0.17.0: {}
+
+  react@18.3.1:
+    dependencies:
+      loose-envify: 1.4.0
+
+  recharts@3.10.0(@types/react@18.3.31)(react-dom@18.3.1(react@18.3.1))(react-is@18.3.1)(react@18.3.1)(redux@5.0.1):
+    dependencies:
+      '@reduxjs/toolkit': 2.12.0(react-redux@9.3.0(@types/react@18.3.31)(react@18.3.1)(redux@5.0.1))(react@18.3.1)
+      clsx: 2.1.1
+      decimal.js-light: 2.5.1
+      es-toolkit: 1.49.0
+      eventemitter3: 5.0.4
+      immer: 11.1.15
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-is: 18.3.1
+      react-redux: 9.3.0(@types/react@18.3.31)(react@18.3.1)(redux@5.0.1)
+      reselect: 5.2.0
+      tiny-invariant: 1.3.3
+      use-sync-external-store: 1.6.0(react@18.3.1)
+      victory-vendor: 37.3.6
+    transitivePeerDependencies:
+      - '@types/react'
+      - redux
+
+  redent@3.0.0:
+    dependencies:
+      indent-string: 4.0.0
+      strip-indent: 3.0.0
+
+  redux-thunk@3.1.0(redux@5.0.1):
+    dependencies:
+      redux: 5.0.1
+
+  redux@5.0.1: {}
+
+  remark-gfm@4.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-gfm: 3.1.0
+      micromark-extension-gfm: 3.0.0
+      remark-parse: 11.0.0
+      remark-stringify: 11.0.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-parse@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.3
+      micromark-util-types: 2.0.2
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-rehype@11.1.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      mdast-util-to-hast: 13.2.1
+      unified: 11.0.5
+      vfile: 6.0.3
+
+  remark-stringify@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-to-markdown: 2.1.2
+      unified: 11.0.5
+
+  reselect@5.2.0: {}
+
+  rollup@4.62.2:
+    dependencies:
+      '@types/estree': 1.0.9
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.62.2
+      '@rollup/rollup-android-arm64': 4.62.2
+      '@rollup/rollup-darwin-arm64': 4.62.2
+      '@rollup/rollup-darwin-x64': 4.62.2
+      '@rollup/rollup-freebsd-arm64': 4.62.2
+      '@rollup/rollup-freebsd-x64': 4.62.2
+      '@rollup/rollup-linux-arm-gnueabihf': 4.62.2
+      '@rollup/rollup-linux-arm-musleabihf': 4.62.2
+      '@rollup/rollup-linux-arm64-gnu': 4.62.2
+      '@rollup/rollup-linux-arm64-musl': 4.62.2
+      '@rollup/rollup-linux-loong64-gnu': 4.62.2
+      '@rollup/rollup-linux-loong64-musl': 4.62.2
+      '@rollup/rollup-linux-ppc64-gnu': 4.62.2
+      '@rollup/rollup-linux-ppc64-musl': 4.62.2
+      '@rollup/rollup-linux-riscv64-gnu': 4.62.2
+      '@rollup/rollup-linux-riscv64-musl': 4.62.2
+      '@rollup/rollup-linux-s390x-gnu': 4.62.2
+      '@rollup/rollup-linux-x64-gnu': 4.62.2
+      '@rollup/rollup-linux-x64-musl': 4.62.2
+      '@rollup/rollup-openbsd-x64': 4.62.2
+      '@rollup/rollup-openharmony-arm64': 4.62.2
+      '@rollup/rollup-win32-arm64-msvc': 4.62.2
+      '@rollup/rollup-win32-ia32-msvc': 4.62.2
+      '@rollup/rollup-win32-x64-gnu': 4.62.2
+      '@rollup/rollup-win32-x64-msvc': 4.62.2
+      fsevents: 2.3.3
+
+  rrweb-cssom@0.7.1: {}
+
+  rrweb-cssom@0.8.0: {}
+
+  safer-buffer@2.1.2: {}
+
+  saxes@6.0.0:
+    dependencies:
+      xmlchars: 2.2.0
+
+  scheduler@0.23.2:
+    dependencies:
+      loose-envify: 1.4.0
+
+  semver@6.3.1: {}
+
+  siginfo@2.0.0: {}
+
+  source-map-js@1.2.1: {}
+
+  space-separated-tokens@2.0.2: {}
+
+  stackback@0.0.2: {}
+
+  std-env@3.10.0: {}
+
+  streamsearch@1.1.0: {}
+
+  stringify-entities@4.0.4:
+    dependencies:
+      character-entities-html4: 2.1.0
+      character-entities-legacy: 3.0.0
+
+  strip-indent@3.0.0:
+    dependencies:
+      min-indent: 1.0.1
+
+  style-to-js@1.1.21:
+    dependencies:
+      style-to-object: 1.0.14
+
+  style-to-object@1.0.14:
+    dependencies:
+      inline-style-parser: 0.2.7
+
+  styled-jsx@5.1.1(@babel/core@7.29.7)(react@18.3.1):
+    dependencies:
+      client-only: 0.0.1
+      react: 18.3.1
+    optionalDependencies:
+      '@babel/core': 7.29.7
+
+  symbol-tree@3.2.4: {}
+
+  tiny-invariant@1.3.3: {}
+
+  tinybench@2.9.0: {}
+
+  tinyexec@0.3.2: {}
+
+  tinypool@1.1.1: {}
+
+  tinyrainbow@1.2.0: {}
+
+  tinyspy@3.0.2: {}
+
+  tldts-core@6.1.86: {}
+
+  tldts@6.1.86:
+    dependencies:
+      tldts-core: 6.1.86
+
+  tough-cookie@5.1.2:
+    dependencies:
+      tldts: 6.1.86
+
+  tr46@5.1.1:
+    dependencies:
+      punycode: 2.3.1
+
+  trim-lines@3.0.1: {}
+
+  trough@2.2.0: {}
+
+  tslib@2.8.1: {}
+
+  typescript@5.9.3: {}
+
+  undici-types@6.21.0: {}
+
+  unified@11.0.5:
+    dependencies:
+      '@types/unist': 3.0.3
+      bail: 2.0.2
+      devlop: 1.1.0
+      extend: 3.0.2
+      is-plain-obj: 4.1.0
+      trough: 2.2.0
+      vfile: 6.0.3
+
+  unist-util-is@6.0.1:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-position@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-stringify-position@4.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-visit-parents@6.0.2:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+
+  unist-util-visit@5.1.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.0.2
+
+  update-browserslist-db@1.2.3(browserslist@4.28.6):
+    dependencies:
+      browserslist: 4.28.6
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
+  use-sync-external-store@1.6.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
+  vfile-message@4.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-stringify-position: 4.0.0
+
+  vfile@6.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile-message: 4.0.3
+
+  victory-vendor@37.3.6:
+    dependencies:
+      '@types/d3-array': 3.2.2
+      '@types/d3-ease': 3.0.2
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-scale': 4.0.9
+      '@types/d3-shape': 3.1.8
+      '@types/d3-time': 3.0.4
+      '@types/d3-timer': 3.0.2
+      d3-array: 3.2.4
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-scale: 4.0.2
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-timer: 3.0.1
+
+  vite-node@2.1.9(@types/node@22.19.20):
+    dependencies:
+      cac: 6.7.14
+      debug: 4.4.3
+      es-module-lexer: 1.7.0
+      pathe: 1.1.2
+      vite: 5.4.21(@types/node@22.19.20)
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+
+  vite@5.4.21(@types/node@22.19.20):
+    dependencies:
+      esbuild: 0.21.5
+      postcss: 8.5.19
+      rollup: 4.62.2
+    optionalDependencies:
+      '@types/node': 22.19.20
+      fsevents: 2.3.3
+
+  vitest@2.1.9(@types/node@22.19.20)(jsdom@25.0.1):
+    dependencies:
+      '@vitest/expect': 2.1.9
+      '@vitest/mocker': 2.1.9(vite@5.4.21(@types/node@22.19.20))
+      '@vitest/pretty-format': 2.1.9
+      '@vitest/runner': 2.1.9
+      '@vitest/snapshot': 2.1.9
+      '@vitest/spy': 2.1.9
+      '@vitest/utils': 2.1.9
+      chai: 5.3.3
+      debug: 4.4.3
+      expect-type: 1.4.0
+      magic-string: 0.30.21
+      pathe: 1.1.2
+      std-env: 3.10.0
+      tinybench: 2.9.0
+      tinyexec: 0.3.2
+      tinypool: 1.1.1
+      tinyrainbow: 1.2.0
+      vite: 5.4.21(@types/node@22.19.20)
+      vite-node: 2.1.9(@types/node@22.19.20)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 22.19.20
+      jsdom: 25.0.1
+    transitivePeerDependencies:
+      - less
+      - lightningcss
+      - msw
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+
+  w3c-xmlserializer@5.0.0:
+    dependencies:
+      xml-name-validator: 5.0.0
+
+  webidl-conversions@7.0.0: {}
+
+  whatwg-encoding@3.1.1:
+    dependencies:
+      iconv-lite: 0.6.3
+
+  whatwg-mimetype@4.0.0: {}
+
+  whatwg-url@14.2.0:
+    dependencies:
+      tr46: 5.1.1
+      webidl-conversions: 7.0.0
+
+  why-is-node-running@2.3.0:
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+
+  ws@8.21.0: {}
+
+  xml-name-validator@5.0.0: {}
+
+  xmlchars@2.2.0: {}
+
+  yallist@3.1.1: {}
+
+  zustand@4.5.7(@types/react@18.3.31)(immer@11.1.15)(react@18.3.1):
+    dependencies:
+      use-sync-external-store: 1.6.0(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.31
+      immer: 11.1.15
+      react: 18.3.1
+
+  zwitch@2.0.4: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 0000000..1fc3860
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,5 @@
+packages:
+  - "apps/web"
+  - "packages/*"
+allowBuilds:
+  esbuild: true