@agent-native/core 0.4.5 → 0.6.1

package/dist/client/AgentPanel.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * AgentPanel — unified agent component with chat and CLI terminal modes.
  *
@@ -21,84 +21,817 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *   // Full page
  *   <AgentPanel className="h-screen" />
  */
-import { useState, useEffect, lazy, Suspense } from "react";
-import { AssistantChat } from "./AssistantChat.js";
+import ReactDOM from "react-dom";
+import { useState, useEffect, useRef, useCallback, lazy, Suspense, startTransition, } from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { IconMessage, IconTerminal2, IconSettings, IconLayoutSidebarRightCollapse, IconChevronDown, IconCheck, IconPlus, IconFolder, IconX, IconDotsVertical, IconHistory, IconPlugConnected, IconChevronLeft, IconCopy, IconExternalLink, } from "@tabler/icons-react";
+import { MultiTabAssistantChat, } from "./MultiTabAssistantChat.js";
+import { useDevMode } from "./use-dev-mode.js";
 import { cn } from "./utils.js";
 // Lazy-load AgentTerminal to avoid bundling xterm.js when not needed
 const AgentTerminal = lazy(() => import("./terminal/index.js").then((m) => ({ default: m.AgentTerminal })));
+// Lazy-load ResourcesPanel to avoid bundling when not needed
+const ResourcesPanel = lazy(() => import("./resources/ResourcesPanel.js").then((m) => ({
+    default: m.ResourcesPanel,
+})));
+// Lazy-load IntegrationsPanel to avoid bundling when not needed
+const IntegrationsPanel = lazy(() => import("./integrations/IntegrationsPanel.js").then((m) => ({
+    default: m.IntegrationsPanel,
+})));
 const CLI_STORAGE_KEY = "agent-native-cli-command";
-const CLI_DEFAULT = "fusion";
+const CLI_DEFAULT = "claude";
+const EXEC_MODE_KEY = "agent-native-exec-mode";
+const AGENT_PANEL_FONT_FAMILY = 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+const AGENT_PANEL_ROOT_STYLE = {
+    fontFamily: AGENT_PANEL_FONT_FAMILY,
+    fontSize: 13,
+    lineHeight: 1.2,
+};
+const AGENT_PANEL_HEADER_CLASS = "relative z-[240] flex h-11 shrink-0 items-center justify-between gap-2 border-b border-border";
+const AGENT_PANEL_HEADER_STYLE = {
+    paddingLeft: 8,
+    paddingRight: 8,
+};
+const AGENT_PANEL_CONTROL_STYLE = {
+    fontSize: 12,
+    lineHeight: 1,
+};
 function useAvailableClis() {
     const [clis, setClis] = useState([]);
     useEffect(() => {
-        fetch("/api/available-clis")
+        // Try to fetch available CLIs — endpoint is provided by the terminal plugin.
+        // Returns 404 gracefully when the plugin isn't loaded.
+        fetch("/_agent-native/available-clis")
             .then((r) => (r.ok ? r.json() : []))
-            .then((data) => setClis(data))
+            .then((data) => setClis(Array.isArray(data) ? data : []))
             .catch(() => { });
     }, []);
     return clis;
 }
