@agent-native/core 0.5.0-dev.b51eaae → 0.6.1

package/dist/client/AgentPanel.js

@@ -25,7 +25,7 @@ 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, IconPencil, IconDotsVertical, IconHistory, } from "@tabler/icons-react";
+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";
@@ -35,8 +35,12 @@ const AgentTerminal = lazy(() => import("./terminal/index.js").then((m) => ({ de
 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 = "builder";
+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 = {
@@ -46,7 +50,7 @@ const AGENT_PANEL_ROOT_STYLE = {
 };
 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: 12,
+    paddingLeft: 8,
     paddingRight: 8,
 };
 const AGENT_PANEL_CONTROL_STYLE = {
@@ -60,34 +64,33 @@ function useAvailableClis() {
         // 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() {
+function useCliSelection(keyPrefix) {
+    const cliKey = `${CLI_STORAGE_KEY}${keyPrefix}`;
     const [selected, setSelected] = useState(CLI_DEFAULT);
     useEffect(() => {
         try {
-            const saved = localStorage.getItem(CLI_STORAGE_KEY);
+            const saved = localStorage.getItem(cliKey);
             if (saved)
                 setSelected(saved);
         }
         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;
+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))) }) }) })] })] }));
@@ -96,7 +99,7 @@ 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, }) {
+function AgentSettingsPopover({ isDevMode, onToggle, devAppUrl, showEnvToggle = true, }) {
     const [open, setOpen] = useState(false);
     const popoverRef = useRef(null);
     const buttonRef = useRef(null);
@@ -156,22 +159,165 @@ function AgentSettingsPopover({ isDevMode, onToggle, }) {
     }, [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: _jsx("div", { className: "space-y-3 p-3", children: _jsx(SettingsSelect, { label: "Environment", value: isDevMode ? "development" : "production", options: environmentOptions, onValueChange: (next) => {
-                                const nextIsDev = next === "development";
-                                if (nextIsDev !== isDevMode)
-                                    onToggle();
-                            } }) }) }), document.body)] }));
+                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 useClientOnly() {
     const [mounted, setMounted] = useState(false);
     useEffect(() => setMounted(true), []);
     return mounted;
 }
-export function AgentPanel({ defaultMode = "chat", className, apiUrl, emptyStateText, suggestions, showHeader = true, onCollapse, }) {
+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(EXEC_MODE_KEY);
+            const saved = localStorage.getItem(execModeKey);
             if (saved === "build" || saved === "plan")
                 return saved;
         }
