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

package/dist/client/AgentPanel.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
- * AgentPanel — unified agent component with chat and CLI terminal modes.
+ * AgentPanel — unified agent component with chat, CLI, and workspace modes.
  *
  * A self-contained panel with no layout opinions — drop it into a sidebar,
  * popover, dialog, full page, or any container. It fills its parent via
@@ -23,9 +23,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 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, IconLayoutGrid, IconCheck, IconPlus, IconX, IconDotsVertical, IconHistory, } from "@tabler/icons-react";
 import { MultiTabAssistantChat, } from "./MultiTabAssistantChat.js";
 import { useDevMode } from "./use-dev-mode.js";
 import { cn } from "./utils.js";
@@ -35,8 +34,21 @@ const AgentTerminal = lazy(() => import("./terminal/index.js").then((m) => ({ de
 const ResourcesPanel = lazy(() => import("./resources/ResourcesPanel.js").then((m) => ({
     default: m.ResourcesPanel,
 })));
+// Lazy-load SettingsPanel to avoid bundling when not needed
+const SettingsPanel = lazy(() => import("./settings/index.js").then((m) => ({
+    default: m.SettingsPanel,
+})));
+// Lazy-load OnboardingPanel — only pulled in when onboarding is active.
+const OnboardingPanel = lazy(() => import("./onboarding/OnboardingPanel.js").then((m) => ({
+    default: m.OnboardingPanel,
+})));
+// Lazy-load SetupButton — the header entry-point that re-opens the
+// onboarding panel after the user has dismissed it.
+const SetupButton = lazy(() => import("./onboarding/SetupButton.js").then((m) => ({
+    default: m.SetupButton,
+})));
 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 +58,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,118 +72,50 @@ 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;
-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))) }) }) })] })] }));
-}
+const IS_DEV = import.meta.env?.DEV === true;
+// ─── Settings panel components moved to ./settings/ ────────────────────────
 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, }) {
-    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: _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)] }));
-}
 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,17 +125,20 @@ 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");
-            if (saved === "chat" || saved === "cli" || saved === "resources")
+            const saved = localStorage.getItem(panelModeKey);
+            if (saved === "chat" ||
+                saved === "cli" ||
+                saved === "resources" ||
+                saved === "settings")
                 return saved;
         }
         catch { }
@@ -199,13 +146,31 @@ 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]);
+    // Open settings tab when requested (replaces the old popover open event)
+    useEffect(() => {
+        function handleOpenSettings() {
+            switchMode("settings");
+        }
+        window.addEventListener("agent-panel:open-settings", handleOpenSettings);
+        return () => window.removeEventListener("agent-panel:open-settings", handleOpenSettings);
+    }, [switchMode]);
     // CLI terminal tabs (ephemeral — not persisted to SQL)
     const [cliTabs, setCliTabs] = useState(["cli-1"]);
     const [activeCliTab, setActiveCliTab] = useState("cli-1");
@@ -217,8 +182,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 +206,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 +233,19 @@ 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"
                     ? "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: "Workspace files, agents, skills, and tasks", style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx(IconLayoutGrid, { size: 14 }), "Workspace"] }), _jsx("button", { onClick: () => switchMode("settings"), className: cn("flex items-center justify-center rounded-md px-1.5 py-1", activeMode === "settings"
                     ? "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]);
+                    : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), title: "Setup and configuration", children: _jsx(IconSettings, { size: 14 }) })] })), [isDevMode]);
+    const renderHeaderActions = useCallback(() => (_jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [_jsx(Suspense, { fallback: null, children: _jsx(SetupButton, {}) }), 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 }) }) }))] })), [onCollapse]);
     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 +254,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 +386,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: {
+                } }), mounted && mode === "chat" && (_jsx(Suspense, { fallback: null, children: _jsx(OnboardingPanel, {}) })), _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, {}) }) })), mode === "settings" && (_jsx("div", { className: "flex flex-col flex-1 min-h-0", children: _jsx(Suspense, { fallback: _jsxs("div", { className: "p-3 space-y-2", children: [_jsx("div", { className: "h-10 w-full rounded-lg bg-muted animate-pulse" }), _jsx("div", { className: "h-10 w-full rounded-lg bg-muted animate-pulse" }), _jsx("div", { className: "h-10 w-full rounded-lg bg-muted animate-pulse" })] }), children: _jsx(SettingsPanel, { isDevMode: isDevMode, onToggleDevMode: () => setDevMode(!isDevMode), showDevToggle: showDevToggle, devAppUrl: devAppUrl }) }) }))] }));
 }
 // ─── Resize handle ──────────────────────────────────────────────────────────
 const SIDEBAR_STORAGE_KEY = "agent-native-sidebar-width";
@@ -441,6 +468,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,7 +482,17 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
         catch { }
         return defaultOpen;
     });
+    const [presentationMode, setPresentationMode] = useState(false);
     const [width, setWidth] = useState(sidebarWidth);
+    // Track mobile viewport so we can switch to overlay mode.
+    const [isMobile, setIsMobile] = useState(() => typeof window !== "undefined" &&
+        window.matchMedia("(max-width: 767px)").matches);
+    useEffect(() => {
+        const mq = window.matchMedia("(max-width: 767px)");
+        const handler = (e) => setIsMobile(e.matches);
+        mq.addEventListener("change", handler);
+        return () => mq.removeEventListener("change", handler);
+    }, []);
     useEffect(() => {
         try {
             const saved = localStorage.getItem(SIDEBAR_STORAGE_KEY);
@@ -471,12 +514,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 +542,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 +593,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 +614,35 @@ 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] }));
+    // On mobile the sidebar floats as a fixed overlay so the content below isn't
+    // squashed. On desktop it participates in the flex layout as before.
+    const mobileSidebarStyle = isMobile
+        ? {
+            position: "fixed",
+            top: 0,
+            [isLeft ? "left" : "right"]: 0,
+            height: "100%",
+            maxWidth: "85vw",
+            zIndex: 50,
+            background: "hsl(var(--background))",
+            borderLeft: isLeft ? "none" : "1px solid hsl(var(--border))",
+            borderRight: isLeft ? "1px solid hsl(var(--border))" : "none",
+        }
+        : {};
+    // 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: [!isMobile &&
+                (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,
+                    ...mobileSidebarStyle,
+                    width,
+                    maxHeight: "100vh",
+                    display: open ? "flex" : "none",
+                }, children: _jsx(AgentPanel, { emptyStateText: emptyStateText, suggestions: suggestions, onCollapse: () => setOpenPersisted(false) }) }), !isMobile &&
+                (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: [isMobile && open && !presentationMode && (_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", onClick: () => setOpenPersisted(false) })), 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 +670,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