-function useCliSelection() {
-    const [selected, setSelected] = useState(() => {
-        if (typeof localStorage !== "undefined") {
-            return localStorage.getItem(CLI_STORAGE_KEY) || CLI_DEFAULT;
+function useCliSelection(keyPrefix) {
+    const cliKey = `${CLI_STORAGE_KEY}${keyPrefix}`;
+    const [selected, setSelected] = useState(CLI_DEFAULT);
+    useEffect(() => {
+        try {
+            const saved = localStorage.getItem(cliKey);
+            if (saved)
+                setSelected(saved);
         }
-        return CLI_DEFAULT;
-    });
+        catch { }
+    }, [cliKey]);
     const select = (cmd) => {
         setSelected(cmd);
         try {
-            localStorage.setItem(CLI_STORAGE_KEY, cmd);
+            localStorage.setItem(cliKey, cmd);
         }
         catch { }
     };
     return [selected, select];
 }
 // Detect dev mode at build time (Vite replaces this)
-const IS_DEV = typeof import.meta !== "undefined" &&
-    typeof import.meta.env !== "undefined" &&
-    import.meta.env.DEV === true;
-// ─── Icons ──────────────────────────────────────────────────────────────────
-function ChatBubbleIcon({ className }) {
-    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", className: className, children: _jsx("path", { d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" }) }));
+const IS_DEV = import.meta.env?.DEV === true;
+function SettingsSelect({ label, value, options, onValueChange, }) {
+    const selected = options.find((option) => option.value === value);
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: "text-[12px] font-medium text-foreground", children: label }), _jsxs(SelectPrimitive.Root, { value: value, onValueChange: onValueChange, children: [_jsxs(SelectPrimitive.Trigger, { className: "flex h-9 w-full items-center justify-between rounded-md border border-border bg-background px-3 text-left text-[12px] text-foreground outline-none transition-colors hover:bg-accent/40 data-[placeholder]:text-muted-foreground", "aria-label": label, style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx(SelectPrimitive.Value, { children: selected?.label ?? value }), _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(IconChevronDown, { size: 14, className: "text-muted-foreground" }) })] }), _jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Content, { position: "popper", sideOffset: 6, className: "z-[9999] w-[var(--radix-select-trigger-width)] overflow-hidden rounded-lg border border-border bg-popover shadow-lg", children: _jsx(SelectPrimitive.Viewport, { className: "p-1", children: options.map((option) => (_jsxs(SelectPrimitive.Item, { value: option.value, className: "relative flex w-full cursor-pointer select-none items-start gap-2 rounded-md px-8 py-2.5 text-[12px] outline-none data-[highlighted]:bg-accent/60 data-[state=checked]:bg-accent/40", style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx("span", { className: "absolute left-2 top-2.5 flex h-4 w-4 items-center justify-center text-muted-foreground", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(IconCheck, { size: 14 }) }) }), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx(SelectPrimitive.ItemText, { children: _jsx("span", { className: "text-foreground", children: option.label }) }), option.description ? (_jsx("span", { className: "mt-0.5 text-[11px] leading-relaxed text-muted-foreground", children: option.description })) : null] })] }, option.value))) }) }) })] })] }));
+}
+function IconTooltip({ content, children, }) {
+    return (_jsx(TooltipPrimitive.Provider, { delayDuration: 250, children: _jsxs(TooltipPrimitive.Root, { children: [_jsx(TooltipPrimitive.Trigger, { asChild: true, children: children }), _jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { side: "bottom", sideOffset: 8, className: "z-[230] overflow-hidden rounded-md border border-border bg-popover px-2 py-1 text-[11px] text-foreground shadow-md", children: [content, _jsx(TooltipPrimitive.Arrow, { className: "fill-popover" })] }) })] }) }));
+}
+// ─── Agent Settings Popover ──────────────────────────────────────────────────
+function AgentSettingsPopover({ isDevMode, onToggle, devAppUrl, showEnvToggle = true, }) {
+    const [open, setOpen] = useState(false);
+    const popoverRef = useRef(null);
+    const buttonRef = useRef(null);
+    // Close on outside click
+    useEffect(() => {
+        if (!open)
+            return;
+        function handleClick(e) {
+            const target = e.target;
+            // Ignore clicks inside the popover itself or its trigger button
+            if (popoverRef.current?.contains(target))
+                return;
+            if (buttonRef.current?.contains(target))
+                return;
+            // Ignore clicks inside portaled Radix Select content (rendered outside the popover DOM)
+            if (target.closest?.("[data-radix-popper-content-wrapper], [data-radix-select-viewport], [role='listbox']"))
+                return;
+            setOpen(false);
+        }
+        document.addEventListener("mousedown", handleClick);
+        return () => document.removeEventListener("mousedown", handleClick);
+    }, [open]);
+    // Close on Escape
+    useEffect(() => {
+        if (!open)
+            return;
+        function handleKey(e) {
+            if (e.key === "Escape")
+                setOpen(false);
+        }
+        document.addEventListener("keydown", handleKey);
+        return () => document.removeEventListener("keydown", handleKey);
+    }, [open]);
+    const environmentOptions = [
+        {
+            value: "production",
+            label: "Production",
+            description: "Restricted to app tools only.",
+        },
+        {
+            value: "development",
+            label: "Development",
+            description: "Full access to code editing, shell, and files.",
+        },
+    ];
+    // Compute fixed position from the button so the popover escapes all
+    // stacking contexts (the CLI terminal otherwise paints over it).
+    const [pos, setPos] = useState(null);
+    useEffect(() => {
+        if (!open || !buttonRef.current)
+            return;
+        const rect = buttonRef.current.getBoundingClientRect();
+        setPos({
+            top: rect.bottom + 6,
+            right: window.innerWidth - rect.right,
+        });
+    }, [open]);
+    return (_jsxs("div", { className: "relative", children: [_jsx("button", { ref: buttonRef, onClick: () => setOpen(!open), className: cn("flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50", open && "bg-accent/50 text-foreground"), title: "Agent settings", children: _jsx(IconSettings, { size: 14 }) }), open &&
+                pos &&
+                ReactDOM.createPortal(_jsx("div", { ref: popoverRef, className: "fixed z-[9990] w-72 rounded-lg border border-border bg-popover shadow-md animate-in fade-in-0 zoom-in-95 duration-100", style: { top: pos.top, right: pos.right }, children: _jsxs("div", { className: "space-y-3 p-3", children: [showEnvToggle && (_jsx(SettingsSelect, { label: "Environment", value: isDevMode ? "development" : "production", options: environmentOptions, onValueChange: (next) => {
+                                    const nextIsDev = next === "development";
+                                    if (nextIsDev !== isDevMode)
+                                        onToggle();
+                                } })), devAppUrl && (_jsxs("a", { href: devAppUrl, target: "_blank", rel: "noopener noreferrer", className: "flex items-center gap-1.5 text-[11px] text-muted-foreground hover:text-foreground mt-1", children: [_jsx(IconExternalLink, { size: 12 }), "Open app in new tab"] })), _jsx("div", { className: showEnvToggle || devAppUrl
+                                    ? "border-t border-border pt-3 mt-3"
+                                    : "", children: _jsx(Suspense, { fallback: null, children: _jsx(IntegrationsPanel, {}) }) }), _jsx("div", { className: "border-t border-border pt-3 mt-3", children: _jsx(AgentsSection, {}) })] }) }), document.body)] }));
+}
+function AgentDetail({ agent, onBack, onDelete, }) {
+    const [copied, setCopied] = useState(false);
+    const handleCopy = useCallback(async () => {
+        await navigator.clipboard.writeText(agent.url);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    }, [agent.url]);
+    return (_jsxs("div", { children: [_jsxs("button", { onClick: onBack, className: "flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground mb-2", children: [_jsx(IconChevronLeft, { size: 12 }), "Back"] }), _jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(IconPlugConnected, { size: 16, className: "text-foreground shrink-0" }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-xs font-medium text-foreground truncate", children: agent.name }), agent.description && (_jsx("div", { className: "text-[10px] text-muted-foreground", children: agent.description }))] })] }), _jsxs("div", { className: "mb-3", children: [_jsx("div", { className: "text-[10px] font-medium text-muted-foreground mb-1", children: "A2A Endpoint" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("code", { className: "flex-1 truncate rounded bg-muted px-1.5 py-0.5 text-[10px] text-foreground", children: agent.url }), _jsx("button", { onClick: handleCopy, className: "shrink-0 rounded p-0.5 text-muted-foreground hover:text-foreground hover:bg-accent/50", title: "Copy URL", children: copied ? _jsx(IconCheck, { size: 12 }) : _jsx(IconCopy, { size: 12 }) })] })] }), _jsx("div", { className: "rounded-md border border-border bg-muted/30 px-2.5 py-2 text-[10px] text-muted-foreground mb-3", children: "@-mention this agent in chat to send it tasks via the A2A protocol. It will use its own tools and skills to respond." }), _jsx("button", { onClick: () => onDelete(agent.id), className: "w-full rounded-md border border-red-800/50 px-2 py-1.5 text-[11px] font-medium text-red-400 hover:bg-red-900/20", children: "Remove agent" })] }));
+}
+function AgentsSection() {
+    const [expanded, setExpanded] = useState(false);
+    const [showAdd, setShowAdd] = useState(false);
+    const [selectedAgent, setSelectedAgent] = useState(null);
+    const [name, setName] = useState("");
+    const [url, setUrl] = useState("");
+    const [description, setDescription] = useState("");
+    const nameRef = useRef(null);
+    // Fetch agents from resources
+    const [agents, setAgents] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const fetchAgents = useCallback(async () => {
+        try {
+            const res = await fetch("/_agent-native/resources?scope=all");
+            if (!res.ok)
+                return;
+            const data = await res.json();
+            const agentResources = (data.resources ?? []).filter((r) => r.path.startsWith("agents/") && r.path.endsWith(".json"));
+            const parsed = await Promise.all(agentResources.map(async (r) => {
+                try {
+                    const detail = await fetch(`/_agent-native/resources/${r.id}`);
+                    if (!detail.ok)
+                        return null;
+                    const d = await detail.json();
+                    const config = JSON.parse(d.content);
+                    return {
+                        id: r.id,
+                        path: r.path,
+                        name: config.name,
+                        url: config.url,
+                        description: config.description,
+                    };
+                }
+                catch {
+                    return null;
+                }
+            }));
+            setAgents(parsed.filter(Boolean));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    useEffect(() => {
+        fetchAgents();
+    }, [fetchAgents]);
+    useEffect(() => {
+        if (showAdd) {
+            setName("");
+            setUrl("");
+            setDescription("");
+            const t = setTimeout(() => nameRef.current?.focus(), 50);
+            return () => clearTimeout(t);
+        }
+    }, [showAdd]);
+    const handleAdd = async () => {
+        const trimmedName = name.trim();
+        const trimmedUrl = url.trim();
+        if (!trimmedName || !trimmedUrl)
+            return;
+        const id = trimmedName.toLowerCase().replace(/[^a-z0-9-]/g, "-");
+        const agentJson = JSON.stringify({
+            id,
+            name: trimmedName,
+            description: description.trim() || undefined,
+            url: trimmedUrl,
+            color: "#6B7280",
+        }, null, 2);
+        try {
+            const res = await fetch("/_agent-native/resources", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                    path: `agents/${id}.json`,
+                    content: agentJson,
+                    shared: true,
+                }),
+            });
+            if (res.ok) {
+                setShowAdd(false);
+                fetchAgents();
+            }
+        }
+        catch { }
+    };
+    const handleDelete = async (agentId) => {
+        try {
+            const res = await fetch(`/_agent-native/resources/${agentId}`, {
+                method: "DELETE",
+            });
+            if (res.ok) {
+                setSelectedAgent(null);
+                fetchAgents();
+            }
+        }
+        catch { }
+    };
+    if (selectedAgent) {
+        return (_jsx(AgentDetail, { agent: selectedAgent, onBack: () => setSelectedAgent(null), onDelete: handleDelete }));
+    }
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs font-medium text-foreground", children: "Agents" }), _jsx("div", { className: "text-[10px] text-muted-foreground", children: loading
+                                    ? "Loading..."
+                                    : agents.length > 0
+                                        ? `${agents.length} connected via A2A`
+                                        : "Connect agents via A2A protocol" })] }), _jsx("button", { onClick: () => {
+                            if (expanded || showAdd) {
+                                setExpanded(false);
+                                setShowAdd(false);
+                            }
+                            else {
+                                setExpanded(true);
+                            }
+                        }, className: "flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", title: expanded ? "Collapse" : "Manage agents", children: expanded || showAdd ? _jsx(IconX, { size: 12 }) : _jsx(IconPlus, { size: 12 }) })] }), (expanded || showAdd) && (_jsxs(_Fragment, { children: [!showAdd && (_jsxs("div", { className: "flex flex-col gap-0.5 mb-1.5", children: [agents.map((agent) => (_jsxs("button", { onClick: () => setSelectedAgent(agent), className: "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left hover:bg-accent/30", children: [_jsx(IconPlugConnected, { size: 13, className: "shrink-0 text-muted-foreground" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-[11px] font-medium text-foreground truncate", children: agent.name }), _jsx("div", { className: "text-[10px] text-muted-foreground/60 truncate", children: agent.url })] })] }, agent.id))), _jsxs("button", { onClick: () => setShowAdd(true), className: "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[11px] text-muted-foreground hover:text-foreground hover:bg-accent/30", children: [_jsx(IconPlus, { size: 12, className: "shrink-0" }), "Add agent"] })] })), showAdd && (_jsxs("div", { className: "mb-1.5 flex flex-col gap-1.5 rounded-md border border-border bg-background p-2", children: [_jsx("input", { ref: nameRef, value: name, onChange: (e) => setName(e.target.value), onKeyDown: (e) => {
+                                    if (e.key === "Enter")
+                                        handleAdd();
+                                    if (e.key === "Escape")
+                                        setShowAdd(false);
+                                }, className: "w-full rounded border border-border bg-background px-2 py-1 text-[12px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent", placeholder: "Name" }), _jsx("input", { value: url, onChange: (e) => setUrl(e.target.value), onKeyDown: (e) => {
+                                    if (e.key === "Enter")
+                                        handleAdd();
+                                    if (e.key === "Escape")
+                                        setShowAdd(false);
+                                }, className: "w-full rounded border border-border bg-background px-2 py-1 text-[12px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent", placeholder: "URL (e.g. http://localhost:8085)" }), _jsx("input", { value: description, onChange: (e) => setDescription(e.target.value), onKeyDown: (e) => {
+                                    if (e.key === "Enter")
+                                        handleAdd();
+                                    if (e.key === "Escape")
+                                        setShowAdd(false);
+                                }, className: "w-full rounded border border-border bg-background px-2 py-1 text-[12px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent", placeholder: "Description (optional)" }), _jsxs("div", { className: "flex justify-end gap-1.5", children: [_jsx("button", { onClick: () => setShowAdd(false), className: "rounded px-2.5 py-1 text-[11px] font-medium text-muted-foreground hover:text-foreground", children: "Cancel" }), _jsx("button", { onClick: handleAdd, disabled: !name.trim() || !url.trim(), className: "rounded bg-accent px-2.5 py-1 text-[11px] font-medium text-foreground hover:bg-accent/80 disabled:opacity-40 disabled:pointer-events-none", children: "Add" })] })] }))] }))] }));
 }