@@ -181,16 +327,16 @@ export function AgentPanel({ defaultMode = "chat", className, apiUrl, emptyState
     const switchExecMode = useCallback((next) => {
         setExecMode(next);
         try {
-            localStorage.setItem(EXEC_MODE_KEY, next);
+            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("agent-native-panel-mode");
+            const saved = localStorage.getItem(panelModeKey);
             if (saved === "chat" || saved === "cli" || saved === "resources")
                 return saved;
         }
@@ -199,13 +345,23 @@ export function AgentPanel({ defaultMode = "chat", className, apiUrl, emptyState
     });
     useEffect(() => {
         try {
-            localStorage.setItem("agent-native-panel-mode", mode);
+            localStorage.setItem(panelModeKey, mode);
         }
         catch { }
-    }, [mode]);
+    }, [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");
@@ -217,8 +373,12 @@ export function AgentPanel({ defaultMode = "chat", className, apiUrl, emptyState
     }, []);
     const closeCliTab = useCallback((id) => {
         setCliTabs((prev) => {
-            if (prev.length <= 1)
-                return 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);
@@ -237,9 +397,25 @@ export function AgentPanel({ defaultMode = "chat", className, apiUrl, emptyState
         setActiveCliTab(id);
     }, []);
     const availableClis = useAvailableClis();
-    const [selectedCli, selectCli] = useCliSelection();
+    const [selectedCli, selectCli] = useCliSelection(keyPrefix);
     const selectedLabel = availableClis.find((c) => c.command === selectedCli)?.label || selectedCli;
     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" ||
@@ -248,16 +424,17 @@ export function AgentPanel({ defaultMode = "chat", className, apiUrl, emptyState
     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"] }), isDevMode && (_jsxs("button", { onClick: () => switchMode("cli"), className: cn("flex items-center gap-1 rounded-md px-2 py-1 text-[12px] leading-none", activeMode === "cli"
+                    : "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"
+                    : "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: [showDevToggle && (_jsx(IconTooltip, { content: "Agent settings", children: _jsx("div", { children: _jsx(AgentSettingsPopover, { isDevMode: isDevMode, onToggle: () => setDevMode(!isDevMode) }) }) })), 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]);
+    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.
-    // Manually calculates scroll position to avoid scrollIntoView moving outer containers.
+    // Uses getBoundingClientRect for reliable positioning regardless of offsetParent.
     const activeTabRefCb = useCallback((el) => {
         if (!el)
             return;
@@ -266,78 +443,120 @@ export function AgentPanel({ defaultMode = "chat", className, apiUrl, emptyState
             return;
         // Use rAF so layout is settled after React commit
         requestAnimationFrame(() => {
-            const tabLeft = el.offsetLeft;
-            const tabRight = tabLeft + el.offsetWidth;
-            const scrollLeft = container.scrollLeft;
-            const viewWidth = container.clientWidth;
-            if (tabLeft < scrollLeft) {
-                container.scrollLeft = tabLeft;
+            const containerRect = container.getBoundingClientRect();
+            const tabRect = el.getBoundingClientRect();
+            if (tabRect.left < containerRect.left) {
+                container.scrollLeft += tabRect.left - containerRect.left;
             }
-            else if (tabRight > scrollLeft + viewWidth) {
-                container.scrollLeft = tabRight - viewWidth;
+            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") && (_jsxs("div", { className: "flex items-center px-1 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"
-                            ? tabs.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.5 py-1.5 text-[11px] font-medium cursor-pointer max-w-[150px]", 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.label }), tab.status === "running" && (_jsx("span", { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/50 animate-pulse" })), tabs.length > 1 && (_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] }), cliTabs.length > 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", { 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 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40", onClick: () => setCliPickerOpen(false) }), _jsx("div", { className: "absolute right-0 top-full mt-1 z-50 w-48 rounded-md border border-border bg-popover py-1 shadow-lg", 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))) })] }))] })), _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" })] })] }))] })] }))] })] }))] })), [
+    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,
@@ -356,14 +575,11 @@ export function AgentPanel({ defaultMode = "chat", className, apiUrl, emptyState
     ]);
     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: isDevMode ? () => switchMode("cli") : undefined, composerSlot: _jsxs("div", { className: "shrink-0 px-3 pt-1.5 pb-0 flex items-center justify-between gap-2", children: [execMode === "plan" ? (_jsxs("div", { className: "flex items-center gap-1.5 text-[11px] text-amber-700 dark:text-amber-400 min-w-0 truncate", children: [_jsx(IconPencil, { size: 12, className: "shrink-0" }), _jsx("span", { className: "truncate", children: "Plan mode \u2014 will plan before executing" })] })) : (_jsx("div", {})), _jsxs("div", { className: "flex shrink-0 items-center rounded-md border border-border overflow-hidden", style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx("button", { onClick: () => switchExecMode("build"), className: cn("px-2 py-1 text-[11px] leading-none", execMode === "build"
-                                            ? "bg-accent text-foreground"
-                                            : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), title: "Build mode \u2014 agent executes immediately", children: "Build" }), _jsx("button", { onClick: () => switchExecMode("plan"), className: cn("px-2 py-1 text-[11px] leading-none", execMode === "plan"
-                                            ? "bg-amber-500/20 text-amber-700 dark:text-amber-400"
-                                            : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), title: "Plan mode \u2014 agent plans before executing", children: "Plan" })] })] }) })) }), isDevMode &&
-                cliTabs.map((id) => (_jsx("div", { className: cn("min-h-0 relative", mode === "cli" ? "flex-1" : "hidden"), style: {
+                } }), _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, hideInHarness: false, className: "h-full", style: { background: "transparent" } }) }) }, id))), 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, {}) }) }))] }));
+                    }, 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";
@@ -441,6 +657,12 @@ function ResizeHandle({ position, onDrag, }) {
  */
 export function AgentSidebar({ children, emptyStateText = "How can I help you?", suggestions, sidebarWidth = 380, position = "right", defaultOpen = false, }) {
     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)
@@ -449,6 +671,7 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
         catch { }
         return defaultOpen;
     });
+    const [presentationMode, setPresentationMode] = useState(false);
     const [width, setWidth] = useState(sidebarWidth);
     useEffect(() => {
         try {
@@ -471,12 +694,27 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
             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 = () => {
-            setOpenPersisted((prev) => !prev);
+            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);
+            }
         };
         const openHandler = () => {
-            setOpenPersisted(true);
+            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);
@@ -484,6 +722,45 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
             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(() => {
@@ -496,6 +773,16 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
         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));
@@ -507,8 +794,17 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
         });
     }, []);
     const isLeft = position === "left";
-    const sidebar = (_jsxs(_Fragment, { children: [isLeft ? null : _jsx(ResizeHandle, { position: position, onDrag: handleDrag }), _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" }, children: _jsx(AgentPanel, { emptyStateText: emptyStateText, suggestions: suggestions, onCollapse: () => setOpenPersisted(false) }) }), isLeft ? _jsx(ResizeHandle, { position: position, onDrag: handleDrag }) : null] }));
-    return (_jsxs("div", { className: "flex min-w-0 flex-1 overflow-hidden", children: [isLeft && open ? sidebar : null, _jsx("div", { className: "flex flex-1 flex-col overflow-hidden min-w-0", children: children }), !isLeft && open ? sidebar : null] }));
+    // 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.
@@ -536,6 +832,6 @@ export function focusAgentChat() {
  * 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-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 }) }));
+    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