From 12914dd447e215524c3976d3d5bc39dd74563342 Mon Sep 17 00:00:00 2001
From: Ayush8923 <80516839+Ayush8923@users.noreply.github.com>
Date: Fri, 9 Oct 2026 23:14:09 +0530
Subject: [PATCH 01/12] feat(*): init the chatbot flow

---
 app/(main)/chatbot/page.tsx                   |  74 ++++++++
 app/api/chatbot/message/route.ts              |  23 +++
 app/components/Sidebar.tsx                    |   8 +-
 app/components/chatbot/ChatbotFlowCanvas.tsx  |  69 +++++++
 app/components/chatbot/ChatbotFlowContext.tsx |  23 +++
 app/components/chatbot/ChatbotTestPanel.tsx   | 119 ++++++++++++
 app/components/chatbot/LlmNode.tsx            |  88 +++++++++
 app/components/chatbot/LlmNodeAdvanced.tsx    |  63 +++++++
 app/components/chatbot/LlmNodePromptField.tsx |  73 +++++++
 app/components/chatbot/NodeFieldLabel.tsx     |  22 +++
 app/components/chatbot/TerminalNode.tsx       |  26 +++
 app/components/chatbot/flowHandleStyle.ts     |   9 +
 app/components/chatbot/index.ts               |   5 +
 app/components/icons/index.tsx                |   1 +
 app/components/icons/sidebar/FlowIcon.tsx     |  23 +++
 app/hooks/useChatbotFlow.ts                   | 130 +++++++++++++
 app/hooks/useChatbotTest.ts                   |  94 +++++++++
 app/lib/chatbotClient.ts                      |  26 +++
 app/lib/constants.ts                          |   4 +
 app/lib/modelSchema.ts                        |   2 +
 app/lib/navConfig.ts                          |   6 +
 app/lib/types/chatbot.ts                      |  45 +++++
 package-lock.json                             | 178 ++++++++++++++++++
 package.json                                  |   1 +
 24 files changed, 1107 insertions(+), 5 deletions(-)
 create mode 100644 app/(main)/chatbot/page.tsx
 create mode 100644 app/api/chatbot/message/route.ts
 create mode 100644 app/components/chatbot/ChatbotFlowCanvas.tsx
 create mode 100644 app/components/chatbot/ChatbotFlowContext.tsx
 create mode 100644 app/components/chatbot/ChatbotTestPanel.tsx
 create mode 100644 app/components/chatbot/LlmNode.tsx
 create mode 100644 app/components/chatbot/LlmNodeAdvanced.tsx
 create mode 100644 app/components/chatbot/LlmNodePromptField.tsx
 create mode 100644 app/components/chatbot/NodeFieldLabel.tsx
 create mode 100644 app/components/chatbot/TerminalNode.tsx
 create mode 100644 app/components/chatbot/flowHandleStyle.ts
 create mode 100644 app/components/chatbot/index.ts
 create mode 100644 app/components/icons/sidebar/FlowIcon.tsx
 create mode 100644 app/hooks/useChatbotFlow.ts
 create mode 100644 app/hooks/useChatbotTest.ts
 create mode 100644 app/lib/chatbotClient.ts
 create mode 100644 app/lib/types/chatbot.ts

diff --git a/app/(main)/chatbot/page.tsx b/app/(main)/chatbot/page.tsx
new file mode 100644
index 00000000..720f05b4
--- /dev/null
+++ b/app/(main)/chatbot/page.tsx
@@ -0,0 +1,74 @@
+/**
+ * Chatbot - Build a chatbot flow on a canvas and test each step live.
+ */
+
+"use client";
+
+import Sidebar from "@/app/components/Sidebar";
+import PageHeader from "@/app/components/PageHeader";
+import { Button } from "@/app/components/ui";
+import { PlusIcon } from "@/app/components/icons";
+import { ChatbotFlowCanvas, ChatbotTestPanel } from "@/app/components/chatbot";
+import { useApp } from "@/app/lib/context/AppContext";
+import { useChatbotFlow } from "@/app/hooks/useChatbotFlow";
+
+export default function ChatbotPage() {
+  const { sidebarCollapsed } = useApp();
+  const flow = useChatbotFlow();
+  const node = flow.selectedNode;
+
+  return (
+    <div className="w-full h-screen flex flex-col bg-bg-secondary">
+      <div className="flex flex-1 overflow-hidden">
+        <Sidebar collapsed={sidebarCollapsed} activeRoute="/chatbot" />
+
+        <div className="flex-1 flex flex-col overflow-hidden bg-bg-primary">
+          <PageHeader
+            title="Chatbot"
+            subtitle="Design a chatbot flow and test each step before saving"
+            actions={
+              <Button variant="outline" size="sm" onClick={flow.addNode}>
+                <PlusIcon className="w-3.5 h-3.5" />
+                Add step
+              </Button>
+            }
+          />
+
+          <div className="flex flex-1 min-h-0">
+            <div className="flex-1 min-w-0 bg-bg-primary">
+              <ChatbotFlowCanvas
+                nodes={flow.nodes}
+                edges={flow.edges}
+                onNodesChange={flow.onNodesChange}
+                onEdgesChange={flow.onEdgesChange}
+                onConnect={flow.onConnect}
+                onSelectNode={flow.setSelectedId}
+                updateNodeData={flow.updateNodeData}
+              />
+            </div>
+
+            <aside className="w-[380px] shrink-0 border-l border-border flex flex-col min-h-0 bg-bg-primary">
+              {node ? (
+                <>
+                  <div className="px-4 py-3 border-b border-border">
+                    <p className="text-sm font-semibold text-text-primary">
+                      Test: {node.data.label || "Untitled step"}
+                    </p>
+                    <p className="text-xs text-text-secondary">
+                      Click a step on the canvas to test it.
+                    </p>
+                  </div>
+                  <ChatbotTestPanel key={node.id} data={node.data} />
+                </>
+              ) : (
+                <div className="flex-1 flex items-center justify-center p-6 text-center text-sm text-text-secondary">
+                  Add a step to start testing.
+                </div>
+              )}
+            </aside>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/api/chatbot/message/route.ts b/app/api/chatbot/message/route.ts
new file mode 100644
index 00000000..15991d2a
--- /dev/null
+++ b/app/api/chatbot/message/route.ts
@@ -0,0 +1,23 @@
+import { NextResponse } from "next/server";
+import { apiClient } from "@/app/lib/apiClient";
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const { status, data } = await apiClient(
+      request,
+      "/api/v1/chatbot/message",
+      { method: "POST", body: JSON.stringify(body) },
+    );
+    return NextResponse.json(data, { status });
+  } catch (error) {
+    return NextResponse.json(
+      {
+        success: false,
+        error: error instanceof Error ? error.message : String(error),
+        data: null,
+      },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx
index db585568..2ef7443e 100644
--- a/app/components/Sidebar.tsx
+++ b/app/components/Sidebar.tsx
@@ -1,9 +1,5 @@
-/**
- * Sidebar  - Navigation sidebar with collapse/expand functionality
- * Provides hierarchical navigation with expandable submenus
- */
-
 "use client";
+
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { useRouter } from "next/navigation";
 import Image from "next/image";
@@ -20,6 +16,7 @@ import {
   ShieldCheckIcon,
   SlidersIcon,
   ChatIcon,
+  FlowIcon,
   ChartBarIcon,
   WarningTriangleIcon,
 } from "@/app/components/icons";
@@ -122,6 +119,7 @@ export default function Sidebar({
 
   const iconMap: Record<string, React.ReactNode> = {
     chat: <ChatIcon />,
+    flow: <FlowIcon />,
     clipboard: <ClipboardIcon />,
     document: <DocumentFileIcon />,
     book: <BookOpenIcon />,
diff --git a/app/components/chatbot/ChatbotFlowCanvas.tsx b/app/components/chatbot/ChatbotFlowCanvas.tsx
new file mode 100644
index 00000000..ed3f56f7
--- /dev/null
+++ b/app/components/chatbot/ChatbotFlowCanvas.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import { useMemo } from "react";
+import {
+  Background,
+  BackgroundVariant,
+  Connection,
+  Controls,
+  Edge,
+  EdgeChange,
+  NodeChange,
+  ReactFlow,
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import LlmNode from "@/app/components/chatbot/LlmNode";
+import TerminalNode from "@/app/components/chatbot/TerminalNode";
+import { ChatbotFlowContext } from "@/app/components/chatbot/ChatbotFlowContext";
+import { ChatbotFlowNode, ChatbotNodeData } from "@/app/lib/types/chatbot";
+
+const NODE_TYPES = {
+  llm: LlmNode,
+  flowInput: TerminalNode,
+  flowOutput: TerminalNode,
+};
+
+const DEFAULT_EDGE_OPTIONS = { style: { stroke: "#a3a3a3", strokeWidth: 1 } };
+
+interface ChatbotFlowCanvasProps {
+  nodes: ChatbotFlowNode[];
+  edges: Edge[];
+  onNodesChange: (changes: NodeChange<ChatbotFlowNode>[]) => void;
+  onEdgesChange: (changes: EdgeChange<Edge>[]) => void;
+  onConnect: (connection: Connection) => void;
+  onSelectNode: (id: string) => void;
+  updateNodeData: (id: string, patch: Partial<ChatbotNodeData>) => void;
+}
+
+export default function ChatbotFlowCanvas({
+  nodes,
+  edges,
+  onNodesChange,
+  onEdgesChange,
+  onConnect,
+  onSelectNode,
+  updateNodeData,
+}: ChatbotFlowCanvasProps) {
+  const contextValue = useMemo(() => ({ updateNodeData }), [updateNodeData]);
+
+  return (
+    <ChatbotFlowContext.Provider value={contextValue}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        nodeTypes={NODE_TYPES}
+        defaultEdgeOptions={DEFAULT_EDGE_OPTIONS}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        onNodeClick={(_, node) => onSelectNode(node.id)}
+        fitView
+        fitViewOptions={{ maxZoom: 1, padding: 0.2 }}
+        proOptions={{ hideAttribution: true }}
+      >
+        <Background variant={BackgroundVariant.Dots} gap={16} size={1.5} />
+        <Controls />
+      </ReactFlow>
+    </ChatbotFlowContext.Provider>
+  );
+}
diff --git a/app/components/chatbot/ChatbotFlowContext.tsx b/app/components/chatbot/ChatbotFlowContext.tsx
new file mode 100644
index 00000000..9e49716a
--- /dev/null
+++ b/app/components/chatbot/ChatbotFlowContext.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { createContext, useContext } from "react";
+import { ChatbotNodeData } from "@/app/lib/types/chatbot";
+
+interface ChatbotFlowContextValue {
+  updateNodeData: (id: string, patch: Partial<ChatbotNodeData>) => void;
+}
+
+export const ChatbotFlowContext = createContext<ChatbotFlowContextValue | null>(
+  null,
+);
+
+/** Lets custom nodes edit their own data inline on the canvas. */
+export function useChatbotFlowContext(): ChatbotFlowContextValue {
+  const ctx = useContext(ChatbotFlowContext);
+  if (!ctx) {
+    throw new Error(
+      "useChatbotFlowContext must be used inside ChatbotFlowContext.Provider",
+    );
+  }
+  return ctx;
+}
diff --git a/app/components/chatbot/ChatbotTestPanel.tsx b/app/components/chatbot/ChatbotTestPanel.tsx
new file mode 100644
index 00000000..7884c61e
--- /dev/null
+++ b/app/components/chatbot/ChatbotTestPanel.tsx
@@ -0,0 +1,119 @@
+/**
+ * ChatbotTestPanel - Runs a throwaway test conversation against the selected
+ * node's current (unsaved) prompt and config.
+ */
+
+"use client";
+
+import { FormEvent, useEffect, useRef, useState } from "react";
+import { Button } from "@/app/components/ui";
+import { MarkdownContent } from "@/app/components/chat";
+import { RefreshIcon, SendIcon } from "@/app/components/icons";
+import { useChatbotTest } from "@/app/hooks/useChatbotTest";
+import { ChatbotMessage, ChatbotNodeData } from "@/app/lib/types/chatbot";
+
+interface ChatbotTestPanelProps {
+  data: ChatbotNodeData;
+}
+
+function MessageBubble({ message }: { message: ChatbotMessage }) {
+  const isUser = message.role === "user";
+  return (
+    <div className={`flex ${isUser ? "justify-end" : "justify-start"}`}>
+      <div
+        className={`max-w-[85%] rounded-2xl px-3 py-2 text-sm ${
+          isUser
+            ? "bg-accent-primary text-white whitespace-pre-wrap"
+            : "bg-bg-secondary text-text-primary"
+        }`}
+      >
+        {isUser ? message.content : <MarkdownContent text={message.content} />}
+      </div>
+    </div>
+  );
+}
+
+export default function ChatbotTestPanel({ data }: ChatbotTestPanelProps) {
+  const { history, pendingMessage, isPending, canSend, send, reset } =
+    useChatbotTest(data);
+  const [input, setInput] = useState("");
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  const visible = history.filter((m) => m.role !== "system");
+  const hasStarted = history.length > 0;
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
+  }, [visible.length, pendingMessage, isPending]);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    const text = input.trim();
+    if (!text || isPending) return;
+    setInput("");
+    const ok = await send(text);
+    if (!ok) setInput(text);
+  };
+
+  return (
+    <div className="flex flex-col flex-1 min-h-0">
+      <div className="flex-1 overflow-y-auto p-4 space-y-3">
+        {!hasStarted && !isPending && (
+          <div className="h-full flex flex-col items-center justify-center text-center gap-3">
+            <p className="text-sm text-text-secondary max-w-[260px]">
+              {canSend
+                ? "Start a test - the bot will send the first message."
+                : "Pick a configuration and write a system prompt to start testing."}
+            </p>
+            <Button size="sm" onClick={() => send()} disabled={!canSend}>
+              Start test
+            </Button>
+          </div>
+        )}
+        {visible.map((m, i) => (
+          <MessageBubble key={i} message={m} />
+        ))}
+        {pendingMessage && (
+          <MessageBubble message={{ role: "user", content: pendingMessage }} />
+        )}
+        {isPending && (
+          <p className="text-xs text-text-secondary animate-pulse">
+            Bot is typing…
+          </p>
+        )}
+        <div ref={bottomRef} />
+      </div>
+
+      {hasStarted && (
+        <form
+          onSubmit={handleSubmit}
+          className="border-t border-border p-3 flex items-center gap-2"
+        >
+          <button
+            type="button"
+            onClick={reset}
+            title="Restart test"
+            className="p-2 rounded-full text-text-secondary hover:bg-neutral-100 hover:text-text-primary cursor-pointer"
+          >
+            <RefreshIcon className="w-4 h-4" />
+          </button>
+          <input
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder="Reply as the user…"
+            disabled={isPending}
+            className="flex-1 px-3 py-2 rounded-full border border-border text-sm bg-bg-primary text-text-primary focus:outline-none focus:border-accent-primary disabled:opacity-60"
+          />
+          <button
+            type="submit"
+            disabled={isPending || !input.trim()}
+            title="Send"
+            className="p-2 rounded-full bg-accent-primary text-white hover:bg-accent-hover disabled:bg-neutral-200 disabled:text-text-secondary cursor-pointer disabled:cursor-not-allowed"
+          >
+            <SendIcon className="w-4 h-4" />
+          </button>
+        </form>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/chatbot/LlmNode.tsx b/app/components/chatbot/LlmNode.tsx
new file mode 100644
index 00000000..71c9c002
--- /dev/null
+++ b/app/components/chatbot/LlmNode.tsx
@@ -0,0 +1,88 @@
+/**
+ * LlmNode - Editable LLM step on the chatbot canvas: config, prompt and limits
+ * are edited inline, mirroring the node's data used by the test panel.
+ */
+
+"use client";
+
+import { Handle, NodeProps, Position } from "@xyflow/react";
+import { ChatConfigPicker } from "@/app/components/chat";
+import { ChatbotLlmNode, ChatbotNodeData } from "@/app/lib/types/chatbot";
+import { useChatbotFlowContext } from "@/app/components/chatbot/ChatbotFlowContext";
+import { FLOW_HANDLE_STYLE } from "@/app/components/chatbot/flowHandleStyle";
+import NodeFieldLabel from "@/app/components/chatbot/NodeFieldLabel";
+import LlmNodePromptField from "@/app/components/chatbot/LlmNodePromptField";
+import LlmNodeAdvanced from "@/app/components/chatbot/LlmNodeAdvanced";
+
+const PORT_LABEL_CLASS = "text-sm font-semibold font-mono text-text-primary";
+
+export default function LlmNode({
+  id,
+  data,
+  selected,
+}: NodeProps<ChatbotLlmNode>) {
+  const { updateNodeData } = useChatbotFlowContext();
+  const update = (patch: Partial<ChatbotNodeData>) => updateNodeData(id, patch);
+
+  return (
+    <div
+      className={`w-72 rounded-xl border bg-bg-primary shadow-md transition-colors ${
+        selected
+          ? "border-accent-primary ring-2 ring-accent-primary/20"
+          : "border-border"
+      }`}
+    >
+      <div className="relative px-4 pt-3 pb-1 text-center">
+        <input
+          value={data.label}
+          onChange={(e) => update({ label: e.target.value })}
+          placeholder="Untitled step"
+          className="nodrag w-full px-6 text-center text-base font-semibold text-text-primary bg-transparent focus:outline-none"
+        />
+        <p className="text-[11px] text-text-secondary truncate">{id}</p>
+      </div>
+
+      <div className="relative px-4 py-1">
+        <Handle
+          type="target"
+          position={Position.Left}
+          style={FLOW_HANDLE_STYLE}
+        />
+        <span className={PORT_LABEL_CLASS}>Input</span>
+      </div>
+
+      <div className="px-4 pt-2 pb-3 space-y-3">
+        <div className="nodrag nowheel">
+          <NodeFieldLabel
+            label="Configuration"
+            hint="Saved config and version used to call the model."
+          />
+          <ChatConfigPicker
+            configId={data.configId}
+            version={data.configVersion ?? 0}
+            onSelect={(configId, configVersion) =>
+              update({ configId, configVersion })
+            }
+            alignLeft
+          />
+        </div>
+
+        <LlmNodePromptField
+          value={data.systemPrompt}
+          onChange={(systemPrompt) => update({ systemPrompt })}
+        />
+
+        <LlmNodeAdvanced data={data} onChange={update} />
+      </div>
+
+      <div className="relative px-4 py-2.5 border-t-2 border-text-primary text-right">
+        <span className={PORT_LABEL_CLASS}>Output</span>
+        <Handle
+          type="source"
+          position={Position.Right}
+          style={FLOW_HANDLE_STYLE}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/chatbot/LlmNodeAdvanced.tsx b/app/components/chatbot/LlmNodeAdvanced.tsx
new file mode 100644
index 00000000..726f43c9
--- /dev/null
+++ b/app/components/chatbot/LlmNodeAdvanced.tsx
@@ -0,0 +1,63 @@
+/**
+ * LlmNodeAdvanced - Collapsible per-request limits for an LLM node.
+ */
+
+"use client";
+
+import { useState } from "react";
+import { Field } from "@/app/components/ui";
+import { ChevronDownIcon, ChevronUpIcon } from "@/app/components/icons";
+import { ChatbotNodeData } from "@/app/lib/types/chatbot";
+
+interface LlmNodeAdvancedProps {
+  data: ChatbotNodeData;
+  onChange: (patch: Partial<ChatbotNodeData>) => void;
+}
+
+function toPositiveInt(value: string, fallback: number): number {
+  const n = Number.parseInt(value, 10);
+  return Number.isFinite(n) && n > 0 ? n : fallback;
+}
+
+export default function LlmNodeAdvanced({
+  data,
+  onChange,
+}: LlmNodeAdvancedProps) {
+  const [open, setOpen] = useState(false);
+  const Chevron = open ? ChevronUpIcon : ChevronDownIcon;
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => setOpen((prev) => !prev)}
+        className="nodrag w-full flex items-center justify-center gap-1 py-1 text-xs font-semibold text-text-primary hover:text-accent-primary cursor-pointer"
+      >
+        Advanced
+        <Chevron className="w-3 h-3" />
+      </button>
+      {open && (
+        <div className="nodrag grid grid-cols-2 gap-2 pt-2">
+          <Field
+            label="Max tokens"
+            type="number"
+            value={String(data.maxTokens)}
+            onChange={(v) =>
+              onChange({ maxTokens: toPositiveInt(v, data.maxTokens) })
+            }
+          />
+          <Field
+            label="History token limit"
+            type="number"
+            value={String(data.historyTokenLimit)}
+            onChange={(v) =>
+              onChange({
+                historyTokenLimit: toPositiveInt(v, data.historyTokenLimit),
+              })
+            }
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/chatbot/LlmNodePromptField.tsx b/app/components/chatbot/LlmNodePromptField.tsx
new file mode 100644
index 00000000..2b3755da
--- /dev/null
+++ b/app/components/chatbot/LlmNodePromptField.tsx
@@ -0,0 +1,73 @@
+/**
+ * LlmNodePromptField - Inline system-prompt editor with an expanded modal view.
+ */
+
+"use client";
+
+import { useState } from "react";
+import { createPortal } from "react-dom";
+import { Modal } from "@/app/components/ui";
+import { ExpandIcon } from "@/app/components/icons";
+import NodeFieldLabel from "@/app/components/chatbot/NodeFieldLabel";
+
+interface LlmNodePromptFieldProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+const PLACEHOLDER =
+  "Goal: Register a student. Friendly, short WhatsApp messages, one question at a time.";
+
+export default function LlmNodePromptField({
+  value,
+  onChange,
+}: LlmNodePromptFieldProps) {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div>
+      <NodeFieldLabel
+        label="Prompt"
+        hint="System prompt for this step. Editing it resets the test conversation."
+      >
+        <button
+          type="button"
+          onClick={() => setExpanded(true)}
+          title="Expand prompt"
+          className="nodrag text-text-primary hover:text-accent-primary cursor-pointer"
+        >
+          <ExpandIcon className="w-3.5 h-3.5" />
+        </button>
+      </NodeFieldLabel>
+      <textarea
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={PLACEHOLDER}
+        rows={4}
+        className="nodrag nowheel w-full px-2.5 py-2 rounded-md border border-border text-xs text-text-primary bg-bg-primary placeholder:text-neutral-400 resize-none focus:outline-none focus:border-accent-primary"
+      />
+
+      {/* Portaled: the canvas viewport is CSS-transformed, which breaks `fixed`. */}
+      {expanded &&
+        createPortal(
+          <Modal
+            open
+            onClose={() => setExpanded(false)}
+            title="Prompt"
+            maxWidth="max-w-3xl"
+          >
+            <div className="px-6 pb-6">
+              <textarea
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                placeholder={PLACEHOLDER}
+                autoFocus
+                className="w-full h-[60vh] px-3 py-2 rounded-lg border border-border text-sm font-mono text-text-primary bg-bg-primary placeholder:text-neutral-400 resize-none focus:outline-none focus:border-accent-primary"
+              />
+            </div>
+          </Modal>,
+          document.body,
+        )}
+    </div>
+  );
+}
diff --git a/app/components/chatbot/NodeFieldLabel.tsx b/app/components/chatbot/NodeFieldLabel.tsx
new file mode 100644
index 00000000..b91427fc
--- /dev/null
+++ b/app/components/chatbot/NodeFieldLabel.tsx
@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+import { InfoTooltip } from "@/app/components/ui";
+
+interface NodeFieldLabelProps {
+  label: string;
+  hint: string;
+  children?: ReactNode;
+}
+
+export default function NodeFieldLabel({
+  label,
+  hint,
+  children,
+}: NodeFieldLabelProps) {
+  return (
+    <div className="flex items-center gap-2 mb-1.5">
+      <span className="text-xs font-semibold text-text-secondary">{label}</span>
+      {children}
+      <InfoTooltip text={hint} />
+    </div>
+  );
+}
diff --git a/app/components/chatbot/TerminalNode.tsx b/app/components/chatbot/TerminalNode.tsx
new file mode 100644
index 00000000..e6a95ba6
--- /dev/null
+++ b/app/components/chatbot/TerminalNode.tsx
@@ -0,0 +1,26 @@
+/**
+ * TerminalNode - Fixed "Input" / "Output" pill marking where the flow starts and ends.
+ */
+
+"use client";
+
+import { Handle, NodeProps, Position } from "@xyflow/react";
+import { ChatbotTerminalNode } from "@/app/lib/types/chatbot";
+import { FLOW_HANDLE_STYLE } from "@/app/components/chatbot/flowHandleStyle";
+
+export default function TerminalNode({
+  type,
+  data,
+}: NodeProps<ChatbotTerminalNode>) {
+  const isInput = type === "flowInput";
+  return (
+    <div className="px-4 py-2.5 rounded-lg border border-border bg-bg-primary shadow-sm text-sm font-semibold text-text-primary">
+      {data.label}
+      <Handle
+        type={isInput ? "source" : "target"}
+        position={isInput ? Position.Right : Position.Left}
+        style={FLOW_HANDLE_STYLE}
+      />
+    </div>
+  );
+}
diff --git a/app/components/chatbot/flowHandleStyle.ts b/app/components/chatbot/flowHandleStyle.ts
new file mode 100644
index 00000000..19915593
--- /dev/null
+++ b/app/components/chatbot/flowHandleStyle.ts
@@ -0,0 +1,9 @@
+import type { CSSProperties } from "react";
+
+/** Solid dark dot used for every connection handle on the chatbot canvas. */
+export const FLOW_HANDLE_STYLE: CSSProperties = {
+  width: 10,
+  height: 10,
+  background: "var(--color-text-primary)",
+  border: "none",
+};
diff --git a/app/components/chatbot/index.ts b/app/components/chatbot/index.ts
new file mode 100644
index 00000000..f4230108
--- /dev/null
+++ b/app/components/chatbot/index.ts
@@ -0,0 +1,5 @@
+export { default as ChatbotFlowCanvas } from "./ChatbotFlowCanvas";
+export { default as ChatbotTestPanel } from "./ChatbotTestPanel";
+export { default as LlmNode } from "./LlmNode";
+export { default as TerminalNode } from "./TerminalNode";
+export { ChatbotFlowContext } from "./ChatbotFlowContext";
diff --git a/app/components/icons/index.tsx b/app/components/icons/index.tsx
index d4b6d4d7..547487e6 100644
--- a/app/components/icons/index.tsx
+++ b/app/components/icons/index.tsx
@@ -53,6 +53,7 @@ export { default as ShieldCheckIcon } from "./sidebar/ShieldCheckIcon";
 export { default as LogoutIcon } from "./sidebar/LogoutIcon";
 export { default as AssessmentIcon } from "./sidebar/AssessmentIcon";
 export { default as ChatIcon } from "./sidebar/ChatIcon";
+export { default as FlowIcon } from "./sidebar/FlowIcon";
 export { default as SendIcon } from "./sidebar/SendIcon";
 export { default as ChartBarIcon } from "./sidebar/ChartBarIcon";
 
diff --git a/app/components/icons/sidebar/FlowIcon.tsx b/app/components/icons/sidebar/FlowIcon.tsx
new file mode 100644
index 00000000..feec5fa7
--- /dev/null
+++ b/app/components/icons/sidebar/FlowIcon.tsx
@@ -0,0 +1,23 @@
+interface IconProps {
+  className?: string;
+}
+
+export default function FlowIcon({ className }: IconProps) {
+  return (
+    <svg
+      className={`w-5 h-5 ${className ?? ""}`}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+    >
+      <rect x="3" y="3" width="7" height="5" rx="1.5" />
+      <rect x="14" y="16" width="7" height="5" rx="1.5" />
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M6.5 8v4a2 2 0 002 2h7a2 2 0 012 2"
+      />
+    </svg>
+  );
+}
diff --git a/app/hooks/useChatbotFlow.ts b/app/hooks/useChatbotFlow.ts
new file mode 100644
index 00000000..de75ff36
--- /dev/null
+++ b/app/hooks/useChatbotFlow.ts
@@ -0,0 +1,130 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import {
+  addEdge,
+  Connection,
+  Edge,
+  useEdgesState,
+  useNodesState,
+} from "@xyflow/react";
+import {
+  CHATBOT_DEFAULT_HISTORY_TOKEN_LIMIT,
+  CHATBOT_DEFAULT_MAX_TOKENS,
+} from "@/app/lib/constants";
+import {
+  ChatbotFlowNode,
+  ChatbotLlmNode,
+  ChatbotNodeData,
+} from "@/app/lib/types/chatbot";
+
+const INPUT_ID = "input";
+const OUTPUT_ID = "output";
+const LLM_ID_PREFIX = "LLMResponseWithPrompt";
+const INITIAL_LLM_ID = `${LLM_ID_PREFIX}-1`;
+
+function shortId(): string {
+  return Math.random().toString(16).slice(2, 7);
+}
+
+function createLlmNode(
+  position: { x: number; y: number },
+  label = "New step",
+  id = `${LLM_ID_PREFIX}-${shortId()}`,
+): ChatbotLlmNode {
+  return {
+    id,
+    type: "llm",
+    position,
+    data: {
+      label,
+      systemPrompt: "",
+      configId: "",
+      configVersion: undefined,
+      maxTokens: CHATBOT_DEFAULT_MAX_TOKENS,
+      historyTokenLimit: CHATBOT_DEFAULT_HISTORY_TOKEN_LIMIT,
+    },
+  };
+}
+
+function createInitialFlow(): { nodes: ChatbotFlowNode[]; edges: Edge[] } {
+  const llm = createLlmNode({ x: 260, y: 0 }, "Onboarding", INITIAL_LLM_ID);
+  return {
+    nodes: [
+      {
+        id: INPUT_ID,
+        type: "flowInput",
+        position: { x: 0, y: 55 },
+        data: { label: "Input" },
+        deletable: false,
+      },
+      llm,
+      {
+        id: OUTPUT_ID,
+        type: "flowOutput",
+        position: { x: 640, y: 270 },
+        data: { label: "Output" },
+        deletable: false,
+      },
+    ],
+    edges: [
+      { id: `${INPUT_ID}->${llm.id}`, source: INPUT_ID, target: llm.id },
+      { id: `${llm.id}->${OUTPUT_ID}`, source: llm.id, target: OUTPUT_ID },
+    ],
+  };
+}
+
+function isLlmNode(node: ChatbotFlowNode): node is ChatbotLlmNode {
+  return node.type === "llm";
+}
+
+/** Owns the in-memory (unsaved) chatbot flow graph and the node under test. */
+export function useChatbotFlow() {
+  const [initial] = useState(createInitialFlow);
+  const [nodes, setNodes, onNodesChange] = useNodesState<ChatbotFlowNode>(
+    initial.nodes,
+  );
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>(initial.edges);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+
+  const llmNodes = nodes.filter(isLlmNode);
+  // Fall back to the first LLM node so the test panel always has a target.
+  const selectedNode =
+    llmNodes.find((n) => n.id === selectedId) ?? llmNodes[0] ?? null;
+
+  const onConnect = useCallback(
+    (connection: Connection) => setEdges((eds) => addEdge(connection, eds)),
+    [setEdges],
+  );
+
+  const addNode = useCallback(() => {
+    const node = createLlmNode({ x: 260, y: 160 + llmNodes.length * 60 });
+    setNodes((prev) => [...prev, node]);
+    setSelectedId(node.id);
+  }, [llmNodes.length, setNodes]);
+
+  const updateNodeData = useCallback(
+    (id: string, patch: Partial<ChatbotNodeData>) => {
+      setNodes((prev) =>
+        prev.map((n) =>
+          n.id === id && isLlmNode(n)
+            ? { ...n, data: { ...n.data, ...patch } }
+            : n,
+        ),
+      );
+    },
+    [setNodes],
+  );
+
+  return {
+    nodes,
+    edges,
+    onNodesChange,
+    onEdgesChange,
+    onConnect,
+    selectedNode,
+    setSelectedId,
+    addNode,
+    updateNodeData,
+  };
+}
diff --git a/app/hooks/useChatbotTest.ts b/app/hooks/useChatbotTest.ts
new file mode 100644
index 00000000..5988fbb1
--- /dev/null
+++ b/app/hooks/useChatbotTest.ts
@@ -0,0 +1,94 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useAuth } from "@/app/lib/context/AuthContext";
+import { useToast } from "@/app/hooks/useToast";
+import { sendChatbotMessage } from "@/app/lib/chatbotClient";
+import { ChatbotMessage, ChatbotNodeData } from "@/app/lib/types/chatbot";
+
+/**
+ * Drives the chatbot test panel for a single flow node. History lives only in
+ * React state; it is cleared whenever the node's prompt or config changes so
+ * every edit starts a fresh test.
+ */
+export function useChatbotTest(data: ChatbotNodeData) {
+  const { activeKey } = useAuth();
+  const apiKey = activeKey?.key ?? "";
+  const toast = useToast();
+
+  const [history, setHistory] = useState<ChatbotMessage[]>([]);
+  const [pendingMessage, setPendingMessage] = useState<string | null>(null);
+  const [isPending, setIsPending] = useState(false);
+
+  const resetKey = `${data.systemPrompt}\u0000${data.configId}\u0000${data.configVersion ?? ""}`;
+  const [prevResetKey, setPrevResetKey] = useState(resetKey);
+  if (prevResetKey !== resetKey) {
+    setPrevResetKey(resetKey);
+    setHistory([]);
+    setPendingMessage(null);
+    setIsPending(false);
+  }
+
+  // Bumped on every reset so responses from an outdated test are dropped.
+  const generationRef = useRef(0);
+  useEffect(() => {
+    generationRef.current += 1;
+  }, [resetKey]);
+
+  const canSend = !!data.configId && !!data.systemPrompt.trim();
+
+  const send = useCallback(
+    async (message?: string): Promise<boolean> => {
+      if (!data.configId) {
+        toast.error("Select a configuration and version first.");
+        return false;
+      }
+      if (!data.systemPrompt.trim()) {
+        toast.error("Add a system prompt to the node first.");
+        return false;
+      }
+
+      const generation = generationRef.current;
+      setIsPending(true);
+      setPendingMessage(message ?? null);
+      try {
+        const messages = await sendChatbotMessage(
+          {
+            config_id: data.configId,
+            config_version: data.configVersion,
+            system_prompt: data.systemPrompt,
+            history,
+            message,
+            max_tokens: data.maxTokens,
+            history_token_limit: data.historyTokenLimit,
+          },
+          apiKey,
+        );
+        if (generation !== generationRef.current) return false;
+        setHistory(messages);
+        return true;
+      } catch (err) {
+        if (generation !== generationRef.current) return false;
+        toast.error(
+          err instanceof Error ? err.message : "Something went wrong",
+        );
+        return false;
+      } finally {
+        if (generation === generationRef.current) {
+          setIsPending(false);
+          setPendingMessage(null);
+        }
+      }
+    },
+    [apiKey, data, history, toast],
+  );
+
+  const reset = useCallback(() => {
+    generationRef.current += 1;
+    setHistory([]);
+    setPendingMessage(null);
+    setIsPending(false);
+  }, []);
+
+  return { history, pendingMessage, isPending, canSend, send, reset };
+}
diff --git a/app/lib/chatbotClient.ts b/app/lib/chatbotClient.ts
new file mode 100644
index 00000000..d7ece704
--- /dev/null
+++ b/app/lib/chatbotClient.ts
@@ -0,0 +1,26 @@
+import { apiFetch } from "@/app/lib/apiClient";
+import {
+  ChatbotMessage,
+  ChatbotMessageRequest,
+  ChatbotMessageResponse,
+} from "@/app/lib/types/chatbot";
+
+/**
+ * Sends one turn of a chatbot test conversation. The backend is stateless:
+ * it takes the full history and returns the updated history (old messages
+ * plus the new user/assistant turn).
+ */
+export async function sendChatbotMessage(
+  body: ChatbotMessageRequest,
+  apiKey: string,
+): Promise<ChatbotMessage[]> {
+  const res = await apiFetch<ChatbotMessageResponse>(
+    "/api/chatbot/message",
+    apiKey,
+    { method: "POST", body: JSON.stringify(body) },
+  );
+  if (!res.success || !res.data?.messages) {
+    throw new Error(res.error || "Failed to get a response from the chatbot.");
+  }
+  return res.data.messages;
+}
diff --git a/app/lib/constants.ts b/app/lib/constants.ts
index 8927babc..0a32cebd 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -213,3 +213,7 @@ export const PAGER_BUTTON_IDLE =
   "border-border bg-bg-primary text-text-secondary hover:border-accent-muted hover:text-text-primary";
 export const PAGER_BUTTON_CURRENT =
   "border-accent-primary bg-accent-primary text-white font-semibold";
+
+/** Chatbot flow — default per-request limits for the test panel. */
+export const CHATBOT_DEFAULT_MAX_TOKENS = 2048;
+export const CHATBOT_DEFAULT_HISTORY_TOKEN_LIMIT = 6000;
diff --git a/app/lib/modelSchema.ts b/app/lib/modelSchema.ts
index 375adfb2..3070981e 100644
--- a/app/lib/modelSchema.ts
+++ b/app/lib/modelSchema.ts
@@ -23,6 +23,7 @@ export const SUPPORTED_PROVIDERS = [
   "openai",
   "google",
   "google-aistudio",
+  "anthropic",
 ] as const;
 
 export const SUPPORTED_PARAMS = new Set([
@@ -85,6 +86,7 @@ export const PARAM_VALUE_LABELS: Record<string, Record<string, string>> = {
     medium: "Medium",
     high: "High",
     xhigh: "Extra High",
+    max: "Max",
   },
 };
 
diff --git a/app/lib/navConfig.ts b/app/lib/navConfig.ts
index 63442573..c608682a 100644
--- a/app/lib/navConfig.ts
+++ b/app/lib/navConfig.ts
@@ -48,6 +48,12 @@ export const NAV_ITEMS: NavItemConfig[] = [
     gateDescription:
       "Log in to chat with your assistants and keep conversation history.",
   },
+  {
+    name: "Chatbot",
+    route: "/chatbot",
+    icon: "flow",
+    gateDescription: "Log in to build and test chatbot flows.",
+  },
   {
     name: "Evaluations",
     icon: "clipboard",
diff --git a/app/lib/types/chatbot.ts b/app/lib/types/chatbot.ts
new file mode 100644
index 00000000..5cadcde0
--- /dev/null
+++ b/app/lib/types/chatbot.ts
@@ -0,0 +1,45 @@
+import type { Node } from "@xyflow/react";
+
+export type ChatbotRole = "system" | "user" | "assistant";
+
+export interface ChatbotMessage {
+  role: ChatbotRole;
+  content: string;
+}
+
+/** Data carried by each LLM node on the flow canvas (unsaved, in-memory). */
+export type ChatbotNodeData = {
+  label: string;
+  systemPrompt: string;
+  configId: string;
+  configVersion?: number;
+  maxTokens: number;
+  historyTokenLimit: number;
+};
+
+export type ChatbotLlmNode = Node<ChatbotNodeData, "llm">;
+
+/** Fixed entry/exit points of the flow. */
+export type ChatbotTerminalNode = Node<
+  { label: string },
+  "flowInput" | "flowOutput"
+>;
+
+export type ChatbotFlowNode = ChatbotLlmNode | ChatbotTerminalNode;
+
+export interface ChatbotMessageRequest {
+  config_id: string;
+  config_version?: number;
+  system_prompt: string;
+  history: ChatbotMessage[];
+  /** Omitted on the first call so the bot greets first. */
+  message?: string;
+  max_tokens?: number;
+  history_token_limit?: number;
+}
+
+export interface ChatbotMessageResponse {
+  success: boolean;
+  data?: { messages: ChatbotMessage[] } | null;
+  error?: string | null;
+}
diff --git a/package-lock.json b/package-lock.json
index ec0ed31c..c8759fcd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,9 +7,11 @@
     "": {
       "name": "kaapi-frontend",
       "version": "0.1.0",
+      "license": "AGPL-3.0-or-later",
       "dependencies": {
         "@react-oauth/google": "^0.13.4",
         "@univerjs/presets": "^0.23.0",
+        "@xyflow/react": "^12.12.0",
         "date-fns": "^4.1.0",
         "date-fns-tz": "^3.2.0",
         "highlight.js": "^11.11.1",
@@ -2477,6 +2479,15 @@
       "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
       "license": "MIT"
     },
+    "node_modules/@types/d3-drag": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+      "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
     "node_modules/@types/d3-ease": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
@@ -2507,6 +2518,12 @@
         "@types/d3-time": "*"
       }
     },
+    "node_modules/@types/d3-selection": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.12.tgz",
+      "integrity": "sha512-Qe/KWYhEiIIxGs7HrAAjMfShxKldx19SJtr5zu53f3afPsdZNz7HHtdTLXo/kqeiWNXVycI24kSnfzBYkTzpgw==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-shape": {
       "version": "3.1.8",
       "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
@@ -2528,6 +2545,25 @@
       "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
       "license": "MIT"
     },
+    "node_modules/@types/d3-transition": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
+      "integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-zoom": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.9.tgz",
+      "integrity": "sha512-0sE1406XBYJGiqD3AusTl9ZqC//2mIXix51tbom25gDCA8ri4xnSZg28CaSE8Srl6FClqABUKfsn0qghgdepMA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
+      }
+    },
     "node_modules/@types/debug": {
       "version": "4.1.13",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.13.tgz",
@@ -5318,6 +5354,76 @@
         }
       }
     },
+    "node_modules/@xyflow/react": {
+      "version": "12.12.0",
+      "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.12.0.tgz",
+      "integrity": "sha512-74oXI0Rgm1Eu33cHQAd74J6oVgCH9mbFyTVQbsGgp2kmWwh0HdtBr2VP04z8mbPD+M/xO69nqG5dDEt7/EN2rQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@xyflow/system": "0.0.83",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=17",
+        "@types/react-dom": ">=17",
+        "react": ">=17",
+        "react-dom": ">=17"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@xyflow/react/node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@xyflow/system": {
+      "version": "0.0.83",
+      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.83.tgz",
+      "integrity": "sha512-a//eDjez3WZF47aaPTfVUDD0OINOq+WVwBZCRTqG+m0a5euX8EwlJ4jMY1Wxz0Ocj4xOeekJ70V22Pq0ll8RJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-drag": "^3.0.7",
+        "@types/d3-interpolate": "^3.0.4",
+        "@types/d3-selection": "^3.0.10",
+        "@types/d3-transition": "^3.0.8",
+        "@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"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -5932,6 +6038,12 @@
         "url": "https://polar.sh/cva"
       }
     },
+    "node_modules/classcat": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz",
+      "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==",
+      "license": "MIT"
+    },
     "node_modules/cli-cursor": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz",
@@ -6164,6 +6276,28 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-ease": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
@@ -6219,6 +6353,15 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-shape": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
@@ -6264,6 +6407,41 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
diff --git a/package.json b/package.json
index 6d7d7370..8749b708 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   "dependencies": {
     "@react-oauth/google": "^0.13.4",
     "@univerjs/presets": "^0.23.0",
+    "@xyflow/react": "^12.12.0",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
     "highlight.js": "^11.11.1",

From 33517dfecba5f8630c0f3eb1a2d49ff0604396b4 Mon Sep 17 00:00:00 2001
From: Ayush8923 <80516839+Ayush8923@users.noreply.github.com>
Date: Fri, 23 Oct 2026 00:44:28 +0530
Subject: [PATCH 02/12] fix: implement the state management api flow creation

---
 .env.example                                  |   2 +
 app/(main)/chatbot/page.tsx                   | 106 ++++++--
 app/api/chatbot/message/route.ts              |  23 --
 .../sessions/[session_id]/message/route.ts    |  48 ++++
 app/api/chatbot/sessions/route.ts             |  31 +++
 .../evaluations/[id]/improve-prompt/route.ts  |  26 +-
 app/api/webhooks/chatbot/route.ts             |  56 +++++
 app/api/webhooks/chatbot/stream/route.ts      |  82 +++++++
 app/api/webhooks/prompt-improvement/route.ts  |  11 +-
 app/components/chatbot/ChatbotChatInput.tsx   |  50 ++++
 app/components/chatbot/ChatbotFlowCanvas.tsx  |   3 -
 .../chatbot/ChatbotMessageBubble.tsx          |  23 ++
 app/components/chatbot/ChatbotSessionInfo.tsx |  45 ++++
 app/components/chatbot/ChatbotTestPanel.tsx   | 189 ++++++++-------
 app/components/chatbot/LlmNode.tsx            |  18 +-
 app/components/chatbot/LlmNodeAdvanced.tsx    |  63 -----
 app/hooks/useChatbotFlow.ts                   | 122 ++++++----
 app/hooks/useChatbotPendingReply.ts           |  39 +++
 app/hooks/useChatbotReplyStream.ts            |  43 ++++
 app/hooks/useChatbotSession.ts                | 228 ++++++++++++++++++
 app/hooks/useChatbotTest.ts                   |  94 --------
 app/hooks/useConfigs.ts                       |   6 +-
 app/lib/chatbotClient.ts                      |  73 ++++--
 app/lib/constants.ts                          |  11 +-
 app/lib/store/chatbot.ts                      |  91 +++++++
 app/lib/store/chatbotSessionStore.ts          |  97 ++++++++
 app/lib/types/chatbot.ts                      |  99 ++++++--
 app/lib/types/webhookSecret.ts                |   6 +-
 app/lib/utils/chatbotSessionCookie.ts         |  15 ++
 app/lib/webhookCallback.ts                    |  37 +++
 app/lib/webhookSecret.ts                      |   8 +-
 31 files changed, 1319 insertions(+), 426 deletions(-)
 delete mode 100644 app/api/chatbot/message/route.ts
 create mode 100644 app/api/chatbot/sessions/[session_id]/message/route.ts
 create mode 100644 app/api/chatbot/sessions/route.ts
 create mode 100644 app/api/webhooks/chatbot/route.ts
 create mode 100644 app/api/webhooks/chatbot/stream/route.ts
 create mode 100644 app/components/chatbot/ChatbotChatInput.tsx
 create mode 100644 app/components/chatbot/ChatbotMessageBubble.tsx
 create mode 100644 app/components/chatbot/ChatbotSessionInfo.tsx
 delete mode 100644 app/components/chatbot/LlmNodeAdvanced.tsx
 create mode 100644 app/hooks/useChatbotPendingReply.ts
 create mode 100644 app/hooks/useChatbotReplyStream.ts
 create mode 100644 app/hooks/useChatbotSession.ts
 delete mode 100644 app/hooks/useChatbotTest.ts
 create mode 100644 app/lib/store/chatbot.ts
 create mode 100644 app/lib/store/chatbotSessionStore.ts
 create mode 100644 app/lib/utils/chatbotSessionCookie.ts
 create mode 100644 app/lib/webhookCallback.ts

diff --git a/.env.example b/.env.example
index 09d3f15b..8d0346eb 100644
--- a/.env.example
+++ b/.env.example
@@ -2,3 +2,5 @@ BACKEND_URL=http://localhost:8000
 GUARDRAILS_URL = http://localhost:8001
 GUARDRAILS_TOKEN =
 NEXT_PUBLIC_GOOGLE_CLIENT_ID=your-google-client-id.apps.googleusercontent.com
+NEXT_PUBLIC_APP_URL=https://your-public-app-url.example.com
+WEBHOOK_SECRET=
diff --git a/app/(main)/chatbot/page.tsx b/app/(main)/chatbot/page.tsx
index 720f05b4..92b7f3d1 100644
--- a/app/(main)/chatbot/page.tsx
+++ b/app/(main)/chatbot/page.tsx
@@ -1,21 +1,72 @@
 /**
- * Chatbot - Build a chatbot flow on a canvas and test each step live.
+ * Chatbot - Design the chatbot flow on a canvas; Save stores it as a
+ * server-side session that the test panel chats with.
  */
 
 "use client";
 
+import { useCallback, useEffect } from "react";
 import Sidebar from "@/app/components/Sidebar";
 import PageHeader from "@/app/components/PageHeader";
 import { Button } from "@/app/components/ui";
-import { PlusIcon } from "@/app/components/icons";
 import { ChatbotFlowCanvas, ChatbotTestPanel } from "@/app/components/chatbot";
 import { useApp } from "@/app/lib/context/AppContext";
+import { useToast } from "@/app/hooks/useToast";
 import { useChatbotFlow } from "@/app/hooks/useChatbotFlow";
+import { useChatbotSession } from "@/app/hooks/useChatbotSession";
+import { useChatbotStore } from "@/app/lib/store/chatbot";
+import { ChatbotNodeData } from "@/app/lib/types/chatbot";
+
+function validateFlow(data: ChatbotNodeData): string | null {
+  if (!data.configId) return "Select a configuration and version first.";
+  if (!data.systemPrompt.trim()) return "Add a prompt before saving.";
+  return null;
+}
 
 export default function ChatbotPage() {
   const { sidebarCollapsed } = useApp();
+  const toast = useToast();
   const flow = useChatbotFlow();
-  const node = flow.selectedNode;
+  const session = useChatbotSession();
+  const savedFlow = useChatbotStore((s) => s.savedFlow);
+
+  // Trigger persisted-state rehydration on mount.
+  useEffect(() => {
+    useChatbotStore.persist.rehydrate();
+  }, []);
+
+  const createSessionFor = useCallback(
+    async (data: ChatbotNodeData): Promise<boolean> => {
+      const error = validateFlow(data);
+      if (error) {
+        toast.error(error);
+        return false;
+      }
+      return session.startSession(data);
+    },
+    [session, toast],
+  );
+
+  const handleSave = async () => {
+    if (!flow.llmNode) return;
+    const data = flow.llmNode.data;
+    if (await createSessionFor(data)) {
+      flow.markSaved(data);
+      toast.success("Flow saved. A new chat session has started.");
+    }
+  };
+
+  const handleRestart = async () => {
+    if (!savedFlow) {
+      toast.error("Save the flow first to start a session.");
+      return;
+    }
+    if (await createSessionFor(savedFlow)) {
+      toast.success("New chat session started.");
+    }
+  };
+
+  const canEdit = flow.isDirty && !session.isCreating;
 
   return (
     <div className="w-full h-screen flex flex-col bg-bg-secondary">
@@ -25,12 +76,21 @@ export default function ChatbotPage() {
         <div className="flex-1 flex flex-col overflow-hidden bg-bg-primary">
           <PageHeader
             title="Chatbot"
-            subtitle="Design a chatbot flow and test each step before saving"
+            subtitle="Design a chatbot flow, save it and test it live"
             actions={
-              <Button variant="outline" size="sm" onClick={flow.addNode}>
-                <PlusIcon className="w-3.5 h-3.5" />
-                Add step
-              </Button>
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={flow.discard}
+                  disabled={!canEdit}
+                >
+                  Discard changes
+                </Button>
+                <Button size="sm" onClick={handleSave} disabled={!canEdit}>
+                  {session.isCreating ? "Saving…" : "Save"}
+                </Button>
+              </div>
             }
           />
 
@@ -42,29 +102,23 @@ export default function ChatbotPage() {
                 onNodesChange={flow.onNodesChange}
                 onEdgesChange={flow.onEdgesChange}
                 onConnect={flow.onConnect}
-                onSelectNode={flow.setSelectedId}
                 updateNodeData={flow.updateNodeData}
               />
             </div>
 
             <aside className="w-[380px] shrink-0 border-l border-border flex flex-col min-h-0 bg-bg-primary">
-              {node ? (
-                <>
-                  <div className="px-4 py-3 border-b border-border">
-                    <p className="text-sm font-semibold text-text-primary">
-                      Test: {node.data.label || "Untitled step"}
-                    </p>
-                    <p className="text-xs text-text-secondary">
-                      Click a step on the canvas to test it.
-                    </p>
-                  </div>
-                  <ChatbotTestPanel key={node.id} data={node.data} />
-                </>
-              ) : (
-                <div className="flex-1 flex items-center justify-center p-6 text-center text-sm text-text-secondary">
-                  Add a step to start testing.
-                </div>
-              )}
+              <ChatbotTestPanel
+                hasSession={!!session.sessionId}
+                sessionName={session.sessionName}
+                status={session.status}
+                completionStatus={session.completionStatus}
+                messages={session.messages}
+                isPending={session.isPending}
+                isRestarting={session.isCreating}
+                isDirty={flow.isDirty}
+                onSend={session.send}
+                onRestart={handleRestart}
+              />
             </aside>
           </div>
         </div>
diff --git a/app/api/chatbot/message/route.ts b/app/api/chatbot/message/route.ts
deleted file mode 100644
index 15991d2a..00000000
--- a/app/api/chatbot/message/route.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { NextResponse } from "next/server";
-import { apiClient } from "@/app/lib/apiClient";
-
-export async function POST(request: Request) {
-  try {
-    const body = await request.json();
-    const { status, data } = await apiClient(
-      request,
-      "/api/v1/chatbot/message",
-      { method: "POST", body: JSON.stringify(body) },
-    );
-    return NextResponse.json(data, { status });
-  } catch (error) {
-    return NextResponse.json(
-      {
-        success: false,
-        error: error instanceof Error ? error.message : String(error),
-        data: null,
-      },
-      { status: 500 },
-    );
-  }
-}
diff --git a/app/api/chatbot/sessions/[session_id]/message/route.ts b/app/api/chatbot/sessions/[session_id]/message/route.ts
new file mode 100644
index 00000000..40aeb0fc
--- /dev/null
+++ b/app/api/chatbot/sessions/[session_id]/message/route.ts
@@ -0,0 +1,48 @@
+import { NextRequest, NextResponse } from "next/server";
+import { proxyErrorResponse, proxyJsonResponse } from "@/app/api/_routeProxy";
+import { buildWebhookCallbackUrl } from "@/app/lib/webhookCallback";
+
+/**
+ * Queues one chatbot turn. The browser only sends `message`; the webhook URL
+ * (with its secret) is added here so it never reaches the client.
+ */
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ session_id: string }> },
+) {
+  const { session_id } = await params;
+
+  let webhookUrl: string;
+  try {
+    webhookUrl = buildWebhookCallbackUrl(request, "/api/webhooks/chatbot");
+  } catch (error) {
+    return NextResponse.json(
+      {
+        success: false,
+        error: `Webhook is not configured: ${
+          error instanceof Error ? error.message : String(error)
+        }`,
+      },
+      { status: 500 },
+    );
+  }
+
+  try {
+    const body = (await request.json().catch(() => ({}))) as {
+      message?: string;
+    };
+    return await proxyJsonResponse(
+      request,
+      `/api/v1/chatbot/sessions/${encodeURIComponent(session_id)}/message`,
+      {
+        method: "POST",
+        body: JSON.stringify({
+          ...(body.message ? { message: body.message } : {}),
+          webhook_url: webhookUrl,
+        }),
+      },
+    );
+  } catch (error) {
+    return proxyErrorResponse("chatbot send-message error:", error);
+  }
+}
diff --git a/app/api/chatbot/sessions/route.ts b/app/api/chatbot/sessions/route.ts
new file mode 100644
index 00000000..011cdcbe
--- /dev/null
+++ b/app/api/chatbot/sessions/route.ts
@@ -0,0 +1,31 @@
+import { NextRequest } from "next/server";
+import {
+  proxyErrorResponse,
+  proxyJsonResponse,
+  withQueryParams,
+} from "@/app/api/_routeProxy";
+
+/** Creates a chatbot session (stores the prompt + config pin server-side). */
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    return await proxyJsonResponse(request, "/api/v1/chatbot/sessions", {
+      method: "POST",
+      body: JSON.stringify(body),
+    });
+  } catch (error) {
+    return proxyErrorResponse("chatbot create-session error:", error);
+  }
+}
+
+/** Latest session for a `contact_ref`. */
+export async function GET(request: NextRequest) {
+  try {
+    return await proxyJsonResponse(
+      request,
+      withQueryParams("/api/v1/chatbot/sessions", request.nextUrl.searchParams),
+    );
+  } catch (error) {
+    return proxyErrorResponse("chatbot get-session error:", error);
+  }
+}
diff --git a/app/api/evaluations/[id]/improve-prompt/route.ts b/app/api/evaluations/[id]/improve-prompt/route.ts
index ca9f4ceb..0f808fa6 100644
--- a/app/api/evaluations/[id]/improve-prompt/route.ts
+++ b/app/api/evaluations/[id]/improve-prompt/route.ts
@@ -1,28 +1,9 @@
 import { NextRequest, NextResponse } from "next/server";
 import { apiClient } from "@/app/lib/apiClient";
 import { markJobPending } from "@/app/lib/store/promptImprovementStore";
-import { readWebhookSecret } from "@/app/lib/webhookSecret";
+import { buildWebhookCallbackUrl } from "@/app/lib/webhookCallback";
 import type { LLMJobImmediatePublic } from "@/app/lib/types/promptImprovement";
 
-function resolveCallbackUrl(request: NextRequest): string {
-  const secretResult = readWebhookSecret();
-  if (!secretResult.ok || !secretResult.secret) {
-    throw new Error(
-      secretResult.reason ?? "prompt_improvement_webhook_secret_missing",
-    );
-  }
-  const configured =
-    process.env.NEXT_PUBLIC_APP_URL ?? process.env.APP_URL ?? null;
-  const base = configured
-    ? configured.replace(/\/$/, "")
-    : `${request.headers.get("x-forwarded-proto") ?? "https"}://${
-        request.headers.get("x-forwarded-host") ??
-        request.headers.get("host") ??
-        request.nextUrl.host
-      }`;
-  return `${base}/api/webhooks/prompt-improvement?secret_value=${encodeURIComponent(secretResult.secret)}`;
-}
-
 export async function POST(
   request: NextRequest,
   { params }: { params: Promise<{ id: string }> },
@@ -31,7 +12,10 @@ export async function POST(
     const { id } = await params;
 
     const payload = {
-      callback_url: resolveCallbackUrl(request),
+      callback_url: buildWebhookCallbackUrl(
+        request,
+        "/api/webhooks/prompt-improvement",
+      ),
     };
 
     const { status, data } = await apiClient(
diff --git a/app/api/webhooks/chatbot/route.ts b/app/api/webhooks/chatbot/route.ts
new file mode 100644
index 00000000..e29e3d96
--- /dev/null
+++ b/app/api/webhooks/chatbot/route.ts
@@ -0,0 +1,56 @@
+import { NextRequest, NextResponse } from "next/server";
+import { saveSessionEvent } from "@/app/lib/store/chatbotSessionStore";
+import { isWebhookAuthorized } from "@/app/lib/webhookCallback";
+import type {
+  ChatbotSessionEvent,
+  ChatbotWebhookPayload,
+} from "@/app/lib/types/chatbot";
+
+function toSessionEvent(
+  body: ChatbotWebhookPayload,
+): Omit<ChatbotSessionEvent, "seq"> | null {
+  const data = body.data;
+  if (!data?.session_id) return null;
+  return {
+    sessionId: data.session_id,
+    success: body.success === true,
+    reply: data.reply ?? null,
+    status: data.status ?? null,
+    completionStatus: data.completion_status ?? null,
+    collectedFields: data.collected_fields ?? null,
+    error: body.error ?? null,
+  };
+}
+
+/** Receives a completed chatbot turn from Kaapi and hands it to open streams. */
+export async function POST(request: NextRequest) {
+  try {
+    if (!isWebhookAuthorized(request)) {
+      return NextResponse.json(
+        { success: false, error: "unauthorized" },
+        { status: 401 },
+      );
+    }
+    const event = toSessionEvent(
+      (await request.json()) as ChatbotWebhookPayload,
+    );
+    if (!event) {
+      return NextResponse.json(
+        { success: false, error: "invalid_payload" },
+        { status: 400 },
+      );
+    }
+    saveSessionEvent(event);
+    return NextResponse.json({ success: true, data: { received: true } });
+  } catch (error) {
+    console.error("chatbot webhook error:", error);
+    return NextResponse.json(
+      {
+        success: false,
+        error:
+          error instanceof Error ? error.message : "webhook_processing_failed",
+      },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/api/webhooks/chatbot/stream/route.ts b/app/api/webhooks/chatbot/stream/route.ts
new file mode 100644
index 00000000..e61b6418
--- /dev/null
+++ b/app/api/webhooks/chatbot/stream/route.ts
@@ -0,0 +1,82 @@
+import { NextRequest } from "next/server";
+import {
+  getSessionEventsAfter,
+  subscribeSessionEvents,
+} from "@/app/lib/store/chatbotSessionStore";
+import type { ChatbotSessionEvent } from "@/app/lib/types/chatbot";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+const HEARTBEAT_MS = 20_000;
+
+function parseSeq(value: string | null): number {
+  const n = Number(value);
+  return Number.isFinite(n) && n > 0 ? n : 0;
+}
+
+/**
+ * SSE stream of webhook replies for one chatbot session. Each event carries
+ * its `seq` as the SSE id, so a reconnecting EventSource resumes via
+ * `Last-Event-ID`; `after` lets a fresh page load skip replies it already has.
+ */
+export async function GET(request: NextRequest) {
+  const sessionId = request.nextUrl.searchParams.get("session_id");
+  if (!sessionId) {
+    return new Response("session_id_required", { status: 400 });
+  }
+  const afterSeq = Math.max(
+    parseSeq(request.nextUrl.searchParams.get("after")),
+    parseSeq(request.headers.get("last-event-id")),
+  );
+
+  const encoder = new TextEncoder();
+  const stream = new ReadableStream({
+    start(controller) {
+      const push = (event: ChatbotSessionEvent) => {
+        try {
+          controller.enqueue(
+            encoder.encode(
+              `id: ${event.seq}\nevent: reply\ndata: ${JSON.stringify(event)}\n\n`,
+            ),
+          );
+        } catch {
+          // stream closed
+        }
+      };
+
+      // Subscribe before replaying so nothing slips in between.
+      const unsubscribe = subscribeSessionEvents(sessionId, push);
+      getSessionEventsAfter(sessionId, afterSeq).forEach(push);
+
+      const heartbeat = setInterval(() => {
+        try {
+          controller.enqueue(encoder.encode(`: ping\n\n`));
+        } catch {
+          finish();
+        }
+      }, HEARTBEAT_MS);
+
+      function finish() {
+        clearInterval(heartbeat);
+        unsubscribe();
+        try {
+          controller.close();
+        } catch {
+          // already closed
+        }
+      }
+
+      request.signal.addEventListener("abort", finish);
+    },
+  });
+
+  return new Response(stream, {
+    headers: {
+      "Content-Type": "text/event-stream; charset=utf-8",
+      "Cache-Control": "no-cache, no-transform",
+      Connection: "keep-alive",
+      "X-Accel-Buffering": "no",
+    },
+  });
+}
diff --git a/app/api/webhooks/prompt-improvement/route.ts b/app/api/webhooks/prompt-improvement/route.ts
index 8fe0ea9b..fa252033 100644
--- a/app/api/webhooks/prompt-improvement/route.ts
+++ b/app/api/webhooks/prompt-improvement/route.ts
@@ -3,19 +3,12 @@ import {
   getJobSnapshot,
   saveJobSnapshot,
 } from "@/app/lib/store/promptImprovementStore";
-import { readWebhookSecret } from "@/app/lib/webhookSecret";
+import { isWebhookAuthorized } from "@/app/lib/webhookCallback";
 import type { PromptImprovementJobPublic } from "@/app/lib/types/promptImprovement";
 
-function isAuthorized(request: NextRequest): boolean {
-  const secretResult = readWebhookSecret();
-  if (!secretResult.ok || !secretResult.secret) return false;
-  const provided = request.nextUrl.searchParams.get("secret_value");
-  return provided === secretResult.secret;
-}
-
 export async function POST(request: NextRequest) {
   try {
-    if (!isAuthorized(request)) {
+    if (!isWebhookAuthorized(request)) {
       return NextResponse.json(
         { success: false, error: "unauthorized" },
         { status: 401 },
diff --git a/app/components/chatbot/ChatbotChatInput.tsx b/app/components/chatbot/ChatbotChatInput.tsx
new file mode 100644
index 00000000..8ed3de6c
--- /dev/null
+++ b/app/components/chatbot/ChatbotChatInput.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { FormEvent, useState } from "react";
+import { SendIcon } from "@/app/components/icons";
+
+interface ChatbotChatInputProps {
+  disabled: boolean;
+  placeholder: string;
+  /** Resolves false when sending failed, so the draft is restored. */
+  onSend: (message: string) => Promise<boolean>;
+}
+
+export default function ChatbotChatInput({
+  disabled,
+  placeholder,
+  onSend,
+}: ChatbotChatInputProps) {
+  const [input, setInput] = useState("");
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    const text = input.trim();
+    if (!text || disabled) return;
+    setInput("");
+    if (!(await onSend(text))) setInput(text);
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="border-t border-border p-3 flex items-center gap-2"
+    >
+      <input
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        placeholder={placeholder}
+        disabled={disabled}
+        className="flex-1 px-3 py-2 rounded-full border border-border text-sm bg-bg-primary text-text-primary focus:outline-none focus:border-accent-primary disabled:opacity-60"
+      />
+      <button
+        type="submit"
+        disabled={disabled || !input.trim()}
+        title="Send"
+        className="p-2 rounded-full bg-accent-primary text-white hover:bg-accent-hover disabled:bg-neutral-200 disabled:text-text-secondary cursor-pointer disabled:cursor-not-allowed"
+      >
+        <SendIcon className="w-4 h-4" />
+      </button>
+    </form>
+  );
+}
diff --git a/app/components/chatbot/ChatbotFlowCanvas.tsx b/app/components/chatbot/ChatbotFlowCanvas.tsx
index ed3f56f7..7bbbea55 100644
--- a/app/components/chatbot/ChatbotFlowCanvas.tsx
+++ b/app/components/chatbot/ChatbotFlowCanvas.tsx
@@ -31,7 +31,6 @@ interface ChatbotFlowCanvasProps {
   onNodesChange: (changes: NodeChange<ChatbotFlowNode>[]) => void;
   onEdgesChange: (changes: EdgeChange<Edge>[]) => void;
   onConnect: (connection: Connection) => void;
-  onSelectNode: (id: string) => void;
   updateNodeData: (id: string, patch: Partial<ChatbotNodeData>) => void;
 }
 
@@ -41,7 +40,6 @@ export default function ChatbotFlowCanvas({
   onNodesChange,
   onEdgesChange,
   onConnect,
-  onSelectNode,
   updateNodeData,
 }: ChatbotFlowCanvasProps) {
   const contextValue = useMemo(() => ({ updateNodeData }), [updateNodeData]);
@@ -56,7 +54,6 @@ export default function ChatbotFlowCanvas({
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
-        onNodeClick={(_, node) => onSelectNode(node.id)}
         fitView
         fitViewOptions={{ maxZoom: 1, padding: 0.2 }}
         proOptions={{ hideAttribution: true }}
diff --git a/app/components/chatbot/ChatbotMessageBubble.tsx b/app/components/chatbot/ChatbotMessageBubble.tsx
new file mode 100644
index 00000000..5f2717b7
--- /dev/null
+++ b/app/components/chatbot/ChatbotMessageBubble.tsx
@@ -0,0 +1,23 @@
+import { MarkdownContent } from "@/app/components/chat";
+import { ChatbotChatMessage } from "@/app/lib/types/chatbot";
+
+export default function ChatbotMessageBubble({
+  message,
+}: {
+  message: Pick<ChatbotChatMessage, "role" | "content">;
+}) {
+  const isUser = message.role === "user";
+  return (
+    <div className={`flex ${isUser ? "justify-end" : "justify-start"}`}>
+      <div
+        className={`max-w-[85%] rounded-2xl px-3 py-2 text-sm ${
+          isUser
+            ? "bg-accent-primary text-white whitespace-pre-wrap"
+            : "bg-bg-secondary text-text-primary"
+        }`}
+      >
+        {isUser ? message.content : <MarkdownContent text={message.content} />}
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/chatbot/ChatbotSessionInfo.tsx b/app/components/chatbot/ChatbotSessionInfo.tsx
new file mode 100644
index 00000000..f2417c4c
--- /dev/null
+++ b/app/components/chatbot/ChatbotSessionInfo.tsx
@@ -0,0 +1,45 @@
+import {
+  ChatbotCompletionStatus,
+  ChatbotSessionStatus,
+} from "@/app/lib/types/chatbot";
+
+const NEUTRAL = "bg-bg-secondary text-text-secondary";
+const SUCCESS = "bg-status-success-bg text-status-success-text";
+const WARNING = "bg-status-warning-bg text-status-warning-text";
+
+function badgeFor(
+  status: ChatbotSessionStatus | null,
+  completionStatus: ChatbotCompletionStatus | null,
+): { label: string; className: string } | null {
+  if (!status) return null;
+  // Inactive = superseded by a newer session of the same chatbot.
+  if (status === "inactive") return { label: "Closed", className: NEUTRAL };
+  switch (completionStatus) {
+    case "complete":
+      return { label: "Complete", className: SUCCESS };
+    case "abandoned":
+      return { label: "Abandoned", className: NEUTRAL };
+    case "in_progress":
+      return { label: "In progress", className: WARNING };
+    default:
+      return { label: "Active", className: SUCCESS };
+  }
+}
+
+export function ChatbotStatusBadge({
+  status,
+  completionStatus,
+}: {
+  status: ChatbotSessionStatus | null;
+  completionStatus: ChatbotCompletionStatus | null;
+}) {
+  const badge = badgeFor(status, completionStatus);
+  if (!badge) return null;
+  return (
+    <span
+      className={`text-[11px] px-1.5 py-0.5 rounded font-medium shrink-0 ${badge.className}`}
+    >
+      {badge.label}
+    </span>
+  );
+}
diff --git a/app/components/chatbot/ChatbotTestPanel.tsx b/app/components/chatbot/ChatbotTestPanel.tsx
index 7884c61e..6161dff5 100644
--- a/app/components/chatbot/ChatbotTestPanel.tsx
+++ b/app/components/chatbot/ChatbotTestPanel.tsx
@@ -1,118 +1,137 @@
 /**
- * ChatbotTestPanel - Runs a throwaway test conversation against the selected
- * node's current (unsaved) prompt and config.
+ * ChatbotTestPanel - Chats with the saved flow's server-side session. Replies
+ * arrive asynchronously via the webhook stream, so the panel only renders
+ * state owned by useChatbotSession.
  */
 
 "use client";
 
-import { FormEvent, useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { Button } from "@/app/components/ui";
-import { MarkdownContent } from "@/app/components/chat";
-import { RefreshIcon, SendIcon } from "@/app/components/icons";
-import { useChatbotTest } from "@/app/hooks/useChatbotTest";
-import { ChatbotMessage, ChatbotNodeData } from "@/app/lib/types/chatbot";
+import { RefreshIcon } from "@/app/components/icons";
+import ChatbotMessageBubble from "@/app/components/chatbot/ChatbotMessageBubble";
+import ChatbotChatInput from "@/app/components/chatbot/ChatbotChatInput";
+import { ChatbotStatusBadge } from "@/app/components/chatbot/ChatbotSessionInfo";
+import {
+  ChatbotChatMessage,
+  ChatbotCompletionStatus,
+  ChatbotSessionStatus,
+} from "@/app/lib/types/chatbot";
 
 interface ChatbotTestPanelProps {
-  data: ChatbotNodeData;
+  hasSession: boolean;
+  sessionName: string | null;
+  status: ChatbotSessionStatus | null;
+  completionStatus: ChatbotCompletionStatus | null;
+  messages: ChatbotChatMessage[];
+  isPending: boolean;
+  isRestarting: boolean;
+  isDirty: boolean;
+  onSend: (message?: string) => Promise<boolean>;
+  onRestart: () => void;
 }
 
-function MessageBubble({ message }: { message: ChatbotMessage }) {
-  const isUser = message.role === "user";
-  return (
-    <div className={`flex ${isUser ? "justify-end" : "justify-start"}`}>
-      <div
-        className={`max-w-[85%] rounded-2xl px-3 py-2 text-sm ${
-          isUser
-            ? "bg-accent-primary text-white whitespace-pre-wrap"
-            : "bg-bg-secondary text-text-primary"
-        }`}
-      >
-        {isUser ? message.content : <MarkdownContent text={message.content} />}
-      </div>
-    </div>
-  );
+function inputPlaceholder(isEnded: boolean, hasStarted: boolean): string {
+  if (isEnded) return "Session closed";
+  if (!hasStarted) return "Click Start chat to begin…";
+  return "Reply as the user…";
 }
 
-export default function ChatbotTestPanel({ data }: ChatbotTestPanelProps) {
-  const { history, pendingMessage, isPending, canSend, send, reset } =
-    useChatbotTest(data);
-  const [input, setInput] = useState("");
+export default function ChatbotTestPanel({
+  hasSession,
+  sessionName,
+  status,
+  completionStatus,
+  messages,
+  isPending,
+  isRestarting,
+  isDirty,
+  onSend,
+  onRestart,
+}: ChatbotTestPanelProps) {
   const bottomRef = useRef<HTMLDivElement>(null);
-
-  const visible = history.filter((m) => m.role !== "system");
-  const hasStarted = history.length > 0;
+  // Inactive = superseded by a newer session; a complete one still chats.
+  const isEnded = status === "inactive";
+  const hasStarted = messages.length > 0;
 
   useEffect(() => {
     bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
-  }, [visible.length, pendingMessage, isPending]);
-
-  const handleSubmit = async (e: FormEvent) => {
-    e.preventDefault();
-    const text = input.trim();
-    if (!text || isPending) return;
-    setInput("");
-    const ok = await send(text);
-    if (!ok) setInput(text);
-  };
+  }, [messages.length, isPending]);
 
   return (
     <div className="flex flex-col flex-1 min-h-0">
+      <div className="px-4 py-3 border-b border-border flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2 min-w-0">
+          <p className="text-sm font-semibold text-text-primary truncate">
+            {sessionName ? `Test: ${sessionName}` : "Test chat"}
+          </p>
+          <ChatbotStatusBadge
+            status={status}
+            completionStatus={completionStatus}
+          />
+        </div>
+        {hasSession && (
+          <button
+            type="button"
+            onClick={onRestart}
+            disabled={isRestarting || isPending}
+            title="Start a new session with the saved flow"
+            className="p-1.5 rounded-full text-text-secondary hover:bg-neutral-100 hover:text-text-primary cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <RefreshIcon className="w-4 h-4" />
+          </button>
+        )}
+      </div>
+
+      {isDirty && (
+        <p className="px-4 py-2 text-xs bg-status-warning-bg text-status-warning-text border-b border-border">
+          You have unsaved changes. The chat uses the last saved flow. Save to
+          test your edits.
+        </p>
+      )}
+
       <div className="flex-1 overflow-y-auto p-4 space-y-3">
-        {!hasStarted && !isPending && (
-          <div className="h-full flex flex-col items-center justify-center text-center gap-3">
-            <p className="text-sm text-text-secondary max-w-[260px]">
-              {canSend
-                ? "Start a test - the bot will send the first message."
-                : "Pick a configuration and write a system prompt to start testing."}
-            </p>
-            <Button size="sm" onClick={() => send()} disabled={!canSend}>
-              Start test
-            </Button>
-          </div>
+        {!hasSession ? (
+          <p className="h-full flex items-center justify-center text-center text-sm text-text-secondary px-6">
+            Pick a configuration, write a prompt and click Save to start a
+            chatbot session.
+          </p>
+        ) : (
+          messages.length === 0 &&
+          !isPending && (
+            <div className="h-full flex flex-col items-center justify-center text-center gap-3">
+              <p className="text-sm text-text-secondary max-w-[260px]">
+                The bot will send the first message.
+              </p>
+              <Button size="sm" onClick={() => onSend()}>
+                Start chat
+              </Button>
+            </div>
+          )
         )}
-        {visible.map((m, i) => (
-          <MessageBubble key={i} message={m} />
+        {messages.map((m) => (
+          <ChatbotMessageBubble key={m.id} message={m} />
         ))}
-        {pendingMessage && (
-          <MessageBubble message={{ role: "user", content: pendingMessage }} />
-        )}
         {isPending && (
           <p className="text-xs text-text-secondary animate-pulse">
             Bot is typing…
           </p>
         )}
+        {isEnded && (
+          <p className="text-xs text-center text-text-secondary">
+            This session was replaced by a newer one. Restart to continue
+            testing.
+          </p>
+        )}
         <div ref={bottomRef} />
       </div>
 
-      {hasStarted && (
-        <form
-          onSubmit={handleSubmit}
-          className="border-t border-border p-3 flex items-center gap-2"
-        >
-          <button
-            type="button"
-            onClick={reset}
-            title="Restart test"
-            className="p-2 rounded-full text-text-secondary hover:bg-neutral-100 hover:text-text-primary cursor-pointer"
-          >
-            <RefreshIcon className="w-4 h-4" />
-          </button>
-          <input
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            placeholder="Reply as the user…"
-            disabled={isPending}
-            className="flex-1 px-3 py-2 rounded-full border border-border text-sm bg-bg-primary text-text-primary focus:outline-none focus:border-accent-primary disabled:opacity-60"
-          />
-          <button
-            type="submit"
-            disabled={isPending || !input.trim()}
-            title="Send"
-            className="p-2 rounded-full bg-accent-primary text-white hover:bg-accent-hover disabled:bg-neutral-200 disabled:text-text-secondary cursor-pointer disabled:cursor-not-allowed"
-          >
-            <SendIcon className="w-4 h-4" />
-          </button>
-        </form>
+      {hasSession && (
+        <ChatbotChatInput
+          disabled={isPending || isEnded || !hasStarted}
+          placeholder={inputPlaceholder(isEnded, hasStarted)}
+          onSend={onSend}
+        />
       )}
     </div>
   );
diff --git a/app/components/chatbot/LlmNode.tsx b/app/components/chatbot/LlmNode.tsx
index 71c9c002..14d03202 100644
--- a/app/components/chatbot/LlmNode.tsx
+++ b/app/components/chatbot/LlmNode.tsx
@@ -1,18 +1,19 @@
 /**
- * LlmNode - Editable LLM step on the chatbot canvas: config, prompt and limits
- * are edited inline, mirroring the node's data used by the test panel.
+ * LlmNode - Editable LLM step on the chatbot canvas: config and prompt are
+ * edited inline; Save turns them into a chatbot session.
  */
 
 "use client";
 
 import { Handle, NodeProps, Position } from "@xyflow/react";
 import { ChatConfigPicker } from "@/app/components/chat";
+import { CHATBOT_NAME_MAX_LENGTH } from "@/app/lib/constants";
+import { useChatbotStore } from "@/app/lib/store/chatbot";
 import { ChatbotLlmNode, ChatbotNodeData } from "@/app/lib/types/chatbot";
 import { useChatbotFlowContext } from "@/app/components/chatbot/ChatbotFlowContext";
 import { FLOW_HANDLE_STYLE } from "@/app/components/chatbot/flowHandleStyle";
 import NodeFieldLabel from "@/app/components/chatbot/NodeFieldLabel";
 import LlmNodePromptField from "@/app/components/chatbot/LlmNodePromptField";
-import LlmNodeAdvanced from "@/app/components/chatbot/LlmNodeAdvanced";
 
 const PORT_LABEL_CLASS = "text-sm font-semibold font-mono text-text-primary";
 
@@ -22,6 +23,8 @@ export default function LlmNode({
   selected,
 }: NodeProps<ChatbotLlmNode>) {
   const { updateNodeData } = useChatbotFlowContext();
+  // Shown only once the backend has generated it on the first save.
+  const chatbotRef = useChatbotStore((s) => s.chatbotRef);
   const update = (patch: Partial<ChatbotNodeData>) => updateNodeData(id, patch);
 
   return (
@@ -36,10 +39,15 @@ export default function LlmNode({
         <input
           value={data.label}
           onChange={(e) => update({ label: e.target.value })}
+          maxLength={CHATBOT_NAME_MAX_LENGTH}
           placeholder="Untitled step"
           className="nodrag w-full px-6 text-center text-base font-semibold text-text-primary bg-transparent focus:outline-none"
         />
-        <p className="text-[11px] text-text-secondary truncate">{id}</p>
+        {chatbotRef && (
+          <p className="text-[11px] text-text-secondary truncate">
+            {chatbotRef}
+          </p>
+        )}
       </div>
 
       <div className="relative px-4 py-1">
@@ -71,8 +79,6 @@ export default function LlmNode({
           value={data.systemPrompt}
           onChange={(systemPrompt) => update({ systemPrompt })}
         />
-
-        <LlmNodeAdvanced data={data} onChange={update} />
       </div>
 
       <div className="relative px-4 py-2.5 border-t-2 border-text-primary text-right">
diff --git a/app/components/chatbot/LlmNodeAdvanced.tsx b/app/components/chatbot/LlmNodeAdvanced.tsx
deleted file mode 100644
index 726f43c9..00000000
--- a/app/components/chatbot/LlmNodeAdvanced.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * LlmNodeAdvanced - Collapsible per-request limits for an LLM node.
- */
-
-"use client";
-
-import { useState } from "react";
-import { Field } from "@/app/components/ui";
-import { ChevronDownIcon, ChevronUpIcon } from "@/app/components/icons";
-import { ChatbotNodeData } from "@/app/lib/types/chatbot";
-
-interface LlmNodeAdvancedProps {
-  data: ChatbotNodeData;
-  onChange: (patch: Partial<ChatbotNodeData>) => void;
-}
-
-function toPositiveInt(value: string, fallback: number): number {
-  const n = Number.parseInt(value, 10);
-  return Number.isFinite(n) && n > 0 ? n : fallback;
-}
-
-export default function LlmNodeAdvanced({
-  data,
-  onChange,
-}: LlmNodeAdvancedProps) {
-  const [open, setOpen] = useState(false);
-  const Chevron = open ? ChevronUpIcon : ChevronDownIcon;
-
-  return (
-    <div>
-      <button
-        type="button"
-        onClick={() => setOpen((prev) => !prev)}
-        className="nodrag w-full flex items-center justify-center gap-1 py-1 text-xs font-semibold text-text-primary hover:text-accent-primary cursor-pointer"
-      >
-        Advanced
-        <Chevron className="w-3 h-3" />
-      </button>
-      {open && (
-        <div className="nodrag grid grid-cols-2 gap-2 pt-2">
-          <Field
-            label="Max tokens"
-            type="number"
-            value={String(data.maxTokens)}
-            onChange={(v) =>
-              onChange({ maxTokens: toPositiveInt(v, data.maxTokens) })
-            }
-          />
-          <Field
-            label="History token limit"
-            type="number"
-            value={String(data.historyTokenLimit)}
-            onChange={(v) =>
-              onChange({
-                historyTokenLimit: toPositiveInt(v, data.historyTokenLimit),
-              })
-            }
-          />
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/app/hooks/useChatbotFlow.ts b/app/hooks/useChatbotFlow.ts
index de75ff36..55adacfb 100644
--- a/app/hooks/useChatbotFlow.ts
+++ b/app/hooks/useChatbotFlow.ts
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import {
   addEdge,
   Connection,
@@ -8,10 +8,8 @@ import {
   useEdgesState,
   useNodesState,
 } from "@xyflow/react";
-import {
-  CHATBOT_DEFAULT_HISTORY_TOKEN_LIMIT,
-  CHATBOT_DEFAULT_MAX_TOKENS,
-} from "@/app/lib/constants";
+import { DEFAULT_CHATBOT_NAME } from "@/app/lib/constants";
+import { useChatbotStore } from "@/app/lib/store/chatbot";
 import {
   ChatbotFlowNode,
   ChatbotLlmNode,
@@ -20,35 +18,17 @@ import {
 
 const INPUT_ID = "input";
 const OUTPUT_ID = "output";
-const LLM_ID_PREFIX = "LLMResponseWithPrompt";
-const INITIAL_LLM_ID = `${LLM_ID_PREFIX}-1`;
-
-function shortId(): string {
-  return Math.random().toString(16).slice(2, 7);
-}
+// Fixed so server and client render the same id (avoids hydration mismatch).
+const LLM_ID = "LLMResponseWithPrompt-1";
 
-function createLlmNode(
-  position: { x: number; y: number },
-  label = "New step",
-  id = `${LLM_ID_PREFIX}-${shortId()}`,
-): ChatbotLlmNode {
-  return {
-    id,
-    type: "llm",
-    position,
-    data: {
-      label,
-      systemPrompt: "",
-      configId: "",
-      configVersion: undefined,
-      maxTokens: CHATBOT_DEFAULT_MAX_TOKENS,
-      historyTokenLimit: CHATBOT_DEFAULT_HISTORY_TOKEN_LIMIT,
-    },
-  };
-}
+const DEFAULT_NODE_DATA: ChatbotNodeData = {
+  label: DEFAULT_CHATBOT_NAME,
+  systemPrompt: "",
+  configId: "",
+  configVersion: undefined,
+};
 
 function createInitialFlow(): { nodes: ChatbotFlowNode[]; edges: Edge[] } {
-  const llm = createLlmNode({ x: 260, y: 0 }, "Onboarding", INITIAL_LLM_ID);
   return {
     nodes: [
       {
@@ -58,18 +38,24 @@ function createInitialFlow(): { nodes: ChatbotFlowNode[]; edges: Edge[] } {
         data: { label: "Input" },
         deletable: false,
       },
-      llm,
+      {
+        id: LLM_ID,
+        type: "llm",
+        position: { x: 260, y: 0 },
+        data: DEFAULT_NODE_DATA,
+        deletable: false,
+      },
       {
         id: OUTPUT_ID,
         type: "flowOutput",
-        position: { x: 640, y: 270 },
+        position: { x: 640, y: 230 },
         data: { label: "Output" },
         deletable: false,
       },
     ],
     edges: [
-      { id: `${INPUT_ID}->${llm.id}`, source: INPUT_ID, target: llm.id },
-      { id: `${llm.id}->${OUTPUT_ID}`, source: llm.id, target: OUTPUT_ID },
+      { id: `${INPUT_ID}->${LLM_ID}`, source: INPUT_ID, target: LLM_ID },
+      { id: `${LLM_ID}->${OUTPUT_ID}`, source: LLM_ID, target: OUTPUT_ID },
     ],
   };
 }
@@ -78,31 +64,56 @@ function isLlmNode(node: ChatbotFlowNode): node is ChatbotLlmNode {
   return node.type === "llm";
 }
 
-/** Owns the in-memory (unsaved) chatbot flow graph and the node under test. */
+function isSameData(a: ChatbotNodeData, b: ChatbotNodeData): boolean {
+  return (
+    a.label === b.label &&
+    a.systemPrompt === b.systemPrompt &&
+    a.configId === b.configId &&
+    (a.configVersion ?? null) === (b.configVersion ?? null)
+  );
+}
+
+/**
+ * Owns the canvas graph (Input → LLM → Output) and tracks the LLM node's
+ * edits against the last saved version, for the Save / Discard buttons.
+ */
 export function useChatbotFlow() {
   const [initial] = useState(createInitialFlow);
   const [nodes, setNodes, onNodesChange] = useNodesState<ChatbotFlowNode>(
     initial.nodes,
   );
   const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>(initial.edges);
-  const [selectedId, setSelectedId] = useState<string | null>(null);
 
-  const llmNodes = nodes.filter(isLlmNode);
-  // Fall back to the first LLM node so the test panel always has a target.
-  const selectedNode =
-    llmNodes.find((n) => n.id === selectedId) ?? llmNodes[0] ?? null;
+  const savedFlow = useChatbotStore((s) => s.savedFlow);
+  const hasHydrated = useChatbotStore((s) => s.hasHydrated);
+  const setSavedFlow = useChatbotStore((s) => s.setSavedFlow);
+
+  const llmNode = nodes.find(isLlmNode) ?? null;
+  const baseline = savedFlow ?? DEFAULT_NODE_DATA;
+  const isDirty = !!llmNode && !isSameData(llmNode.data, baseline);
+
+  const replaceNodeData = useCallback(
+    (data: ChatbotNodeData) => {
+      setNodes((prev) =>
+        prev.map((n) => (isLlmNode(n) ? { ...n, data: { ...data } } : n)),
+      );
+    },
+    [setNodes],
+  );
+
+  // Load the saved flow into the node once localStorage has rehydrated.
+  const restoredRef = useRef(false);
+  useEffect(() => {
+    if (!hasHydrated || restoredRef.current) return;
+    restoredRef.current = true;
+    if (savedFlow) replaceNodeData(savedFlow);
+  }, [hasHydrated, savedFlow, replaceNodeData]);
 
   const onConnect = useCallback(
     (connection: Connection) => setEdges((eds) => addEdge(connection, eds)),
     [setEdges],
   );
 
-  const addNode = useCallback(() => {
-    const node = createLlmNode({ x: 260, y: 160 + llmNodes.length * 60 });
-    setNodes((prev) => [...prev, node]);
-    setSelectedId(node.id);
-  }, [llmNodes.length, setNodes]);
-
   const updateNodeData = useCallback(
     (id: string, patch: Partial<ChatbotNodeData>) => {
       setNodes((prev) =>
@@ -116,15 +127,26 @@ export function useChatbotFlow() {
     [setNodes],
   );
 
+  const discard = useCallback(
+    () => replaceNodeData(baseline),
+    [baseline, replaceNodeData],
+  );
+
+  const markSaved = useCallback(
+    (data: ChatbotNodeData) => setSavedFlow({ ...data }),
+    [setSavedFlow],
+  );
+
   return {
     nodes,
     edges,
     onNodesChange,
     onEdgesChange,
     onConnect,
-    selectedNode,
-    setSelectedId,
-    addNode,
     updateNodeData,
+    llmNode,
+    isDirty,
+    discard,
+    markSaved,
   };
 }
diff --git a/app/hooks/useChatbotPendingReply.ts b/app/hooks/useChatbotPendingReply.ts
new file mode 100644
index 00000000..fba4fdf3
--- /dev/null
+++ b/app/hooks/useChatbotPendingReply.ts
@@ -0,0 +1,39 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+/**
+ * Tracks "waiting for the bot's reply" for webhook-delivered turns, giving up
+ * after `timeoutMs` so the UI never spins forever.
+ */
+export function useChatbotPendingReply(
+  timeoutMs: number,
+  onTimeout: () => void,
+) {
+  const [isPending, setIsPending] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const onTimeoutRef = useRef(onTimeout);
+  useEffect(() => {
+    onTimeoutRef.current = onTimeout;
+  });
+
+  const clear = useCallback(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = null;
+    setIsPending(false);
+  }, []);
+
+  const start = useCallback(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setIsPending(true);
+    timerRef.current = setTimeout(() => {
+      timerRef.current = null;
+      setIsPending(false);
+      onTimeoutRef.current();
+    }, timeoutMs);
+  }, [timeoutMs]);
+
+  useEffect(() => clear, [clear]);
+
+  return { isPending, start, clear };
+}
diff --git a/app/hooks/useChatbotReplyStream.ts b/app/hooks/useChatbotReplyStream.ts
new file mode 100644
index 00000000..641c80d2
--- /dev/null
+++ b/app/hooks/useChatbotReplyStream.ts
@@ -0,0 +1,43 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { ChatbotSessionEvent } from "@/app/lib/types/chatbot";
+
+/**
+ * Keeps an SSE connection to the webhook stream for one chatbot session and
+ * calls `onEvent` for every reply Kaapi delivers. EventSource reconnects on
+ * its own and resumes via `Last-Event-ID`; `getAfterSeq` skips replies the
+ * page already applied before a reload.
+ */
+export function useChatbotReplyStream(
+  sessionId: string | null,
+  getAfterSeq: () => number,
+  onEvent: (event: ChatbotSessionEvent) => void,
+) {
+  // Latest callbacks without reopening the stream on every render.
+  const onEventRef = useRef(onEvent);
+  const getAfterSeqRef = useRef(getAfterSeq);
+  useEffect(() => {
+    onEventRef.current = onEvent;
+    getAfterSeqRef.current = getAfterSeq;
+  });
+
+  useEffect(() => {
+    if (!sessionId || typeof EventSource === "undefined") return;
+    const params = new URLSearchParams({
+      session_id: sessionId,
+      after: String(getAfterSeqRef.current()),
+    });
+    const source = new EventSource(`/api/webhooks/chatbot/stream?${params}`);
+    source.addEventListener("reply", (e) => {
+      try {
+        onEventRef.current(
+          JSON.parse((e as MessageEvent).data) as ChatbotSessionEvent,
+        );
+      } catch (err) {
+        console.error("chatbot SSE parse error:", err);
+      }
+    });
+    return () => source.close();
+  }, [sessionId]);
+}
diff --git a/app/hooks/useChatbotSession.ts b/app/hooks/useChatbotSession.ts
new file mode 100644
index 00000000..dacae371
--- /dev/null
+++ b/app/hooks/useChatbotSession.ts
@@ -0,0 +1,228 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { useAuth } from "@/app/lib/context/AuthContext";
+import { useToast } from "@/app/hooks/useToast";
+import { useChatbotReplyStream } from "@/app/hooks/useChatbotReplyStream";
+import { useChatbotPendingReply } from "@/app/hooks/useChatbotPendingReply";
+import { useChatbotStore } from "@/app/lib/store/chatbot";
+import {
+  CHATBOT_REPLY_TIMEOUT_MS,
+  DEFAULT_CHATBOT_NAME,
+} from "@/app/lib/constants";
+import {
+  createChatbotSession,
+  getLatestChatbotSession,
+  sendChatbotSessionMessage,
+} from "@/app/lib/chatbotClient";
+import {
+  readChatbotSessionCookie,
+  writeChatbotSessionCookie,
+} from "@/app/lib/utils/chatbotSessionCookie";
+import {
+  ChatbotNodeData,
+  ChatbotSessionEvent,
+  ChatbotCompletionStatus,
+  ChatbotSessionStatus,
+} from "@/app/lib/types/chatbot";
+
+/**
+ * Owns the server-side chatbot session used by the test panel: creating it
+ * on Save (id kept in a cookie), sending turns, and applying replies that
+ * arrive asynchronously through the webhook stream.
+ */
+export function useChatbotSession() {
+  const { activeKey, currentUser, isAuthenticated } = useAuth();
+  const apiKey = activeKey?.key ?? "";
+  const toast = useToast();
+
+  const hasHydrated = useChatbotStore((s) => s.hasHydrated);
+  const messages = useChatbotStore((s) => s.messages);
+  const bindSession = useChatbotStore((s) => s.bindSession);
+  const appendMessage = useChatbotStore((s) => s.appendMessage);
+  const removeMessage = useChatbotStore((s) => s.removeMessage);
+  const setLastEventSeq = useChatbotStore((s) => s.setLastEventSeq);
+  const chatbotRef = useChatbotStore((s) => s.chatbotRef);
+  const setChatbotRef = useChatbotStore((s) => s.setChatbotRef);
+
+  const [sessionId, setSessionId] = useState<string | null>(null);
+  const [sessionName, setSessionName] = useState<string | null>(null);
+  const [status, setStatus] = useState<ChatbotSessionStatus | null>(null);
+  const [completionStatus, setCompletionStatus] =
+    useState<ChatbotCompletionStatus | null>(null);
+  const [isCreating, setIsCreating] = useState(false);
+  const pending = useChatbotPendingReply(CHATBOT_REPLY_TIMEOUT_MS, () =>
+    toast.error("No reply from the chatbot yet. Try sending again."),
+  );
+  const { clear: clearPending, start: startPending } = pending;
+
+  const userRef = currentUser?.id ?? activeKey?.id;
+  const contactRef = userRef ? `kaapi-user-${userRef}` : null;
+
+  const adoptSession = useCallback(
+    (id: string) => {
+      setSessionId(id);
+      bindSession(id);
+    },
+    [bindSession],
+  );
+
+  // Restore the session from the cookie, falling back to this chatbot's
+  // latest session for the contact; either way refresh its status. The
+  // lookup needs the chatbot ref, which only exists after the first save.
+  useEffect(() => {
+    if (!hasHydrated || !isAuthenticated || !contactRef) return;
+    const cookieId = readChatbotSessionCookie();
+    if (cookieId) adoptSession(cookieId);
+    if (!chatbotRef) return;
+
+    let cancelled = false;
+    getLatestChatbotSession(contactRef, chatbotRef, apiKey).then((summary) => {
+      if (cancelled || !summary) return;
+      if (!cookieId) {
+        writeChatbotSessionCookie(summary.session_id);
+        adoptSession(summary.session_id);
+      }
+      if (!cookieId || cookieId === summary.session_id) {
+        setSessionName(summary.name || DEFAULT_CHATBOT_NAME);
+        setStatus(summary.status);
+        setCompletionStatus(summary.completion_status);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    hasHydrated,
+    isAuthenticated,
+    contactRef,
+    chatbotRef,
+    apiKey,
+    adoptSession,
+  ]);
+
+  const handleEvent = useCallback(
+    (event: ChatbotSessionEvent) => {
+      if (event.seq <= useChatbotStore.getState().lastEventSeq) return;
+      setLastEventSeq(event.seq);
+      clearPending();
+      if (!event.success) {
+        toast.error(event.error || "The chatbot couldn't reply.");
+        return;
+      }
+      if (event.reply) {
+        appendMessage({
+          id: crypto.randomUUID(),
+          role: "assistant",
+          content: event.reply,
+        });
+      }
+      if (event.status) setStatus(event.status);
+      if (event.completionStatus) setCompletionStatus(event.completionStatus);
+    },
+    [appendMessage, clearPending, setLastEventSeq, toast],
+  );
+
+  useChatbotReplyStream(
+    hasHydrated ? sessionId : null,
+    () => useChatbotStore.getState().lastEventSeq,
+    handleEvent,
+  );
+
+  /** Creates a new session for the saved flow and makes it the active one. */
+  const startSession = useCallback(
+    async (data: ChatbotNodeData): Promise<boolean> => {
+      if (!contactRef) {
+        toast.error("Couldn't identify your account. Please log in again.");
+        return false;
+      }
+      const name = data.label.trim() || DEFAULT_CHATBOT_NAME;
+      setIsCreating(true);
+      try {
+        const created = await createChatbotSession(
+          {
+            name,
+            chatbot_ref: chatbotRef ?? undefined,
+            config_id: data.configId,
+            config_version: data.configVersion,
+            contact_ref: contactRef,
+            system_prompt: data.systemPrompt,
+          },
+          apiKey,
+        );
+        writeChatbotSessionCookie(created.sessionId);
+        setChatbotRef(created.chatbotRef);
+        clearPending();
+        adoptSession(created.sessionId);
+        setSessionName(name);
+        setStatus("active");
+        setCompletionStatus("in_progress");
+        return true;
+      } catch (err) {
+        toast.error(
+          err instanceof Error ? err.message : "Failed to save the flow.",
+        );
+        return false;
+      } finally {
+        setIsCreating(false);
+      }
+    },
+    [
+      adoptSession,
+      apiKey,
+      chatbotRef,
+      clearPending,
+      contactRef,
+      setChatbotRef,
+      toast,
+    ],
+  );
+
+  /** Queues a turn; omit `message` to get the greeting on a fresh session. */
+  const send = useCallback(
+    async (message?: string): Promise<boolean> => {
+      if (!sessionId) {
+        toast.error("Save the flow first to start a session.");
+        return false;
+      }
+      const optimisticId = message ? crypto.randomUUID() : null;
+      if (optimisticId && message) {
+        appendMessage({ id: optimisticId, role: "user", content: message });
+      }
+      startPending();
+
+      try {
+        await sendChatbotSessionMessage(sessionId, message, apiKey);
+        return true;
+      } catch (err) {
+        if (optimisticId) removeMessage(optimisticId);
+        clearPending();
+        toast.error(
+          err instanceof Error ? err.message : "Failed to send the message.",
+        );
+        return false;
+      }
+    },
+    [
+      appendMessage,
+      apiKey,
+      clearPending,
+      removeMessage,
+      sessionId,
+      startPending,
+      toast,
+    ],
+  );
+
+  return {
+    sessionId,
+    sessionName,
+    status,
+    completionStatus,
+    messages: sessionId ? messages : [],
+    isPending: pending.isPending,
+    isCreating,
+    startSession,
+    send,
+  };
+}
diff --git a/app/hooks/useChatbotTest.ts b/app/hooks/useChatbotTest.ts
deleted file mode 100644
index 5988fbb1..00000000
--- a/app/hooks/useChatbotTest.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useAuth } from "@/app/lib/context/AuthContext";
-import { useToast } from "@/app/hooks/useToast";
-import { sendChatbotMessage } from "@/app/lib/chatbotClient";
-import { ChatbotMessage, ChatbotNodeData } from "@/app/lib/types/chatbot";
-
-/**
- * Drives the chatbot test panel for a single flow node. History lives only in
- * React state; it is cleared whenever the node's prompt or config changes so
- * every edit starts a fresh test.
- */
-export function useChatbotTest(data: ChatbotNodeData) {
-  const { activeKey } = useAuth();
-  const apiKey = activeKey?.key ?? "";
-  const toast = useToast();
-
-  const [history, setHistory] = useState<ChatbotMessage[]>([]);
-  const [pendingMessage, setPendingMessage] = useState<string | null>(null);
-  const [isPending, setIsPending] = useState(false);
-
-  const resetKey = `${data.systemPrompt}\u0000${data.configId}\u0000${data.configVersion ?? ""}`;
-  const [prevResetKey, setPrevResetKey] = useState(resetKey);
-  if (prevResetKey !== resetKey) {
-    setPrevResetKey(resetKey);
-    setHistory([]);
-    setPendingMessage(null);
-    setIsPending(false);
-  }
-
-  // Bumped on every reset so responses from an outdated test are dropped.
-  const generationRef = useRef(0);
-  useEffect(() => {
-    generationRef.current += 1;
-  }, [resetKey]);
-
-  const canSend = !!data.configId && !!data.systemPrompt.trim();
-
-  const send = useCallback(
-    async (message?: string): Promise<boolean> => {
-      if (!data.configId) {
-        toast.error("Select a configuration and version first.");
-        return false;
-      }
-      if (!data.systemPrompt.trim()) {
-        toast.error("Add a system prompt to the node first.");
-        return false;
-      }
-
-      const generation = generationRef.current;
-      setIsPending(true);
-      setPendingMessage(message ?? null);
-      try {
-        const messages = await sendChatbotMessage(
-          {
-            config_id: data.configId,
-            config_version: data.configVersion,
-            system_prompt: data.systemPrompt,
-            history,
-            message,
-            max_tokens: data.maxTokens,
-            history_token_limit: data.historyTokenLimit,
-          },
-          apiKey,
-        );
-        if (generation !== generationRef.current) return false;
-        setHistory(messages);
-        return true;
-      } catch (err) {
-        if (generation !== generationRef.current) return false;
-        toast.error(
-          err instanceof Error ? err.message : "Something went wrong",
-        );
-        return false;
-      } finally {
-        if (generation === generationRef.current) {
-          setIsPending(false);
-          setPendingMessage(null);
-        }
-      }
-    },
-    [apiKey, data, history, toast],
-  );
-
-  const reset = useCallback(() => {
-    generationRef.current += 1;
-    setHistory([]);
-    setPendingMessage(null);
-    setIsPending(false);
-  }, []);
-
-  return { history, pendingMessage, isPending, canSend, send, reset };
-}
diff --git a/app/hooks/useConfigs.ts b/app/hooks/useConfigs.ts
index 0e830699..e12f867f 100644
--- a/app/hooks/useConfigs.ts
+++ b/app/hooks/useConfigs.ts
@@ -268,7 +268,7 @@ export function useConfigs(options?: { pageSize?: number }): UseConfigsResult {
         console.error(`Failed to load version list for config ${config_id}`);
       }
     },
-    [apiKey],
+    [apiKey, isAuthenticated],
   );
 
   /**
@@ -354,7 +354,7 @@ export function useConfigs(options?: { pageSize?: number }): UseConfigsResult {
       pendingSingleVersionLoads.set(key, loadPromise);
       return loadPromise;
     },
-    [configs],
+    [configs, apiKey, isAuthenticated],
   );
 
   /**
@@ -426,7 +426,7 @@ export function useConfigs(options?: { pageSize?: number }): UseConfigsResult {
       console.error("Failed to load more configs");
       setIsLoadingMore(false);
     }
-  }, [configs, pageSize]);
+  }, [configs, pageSize, activeKey, isAuthenticated]);
 
   useEffect(() => {
     fetchConfigs();
diff --git a/app/lib/chatbotClient.ts b/app/lib/chatbotClient.ts
index d7ece704..ac837ef6 100644
--- a/app/lib/chatbotClient.ts
+++ b/app/lib/chatbotClient.ts
@@ -1,26 +1,71 @@
 import { apiFetch } from "@/app/lib/apiClient";
 import {
-  ChatbotMessage,
-  ChatbotMessageRequest,
-  ChatbotMessageResponse,
+  ChatbotSessionSummary,
+  ChatbotSessionSummaryResponse,
+  CreateChatbotSessionRequest,
+  CreateChatbotSessionResponse,
+  SendChatbotSessionMessageResponse,
 } from "@/app/lib/types/chatbot";
 
 /**
- * Sends one turn of a chatbot test conversation. The backend is stateless:
- * it takes the full history and returns the updated history (old messages
- * plus the new user/assistant turn).
+ * Stores the prompt + config pin server-side. Returns the new session id and
+ * the chatbot ref (generated by the backend on a chatbot's first session).
  */
-export async function sendChatbotMessage(
-  body: ChatbotMessageRequest,
+export async function createChatbotSession(
+  body: CreateChatbotSessionRequest,
   apiKey: string,
-): Promise<ChatbotMessage[]> {
-  const res = await apiFetch<ChatbotMessageResponse>(
-    "/api/chatbot/message",
+): Promise<{ sessionId: string; chatbotRef: string }> {
+  const res = await apiFetch<CreateChatbotSessionResponse>(
+    "/api/chatbot/sessions",
     apiKey,
     { method: "POST", body: JSON.stringify(body) },
   );
-  if (!res.success || !res.data?.messages) {
-    throw new Error(res.error || "Failed to get a response from the chatbot.");
+  if (!res.success || !res.data?.session_id) {
+    throw new Error(res.error || "Failed to create the chatbot session.");
+  }
+  return {
+    sessionId: res.data.session_id,
+    chatbotRef: res.data.chatbot_ref,
+  };
+}
+
+/** Latest session of this chatbot for the contact, or null when there is none. */
+export async function getLatestChatbotSession(
+  contactRef: string,
+  chatbotRef: string,
+  apiKey: string,
+): Promise<ChatbotSessionSummary | null> {
+  try {
+    const params = new URLSearchParams({
+      contact_ref: contactRef,
+      chatbot_ref: chatbotRef,
+    });
+    const res = await apiFetch<ChatbotSessionSummaryResponse>(
+      `/api/chatbot/sessions?${params}`,
+      apiKey,
+    );
+    return res.success ? (res.data ?? null) : null;
+  } catch {
+    // 404 = no session for this contact yet.
+    return null;
+  }
+}
+
+/**
+ * Queues one turn; the reply arrives later through the webhook stream.
+ * Omit `message` on a fresh session to get the bot's greeting.
+ */
+export async function sendChatbotSessionMessage(
+  sessionId: string,
+  message: string | undefined,
+  apiKey: string,
+): Promise<void> {
+  const res = await apiFetch<SendChatbotSessionMessageResponse>(
+    `/api/chatbot/sessions/${encodeURIComponent(sessionId)}/message`,
+    apiKey,
+    { method: "POST", body: JSON.stringify(message ? { message } : {}) },
+  );
+  if (!res.success) {
+    throw new Error(res.error || "Failed to send the message.");
   }
-  return res.data.messages;
 }
diff --git a/app/lib/constants.ts b/app/lib/constants.ts
index 0a32cebd..45d0d926 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -22,6 +22,7 @@ export const STORAGE_KEYS = {
   DOCUMENT_SIZES: "document_file_sizes",
   SIDEBAR_MENUS: "sidebar-expanded-menus",
   CHAT_STATE: "kaapi_chat_state",
+  CHATBOT_STATE: "kaapi_chatbot_state",
 } as const;
 
 export const COOKIE_KEYS = {
@@ -29,6 +30,7 @@ export const COOKIE_KEYS = {
   FEATURES: "kaapi_features",
   API_KEY: "kaapi_api_key",
   API_KEY_META: "kaapi_api_key_meta",
+  CHATBOT_SESSION: "kaapi_chatbot_session",
 } as const;
 
 export const AUTH_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
@@ -214,6 +216,9 @@ export const PAGER_BUTTON_IDLE =
 export const PAGER_BUTTON_CURRENT =
   "border-accent-primary bg-accent-primary text-white font-semibold";
 
-/** Chatbot flow — default per-request limits for the test panel. */
-export const CHATBOT_DEFAULT_MAX_TOKENS = 2048;
-export const CHATBOT_DEFAULT_HISTORY_TOKEN_LIMIT = 6000;
+/** Chatbot flow — how long the test panel waits for a webhook reply. */
+export const CHATBOT_REPLY_TIMEOUT_MS = 90_000;
+/** Backend limit on a chatbot session's `name`. */
+export const CHATBOT_NAME_MAX_LENGTH = 255;
+/** Name used when the title is empty or the backend returns none (matches backend default). */
+export const DEFAULT_CHATBOT_NAME = "Untitled Chatbot";
diff --git a/app/lib/store/chatbot.ts b/app/lib/store/chatbot.ts
new file mode 100644
index 00000000..b63ab3d1
--- /dev/null
+++ b/app/lib/store/chatbot.ts
@@ -0,0 +1,91 @@
+"use client";
+
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+
+import { STORAGE_KEYS } from "@/app/lib/constants";
+import { ChatbotChatMessage, ChatbotNodeData } from "@/app/lib/types/chatbot";
+
+const MAX_PERSISTED_MESSAGES = 100;
+
+interface ChatbotState {
+  /** Last saved node data; the baseline for Discard and dirty checks. */
+  savedFlow: ChatbotNodeData | null;
+  /** Backend-generated chatbot id; null until the first save. */
+  chatbotRef: string | null;
+  /** Session the stored transcript belongs to (the cookie holds the active id). */
+  messagesSessionId: string | null;
+  messages: ChatbotChatMessage[];
+  /** Last webhook event applied, so reconnects don't replay it. */
+  lastEventSeq: number;
+  hasHydrated: boolean;
+}
+
+interface ChatbotActions {
+  setSavedFlow: (flow: ChatbotNodeData) => void;
+  setChatbotRef: (ref: string) => void;
+  /** Points the transcript at a session, clearing it if the session changed. */
+  bindSession: (sessionId: string) => void;
+  appendMessage: (message: ChatbotChatMessage) => void;
+  removeMessage: (id: string) => void;
+  setLastEventSeq: (seq: number) => void;
+  setHasHydrated: (value: boolean) => void;
+}
+
+const INITIAL_STATE: ChatbotState = {
+  savedFlow: null,
+  chatbotRef: null,
+  messagesSessionId: null,
+  messages: [],
+  lastEventSeq: 0,
+  hasHydrated: false,
+};
+
+export const useChatbotStore = create<ChatbotState & ChatbotActions>()(
+  persist(
+    (set) => ({
+      ...INITIAL_STATE,
+
+      setSavedFlow: (flow) => set({ savedFlow: flow }),
+
+      setChatbotRef: (ref) => set({ chatbotRef: ref }),
+
+      bindSession: (sessionId) =>
+        set((state) =>
+          state.messagesSessionId === sessionId
+            ? state
+            : { messagesSessionId: sessionId, messages: [], lastEventSeq: 0 },
+        ),
+
+      appendMessage: (message) =>
+        set((state) => ({
+          messages: [...state.messages, message].slice(-MAX_PERSISTED_MESSAGES),
+        })),
+
+      removeMessage: (id) =>
+        set((state) => ({
+          messages: state.messages.filter((m) => m.id !== id),
+        })),
+
+      setLastEventSeq: (seq) => set({ lastEventSeq: seq }),
+
+      setHasHydrated: (value) => set({ hasHydrated: value }),
+    }),
+    {
+      name: STORAGE_KEYS.CHATBOT_STATE,
+      version: 1,
+      storage: createJSONStorage(() => localStorage),
+      skipHydration: true,
+      partialize: (state) => ({
+        savedFlow: state.savedFlow,
+        chatbotRef: state.chatbotRef,
+        messagesSessionId: state.messagesSessionId,
+        messages: state.messages,
+        lastEventSeq: state.lastEventSeq,
+      }),
+      onRehydrateStorage: () => (state) => {
+        state?.setHasHydrated(true);
+      },
+    },
+  ),
+);
diff --git a/app/lib/store/chatbotSessionStore.ts b/app/lib/store/chatbotSessionStore.ts
new file mode 100644
index 00000000..cbfcfa22
--- /dev/null
+++ b/app/lib/store/chatbotSessionStore.ts
@@ -0,0 +1,97 @@
+/**
+ * Server-side in-memory store for chatbot session replies. The backend POSTs
+ * each completed turn to `/api/webhooks/chatbot`; this store keeps a short
+ * per-session buffer and fans events out to open SSE streams, so the browser
+ * never has to receive webhooks directly.
+ */
+
+import type {
+  ChatbotSessionEvent,
+  ChatbotSessionEventListener,
+  ChatbotSessionStoreShape,
+} from "@/app/lib/types/chatbot";
+
+const globalKey = Symbol.for("kaapi.chatbotSessionStore");
+
+type WithStore = { [globalKey]?: ChatbotSessionStoreShape };
+const g = globalThis as unknown as WithStore;
+
+if (!g[globalKey]) {
+  g[globalKey] = { events: new Map(), listeners: new Map(), lastSeq: 0 };
+}
+
+const store = g[globalKey]!;
+
+const MAX_EVENTS_PER_SESSION = 50;
+const MAX_SESSIONS = 500;
+const TTL_MS = 30 * 60 * 1000;
+
+/** Date-based so ids keep increasing across server restarts. */
+function nextSeq(): number {
+  store.lastSeq = Math.max(Date.now(), store.lastSeq + 1);
+  return store.lastSeq;
+}
+
+function prune(): void {
+  const cutoff = Date.now() - TTL_MS;
+  for (const [sessionId, events] of store.events.entries()) {
+    const last = events[events.length - 1];
+    if (!last || last.seq < cutoff) store.events.delete(sessionId);
+  }
+  // Map keeps insertion order, so the first keys are the oldest sessions.
+  for (const sessionId of store.events.keys()) {
+    if (store.events.size <= MAX_SESSIONS) break;
+    store.events.delete(sessionId);
+  }
+}
+
+function emit(event: ChatbotSessionEvent): void {
+  const set = store.listeners.get(event.sessionId);
+  if (!set) return;
+  for (const cb of set) {
+    try {
+      cb(event);
+    } catch (e) {
+      console.error("chatbot session listener error:", e);
+    }
+  }
+}
+
+export function saveSessionEvent(
+  event: Omit<ChatbotSessionEvent, "seq">,
+): ChatbotSessionEvent {
+  const saved: ChatbotSessionEvent = { ...event, seq: nextSeq() };
+  const events = store.events.get(event.sessionId) ?? [];
+  events.push(saved);
+  if (events.length > MAX_EVENTS_PER_SESSION) events.shift();
+  store.events.set(event.sessionId, events);
+  prune();
+  emit(saved);
+  return saved;
+}
+
+/** Events newer than `afterSeq`, oldest first. */
+export function getSessionEventsAfter(
+  sessionId: string,
+  afterSeq: number,
+): ChatbotSessionEvent[] {
+  return (store.events.get(sessionId) ?? []).filter((e) => e.seq > afterSeq);
+}
+
+export function subscribeSessionEvents(
+  sessionId: string,
+  cb: ChatbotSessionEventListener,
+): () => void {
+  let set = store.listeners.get(sessionId);
+  if (!set) {
+    set = new Set();
+    store.listeners.set(sessionId, set);
+  }
+  set.add(cb);
+  return () => {
+    const s = store.listeners.get(sessionId);
+    if (!s) return;
+    s.delete(cb);
+    if (s.size === 0) store.listeners.delete(sessionId);
+  };
+}
diff --git a/app/lib/types/chatbot.ts b/app/lib/types/chatbot.ts
index 5cadcde0..52ecad1a 100644
--- a/app/lib/types/chatbot.ts
+++ b/app/lib/types/chatbot.ts
@@ -1,25 +1,14 @@
 import type { Node } from "@xyflow/react";
 
-export type ChatbotRole = "system" | "user" | "assistant";
-
-export interface ChatbotMessage {
-  role: ChatbotRole;
-  content: string;
-}
-
-/** Data carried by each LLM node on the flow canvas (unsaved, in-memory). */
 export type ChatbotNodeData = {
   label: string;
   systemPrompt: string;
   configId: string;
   configVersion?: number;
-  maxTokens: number;
-  historyTokenLimit: number;
 };
 
 export type ChatbotLlmNode = Node<ChatbotNodeData, "llm">;
 
-/** Fixed entry/exit points of the flow. */
 export type ChatbotTerminalNode = Node<
   { label: string },
   "flowInput" | "flowOutput"
@@ -27,19 +16,91 @@ export type ChatbotTerminalNode = Node<
 
 export type ChatbotFlowNode = ChatbotLlmNode | ChatbotTerminalNode;
 
-export interface ChatbotMessageRequest {
+export type ChatbotSessionStatus = "active" | "inactive";
+
+/** `complete` once every field the system prompt asks for is collected. */
+export type ChatbotCompletionStatus = "in_progress" | "complete" | "abandoned";
+
+export type ChatbotCollectedFields = Record<string, unknown>;
+
+export interface ChatbotChatMessage {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+}
+
+export interface CreateChatbotSessionRequest {
+  name: string;
+  /** Omit for a new chatbot (backend generates one); resend it for the same chatbot. */
+  chatbot_ref?: string;
   config_id: string;
   config_version?: number;
+  contact_ref: string;
   system_prompt: string;
-  history: ChatbotMessage[];
-  /** Omitted on the first call so the bot greets first. */
-  message?: string;
-  max_tokens?: number;
-  history_token_limit?: number;
 }
 
-export interface ChatbotMessageResponse {
+export interface CreateChatbotSessionResponse {
   success: boolean;
-  data?: { messages: ChatbotMessage[] } | null;
+  data?: { session_id: string; chatbot_ref: string } | null;
   error?: string | null;
 }
+
+export interface ChatbotSessionSummary {
+  session_id: string;
+  name: string;
+  contact_ref: string;
+  chatbot_ref: string;
+  status: ChatbotSessionStatus;
+  completion_status: ChatbotCompletionStatus;
+  collected_fields: ChatbotCollectedFields;
+  config_id: string;
+  config_version: number | null;
+  inserted_at: string;
+  updated_at: string;
+}
+
+export interface ChatbotSessionSummaryResponse {
+  success: boolean;
+  data?: ChatbotSessionSummary | null;
+  error?: string | null;
+}
+
+export interface SendChatbotSessionMessageResponse {
+  success: boolean;
+  data?: { status: string } | null;
+  error?: string | null;
+}
+
+/** Body Kaapi POSTs to our webhook once a session turn completes. */
+export interface ChatbotWebhookPayload {
+  success: boolean;
+  data?: {
+    session_id: string;
+    /** Present on success payloads only. */
+    chatbot_ref?: string;
+    reply?: string;
+    status?: ChatbotSessionStatus;
+    completion_status?: ChatbotCompletionStatus;
+    collected_fields?: ChatbotCollectedFields;
+  } | null;
+  error?: string | null;
+}
+
+export interface ChatbotSessionEvent {
+  seq: number;
+  sessionId: string;
+  success: boolean;
+  reply: string | null;
+  status: ChatbotSessionStatus | null;
+  completionStatus: ChatbotCompletionStatus | null;
+  collectedFields: ChatbotCollectedFields | null;
+  error: string | null;
+}
+
+export type ChatbotSessionEventListener = (event: ChatbotSessionEvent) => void;
+
+export interface ChatbotSessionStoreShape {
+  events: Map<string, ChatbotSessionEvent[]>;
+  listeners: Map<string, Set<ChatbotSessionEventListener>>;
+  lastSeq: number;
+}
diff --git a/app/lib/types/webhookSecret.ts b/app/lib/types/webhookSecret.ts
index 957ef572..d06def7b 100644
--- a/app/lib/types/webhookSecret.ts
+++ b/app/lib/types/webhookSecret.ts
@@ -1,7 +1,7 @@
 export type WebhookSecretFailureReason =
-  | "prompt_improvement_webhook_secret_missing"
-  | "prompt_improvement_webhook_secret_placeholder"
-  | "prompt_improvement_webhook_secret_invalid_format";
+  | "webhook_secret_missing"
+  | "webhook_secret_placeholder"
+  | "webhook_secret_invalid_format";
 
 export interface WebhookSecretResult {
   ok: boolean;
diff --git a/app/lib/utils/chatbotSessionCookie.ts b/app/lib/utils/chatbotSessionCookie.ts
new file mode 100644
index 00000000..818d53b3
--- /dev/null
+++ b/app/lib/utils/chatbotSessionCookie.ts
@@ -0,0 +1,15 @@
+import { AUTH_COOKIE_MAX_AGE, COOKIE_KEYS } from "@/app/lib/constants";
+import { readClientCookie } from "@/app/lib/utils";
+
+/** Session id of the last saved chatbot flow, kept in a cookie. */
+export function readChatbotSessionCookie(): string | null {
+  return readClientCookie(COOKIE_KEYS.CHATBOT_SESSION) || null;
+}
+
+export function writeChatbotSessionCookie(sessionId: string): void {
+  if (typeof document === "undefined") return;
+  const secure = process.env.NODE_ENV === "production" ? "; Secure" : "";
+  document.cookie = `${COOKIE_KEYS.CHATBOT_SESSION}=${encodeURIComponent(
+    sessionId,
+  )}; Path=/; Max-Age=${AUTH_COOKIE_MAX_AGE}; SameSite=Lax${secure}`;
+}
diff --git a/app/lib/webhookCallback.ts b/app/lib/webhookCallback.ts
new file mode 100644
index 00000000..e6e0c822
--- /dev/null
+++ b/app/lib/webhookCallback.ts
@@ -0,0 +1,37 @@
+import "server-only";
+
+import type { NextRequest } from "next/server";
+import { readWebhookSecret } from "@/app/lib/webhookSecret";
+
+/**
+ * Builds the public HTTPS URL the backend should POST async results to.
+ * The shared secret rides along as `secret_value` so the receiving route
+ * can reject forged deliveries.
+ */
+export function buildWebhookCallbackUrl(
+  request: NextRequest,
+  path: string,
+): string {
+  const secretResult = readWebhookSecret();
+  if (!secretResult.ok || !secretResult.secret) {
+    throw new Error(secretResult.reason ?? "webhook_secret_missing");
+  }
+  const configured =
+    process.env.NEXT_PUBLIC_APP_URL ?? process.env.APP_URL ?? null;
+  const base = configured
+    ? configured.replace(/\/$/, "")
+    : `${request.headers.get("x-forwarded-proto") ?? "https"}://${
+        request.headers.get("x-forwarded-host") ??
+        request.headers.get("host") ??
+        request.nextUrl.host
+      }`;
+  return `${base}${path}?secret_value=${encodeURIComponent(secretResult.secret)}`;
+}
+
+/** True when the incoming webhook carries our shared secret. */
+export function isWebhookAuthorized(request: NextRequest): boolean {
+  const secretResult = readWebhookSecret();
+  if (!secretResult.ok || !secretResult.secret) return false;
+  const provided = request.nextUrl.searchParams.get("secret_value");
+  return provided === secretResult.secret;
+}
diff --git a/app/lib/webhookSecret.ts b/app/lib/webhookSecret.ts
index d75add19..ca27ccd3 100644
--- a/app/lib/webhookSecret.ts
+++ b/app/lib/webhookSecret.ts
@@ -21,21 +21,21 @@ export type {
  * surface a specific error code instead of a generic 500.
  */
 export function readWebhookSecret(): WebhookSecretResult {
-  const raw = process.env.PROMPT_IMPROVEMENT_WEBHOOK_SECRET;
+  const raw = process.env.WEBHOOK_SECRET;
   if (!raw) {
-    return { ok: false, reason: "prompt_improvement_webhook_secret_missing" };
+    return { ok: false, reason: "webhook_secret_missing" };
   }
   const trimmed = raw.trim();
   if (PLACEHOLDER_VALUES.has(trimmed.toLowerCase())) {
     return {
       ok: false,
-      reason: "prompt_improvement_webhook_secret_placeholder",
+      reason: "webhook_secret_placeholder",
     };
   }
   if (!HEX_SECRET_REGEX.test(trimmed)) {
     return {
       ok: false,
-      reason: "prompt_improvement_webhook_secret_invalid_format",
+      reason: "webhook_secret_invalid_format",
     };
   }
   return { ok: true, secret: trimmed };

From 6cc3e3841028a9314a0ae95c3c75492dad62bc18 Mon Sep 17 00:00:00 2001
From: Ayush8923 <80516839+Ayush8923@users.noreply.github.com>
Date: Fri, 23 Oct 2026 23:35:22 +0530
Subject: [PATCH 03/12] fix: added the features flags, cleanups and few updates

---
 app/(main)/chatbot/page.tsx                   |  5 --
 app/api/webhooks/chatbot/stream/route.ts      | 10 +++-
 app/components/chat/AssistantAvatar.tsx       |  9 ++++
 app/components/chat/ChatMessage.tsx           | 22 +++------
 app/components/chat/ThinkingDots.tsx          |  9 ++++
 app/components/chat/index.ts                  |  2 +
 app/components/chatbot/ChatbotChatInput.tsx   |  8 ++--
 app/components/chatbot/ChatbotTestPanel.tsx   | 18 +++++---
 app/components/chatbot/LlmNodePromptField.tsx | 16 +++----
 app/components/ui/Button.tsx                  |  3 +-
 app/hooks/useChatbotFlow.ts                   | 13 ++++--
 app/hooks/useChatbotReplyStream.ts            |  5 +-
 app/hooks/useChatbotSession.ts                | 46 +++++++++++--------
 app/lib/chatbotClient.ts                      | 14 +++---
 app/lib/constants.ts                          |  4 +-
 app/lib/context/AuthContext.tsx               |  5 ++
 app/lib/navConfig.ts                          |  1 +
 app/lib/store/chatbot.ts                      |  9 ++--
 app/lib/store/chatbotSessionStore.ts          | 14 +++---
 app/lib/types/chatbot.ts                      |  1 +
 app/lib/utils/chatbotSessionCookie.ts         |  5 ++
 middleware.ts                                 |  5 +-
 22 files changed, 133 insertions(+), 91 deletions(-)
 create mode 100644 app/components/chat/AssistantAvatar.tsx
 create mode 100644 app/components/chat/ThinkingDots.tsx

diff --git a/app/(main)/chatbot/page.tsx b/app/(main)/chatbot/page.tsx
index 92b7f3d1..d3af1299 100644
--- a/app/(main)/chatbot/page.tsx
+++ b/app/(main)/chatbot/page.tsx
@@ -1,8 +1,3 @@
-/**
- * Chatbot - Design the chatbot flow on a canvas; Save stores it as a
- * server-side session that the test panel chats with.
- */
-
 "use client";
 
 import { useCallback, useEffect } from "react";
diff --git a/app/api/webhooks/chatbot/stream/route.ts b/app/api/webhooks/chatbot/stream/route.ts
index e61b6418..e1618d94 100644
--- a/app/api/webhooks/chatbot/stream/route.ts
+++ b/app/api/webhooks/chatbot/stream/route.ts
@@ -1,5 +1,6 @@
 import { NextRequest } from "next/server";
 import {
+  getLatestSessionSeq,
   getSessionEventsAfter,
   subscribeSessionEvents,
 } from "@/app/lib/store/chatbotSessionStore";
@@ -18,15 +19,20 @@ function parseSeq(value: string | null): number {
 /**
  * SSE stream of webhook replies for one chatbot session. Each event carries
  * its `seq` as the SSE id, so a reconnecting EventSource resumes via
- * `Last-Event-ID`; `after` lets a fresh page load skip replies it already has.
+ * `Last-Event-ID`; `after` lets a fresh page load skip replies it already
+ * has, and `after=latest` skips the whole backlog (a client with no local
+ * transcript must not get old bot replies without the user turns between).
  */
 export async function GET(request: NextRequest) {
   const sessionId = request.nextUrl.searchParams.get("session_id");
   if (!sessionId) {
     return new Response("session_id_required", { status: 400 });
   }
+  const afterParam = request.nextUrl.searchParams.get("after");
   const afterSeq = Math.max(
-    parseSeq(request.nextUrl.searchParams.get("after")),
+    afterParam === "latest"
+      ? getLatestSessionSeq(sessionId)
+      : parseSeq(afterParam),
     parseSeq(request.headers.get("last-event-id")),
   );
 
diff --git a/app/components/chat/AssistantAvatar.tsx b/app/components/chat/AssistantAvatar.tsx
new file mode 100644
index 00000000..d7401013
--- /dev/null
+++ b/app/components/chat/AssistantAvatar.tsx
@@ -0,0 +1,9 @@
+import { ChatIcon } from "@/app/components/icons";
+
+export default function AssistantAvatar() {
+  return (
+    <div className="w-8 h-8 rounded-full bg-accent-primary text-white flex items-center justify-center shrink-0 mt-1">
+      <ChatIcon className="w-4 h-4" />
+    </div>
+  );
+}
diff --git a/app/components/chat/ChatMessage.tsx b/app/components/chat/ChatMessage.tsx
index d1985439..826a229f 100644
--- a/app/components/chat/ChatMessage.tsx
+++ b/app/components/chat/ChatMessage.tsx
@@ -10,14 +10,18 @@ import {
   ChatMessage as ChatMessageType,
 } from "@/app/lib/types/chat";
 import {
-  ChatIcon,
   CheckLineIcon,
   CopyIcon,
   DocumentFileIcon,
   MicIcon,
   SpeakerIcon,
 } from "@/app/components/icons";
-import { AttachmentPreviewModal, MarkdownContent } from "@/app/components/chat";
+import {
+  AssistantAvatar,
+  AttachmentPreviewModal,
+  MarkdownContent,
+  ThinkingDots,
+} from "@/app/components/chat";
 import { useTextToSpeech } from "@/app/hooks/useTextToSpeech";
 
 interface ChatMessageProps {
@@ -48,16 +52,6 @@ function VoiceMessageBody() {
   );
 }
 
-function ThinkingDots() {
-  return (
-    <div className="flex items-center gap-1.5 py-1">
-      <span className="w-1.5 h-1.5 rounded-full bg-text-secondary animate-[chat-pulse_1.4s_ease-in-out_infinite]" />
-      <span className="w-1.5 h-1.5 rounded-full bg-text-secondary animate-[chat-pulse_1.4s_ease-in-out_0.2s_infinite]" />
-      <span className="w-1.5 h-1.5 rounded-full bg-text-secondary animate-[chat-pulse_1.4s_ease-in-out_0.4s_infinite]" />
-    </div>
-  );
-}
-
 function AssistantBody({
   text,
   baseClass,
@@ -143,9 +137,7 @@ function AssistantMessage({ message }: { message: ChatMessageType }) {
 
   return (
     <div className="flex gap-3 px-4 sm:px-6">
-      <div className="w-8 h-8 rounded-full bg-accent-primary text-white flex items-center justify-center shrink-0 mt-1">
-        <ChatIcon className="w-4 h-4" />
-      </div>
+      <AssistantAvatar />
       <div className="flex-1 min-w-0 pt-1">
         {isPending && !message.content && !hasAudio ? (
           <ThinkingDots />
diff --git a/app/components/chat/ThinkingDots.tsx b/app/components/chat/ThinkingDots.tsx
new file mode 100644
index 00000000..956b5570
--- /dev/null
+++ b/app/components/chat/ThinkingDots.tsx
@@ -0,0 +1,9 @@
+export default function ThinkingDots() {
+  return (
+    <div className="flex items-center gap-1.5 py-1">
+      <span className="w-1.5 h-1.5 rounded-full bg-text-secondary animate-[chat-pulse_1.4s_ease-in-out_infinite]" />
+      <span className="w-1.5 h-1.5 rounded-full bg-text-secondary animate-[chat-pulse_1.4s_ease-in-out_0.2s_infinite]" />
+      <span className="w-1.5 h-1.5 rounded-full bg-text-secondary animate-[chat-pulse_1.4s_ease-in-out_0.4s_infinite]" />
+    </div>
+  );
+}
diff --git a/app/components/chat/index.ts b/app/components/chat/index.ts
index 11336162..8f1caef0 100644
--- a/app/components/chat/index.ts
+++ b/app/components/chat/index.ts
@@ -5,6 +5,8 @@ export { default as ChatConfigPicker } from "./ChatConfigPicker";
 export { default as ChatEmptyState } from "./ChatEmptyState";
 export { default as VoiceInput } from "./VoiceInput";
 export { default as MarkdownContent } from "./MarkdownContent";
+export { default as ThinkingDots } from "./ThinkingDots";
+export { default as AssistantAvatar } from "./AssistantAvatar";
 export { default as AttachmentChip } from "./AttachmentChip";
 export type { AttachmentChipFile } from "./AttachmentChip";
 export { default as AttachmentPreviewModal } from "./AttachmentPreviewModal";
diff --git a/app/components/chatbot/ChatbotChatInput.tsx b/app/components/chatbot/ChatbotChatInput.tsx
index 8ed3de6c..f8507a3e 100644
--- a/app/components/chatbot/ChatbotChatInput.tsx
+++ b/app/components/chatbot/ChatbotChatInput.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { FormEvent, useState } from "react";
+import { Button } from "@/app/components/ui";
 import { SendIcon } from "@/app/components/icons";
 
 interface ChatbotChatInputProps {
@@ -37,14 +38,15 @@ export default function ChatbotChatInput({
         disabled={disabled}
         className="flex-1 px-3 py-2 rounded-full border border-border text-sm bg-bg-primary text-text-primary focus:outline-none focus:border-accent-primary disabled:opacity-60"
       />
-      <button
+      <Button
         type="submit"
+        size="icon"
         disabled={disabled || !input.trim()}
         title="Send"
-        className="p-2 rounded-full bg-accent-primary text-white hover:bg-accent-hover disabled:bg-neutral-200 disabled:text-text-secondary cursor-pointer disabled:cursor-not-allowed"
+        aria-label="Send"
       >
         <SendIcon className="w-4 h-4" />
-      </button>
+      </Button>
     </form>
   );
 }
diff --git a/app/components/chatbot/ChatbotTestPanel.tsx b/app/components/chatbot/ChatbotTestPanel.tsx
index 6161dff5..7adedb69 100644
--- a/app/components/chatbot/ChatbotTestPanel.tsx
+++ b/app/components/chatbot/ChatbotTestPanel.tsx
@@ -9,6 +9,7 @@
 import { useEffect, useRef } from "react";
 import { Button } from "@/app/components/ui";
 import { RefreshIcon } from "@/app/components/icons";
+import { AssistantAvatar, ThinkingDots } from "@/app/components/chat";
 import ChatbotMessageBubble from "@/app/components/chatbot/ChatbotMessageBubble";
 import ChatbotChatInput from "@/app/components/chatbot/ChatbotChatInput";
 import { ChatbotStatusBadge } from "@/app/components/chatbot/ChatbotSessionInfo";
@@ -71,15 +72,17 @@ export default function ChatbotTestPanel({
           />
         </div>
         {hasSession && (
-          <button
+          <Button
             type="button"
+            variant="ghost"
+            size="icon"
             onClick={onRestart}
             disabled={isRestarting || isPending}
             title="Start a new session with the saved flow"
-            className="p-1.5 rounded-full text-text-secondary hover:bg-neutral-100 hover:text-text-primary cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+            aria-label="Restart session"
           >
             <RefreshIcon className="w-4 h-4" />
-          </button>
+          </Button>
         )}
       </div>
 
@@ -113,9 +116,12 @@ export default function ChatbotTestPanel({
           <ChatbotMessageBubble key={m.id} message={m} />
         ))}
         {isPending && (
-          <p className="text-xs text-text-secondary animate-pulse">
-            Bot is typing…
-          </p>
+          <div className="flex gap-3" aria-label="Bot is typing">
+            <AssistantAvatar />
+            <div className="pt-1">
+              <ThinkingDots />
+            </div>
+          </div>
         )}
         {isEnded && (
           <p className="text-xs text-center text-text-secondary">
diff --git a/app/components/chatbot/LlmNodePromptField.tsx b/app/components/chatbot/LlmNodePromptField.tsx
index 2b3755da..756a632b 100644
--- a/app/components/chatbot/LlmNodePromptField.tsx
+++ b/app/components/chatbot/LlmNodePromptField.tsx
@@ -1,12 +1,8 @@
-/**
- * LlmNodePromptField - Inline system-prompt editor with an expanded modal view.
- */
-
 "use client";
 
 import { useState } from "react";
 import { createPortal } from "react-dom";
-import { Modal } from "@/app/components/ui";
+import { Button, Modal } from "@/app/components/ui";
 import { ExpandIcon } from "@/app/components/icons";
 import NodeFieldLabel from "@/app/components/chatbot/NodeFieldLabel";
 
@@ -30,14 +26,17 @@ export default function LlmNodePromptField({
         label="Prompt"
         hint="System prompt for this step. Editing it resets the test conversation."
       >
-        <button
+        <Button
           type="button"
+          variant="ghost"
+          size="icon"
           onClick={() => setExpanded(true)}
           title="Expand prompt"
-          className="nodrag text-text-primary hover:text-accent-primary cursor-pointer"
+          aria-label="Expand prompt"
+          className="nodrag"
         >
           <ExpandIcon className="w-3.5 h-3.5" />
-        </button>
+        </Button>
       </NodeFieldLabel>
       <textarea
         value={value}
@@ -47,7 +46,6 @@ export default function LlmNodePromptField({
         className="nodrag nowheel w-full px-2.5 py-2 rounded-md border border-border text-xs text-text-primary bg-bg-primary placeholder:text-neutral-400 resize-none focus:outline-none focus:border-accent-primary"
       />
 
-      {/* Portaled: the canvas viewport is CSS-transformed, which breaks `fixed`. */}
       {expanded &&
         createPortal(
           <Modal
diff --git a/app/components/ui/Button.tsx b/app/components/ui/Button.tsx
index 0d978781..34cb0c9e 100644
--- a/app/components/ui/Button.tsx
+++ b/app/components/ui/Button.tsx
@@ -1,7 +1,7 @@
 import { ButtonHTMLAttributes, ReactNode } from "react";
 
 type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "danger";
-type ButtonSize = "sm" | "md" | "lg";
+type ButtonSize = "sm" | "md" | "lg" | "icon";
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: ButtonVariant;
@@ -40,6 +40,7 @@ const sizeStyles: Record<ButtonSize, string> = {
   sm: "px-3 py-1.5",
   md: "px-4 py-2",
   lg: "px-5 py-2.5",
+  icon: "p-1.5",
 };
 
 export default function Button({
diff --git a/app/hooks/useChatbotFlow.ts b/app/hooks/useChatbotFlow.ts
index 55adacfb..c1787598 100644
--- a/app/hooks/useChatbotFlow.ts
+++ b/app/hooks/useChatbotFlow.ts
@@ -101,12 +101,15 @@ export function useChatbotFlow() {
     [setNodes],
   );
 
-  // Load the saved flow into the node once localStorage has rehydrated.
-  const restoredRef = useRef(false);
+  // Mirror the saved flow into the node whenever it changes (localStorage
+  // rehydration, or the latest session restored from the backend), unless the
+  // user has unsaved edits against the previously applied version.
+  const appliedRef = useRef<ChatbotNodeData>(DEFAULT_NODE_DATA);
   useEffect(() => {
-    if (!hasHydrated || restoredRef.current) return;
-    restoredRef.current = true;
-    if (savedFlow) replaceNodeData(savedFlow);
+    if (!hasHydrated || !savedFlow || !llmNode) return;
+    const untouched = isSameData(llmNode.data, appliedRef.current);
+    appliedRef.current = savedFlow;
+    if (untouched) replaceNodeData(savedFlow);
   }, [hasHydrated, savedFlow, replaceNodeData]);
 
   const onConnect = useCallback(
diff --git a/app/hooks/useChatbotReplyStream.ts b/app/hooks/useChatbotReplyStream.ts
index 641c80d2..fc27b4a3 100644
--- a/app/hooks/useChatbotReplyStream.ts
+++ b/app/hooks/useChatbotReplyStream.ts
@@ -24,9 +24,12 @@ export function useChatbotReplyStream(
 
   useEffect(() => {
     if (!sessionId || typeof EventSource === "undefined") return;
+    // 0 = nothing applied yet for this session: take only new replies,
+    // never a backlog of bot messages without the user turns around them.
+    const afterSeq = getAfterSeqRef.current();
     const params = new URLSearchParams({
       session_id: sessionId,
-      after: String(getAfterSeqRef.current()),
+      after: afterSeq > 0 ? String(afterSeq) : "latest",
     });
     const source = new EventSource(`/api/webhooks/chatbot/stream?${params}`);
     source.addEventListener("reply", (e) => {
diff --git a/app/hooks/useChatbotSession.ts b/app/hooks/useChatbotSession.ts
index dacae371..af776783 100644
--- a/app/hooks/useChatbotSession.ts
+++ b/app/hooks/useChatbotSession.ts
@@ -44,6 +44,7 @@ export function useChatbotSession() {
   const setLastEventSeq = useChatbotStore((s) => s.setLastEventSeq);
   const chatbotRef = useChatbotStore((s) => s.chatbotRef);
   const setChatbotRef = useChatbotStore((s) => s.setChatbotRef);
+  const setSavedFlow = useChatbotStore((s) => s.setSavedFlow);
 
   const [sessionId, setSessionId] = useState<string | null>(null);
   const [sessionName, setSessionName] = useState<string | null>(null);
@@ -56,8 +57,7 @@ export function useChatbotSession() {
   );
   const { clear: clearPending, start: startPending } = pending;
 
-  const userRef = currentUser?.id ?? activeKey?.id;
-  const contactRef = userRef ? `kaapi-user-${userRef}` : null;
+  const contactRef = currentUser?.id ? `kaapi-user-${currentUser.id}` : null;
 
   const adoptSession = useCallback(
     (id: string) => {
@@ -67,27 +67,37 @@ export function useChatbotSession() {
     [bindSession],
   );
 
-  // Restore the session from the cookie, falling back to this chatbot's
-  // latest session for the contact; either way refresh its status. The
-  // lookup needs the chatbot ref, which only exists after the first save.
+  // Restore the session from the cookie, falling back to the user's latest
+  // session; when found, its name/config/prompt become the saved flow and its
+  // backend-issued chatbot ref is stored for later calls. The ref is sent
+  // only if we have it.
   useEffect(() => {
     if (!hasHydrated || !isAuthenticated || !contactRef) return;
     const cookieId = readChatbotSessionCookie();
     if (cookieId) adoptSession(cookieId);
-    if (!chatbotRef) return;
 
     let cancelled = false;
     getLatestChatbotSession(contactRef, chatbotRef, apiKey).then((summary) => {
       if (cancelled || !summary) return;
+      if (cookieId && cookieId !== summary.session_id) return;
       if (!cookieId) {
         writeChatbotSessionCookie(summary.session_id);
         adoptSession(summary.session_id);
       }
-      if (!cookieId || cookieId === summary.session_id) {
-        setSessionName(summary.name || DEFAULT_CHATBOT_NAME);
-        setStatus(summary.status);
-        setCompletionStatus(summary.completion_status);
-      }
+      const name = summary.name || DEFAULT_CHATBOT_NAME;
+      setChatbotRef(summary.chatbot_ref);
+      setSavedFlow({
+        label: name,
+        configId: summary.config_id,
+        configVersion: summary.config_version ?? undefined,
+        systemPrompt:
+          summary.system_prompt ??
+          useChatbotStore.getState().savedFlow?.systemPrompt ??
+          "",
+      });
+      setSessionName(name);
+      setStatus(summary.status);
+      setCompletionStatus(summary.completion_status);
     });
     return () => {
       cancelled = true;
@@ -99,6 +109,8 @@ export function useChatbotSession() {
     chatbotRef,
     apiKey,
     adoptSession,
+    setChatbotRef,
+    setSavedFlow,
   ]);
 
   const handleEvent = useCallback(
@@ -142,6 +154,7 @@ export function useChatbotSession() {
         const created = await createChatbotSession(
           {
             name,
+            // Backend issues the ref on the first save; resend it afterwards.
             chatbot_ref: chatbotRef ?? undefined,
             config_id: data.configId,
             config_version: data.configVersion,
@@ -167,15 +180,7 @@ export function useChatbotSession() {
         setIsCreating(false);
       }
     },
-    [
-      adoptSession,
-      apiKey,
-      chatbotRef,
-      clearPending,
-      contactRef,
-      setChatbotRef,
-      toast,
-    ],
+    [adoptSession, apiKey, clearPending, contactRef, setChatbotRef, toast],
   );
 
   /** Queues a turn; omit `message` to get the greeting on a fresh session. */
@@ -206,6 +211,7 @@ export function useChatbotSession() {
     [
       appendMessage,
       apiKey,
+      chatbotRef,
       clearPending,
       removeMessage,
       sessionId,
diff --git a/app/lib/chatbotClient.ts b/app/lib/chatbotClient.ts
index ac837ef6..5edb2f11 100644
--- a/app/lib/chatbotClient.ts
+++ b/app/lib/chatbotClient.ts
@@ -29,17 +29,19 @@ export async function createChatbotSession(
   };
 }
 
-/** Latest session of this chatbot for the contact, or null when there is none. */
+/**
+ * Latest session for the contact, or null when there is none. Without a
+ * `chatbotRef` the backend picks the contact's latest session and its
+ * response carries the ref to reuse from then on.
+ */
 export async function getLatestChatbotSession(
   contactRef: string,
-  chatbotRef: string,
+  chatbotRef: string | null,
   apiKey: string,
 ): Promise<ChatbotSessionSummary | null> {
   try {
-    const params = new URLSearchParams({
-      contact_ref: contactRef,
-      chatbot_ref: chatbotRef,
-    });
+    const params = new URLSearchParams({ contact_ref: contactRef });
+    if (chatbotRef) params.set("chatbot_ref", chatbotRef);
     const res = await apiFetch<ChatbotSessionSummaryResponse>(
       `/api/chatbot/sessions?${params}`,
       apiKey,
diff --git a/app/lib/constants.ts b/app/lib/constants.ts
index 45d0d926..3dddc2f9 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -11,6 +11,7 @@ export const APP_NAME = "Kaapi Konsole";
 
 export const FeatureFlag = {
   ASSESSMENT: ASSESSMENT_FEATURE_FLAG,
+  CHATBOT: "CHATBOT",
 } as const;
 
 export type FeatureFlagKey = (typeof FeatureFlag)[keyof typeof FeatureFlag];
@@ -216,9 +217,6 @@ export const PAGER_BUTTON_IDLE =
 export const PAGER_BUTTON_CURRENT =
   "border-accent-primary bg-accent-primary text-white font-semibold";
 
-/** Chatbot flow — how long the test panel waits for a webhook reply. */
 export const CHATBOT_REPLY_TIMEOUT_MS = 90_000;
-/** Backend limit on a chatbot session's `name`. */
 export const CHATBOT_NAME_MAX_LENGTH = 255;
-/** Name used when the title is empty or the backend returns none (matches backend default). */
 export const DEFAULT_CHATBOT_NAME = "Untitled Chatbot";
diff --git a/app/lib/context/AuthContext.tsx b/app/lib/context/AuthContext.tsx
index 5f2b953c..2d944192 100644
--- a/app/lib/context/AuthContext.tsx
+++ b/app/lib/context/AuthContext.tsx
@@ -22,6 +22,8 @@ import {
   STORAGE_KEYS,
 } from "@/app/lib/constants";
 import { useChatStore } from "@/app/lib/store/chat";
+import { useChatbotStore } from "@/app/lib/store/chatbot";
+import { clearChatbotSessionCookie } from "@/app/lib/utils/chatbotSessionCookie";
 import { clearAllStorage, readClientCookie } from "@/app/lib/utils";
 export type { User, GoogleProfile, Session } from "@/app/lib/types/auth";
 
@@ -145,6 +147,9 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     setCurrentUser(null);
     clearAllStorage();
     useChatStore.getState().reset();
+    // Chatbot session + transcript belong to this user; never leak them to the next login.
+    useChatbotStore.getState().reset();
+    clearChatbotSessionCookie();
     setApiKeys([]);
     window.dispatchEvent(new Event("kaapi-auth-changed"));
     window.location.replace("/chat");
diff --git a/app/lib/navConfig.ts b/app/lib/navConfig.ts
index c608682a..801b88d4 100644
--- a/app/lib/navConfig.ts
+++ b/app/lib/navConfig.ts
@@ -52,6 +52,7 @@ export const NAV_ITEMS: NavItemConfig[] = [
     name: "Chatbot",
     route: "/chatbot",
     icon: "flow",
+    featureFlag: FeatureFlag.CHATBOT,
     gateDescription: "Log in to build and test chatbot flows.",
   },
   {
diff --git a/app/lib/store/chatbot.ts b/app/lib/store/chatbot.ts
index b63ab3d1..e5f39fcd 100644
--- a/app/lib/store/chatbot.ts
+++ b/app/lib/store/chatbot.ts
@@ -2,21 +2,16 @@
 
 import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
-
 import { STORAGE_KEYS } from "@/app/lib/constants";
 import { ChatbotChatMessage, ChatbotNodeData } from "@/app/lib/types/chatbot";
 
 const MAX_PERSISTED_MESSAGES = 100;
 
 interface ChatbotState {
-  /** Last saved node data; the baseline for Discard and dirty checks. */
   savedFlow: ChatbotNodeData | null;
-  /** Backend-generated chatbot id; null until the first save. */
   chatbotRef: string | null;
-  /** Session the stored transcript belongs to (the cookie holds the active id). */
   messagesSessionId: string | null;
   messages: ChatbotChatMessage[];
-  /** Last webhook event applied, so reconnects don't replay it. */
   lastEventSeq: number;
   hasHydrated: boolean;
 }
@@ -24,12 +19,12 @@ interface ChatbotState {
 interface ChatbotActions {
   setSavedFlow: (flow: ChatbotNodeData) => void;
   setChatbotRef: (ref: string) => void;
-  /** Points the transcript at a session, clearing it if the session changed. */
   bindSession: (sessionId: string) => void;
   appendMessage: (message: ChatbotChatMessage) => void;
   removeMessage: (id: string) => void;
   setLastEventSeq: (seq: number) => void;
   setHasHydrated: (value: boolean) => void;
+  reset: () => void;
 }
 
 const INITIAL_STATE: ChatbotState = {
@@ -70,6 +65,8 @@ export const useChatbotStore = create<ChatbotState & ChatbotActions>()(
       setLastEventSeq: (seq) => set({ lastEventSeq: seq }),
 
       setHasHydrated: (value) => set({ hasHydrated: value }),
+
+      reset: () => set({ ...INITIAL_STATE, hasHydrated: true }),
     }),
     {
       name: STORAGE_KEYS.CHATBOT_STATE,
diff --git a/app/lib/store/chatbotSessionStore.ts b/app/lib/store/chatbotSessionStore.ts
index cbfcfa22..4b8fde94 100644
--- a/app/lib/store/chatbotSessionStore.ts
+++ b/app/lib/store/chatbotSessionStore.ts
@@ -1,10 +1,3 @@
-/**
- * Server-side in-memory store for chatbot session replies. The backend POSTs
- * each completed turn to `/api/webhooks/chatbot`; this store keeps a short
- * per-session buffer and fans events out to open SSE streams, so the browser
- * never has to receive webhooks directly.
- */
-
 import type {
   ChatbotSessionEvent,
   ChatbotSessionEventListener,
@@ -26,7 +19,6 @@ const MAX_EVENTS_PER_SESSION = 50;
 const MAX_SESSIONS = 500;
 const TTL_MS = 30 * 60 * 1000;
 
-/** Date-based so ids keep increasing across server restarts. */
 function nextSeq(): number {
   store.lastSeq = Math.max(Date.now(), store.lastSeq + 1);
   return store.lastSeq;
@@ -70,6 +62,12 @@ export function saveSessionEvent(
   return saved;
 }
 
+/** Seq of the newest buffered event for a session (0 when none). */
+export function getLatestSessionSeq(sessionId: string): number {
+  const events = store.events.get(sessionId);
+  return events?.[events.length - 1]?.seq ?? 0;
+}
+
 /** Events newer than `afterSeq`, oldest first. */
 export function getSessionEventsAfter(
   sessionId: string,
diff --git a/app/lib/types/chatbot.ts b/app/lib/types/chatbot.ts
index 52ecad1a..dc07dca7 100644
--- a/app/lib/types/chatbot.ts
+++ b/app/lib/types/chatbot.ts
@@ -55,6 +55,7 @@ export interface ChatbotSessionSummary {
   collected_fields: ChatbotCollectedFields;
   config_id: string;
   config_version: number | null;
+  system_prompt: string;
   inserted_at: string;
   updated_at: string;
 }
diff --git a/app/lib/utils/chatbotSessionCookie.ts b/app/lib/utils/chatbotSessionCookie.ts
index 818d53b3..631cd77a 100644
--- a/app/lib/utils/chatbotSessionCookie.ts
+++ b/app/lib/utils/chatbotSessionCookie.ts
@@ -6,6 +6,11 @@ export function readChatbotSessionCookie(): string | null {
   return readClientCookie(COOKIE_KEYS.CHATBOT_SESSION) || null;
 }
 
+export function clearChatbotSessionCookie(): void {
+  if (typeof document === "undefined") return;
+  document.cookie = `${COOKIE_KEYS.CHATBOT_SESSION}=; Path=/; Max-Age=0; SameSite=Lax`;
+}
+
 export function writeChatbotSessionCookie(sessionId: string): void {
   if (typeof document === "undefined") return;
   const secure = process.env.NODE_ENV === "production" ? "; Secure" : "";
diff --git a/middleware.ts b/middleware.ts
index 5f390622..8dea52c9 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -19,7 +19,10 @@ const PUBLIC_ROUTES = new Set<string>([
 const FEATURE_GATED_PREFIXES: Array<{
   prefix: string;
   flag: FeatureFlagKey;
-}> = [{ prefix: "/assessment", flag: FeatureFlag.ASSESSMENT }];
+}> = [
+  { prefix: "/assessment", flag: FeatureFlag.ASSESSMENT },
+  { prefix: "/chatbot", flag: FeatureFlag.CHATBOT },
+];
 
 // Temporarily disabled while backend changes are being synced; keep in sync with `disabledReason` in navConfig.
 const DISABLED_PREFIXES = ["/guardrails"];

From 0f91ea86b10963eb873b65e6d790b529a75f6fc9 Mon Sep 17 00:00:00 2001
From: Ayush8923 <80516839+Ayush8923@users.noreply.github.com>
Date: Sat, 24 Oct 2026 00:01:58 +0530
Subject: [PATCH 04/12] fix: clenaups and ui updates

---
 app/(main)/chatbot/chat/page.tsx              |  78 ++++++++
 app/(main)/chatbot/page.tsx                   |  75 ++++---
 app/components/chatbot/ChatbotBreadcrumb.tsx  |  43 ++++
 app/components/chatbot/ChatbotChatInput.tsx   |  14 +-
 app/components/chatbot/ChatbotChatWindow.tsx  | 103 ++++++++++
 .../chatbot/ChatbotMessageBubble.tsx          |  25 +--
 app/components/chatbot/ChatbotTestPanel.tsx   | 144 --------------
 app/components/chatbot/index.ts               |   4 +-
 app/hooks/useChatbotSession.ts                | 186 ++++++++++++------
 app/lib/store/chatbot.ts                      |  78 ++++----
 app/lib/store/chatbotSessionStore.ts          |   1 -
 11 files changed, 445 insertions(+), 306 deletions(-)
 create mode 100644 app/(main)/chatbot/chat/page.tsx
 create mode 100644 app/components/chatbot/ChatbotBreadcrumb.tsx
 create mode 100644 app/components/chatbot/ChatbotChatWindow.tsx
 delete mode 100644 app/components/chatbot/ChatbotTestPanel.tsx

diff --git a/app/(main)/chatbot/chat/page.tsx b/app/(main)/chatbot/chat/page.tsx
new file mode 100644
index 00000000..b6beaa7a
--- /dev/null
+++ b/app/(main)/chatbot/chat/page.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import Sidebar from "@/app/components/Sidebar";
+import PageHeader from "@/app/components/PageHeader";
+import { Button } from "@/app/components/ui";
+import { RefreshIcon } from "@/app/components/icons";
+import {
+  ChatbotBreadcrumb,
+  ChatbotChatWindow,
+  ChatbotStatusBadge,
+} from "@/app/components/chatbot";
+import { useApp } from "@/app/lib/context/AppContext";
+import { useToast } from "@/app/hooks/useToast";
+import { useChatbotSession } from "@/app/hooks/useChatbotSession";
+import { useChatbotStore } from "@/app/lib/store/chatbot";
+
+export default function ChatbotChatPage() {
+  const { sidebarCollapsed } = useApp();
+  const toast = useToast();
+  const session = useChatbotSession();
+  const savedFlow = useChatbotStore((s) => s.savedFlow);
+
+  const handleRestart = async () => {
+    if (!savedFlow) {
+      toast.error("Save the flow first to start a session.");
+      return;
+    }
+    if (await session.startSession(savedFlow)) {
+      toast.success("New chat session started.");
+    }
+  };
+
+  return (
+    <div className="w-full h-screen flex flex-col bg-bg-secondary">
+      <div className="flex flex-1 overflow-hidden">
+        <Sidebar collapsed={sidebarCollapsed} activeRoute="/chatbot" />
+
+        <div className="flex-1 flex flex-col overflow-hidden bg-bg-primary">
+          <PageHeader
+            actions={
+              session.sessionId ? (
+                <div className="flex items-center gap-2">
+                  <ChatbotStatusBadge
+                    status={session.status}
+                    completionStatus={session.completionStatus}
+                  />
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={handleRestart}
+                    disabled={session.isCreating || session.isPending}
+                    title="Start a new session with the saved flow"
+                    aria-label="Restart session"
+                  >
+                    <RefreshIcon className="w-4 h-4" />
+                  </Button>
+                </div>
+              ) : null
+            }
+          >
+            <ChatbotBreadcrumb
+              name={session.sessionName}
+              sessionId={session.sessionId}
+            />
+          </PageHeader>
+
+          <ChatbotChatWindow
+            hasSession={!!session.sessionId}
+            status={session.status}
+            messages={session.messages}
+            isPending={session.isPending}
+            onSend={session.send}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/(main)/chatbot/page.tsx b/app/(main)/chatbot/page.tsx
index d3af1299..d0c9a3e7 100644
--- a/app/(main)/chatbot/page.tsx
+++ b/app/(main)/chatbot/page.tsx
@@ -1,15 +1,15 @@
 "use client";
 
-import { useCallback, useEffect } from "react";
+import { useCallback } from "react";
 import Sidebar from "@/app/components/Sidebar";
 import PageHeader from "@/app/components/PageHeader";
 import { Button } from "@/app/components/ui";
-import { ChatbotFlowCanvas, ChatbotTestPanel } from "@/app/components/chatbot";
+import { PlayIcon } from "@/app/components/icons";
+import { ChatbotFlowCanvas } from "@/app/components/chatbot";
 import { useApp } from "@/app/lib/context/AppContext";
 import { useToast } from "@/app/hooks/useToast";
 import { useChatbotFlow } from "@/app/hooks/useChatbotFlow";
 import { useChatbotSession } from "@/app/hooks/useChatbotSession";
-import { useChatbotStore } from "@/app/lib/store/chatbot";
 import { ChatbotNodeData } from "@/app/lib/types/chatbot";
 
 function validateFlow(data: ChatbotNodeData): string | null {
@@ -22,13 +22,8 @@ export default function ChatbotPage() {
   const { sidebarCollapsed } = useApp();
   const toast = useToast();
   const flow = useChatbotFlow();
-  const session = useChatbotSession();
-  const savedFlow = useChatbotStore((s) => s.savedFlow);
-
-  // Trigger persisted-state rehydration on mount.
-  useEffect(() => {
-    useChatbotStore.persist.rehydrate();
-  }, []);
+  // The canvas only creates sessions; chatting happens on /chatbot/chat.
+  const session = useChatbotSession({ listen: false });
 
   const createSessionFor = useCallback(
     async (data: ChatbotNodeData): Promise<boolean> => {
@@ -37,7 +32,7 @@ export default function ChatbotPage() {
         toast.error(error);
         return false;
       }
-      return session.startSession(data);
+      return (await session.startSession(data)) !== null;
     },
     [session, toast],
   );
@@ -51,14 +46,18 @@ export default function ChatbotPage() {
     }
   };
 
-  const handleRestart = async () => {
-    if (!savedFlow) {
-      toast.error("Save the flow first to start a session.");
+  // The chat runs on the saved session, so unsaved edits wouldn't be tested.
+  // It opens in a new tab so the canvas stays as it is.
+  const handlePlay = () => {
+    if (flow.isDirty) {
+      toast.error("Save your changes before testing the chatbot.");
       return;
     }
-    if (await createSessionFor(savedFlow)) {
-      toast.success("New chat session started.");
+    if (!session.sessionId) {
+      toast.error("Save the flow first to start a chat session.");
+      return;
     }
+    window.open("/chatbot/chat", "_blank", "noopener,noreferrer");
   };
 
   const canEdit = flow.isDirty && !session.isCreating;
@@ -89,32 +88,24 @@ export default function ChatbotPage() {
             }
           />
 
-          <div className="flex flex-1 min-h-0">
-            <div className="flex-1 min-w-0 bg-bg-primary">
-              <ChatbotFlowCanvas
-                nodes={flow.nodes}
-                edges={flow.edges}
-                onNodesChange={flow.onNodesChange}
-                onEdgesChange={flow.onEdgesChange}
-                onConnect={flow.onConnect}
-                updateNodeData={flow.updateNodeData}
-              />
-            </div>
-
-            <aside className="w-[380px] shrink-0 border-l border-border flex flex-col min-h-0 bg-bg-primary">
-              <ChatbotTestPanel
-                hasSession={!!session.sessionId}
-                sessionName={session.sessionName}
-                status={session.status}
-                completionStatus={session.completionStatus}
-                messages={session.messages}
-                isPending={session.isPending}
-                isRestarting={session.isCreating}
-                isDirty={flow.isDirty}
-                onSend={session.send}
-                onRestart={handleRestart}
-              />
-            </aside>
+          <div className="relative flex-1 min-h-0 bg-bg-primary">
+            <ChatbotFlowCanvas
+              nodes={flow.nodes}
+              edges={flow.edges}
+              onNodesChange={flow.onNodesChange}
+              onEdgesChange={flow.onEdgesChange}
+              onConnect={flow.onConnect}
+              updateNodeData={flow.updateNodeData}
+            />
+            <Button
+              size="icon"
+              onClick={handlePlay}
+              title="Test the chatbot"
+              aria-label="Test the chatbot"
+              className="absolute top-4 left-4 z-10 w-11 h-11 shadow-md"
+            >
+              <PlayIcon className="w-5 h-5 ml-0.5" />
+            </Button>
           </div>
         </div>
       </div>
diff --git a/app/components/chatbot/ChatbotBreadcrumb.tsx b/app/components/chatbot/ChatbotBreadcrumb.tsx
new file mode 100644
index 00000000..2a186a67
--- /dev/null
+++ b/app/components/chatbot/ChatbotBreadcrumb.tsx
@@ -0,0 +1,43 @@
+import Link from "next/link";
+import { ChevronRightIcon } from "@/app/components/icons";
+
+interface ChatbotBreadcrumbProps {
+  name: string | null;
+  sessionId: string | null;
+}
+
+export default function ChatbotBreadcrumb({
+  name,
+  sessionId,
+}: ChatbotBreadcrumbProps) {
+  const separator = (
+    <ChevronRightIcon className="w-3.5 h-3.5 text-text-secondary shrink-0" />
+  );
+  return (
+    <nav
+      aria-label="Breadcrumb"
+      className="flex items-center gap-2 min-w-0 text-sm"
+    >
+      <Link
+        href="/chatbot"
+        className="font-semibold text-text-primary hover:text-accent-primary shrink-0"
+      >
+        Chatbot
+      </Link>
+      {name && (
+        <>
+          {separator}
+          <span className="font-medium text-text-primary truncate">{name}</span>
+        </>
+      )}
+      {sessionId && (
+        <>
+          {separator}
+          <span className="text-text-secondary truncate font-mono text-xs">
+            {sessionId}
+          </span>
+        </>
+      )}
+    </nav>
+  );
+}
diff --git a/app/components/chatbot/ChatbotChatInput.tsx b/app/components/chatbot/ChatbotChatInput.tsx
index f8507a3e..93420882 100644
--- a/app/components/chatbot/ChatbotChatInput.tsx
+++ b/app/components/chatbot/ChatbotChatInput.tsx
@@ -7,7 +7,6 @@ import { SendIcon } from "@/app/components/icons";
 interface ChatbotChatInputProps {
   disabled: boolean;
   placeholder: string;
-  /** Resolves false when sending failed, so the draft is restored. */
   onSend: (message: string) => Promise<boolean>;
 }
 
@@ -29,23 +28,18 @@ export default function ChatbotChatInput({
   return (
     <form
       onSubmit={handleSubmit}
-      className="border-t border-border p-3 flex items-center gap-2"
+      className="border-t border-border bg-bg-primary p-3 flex items-center gap-2"
     >
       <input
         value={input}
         onChange={(e) => setInput(e.target.value)}
         placeholder={placeholder}
         disabled={disabled}
-        className="flex-1 px-3 py-2 rounded-full border border-border text-sm bg-bg-primary text-text-primary focus:outline-none focus:border-accent-primary disabled:opacity-60"
+        className="flex-1 px-4 py-2.5 rounded-full border border-border text-sm bg-bg-primary text-text-primary focus:outline-none focus:border-accent-primary disabled:opacity-60"
       />
-      <Button
-        type="submit"
-        size="icon"
-        disabled={disabled || !input.trim()}
-        title="Send"
-        aria-label="Send"
-      >
+      <Button type="submit" disabled={disabled || !input.trim()}>
         <SendIcon className="w-4 h-4" />
+        Send
       </Button>
     </form>
   );
diff --git a/app/components/chatbot/ChatbotChatWindow.tsx b/app/components/chatbot/ChatbotChatWindow.tsx
new file mode 100644
index 00000000..a6310da4
--- /dev/null
+++ b/app/components/chatbot/ChatbotChatWindow.tsx
@@ -0,0 +1,103 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useRef } from "react";
+import { Button } from "@/app/components/ui";
+import { AssistantAvatar, ThinkingDots } from "@/app/components/chat";
+import ChatbotMessageBubble from "@/app/components/chatbot/ChatbotMessageBubble";
+import ChatbotChatInput from "@/app/components/chatbot/ChatbotChatInput";
+import {
+  ChatbotChatMessage,
+  ChatbotSessionStatus,
+} from "@/app/lib/types/chatbot";
+
+interface ChatbotChatWindowProps {
+  hasSession: boolean;
+  status: ChatbotSessionStatus | null;
+  messages: ChatbotChatMessage[];
+  isPending: boolean;
+  onSend: (message?: string) => Promise<boolean>;
+}
+
+function inputPlaceholder(isEnded: boolean, hasStarted: boolean): string {
+  if (isEnded) return "Session closed";
+  if (!hasStarted) return "Click Start chat to begin…";
+  return "Type your message…";
+}
+
+function NoSession() {
+  return (
+    <div className="h-full flex flex-col items-center justify-center text-center gap-3">
+      <p className="text-sm text-text-secondary max-w-[320px]">
+        No chatbot session yet. Pick a configuration, write a prompt and save
+        the flow first.
+      </p>
+      <Link
+        href="/chatbot"
+        className="text-sm font-medium text-accent-primary hover:underline"
+      >
+        Go to the flow
+      </Link>
+    </div>
+  );
+}
+
+export default function ChatbotChatWindow({
+  hasSession,
+  status,
+  messages,
+  isPending,
+  onSend,
+}: ChatbotChatWindowProps) {
+  const bottomRef = useRef<HTMLDivElement>(null);
+  // Inactive = superseded by a newer session; a complete one still chats.
+  const isEnded = status === "inactive";
+  const hasStarted = messages.length > 0;
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
+  }, [messages.length, isPending]);
+
+  if (!hasSession) return <NoSession />;
+
+  return (
+    <div className="flex flex-col flex-1 min-h-0">
+      <div className="flex-1 overflow-y-auto p-6 space-y-4">
+        {!hasStarted && !isPending && (
+          <div className="h-full flex flex-col items-center justify-center text-center gap-3">
+            <p className="text-sm text-text-secondary">
+              The bot will send the first message.
+            </p>
+            <Button size="sm" onClick={() => onSend()}>
+              Start chat
+            </Button>
+          </div>
+        )}
+        {messages.map((m) => (
+          <ChatbotMessageBubble key={m.id} message={m} />
+        ))}
+        {isPending && (
+          <div className="flex gap-3" aria-label="Bot is typing">
+            <AssistantAvatar />
+            <div className="pt-1">
+              <ThinkingDots />
+            </div>
+          </div>
+        )}
+        {isEnded && (
+          <p className="text-xs text-center text-text-secondary">
+            This session was replaced by a newer one. Restart to continue
+            testing.
+          </p>
+        )}
+        <div ref={bottomRef} />
+      </div>
+
+      <ChatbotChatInput
+        disabled={isPending || isEnded || !hasStarted}
+        placeholder={inputPlaceholder(isEnded, hasStarted)}
+        onSend={onSend}
+      />
+    </div>
+  );
+}
diff --git a/app/components/chatbot/ChatbotMessageBubble.tsx b/app/components/chatbot/ChatbotMessageBubble.tsx
index 5f2717b7..5c0ce077 100644
--- a/app/components/chatbot/ChatbotMessageBubble.tsx
+++ b/app/components/chatbot/ChatbotMessageBubble.tsx
@@ -1,4 +1,4 @@
-import { MarkdownContent } from "@/app/components/chat";
+import { AssistantAvatar, MarkdownContent } from "@/app/components/chat";
 import { ChatbotChatMessage } from "@/app/lib/types/chatbot";
 
 export default function ChatbotMessageBubble({
@@ -6,17 +6,20 @@ export default function ChatbotMessageBubble({
 }: {
   message: Pick<ChatbotChatMessage, "role" | "content">;
 }) {
-  const isUser = message.role === "user";
+  if (message.role === "user") {
+    return (
+      <div className="flex justify-end">
+        <div className="max-w-[75%] rounded-2xl px-4 py-2.5 text-[15px] leading-relaxed bg-accent-primary text-white whitespace-pre-wrap">
+          {message.content}
+        </div>
+      </div>
+    );
+  }
   return (
-    <div className={`flex ${isUser ? "justify-end" : "justify-start"}`}>
-      <div
-        className={`max-w-[85%] rounded-2xl px-3 py-2 text-sm ${
-          isUser
-            ? "bg-accent-primary text-white whitespace-pre-wrap"
-            : "bg-bg-secondary text-text-primary"
-        }`}
-      >
-        {isUser ? message.content : <MarkdownContent text={message.content} />}
+    <div className="flex gap-3">
+      <AssistantAvatar />
+      <div className="max-w-[75%] rounded-2xl px-4 py-2.5 text-[15px] leading-relaxed bg-accent-primary/10 text-text-primary">
+        <MarkdownContent text={message.content} />
       </div>
     </div>
   );
diff --git a/app/components/chatbot/ChatbotTestPanel.tsx b/app/components/chatbot/ChatbotTestPanel.tsx
deleted file mode 100644
index 7adedb69..00000000
--- a/app/components/chatbot/ChatbotTestPanel.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-/**
- * ChatbotTestPanel - Chats with the saved flow's server-side session. Replies
- * arrive asynchronously via the webhook stream, so the panel only renders
- * state owned by useChatbotSession.
- */
-
-"use client";
-
-import { useEffect, useRef } from "react";
-import { Button } from "@/app/components/ui";
-import { RefreshIcon } from "@/app/components/icons";
-import { AssistantAvatar, ThinkingDots } from "@/app/components/chat";
-import ChatbotMessageBubble from "@/app/components/chatbot/ChatbotMessageBubble";
-import ChatbotChatInput from "@/app/components/chatbot/ChatbotChatInput";
-import { ChatbotStatusBadge } from "@/app/components/chatbot/ChatbotSessionInfo";
-import {
-  ChatbotChatMessage,
-  ChatbotCompletionStatus,
-  ChatbotSessionStatus,
-} from "@/app/lib/types/chatbot";
-
-interface ChatbotTestPanelProps {
-  hasSession: boolean;
-  sessionName: string | null;
-  status: ChatbotSessionStatus | null;
-  completionStatus: ChatbotCompletionStatus | null;
-  messages: ChatbotChatMessage[];
-  isPending: boolean;
-  isRestarting: boolean;
-  isDirty: boolean;
-  onSend: (message?: string) => Promise<boolean>;
-  onRestart: () => void;
-}
-
-function inputPlaceholder(isEnded: boolean, hasStarted: boolean): string {
-  if (isEnded) return "Session closed";
-  if (!hasStarted) return "Click Start chat to begin…";
-  return "Reply as the user…";
-}
-
-export default function ChatbotTestPanel({
-  hasSession,
-  sessionName,
-  status,
-  completionStatus,
-  messages,
-  isPending,
-  isRestarting,
-  isDirty,
-  onSend,
-  onRestart,
-}: ChatbotTestPanelProps) {
-  const bottomRef = useRef<HTMLDivElement>(null);
-  // Inactive = superseded by a newer session; a complete one still chats.
-  const isEnded = status === "inactive";
-  const hasStarted = messages.length > 0;
-
-  useEffect(() => {
-    bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
-  }, [messages.length, isPending]);
-
-  return (
-    <div className="flex flex-col flex-1 min-h-0">
-      <div className="px-4 py-3 border-b border-border flex items-center justify-between gap-2">
-        <div className="flex items-center gap-2 min-w-0">
-          <p className="text-sm font-semibold text-text-primary truncate">
-            {sessionName ? `Test: ${sessionName}` : "Test chat"}
-          </p>
-          <ChatbotStatusBadge
-            status={status}
-            completionStatus={completionStatus}
-          />
-        </div>
-        {hasSession && (
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon"
-            onClick={onRestart}
-            disabled={isRestarting || isPending}
-            title="Start a new session with the saved flow"
-            aria-label="Restart session"
-          >
-            <RefreshIcon className="w-4 h-4" />
-          </Button>
-        )}
-      </div>
-
-      {isDirty && (
-        <p className="px-4 py-2 text-xs bg-status-warning-bg text-status-warning-text border-b border-border">
-          You have unsaved changes. The chat uses the last saved flow. Save to
-          test your edits.
-        </p>
-      )}
-
-      <div className="flex-1 overflow-y-auto p-4 space-y-3">
-        {!hasSession ? (
-          <p className="h-full flex items-center justify-center text-center text-sm text-text-secondary px-6">
-            Pick a configuration, write a prompt and click Save to start a
-            chatbot session.
-          </p>
-        ) : (
-          messages.length === 0 &&
-          !isPending && (
-            <div className="h-full flex flex-col items-center justify-center text-center gap-3">
-              <p className="text-sm text-text-secondary max-w-[260px]">
-                The bot will send the first message.
-              </p>
-              <Button size="sm" onClick={() => onSend()}>
-                Start chat
-              </Button>
-            </div>
-          )
-        )}
-        {messages.map((m) => (
-          <ChatbotMessageBubble key={m.id} message={m} />
-        ))}
-        {isPending && (
-          <div className="flex gap-3" aria-label="Bot is typing">
-            <AssistantAvatar />
-            <div className="pt-1">
-              <ThinkingDots />
-            </div>
-          </div>
-        )}
-        {isEnded && (
-          <p className="text-xs text-center text-text-secondary">
-            This session was replaced by a newer one. Restart to continue
-            testing.
-          </p>
-        )}
-        <div ref={bottomRef} />
-      </div>
-
-      {hasSession && (
-        <ChatbotChatInput
-          disabled={isPending || isEnded || !hasStarted}
-          placeholder={inputPlaceholder(isEnded, hasStarted)}
-          onSend={onSend}
-        />
-      )}
-    </div>
-  );
-}
diff --git a/app/components/chatbot/index.ts b/app/components/chatbot/index.ts
index f4230108..c9b9fe2a 100644
--- a/app/components/chatbot/index.ts
+++ b/app/components/chatbot/index.ts
@@ -1,5 +1,7 @@
 export { default as ChatbotFlowCanvas } from "./ChatbotFlowCanvas";
-export { default as ChatbotTestPanel } from "./ChatbotTestPanel";
+export { default as ChatbotChatWindow } from "./ChatbotChatWindow";
+export { default as ChatbotBreadcrumb } from "./ChatbotBreadcrumb";
+export { ChatbotStatusBadge } from "./ChatbotSessionInfo";
 export { default as LlmNode } from "./LlmNode";
 export { default as TerminalNode } from "./TerminalNode";
 export { ChatbotFlowContext } from "./ChatbotFlowContext";
diff --git a/app/hooks/useChatbotSession.ts b/app/hooks/useChatbotSession.ts
index af776783..41bdc0e4 100644
--- a/app/hooks/useChatbotSession.ts
+++ b/app/hooks/useChatbotSession.ts
@@ -1,11 +1,14 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { useToast } from "@/app/hooks/useToast";
 import { useChatbotReplyStream } from "@/app/hooks/useChatbotReplyStream";
 import { useChatbotPendingReply } from "@/app/hooks/useChatbotPendingReply";
-import { useChatbotStore } from "@/app/lib/store/chatbot";
+import {
+  useChatbotStore,
+  useChatbotStoreHydration,
+} from "@/app/lib/store/chatbot";
 import {
   CHATBOT_REPLY_TIMEOUT_MS,
   DEFAULT_CHATBOT_NAME,
@@ -20,33 +23,42 @@ import {
   writeChatbotSessionCookie,
 } from "@/app/lib/utils/chatbotSessionCookie";
 import {
+  ChatbotChatMessage,
   ChatbotNodeData,
   ChatbotSessionEvent,
   ChatbotCompletionStatus,
   ChatbotSessionStatus,
 } from "@/app/lib/types/chatbot";
 
+// Backend 422 when the greeting is requested on a session that already has turns.
+const ALREADY_STARTED_RE = /required once the session has started/i;
+// Backend 409 once a newer session of the same chatbot superseded this one.
+const INACTIVE_RE = /session is inactive/i;
+
 /**
- * Owns the server-side chatbot session used by the test panel: creating it
- * on Save (id kept in a cookie), sending turns, and applying replies that
- * arrive asynchronously through the webhook stream.
+ * Owns the server-side chatbot session: creating it on Save (id kept in a
+ * cookie and the shared store), sending turns, and applying replies that
+ * arrive asynchronously through the webhook stream. The transcript is kept
+ * in this hook's state only. Pages that don't chat (the flow canvas) pass
+ * `listen: false` to skip opening the reply stream.
  */
-export function useChatbotSession() {
+export function useChatbotSession({
+  listen = true,
+}: { listen?: boolean } = {}) {
   const { activeKey, currentUser, isAuthenticated } = useAuth();
   const apiKey = activeKey?.key ?? "";
   const toast = useToast();
 
+  useChatbotStoreHydration();
   const hasHydrated = useChatbotStore((s) => s.hasHydrated);
-  const messages = useChatbotStore((s) => s.messages);
-  const bindSession = useChatbotStore((s) => s.bindSession);
-  const appendMessage = useChatbotStore((s) => s.appendMessage);
-  const removeMessage = useChatbotStore((s) => s.removeMessage);
-  const setLastEventSeq = useChatbotStore((s) => s.setLastEventSeq);
+  const sessionId = useChatbotStore((s) => s.sessionId);
+  const setSessionId = useChatbotStore((s) => s.setSessionId);
   const chatbotRef = useChatbotStore((s) => s.chatbotRef);
   const setChatbotRef = useChatbotStore((s) => s.setChatbotRef);
   const setSavedFlow = useChatbotStore((s) => s.setSavedFlow);
 
-  const [sessionId, setSessionId] = useState<string | null>(null);
+  const [messages, setMessages] = useState<ChatbotChatMessage[]>([]);
+  const lastEventSeqRef = useRef(0);
   const [sessionName, setSessionName] = useState<string | null>(null);
   const [status, setStatus] = useState<ChatbotSessionStatus | null>(null);
   const [completionStatus, setCompletionStatus] =
@@ -59,12 +71,18 @@ export function useChatbotSession() {
 
   const contactRef = currentUser?.id ? `kaapi-user-${currentUser.id}` : null;
 
-  const adoptSession = useCallback(
+  // A different session (new Save, another tab, restore) starts a new transcript.
+  useEffect(() => {
+    setMessages([]);
+    lastEventSeqRef.current = 0;
+  }, [sessionId]);
+
+  const activateSession = useCallback(
     (id: string) => {
+      writeChatbotSessionCookie(id);
       setSessionId(id);
-      bindSession(id);
     },
-    [bindSession],
+    [setSessionId],
   );
 
   // Restore the session from the cookie, falling back to the user's latest
@@ -74,16 +92,13 @@ export function useChatbotSession() {
   useEffect(() => {
     if (!hasHydrated || !isAuthenticated || !contactRef) return;
     const cookieId = readChatbotSessionCookie();
-    if (cookieId) adoptSession(cookieId);
+    if (cookieId) setSessionId(cookieId);
 
     let cancelled = false;
     getLatestChatbotSession(contactRef, chatbotRef, apiKey).then((summary) => {
       if (cancelled || !summary) return;
       if (cookieId && cookieId !== summary.session_id) return;
-      if (!cookieId) {
-        writeChatbotSessionCookie(summary.session_id);
-        adoptSession(summary.session_id);
-      }
+      if (!cookieId) activateSession(summary.session_id);
       const name = summary.name || DEFAULT_CHATBOT_NAME;
       setChatbotRef(summary.chatbot_ref);
       setSavedFlow({
@@ -108,45 +123,53 @@ export function useChatbotSession() {
     contactRef,
     chatbotRef,
     apiKey,
-    adoptSession,
+    activateSession,
+    setSessionId,
     setChatbotRef,
     setSavedFlow,
   ]);
 
   const handleEvent = useCallback(
     (event: ChatbotSessionEvent) => {
-      if (event.seq <= useChatbotStore.getState().lastEventSeq) return;
-      setLastEventSeq(event.seq);
+      if (event.seq <= lastEventSeqRef.current) return;
+      lastEventSeqRef.current = event.seq;
       clearPending();
       if (!event.success) {
         toast.error(event.error || "The chatbot couldn't reply.");
         return;
       }
-      if (event.reply) {
-        appendMessage({
-          id: crypto.randomUUID(),
-          role: "assistant",
-          content: event.reply,
-        });
+      const reply = event.reply;
+      if (reply) {
+        setMessages((prev) => [
+          ...prev,
+          { id: crypto.randomUUID(), role: "assistant", content: reply },
+        ]);
       }
       if (event.status) setStatus(event.status);
       if (event.completionStatus) setCompletionStatus(event.completionStatus);
     },
-    [appendMessage, clearPending, setLastEventSeq, toast],
+    [clearPending, toast],
   );
 
   useChatbotReplyStream(
-    hasHydrated ? sessionId : null,
-    () => useChatbotStore.getState().lastEventSeq,
+    hasHydrated && listen ? sessionId : null,
+    () => lastEventSeqRef.current,
     handleEvent,
   );
 
-  /** Creates a new session for the saved flow and makes it the active one. */
+  /**
+   * Creates a new session for the flow and makes it the active one.
+   * Resolves to the new session id, or null when creation failed.
+   * `keepPending` leaves the "bot is typing" state on while a turn is retried.
+   */
   const startSession = useCallback(
-    async (data: ChatbotNodeData): Promise<boolean> => {
+    async (
+      data: ChatbotNodeData,
+      { keepPending = false }: { keepPending?: boolean } = {},
+    ): Promise<string | null> => {
       if (!contactRef) {
         toast.error("Couldn't identify your account. Please log in again.");
-        return false;
+        return null;
       }
       const name = data.label.trim() || DEFAULT_CHATBOT_NAME;
       setIsCreating(true);
@@ -163,61 +186,102 @@ export function useChatbotSession() {
           },
           apiKey,
         );
-        writeChatbotSessionCookie(created.sessionId);
         setChatbotRef(created.chatbotRef);
-        clearPending();
-        adoptSession(created.sessionId);
+        if (!keepPending) clearPending();
+        activateSession(created.sessionId);
         setSessionName(name);
         setStatus("active");
         setCompletionStatus("in_progress");
-        return true;
+        return created.sessionId;
       } catch (err) {
         toast.error(
           err instanceof Error ? err.message : "Failed to save the flow.",
         );
-        return false;
+        return null;
       } finally {
         setIsCreating(false);
       }
     },
-    [adoptSession, apiKey, clearPending, contactRef, setChatbotRef, toast],
+    [
+      activateSession,
+      apiKey,
+      chatbotRef,
+      clearPending,
+      contactRef,
+      setChatbotRef,
+      toast,
+    ],
   );
 
-  /** Queues a turn; omit `message` to get the greeting on a fresh session. */
+  /**
+   * Queues one turn on `id`; on failure rolls back the optimistic message and
+   * rethrows. The pending state is left to the caller, which may retry.
+   */
+  const queueTurn = useCallback(
+    async (id: string, message?: string): Promise<void> => {
+      const optimisticId = message ? crypto.randomUUID() : null;
+      if (optimisticId && message) {
+        setMessages((prev) => [
+          ...prev,
+          { id: optimisticId, role: "user", content: message },
+        ]);
+      }
+      startPending();
+      try {
+        await sendChatbotSessionMessage(id, message, apiKey);
+      } catch (err) {
+        if (optimisticId) {
+          setMessages((prev) => prev.filter((m) => m.id !== optimisticId));
+        }
+        throw err;
+      }
+    },
+    [apiKey, startPending],
+  );
+
+  /**
+   * Sends a turn; omit `message` to get the greeting. "Start chat" always
+   * opens a conversation: if this session already has turns this tab never
+   * saw (e.g. after a reload), a fresh session of the saved flow is started.
+   */
   const send = useCallback(
     async (message?: string): Promise<boolean> => {
       if (!sessionId) {
         toast.error("Save the flow first to start a session.");
         return false;
       }
-      const optimisticId = message ? crypto.randomUUID() : null;
-      if (optimisticId && message) {
-        appendMessage({ id: optimisticId, role: "user", content: message });
+      const savedFlow = useChatbotStore.getState().savedFlow;
+      try {
+        await queueTurn(sessionId, message);
+        return true;
+      } catch (err) {
+        const errorMessage =
+          err instanceof Error ? err.message : "Failed to send the message.";
+        if (INACTIVE_RE.test(errorMessage)) setStatus("inactive");
+        if (message || !savedFlow || !ALREADY_STARTED_RE.test(errorMessage)) {
+          clearPending();
+          toast.error(errorMessage);
+          return false;
+        }
+      }
+      // Keep the typing dots up through the retry so "Start chat" doesn't flash.
+      const freshId = await startSession(savedFlow, { keepPending: true });
+      if (!freshId) {
+        clearPending();
+        return false;
       }
-      startPending();
-
       try {
-        await sendChatbotSessionMessage(sessionId, message, apiKey);
+        await queueTurn(freshId);
         return true;
       } catch (err) {
-        if (optimisticId) removeMessage(optimisticId);
         clearPending();
         toast.error(
-          err instanceof Error ? err.message : "Failed to send the message.",
+          err instanceof Error ? err.message : "Failed to start the chat.",
         );
         return false;
       }
     },
-    [
-      appendMessage,
-      apiKey,
-      chatbotRef,
-      clearPending,
-      removeMessage,
-      sessionId,
-      startPending,
-      toast,
-    ],
+    [clearPending, queueTurn, sessionId, startSession, toast],
   );
 
   return {
@@ -225,7 +289,7 @@ export function useChatbotSession() {
     sessionName,
     status,
     completionStatus,
-    messages: sessionId ? messages : [],
+    messages,
     isPending: pending.isPending,
     isCreating,
     startSession,
diff --git a/app/lib/store/chatbot.ts b/app/lib/store/chatbot.ts
index e5f39fcd..ab0466c5 100644
--- a/app/lib/store/chatbot.ts
+++ b/app/lib/store/chatbot.ts
@@ -1,28 +1,22 @@
 "use client";
 
+import { useEffect } from "react";
 import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
 import { STORAGE_KEYS } from "@/app/lib/constants";
-import { ChatbotChatMessage, ChatbotNodeData } from "@/app/lib/types/chatbot";
-
-const MAX_PERSISTED_MESSAGES = 100;
+import { ChatbotNodeData } from "@/app/lib/types/chatbot";
 
 interface ChatbotState {
   savedFlow: ChatbotNodeData | null;
   chatbotRef: string | null;
-  messagesSessionId: string | null;
-  messages: ChatbotChatMessage[];
-  lastEventSeq: number;
+  sessionId: string | null;
   hasHydrated: boolean;
 }
 
 interface ChatbotActions {
   setSavedFlow: (flow: ChatbotNodeData) => void;
   setChatbotRef: (ref: string) => void;
-  bindSession: (sessionId: string) => void;
-  appendMessage: (message: ChatbotChatMessage) => void;
-  removeMessage: (id: string) => void;
-  setLastEventSeq: (seq: number) => void;
+  setSessionId: (sessionId: string) => void;
   setHasHydrated: (value: boolean) => void;
   reset: () => void;
 }
@@ -30,12 +24,15 @@ interface ChatbotActions {
 const INITIAL_STATE: ChatbotState = {
   savedFlow: null,
   chatbotRef: null,
-  messagesSessionId: null,
-  messages: [],
-  lastEventSeq: 0,
+  sessionId: null,
   hasHydrated: false,
 };
 
+type PersistedChatbotState = Pick<
+  ChatbotState,
+  "savedFlow" | "chatbotRef" | "sessionId"
+>;
+
 export const useChatbotStore = create<ChatbotState & ChatbotActions>()(
   persist(
     (set) => ({
@@ -45,24 +42,7 @@ export const useChatbotStore = create<ChatbotState & ChatbotActions>()(
 
       setChatbotRef: (ref) => set({ chatbotRef: ref }),
 
-      bindSession: (sessionId) =>
-        set((state) =>
-          state.messagesSessionId === sessionId
-            ? state
-            : { messagesSessionId: sessionId, messages: [], lastEventSeq: 0 },
-        ),
-
-      appendMessage: (message) =>
-        set((state) => ({
-          messages: [...state.messages, message].slice(-MAX_PERSISTED_MESSAGES),
-        })),
-
-      removeMessage: (id) =>
-        set((state) => ({
-          messages: state.messages.filter((m) => m.id !== id),
-        })),
-
-      setLastEventSeq: (seq) => set({ lastEventSeq: seq }),
+      setSessionId: (sessionId) => set({ sessionId }),
 
       setHasHydrated: (value) => set({ hasHydrated: value }),
 
@@ -70,19 +50,45 @@ export const useChatbotStore = create<ChatbotState & ChatbotActions>()(
     }),
     {
       name: STORAGE_KEYS.CHATBOT_STATE,
-      version: 1,
+      version: 2,
       storage: createJSONStorage(() => localStorage),
       skipHydration: true,
-      partialize: (state) => ({
+      partialize: (state): PersistedChatbotState => ({
         savedFlow: state.savedFlow,
         chatbotRef: state.chatbotRef,
-        messagesSessionId: state.messagesSessionId,
-        messages: state.messages,
-        lastEventSeq: state.lastEventSeq,
+        sessionId: state.sessionId,
       }),
+      // v1 also stored the transcript; keep only the shared fields.
+      migrate: (persisted) => {
+        const old = (persisted ?? {}) as Partial<
+          PersistedChatbotState & { messagesSessionId: string | null }
+        >;
+        return {
+          savedFlow: old.savedFlow ?? null,
+          chatbotRef: old.chatbotRef ?? null,
+          sessionId: old.sessionId ?? old.messagesSessionId ?? null,
+        };
+      },
       onRehydrateStorage: () => (state) => {
         state?.setHasHydrated(true);
       },
     },
   ),
 );
+
+/**
+ * Loads the persisted chatbot state and keeps it in sync across tabs, so a
+ * chat tab follows a session created by Save on the canvas tab.
+ */
+export function useChatbotStoreHydration(): void {
+  useEffect(() => {
+    useChatbotStore.persist.rehydrate();
+    const onStorage = (e: StorageEvent) => {
+      if (e.key === STORAGE_KEYS.CHATBOT_STATE) {
+        useChatbotStore.persist.rehydrate();
+      }
+    };
+    window.addEventListener("storage", onStorage);
+    return () => window.removeEventListener("storage", onStorage);
+  }, []);
+}
diff --git a/app/lib/store/chatbotSessionStore.ts b/app/lib/store/chatbotSessionStore.ts
index 4b8fde94..77594db6 100644
--- a/app/lib/store/chatbotSessionStore.ts
+++ b/app/lib/store/chatbotSessionStore.ts
@@ -30,7 +30,6 @@ function prune(): void {
     const last = events[events.length - 1];
     if (!last || last.seq < cutoff) store.events.delete(sessionId);
   }
-  // Map keeps insertion order, so the first keys are the oldest sessions.
   for (const sessionId of store.events.keys()) {
     if (store.events.size <= MAX_SESSIONS) break;
     store.events.delete(sessionId);

From f998843062c472926e47fdbf309f1dd771f82f8b Mon Sep 17 00:00:00 2001
From: Ayush8923 <80516839+Ayush8923@users.noreply.github.com>
Date: Sat, 24 Oct 2026 14:29:20 +0530
Subject: [PATCH 05/12] fix: cleanups

---
 app/(main)/chatbot/chat/page.tsx              |  2 +-
 app/(main)/chatbot/page.tsx                   |  8 +--
 .../sessions/[session_id]/message/route.ts    |  4 --
 app/api/chatbot/sessions/route.ts             |  2 -
 app/api/webhooks/chatbot/route.ts             |  1 -
 app/api/webhooks/chatbot/stream/route.ts      | 20 ++-----
 app/components/chatbot/ChatbotFlowCanvas.tsx  | 10 +---
 app/components/chatbot/ChatbotFlowContext.tsx |  2 +-
 ...SessionInfo.tsx => ChatbotStatusBadge.tsx} |  3 +-
 app/components/chatbot/LlmNode.tsx            |  6 ---
 app/components/chatbot/TerminalNode.tsx       |  4 --
 app/components/chatbot/flowHandleStyle.ts     |  1 -
 app/components/chatbot/index.ts               |  5 +-
 app/hooks/{ => chatbot}/useChatbotFlow.ts     | 19 ++-----
 .../{ => chatbot}/useChatbotPendingReply.ts   |  4 --
 .../{ => chatbot}/useChatbotReplyStream.ts    | 19 ++-----
 app/hooks/{ => chatbot}/useChatbotSession.ts  | 53 +++++++------------
 app/lib/context/AuthContext.tsx               |  1 -
 app/lib/store/chatbot.ts                      | 11 ----
 app/lib/types/chatbot.ts                      |  1 -
 20 files changed, 39 insertions(+), 137 deletions(-)
 rename app/components/chatbot/{ChatbotSessionInfo.tsx => ChatbotStatusBadge.tsx} (92%)
 rename app/hooks/{ => chatbot}/useChatbotFlow.ts (89%)
 rename app/hooks/{ => chatbot}/useChatbotPendingReply.ts (86%)
 rename app/hooks/{ => chatbot}/useChatbotReplyStream.ts (56%)
 rename app/hooks/{ => chatbot}/useChatbotSession.ts (79%)

diff --git a/app/(main)/chatbot/chat/page.tsx b/app/(main)/chatbot/chat/page.tsx
index b6beaa7a..de3321a9 100644
--- a/app/(main)/chatbot/chat/page.tsx
+++ b/app/(main)/chatbot/chat/page.tsx
@@ -11,7 +11,7 @@ import {
 } from "@/app/components/chatbot";
 import { useApp } from "@/app/lib/context/AppContext";
 import { useToast } from "@/app/hooks/useToast";
-import { useChatbotSession } from "@/app/hooks/useChatbotSession";
+import { useChatbotSession } from "@/app/hooks/chatbot/useChatbotSession";
 import { useChatbotStore } from "@/app/lib/store/chatbot";
 
 export default function ChatbotChatPage() {
diff --git a/app/(main)/chatbot/page.tsx b/app/(main)/chatbot/page.tsx
index d0c9a3e7..ee3cc5e0 100644
--- a/app/(main)/chatbot/page.tsx
+++ b/app/(main)/chatbot/page.tsx
@@ -8,8 +8,8 @@ import { PlayIcon } from "@/app/components/icons";
 import { ChatbotFlowCanvas } from "@/app/components/chatbot";
 import { useApp } from "@/app/lib/context/AppContext";
 import { useToast } from "@/app/hooks/useToast";
-import { useChatbotFlow } from "@/app/hooks/useChatbotFlow";
-import { useChatbotSession } from "@/app/hooks/useChatbotSession";
+import { useChatbotFlow } from "@/app/hooks/chatbot/useChatbotFlow";
+import { useChatbotSession } from "@/app/hooks/chatbot/useChatbotSession";
 import { ChatbotNodeData } from "@/app/lib/types/chatbot";
 
 function validateFlow(data: ChatbotNodeData): string | null {
@@ -46,8 +46,6 @@ export default function ChatbotPage() {
     }
   };
 
-  // The chat runs on the saved session, so unsaved edits wouldn't be tested.
-  // It opens in a new tab so the canvas stays as it is.
   const handlePlay = () => {
     if (flow.isDirty) {
       toast.error("Save your changes before testing the chatbot.");
@@ -93,8 +91,6 @@ export default function ChatbotPage() {
               nodes={flow.nodes}
               edges={flow.edges}
               onNodesChange={flow.onNodesChange}
-              onEdgesChange={flow.onEdgesChange}
-              onConnect={flow.onConnect}
               updateNodeData={flow.updateNodeData}
             />
             <Button
diff --git a/app/api/chatbot/sessions/[session_id]/message/route.ts b/app/api/chatbot/sessions/[session_id]/message/route.ts
index 40aeb0fc..bc0d4b66 100644
--- a/app/api/chatbot/sessions/[session_id]/message/route.ts
+++ b/app/api/chatbot/sessions/[session_id]/message/route.ts
@@ -2,10 +2,6 @@ import { NextRequest, NextResponse } from "next/server";
 import { proxyErrorResponse, proxyJsonResponse } from "@/app/api/_routeProxy";
 import { buildWebhookCallbackUrl } from "@/app/lib/webhookCallback";
 
-/**
- * Queues one chatbot turn. The browser only sends `message`; the webhook URL
- * (with its secret) is added here so it never reaches the client.
- */
 export async function POST(
   request: NextRequest,
   { params }: { params: Promise<{ session_id: string }> },
diff --git a/app/api/chatbot/sessions/route.ts b/app/api/chatbot/sessions/route.ts
index 011cdcbe..4e46c4c1 100644
--- a/app/api/chatbot/sessions/route.ts
+++ b/app/api/chatbot/sessions/route.ts
@@ -5,7 +5,6 @@ import {
   withQueryParams,
 } from "@/app/api/_routeProxy";
 
-/** Creates a chatbot session (stores the prompt + config pin server-side). */
 export async function POST(request: NextRequest) {
   try {
     const body = await request.json();
@@ -18,7 +17,6 @@ export async function POST(request: NextRequest) {
   }
 }
 
-/** Latest session for a `contact_ref`. */
 export async function GET(request: NextRequest) {
   try {
     return await proxyJsonResponse(
diff --git a/app/api/webhooks/chatbot/route.ts b/app/api/webhooks/chatbot/route.ts
index e29e3d96..c8ea731c 100644
--- a/app/api/webhooks/chatbot/route.ts
+++ b/app/api/webhooks/chatbot/route.ts
@@ -17,7 +17,6 @@ function toSessionEvent(
     reply: data.reply ?? null,
     status: data.status ?? null,
     completionStatus: data.completion_status ?? null,
-    collectedFields: data.collected_fields ?? null,
     error: body.error ?? null,
   };
 }
diff --git a/app/api/webhooks/chatbot/stream/route.ts b/app/api/webhooks/chatbot/stream/route.ts
index e1618d94..d5a2b1ca 100644
--- a/app/api/webhooks/chatbot/stream/route.ts
+++ b/app/api/webhooks/chatbot/stream/route.ts
@@ -16,25 +16,16 @@ function parseSeq(value: string | null): number {
   return Number.isFinite(n) && n > 0 ? n : 0;
 }
 
-/**
- * SSE stream of webhook replies for one chatbot session. Each event carries
- * its `seq` as the SSE id, so a reconnecting EventSource resumes via
- * `Last-Event-ID`; `after` lets a fresh page load skip replies it already
- * has, and `after=latest` skips the whole backlog (a client with no local
- * transcript must not get old bot replies without the user turns between).
- */
 export async function GET(request: NextRequest) {
   const sessionId = request.nextUrl.searchParams.get("session_id");
   if (!sessionId) {
     return new Response("session_id_required", { status: 400 });
   }
-  const afterParam = request.nextUrl.searchParams.get("after");
-  const afterSeq = Math.max(
-    afterParam === "latest"
-      ? getLatestSessionSeq(sessionId)
-      : parseSeq(afterParam),
-    parseSeq(request.headers.get("last-event-id")),
-  );
+  // Reconnects resume after the last delivered reply; a fresh connection
+  // skips the backlog (old bot replies without the user turns around them).
+  const afterSeq =
+    parseSeq(request.headers.get("last-event-id")) ||
+    getLatestSessionSeq(sessionId);
 
   const encoder = new TextEncoder();
   const stream = new ReadableStream({
@@ -51,7 +42,6 @@ export async function GET(request: NextRequest) {
         }
       };
 
-      // Subscribe before replaying so nothing slips in between.
       const unsubscribe = subscribeSessionEvents(sessionId, push);
       getSessionEventsAfter(sessionId, afterSeq).forEach(push);
 
diff --git a/app/components/chatbot/ChatbotFlowCanvas.tsx b/app/components/chatbot/ChatbotFlowCanvas.tsx
index 7bbbea55..78a71895 100644
--- a/app/components/chatbot/ChatbotFlowCanvas.tsx
+++ b/app/components/chatbot/ChatbotFlowCanvas.tsx
@@ -4,10 +4,8 @@ import { useMemo } from "react";
 import {
   Background,
   BackgroundVariant,
-  Connection,
   Controls,
   Edge,
-  EdgeChange,
   NodeChange,
   ReactFlow,
 } from "@xyflow/react";
@@ -29,8 +27,6 @@ interface ChatbotFlowCanvasProps {
   nodes: ChatbotFlowNode[];
   edges: Edge[];
   onNodesChange: (changes: NodeChange<ChatbotFlowNode>[]) => void;
-  onEdgesChange: (changes: EdgeChange<Edge>[]) => void;
-  onConnect: (connection: Connection) => void;
   updateNodeData: (id: string, patch: Partial<ChatbotNodeData>) => void;
 }
 
@@ -38,8 +34,6 @@ export default function ChatbotFlowCanvas({
   nodes,
   edges,
   onNodesChange,
-  onEdgesChange,
-  onConnect,
   updateNodeData,
 }: ChatbotFlowCanvasProps) {
   const contextValue = useMemo(() => ({ updateNodeData }), [updateNodeData]);
@@ -52,8 +46,8 @@ export default function ChatbotFlowCanvas({
         nodeTypes={NODE_TYPES}
         defaultEdgeOptions={DEFAULT_EDGE_OPTIONS}
         onNodesChange={onNodesChange}
-        onEdgesChange={onEdgesChange}
-        onConnect={onConnect}
+        nodesConnectable={false}
+        edgesFocusable={false}
         fitView
         fitViewOptions={{ maxZoom: 1, padding: 0.2 }}
         proOptions={{ hideAttribution: true }}
diff --git a/app/components/chatbot/ChatbotFlowContext.tsx b/app/components/chatbot/ChatbotFlowContext.tsx
index 9e49716a..11d86021 100644
--- a/app/components/chatbot/ChatbotFlowContext.tsx
+++ b/app/components/chatbot/ChatbotFlowContext.tsx
@@ -11,7 +11,7 @@ export const ChatbotFlowContext = createContext<ChatbotFlowContextValue | null>(
   null,
 );
 
-/** Lets custom nodes edit their own data inline on the canvas. */
+/** custom nodes edit their own data inline on the canvas. */
 export function useChatbotFlowContext(): ChatbotFlowContextValue {
   const ctx = useContext(ChatbotFlowContext);
   if (!ctx) {
diff --git a/app/components/chatbot/ChatbotSessionInfo.tsx b/app/components/chatbot/ChatbotStatusBadge.tsx
similarity index 92%
rename from app/components/chatbot/ChatbotSessionInfo.tsx
rename to app/components/chatbot/ChatbotStatusBadge.tsx
index f2417c4c..89a80774 100644
--- a/app/components/chatbot/ChatbotSessionInfo.tsx
+++ b/app/components/chatbot/ChatbotStatusBadge.tsx
@@ -12,7 +12,6 @@ function badgeFor(
   completionStatus: ChatbotCompletionStatus | null,
 ): { label: string; className: string } | null {
   if (!status) return null;
-  // Inactive = superseded by a newer session of the same chatbot.
   if (status === "inactive") return { label: "Closed", className: NEUTRAL };
   switch (completionStatus) {
     case "complete":
@@ -26,7 +25,7 @@ function badgeFor(
   }
 }
 
-export function ChatbotStatusBadge({
+export default function ChatbotStatusBadge({
   status,
   completionStatus,
 }: {
diff --git a/app/components/chatbot/LlmNode.tsx b/app/components/chatbot/LlmNode.tsx
index 14d03202..8407e255 100644
--- a/app/components/chatbot/LlmNode.tsx
+++ b/app/components/chatbot/LlmNode.tsx
@@ -1,8 +1,3 @@
-/**
- * LlmNode - Editable LLM step on the chatbot canvas: config and prompt are
- * edited inline; Save turns them into a chatbot session.
- */
-
 "use client";
 
 import { Handle, NodeProps, Position } from "@xyflow/react";
@@ -23,7 +18,6 @@ export default function LlmNode({
   selected,
 }: NodeProps<ChatbotLlmNode>) {
   const { updateNodeData } = useChatbotFlowContext();
-  // Shown only once the backend has generated it on the first save.
   const chatbotRef = useChatbotStore((s) => s.chatbotRef);
   const update = (patch: Partial<ChatbotNodeData>) => updateNodeData(id, patch);
 
diff --git a/app/components/chatbot/TerminalNode.tsx b/app/components/chatbot/TerminalNode.tsx
index e6a95ba6..fac24cc8 100644
--- a/app/components/chatbot/TerminalNode.tsx
+++ b/app/components/chatbot/TerminalNode.tsx
@@ -1,7 +1,3 @@
-/**
- * TerminalNode - Fixed "Input" / "Output" pill marking where the flow starts and ends.
- */
-
 "use client";
 
 import { Handle, NodeProps, Position } from "@xyflow/react";
diff --git a/app/components/chatbot/flowHandleStyle.ts b/app/components/chatbot/flowHandleStyle.ts
index 19915593..b46c1ce4 100644
--- a/app/components/chatbot/flowHandleStyle.ts
+++ b/app/components/chatbot/flowHandleStyle.ts
@@ -1,6 +1,5 @@
 import type { CSSProperties } from "react";
 
-/** Solid dark dot used for every connection handle on the chatbot canvas. */
 export const FLOW_HANDLE_STYLE: CSSProperties = {
   width: 10,
   height: 10,
diff --git a/app/components/chatbot/index.ts b/app/components/chatbot/index.ts
index c9b9fe2a..2662695d 100644
--- a/app/components/chatbot/index.ts
+++ b/app/components/chatbot/index.ts
@@ -1,7 +1,4 @@
 export { default as ChatbotFlowCanvas } from "./ChatbotFlowCanvas";
 export { default as ChatbotChatWindow } from "./ChatbotChatWindow";
 export { default as ChatbotBreadcrumb } from "./ChatbotBreadcrumb";
-export { ChatbotStatusBadge } from "./ChatbotSessionInfo";
-export { default as LlmNode } from "./LlmNode";
-export { default as TerminalNode } from "./TerminalNode";
-export { ChatbotFlowContext } from "./ChatbotFlowContext";
+export { default as ChatbotStatusBadge } from "./ChatbotStatusBadge";
diff --git a/app/hooks/useChatbotFlow.ts b/app/hooks/chatbot/useChatbotFlow.ts
similarity index 89%
rename from app/hooks/useChatbotFlow.ts
rename to app/hooks/chatbot/useChatbotFlow.ts
index c1787598..b92d8145 100644
--- a/app/hooks/useChatbotFlow.ts
+++ b/app/hooks/chatbot/useChatbotFlow.ts
@@ -1,13 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useRef, useState } from "react";
-import {
-  addEdge,
-  Connection,
-  Edge,
-  useEdgesState,
-  useNodesState,
-} from "@xyflow/react";
+import { Edge, useNodesState } from "@xyflow/react";
 import { DEFAULT_CHATBOT_NAME } from "@/app/lib/constants";
 import { useChatbotStore } from "@/app/lib/store/chatbot";
 import {
@@ -18,7 +12,6 @@ import {
 
 const INPUT_ID = "input";
 const OUTPUT_ID = "output";
-// Fixed so server and client render the same id (avoids hydration mismatch).
 const LLM_ID = "LLMResponseWithPrompt-1";
 
 const DEFAULT_NODE_DATA: ChatbotNodeData = {
@@ -82,7 +75,8 @@ export function useChatbotFlow() {
   const [nodes, setNodes, onNodesChange] = useNodesState<ChatbotFlowNode>(
     initial.nodes,
   );
-  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>(initial.edges);
+  // The graph is fixed (Input → LLM → Output), so edges never change.
+  const edges = initial.edges;
 
   const savedFlow = useChatbotStore((s) => s.savedFlow);
   const hasHydrated = useChatbotStore((s) => s.hasHydrated);
@@ -112,11 +106,6 @@ export function useChatbotFlow() {
     if (untouched) replaceNodeData(savedFlow);
   }, [hasHydrated, savedFlow, replaceNodeData]);
 
-  const onConnect = useCallback(
-    (connection: Connection) => setEdges((eds) => addEdge(connection, eds)),
-    [setEdges],
-  );
-
   const updateNodeData = useCallback(
     (id: string, patch: Partial<ChatbotNodeData>) => {
       setNodes((prev) =>
@@ -144,8 +133,6 @@ export function useChatbotFlow() {
     nodes,
     edges,
     onNodesChange,
-    onEdgesChange,
-    onConnect,
     updateNodeData,
     llmNode,
     isDirty,
diff --git a/app/hooks/useChatbotPendingReply.ts b/app/hooks/chatbot/useChatbotPendingReply.ts
similarity index 86%
rename from app/hooks/useChatbotPendingReply.ts
rename to app/hooks/chatbot/useChatbotPendingReply.ts
index fba4fdf3..078bc355 100644
--- a/app/hooks/useChatbotPendingReply.ts
+++ b/app/hooks/chatbot/useChatbotPendingReply.ts
@@ -2,10 +2,6 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 
-/**
- * Tracks "waiting for the bot's reply" for webhook-delivered turns, giving up
- * after `timeoutMs` so the UI never spins forever.
- */
 export function useChatbotPendingReply(
   timeoutMs: number,
   onTimeout: () => void,
diff --git a/app/hooks/useChatbotReplyStream.ts b/app/hooks/chatbot/useChatbotReplyStream.ts
similarity index 56%
rename from app/hooks/useChatbotReplyStream.ts
rename to app/hooks/chatbot/useChatbotReplyStream.ts
index fc27b4a3..2d00391a 100644
--- a/app/hooks/useChatbotReplyStream.ts
+++ b/app/hooks/chatbot/useChatbotReplyStream.ts
@@ -5,32 +5,23 @@ import { ChatbotSessionEvent } from "@/app/lib/types/chatbot";
 
 /**
  * Keeps an SSE connection to the webhook stream for one chatbot session and
- * calls `onEvent` for every reply Kaapi delivers. EventSource reconnects on
- * its own and resumes via `Last-Event-ID`; `getAfterSeq` skips replies the
- * page already applied before a reload.
+ * calls `onEvent` for every reply Kaapi delivers. A new connection only gets
+ * replies from then on; EventSource reconnects on its own and resumes via
+ * `Last-Event-ID`.
  */
 export function useChatbotReplyStream(
   sessionId: string | null,
-  getAfterSeq: () => number,
   onEvent: (event: ChatbotSessionEvent) => void,
 ) {
-  // Latest callbacks without reopening the stream on every render.
+  // Latest callback without reopening the stream on every render.
   const onEventRef = useRef(onEvent);
-  const getAfterSeqRef = useRef(getAfterSeq);
   useEffect(() => {
     onEventRef.current = onEvent;
-    getAfterSeqRef.current = getAfterSeq;
   });
 
   useEffect(() => {
     if (!sessionId || typeof EventSource === "undefined") return;
-    // 0 = nothing applied yet for this session: take only new replies,
-    // never a backlog of bot messages without the user turns around them.
-    const afterSeq = getAfterSeqRef.current();
-    const params = new URLSearchParams({
-      session_id: sessionId,
-      after: afterSeq > 0 ? String(afterSeq) : "latest",
-    });
+    const params = new URLSearchParams({ session_id: sessionId });
     const source = new EventSource(`/api/webhooks/chatbot/stream?${params}`);
     source.addEventListener("reply", (e) => {
       try {
diff --git a/app/hooks/useChatbotSession.ts b/app/hooks/chatbot/useChatbotSession.ts
similarity index 79%
rename from app/hooks/useChatbotSession.ts
rename to app/hooks/chatbot/useChatbotSession.ts
index 41bdc0e4..b1f60f78 100644
--- a/app/hooks/useChatbotSession.ts
+++ b/app/hooks/chatbot/useChatbotSession.ts
@@ -3,8 +3,8 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { useToast } from "@/app/hooks/useToast";
-import { useChatbotReplyStream } from "@/app/hooks/useChatbotReplyStream";
-import { useChatbotPendingReply } from "@/app/hooks/useChatbotPendingReply";
+import { useChatbotReplyStream } from "@/app/hooks/chatbot/useChatbotReplyStream";
+import { useChatbotPendingReply } from "@/app/hooks/chatbot/useChatbotPendingReply";
 import {
   useChatbotStore,
   useChatbotStoreHydration,
@@ -30,17 +30,14 @@ import {
   ChatbotSessionStatus,
 } from "@/app/lib/types/chatbot";
 
-// Backend 422 when the greeting is requested on a session that already has turns.
+// Backend error: greeting asked on a session that already started.
 const ALREADY_STARTED_RE = /required once the session has started/i;
-// Backend 409 once a newer session of the same chatbot superseded this one.
+// Backend error: session was replaced by a newer one.
 const INACTIVE_RE = /session is inactive/i;
 
 /**
- * Owns the server-side chatbot session: creating it on Save (id kept in a
- * cookie and the shared store), sending turns, and applying replies that
- * arrive asynchronously through the webhook stream. The transcript is kept
- * in this hook's state only. Pages that don't chat (the flow canvas) pass
- * `listen: false` to skip opening the reply stream.
+ * Manages the chatbot session: create it, send messages, show bot replies.
+ * Pass `listen: false` on pages that don't chat (e.g. the canvas).
  */
 export function useChatbotSession({
   listen = true,
@@ -71,7 +68,7 @@ export function useChatbotSession({
 
   const contactRef = currentUser?.id ? `kaapi-user-${currentUser.id}` : null;
 
-  // A different session (new Save, another tab, restore) starts a new transcript.
+  // New session = fresh chat.
   useEffect(() => {
     setMessages([]);
     lastEventSeqRef.current = 0;
@@ -85,10 +82,7 @@ export function useChatbotSession({
     [setSessionId],
   );
 
-  // Restore the session from the cookie, falling back to the user's latest
-  // session; when found, its name/config/prompt become the saved flow and its
-  // backend-issued chatbot ref is stored for later calls. The ref is sent
-  // only if we have it.
+  // On load: pick up the last session (cookie, else backend) and fill the flow from it.
   useEffect(() => {
     if (!hasHydrated || !isAuthenticated || !contactRef) return;
     const cookieId = readChatbotSessionCookie();
@@ -129,9 +123,10 @@ export function useChatbotSession({
     setSavedFlow,
   ]);
 
+  // Bot reply arrived (via webhook stream).
   const handleEvent = useCallback(
     (event: ChatbotSessionEvent) => {
-      if (event.seq <= lastEventSeqRef.current) return;
+      if (event.seq <= lastEventSeqRef.current) return; // already shown
       lastEventSeqRef.current = event.seq;
       clearPending();
       if (!event.success) {
@@ -151,17 +146,9 @@ export function useChatbotSession({
     [clearPending, toast],
   );
 
-  useChatbotReplyStream(
-    hasHydrated && listen ? sessionId : null,
-    () => lastEventSeqRef.current,
-    handleEvent,
-  );
+  useChatbotReplyStream(hasHydrated && listen ? sessionId : null, handleEvent);
 
-  /**
-   * Creates a new session for the flow and makes it the active one.
-   * Resolves to the new session id, or null when creation failed.
-   * `keepPending` leaves the "bot is typing" state on while a turn is retried.
-   */
+  /** Creates a new session and makes it active. Returns its id, or null on failure. */
   const startSession = useCallback(
     async (
       data: ChatbotNodeData,
@@ -177,7 +164,7 @@ export function useChatbotSession({
         const created = await createChatbotSession(
           {
             name,
-            // Backend issues the ref on the first save; resend it afterwards.
+            // Empty on first save; backend creates it.
             chatbot_ref: chatbotRef ?? undefined,
             config_id: data.configId,
             config_version: data.configVersion,
@@ -187,7 +174,7 @@ export function useChatbotSession({
           apiKey,
         );
         setChatbotRef(created.chatbotRef);
-        if (!keepPending) clearPending();
+        if (!keepPending) clearPending(); // keepPending: keep typing dots during a retry
         activateSession(created.sessionId);
         setSessionName(name);
         setStatus("active");
@@ -213,10 +200,7 @@ export function useChatbotSession({
     ],
   );
 
-  /**
-   * Queues one turn on `id`; on failure rolls back the optimistic message and
-   * rethrows. The pending state is left to the caller, which may retry.
-   */
+  /** Sends one message (shown right away); removes it again if sending fails. */
   const queueTurn = useCallback(
     async (id: string, message?: string): Promise<void> => {
       const optimisticId = message ? crypto.randomUUID() : null;
@@ -240,9 +224,8 @@ export function useChatbotSession({
   );
 
   /**
-   * Sends a turn; omit `message` to get the greeting. "Start chat" always
-   * opens a conversation: if this session already has turns this tab never
-   * saw (e.g. after a reload), a fresh session of the saved flow is started.
+   * Sends a user message, or no message to get the bot's greeting.
+   * If the session already started elsewhere, starts a fresh one instead.
    */
   const send = useCallback(
     async (message?: string): Promise<boolean> => {
@@ -264,7 +247,7 @@ export function useChatbotSession({
           return false;
         }
       }
-      // Keep the typing dots up through the retry so "Start chat" doesn't flash.
+      // Retry on a fresh session (typing dots stay on, so no flicker).
       const freshId = await startSession(savedFlow, { keepPending: true });
       if (!freshId) {
         clearPending();
diff --git a/app/lib/context/AuthContext.tsx b/app/lib/context/AuthContext.tsx
index 2d944192..1e21a291 100644
--- a/app/lib/context/AuthContext.tsx
+++ b/app/lib/context/AuthContext.tsx
@@ -147,7 +147,6 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     setCurrentUser(null);
     clearAllStorage();
     useChatStore.getState().reset();
-    // Chatbot session + transcript belong to this user; never leak them to the next login.
     useChatbotStore.getState().reset();
     clearChatbotSessionCookie();
     setApiKeys([]);
diff --git a/app/lib/store/chatbot.ts b/app/lib/store/chatbot.ts
index ab0466c5..ee5fb72a 100644
--- a/app/lib/store/chatbot.ts
+++ b/app/lib/store/chatbot.ts
@@ -58,17 +58,6 @@ export const useChatbotStore = create<ChatbotState & ChatbotActions>()(
         chatbotRef: state.chatbotRef,
         sessionId: state.sessionId,
       }),
-      // v1 also stored the transcript; keep only the shared fields.
-      migrate: (persisted) => {
-        const old = (persisted ?? {}) as Partial<
-          PersistedChatbotState & { messagesSessionId: string | null }
-        >;
-        return {
-          savedFlow: old.savedFlow ?? null,
-          chatbotRef: old.chatbotRef ?? null,
-          sessionId: old.sessionId ?? old.messagesSessionId ?? null,
-        };
-      },
       onRehydrateStorage: () => (state) => {
         state?.setHasHydrated(true);
       },
diff --git a/app/lib/types/chatbot.ts b/app/lib/types/chatbot.ts
index dc07dca7..2448be29 100644
--- a/app/lib/types/chatbot.ts
+++ b/app/lib/types/chatbot.ts
@@ -94,7 +94,6 @@ export interface ChatbotSessionEvent {
   reply: string | null;
   status: ChatbotSessionStatus | null;
   completionStatus: ChatbotCompletionStatus | null;
-  collectedFields: ChatbotCollectedFields | null;
   error: string | null;
 }
 

From d89675bb960eb99826276501245b21a50efb7e35 Mon Sep 17 00:00:00 2001
From: Ayush8923 <80516839+Ayush8923@users.noreply.github.com>
Date: Sat, 24 Oct 2026 15:15:41 +0530
Subject: [PATCH 06/12] fix: few more updates and clenaups

---
 app/(main)/chatbot/page.tsx            |  1 -
 app/hooks/chatbot/useChatbotSession.ts |  3 ---
 app/lib/chatbotClient.ts               | 13 -----------
 app/lib/types/chatbot.ts               |  4 ----
 app/lib/utils/chatbotSessionCookie.ts  |  1 -
 app/lib/webhookCallback.ts             | 30 +++++++++++++-------------
 6 files changed, 15 insertions(+), 37 deletions(-)

diff --git a/app/(main)/chatbot/page.tsx b/app/(main)/chatbot/page.tsx
index ee3cc5e0..bedc98a4 100644
--- a/app/(main)/chatbot/page.tsx
+++ b/app/(main)/chatbot/page.tsx
@@ -22,7 +22,6 @@ export default function ChatbotPage() {
   const { sidebarCollapsed } = useApp();
   const toast = useToast();
   const flow = useChatbotFlow();
-  // The canvas only creates sessions; chatting happens on /chatbot/chat.
   const session = useChatbotSession({ listen: false });
 
   const createSessionFor = useCallback(
diff --git a/app/hooks/chatbot/useChatbotSession.ts b/app/hooks/chatbot/useChatbotSession.ts
index b1f60f78..666ebbb8 100644
--- a/app/hooks/chatbot/useChatbotSession.ts
+++ b/app/hooks/chatbot/useChatbotSession.ts
@@ -30,9 +30,7 @@ import {
   ChatbotSessionStatus,
 } from "@/app/lib/types/chatbot";
 
-// Backend error: greeting asked on a session that already started.
 const ALREADY_STARTED_RE = /required once the session has started/i;
-// Backend error: session was replaced by a newer one.
 const INACTIVE_RE = /session is inactive/i;
 
 /**
@@ -164,7 +162,6 @@ export function useChatbotSession({
         const created = await createChatbotSession(
           {
             name,
-            // Empty on first save; backend creates it.
             chatbot_ref: chatbotRef ?? undefined,
             config_id: data.configId,
             config_version: data.configVersion,
diff --git a/app/lib/chatbotClient.ts b/app/lib/chatbotClient.ts
index 5edb2f11..f1c2a4fe 100644
--- a/app/lib/chatbotClient.ts
+++ b/app/lib/chatbotClient.ts
@@ -7,10 +7,6 @@ import {
   SendChatbotSessionMessageResponse,
 } from "@/app/lib/types/chatbot";
 
-/**
- * Stores the prompt + config pin server-side. Returns the new session id and
- * the chatbot ref (generated by the backend on a chatbot's first session).
- */
 export async function createChatbotSession(
   body: CreateChatbotSessionRequest,
   apiKey: string,
@@ -29,11 +25,6 @@ export async function createChatbotSession(
   };
 }
 
-/**
- * Latest session for the contact, or null when there is none. Without a
- * `chatbotRef` the backend picks the contact's latest session and its
- * response carries the ref to reuse from then on.
- */
 export async function getLatestChatbotSession(
   contactRef: string,
   chatbotRef: string | null,
@@ -53,10 +44,6 @@ export async function getLatestChatbotSession(
   }
 }
 
-/**
- * Queues one turn; the reply arrives later through the webhook stream.
- * Omit `message` on a fresh session to get the bot's greeting.
- */
 export async function sendChatbotSessionMessage(
   sessionId: string,
   message: string | undefined,
diff --git a/app/lib/types/chatbot.ts b/app/lib/types/chatbot.ts
index 2448be29..91bf0424 100644
--- a/app/lib/types/chatbot.ts
+++ b/app/lib/types/chatbot.ts
@@ -18,7 +18,6 @@ export type ChatbotFlowNode = ChatbotLlmNode | ChatbotTerminalNode;
 
 export type ChatbotSessionStatus = "active" | "inactive";
 
-/** `complete` once every field the system prompt asks for is collected. */
 export type ChatbotCompletionStatus = "in_progress" | "complete" | "abandoned";
 
 export type ChatbotCollectedFields = Record<string, unknown>;
@@ -31,7 +30,6 @@ export interface ChatbotChatMessage {
 
 export interface CreateChatbotSessionRequest {
   name: string;
-  /** Omit for a new chatbot (backend generates one); resend it for the same chatbot. */
   chatbot_ref?: string;
   config_id: string;
   config_version?: number;
@@ -72,12 +70,10 @@ export interface SendChatbotSessionMessageResponse {
   error?: string | null;
 }
 
-/** Body Kaapi POSTs to our webhook once a session turn completes. */
 export interface ChatbotWebhookPayload {
   success: boolean;
   data?: {
     session_id: string;
-    /** Present on success payloads only. */
     chatbot_ref?: string;
     reply?: string;
     status?: ChatbotSessionStatus;
diff --git a/app/lib/utils/chatbotSessionCookie.ts b/app/lib/utils/chatbotSessionCookie.ts
index 631cd77a..33d46670 100644
--- a/app/lib/utils/chatbotSessionCookie.ts
+++ b/app/lib/utils/chatbotSessionCookie.ts
@@ -1,7 +1,6 @@
 import { AUTH_COOKIE_MAX_AGE, COOKIE_KEYS } from "@/app/lib/constants";
 import { readClientCookie } from "@/app/lib/utils";
 
-/** Session id of the last saved chatbot flow, kept in a cookie. */
 export function readChatbotSessionCookie(): string | null {
   return readClientCookie(COOKIE_KEYS.CHATBOT_SESSION) || null;
 }
diff --git a/app/lib/webhookCallback.ts b/app/lib/webhookCallback.ts
index e6e0c822..9d171818 100644
--- a/app/lib/webhookCallback.ts
+++ b/app/lib/webhookCallback.ts
@@ -3,11 +3,20 @@ import "server-only";
 import type { NextRequest } from "next/server";
 import { readWebhookSecret } from "@/app/lib/webhookSecret";
 
-/**
- * Builds the public HTTPS URL the backend should POST async results to.
- * The shared secret rides along as `secret_value` so the receiving route
- * can reject forged deliveries.
- */
+function getAppBaseUrl(request: NextRequest): string {
+  const configured = process.env.NEXT_PUBLIC_APP_URL ?? process.env.APP_URL;
+  if (configured) {
+    return configured.replace(/\/$/, "");
+  }
+
+  const protocol = request.headers.get("x-forwarded-proto") ?? "https";
+  const host =
+    request.headers.get("x-forwarded-host") ??
+    request.headers.get("host") ??
+    request.nextUrl.host;
+  return `${protocol}://${host}`;
+}
+
 export function buildWebhookCallbackUrl(
   request: NextRequest,
   path: string,
@@ -16,19 +25,10 @@ export function buildWebhookCallbackUrl(
   if (!secretResult.ok || !secretResult.secret) {
     throw new Error(secretResult.reason ?? "webhook_secret_missing");
   }
-  const configured =
-    process.env.NEXT_PUBLIC_APP_URL ?? process.env.APP_URL ?? null;
-  const base = configured
-    ? configured.replace(/\/$/, "")
-    : `${request.headers.get("x-forwarded-proto") ?? "https"}://${
-        request.headers.get("x-forwarded-host") ??
-        request.headers.get("host") ??
-        request.nextUrl.host
-      }`;
+  const base = getAppBaseUrl(request);
   return `${base}${path}?secret_value=${encodeURIComponent(secretResult.secret)}`;
 }
 
-/** True when the incoming webhook carries our shared secret. */
 export function isWebhookAuthorized(request: NextRequest): boolean {
   const secretResult = readWebhookSecret();
   if (!secretResult.ok || !secretResult.secret) return false;

From 60ffa8bcdd0ded43be6c445d2689c55d718ae83b Mon Sep 17 00:00:00 2001
From: Ayush8923 <80516839+Ayush8923@users.noreply.github.com>
Date: Sat, 24 Oct 2026 15:29:35 +0530
Subject: [PATCH 07/12] fix: cleanups

---
 app/api/webhooks/chatbot/route.ts          | 1 -
 app/hooks/chatbot/useChatbotReplyStream.ts | 1 -
 app/hooks/chatbot/useChatbotSession.ts     | 4 +---
 app/lib/store/chatbotSessionStore.ts       | 1 -
 4 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/app/api/webhooks/chatbot/route.ts b/app/api/webhooks/chatbot/route.ts
index c8ea731c..ebecb3aa 100644
--- a/app/api/webhooks/chatbot/route.ts
+++ b/app/api/webhooks/chatbot/route.ts
@@ -21,7 +21,6 @@ function toSessionEvent(
   };
 }
 
-/** Receives a completed chatbot turn from Kaapi and hands it to open streams. */
 export async function POST(request: NextRequest) {
   try {
     if (!isWebhookAuthorized(request)) {
diff --git a/app/hooks/chatbot/useChatbotReplyStream.ts b/app/hooks/chatbot/useChatbotReplyStream.ts
index 2d00391a..a69ed06e 100644
--- a/app/hooks/chatbot/useChatbotReplyStream.ts
+++ b/app/hooks/chatbot/useChatbotReplyStream.ts
@@ -13,7 +13,6 @@ export function useChatbotReplyStream(
   sessionId: string | null,
   onEvent: (event: ChatbotSessionEvent) => void,
 ) {
-  // Latest callback without reopening the stream on every render.
   const onEventRef = useRef(onEvent);
   useEffect(() => {
     onEventRef.current = onEvent;
diff --git a/app/hooks/chatbot/useChatbotSession.ts b/app/hooks/chatbot/useChatbotSession.ts
index 666ebbb8..af63360e 100644
--- a/app/hooks/chatbot/useChatbotSession.ts
+++ b/app/hooks/chatbot/useChatbotSession.ts
@@ -121,10 +121,9 @@ export function useChatbotSession({
     setSavedFlow,
   ]);
 
-  // Bot reply arrived (via webhook stream).
   const handleEvent = useCallback(
     (event: ChatbotSessionEvent) => {
-      if (event.seq <= lastEventSeqRef.current) return; // already shown
+      if (event.seq <= lastEventSeqRef.current) return;
       lastEventSeqRef.current = event.seq;
       clearPending();
       if (!event.success) {
@@ -146,7 +145,6 @@ export function useChatbotSession({
 
   useChatbotReplyStream(hasHydrated && listen ? sessionId : null, handleEvent);
 
-  /** Creates a new session and makes it active. Returns its id, or null on failure. */
   const startSession = useCallback(
     async (
       data: ChatbotNodeData,
diff --git a/app/lib/store/chatbotSessionStore.ts b/app/lib/store/chatbotSessionStore.ts
index 77594db6..371ab3fd 100644
--- a/app/lib/store/chatbotSessionStore.ts
+++ b/app/lib/store/chatbotSessionStore.ts
@@ -67,7 +67,6 @@ export function getLatestSessionSeq(sessionId: string): number {
   return events?.[events.length - 1]?.seq ?? 0;
 }
 
-/** Events newer than `afterSeq`, oldest first. */
 export function getSessionEventsAfter(
   sessionId: string,
   afterSeq: number,

From f7f808d1a5ff95b0815e1936e9b9934510481314 Mon Sep 17 00:00:00 2001
From: Ayush8923 <80516839+Ayush8923@users.noreply.github.com>
Date: Thu, 29 Oct 2026 12:28:44 +0530
Subject: [PATCH 08/12] fix: refactoring

---
 app/api/_sse.ts                            | 49 +++++++++++
 app/api/webhooks/chatbot/route.ts          | 24 ++----
 app/api/webhooks/chatbot/stream/route.ts   | 75 +++--------------
 app/hooks/chatbot/useChatbotReplyStream.ts | 27 +++---
 app/hooks/chatbot/useChatbotSession.ts     |  6 +-
 app/lib/eventStream.ts                     | 17 ++++
 app/lib/store/chatbotSessionStore.ts       | 96 +---------------------
 app/lib/store/eventChannel.ts              | 54 ++++++++++++
 app/lib/types/chatbot.ts                   | 10 ---
 app/lib/types/eventChannel.ts              | 13 +++
 10 files changed, 172 insertions(+), 199 deletions(-)
 create mode 100644 app/api/_sse.ts
 create mode 100644 app/lib/eventStream.ts
 create mode 100644 app/lib/store/eventChannel.ts
 create mode 100644 app/lib/types/eventChannel.ts

diff --git a/app/api/_sse.ts b/app/api/_sse.ts
new file mode 100644
index 00000000..ffe30353
--- /dev/null
+++ b/app/api/_sse.ts
@@ -0,0 +1,49 @@
+import "server-only";
+
+export type SseSend = (event: string, data: unknown, id: number) => void;
+
+const PING_EVERY_MS = 20_000;
+
+const SSE_HEADERS = {
+  "Content-Type": "text/event-stream; charset=utf-8",
+  "Cache-Control": "no-cache, no-transform",
+  Connection: "keep-alive",
+  "X-Accel-Buffering": "no",
+};
+
+/**
+ * Opens a long-lived SSE response. `subscribe` starts sending messages and
+ * returns a cleanup, which runs when the browser disconnects.
+ */
+export function createSseResponse(
+  request: Request,
+  subscribe: (send: SseSend) => () => void,
+): Response {
+  const encoder = new TextEncoder();
+
+  const stream = new ReadableStream({
+    start(controller) {
+      const write = (text: string) => {
+        try {
+          controller.enqueue(encoder.encode(text));
+        } catch {
+          // Stream already closed.
+        }
+      };
+
+      const unsubscribe = subscribe((event, data, id) =>
+        write(`id: ${id}\nevent: ${event}\ndata: ${JSON.stringify(data)}\n\n`),
+      );
+      const ping = setInterval(() => write(": ping\n\n"), PING_EVERY_MS);
+
+      request.signal.addEventListener("abort", () => {
+        clearInterval(ping);
+        unsubscribe();
+      });
+    },
+  });
+
+  return new Response(stream, {
+    headers: SSE_HEADERS,
+  });
+}
diff --git a/app/api/webhooks/chatbot/route.ts b/app/api/webhooks/chatbot/route.ts
index ebecb3aa..686ed99b 100644
--- a/app/api/webhooks/chatbot/route.ts
+++ b/app/api/webhooks/chatbot/route.ts
@@ -1,22 +1,17 @@
 import { NextRequest, NextResponse } from "next/server";
-import { saveSessionEvent } from "@/app/lib/store/chatbotSessionStore";
+import { chatbotReplyChannel } from "@/app/lib/store/chatbotSessionStore";
 import { isWebhookAuthorized } from "@/app/lib/webhookCallback";
 import type {
   ChatbotSessionEvent,
   ChatbotWebhookPayload,
 } from "@/app/lib/types/chatbot";
 
-function toSessionEvent(
-  body: ChatbotWebhookPayload,
-): Omit<ChatbotSessionEvent, "seq"> | null {
-  const data = body.data;
-  if (!data?.session_id) return null;
+function toSessionEvent(body: ChatbotWebhookPayload): ChatbotSessionEvent {
   return {
-    sessionId: data.session_id,
     success: body.success === true,
-    reply: data.reply ?? null,
-    status: data.status ?? null,
-    completionStatus: data.completion_status ?? null,
+    reply: body.data?.reply ?? null,
+    status: body.data?.status ?? null,
+    completionStatus: body.data?.completion_status ?? null,
     error: body.error ?? null,
   };
 }
@@ -29,16 +24,15 @@ export async function POST(request: NextRequest) {
         { status: 401 },
       );
     }
-    const event = toSessionEvent(
-      (await request.json()) as ChatbotWebhookPayload,
-    );
-    if (!event) {
+    const body = (await request.json()) as ChatbotWebhookPayload;
+    const sessionId = body.data?.session_id;
+    if (!sessionId) {
       return NextResponse.json(
         { success: false, error: "invalid_payload" },
         { status: 400 },
       );
     }
-    saveSessionEvent(event);
+    chatbotReplyChannel.publish(sessionId, toSessionEvent(body));
     return NextResponse.json({ success: true, data: { received: true } });
   } catch (error) {
     console.error("chatbot webhook error:", error);
diff --git a/app/api/webhooks/chatbot/stream/route.ts b/app/api/webhooks/chatbot/stream/route.ts
index d5a2b1ca..9d5774b0 100644
--- a/app/api/webhooks/chatbot/stream/route.ts
+++ b/app/api/webhooks/chatbot/stream/route.ts
@@ -1,78 +1,29 @@
 import { NextRequest } from "next/server";
-import {
-  getLatestSessionSeq,
-  getSessionEventsAfter,
-  subscribeSessionEvents,
-} from "@/app/lib/store/chatbotSessionStore";
+import { createSseResponse } from "@/app/api/_sse";
+import { chatbotReplyChannel } from "@/app/lib/store/chatbotSessionStore";
+import type { ChannelEvent } from "@/app/lib/types/eventChannel";
 import type { ChatbotSessionEvent } from "@/app/lib/types/chatbot";
 
 export const runtime = "nodejs";
 export const dynamic = "force-dynamic";
 
-const HEARTBEAT_MS = 20_000;
-
-function parseSeq(value: string | null): number {
-  const n = Number(value);
-  return Number.isFinite(n) && n > 0 ? n : 0;
-}
-
 export async function GET(request: NextRequest) {
   const sessionId = request.nextUrl.searchParams.get("session_id");
   if (!sessionId) {
     return new Response("session_id_required", { status: 400 });
   }
-  // Reconnects resume after the last delivered reply; a fresh connection
-  // skips the backlog (old bot replies without the user turns around them).
-  const afterSeq =
-    parseSeq(request.headers.get("last-event-id")) ||
-    getLatestSessionSeq(sessionId);
-
-  const encoder = new TextEncoder();
-  const stream = new ReadableStream({
-    start(controller) {
-      const push = (event: ChatbotSessionEvent) => {
-        try {
-          controller.enqueue(
-            encoder.encode(
-              `id: ${event.seq}\nevent: reply\ndata: ${JSON.stringify(event)}\n\n`,
-            ),
-          );
-        } catch {
-          // stream closed
-        }
-      };
 
-      const unsubscribe = subscribeSessionEvents(sessionId, push);
-      getSessionEventsAfter(sessionId, afterSeq).forEach(push);
+  return createSseResponse(request, (send) => {
+    const sendReply = ({ seq, data }: ChannelEvent<ChatbotSessionEvent>) =>
+      send("reply", data, seq);
 
-      const heartbeat = setInterval(() => {
-        try {
-          controller.enqueue(encoder.encode(`: ping\n\n`));
-        } catch {
-          finish();
-        }
-      }, HEARTBEAT_MS);
-
-      function finish() {
-        clearInterval(heartbeat);
-        unsubscribe();
-        try {
-          controller.close();
-        } catch {
-          // already closed
-        }
-      }
-
-      request.signal.addEventListener("abort", finish);
-    },
-  });
+    const unsubscribe = chatbotReplyChannel.subscribe(sessionId, sendReply);
 
-  return new Response(stream, {
-    headers: {
-      "Content-Type": "text/event-stream; charset=utf-8",
-      "Cache-Control": "no-cache, no-transform",
-      Connection: "keep-alive",
-      "X-Accel-Buffering": "no",
-    },
+    // On reconnect, the browser sends the last id it got; resend what it missed.
+    const lastSeenId = Number(request.headers.get("last-event-id"));
+    if (lastSeenId) {
+      chatbotReplyChannel.after(sessionId, lastSeenId).forEach(sendReply);
+    }
+    return unsubscribe;
   });
 }
diff --git a/app/hooks/chatbot/useChatbotReplyStream.ts b/app/hooks/chatbot/useChatbotReplyStream.ts
index a69ed06e..11056b80 100644
--- a/app/hooks/chatbot/useChatbotReplyStream.ts
+++ b/app/hooks/chatbot/useChatbotReplyStream.ts
@@ -1,17 +1,16 @@
 "use client";
 
 import { useEffect, useRef } from "react";
+import { openEventStream } from "@/app/lib/eventStream";
 import { ChatbotSessionEvent } from "@/app/lib/types/chatbot";
 
 /**
- * Keeps an SSE connection to the webhook stream for one chatbot session and
- * calls `onEvent` for every reply Kaapi delivers. A new connection only gets
- * replies from then on; EventSource reconnects on its own and resumes via
- * `Last-Event-ID`.
+ * Listens to live bot replies for one session. `onEvent` gets each reply and
+ * its `seq` (used to skip duplicates after a reconnect).
  */
 export function useChatbotReplyStream(
   sessionId: string | null,
-  onEvent: (event: ChatbotSessionEvent) => void,
+  onEvent: (event: ChatbotSessionEvent, seq: number) => void,
 ) {
   const onEventRef = useRef(onEvent);
   useEffect(() => {
@@ -19,18 +18,12 @@ export function useChatbotReplyStream(
   });
 
   useEffect(() => {
-    if (!sessionId || typeof EventSource === "undefined") return;
+    if (!sessionId) return;
     const params = new URLSearchParams({ session_id: sessionId });
-    const source = new EventSource(`/api/webhooks/chatbot/stream?${params}`);
-    source.addEventListener("reply", (e) => {
-      try {
-        onEventRef.current(
-          JSON.parse((e as MessageEvent).data) as ChatbotSessionEvent,
-        );
-      } catch (err) {
-        console.error("chatbot SSE parse error:", err);
-      }
-    });
-    return () => source.close();
+    return openEventStream<ChatbotSessionEvent>(
+      `/api/webhooks/chatbot/stream?${params}`,
+      "reply",
+      (event, id) => onEventRef.current(event, Number(id)),
+    );
   }, [sessionId]);
 }
diff --git a/app/hooks/chatbot/useChatbotSession.ts b/app/hooks/chatbot/useChatbotSession.ts
index af63360e..b16b3547 100644
--- a/app/hooks/chatbot/useChatbotSession.ts
+++ b/app/hooks/chatbot/useChatbotSession.ts
@@ -122,9 +122,9 @@ export function useChatbotSession({
   ]);
 
   const handleEvent = useCallback(
-    (event: ChatbotSessionEvent) => {
-      if (event.seq <= lastEventSeqRef.current) return;
-      lastEventSeqRef.current = event.seq;
+    (event: ChatbotSessionEvent, seq: number) => {
+      if (seq <= lastEventSeqRef.current) return;
+      lastEventSeqRef.current = seq;
       clearPending();
       if (!event.success) {
         toast.error(event.error || "The chatbot couldn't reply.");
diff --git a/app/lib/eventStream.ts b/app/lib/eventStream.ts
new file mode 100644
index 00000000..23fa3a66
--- /dev/null
+++ b/app/lib/eventStream.ts
@@ -0,0 +1,17 @@
+/**
+ * Listens to an SSE stream in the browser. Each `eventName` message is parsed
+ * as JSON and passed to `onMessage` with its id. Returns a function to close
+ * the connection. (EventSource reconnects on its own if the network drops.)
+ */
+export function openEventStream<T>(
+  url: string,
+  eventName: string,
+  onMessage: (data: T, id: string) => void,
+): () => void {
+  const source = new EventSource(url);
+  source.addEventListener(eventName, (e) => {
+    const { data, lastEventId } = e as MessageEvent<string>;
+    onMessage(JSON.parse(data) as T, lastEventId);
+  });
+  return () => source.close();
+}
diff --git a/app/lib/store/chatbotSessionStore.ts b/app/lib/store/chatbotSessionStore.ts
index 371ab3fd..9bde5ecf 100644
--- a/app/lib/store/chatbotSessionStore.ts
+++ b/app/lib/store/chatbotSessionStore.ts
@@ -1,93 +1,5 @@
-import type {
-  ChatbotSessionEvent,
-  ChatbotSessionEventListener,
-  ChatbotSessionStoreShape,
-} from "@/app/lib/types/chatbot";
+import { createEventChannel } from "@/app/lib/store/eventChannel";
+import type { ChatbotSessionEvent } from "@/app/lib/types/chatbot";
 
-const globalKey = Symbol.for("kaapi.chatbotSessionStore");
-
-type WithStore = { [globalKey]?: ChatbotSessionStoreShape };
-const g = globalThis as unknown as WithStore;
-
-if (!g[globalKey]) {
-  g[globalKey] = { events: new Map(), listeners: new Map(), lastSeq: 0 };
-}
-
-const store = g[globalKey]!;
-
-const MAX_EVENTS_PER_SESSION = 50;
-const MAX_SESSIONS = 500;
-const TTL_MS = 30 * 60 * 1000;
-
-function nextSeq(): number {
-  store.lastSeq = Math.max(Date.now(), store.lastSeq + 1);
-  return store.lastSeq;
-}
-
-function prune(): void {
-  const cutoff = Date.now() - TTL_MS;
-  for (const [sessionId, events] of store.events.entries()) {
-    const last = events[events.length - 1];
-    if (!last || last.seq < cutoff) store.events.delete(sessionId);
-  }
-  for (const sessionId of store.events.keys()) {
-    if (store.events.size <= MAX_SESSIONS) break;
-    store.events.delete(sessionId);
-  }
-}
-
-function emit(event: ChatbotSessionEvent): void {
-  const set = store.listeners.get(event.sessionId);
-  if (!set) return;
-  for (const cb of set) {
-    try {
-      cb(event);
-    } catch (e) {
-      console.error("chatbot session listener error:", e);
-    }
-  }
-}
-
-export function saveSessionEvent(
-  event: Omit<ChatbotSessionEvent, "seq">,
-): ChatbotSessionEvent {
-  const saved: ChatbotSessionEvent = { ...event, seq: nextSeq() };
-  const events = store.events.get(event.sessionId) ?? [];
-  events.push(saved);
-  if (events.length > MAX_EVENTS_PER_SESSION) events.shift();
-  store.events.set(event.sessionId, events);
-  prune();
-  emit(saved);
-  return saved;
-}
-
-/** Seq of the newest buffered event for a session (0 when none). */
-export function getLatestSessionSeq(sessionId: string): number {
-  const events = store.events.get(sessionId);
-  return events?.[events.length - 1]?.seq ?? 0;
-}
-
-export function getSessionEventsAfter(
-  sessionId: string,
-  afterSeq: number,
-): ChatbotSessionEvent[] {
-  return (store.events.get(sessionId) ?? []).filter((e) => e.seq > afterSeq);
-}
-
-export function subscribeSessionEvents(
-  sessionId: string,
-  cb: ChatbotSessionEventListener,
-): () => void {
-  let set = store.listeners.get(sessionId);
-  if (!set) {
-    set = new Set();
-    store.listeners.set(sessionId, set);
-  }
-  set.add(cb);
-  return () => {
-    const s = store.listeners.get(sessionId);
-    if (!s) return;
-    s.delete(cb);
-    if (s.size === 0) store.listeners.delete(sessionId);
-  };
-}
+export const chatbotReplyChannel =
+  createEventChannel<ChatbotSessionEvent>("chatbotReplies");
diff --git a/app/lib/store/eventChannel.ts b/app/lib/store/eventChannel.ts
new file mode 100644
index 00000000..979de6a4
--- /dev/null
+++ b/app/lib/store/eventChannel.ts
@@ -0,0 +1,54 @@
+import type {
+  ChannelEvent,
+  ChannelListener,
+  ChannelState,
+} from "@/app/lib/types/eventChannel";
+
+const TTL_MS = 30 * 60 * 1000;
+
+/**
+ * In-memory pub/sub on the server: the webhook route `publish`es under a key
+ * (e.g. session id), the SSE route `subscribe`s to it. The last few events per
+ * key are kept so a reconnecting browser can catch up with `after`.
+ */
+export function createEventChannel<T>(name: string, maxEventsPerKey = 50) {
+  const globalKey = Symbol.for(`kaapi.eventChannel.${name}`);
+  const g = globalThis as unknown as Record<symbol, ChannelState<T>>;
+  g[globalKey] ??= { events: new Map(), listeners: new Map(), lastSeq: 0 };
+  const state = g[globalKey];
+
+  function dropOldKeys() {
+    const cutoff = Date.now() - TTL_MS;
+    for (const [key, events] of state.events) {
+      if (events[events.length - 1].seq < cutoff) state.events.delete(key);
+    }
+  }
+
+  function publish(key: string, data: T): void {
+    state.lastSeq = Math.max(Date.now(), state.lastSeq + 1);
+    const event: ChannelEvent<T> = { seq: state.lastSeq, data };
+
+    const events = [...(state.events.get(key) ?? []), event];
+    state.events.set(key, events.slice(-maxEventsPerKey));
+    dropOldKeys();
+
+    state.listeners.get(key)?.forEach((listener) => listener(event));
+  }
+
+  function after(key: string, seq: number): ChannelEvent<T>[] {
+    return (state.events.get(key) ?? []).filter((e) => e.seq > seq);
+  }
+
+  function subscribe(key: string, listener: ChannelListener<T>): () => void {
+    if (!state.listeners.has(key)) state.listeners.set(key, new Set());
+    state.listeners.get(key)!.add(listener);
+
+    return () => {
+      const listeners = state.listeners.get(key);
+      listeners?.delete(listener);
+      if (listeners?.size === 0) state.listeners.delete(key);
+    };
+  }
+
+  return { publish, after, subscribe };
+}
diff --git a/app/lib/types/chatbot.ts b/app/lib/types/chatbot.ts
index 91bf0424..1cefe99f 100644
--- a/app/lib/types/chatbot.ts
+++ b/app/lib/types/chatbot.ts
@@ -84,19 +84,9 @@ export interface ChatbotWebhookPayload {
 }
 
 export interface ChatbotSessionEvent {
-  seq: number;
-  sessionId: string;
   success: boolean;
   reply: string | null;
   status: ChatbotSessionStatus | null;
   completionStatus: ChatbotCompletionStatus | null;
   error: string | null;
 }
-
-export type ChatbotSessionEventListener = (event: ChatbotSessionEvent) => void;
-
-export interface ChatbotSessionStoreShape {
-  events: Map<string, ChatbotSessionEvent[]>;
-  listeners: Map<string, Set<ChatbotSessionEventListener>>;
-  lastSeq: number;
-}
diff --git a/app/lib/types/eventChannel.ts b/app/lib/types/eventChannel.ts
new file mode 100644
index 00000000..13537d74
--- /dev/null
+++ b/app/lib/types/eventChannel.ts
@@ -0,0 +1,13 @@
+/** One message on an event channel; `seq` doubles as the SSE event id. */
+export interface ChannelEvent<T> {
+  seq: number;
+  data: T;
+}
+
+export type ChannelListener<T> = (event: ChannelEvent<T>) => void;
+
+export interface ChannelState<T> {
+  events: Map<string, ChannelEvent<T>[]>;
+  listeners: Map<string, Set<ChannelListener<T>>>;
+  lastSeq: number;
+}

From 9186a286640e4d78fdb336402d1a2711e97d5cfd Mon Sep 17 00:00:00 2001
From: Ayush8923 <80516839+Ayush8923@users.noreply.github.com>
Date: Thu, 29 Oct 2026 12:29:14 +0530
Subject: [PATCH 09/12] fix: cleanups

---
 app/lib/types/eventChannel.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/lib/types/eventChannel.ts b/app/lib/types/eventChannel.ts
index 13537d74..87d75367 100644
--- a/app/lib/types/eventChannel.ts
+++ b/app/lib/types/eventChannel.ts
@@ -1,4 +1,3 @@
-/** One message on an event channel; `seq` doubles as the SSE event id. */
 export interface ChannelEvent<T> {
   seq: number;
   data: T;

From 3b4092826c018a8f82aac5561173731ed3bfc53b Mon Sep 17 00:00:00 2001
From: Ayush8923 <80516839+Ayush8923@users.noreply.github.com>
Date: Thu, 29 Oct 2026 15:56:31 +0530
Subject: [PATCH 10/12] fix: update the chatbot flows ui

---
 .../chatbot/{ => [chatbotId]}/chat/page.tsx   |  38 ++-
 app/(main)/chatbot/[chatbotId]/page.tsx       | 111 ++++++++
 app/(main)/chatbot/page.tsx                   | 149 +++++-----
 .../[chatbot_id]/flow/publish/route.ts        |  17 ++
 app/api/chatbots/[chatbot_id]/flow/route.ts   |  28 ++
 app/api/chatbots/[chatbot_id]/route.ts        |  16 ++
 .../chatbots/[chatbot_id]/sessions/route.ts   |  18 ++
 .../{chatbot/sessions => chatbots}/route.ts   |  26 +-
 .../sessions/[session_id]/message/route.ts    |   6 +-
 app/components/chatbot/ChatbotBreadcrumb.tsx  |  67 +++--
 app/components/chatbot/ChatbotChatWindow.tsx  |  28 +-
 app/components/chatbot/ChatbotFlowCanvas.tsx  |  13 +-
 app/components/chatbot/ChatbotFlowContext.tsx |   4 +-
 app/components/chatbot/ChatbotList.tsx        |  59 ++++
 app/components/chatbot/ChatbotVersionPill.tsx |  23 ++
 app/components/chatbot/CreateChatbotModal.tsx |  66 +++++
 .../{LlmNode.tsx => OnboardingNode.tsx}       |  43 ++-
 app/components/chatbot/TerminalNode.tsx       |   9 +-
 app/components/chatbot/index.ts               |   3 +
 app/globals.css                               |  13 +
 app/hooks/chatbot/useChatbot.ts               |  32 +++
 app/hooks/chatbot/useChatbotFlow.ts           | 226 ++++++++-------
 app/hooks/chatbot/useChatbotSession.ts        | 257 ++++--------------
 app/hooks/chatbot/useChatbots.ts              |  45 +++
 app/lib/apiClient.ts                          |   2 +-
 app/lib/chatbotClient.ts                      | 135 ++++++---
 app/lib/constants.ts                          |   2 -
 app/lib/context/AuthContext.tsx               |   4 -
 app/lib/store/chatbot.ts                      |  83 ------
 app/lib/types/chatbot.ts                      | 103 ++++---
 app/lib/utils/chatbotFlow.ts                  |  45 +++
 app/lib/utils/chatbotSessionCookie.ts         |  19 --
 32 files changed, 978 insertions(+), 712 deletions(-)
 rename app/(main)/chatbot/{ => [chatbotId]}/chat/page.tsx (67%)
 create mode 100644 app/(main)/chatbot/[chatbotId]/page.tsx
 create mode 100644 app/api/chatbots/[chatbot_id]/flow/publish/route.ts
 create mode 100644 app/api/chatbots/[chatbot_id]/flow/route.ts
 create mode 100644 app/api/chatbots/[chatbot_id]/route.ts
 create mode 100644 app/api/chatbots/[chatbot_id]/sessions/route.ts
 rename app/api/{chatbot/sessions => chatbots}/route.ts (61%)
 rename app/api/{chatbot => chatbots}/sessions/[session_id]/message/route.ts (83%)
 create mode 100644 app/components/chatbot/ChatbotList.tsx
 create mode 100644 app/components/chatbot/ChatbotVersionPill.tsx
 create mode 100644 app/components/chatbot/CreateChatbotModal.tsx
 rename app/components/chatbot/{LlmNode.tsx => OnboardingNode.tsx} (59%)
 create mode 100644 app/hooks/chatbot/useChatbot.ts
 create mode 100644 app/hooks/chatbot/useChatbots.ts
 delete mode 100644 app/lib/store/chatbot.ts
 create mode 100644 app/lib/utils/chatbotFlow.ts
 delete mode 100644 app/lib/utils/chatbotSessionCookie.ts

diff --git a/app/(main)/chatbot/chat/page.tsx b/app/(main)/chatbot/[chatbotId]/chat/page.tsx
similarity index 67%
rename from app/(main)/chatbot/chat/page.tsx
rename to app/(main)/chatbot/[chatbotId]/chat/page.tsx
index de3321a9..8a50a10e 100644
--- a/app/(main)/chatbot/chat/page.tsx
+++ b/app/(main)/chatbot/[chatbotId]/chat/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useParams } from "next/navigation";
 import Sidebar from "@/app/components/Sidebar";
 import PageHeader from "@/app/components/PageHeader";
 import { Button } from "@/app/components/ui";
@@ -9,26 +10,22 @@ import {
   ChatbotChatWindow,
   ChatbotStatusBadge,
 } from "@/app/components/chatbot";
+import type { BreadcrumbItem } from "@/app/components/chatbot/ChatbotBreadcrumb";
 import { useApp } from "@/app/lib/context/AppContext";
-import { useToast } from "@/app/hooks/useToast";
+import { useChatbot } from "@/app/hooks/chatbot/useChatbot";
 import { useChatbotSession } from "@/app/hooks/chatbot/useChatbotSession";
-import { useChatbotStore } from "@/app/lib/store/chatbot";
 
 export default function ChatbotChatPage() {
+  const { chatbotId } = useParams<{ chatbotId: string }>();
   const { sidebarCollapsed } = useApp();
-  const toast = useToast();
-  const session = useChatbotSession();
-  const savedFlow = useChatbotStore((s) => s.savedFlow);
+  const { chatbot } = useChatbot(chatbotId);
+  const session = useChatbotSession(chatbotId);
 
-  const handleRestart = async () => {
-    if (!savedFlow) {
-      toast.error("Save the flow first to start a session.");
-      return;
-    }
-    if (await session.startSession(savedFlow)) {
-      toast.success("New chat session started.");
-    }
-  };
+  const breadcrumb: BreadcrumbItem[] = [
+    { label: chatbot?.name ?? "…", href: `/chatbot/${chatbotId}` },
+  ];
+  if (session.sessionId)
+    breadcrumb.push({ label: session.sessionId, muted: true });
 
   return (
     <div className="w-full h-screen flex flex-col bg-bg-secondary">
@@ -47,9 +44,9 @@ export default function ChatbotChatPage() {
                   <Button
                     variant="ghost"
                     size="icon"
-                    onClick={handleRestart}
-                    disabled={session.isCreating || session.isPending}
-                    title="Start a new session with the saved flow"
+                    onClick={session.startChat}
+                    disabled={session.isStarting || session.isPending}
+                    title="Start a new session"
                     aria-label="Restart session"
                   >
                     <RefreshIcon className="w-4 h-4" />
@@ -58,17 +55,14 @@ export default function ChatbotChatPage() {
               ) : null
             }
           >
-            <ChatbotBreadcrumb
-              name={session.sessionName}
-              sessionId={session.sessionId}
-            />
+            <ChatbotBreadcrumb items={breadcrumb} />
           </PageHeader>
 
           <ChatbotChatWindow
-            hasSession={!!session.sessionId}
             status={session.status}
             messages={session.messages}
             isPending={session.isPending}
+            onStart={session.startChat}
             onSend={session.send}
           />
         </div>
diff --git a/app/(main)/chatbot/[chatbotId]/page.tsx b/app/(main)/chatbot/[chatbotId]/page.tsx
new file mode 100644
index 00000000..b245487c
--- /dev/null
+++ b/app/(main)/chatbot/[chatbotId]/page.tsx
@@ -0,0 +1,111 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import Sidebar from "@/app/components/Sidebar";
+import PageHeader from "@/app/components/PageHeader";
+import { Button, Loader } from "@/app/components/ui";
+import { PlayIcon } from "@/app/components/icons";
+import {
+  ChatbotBreadcrumb,
+  ChatbotFlowCanvas,
+  ChatbotVersionPill,
+} from "@/app/components/chatbot";
+import { useApp } from "@/app/lib/context/AppContext";
+import { useToast } from "@/app/hooks/useToast";
+import { useChatbot } from "@/app/hooks/chatbot/useChatbot";
+import { useChatbotFlow } from "@/app/hooks/chatbot/useChatbotFlow";
+
+/** Flow editor of one chatbot: edit, save a draft, publish, and test. */
+export default function ChatbotEditorPage() {
+  const { chatbotId } = useParams<{ chatbotId: string }>();
+  const { sidebarCollapsed } = useApp();
+  const toast = useToast();
+  const { chatbot } = useChatbot(chatbotId);
+  const flow = useChatbotFlow(chatbotId);
+
+  const isBusy = flow.isSaving || flow.isPublishing;
+  const { flowVersion } = flow;
+
+  const handlePlay = () => {
+    if (!flowVersion) {
+      toast.error("Save the flow first to test the chatbot.");
+      return;
+    }
+    window.open(`/chatbot/${chatbotId}/chat`, "_blank", "noopener,noreferrer");
+  };
+
+  return (
+    <div className="w-full h-screen flex flex-col bg-bg-secondary">
+      <div className="flex flex-1 overflow-hidden">
+        <Sidebar collapsed={sidebarCollapsed} activeRoute="/chatbot" />
+
+        <div className="flex-1 flex flex-col overflow-hidden bg-bg-primary">
+          <PageHeader
+            actions={
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={flow.discard}
+                  disabled={!flow.isDirty || isBusy}
+                >
+                  Discard changes
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={flow.save}
+                  disabled={!flow.isDirty || isBusy}
+                >
+                  {flow.isSaving ? "Saving…" : "Save"}
+                </Button>
+                {/* Only a draft (newer than live) can be published. */}
+                {flowVersion && !flowVersion.isLive && (
+                  <Button
+                    size="sm"
+                    onClick={flow.publish}
+                    disabled={flow.isDirty || isBusy}
+                    title={flow.isDirty ? "Save your changes first" : undefined}
+                  >
+                    {flow.isPublishing ? "Publishing…" : "Publish"}
+                  </Button>
+                )}
+              </div>
+            }
+          >
+            <div className="flex items-center gap-3 min-w-0">
+              <ChatbotBreadcrumb items={[{ label: chatbot?.name ?? "…" }]} />
+              <ChatbotVersionPill version={flowVersion} />
+            </div>
+          </PageHeader>
+
+          <div className="relative flex-1 min-h-0 bg-bg-primary">
+            {flow.isLoading ? (
+              <div className="h-full flex items-center justify-center">
+                <Loader message="Loading flow..." />
+              </div>
+            ) : (
+              <>
+                <ChatbotFlowCanvas
+                  nodes={flow.nodes}
+                  edges={flow.edges}
+                  onNodesChange={flow.onNodesChange}
+                  updateNodeData={flow.updateNodeData}
+                />
+                <Button
+                  size="icon"
+                  onClick={handlePlay}
+                  title="Test the chatbot"
+                  aria-label="Test the chatbot"
+                  className="absolute top-4 left-4 z-10 w-11 h-11 shadow-md"
+                >
+                  <PlayIcon className="w-5 h-5 ml-0.5" />
+                </Button>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/(main)/chatbot/page.tsx b/app/(main)/chatbot/page.tsx
index bedc98a4..dd71ce4d 100644
--- a/app/(main)/chatbot/page.tsx
+++ b/app/(main)/chatbot/page.tsx
@@ -1,64 +1,73 @@
 "use client";
 
-import { useCallback } from "react";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
 import Sidebar from "@/app/components/Sidebar";
 import PageHeader from "@/app/components/PageHeader";
-import { Button } from "@/app/components/ui";
-import { PlayIcon } from "@/app/components/icons";
-import { ChatbotFlowCanvas } from "@/app/components/chatbot";
+import { Button, Loader } from "@/app/components/ui";
+import { PlusIcon, SearchIcon } from "@/app/components/icons";
+import { ChatbotList, CreateChatbotModal } from "@/app/components/chatbot";
 import { useApp } from "@/app/lib/context/AppContext";
 import { useToast } from "@/app/hooks/useToast";
-import { useChatbotFlow } from "@/app/hooks/chatbot/useChatbotFlow";
-import { useChatbotSession } from "@/app/hooks/chatbot/useChatbotSession";
-import { ChatbotNodeData } from "@/app/lib/types/chatbot";
+import { useChatbots } from "@/app/hooks/chatbot/useChatbots";
 
-function validateFlow(data: ChatbotNodeData): string | null {
-  if (!data.configId) return "Select a configuration and version first.";
-  if (!data.systemPrompt.trim()) return "Add a prompt before saving.";
-  return null;
-}
-
-export default function ChatbotPage() {
+export default function ChatbotsPage() {
   const { sidebarCollapsed } = useApp();
+  const router = useRouter();
   const toast = useToast();
-  const flow = useChatbotFlow();
-  const session = useChatbotSession({ listen: false });
+  const { chatbots, isLoading, error, create } = useChatbots();
+  const [search, setSearch] = useState("");
+  const [showCreate, setShowCreate] = useState(false);
 
-  const createSessionFor = useCallback(
-    async (data: ChatbotNodeData): Promise<boolean> => {
-      const error = validateFlow(data);
-      if (error) {
-        toast.error(error);
-        return false;
-      }
-      return (await session.startSession(data)) !== null;
-    },
-    [session, toast],
-  );
+  const query = search.trim().toLowerCase();
+  const filtered = chatbots.filter((c) => c.name.toLowerCase().includes(query));
 
-  const handleSave = async () => {
-    if (!flow.llmNode) return;
-    const data = flow.llmNode.data;
-    if (await createSessionFor(data)) {
-      flow.markSaved(data);
-      toast.success("Flow saved. A new chat session has started.");
+  const handleCreate = async (name: string) => {
+    try {
+      const chatbot = await create(name);
+      router.push(`/chatbot/${chatbot.id}`);
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : "Failed to create the chatbot.",
+      );
     }
   };
 
-  const handlePlay = () => {
-    if (flow.isDirty) {
-      toast.error("Save your changes before testing the chatbot.");
-      return;
+  const renderContent = () => {
+    if (isLoading) {
+      return (
+        <div className="flex-1 flex items-center justify-center">
+          <Loader message="Loading chatbots..." />
+        </div>
+      );
     }
-    if (!session.sessionId) {
-      toast.error("Save the flow first to start a chat session.");
-      return;
+    if (error) {
+      return <p className="text-sm text-status-error-text">{error}</p>;
     }
-    window.open("/chatbot/chat", "_blank", "noopener,noreferrer");
+    if (chatbots.length === 0) {
+      return (
+        <div className="py-16 text-center">
+          <p className="text-sm text-text-secondary">No chatbots yet.</p>
+          <Button
+            size="sm"
+            className="mt-3"
+            onClick={() => setShowCreate(true)}
+          >
+            Create your first chatbot
+          </Button>
+        </div>
+      );
+    }
+    if (filtered.length === 0) {
+      return (
+        <p className="py-16 text-center text-sm text-text-secondary">
+          No chatbots match &quot;{search}&quot;.
+        </p>
+      );
+    }
+    return <ChatbotList chatbots={filtered} />;
   };
 
-  const canEdit = flow.isDirty && !session.isCreating;
-
   return (
     <div className="w-full h-screen flex flex-col bg-bg-secondary">
       <div className="flex flex-1 overflow-hidden">
@@ -66,44 +75,36 @@ export default function ChatbotPage() {
 
         <div className="flex-1 flex flex-col overflow-hidden bg-bg-primary">
           <PageHeader
-            title="Chatbot"
-            subtitle="Design a chatbot flow, save it and test it live"
+            title="Chatbots"
+            subtitle="Build chatbot flows and test them live"
             actions={
-              <div className="flex items-center gap-2">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={flow.discard}
-                  disabled={!canEdit}
-                >
-                  Discard changes
-                </Button>
-                <Button size="sm" onClick={handleSave} disabled={!canEdit}>
-                  {session.isCreating ? "Saving…" : "Save"}
-                </Button>
-              </div>
+              <Button size="sm" onClick={() => setShowCreate(true)}>
+                <PlusIcon className="w-3.5 h-3.5" />
+                Add New
+              </Button>
             }
           />
 
-          <div className="relative flex-1 min-h-0 bg-bg-primary">
-            <ChatbotFlowCanvas
-              nodes={flow.nodes}
-              edges={flow.edges}
-              onNodesChange={flow.onNodesChange}
-              updateNodeData={flow.updateNodeData}
-            />
-            <Button
-              size="icon"
-              onClick={handlePlay}
-              title="Test the chatbot"
-              aria-label="Test the chatbot"
-              className="absolute top-4 left-4 z-10 w-11 h-11 shadow-md"
-            >
-              <PlayIcon className="w-5 h-5 ml-0.5" />
-            </Button>
+          <div className="flex-1 overflow-y-auto p-6 flex flex-col gap-4">
+            <div className="relative max-w-xs">
+              <SearchIcon className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary" />
+              <input
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                placeholder="Search..."
+                className="w-full pl-9 pr-3 py-2 rounded-lg border border-border text-sm bg-bg-primary text-text-primary focus:outline-none focus:border-accent-primary"
+              />
+            </div>
+            {renderContent()}
           </div>
         </div>
       </div>
+
+      <CreateChatbotModal
+        open={showCreate}
+        onClose={() => setShowCreate(false)}
+        onCreate={handleCreate}
+      />
     </div>
   );
 }
diff --git a/app/api/chatbots/[chatbot_id]/flow/publish/route.ts b/app/api/chatbots/[chatbot_id]/flow/publish/route.ts
new file mode 100644
index 00000000..d2c1743b
--- /dev/null
+++ b/app/api/chatbots/[chatbot_id]/flow/publish/route.ts
@@ -0,0 +1,17 @@
+import { proxyErrorResponse, proxyJsonResponse } from "@/app/api/_routeProxy";
+
+export async function POST(
+  request: Request,
+  { params }: { params: Promise<{ chatbot_id: string }> },
+) {
+  try {
+    const { chatbot_id } = await params;
+    return await proxyJsonResponse(
+      request,
+      `/api/v1/chatbots/${encodeURIComponent(chatbot_id)}/flow/publish`,
+      { method: "POST" },
+    );
+  } catch (error) {
+    return proxyErrorResponse("chatbot flow publish error:", error);
+  }
+}
diff --git a/app/api/chatbots/[chatbot_id]/flow/route.ts b/app/api/chatbots/[chatbot_id]/flow/route.ts
new file mode 100644
index 00000000..d0461afb
--- /dev/null
+++ b/app/api/chatbots/[chatbot_id]/flow/route.ts
@@ -0,0 +1,28 @@
+import { proxyErrorResponse, proxyJsonResponse } from "@/app/api/_routeProxy";
+
+type Params = { params: Promise<{ chatbot_id: string }> };
+
+const flowPath = (chatbotId: string) =>
+  `/api/v1/chatbots/${encodeURIComponent(chatbotId)}/flow`;
+
+export async function GET(request: Request, { params }: Params) {
+  try {
+    const { chatbot_id } = await params;
+    return await proxyJsonResponse(request, flowPath(chatbot_id));
+  } catch (error) {
+    return proxyErrorResponse("chatbot flow get error:", error);
+  }
+}
+
+export async function PUT(request: Request, { params }: Params) {
+  try {
+    const { chatbot_id } = await params;
+    const body = await request.json();
+    return await proxyJsonResponse(request, flowPath(chatbot_id), {
+      method: "PUT",
+      body: JSON.stringify(body),
+    });
+  } catch (error) {
+    return proxyErrorResponse("chatbot flow save error:", error);
+  }
+}
diff --git a/app/api/chatbots/[chatbot_id]/route.ts b/app/api/chatbots/[chatbot_id]/route.ts
new file mode 100644
index 00000000..d7875b69
--- /dev/null
+++ b/app/api/chatbots/[chatbot_id]/route.ts
@@ -0,0 +1,16 @@
+import { proxyErrorResponse, proxyJsonResponse } from "@/app/api/_routeProxy";
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ chatbot_id: string }> },
+) {
+  try {
+    const { chatbot_id } = await params;
+    return await proxyJsonResponse(
+      request,
+      `/api/v1/chatbots/${encodeURIComponent(chatbot_id)}`,
+    );
+  } catch (error) {
+    return proxyErrorResponse("chatbot get error:", error);
+  }
+}
diff --git a/app/api/chatbots/[chatbot_id]/sessions/route.ts b/app/api/chatbots/[chatbot_id]/sessions/route.ts
new file mode 100644
index 00000000..6a171e77
--- /dev/null
+++ b/app/api/chatbots/[chatbot_id]/sessions/route.ts
@@ -0,0 +1,18 @@
+import { proxyErrorResponse, proxyJsonResponse } from "@/app/api/_routeProxy";
+
+export async function POST(
+  request: Request,
+  { params }: { params: Promise<{ chatbot_id: string }> },
+) {
+  try {
+    const { chatbot_id } = await params;
+    const body = await request.json();
+    return await proxyJsonResponse(
+      request,
+      `/api/v1/chatbots/${encodeURIComponent(chatbot_id)}/sessions`,
+      { method: "POST", body: JSON.stringify(body) },
+    );
+  } catch (error) {
+    return proxyErrorResponse("chatbot session create error:", error);
+  }
+}
diff --git a/app/api/chatbot/sessions/route.ts b/app/api/chatbots/route.ts
similarity index 61%
rename from app/api/chatbot/sessions/route.ts
rename to app/api/chatbots/route.ts
index 4e46c4c1..12989323 100644
--- a/app/api/chatbot/sessions/route.ts
+++ b/app/api/chatbots/route.ts
@@ -5,25 +5,25 @@ import {
   withQueryParams,
 } from "@/app/api/_routeProxy";
 
-export async function POST(request: NextRequest) {
+export async function GET(request: NextRequest) {
   try {
-    const body = await request.json();
-    return await proxyJsonResponse(request, "/api/v1/chatbot/sessions", {
-      method: "POST",
-      body: JSON.stringify(body),
-    });
+    return await proxyJsonResponse(
+      request,
+      withQueryParams("/api/v1/chatbots", request.nextUrl.searchParams),
+    );
   } catch (error) {
-    return proxyErrorResponse("chatbot create-session error:", error);
+    return proxyErrorResponse("chatbot list error:", error);
   }
 }
 
-export async function GET(request: NextRequest) {
+export async function POST(request: NextRequest) {
   try {
-    return await proxyJsonResponse(
-      request,
-      withQueryParams("/api/v1/chatbot/sessions", request.nextUrl.searchParams),
-    );
+    const body = await request.json();
+    return await proxyJsonResponse(request, "/api/v1/chatbots", {
+      method: "POST",
+      body: JSON.stringify(body),
+    });
   } catch (error) {
-    return proxyErrorResponse("chatbot get-session error:", error);
+    return proxyErrorResponse("chatbot create error:", error);
   }
 }
diff --git a/app/api/chatbot/sessions/[session_id]/message/route.ts b/app/api/chatbots/sessions/[session_id]/message/route.ts
similarity index 83%
rename from app/api/chatbot/sessions/[session_id]/message/route.ts
rename to app/api/chatbots/sessions/[session_id]/message/route.ts
index bc0d4b66..411ee4ff 100644
--- a/app/api/chatbot/sessions/[session_id]/message/route.ts
+++ b/app/api/chatbots/sessions/[session_id]/message/route.ts
@@ -2,6 +2,10 @@ import { NextRequest, NextResponse } from "next/server";
 import { proxyErrorResponse, proxyJsonResponse } from "@/app/api/_routeProxy";
 import { buildWebhookCallbackUrl } from "@/app/lib/webhookCallback";
 
+/**
+ * Queues one chatbot turn. The browser only sends `message`; the webhook URL
+ * (with its secret) is added here so it never reaches the client.
+ */
 export async function POST(
   request: NextRequest,
   { params }: { params: Promise<{ session_id: string }> },
@@ -29,7 +33,7 @@ export async function POST(
     };
     return await proxyJsonResponse(
       request,
-      `/api/v1/chatbot/sessions/${encodeURIComponent(session_id)}/message`,
+      `/api/v1/chatbots/sessions/${encodeURIComponent(session_id)}/message`,
       {
         method: "POST",
         body: JSON.stringify({
diff --git a/app/components/chatbot/ChatbotBreadcrumb.tsx b/app/components/chatbot/ChatbotBreadcrumb.tsx
index 2a186a67..3620eff3 100644
--- a/app/components/chatbot/ChatbotBreadcrumb.tsx
+++ b/app/components/chatbot/ChatbotBreadcrumb.tsx
@@ -1,43 +1,52 @@
+import { Fragment } from "react";
 import Link from "next/link";
 import { ChevronRightIcon } from "@/app/components/icons";
 
-interface ChatbotBreadcrumbProps {
-  name: string | null;
-  sessionId: string | null;
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+  muted?: boolean;
 }
 
 export default function ChatbotBreadcrumb({
-  name,
-  sessionId,
-}: ChatbotBreadcrumbProps) {
-  const separator = (
-    <ChevronRightIcon className="w-3.5 h-3.5 text-text-secondary shrink-0" />
-  );
+  items,
+}: {
+  items: BreadcrumbItem[];
+}) {
+  const trail: BreadcrumbItem[] = [
+    { label: "Chatbots", href: "/chatbot" },
+    ...items,
+  ];
   return (
     <nav
       aria-label="Breadcrumb"
       className="flex items-center gap-2 min-w-0 text-sm"
     >
-      <Link
-        href="/chatbot"
-        className="font-semibold text-text-primary hover:text-accent-primary shrink-0"
-      >
-        Chatbot
-      </Link>
-      {name && (
-        <>
-          {separator}
-          <span className="font-medium text-text-primary truncate">{name}</span>
-        </>
-      )}
-      {sessionId && (
-        <>
-          {separator}
-          <span className="text-text-secondary truncate font-mono text-xs">
-            {sessionId}
-          </span>
-        </>
-      )}
+      {trail.map((item, i) => (
+        <Fragment key={`${item.label}-${i}`}>
+          {i > 0 && (
+            <ChevronRightIcon className="w-3.5 h-3.5 text-text-secondary shrink-0" />
+          )}
+          {item.href ? (
+            <Link
+              href={item.href}
+              className="font-semibold text-text-primary hover:text-accent-primary truncate"
+            >
+              {item.label}
+            </Link>
+          ) : (
+            <span
+              className={
+                item.muted
+                  ? "text-text-secondary truncate font-mono text-xs"
+                  : "font-medium text-text-primary truncate"
+              }
+            >
+              {item.label}
+            </span>
+          )}
+        </Fragment>
+      ))}
     </nav>
   );
 }
diff --git a/app/components/chatbot/ChatbotChatWindow.tsx b/app/components/chatbot/ChatbotChatWindow.tsx
index a6310da4..05ef4f44 100644
--- a/app/components/chatbot/ChatbotChatWindow.tsx
+++ b/app/components/chatbot/ChatbotChatWindow.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import Link from "next/link";
 import { useEffect, useRef } from "react";
 import { Button } from "@/app/components/ui";
 import { AssistantAvatar, ThinkingDots } from "@/app/components/chat";
@@ -12,11 +11,11 @@ import {
 } from "@/app/lib/types/chatbot";
 
 interface ChatbotChatWindowProps {
-  hasSession: boolean;
   status: ChatbotSessionStatus | null;
   messages: ChatbotChatMessage[];
   isPending: boolean;
-  onSend: (message?: string) => Promise<boolean>;
+  onStart: () => void;
+  onSend: (message: string) => Promise<boolean>;
 }
 
 function inputPlaceholder(isEnded: boolean, hasStarted: boolean): string {
@@ -25,28 +24,11 @@ function inputPlaceholder(isEnded: boolean, hasStarted: boolean): string {
   return "Type your message…";
 }
 
-function NoSession() {
-  return (
-    <div className="h-full flex flex-col items-center justify-center text-center gap-3">
-      <p className="text-sm text-text-secondary max-w-[320px]">
-        No chatbot session yet. Pick a configuration, write a prompt and save
-        the flow first.
-      </p>
-      <Link
-        href="/chatbot"
-        className="text-sm font-medium text-accent-primary hover:underline"
-      >
-        Go to the flow
-      </Link>
-    </div>
-  );
-}
-
 export default function ChatbotChatWindow({
-  hasSession,
   status,
   messages,
   isPending,
+  onStart,
   onSend,
 }: ChatbotChatWindowProps) {
   const bottomRef = useRef<HTMLDivElement>(null);
@@ -58,8 +40,6 @@ export default function ChatbotChatWindow({
     bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
   }, [messages.length, isPending]);
 
-  if (!hasSession) return <NoSession />;
-
   return (
     <div className="flex flex-col flex-1 min-h-0">
       <div className="flex-1 overflow-y-auto p-6 space-y-4">
@@ -68,7 +48,7 @@ export default function ChatbotChatWindow({
             <p className="text-sm text-text-secondary">
               The bot will send the first message.
             </p>
-            <Button size="sm" onClick={() => onSend()}>
+            <Button size="sm" onClick={onStart}>
               Start chat
             </Button>
           </div>
diff --git a/app/components/chatbot/ChatbotFlowCanvas.tsx b/app/components/chatbot/ChatbotFlowCanvas.tsx
index 78a71895..6090ccae 100644
--- a/app/components/chatbot/ChatbotFlowCanvas.tsx
+++ b/app/components/chatbot/ChatbotFlowCanvas.tsx
@@ -10,15 +10,15 @@ import {
   ReactFlow,
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
-import LlmNode from "@/app/components/chatbot/LlmNode";
+import OnboardingNode from "@/app/components/chatbot/OnboardingNode";
 import TerminalNode from "@/app/components/chatbot/TerminalNode";
 import { ChatbotFlowContext } from "@/app/components/chatbot/ChatbotFlowContext";
-import { ChatbotFlowNode, ChatbotNodeData } from "@/app/lib/types/chatbot";
+import { ChatbotFlowNode, OnboardingNodeData } from "@/app/lib/types/chatbot";
 
 const NODE_TYPES = {
-  llm: LlmNode,
-  flowInput: TerminalNode,
-  flowOutput: TerminalNode,
+  input: TerminalNode,
+  output: TerminalNode,
+  onboarding: OnboardingNode,
 };
 
 const DEFAULT_EDGE_OPTIONS = { style: { stroke: "#a3a3a3", strokeWidth: 1 } };
@@ -27,7 +27,7 @@ interface ChatbotFlowCanvasProps {
   nodes: ChatbotFlowNode[];
   edges: Edge[];
   onNodesChange: (changes: NodeChange<ChatbotFlowNode>[]) => void;
-  updateNodeData: (id: string, patch: Partial<ChatbotNodeData>) => void;
+  updateNodeData: (id: string, patch: Partial<OnboardingNodeData>) => void;
 }
 
 export default function ChatbotFlowCanvas({
@@ -41,6 +41,7 @@ export default function ChatbotFlowCanvas({
   return (
     <ChatbotFlowContext.Provider value={contextValue}>
       <ReactFlow
+        className="chatbot-flow"
         nodes={nodes}
         edges={edges}
         nodeTypes={NODE_TYPES}
diff --git a/app/components/chatbot/ChatbotFlowContext.tsx b/app/components/chatbot/ChatbotFlowContext.tsx
index 11d86021..468deeb8 100644
--- a/app/components/chatbot/ChatbotFlowContext.tsx
+++ b/app/components/chatbot/ChatbotFlowContext.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import { createContext, useContext } from "react";
-import { ChatbotNodeData } from "@/app/lib/types/chatbot";
+import { OnboardingNodeData } from "@/app/lib/types/chatbot";
 
 interface ChatbotFlowContextValue {
-  updateNodeData: (id: string, patch: Partial<ChatbotNodeData>) => void;
+  updateNodeData: (id: string, patch: Partial<OnboardingNodeData>) => void;
 }
 
 export const ChatbotFlowContext = createContext<ChatbotFlowContextValue | null>(
diff --git a/app/components/chatbot/ChatbotList.tsx b/app/components/chatbot/ChatbotList.tsx
new file mode 100644
index 00000000..84a457fb
--- /dev/null
+++ b/app/components/chatbot/ChatbotList.tsx
@@ -0,0 +1,59 @@
+import Link from "next/link";
+import { EditIcon } from "@/app/components/icons";
+import { formatRelativeTime } from "@/app/lib/utils";
+import { Chatbot } from "@/app/lib/types/chatbot";
+
+const TH_CLASS =
+  "px-5 py-2.5 text-left text-[11px] font-semibold uppercase tracking-wide text-text-secondary";
+
+const editUrl = (chatbot: Chatbot) => `/chatbot/${chatbot.id}`;
+
+export default function ChatbotList({ chatbots }: { chatbots: Chatbot[] }) {
+  return (
+    <div className="rounded-lg overflow-hidden bg-bg-primary shadow-[0_2px_6px_rgba(0,0,0,0.06),0_1px_2px_rgba(0,0,0,0.04)]">
+      <table className="w-full border-collapse">
+        <thead className="bg-bg-secondary">
+          <tr className="border-b border-border">
+            <th className={TH_CLASS}>Name</th>
+            <th className={TH_CLASS}>Last updated</th>
+            <th className={TH_CLASS}>Created</th>
+            <th className={`${TH_CLASS} text-right`}>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {chatbots.map((chatbot) => (
+            <tr
+              key={chatbot.id}
+              className="border-b border-border last:border-b-0 hover:bg-bg-secondary/60"
+            >
+              <td className="px-5 py-3">
+                <Link
+                  href={editUrl(chatbot)}
+                  className="inline-block px-2.5 py-1 rounded-md text-sm font-medium bg-accent-primary/10 text-accent-primary hover:bg-accent-primary/15"
+                >
+                  {chatbot.name}
+                </Link>
+              </td>
+              <td className="px-5 py-3 text-sm text-text-primary">
+                {formatRelativeTime(chatbot.updated_at)}
+              </td>
+              <td className="px-5 py-3 text-sm text-text-secondary">
+                {formatRelativeTime(chatbot.inserted_at)}
+              </td>
+              <td className="px-5 py-3 text-right">
+                <Link
+                  href={editUrl(chatbot)}
+                  title="Edit chatbot"
+                  aria-label={`Edit ${chatbot.name}`}
+                  className="inline-flex p-1.5 rounded-md text-text-primary hover:bg-neutral-100"
+                >
+                  <EditIcon className="w-4 h-4" />
+                </Link>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
diff --git a/app/components/chatbot/ChatbotVersionPill.tsx b/app/components/chatbot/ChatbotVersionPill.tsx
new file mode 100644
index 00000000..d0ae6c48
--- /dev/null
+++ b/app/components/chatbot/ChatbotVersionPill.tsx
@@ -0,0 +1,23 @@
+interface ChatbotVersionPillProps {
+  version: { version: number; isLive: boolean } | null;
+}
+
+export default function ChatbotVersionPill({
+  version,
+}: ChatbotVersionPillProps) {
+  let label = "Not saved";
+  let colors = "bg-bg-secondary text-text-secondary";
+  if (version) {
+    label = `${version.isLive ? "Live" : "Draft"} · v${version.version}`;
+    colors = version.isLive
+      ? "bg-status-success-bg text-status-success-text"
+      : "bg-status-warning-bg text-status-warning-text";
+  }
+  return (
+    <span
+      className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium shrink-0 ${colors}`}
+    >
+      {label}
+    </span>
+  );
+}
diff --git a/app/components/chatbot/CreateChatbotModal.tsx b/app/components/chatbot/CreateChatbotModal.tsx
new file mode 100644
index 00000000..b588394c
--- /dev/null
+++ b/app/components/chatbot/CreateChatbotModal.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { useState } from "react";
+import { Button, Field, Modal } from "@/app/components/ui";
+import {
+  CHATBOT_NAME_MAX_LENGTH,
+  DEFAULT_CHATBOT_NAME,
+} from "@/app/lib/constants";
+
+interface CreateChatbotModalProps {
+  open: boolean;
+  onClose: () => void;
+  onCreate: (name: string) => Promise<void>;
+}
+
+export default function CreateChatbotModal({
+  open,
+  onClose,
+  onCreate,
+}: CreateChatbotModalProps) {
+  const [name, setName] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleClose = () => {
+    if (isSubmitting) return;
+    setName("");
+    onClose();
+  };
+
+  const handleSubmit = async () => {
+    setIsSubmitting(true);
+    try {
+      await onCreate(name.trim() || DEFAULT_CHATBOT_NAME);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Modal
+      open={open}
+      onClose={handleClose}
+      title="New Chatbot"
+      maxWidth="max-w-md"
+    >
+      <div className="px-6 pb-6 space-y-4">
+        <Field
+          label="Name"
+          value={name}
+          onChange={setName}
+          placeholder={DEFAULT_CHATBOT_NAME}
+          maxLength={CHATBOT_NAME_MAX_LENGTH}
+          autoFocus
+        />
+        <div className="flex items-center justify-end gap-2 pt-4 border-t border-border">
+          <Button variant="outline" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} disabled={isSubmitting}>
+            {isSubmitting ? "Creating..." : "Create"}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
diff --git a/app/components/chatbot/LlmNode.tsx b/app/components/chatbot/OnboardingNode.tsx
similarity index 59%
rename from app/components/chatbot/LlmNode.tsx
rename to app/components/chatbot/OnboardingNode.tsx
index 8407e255..fffee7d1 100644
--- a/app/components/chatbot/LlmNode.tsx
+++ b/app/components/chatbot/OnboardingNode.tsx
@@ -2,9 +2,10 @@
 
 import { Handle, NodeProps, Position } from "@xyflow/react";
 import { ChatConfigPicker } from "@/app/components/chat";
-import { CHATBOT_NAME_MAX_LENGTH } from "@/app/lib/constants";
-import { useChatbotStore } from "@/app/lib/store/chatbot";
-import { ChatbotLlmNode, ChatbotNodeData } from "@/app/lib/types/chatbot";
+import {
+  ChatbotOnboardingNode,
+  OnboardingNodeData,
+} from "@/app/lib/types/chatbot";
 import { useChatbotFlowContext } from "@/app/components/chatbot/ChatbotFlowContext";
 import { FLOW_HANDLE_STYLE } from "@/app/components/chatbot/flowHandleStyle";
 import NodeFieldLabel from "@/app/components/chatbot/NodeFieldLabel";
@@ -12,14 +13,14 @@ import LlmNodePromptField from "@/app/components/chatbot/LlmNodePromptField";
 
 const PORT_LABEL_CLASS = "text-sm font-semibold font-mono text-text-primary";
 
-export default function LlmNode({
+export default function OnboardingNode({
   id,
   data,
   selected,
-}: NodeProps<ChatbotLlmNode>) {
+}: NodeProps<ChatbotOnboardingNode>) {
   const { updateNodeData } = useChatbotFlowContext();
-  const chatbotRef = useChatbotStore((s) => s.chatbotRef);
-  const update = (patch: Partial<ChatbotNodeData>) => updateNodeData(id, patch);
+  const update = (patch: Partial<OnboardingNodeData>) =>
+    updateNodeData(id, patch);
 
   return (
     <div
@@ -29,19 +30,9 @@ export default function LlmNode({
           : "border-border"
       }`}
     >
-      <div className="relative px-4 pt-3 pb-1 text-center">
-        <input
-          value={data.label}
-          onChange={(e) => update({ label: e.target.value })}
-          maxLength={CHATBOT_NAME_MAX_LENGTH}
-          placeholder="Untitled step"
-          className="nodrag w-full px-6 text-center text-base font-semibold text-text-primary bg-transparent focus:outline-none"
-        />
-        {chatbotRef && (
-          <p className="text-[11px] text-text-secondary truncate">
-            {chatbotRef}
-          </p>
-        )}
+      <div className="px-4 pt-3 pb-1 text-center">
+        <p className="text-base font-semibold text-text-primary">Onboarding</p>
+        <p className="text-[11px] text-text-secondary truncate">{id}</p>
       </div>
 
       <div className="relative px-4 py-1">
@@ -60,18 +51,18 @@ export default function LlmNode({
             hint="Saved config and version used to call the model."
           />
           <ChatConfigPicker
-            configId={data.configId}
-            version={data.configVersion ?? 0}
-            onSelect={(configId, configVersion) =>
-              update({ configId, configVersion })
+            configId={data.config_id ?? ""}
+            version={data.config_version ?? 0}
+            onSelect={(config_id, config_version) =>
+              update({ config_id, config_version })
             }
             alignLeft
           />
         </div>
 
         <LlmNodePromptField
-          value={data.systemPrompt}
-          onChange={(systemPrompt) => update({ systemPrompt })}
+          value={data.prompt ?? ""}
+          onChange={(prompt) => update({ prompt })}
         />
       </div>
 
diff --git a/app/components/chatbot/TerminalNode.tsx b/app/components/chatbot/TerminalNode.tsx
index fac24cc8..26ee6aa8 100644
--- a/app/components/chatbot/TerminalNode.tsx
+++ b/app/components/chatbot/TerminalNode.tsx
@@ -4,14 +4,11 @@ import { Handle, NodeProps, Position } from "@xyflow/react";
 import { ChatbotTerminalNode } from "@/app/lib/types/chatbot";
 import { FLOW_HANDLE_STYLE } from "@/app/components/chatbot/flowHandleStyle";
 
-export default function TerminalNode({
-  type,
-  data,
-}: NodeProps<ChatbotTerminalNode>) {
-  const isInput = type === "flowInput";
+export default function TerminalNode({ type }: NodeProps<ChatbotTerminalNode>) {
+  const isInput = type === "input";
   return (
     <div className="px-4 py-2.5 rounded-lg border border-border bg-bg-primary shadow-sm text-sm font-semibold text-text-primary">
-      {data.label}
+      {isInput ? "Input" : "Output"}
       <Handle
         type={isInput ? "source" : "target"}
         position={isInput ? Position.Right : Position.Left}
diff --git a/app/components/chatbot/index.ts b/app/components/chatbot/index.ts
index 2662695d..061c145f 100644
--- a/app/components/chatbot/index.ts
+++ b/app/components/chatbot/index.ts
@@ -2,3 +2,6 @@ export { default as ChatbotFlowCanvas } from "./ChatbotFlowCanvas";
 export { default as ChatbotChatWindow } from "./ChatbotChatWindow";
 export { default as ChatbotBreadcrumb } from "./ChatbotBreadcrumb";
 export { default as ChatbotStatusBadge } from "./ChatbotStatusBadge";
+export { default as ChatbotVersionPill } from "./ChatbotVersionPill";
+export { default as ChatbotList } from "./ChatbotList";
+export { default as CreateChatbotModal } from "./CreateChatbotModal";
diff --git a/app/globals.css b/app/globals.css
index d8355ba2..a2c4d002 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -276,3 +276,16 @@ html {
   scrollbar-color: color-mix(in srgb, var(--color-accent-primary) 50%, white)
     transparent;
 }
+
+.chatbot-flow {
+  --xy-node-border: none;
+  --xy-node-background-color: transparent;
+  --xy-node-boxshadow-hover: none;
+  --xy-node-boxshadow-selected: none;
+}
+
+.chatbot-flow .react-flow__node-input,
+.chatbot-flow .react-flow__node-output {
+  padding: 0;
+  width: auto;
+}
diff --git a/app/hooks/chatbot/useChatbot.ts b/app/hooks/chatbot/useChatbot.ts
new file mode 100644
index 00000000..7ca71c5d
--- /dev/null
+++ b/app/hooks/chatbot/useChatbot.ts
@@ -0,0 +1,32 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useAuth } from "@/app/lib/context/AuthContext";
+import { getChatbot } from "@/app/lib/chatbotClient";
+import { Chatbot } from "@/app/lib/types/chatbot";
+
+export function useChatbot(chatbotId: string) {
+  const { activeKey, isAuthenticated, isHydrated } = useAuth();
+  const apiKey = activeKey?.key ?? "";
+  const [chatbot, setChatbot] = useState<Chatbot | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!isHydrated || !isAuthenticated) return;
+    let cancelled = false;
+    getChatbot(chatbotId, apiKey)
+      .then((bot) => {
+        if (!cancelled) setChatbot(bot);
+      })
+      .catch((err) => {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : "Chatbot not found.");
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [chatbotId, apiKey, isAuthenticated, isHydrated]);
+
+  return { chatbot, error };
+}
diff --git a/app/hooks/chatbot/useChatbotFlow.ts b/app/hooks/chatbot/useChatbotFlow.ts
index b92d8145..97fa8125 100644
--- a/app/hooks/chatbot/useChatbotFlow.ts
+++ b/app/hooks/chatbot/useChatbotFlow.ts
@@ -1,116 +1,96 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { Edge, useNodesState } from "@xyflow/react";
-import { DEFAULT_CHATBOT_NAME } from "@/app/lib/constants";
-import { useChatbotStore } from "@/app/lib/store/chatbot";
+import { useAuth } from "@/app/lib/context/AuthContext";
+import { useToast } from "@/app/hooks/useToast";
 import {
+  getChatbotFlow,
+  publishChatbotFlow,
+  saveChatbotFlow,
+} from "@/app/lib/chatbotClient";
+import {
+  createDefaultFlow,
+  flowSignature,
+  toFlowPayload,
+} from "@/app/lib/utils/chatbotFlow";
+import {
+  ChatbotFlowGraph,
   ChatbotFlowNode,
-  ChatbotLlmNode,
-  ChatbotNodeData,
+  OnboardingNodeData,
 } from "@/app/lib/types/chatbot";
 
-const INPUT_ID = "input";
-const OUTPUT_ID = "output";
-const LLM_ID = "LLMResponseWithPrompt-1";
-
-const DEFAULT_NODE_DATA: ChatbotNodeData = {
-  label: DEFAULT_CHATBOT_NAME,
-  systemPrompt: "",
-  configId: "",
-  configVersion: undefined,
-};
-
-function createInitialFlow(): { nodes: ChatbotFlowNode[]; edges: Edge[] } {
-  return {
-    nodes: [
-      {
-        id: INPUT_ID,
-        type: "flowInput",
-        position: { x: 0, y: 55 },
-        data: { label: "Input" },
-        deletable: false,
-      },
-      {
-        id: LLM_ID,
-        type: "llm",
-        position: { x: 260, y: 0 },
-        data: DEFAULT_NODE_DATA,
-        deletable: false,
-      },
-      {
-        id: OUTPUT_ID,
-        type: "flowOutput",
-        position: { x: 640, y: 230 },
-        data: { label: "Output" },
-        deletable: false,
-      },
-    ],
-    edges: [
-      { id: `${INPUT_ID}->${LLM_ID}`, source: INPUT_ID, target: LLM_ID },
-      { id: `${LLM_ID}->${OUTPUT_ID}`, source: LLM_ID, target: OUTPUT_ID },
-    ],
-  };
-}
-
-function isLlmNode(node: ChatbotFlowNode): node is ChatbotLlmNode {
-  return node.type === "llm";
-}
-
-function isSameData(a: ChatbotNodeData, b: ChatbotNodeData): boolean {
-  return (
-    a.label === b.label &&
-    a.systemPrompt === b.systemPrompt &&
-    a.configId === b.configId &&
-    (a.configVersion ?? null) === (b.configVersion ?? null)
-  );
+interface FlowVersion {
+  version: number;
+  isLive: boolean;
 }
 
-/**
- * Owns the canvas graph (Input → LLM → Output) and tracks the LLM node's
- * edits against the last saved version, for the Save / Discard buttons.
- */
-export function useChatbotFlow() {
-  const [initial] = useState(createInitialFlow);
-  const [nodes, setNodes, onNodesChange] = useNodesState<ChatbotFlowNode>(
-    initial.nodes,
-  );
-  // The graph is fixed (Input → LLM → Output), so edges never change.
-  const edges = initial.edges;
+export function useChatbotFlow(chatbotId: string) {
+  const { activeKey, isAuthenticated, isHydrated } = useAuth();
+  const apiKey = activeKey?.key ?? "";
+  const toast = useToast();
 
-  const savedFlow = useChatbotStore((s) => s.savedFlow);
-  const hasHydrated = useChatbotStore((s) => s.hasHydrated);
-  const setSavedFlow = useChatbotStore((s) => s.setSavedFlow);
+  const [nodes, setNodes, onNodesChange] = useNodesState<ChatbotFlowNode>([]);
+  const [edges, setEdges] = useState<Edge[]>([]);
+  const [saved, setSaved] = useState<ChatbotFlowGraph | null>(null);
+  const [flowVersion, setFlowVersion] = useState<FlowVersion | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isPublishing, setIsPublishing] = useState(false);
 
-  const llmNode = nodes.find(isLlmNode) ?? null;
-  const baseline = savedFlow ?? DEFAULT_NODE_DATA;
-  const isDirty = !!llmNode && !isSameData(llmNode.data, baseline);
-
-  const replaceNodeData = useCallback(
-    (data: ChatbotNodeData) => {
-      setNodes((prev) =>
-        prev.map((n) => (isLlmNode(n) ? { ...n, data: { ...data } } : n)),
-      );
+  // Nodes are fixed (no add/delete), so lock them on the canvas.
+  const showFlow = useCallback(
+    (flow: ChatbotFlowGraph) => {
+      setNodes(flow.nodes.map((n) => ({ ...n, deletable: false })));
+      setEdges(flow.edges);
+      setSaved(flow);
     },
     [setNodes],
   );
 
-  // Mirror the saved flow into the node whenever it changes (localStorage
-  // rehydration, or the latest session restored from the backend), unless the
-  // user has unsaved edits against the previously applied version.
-  const appliedRef = useRef<ChatbotNodeData>(DEFAULT_NODE_DATA);
+  // Load: saved flow, or a fresh default canvas when nothing is saved yet.
   useEffect(() => {
-    if (!hasHydrated || !savedFlow || !llmNode) return;
-    const untouched = isSameData(llmNode.data, appliedRef.current);
-    appliedRef.current = savedFlow;
-    if (untouched) replaceNodeData(savedFlow);
-  }, [hasHydrated, savedFlow, replaceNodeData]);
+    if (!isHydrated || !isAuthenticated) return;
+    let cancelled = false;
+    setIsLoading(true);
+    getChatbotFlow(chatbotId, apiKey)
+      .then((flow) => {
+        if (cancelled) return;
+        if (flow) {
+          showFlow({ nodes: flow.nodes, edges: flow.edges });
+          setFlowVersion({ version: flow.version, isLive: flow.is_live });
+        } else {
+          showFlow(createDefaultFlow());
+        }
+      })
+      .catch((err) => {
+        if (!cancelled) {
+          toast.error(
+            err instanceof Error ? err.message : "Failed to load the flow.",
+          );
+        }
+      })
+      .finally(() => {
+        if (!cancelled) setIsLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [chatbotId, apiKey, isAuthenticated, isHydrated, showFlow]);
+
+  const savedSignature = useMemo(
+    () => (saved ? flowSignature(saved) : null),
+    [saved],
+  );
+  const isDirty =
+    savedSignature !== null &&
+    flowSignature({ nodes, edges }) !== savedSignature;
 
   const updateNodeData = useCallback(
-    (id: string, patch: Partial<ChatbotNodeData>) => {
+    (id: string, patch: Partial<OnboardingNodeData>) => {
       setNodes((prev) =>
         prev.map((n) =>
-          n.id === id && isLlmNode(n)
+          n.id === id && n.type === "onboarding"
             ? { ...n, data: { ...n.data, ...patch } }
             : n,
         ),
@@ -119,24 +99,64 @@ export function useChatbotFlow() {
     [setNodes],
   );
 
-  const discard = useCallback(
-    () => replaceNodeData(baseline),
-    [baseline, replaceNodeData],
-  );
+  /**
+   * Saves the canvas. The first save goes live directly (and is fully
+   * validated, so it may fail with 422); later saves are drafts.
+   */
+  const save = useCallback(async (): Promise<boolean> => {
+    const payload = toFlowPayload(nodes, edges);
+    setIsSaving(true);
+    try {
+      const flow = await saveChatbotFlow(chatbotId, payload, apiKey);
+      setSaved(payload);
+      setFlowVersion({ version: flow.version, isLive: flow.is_live });
+      toast.success(
+        flow.is_live
+          ? `Saved and live (version ${flow.version}).`
+          : `Draft saved (version ${flow.version}). Publish to make it live.`,
+      );
+      return true;
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : "Failed to save the flow.",
+      );
+      return false;
+    } finally {
+      setIsSaving(false);
+    }
+  }, [apiKey, chatbotId, edges, nodes, toast]);
 
-  const markSaved = useCallback(
-    (data: ChatbotNodeData) => setSavedFlow({ ...data }),
-    [setSavedFlow],
-  );
+  const publish = useCallback(async (): Promise<void> => {
+    setIsPublishing(true);
+    try {
+      const flow = await publishChatbotFlow(chatbotId, apiKey);
+      setFlowVersion({ version: flow.version, isLive: flow.is_live });
+      toast.success(`Published version ${flow.version}.`);
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : "Failed to publish the flow.",
+      );
+    } finally {
+      setIsPublishing(false);
+    }
+  }, [apiKey, chatbotId, toast]);
+
+  const discard = useCallback(() => {
+    if (saved) showFlow(saved);
+  }, [saved, showFlow]);
 
   return {
     nodes,
     edges,
     onNodesChange,
     updateNodeData,
-    llmNode,
+    isLoading,
     isDirty,
+    isSaving,
+    isPublishing,
+    flowVersion,
+    save,
+    publish,
     discard,
-    markSaved,
   };
 }
diff --git a/app/hooks/chatbot/useChatbotSession.ts b/app/hooks/chatbot/useChatbotSession.ts
index b16b3547..83fceb8e 100644
--- a/app/hooks/chatbot/useChatbotSession.ts
+++ b/app/hooks/chatbot/useChatbotSession.ts
@@ -1,129 +1,45 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { useToast } from "@/app/hooks/useToast";
 import { useChatbotReplyStream } from "@/app/hooks/chatbot/useChatbotReplyStream";
 import { useChatbotPendingReply } from "@/app/hooks/chatbot/useChatbotPendingReply";
-import {
-  useChatbotStore,
-  useChatbotStoreHydration,
-} from "@/app/lib/store/chatbot";
-import {
-  CHATBOT_REPLY_TIMEOUT_MS,
-  DEFAULT_CHATBOT_NAME,
-} from "@/app/lib/constants";
+import { CHATBOT_REPLY_TIMEOUT_MS } from "@/app/lib/constants";
 import {
   createChatbotSession,
-  getLatestChatbotSession,
-  sendChatbotSessionMessage,
+  sendChatbotMessage,
 } from "@/app/lib/chatbotClient";
-import {
-  readChatbotSessionCookie,
-  writeChatbotSessionCookie,
-} from "@/app/lib/utils/chatbotSessionCookie";
 import {
   ChatbotChatMessage,
-  ChatbotNodeData,
-  ChatbotSessionEvent,
   ChatbotCompletionStatus,
+  ChatbotSessionEvent,
   ChatbotSessionStatus,
 } from "@/app/lib/types/chatbot";
 
-const ALREADY_STARTED_RE = /required once the session has started/i;
-const INACTIVE_RE = /session is inactive/i;
+const INACTIVE_RE = /inactive/i;
 
-/**
- * Manages the chatbot session: create it, send messages, show bot replies.
- * Pass `listen: false` on pages that don't chat (e.g. the canvas).
- */
-export function useChatbotSession({
-  listen = true,
-}: { listen?: boolean } = {}) {
-  const { activeKey, currentUser, isAuthenticated } = useAuth();
+export function useChatbotSession(chatbotId: string) {
+  const { activeKey, currentUser } = useAuth();
   const apiKey = activeKey?.key ?? "";
   const toast = useToast();
+  const contactRef = currentUser?.id ? `kaapi-user-${currentUser.id}` : null;
 
-  useChatbotStoreHydration();
-  const hasHydrated = useChatbotStore((s) => s.hasHydrated);
-  const sessionId = useChatbotStore((s) => s.sessionId);
-  const setSessionId = useChatbotStore((s) => s.setSessionId);
-  const chatbotRef = useChatbotStore((s) => s.chatbotRef);
-  const setChatbotRef = useChatbotStore((s) => s.setChatbotRef);
-  const setSavedFlow = useChatbotStore((s) => s.setSavedFlow);
-
+  const [sessionId, setSessionId] = useState<string | null>(null);
   const [messages, setMessages] = useState<ChatbotChatMessage[]>([]);
-  const lastEventSeqRef = useRef(0);
-  const [sessionName, setSessionName] = useState<string | null>(null);
   const [status, setStatus] = useState<ChatbotSessionStatus | null>(null);
   const [completionStatus, setCompletionStatus] =
     useState<ChatbotCompletionStatus | null>(null);
-  const [isCreating, setIsCreating] = useState(false);
+  const [isStarting, setIsStarting] = useState(false);
+  const lastEventSeqRef = useRef(0);
   const pending = useChatbotPendingReply(CHATBOT_REPLY_TIMEOUT_MS, () =>
     toast.error("No reply from the chatbot yet. Try sending again."),
   );
   const { clear: clearPending, start: startPending } = pending;
 
-  const contactRef = currentUser?.id ? `kaapi-user-${currentUser.id}` : null;
-
-  // New session = fresh chat.
-  useEffect(() => {
-    setMessages([]);
-    lastEventSeqRef.current = 0;
-  }, [sessionId]);
-
-  const activateSession = useCallback(
-    (id: string) => {
-      writeChatbotSessionCookie(id);
-      setSessionId(id);
-    },
-    [setSessionId],
-  );
-
-  // On load: pick up the last session (cookie, else backend) and fill the flow from it.
-  useEffect(() => {
-    if (!hasHydrated || !isAuthenticated || !contactRef) return;
-    const cookieId = readChatbotSessionCookie();
-    if (cookieId) setSessionId(cookieId);
-
-    let cancelled = false;
-    getLatestChatbotSession(contactRef, chatbotRef, apiKey).then((summary) => {
-      if (cancelled || !summary) return;
-      if (cookieId && cookieId !== summary.session_id) return;
-      if (!cookieId) activateSession(summary.session_id);
-      const name = summary.name || DEFAULT_CHATBOT_NAME;
-      setChatbotRef(summary.chatbot_ref);
-      setSavedFlow({
-        label: name,
-        configId: summary.config_id,
-        configVersion: summary.config_version ?? undefined,
-        systemPrompt:
-          summary.system_prompt ??
-          useChatbotStore.getState().savedFlow?.systemPrompt ??
-          "",
-      });
-      setSessionName(name);
-      setStatus(summary.status);
-      setCompletionStatus(summary.completion_status);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [
-    hasHydrated,
-    isAuthenticated,
-    contactRef,
-    chatbotRef,
-    apiKey,
-    activateSession,
-    setSessionId,
-    setChatbotRef,
-    setSavedFlow,
-  ]);
-
   const handleEvent = useCallback(
     (event: ChatbotSessionEvent, seq: number) => {
-      if (seq <= lastEventSeqRef.current) return;
+      if (seq <= lastEventSeqRef.current) return; // already shown
       lastEventSeqRef.current = seq;
       clearPending();
       if (!event.success) {
@@ -143,134 +59,63 @@ export function useChatbotSession({
     [clearPending, toast],
   );
 
-  useChatbotReplyStream(hasHydrated && listen ? sessionId : null, handleEvent);
-
-  const startSession = useCallback(
-    async (
-      data: ChatbotNodeData,
-      { keepPending = false }: { keepPending?: boolean } = {},
-    ): Promise<string | null> => {
-      if (!contactRef) {
-        toast.error("Couldn't identify your account. Please log in again.");
-        return null;
-      }
-      const name = data.label.trim() || DEFAULT_CHATBOT_NAME;
-      setIsCreating(true);
-      try {
-        const created = await createChatbotSession(
-          {
-            name,
-            chatbot_ref: chatbotRef ?? undefined,
-            config_id: data.configId,
-            config_version: data.configVersion,
-            contact_ref: contactRef,
-            system_prompt: data.systemPrompt,
-          },
-          apiKey,
-        );
-        setChatbotRef(created.chatbotRef);
-        if (!keepPending) clearPending(); // keepPending: keep typing dots during a retry
-        activateSession(created.sessionId);
-        setSessionName(name);
-        setStatus("active");
-        setCompletionStatus("in_progress");
-        return created.sessionId;
-      } catch (err) {
-        toast.error(
-          err instanceof Error ? err.message : "Failed to save the flow.",
-        );
-        return null;
-      } finally {
-        setIsCreating(false);
-      }
-    },
-    [
-      activateSession,
-      apiKey,
-      chatbotRef,
-      clearPending,
-      contactRef,
-      setChatbotRef,
-      toast,
-    ],
-  );
-
-  /** Sends one message (shown right away); removes it again if sending fails. */
-  const queueTurn = useCallback(
-    async (id: string, message?: string): Promise<void> => {
-      const optimisticId = message ? crypto.randomUUID() : null;
-      if (optimisticId && message) {
-        setMessages((prev) => [
-          ...prev,
-          { id: optimisticId, role: "user", content: message },
-        ]);
-      }
-      startPending();
-      try {
-        await sendChatbotSessionMessage(id, message, apiKey);
-      } catch (err) {
-        if (optimisticId) {
-          setMessages((prev) => prev.filter((m) => m.id !== optimisticId));
-        }
-        throw err;
-      }
-    },
-    [apiKey, startPending],
-  );
+  useChatbotReplyStream(sessionId, handleEvent);
+
+  const startChat = useCallback(async (): Promise<void> => {
+    if (!contactRef) {
+      toast.error("Couldn't identify your account. Please log in again.");
+      return;
+    }
+    setIsStarting(true);
+    startPending();
+    try {
+      const created = await createChatbotSession(chatbotId, contactRef, apiKey);
+      lastEventSeqRef.current = 0;
+      setMessages([]);
+      setSessionId(created.session_id);
+      setStatus("active");
+      setCompletionStatus("in_progress");
+      await sendChatbotMessage(created.session_id, undefined, apiKey);
+    } catch (err) {
+      clearPending();
+      toast.error(
+        err instanceof Error ? err.message : "Failed to start the chat.",
+      );
+    } finally {
+      setIsStarting(false);
+    }
+  }, [apiKey, chatbotId, clearPending, contactRef, startPending, toast]);
 
-  /**
-   * Sends a user message, or no message to get the bot's greeting.
-   * If the session already started elsewhere, starts a fresh one instead.
-   */
   const send = useCallback(
-    async (message?: string): Promise<boolean> => {
-      if (!sessionId) {
-        toast.error("Save the flow first to start a session.");
-        return false;
-      }
-      const savedFlow = useChatbotStore.getState().savedFlow;
+    async (message: string): Promise<boolean> => {
+      if (!sessionId) return false;
+      const id = crypto.randomUUID();
+      setMessages((prev) => [...prev, { id, role: "user", content: message }]);
+      startPending();
       try {
-        await queueTurn(sessionId, message);
+        await sendChatbotMessage(sessionId, message, apiKey);
         return true;
       } catch (err) {
+        setMessages((prev) => prev.filter((m) => m.id !== id));
+        clearPending();
         const errorMessage =
           err instanceof Error ? err.message : "Failed to send the message.";
         if (INACTIVE_RE.test(errorMessage)) setStatus("inactive");
-        if (message || !savedFlow || !ALREADY_STARTED_RE.test(errorMessage)) {
-          clearPending();
-          toast.error(errorMessage);
-          return false;
-        }
-      }
-      // Retry on a fresh session (typing dots stay on, so no flicker).
-      const freshId = await startSession(savedFlow, { keepPending: true });
-      if (!freshId) {
-        clearPending();
-        return false;
-      }
-      try {
-        await queueTurn(freshId);
-        return true;
-      } catch (err) {
-        clearPending();
-        toast.error(
-          err instanceof Error ? err.message : "Failed to start the chat.",
-        );
+        toast.error(errorMessage);
         return false;
       }
     },
-    [clearPending, queueTurn, sessionId, startSession, toast],
+    [apiKey, clearPending, sessionId, startPending, toast],
   );
 
   return {
     sessionId,
-    sessionName,
+    messages,
     status,
     completionStatus,
-    messages,
     isPending: pending.isPending,
-    isCreating,
-    startSession,
+    isStarting,
+    startChat,
     send,
   };
 }
diff --git a/app/hooks/chatbot/useChatbots.ts b/app/hooks/chatbot/useChatbots.ts
new file mode 100644
index 00000000..e1eefa92
--- /dev/null
+++ b/app/hooks/chatbot/useChatbots.ts
@@ -0,0 +1,45 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { useAuth } from "@/app/lib/context/AuthContext";
+import { createChatbot, listChatbots } from "@/app/lib/chatbotClient";
+import { Chatbot } from "@/app/lib/types/chatbot";
+
+export function useChatbots() {
+  const { activeKey, isAuthenticated, isHydrated } = useAuth();
+  const apiKey = activeKey?.key ?? "";
+
+  const [chatbots, setChatbots] = useState<Chatbot[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!isHydrated || !isAuthenticated) return;
+    let cancelled = false;
+    setIsLoading(true);
+    listChatbots(apiKey)
+      .then((list) => {
+        if (!cancelled) setChatbots(list);
+      })
+      .catch((err) => {
+        if (!cancelled) {
+          setError(
+            err instanceof Error ? err.message : "Failed to load chatbots.",
+          );
+        }
+      })
+      .finally(() => {
+        if (!cancelled) setIsLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [apiKey, isAuthenticated, isHydrated]);
+
+  const create = useCallback(
+    (name: string) => createChatbot(name, apiKey),
+    [apiKey],
+  );
+
+  return { chatbots, isLoading, error, create };
+}
diff --git a/app/lib/apiClient.ts b/app/lib/apiClient.ts
index 219dd435..96d6ebc3 100644
--- a/app/lib/apiClient.ts
+++ b/app/lib/apiClient.ts
@@ -102,7 +102,7 @@ function stringifyValidationDetail(value: unknown): string {
     .join("; ");
 }
 
-function extractErrorMessage(
+export function extractErrorMessage(
   body: Record<string, unknown>,
   fallback: string,
 ): string {
diff --git a/app/lib/chatbotClient.ts b/app/lib/chatbotClient.ts
index f1c2a4fe..84a7cb70 100644
--- a/app/lib/chatbotClient.ts
+++ b/app/lib/chatbotClient.ts
@@ -1,56 +1,119 @@
-import { apiFetch } from "@/app/lib/apiClient";
 import {
-  ChatbotSessionSummary,
-  ChatbotSessionSummaryResponse,
-  CreateChatbotSessionRequest,
-  CreateChatbotSessionResponse,
-  SendChatbotSessionMessageResponse,
+  apiFetch,
+  apiFetchResponse,
+  extractErrorMessage,
+} from "@/app/lib/apiClient";
+import {
+  Chatbot,
+  ChatbotFlow,
+  ChatbotFlowGraph,
+  ChatbotFlowResponse,
+  ChatbotListResponse,
+  ChatbotResponse,
+  ChatbotSessionCreated,
+  ChatbotSessionCreatedResponse,
+  SendChatbotMessageResponse,
 } from "@/app/lib/types/chatbot";
 
-export async function createChatbotSession(
-  body: CreateChatbotSessionRequest,
+function unwrap<T>(
+  res: { success: boolean; data: T | null; error?: string | null },
+  fallback: string,
+): T {
+  if (!res.success || res.data === null) throw new Error(res.error || fallback);
+  return res.data;
+}
+
+export async function listChatbots(apiKey: string): Promise<Chatbot[]> {
+  const res = await apiFetch<ChatbotListResponse>(
+    "/api/chatbots?skip=0&limit=100",
+    apiKey,
+  );
+  return unwrap(res, "Failed to load chatbots.");
+}
+
+export async function createChatbot(
+  name: string,
+  apiKey: string,
+): Promise<Chatbot> {
+  const res = await apiFetch<ChatbotResponse>("/api/chatbots", apiKey, {
+    method: "POST",
+    body: JSON.stringify({ name }),
+  });
+  return unwrap(res, "Failed to create the chatbot.");
+}
+
+export async function getChatbot(id: string, apiKey: string): Promise<Chatbot> {
+  const res = await apiFetch<ChatbotResponse>(
+    `/api/chatbots/${encodeURIComponent(id)}`,
+    apiKey,
+  );
+  return unwrap(res, "Failed to load the chatbot.");
+}
+
+export async function getChatbotFlow(
+  chatbotId: string,
   apiKey: string,
-): Promise<{ sessionId: string; chatbotRef: string }> {
-  const res = await apiFetch<CreateChatbotSessionResponse>(
-    "/api/chatbot/sessions",
+): Promise<ChatbotFlow | null> {
+  const res = await apiFetchResponse(
+    `/api/chatbots/${encodeURIComponent(chatbotId)}/flow`,
     apiKey,
-    { method: "POST", body: JSON.stringify(body) },
   );
-  if (!res.success || !res.data?.session_id) {
-    throw new Error(res.error || "Failed to create the chatbot session.");
+  if (res.status === 404) return null;
+  const body = (await res.json().catch(() => ({}))) as Record<string, unknown>;
+  if (!res.ok) {
+    throw new Error(extractErrorMessage(body, "Failed to load the flow."));
   }
-  return {
-    sessionId: res.data.session_id,
-    chatbotRef: res.data.chatbot_ref,
-  };
+  return unwrap(
+    body as unknown as ChatbotFlowResponse,
+    "Failed to load the flow.",
+  );
+}
+
+export async function saveChatbotFlow(
+  chatbotId: string,
+  flow: ChatbotFlowGraph,
+  apiKey: string,
+): Promise<ChatbotFlow> {
+  const res = await apiFetch<ChatbotFlowResponse>(
+    `/api/chatbots/${encodeURIComponent(chatbotId)}/flow`,
+    apiKey,
+    { method: "PUT", body: JSON.stringify(flow) },
+  );
+  return unwrap(res, "Failed to save the flow.");
 }
 
-export async function getLatestChatbotSession(
+export async function publishChatbotFlow(
+  chatbotId: string,
+  apiKey: string,
+): Promise<ChatbotFlow> {
+  const res = await apiFetch<ChatbotFlowResponse>(
+    `/api/chatbots/${encodeURIComponent(chatbotId)}/flow/publish`,
+    apiKey,
+    { method: "POST" },
+  );
+  return unwrap(res, "Failed to publish the flow.");
+}
+
+export async function createChatbotSession(
+  chatbotId: string,
   contactRef: string,
-  chatbotRef: string | null,
   apiKey: string,
-): Promise<ChatbotSessionSummary | null> {
-  try {
-    const params = new URLSearchParams({ contact_ref: contactRef });
-    if (chatbotRef) params.set("chatbot_ref", chatbotRef);
-    const res = await apiFetch<ChatbotSessionSummaryResponse>(
-      `/api/chatbot/sessions?${params}`,
-      apiKey,
-    );
-    return res.success ? (res.data ?? null) : null;
-  } catch {
-    // 404 = no session for this contact yet.
-    return null;
-  }
+): Promise<ChatbotSessionCreated> {
+  const res = await apiFetch<ChatbotSessionCreatedResponse>(
+    `/api/chatbots/${encodeURIComponent(chatbotId)}/sessions`,
+    apiKey,
+    { method: "POST", body: JSON.stringify({ contact_ref: contactRef }) },
+  );
+  return unwrap(res, "Failed to start a chat session.");
 }
 
-export async function sendChatbotSessionMessage(
+export async function sendChatbotMessage(
   sessionId: string,
   message: string | undefined,
   apiKey: string,
 ): Promise<void> {
-  const res = await apiFetch<SendChatbotSessionMessageResponse>(
-    `/api/chatbot/sessions/${encodeURIComponent(sessionId)}/message`,
+  const res = await apiFetch<SendChatbotMessageResponse>(
+    `/api/chatbots/sessions/${encodeURIComponent(sessionId)}/message`,
     apiKey,
     { method: "POST", body: JSON.stringify(message ? { message } : {}) },
   );
diff --git a/app/lib/constants.ts b/app/lib/constants.ts
index 3dddc2f9..df03d4ec 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -23,7 +23,6 @@ export const STORAGE_KEYS = {
   DOCUMENT_SIZES: "document_file_sizes",
   SIDEBAR_MENUS: "sidebar-expanded-menus",
   CHAT_STATE: "kaapi_chat_state",
-  CHATBOT_STATE: "kaapi_chatbot_state",
 } as const;
 
 export const COOKIE_KEYS = {
@@ -31,7 +30,6 @@ export const COOKIE_KEYS = {
   FEATURES: "kaapi_features",
   API_KEY: "kaapi_api_key",
   API_KEY_META: "kaapi_api_key_meta",
-  CHATBOT_SESSION: "kaapi_chatbot_session",
 } as const;
 
 export const AUTH_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
diff --git a/app/lib/context/AuthContext.tsx b/app/lib/context/AuthContext.tsx
index 1e21a291..5f2b953c 100644
--- a/app/lib/context/AuthContext.tsx
+++ b/app/lib/context/AuthContext.tsx
@@ -22,8 +22,6 @@ import {
   STORAGE_KEYS,
 } from "@/app/lib/constants";
 import { useChatStore } from "@/app/lib/store/chat";
-import { useChatbotStore } from "@/app/lib/store/chatbot";
-import { clearChatbotSessionCookie } from "@/app/lib/utils/chatbotSessionCookie";
 import { clearAllStorage, readClientCookie } from "@/app/lib/utils";
 export type { User, GoogleProfile, Session } from "@/app/lib/types/auth";
 
@@ -147,8 +145,6 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     setCurrentUser(null);
     clearAllStorage();
     useChatStore.getState().reset();
-    useChatbotStore.getState().reset();
-    clearChatbotSessionCookie();
     setApiKeys([]);
     window.dispatchEvent(new Event("kaapi-auth-changed"));
     window.location.replace("/chat");
diff --git a/app/lib/store/chatbot.ts b/app/lib/store/chatbot.ts
deleted file mode 100644
index ee5fb72a..00000000
--- a/app/lib/store/chatbot.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-import { create } from "zustand";
-import { createJSONStorage, persist } from "zustand/middleware";
-import { STORAGE_KEYS } from "@/app/lib/constants";
-import { ChatbotNodeData } from "@/app/lib/types/chatbot";
-
-interface ChatbotState {
-  savedFlow: ChatbotNodeData | null;
-  chatbotRef: string | null;
-  sessionId: string | null;
-  hasHydrated: boolean;
-}
-
-interface ChatbotActions {
-  setSavedFlow: (flow: ChatbotNodeData) => void;
-  setChatbotRef: (ref: string) => void;
-  setSessionId: (sessionId: string) => void;
-  setHasHydrated: (value: boolean) => void;
-  reset: () => void;
-}
-
-const INITIAL_STATE: ChatbotState = {
-  savedFlow: null,
-  chatbotRef: null,
-  sessionId: null,
-  hasHydrated: false,
-};
-
-type PersistedChatbotState = Pick<
-  ChatbotState,
-  "savedFlow" | "chatbotRef" | "sessionId"
->;
-
-export const useChatbotStore = create<ChatbotState & ChatbotActions>()(
-  persist(
-    (set) => ({
-      ...INITIAL_STATE,
-
-      setSavedFlow: (flow) => set({ savedFlow: flow }),
-
-      setChatbotRef: (ref) => set({ chatbotRef: ref }),
-
-      setSessionId: (sessionId) => set({ sessionId }),
-
-      setHasHydrated: (value) => set({ hasHydrated: value }),
-
-      reset: () => set({ ...INITIAL_STATE, hasHydrated: true }),
-    }),
-    {
-      name: STORAGE_KEYS.CHATBOT_STATE,
-      version: 2,
-      storage: createJSONStorage(() => localStorage),
-      skipHydration: true,
-      partialize: (state): PersistedChatbotState => ({
-        savedFlow: state.savedFlow,
-        chatbotRef: state.chatbotRef,
-        sessionId: state.sessionId,
-      }),
-      onRehydrateStorage: () => (state) => {
-        state?.setHasHydrated(true);
-      },
-    },
-  ),
-);
-
-/**
- * Loads the persisted chatbot state and keeps it in sync across tabs, so a
- * chat tab follows a session created by Save on the canvas tab.
- */
-export function useChatbotStoreHydration(): void {
-  useEffect(() => {
-    useChatbotStore.persist.rehydrate();
-    const onStorage = (e: StorageEvent) => {
-      if (e.key === STORAGE_KEYS.CHATBOT_STATE) {
-        useChatbotStore.persist.rehydrate();
-      }
-    };
-    window.addEventListener("storage", onStorage);
-    return () => window.removeEventListener("storage", onStorage);
-  }, []);
-}
diff --git a/app/lib/types/chatbot.ts b/app/lib/types/chatbot.ts
index 1cefe99f..8e67ebe6 100644
--- a/app/lib/types/chatbot.ts
+++ b/app/lib/types/chatbot.ts
@@ -1,84 +1,77 @@
-import type { Node } from "@xyflow/react";
+import type { Edge, Node } from "@xyflow/react";
+import type { APIResponse } from "@/app/lib/types/configs";
 
-export type ChatbotNodeData = {
-  label: string;
-  systemPrompt: string;
-  configId: string;
-  configVersion?: number;
+export interface Chatbot {
+  id: string;
+  name: string;
+  organization_id: number;
+  project_id: number;
+  inserted_at: string;
+  updated_at: string;
+}
+
+export type OnboardingNodeData = {
+  config_id?: string;
+  config_version?: number;
+  prompt?: string;
 };
 
-export type ChatbotLlmNode = Node<ChatbotNodeData, "llm">;
+export type ChatbotOnboardingNode = Node<OnboardingNodeData, "onboarding">;
 
 export type ChatbotTerminalNode = Node<
-  { label: string },
-  "flowInput" | "flowOutput"
+  Record<string, unknown>,
+  "input" | "output"
 >;
 
-export type ChatbotFlowNode = ChatbotLlmNode | ChatbotTerminalNode;
-
-export type ChatbotSessionStatus = "active" | "inactive";
-
-export type ChatbotCompletionStatus = "in_progress" | "complete" | "abandoned";
+export type ChatbotFlowNode = ChatbotOnboardingNode | ChatbotTerminalNode;
 
-export type ChatbotCollectedFields = Record<string, unknown>;
+export interface ChatbotFlowGraph {
+  nodes: ChatbotFlowNode[];
+  edges: Edge[];
+}
 
-export interface ChatbotChatMessage {
+export interface ChatbotFlow extends ChatbotFlowGraph {
   id: string;
-  role: "user" | "assistant";
-  content: string;
+  chatbot_id: string;
+  version: number;
+  is_live: boolean;
+  inserted_at: string;
+  updated_at: string;
 }
 
-export interface CreateChatbotSessionRequest {
-  name: string;
-  chatbot_ref?: string;
-  config_id: string;
-  config_version?: number;
-  contact_ref: string;
-  system_prompt: string;
+export interface ChatbotSessionCreated {
+  session_id: string;
+  chatbot_id: string;
+  flow_version: number;
+  active_node_id: string;
 }
 
-export interface CreateChatbotSessionResponse {
-  success: boolean;
-  data?: { session_id: string; chatbot_ref: string } | null;
-  error?: string | null;
-}
+export type ChatbotSessionStatus = "active" | "inactive";
 
-export interface ChatbotSessionSummary {
-  session_id: string;
-  name: string;
-  contact_ref: string;
-  chatbot_ref: string;
-  status: ChatbotSessionStatus;
-  completion_status: ChatbotCompletionStatus;
-  collected_fields: ChatbotCollectedFields;
-  config_id: string;
-  config_version: number | null;
-  system_prompt: string;
-  inserted_at: string;
-  updated_at: string;
-}
+export type ChatbotCompletionStatus = "in_progress" | "complete" | "abandoned";
 
-export interface ChatbotSessionSummaryResponse {
-  success: boolean;
-  data?: ChatbotSessionSummary | null;
-  error?: string | null;
+export interface ChatbotChatMessage {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
 }
 
-export interface SendChatbotSessionMessageResponse {
-  success: boolean;
-  data?: { status: string } | null;
-  error?: string | null;
-}
+export type ChatbotResponse = APIResponse<Chatbot>;
+export type ChatbotListResponse = APIResponse<Chatbot[]>;
+export type ChatbotFlowResponse = APIResponse<ChatbotFlow>;
+export type ChatbotSessionCreatedResponse = APIResponse<ChatbotSessionCreated>;
+export type SendChatbotMessageResponse = APIResponse<{ status: string }>;
 
 export interface ChatbotWebhookPayload {
   success: boolean;
   data?: {
     session_id: string;
-    chatbot_ref?: string;
+    chatbot_id?: string;
+    node_id?: string;
     reply?: string;
     status?: ChatbotSessionStatus;
     completion_status?: ChatbotCompletionStatus;
-    collected_fields?: ChatbotCollectedFields;
+    collected_fields?: Record<string, unknown>;
   } | null;
   error?: string | null;
 }
diff --git a/app/lib/utils/chatbotFlow.ts b/app/lib/utils/chatbotFlow.ts
new file mode 100644
index 00000000..d488c920
--- /dev/null
+++ b/app/lib/utils/chatbotFlow.ts
@@ -0,0 +1,45 @@
+import type { Edge } from "@xyflow/react";
+import type {
+  ChatbotFlowGraph,
+  ChatbotFlowNode,
+} from "@/app/lib/types/chatbot";
+
+const INPUT_ID = "input";
+const OUTPUT_ID = "output";
+
+function newAgentNodeId(): string {
+  return `LLMResponseWithPrompt-${Math.random().toString(16).slice(2, 7)}`;
+}
+
+export function createDefaultFlow(): ChatbotFlowGraph {
+  const agentId = newAgentNodeId();
+  return {
+    nodes: [
+      { id: INPUT_ID, type: "input", position: { x: 0, y: 55 }, data: {} },
+      { id: agentId, type: "onboarding", position: { x: 260, y: 0 }, data: {} },
+      { id: OUTPUT_ID, type: "output", position: { x: 640, y: 230 }, data: {} },
+    ],
+    edges: [
+      { id: `${INPUT_ID}->${agentId}`, source: INPUT_ID, target: agentId },
+      { id: `${agentId}->${OUTPUT_ID}`, source: agentId, target: OUTPUT_ID },
+    ],
+  };
+}
+
+export function toFlowPayload(
+  nodes: ChatbotFlowNode[],
+  edges: Edge[],
+): ChatbotFlowGraph {
+  return {
+    nodes: nodes.map(
+      ({ id, type, position, data }) =>
+        ({ id, type, position, data }) as ChatbotFlowNode,
+    ),
+    edges: edges.map(({ id, source, target }) => ({ id, source, target })),
+  };
+}
+
+export function flowSignature(flow: ChatbotFlowGraph): string {
+  const { nodes, edges } = toFlowPayload(flow.nodes, flow.edges);
+  return JSON.stringify({ nodes, edges });
+}
diff --git a/app/lib/utils/chatbotSessionCookie.ts b/app/lib/utils/chatbotSessionCookie.ts
deleted file mode 100644
index 33d46670..00000000
--- a/app/lib/utils/chatbotSessionCookie.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { AUTH_COOKIE_MAX_AGE, COOKIE_KEYS } from "@/app/lib/constants";
-import { readClientCookie } from "@/app/lib/utils";
-
-export function readChatbotSessionCookie(): string | null {
-  return readClientCookie(COOKIE_KEYS.CHATBOT_SESSION) || null;
-}
-
-export function clearChatbotSessionCookie(): void {
-  if (typeof document === "undefined") return;
-  document.cookie = `${COOKIE_KEYS.CHATBOT_SESSION}=; Path=/; Max-Age=0; SameSite=Lax`;
-}
-
-export function writeChatbotSessionCookie(sessionId: string): void {
-  if (typeof document === "undefined") return;
-  const secure = process.env.NODE_ENV === "production" ? "; Secure" : "";
-  document.cookie = `${COOKIE_KEYS.CHATBOT_SESSION}=${encodeURIComponent(
-    sessionId,
-  )}; Path=/; Max-Age=${AUTH_COOKIE_MAX_AGE}; SameSite=Lax${secure}`;
-}

From d319e09ac78e989e99036cea3f62831fdaccfd44 Mon Sep 17 00:00:00 2001
From: Ayush8923 <80516839+Ayush8923@users.noreply.github.com>
Date: Thu, 29 Oct 2026 17:08:11 +0530
Subject: [PATCH 11/12] fix: remove the js comment

---
 app/(main)/chatbot/[chatbotId]/page.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/(main)/chatbot/[chatbotId]/page.tsx b/app/(main)/chatbot/[chatbotId]/page.tsx
index b245487c..1404df58 100644
--- a/app/(main)/chatbot/[chatbotId]/page.tsx
+++ b/app/(main)/chatbot/[chatbotId]/page.tsx
@@ -15,7 +15,6 @@ import { useToast } from "@/app/hooks/useToast";
 import { useChatbot } from "@/app/hooks/chatbot/useChatbot";
 import { useChatbotFlow } from "@/app/hooks/chatbot/useChatbotFlow";
 
-/** Flow editor of one chatbot: edit, save a draft, publish, and test. */
 export default function ChatbotEditorPage() {
   const { chatbotId } = useParams<{ chatbotId: string }>();
   const { sidebarCollapsed } = useApp();
@@ -59,7 +58,6 @@ export default function ChatbotEditorPage() {
                 >
                   {flow.isSaving ? "Saving…" : "Save"}
                 </Button>
-                {/* Only a draft (newer than live) can be published. */}
                 {flowVersion && !flowVersion.isLive && (
                   <Button
                     size="sm"

From ad50f870378fdd95970550f37529e564a1f94757 Mon Sep 17 00:00:00 2001
From: Ayush8923 <80516839+Ayush8923@users.noreply.github.com>
Date: Thu, 29 Oct 2026 22:12:07 +0530
Subject: [PATCH 12/12] fix: update the variable name

---
 .env.example                      | 2 +-
 app/hooks/usePromptImprovement.ts | 1 -
 app/lib/webhookCallback.ts        | 6 +++---
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/.env.example b/.env.example
index 8d0346eb..caaf9d2a 100644
--- a/.env.example
+++ b/.env.example
@@ -2,5 +2,5 @@ BACKEND_URL=http://localhost:8000
 GUARDRAILS_URL = http://localhost:8001
 GUARDRAILS_TOKEN =
 NEXT_PUBLIC_GOOGLE_CLIENT_ID=your-google-client-id.apps.googleusercontent.com
-NEXT_PUBLIC_APP_URL=https://your-public-app-url.example.com
+WEBHOOK_URL=https://your-public-app-url.example.com
 WEBHOOK_SECRET=
diff --git a/app/hooks/usePromptImprovement.ts b/app/hooks/usePromptImprovement.ts
index 6b77bb44..358e746f 100644
--- a/app/hooks/usePromptImprovement.ts
+++ b/app/hooks/usePromptImprovement.ts
@@ -13,7 +13,6 @@ import type {
   UsePromptImprovementResult,
 } from "@/app/lib/types/promptImprovement";
 
-/** Map a sync validation code (from the initial 202 request) to a user-facing message. */
 function iteratePromptSyncError(code: string): string {
   switch (code) {
     case "evaluation_not_found":
diff --git a/app/lib/webhookCallback.ts b/app/lib/webhookCallback.ts
index 9d171818..a78ec642 100644
--- a/app/lib/webhookCallback.ts
+++ b/app/lib/webhookCallback.ts
@@ -3,8 +3,8 @@ import "server-only";
 import type { NextRequest } from "next/server";
 import { readWebhookSecret } from "@/app/lib/webhookSecret";
 
-function getAppBaseUrl(request: NextRequest): string {
-  const configured = process.env.NEXT_PUBLIC_APP_URL ?? process.env.APP_URL;
+function getWebhookBaseUrl(request: NextRequest): string {
+  const configured = process.env.WEBHOOK_URL ?? process.env.NEXT_PUBLIC_APP_URL;
   if (configured) {
     return configured.replace(/\/$/, "");
   }
@@ -25,7 +25,7 @@ export function buildWebhookCallbackUrl(
   if (!secretResult.ok || !secretResult.secret) {
     throw new Error(secretResult.reason ?? "webhook_secret_missing");
   }
-  const base = getAppBaseUrl(request);
+  const base = getWebhookBaseUrl(request);
   return `${base}${path}?secret_value=${encodeURIComponent(secretResult.secret)}`;
 }