-function TerminalIcon({ className }) {
-    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [_jsx("polyline", { points: "4 17 10 11 4 5" }), _jsx("line", { x1: "12", y1: "19", x2: "20", y2: "19" })] }));
+function useClientOnly() {
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => setMounted(true), []);
+    return mounted;
 }
-export function AgentPanel({ defaultMode = "chat", className, apiUrl, emptyStateText, suggestions, showHeader = true, }) {
-    const [mode, setMode] = useState(defaultMode);
+export function AgentPanel({ defaultMode = "chat", className, apiUrl, emptyStateText, suggestions, showHeader = true, onCollapse, devAppUrl, storageKey, }) {
+    const mounted = useClientOnly();
+    const keyPrefix = storageKey ? `:${storageKey}` : "";
+    const execModeKey = `${EXEC_MODE_KEY}${keyPrefix}`;
+    const panelModeKey = `agent-native-panel-mode${keyPrefix}`;
+    const [execMode, setExecMode] = useState(() => {
+        try {
+            const saved = localStorage.getItem(execModeKey);
+            if (saved === "build" || saved === "plan")
+                return saved;
+        }
+        catch { }
+        return "build";
+    });
+    const switchExecMode = useCallback((next) => {
+        setExecMode(next);
+        try {
+            localStorage.setItem(execModeKey, next);
+        }
+        catch { }
+        window.dispatchEvent(new CustomEvent("agent-panel:exec-mode-change", {
+            detail: { mode: next },
+        }));
+    }, [execModeKey]);
+    const [mode, setMode] = useState(() => {
+        try {
+            const saved = localStorage.getItem(panelModeKey);
+            if (saved === "chat" || saved === "cli" || saved === "resources")
+                return saved;
+        }
+        catch { }
+        return defaultMode;
+    });
+    useEffect(() => {
+        try {
+            localStorage.setItem(panelModeKey, mode);
+        }
+        catch { }
+    }, [mode, panelModeKey]);
+    const switchMode = useCallback((m) => {
+        startTransition(() => setMode(m));
+    }, []);
+    // Listen for mode changes from the frame parent (via AgentSidebar)
+    useEffect(() => {
+        function handler(e) {
+            const detail = e.detail;
+            if (detail?.mode)
+                switchMode(detail.mode);
+        }
+        window.addEventListener("agent-panel:set-mode", handler);
+        return () => window.removeEventListener("agent-panel:set-mode", handler);
+    }, [switchMode]);
+    // CLI terminal tabs (ephemeral — not persisted to SQL)
+    const [cliTabs, setCliTabs] = useState(["cli-1"]);
+    const [activeCliTab, setActiveCliTab] = useState("cli-1");
+    const cliCounter = useRef(1);
+    const addCliTab = useCallback(() => {
+        const id = `cli-${++cliCounter.current}`;
+        setCliTabs((prev) => [...prev, id]);
+        setActiveCliTab(id);
+    }, []);
+    const closeCliTab = useCallback((id) => {
+        setCliTabs((prev) => {
+            if (prev.length <= 1) {
+                // Last tab — replace with a new one (acts as "clear")
+                const newId = `cli-${++cliCounter.current}`;
+                setActiveCliTab(newId);
+                return [newId];
+            }
+            const next = prev.filter((t) => t !== id);
+            if (id === activeCliTab) {
+                const idx = prev.indexOf(id);
+                setActiveCliTab(next[Math.min(idx, next.length - 1)]);
+            }
+            return next;
+        });
+    }, [activeCliTab]);
+    const closeOtherCliTabs = useCallback((id) => {
+        setCliTabs([id]);
+        setActiveCliTab(id);
+    }, []);
+    const closeAllCliTabs = useCallback(() => {
+        const id = `cli-${++cliCounter.current}`;
+        setCliTabs([id]);
+        setActiveCliTab(id);
+    }, []);
     const availableClis = useAvailableClis();
-    const [selectedCli, selectCli] = useCliSelection();
+    const [selectedCli, selectCli] = useCliSelection(keyPrefix);
     const selectedLabel = availableClis.find((c) => c.command === selectedCli)?.label || selectedCli;
-    return (_jsxs("div", { className: cn("flex flex-1 flex-col h-full min-h-0", className), children: [showHeader && (_jsxs("div", { className: "flex h-11 shrink-0 items-center justify-between border-b border-border px-4", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs("button", { onClick: () => setMode("chat"), className: cn("flex items-center gap-1 px-2 py-1 rounded-md text-[12px]", mode === "chat"
-                                    ? "bg-accent text-foreground"
-                                    : "text-muted-foreground hover:text-foreground hover:bg-accent/50"), title: "Chat mode", children: [_jsx(ChatBubbleIcon, { className: "h-3.5 w-3.5" }), "Chat"] }), IS_DEV && (_jsxs("button", { onClick: () => setMode("cli"), className: cn("flex items-center gap-1 px-2 py-1 rounded-md text-[12px]", mode === "cli"
-                                    ? "bg-accent text-foreground"
-                                    : "text-muted-foreground hover:text-foreground hover:bg-accent/50"), title: "CLI terminal mode", children: [_jsx(TerminalIcon, { className: "h-3.5 w-3.5" }), "CLI"] }))] }), IS_DEV && availableClis.length > 0 && (_jsx("select", { value: selectedCli, onChange: (e) => selectCli(e.target.value), className: "text-[12px] text-muted-foreground bg-transparent border border-border rounded px-1.5 py-0.5 outline-none hover:text-foreground cursor-pointer", title: "Select AI CLI", children: availableClis.map((cli) => (_jsx("option", { value: cli.command, children: cli.label }, cli.command))) }))] })), _jsx("div", { className: cn("flex-1 flex flex-col min-h-0", mode !== "chat" && "hidden"), children: _jsx(AssistantChat, { apiUrl: apiUrl, showHeader: false, showDevHint: IS_DEV, emptyStateText: emptyStateText, suggestions: suggestions, onSwitchToCli: IS_DEV ? () => setMode("cli") : undefined }) }), IS_DEV && mode === "cli" && (_jsx("div", { className: "flex-1 min-h-0", children: _jsx(Suspense, { fallback: _jsx("div", { className: "flex items-center justify-center h-full text-muted-foreground text-sm", children: "Loading terminal..." }), children: _jsx(AgentTerminal, { command: selectedCli, hideInHarness: false, className: "h-full", style: { background: "transparent" } }) }) }))] }));
+    const { isDevMode, canToggle, setDevMode } = useDevMode(apiUrl);
+    // Notify frame when dev mode changes — use both a local CustomEvent (for
+    // when AgentPanel is rendered directly in the frame) AND postMessage (for
+    // when AgentPanel is inside the iframe and needs to cross the boundary).
+    const prevIsDevMode = useRef(isDevMode);
+    useEffect(() => {
+        if (prevIsDevMode.current !== isDevMode) {
+            prevIsDevMode.current = isDevMode;
+            window.dispatchEvent(new CustomEvent("agent-panel:dev-mode-change", {
+                detail: { isDevMode },
+            }));
+            // Cross iframe boundary to the frame parent
+            if (window.parent !== window) {
+                window.parent.postMessage({ type: "builder.devModeChange", data: { isDevMode } }, "*");
+            }
+        }
+    }, [isDevMode]);
+    const isLocalhost = mounted &&
+        typeof window !== "undefined" &&
+        (window.location.hostname === "localhost" ||
+            window.location.hostname === "127.0.0.1" ||
+            window.location.hostname === "::1");
+    const showDevToggle = canToggle && isLocalhost;
+    const renderModeButtons = useCallback((activeMode) => (_jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [_jsxs("button", { onClick: () => switchMode("chat"), className: cn("flex items-center gap-1 rounded-md px-2 py-1 text-[12px] leading-none", activeMode === "chat"
+                    ? "bg-accent text-foreground"
+                    : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), title: "Chat mode", style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx(IconMessage, { size: 14 }), "Chat"] }), _jsxs("button", { onClick: () => switchMode("cli"), className: cn("flex items-center gap-1 rounded-md px-2 py-1 text-[12px] leading-none", activeMode === "cli"
+                    ? "bg-accent text-foreground"
+                    : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), title: "CLI terminal mode", style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx(IconTerminal2, { size: 14 }), "CLI"] }), _jsxs("button", { onClick: () => switchMode("resources"), className: cn("flex items-center gap-1 rounded-md px-2 py-1 text-[12px] leading-none", activeMode === "resources"
+                    ? "bg-accent text-foreground"
+                    : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), title: "Files & resources", style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx(IconFolder, { size: 14 }), "Files"] })] })), [isDevMode]);
+    const renderHeaderActions = useCallback(() => (_jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [_jsx(IconTooltip, { content: "Agent settings", children: _jsx("div", { children: _jsx(AgentSettingsPopover, { isDevMode: isDevMode, onToggle: () => setDevMode(!isDevMode), devAppUrl: devAppUrl, showEnvToggle: showDevToggle }) }) }), onCollapse && (_jsx(IconTooltip, { content: "Collapse sidebar", children: _jsx("button", { onClick: onCollapse, className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", children: _jsx(IconLayoutSidebarRightCollapse, { size: 14 }) }) }))] })), [isDevMode, onCollapse, setDevMode, showDevToggle, devAppUrl]);
+    const [tabMenuOpen, setTabMenuOpen] = useState(null);
+    const [cliPickerOpen, setCliPickerOpen] = useState(false);
+    const cliPickerBtnRef = useRef(null);
+    // Ref callback: scroll the active tab into view in the overflow container.
+    // Uses getBoundingClientRect for reliable positioning regardless of offsetParent.
+    const activeTabRefCb = useCallback((el) => {
+        if (!el)
+            return;
+        const container = el.parentElement;
+        if (!container)
+            return;
+        // Use rAF so layout is settled after React commit
+        requestAnimationFrame(() => {
+            const containerRect = container.getBoundingClientRect();
+            const tabRect = el.getBoundingClientRect();
+            if (tabRect.left < containerRect.left) {
+                container.scrollLeft += tabRect.left - containerRect.left;
+            }
+            else if (tabRect.right > containerRect.right) {
+                container.scrollLeft += tabRect.right - containerRect.right;
+            }
+        });
+    }, []);
+    const renderChatHeader = useCallback(({ tabs, activeTabId, setActiveTabId, addTab, closeTab, closeOtherTabs, closeAllTabs, showHistory, toggleHistory, }) => (_jsxs("div", { className: "flex flex-col shrink-0", children: [_jsxs("div", { className: AGENT_PANEL_HEADER_CLASS, style: AGENT_PANEL_HEADER_STYLE, children: [_jsx("div", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden", children: renderModeButtons(mode) }), _jsx("div", { className: "flex items-center gap-0.5", children: renderHeaderActions() })] }), (mode === "chat" || mode === "cli") &&
+                (() => {
+                    // Compute parent/child tab groups for the sub-tab bar
+                    const activeTab = tabs.find((t) => t.id === activeTabId);
+                    // The "focus parent" is the parent thread for the active context
+                    const focusParentId = activeTab?.parentThreadId || activeTabId;
+                    const childTabs = tabs.filter((t) => t.parentThreadId === focusParentId);
+                    const hasSubTabs = childTabs.length > 0;
+                    // Main row: only show top-level (non-child) tabs
+                    const mainTabs = tabs.filter((t) => !t.parentThreadId);
+                    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center px-2 py-1 border-b border-border gap-0.5", children: [_jsx("div", { className: "flex items-center gap-0.5 min-w-0 overflow-x-auto scrollbar-none flex-1", children: mode === "chat"
+                                            ? mainTabs.map((tab) => {
+                                                // Highlight the parent tab if a child is active
+                                                const isActive = tab.id === activeTabId ||
+                                                    (tab.id === focusParentId &&
+                                                        activeTab?.parentThreadId === tab.id);
+                                                return (_jsxs("div", { role: "button", tabIndex: 0, ref: isActive ? activeTabRefCb : undefined, onClick: () => setActiveTabId(tab.id), className: cn("agent-tab relative flex shrink-0 items-center gap-1 rounded-md px-2.5 py-1.5 text-[11px] font-medium cursor-pointer max-w-[150px]", isActive
+                                                        ? "bg-accent text-foreground"
+                                                        : "text-muted-foreground hover:bg-accent hover:text-foreground"), children: [_jsx("span", { className: "truncate pr-1", children: tab.label }), tab.status === "running" && (_jsx("span", { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/50 animate-pulse" })), _jsx("button", { type: "button", onClick: (e) => {
+                                                                e.stopPropagation();
+                                                                closeTab(tab.id);
+                                                            }, className: "agent-tab-close flex items-center justify-end text-muted-foreground hover:text-foreground", style: {
+                                                                position: "absolute",
+                                                                right: 0,
+                                                                top: 0,
+                                                                bottom: 0,
+                                                                width: 28,
+                                                                paddingRight: 6,
+                                                                borderRadius: "0 6px 6px 0",
+                                                                background: "linear-gradient(to right, transparent, hsl(var(--accent)) 40%)",
+                                                            }, children: _jsx(IconX, { size: 10 }) })] }, tab.id));
+                                            })
+                                            : cliTabs.map((id, i) => (_jsxs("div", { role: "button", tabIndex: 0, ref: id === activeCliTab ? activeTabRefCb : undefined, onClick: () => setActiveCliTab(id), className: cn("agent-tab relative flex shrink-0 items-center gap-1 rounded-md px-2.5 py-1.5 text-[11px] font-medium cursor-pointer", id === activeCliTab
+                                                    ? "bg-accent text-foreground"
+                                                    : "text-muted-foreground hover:bg-accent hover:text-foreground"), children: [_jsxs("span", { children: ["Terminal ", i + 1] }), _jsx("button", { type: "button", onClick: (e) => {
+                                                            e.stopPropagation();
+                                                            closeCliTab(id);
+                                                        }, className: "agent-tab-close flex items-center justify-end text-muted-foreground hover:text-foreground", style: {
+                                                            position: "absolute",
+                                                            right: 0,
+                                                            top: 0,
+                                                            bottom: 0,
+                                                            width: 28,
+                                                            paddingRight: 6,
+                                                            borderRadius: "0 6px 6px 0",
+                                                            background: "linear-gradient(to right, transparent, hsl(var(--accent)) 40%)",
+                                                        }, children: _jsx(IconX, { size: 10 }) })] }, id))) }), _jsxs("div", { className: "flex items-center gap-0.5 shrink-0 ml-auto", children: [mode === "chat" && (_jsxs(_Fragment, { children: [_jsx(IconTooltip, { content: "New chat", children: _jsx("button", { onClick: addTab, className: "flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", children: _jsx(IconPlus, { size: 14 }) }) }), toggleHistory && (_jsx(IconTooltip, { content: "Chat history", children: _jsx("button", { onClick: toggleHistory, className: cn("flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", showHistory && "bg-accent text-foreground"), children: _jsx(IconHistory, { size: 14 }) }) })), _jsxs("div", { className: "relative", children: [_jsx(IconTooltip, { content: "Tab options", children: _jsx("button", { onClick: () => setTabMenuOpen(tabMenuOpen === "__chat_global"
+                                                                        ? null
+                                                                        : "__chat_global"), className: cn("flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", tabMenuOpen === "__chat_global" &&
+                                                                        "bg-accent text-foreground"), children: _jsx(IconDotsVertical, { size: 14 }) }) }), tabMenuOpen === "__chat_global" && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40", onClick: () => setTabMenuOpen(null) }), _jsxs("div", { className: "absolute right-0 top-full mt-1 z-50 w-44 rounded-md border border-border bg-popover py-1 shadow-lg", children: [_jsxs("button", { className: "flex w-full items-center justify-between px-3 py-1.5 text-xs text-foreground hover:bg-accent", onClick: () => {
+                                                                                    closeTab(activeTabId);
+                                                                                    setTabMenuOpen(null);
+                                                                                }, children: ["Close Tab", _jsxs("kbd", { className: "text-[10px] text-muted-foreground", children: ["\u2318", "W"] })] }), _jsx("button", { className: "flex w-full items-center px-3 py-1.5 text-xs text-foreground hover:bg-accent", onClick: () => {
+                                                                                    closeOtherTabs(activeTabId);
+                                                                                    setTabMenuOpen(null);
+                                                                                }, children: "Close Other Tabs" }), _jsx("button", { className: "flex w-full items-center px-3 py-1.5 text-xs text-foreground hover:bg-accent", onClick: () => {
+                                                                                    closeAllTabs();
+                                                                                    setTabMenuOpen(null);
+                                                                                }, children: "Close All Tabs" })] })] }))] })] })), mode === "cli" && (_jsxs(_Fragment, { children: [_jsx(IconTooltip, { content: "New terminal", children: _jsx("button", { onClick: addCliTab, className: "flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", children: _jsx(IconPlus, { size: 14 }) }) }), availableClis.length > 0 && (_jsxs("div", { className: "relative", children: [_jsx(IconTooltip, { content: `CLI: ${selectedLabel}`, children: _jsx("button", { ref: cliPickerBtnRef, onClick: () => setCliPickerOpen(!cliPickerOpen), className: cn("flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", cliPickerOpen && "bg-accent text-foreground"), children: _jsx(IconSettings, { size: 14 }) }) }), cliPickerOpen &&
+                                                                ReactDOM.createPortal(_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-[9980]", onClick: () => setCliPickerOpen(false) }), _jsx("div", { className: "fixed z-[9990] w-48 rounded-md border border-border bg-popover py-1 shadow-lg", style: (() => {
+                                                                                const r = cliPickerBtnRef.current?.getBoundingClientRect();
+                                                                                if (!r)
+                                                                                    return { top: 0, right: 0 };
+                                                                                return {
+                                                                                    top: r.bottom + 4,
+                                                                                    right: window.innerWidth - r.right,
+                                                                                };
+                                                                            })(), children: availableClis.map((cli) => (_jsxs("button", { className: cn("flex w-full items-center gap-2 px-3 py-1.5 text-xs hover:bg-accent", cli.command === selectedCli
+                                                                                    ? "text-foreground font-medium"
+                                                                                    : "text-muted-foreground"), onClick: () => {
+                                                                                    selectCli(cli.command);
+                                                                                    setCliPickerOpen(false);
+                                                                                }, children: [cli.command === selectedCli && (_jsx(IconCheck, { size: 12, className: "shrink-0" })), _jsx("span", { className: cli.command !== selectedCli
+                                                                                            ? "ml-5"
+                                                                                            : "", children: cli.label })] }, cli.command))) })] }), document.body)] })), _jsxs("div", { className: "relative", children: [_jsx(IconTooltip, { content: "Tab options", children: _jsx("button", { onClick: () => setTabMenuOpen(tabMenuOpen === "__cli_global"
+                                                                        ? null
+                                                                        : "__cli_global"), className: cn("flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", tabMenuOpen === "__cli_global" &&
+                                                                        "bg-accent text-foreground"), children: _jsx(IconDotsVertical, { size: 14 }) }) }), tabMenuOpen === "__cli_global" && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40", onClick: () => setTabMenuOpen(null) }), _jsxs("div", { className: "absolute right-0 top-full mt-1 z-50 w-44 rounded-md border border-border bg-popover py-1 shadow-lg", children: [_jsxs("button", { className: "flex w-full items-center justify-between px-3 py-1.5 text-xs text-foreground hover:bg-accent", onClick: () => {
+                                                                                    closeCliTab(activeCliTab);
+                                                                                    setTabMenuOpen(null);
+                                                                                }, children: ["Close Tab", _jsxs("kbd", { className: "text-[10px] text-muted-foreground", children: ["\u2318", "W"] })] }), _jsx("button", { className: "flex w-full items-center px-3 py-1.5 text-xs text-foreground hover:bg-accent", onClick: () => {
+                                                                                    closeOtherCliTabs(activeCliTab);
+                                                                                    setTabMenuOpen(null);
+                                                                                }, children: "Close Other Tabs" }), _jsx("button", { className: "flex w-full items-center px-3 py-1.5 text-xs text-foreground hover:bg-accent", onClick: () => {
+                                                                                    closeAllCliTabs();
+                                                                                    setTabMenuOpen(null);
+                                                                                }, children: "Close All Tabs" })] })] }))] })] }))] })] }), mode === "chat" && hasSubTabs && (_jsx("div", { className: "flex items-center px-2 py-0.5 border-b border-border gap-0.5 bg-muted/30", children: _jsxs("div", { className: "flex items-center gap-0.5 min-w-0 overflow-x-auto scrollbar-none flex-1", children: [_jsx("div", { role: "button", tabIndex: 0, onClick: () => setActiveTabId(focusParentId), className: cn("flex shrink-0 items-center gap-1 rounded-md px-2 py-1 text-[10px] font-medium cursor-pointer", activeTabId === focusParentId
+                                                ? "bg-accent text-foreground"
+                                                : "text-muted-foreground hover:bg-accent hover:text-foreground"), children: "Main" }), childTabs.map((tab) => (_jsxs("div", { role: "button", tabIndex: 0, ref: tab.id === activeTabId ? activeTabRefCb : undefined, onClick: () => setActiveTabId(tab.id), className: cn("agent-tab relative flex shrink-0 items-center gap-1 rounded-md px-2 py-1 text-[10px] font-medium cursor-pointer max-w-[140px]", tab.id === activeTabId
+                                                ? "bg-accent text-foreground"
+                                                : "text-muted-foreground hover:bg-accent hover:text-foreground"), children: [_jsx("span", { className: "truncate pr-1", children: tab.subAgentName || tab.label }), tab.status === "running" && (_jsx("span", { className: "h-1 w-1 shrink-0 rounded-full bg-muted-foreground/50 animate-pulse" })), _jsx("button", { type: "button", onClick: (e) => {
+                                                        e.stopPropagation();
+                                                        closeTab(tab.id);
+                                                    }, className: "agent-tab-close flex items-center justify-end text-muted-foreground hover:text-foreground", style: {
+                                                        position: "absolute",
+                                                        right: 0,
+                                                        top: 0,
+                                                        bottom: 0,
+                                                        width: 24,
+                                                        paddingRight: 4,
+                                                        borderRadius: "0 6px 6px 0",
+                                                        background: "linear-gradient(to right, transparent, hsl(var(--accent)) 40%)",
+                                                    }, children: _jsx(IconX, { size: 8 }) })] }, tab.id)))] }) }))] }));
+                })()] })), [
+        mode,
+        renderHeaderActions,
+        renderModeButtons,
+        cliTabs,
+        activeCliTab,
+        addCliTab,
+        closeCliTab,
+        closeOtherCliTabs,
+        closeAllCliTabs,
+        tabMenuOpen,
+        availableClis,
+        selectedCli,
+        selectedLabel,
+        selectCli,
+        cliPickerOpen,
+    ]);
+    return (_jsxs("div", { className: cn("agent-panel-root flex flex-1 flex-col min-h-0 h-full text-[13px] leading-[1.2] antialiased", className), style: AGENT_PANEL_ROOT_STYLE, children: [_jsx("style", { dangerouslySetInnerHTML: {
+                    __html: ".agent-tab-close{opacity:0}.agent-tab:hover .agent-tab-close{opacity:1}",
+                } }), _jsx("div", { className: cn("flex flex-col min-h-0", mode === "chat" ? "flex-1" : "shrink-0"), children: mounted && (_jsx(MultiTabAssistantChat, { apiUrl: apiUrl, showHeader: false, renderHeader: showHeader ? renderChatHeader : undefined, renderOverlay: undefined, contentHidden: mode !== "chat", emptyStateText: emptyStateText, suggestions: suggestions, onSwitchToCli: () => switchMode("cli"), execMode: execMode, onExecModeChange: switchExecMode, storageKey: storageKey })) }), isDevMode
+                ? cliTabs.map((id) => (_jsx("div", { className: cn("min-h-0 relative", mode === "cli" ? "flex-1" : "hidden"), style: {
+                        display: mode === "cli" && id === activeCliTab ? undefined : "none",
+                    }, children: _jsx(Suspense, { fallback: _jsx("div", { className: "flex items-center justify-center h-full text-muted-foreground text-sm", children: "Loading terminal..." }), children: _jsx(AgentTerminal, { command: selectedCli, hideInFrame: false, className: "h-full", style: { background: "transparent" } }) }) }, id)))
+                : mode === "cli" && (_jsxs("div", { className: "flex flex-1 flex-col items-center justify-center min-h-0 px-6 gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-muted", children: _jsx(IconTerminal2, { className: "h-5 w-5 text-muted-foreground" }) }), _jsxs("div", { className: "text-center max-w-[260px]", children: [_jsx("p", { className: "text-sm font-medium text-foreground mb-1", children: "CLI requires dev mode" }), _jsxs("p", { className: "text-xs text-muted-foreground leading-relaxed", children: ["Run this app locally with", " ", _jsx("code", { className: "bg-muted px-1 py-0.5 rounded text-[10px]", children: "pnpm dev" }), " ", "or use", " ", _jsx("span", { className: "font-medium text-foreground", children: "Builder.io" }), " ", "to access the CLI terminal."] })] })] })), mode === "resources" && (_jsx("div", { className: "flex-1 min-h-0", children: _jsx(Suspense, { fallback: _jsx("div", { className: "flex h-full flex-col min-h-0", children: _jsx("div", { className: "flex shrink-0 items-center justify-between border-b border-border px-2 py-1.5", children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "h-5 w-16 rounded bg-muted animate-pulse" }), _jsx("div", { className: "h-5 w-14 rounded bg-muted animate-pulse" })] }) }) }), children: _jsx(ResourcesPanel, {}) }) }))] }));
+}
+// ─── Resize handle ──────────────────────────────────────────────────────────
+const SIDEBAR_STORAGE_KEY = "agent-native-sidebar-width";
+const SIDEBAR_OPEN_KEY = "agent-native-sidebar-open";
+const SIDEBAR_MIN = 280;
+const SIDEBAR_MAX = 700;
+function ResizeHandle({ position, onDrag, }) {
+    const ref = useRef(null);
+    const dragging = useRef(false);
+    const lastX = useRef(0);
+    const onDragRef = useRef(onDrag);
+    onDragRef.current = onDrag;
+    const GRAB_ZONE = 5; // px on each side of the border
+    // All drag logic runs via document-level listeners so the 1px-wide
+    // element doesn't need to capture pointer events itself.
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        let cursorActive = false;
+        function onMouseDown(e) {
+            const rect = el.getBoundingClientRect();
+            const dist = Math.abs(e.clientX - (rect.left + rect.width / 2));
+            if (dist > GRAB_ZONE)
+                return;
+            e.preventDefault();
+            dragging.current = true;
+            lastX.current = e.clientX;
+            document.body.style.cursor = "col-resize";
+            document.body.style.userSelect = "none";
+        }
+        function onMouseMove(e) {
+            if (dragging.current) {
+                const delta = e.clientX - lastX.current;
+                lastX.current = e.clientX;
+                onDragRef.current(position === "left" ? delta : -delta);
+                return;
+            }
+            // Hover cursor
+            const rect = el.getBoundingClientRect();
+            const dist = Math.abs(e.clientX - (rect.left + rect.width / 2));
+            const near = dist <= GRAB_ZONE;
+            if (near && !cursorActive) {
+                cursorActive = true;
+                document.body.style.cursor = "col-resize";
+            }
+            else if (!near && cursorActive) {
+                cursorActive = false;
+                document.body.style.cursor = "";
+            }
+        }
+        function onMouseUp() {
+            if (!dragging.current)
+                return;
+            dragging.current = false;
+            document.body.style.cursor = "";
+            document.body.style.userSelect = "";
+        }
+        document.addEventListener("mousedown", onMouseDown);
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+        return () => {
+            document.removeEventListener("mousedown", onMouseDown);
+            document.removeEventListener("mousemove", onMouseMove);
+            document.removeEventListener("mouseup", onMouseUp);
+            if (cursorActive)
+                document.body.style.cursor = "";
+        };
+    }, [position]);
+    return (_jsx("div", { ref: ref, className: cn("relative z-20 shrink-0 w-px touch-none select-none transition-colors", "bg-border hover:bg-accent active:bg-accent"), style: { cursor: "col-resize" } }));
 }
 /**
  * Wraps app content with a toggleable agent sidebar.
  * Use AgentToggleButton in your header to open/close it.
  */
 export function AgentSidebar({ children, emptyStateText = "How can I help you?", suggestions, sidebarWidth = 380, position = "right", defaultOpen = false, }) {
-    const [open, setOpen] = useState(defaultOpen);
+    const [open, setOpen] = useState(() => {
+        // On mobile viewports the sidebar would cover most of the screen, so
+        // always start closed regardless of any persisted desktop preference.
+        if (typeof window !== "undefined" &&
+            window.matchMedia("(max-width: 767px)").matches) {
+            return false;
+        }
+        try {
+            const saved = localStorage.getItem(SIDEBAR_OPEN_KEY);
+            if (saved !== null)
+                return saved === "true";
+        }
+        catch { }
+        return defaultOpen;
+    });
+    const [presentationMode, setPresentationMode] = useState(false);
+    const [width, setWidth] = useState(sidebarWidth);
     useEffect(() => {
-        const handler = () => {
-            setOpen((prev) => !prev);
+        try {
+            const saved = localStorage.getItem(SIDEBAR_STORAGE_KEY);
+            if (saved) {
+                const n = parseInt(saved, 10);
+                if (n >= SIDEBAR_MIN && n <= SIDEBAR_MAX)
+                    setWidth(n);
+            }
+        }
+        catch { }
+    }, []);
+    const setOpenPersisted = useCallback((next) => {
+        setOpen((prev) => {
+            const value = typeof next === "function" ? next(prev) : next;
+            try {
+                localStorage.setItem(SIDEBAR_OPEN_KEY, String(value));
+            }
+            catch { }
+            return value;
+        });
+    }, []);
+    // Track whether the frame is controlling the sidebar (code mode = frame active).
+    // Default to true when inside an iframe — assume the frame sidebar is active
+    // until told otherwise. This prevents both sidebars flashing after hot reloads.
+    const [frameCodeMode, setFrameCodeMode] = useState(() => typeof window !== "undefined" && window.parent !== window);
+    useEffect(() => {
+        const toggleHandler = () => {
+            if (frameCodeMode && window.parent !== window) {
+                // Forward toggle to frame parent — the frame sidebar handles it
+                window.parent.postMessage({ type: "builder.toggleSidebar" }, "*");
+            }
+            else {
+                setOpenPersisted((prev) => !prev);
+            }
         };
-        window.addEventListener("agent-panel:toggle", handler);
-        return () => window.removeEventListener("agent-panel:toggle", handler);
+        const openHandler = () => {
+            if (frameCodeMode && window.parent !== window) {
+                window.parent.postMessage({ type: "builder.toggleSidebar", data: { open: true } }, "*");
+            }
+            else {
+                setOpenPersisted(true);
+            }
+        };
+        window.addEventListener("agent-panel:toggle", toggleHandler);
+        window.addEventListener("agent-panel:open", openHandler);
+        return () => {
+            window.removeEventListener("agent-panel:toggle", toggleHandler);
+            window.removeEventListener("agent-panel:open", openHandler);
+        };
+    }, [setOpenPersisted, frameCodeMode]);
+    // Listen for sidebar mode commands from the frame parent.
+    // When frame is in "code" mode, hide the app sidebar.
+    // When frame is in "app" mode, show the app sidebar, sync width and panel mode.
+    useEffect(() => {
+        if (window.parent === window)
+            return; // Not in an iframe
+        function handleMessage(event) {
+            if (event.data?.type !== "builder.sidebarMode")
+                return;
+            const { mode, appMode, width: frameWidth, open: frameOpen, } = event.data.data || {};
+            if (mode === "code") {
+                // Frame is showing its own sidebar — hide the app's
+                setFrameCodeMode(true);
+                setOpenPersisted(false);
+            }
+            else if (mode === "app") {
+                // Frame deferred to the app — show and sync width + mode
+                setFrameCodeMode(false);
+                if (frameOpen !== false) {
+                    setOpenPersisted(true);
+                }
+                if (frameWidth &&
+                    frameWidth >= SIDEBAR_MIN &&
+                    frameWidth <= SIDEBAR_MAX) {
+                    setWidth(frameWidth);
+                }
+                // Sync the panel mode from frame tab selection
+                if (appMode === "cli" ||
+                    appMode === "resources" ||
+                    appMode === "chat") {
+                    window.dispatchEvent(new CustomEvent("agent-panel:set-mode", {
+                        detail: { mode: appMode },
+                    }));
+                }
+            }
+        }
+        window.addEventListener("message", handleMessage);
+        return () => window.removeEventListener("message", handleMessage);
+    }, [setOpenPersisted]);
+    // Cmd+I / Ctrl+I to focus the agent chat
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if ((e.metaKey || e.ctrlKey) && e.key === "i") {
+                e.preventDefault();
+                focusAgentChat();
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, []);
+    // Hide sidebar during presentation mode
+    useEffect(() => {
+        const handler = (event) => {
+            if (event.data?.type !== "builder.presentationMode")
+                return;
+            setPresentationMode(event.data.data?.active === true);
+        };
+        window.addEventListener("message", handler);
+        return () => window.removeEventListener("message", handler);
+    }, []);
+    const handleDrag = useCallback((delta) => {
+        setWidth((prev) => {
+            const next = Math.min(SIDEBAR_MAX, Math.max(SIDEBAR_MIN, prev + delta));
+            try {
+                localStorage.setItem(SIDEBAR_STORAGE_KEY, String(next));
+            }
+            catch { }
+            return next;
+        });
     }, []);
     const isLeft = position === "left";
-    const borderClass = isLeft ? "border-r" : "border-l";
-    const sidebar = open ? (_jsx("div", { className: `flex flex-col ${borderClass} border-border shrink-0 overflow-hidden agent-sidebar-panel`, style: { width: sidebarWidth }, children: _jsx(AgentPanel, { emptyStateText: emptyStateText, suggestions: suggestions }) })) : null;
-    return (_jsxs("div", { className: "flex flex-1 overflow-hidden", children: [isLeft && sidebar, _jsx("div", { className: "flex flex-1 flex-col overflow-hidden min-w-0", children: children }), !isLeft && sidebar] }));
+    // Always render the sidebar panel (even when closed) so MultiTabAssistantChat
+    // stays mounted and can receive messages (e.g. from voice dictation) while
+    // the sidebar is visually hidden. When the user opens the sidebar they'll see
+    // any in-progress or completed conversations.
+    const sidebar = (_jsxs(_Fragment, { children: [isLeft ? null : open ? (_jsx(ResizeHandle, { position: position, onDrag: handleDrag })) : null, _jsx("div", { className: "agent-sidebar-panel flex shrink-0 flex-col overflow-hidden text-[13px] leading-[1.2] antialiased", style: {
+                    ...AGENT_PANEL_ROOT_STYLE,
+                    width,
+                    maxHeight: "100vh",
+                    display: open ? "flex" : "none",
+                }, children: _jsx(AgentPanel, { emptyStateText: emptyStateText, suggestions: suggestions, onCollapse: () => setOpenPersisted(false) }) }), isLeft ? (open ? (_jsx(ResizeHandle, { position: position, onDrag: handleDrag })) : null) : null] }));
+    return (_jsxs("div", { className: "flex min-w-0 flex-1 h-screen overflow-hidden", children: [isLeft && !presentationMode ? sidebar : null, _jsx("div", { className: "flex flex-1 flex-col overflow-auto min-w-0", children: children }), !isLeft && !presentationMode ? sidebar : null] }));
+}
+/**
+ * Focus the agent chat composer input.
+ * Opens the sidebar if closed, then focuses the text input.
+ */
+export function focusAgentChat() {
+    window.dispatchEvent(new Event("agent-panel:open"));
+    // Wait for sidebar to render, then focus the composer
+    requestAnimationFrame(() => {
+        const panel = document.querySelector(".agent-sidebar-panel");
+        if (!panel)
+            return;
+        const prosemirror = panel.querySelector(".ProseMirror");
+        if (prosemirror) {
+            prosemirror.focus();
+            return;
+        }
+        const textarea = panel.querySelector("textarea");
+        if (textarea)
+            textarea.focus();
+    });
 }
 /**
  * Button to toggle the agent sidebar. Place this in your app's header/toolbar.
  * Dispatches a custom event that AgentSidebar listens for.
  */
 export function AgentToggleButton({ className }) {
-    return (_jsx("button", { onClick: () => window.dispatchEvent(new Event("agent-panel:toggle")), className: cn("flex h-7 w-7 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", className), title: "Toggle agent", children: _jsx(ChatBubbleIcon, { className: "h-4 w-4" }) }));
+    return (_jsx("button", { onClick: () => window.dispatchEvent(new Event("agent-panel:toggle")), className: cn("ml-1.5 flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", className), title: "Toggle agent", children: _jsx(IconMessage, { size: 16 }) }));
 }
 //# sourceMappingURL=AgentPanel.js.map