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

package/dist/client/AgentPanel.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * AgentPanel — unified agent component with chat and CLI terminal modes.
  *
@@ -21,17 +21,44 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *   // Full page
  *   <AgentPanel className="h-screen" />
  */
-import { useState, useEffect, lazy, Suspense } from "react";
-import { AssistantChat } from "./AssistantChat.js";
+import ReactDOM from "react-dom";
+import { useState, useEffect, useRef, useCallback, lazy, Suspense, startTransition, } from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { IconMessage, IconTerminal2, IconSettings, IconLayoutSidebarRightCollapse, IconChevronDown, IconCheck, IconPlus, IconFolder, IconX, IconPencil, IconDotsVertical, IconHistory, } from "@tabler/icons-react";
+import { MultiTabAssistantChat, } from "./MultiTabAssistantChat.js";
+import { useDevMode } from "./use-dev-mode.js";
 import { cn } from "./utils.js";
 // Lazy-load AgentTerminal to avoid bundling xterm.js when not needed
 const AgentTerminal = lazy(() => import("./terminal/index.js").then((m) => ({ default: m.AgentTerminal })));
+// Lazy-load ResourcesPanel to avoid bundling when not needed
+const ResourcesPanel = lazy(() => import("./resources/ResourcesPanel.js").then((m) => ({
+    default: m.ResourcesPanel,
+})));
 const CLI_STORAGE_KEY = "agent-native-cli-command";
-const CLI_DEFAULT = "fusion";
+const CLI_DEFAULT = "builder";
+const EXEC_MODE_KEY = "agent-native-exec-mode";
+const AGENT_PANEL_FONT_FAMILY = 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+const AGENT_PANEL_ROOT_STYLE = {
+    fontFamily: AGENT_PANEL_FONT_FAMILY,
+    fontSize: 13,
+    lineHeight: 1.2,
+};
+const AGENT_PANEL_HEADER_CLASS = "relative z-[240] flex h-11 shrink-0 items-center justify-between gap-2 border-b border-border";
+const AGENT_PANEL_HEADER_STYLE = {
+    paddingLeft: 12,
+    paddingRight: 8,
+};
+const AGENT_PANEL_CONTROL_STYLE = {
+    fontSize: 12,
+    lineHeight: 1,
+};
 function useAvailableClis() {
     const [clis, setClis] = useState([]);
     useEffect(() => {
-        fetch("/api/available-clis")
+        // Try to fetch available CLIs — endpoint is provided by the terminal plugin.
+        // Returns 404 gracefully when the plugin isn't loaded.
+        fetch("/_agent-native/available-clis")
             .then((r) => (r.ok ? r.json() : []))
             .then((data) => setClis(data))
             .catch(() => { });
@@ -39,12 +66,15 @@ function useAvailableClis() {
     return clis;
 }
 function useCliSelection() {
-    const [selected, setSelected] = useState(() => {
-        if (typeof localStorage !== "undefined") {
-            return localStorage.getItem(CLI_STORAGE_KEY) || CLI_DEFAULT;
+    const [selected, setSelected] = useState(CLI_DEFAULT);
+    useEffect(() => {
+        try {
+            const saved = localStorage.getItem(CLI_STORAGE_KEY);
+            if (saved)
+                setSelected(saved);
         }
-        return CLI_DEFAULT;
-    });
+        catch { }
+    }, []);
     const select = (cmd) => {
         setSelected(cmd);
         try {
@@ -58,47 +88,454 @@ function useCliSelection() {
 const IS_DEV = typeof import.meta !== "undefined" &&
     typeof import.meta.env !== "undefined" &&
     import.meta.env.DEV === true;
-// ─── Icons ──────────────────────────────────────────────────────────────────
-function ChatBubbleIcon({ className }) {
-    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", className: className, children: _jsx("path", { d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" }) }));
+function SettingsSelect({ label, value, options, onValueChange, }) {
+    const selected = options.find((option) => option.value === value);
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: "text-[12px] font-medium text-foreground", children: label }), _jsxs(SelectPrimitive.Root, { value: value, onValueChange: onValueChange, children: [_jsxs(SelectPrimitive.Trigger, { className: "flex h-9 w-full items-center justify-between rounded-md border border-border bg-background px-3 text-left text-[12px] text-foreground outline-none transition-colors hover:bg-accent/40 data-[placeholder]:text-muted-foreground", "aria-label": label, style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx(SelectPrimitive.Value, { children: selected?.label ?? value }), _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(IconChevronDown, { size: 14, className: "text-muted-foreground" }) })] }), _jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Content, { position: "popper", sideOffset: 6, className: "z-[9999] w-[var(--radix-select-trigger-width)] overflow-hidden rounded-lg border border-border bg-popover shadow-lg", children: _jsx(SelectPrimitive.Viewport, { className: "p-1", children: options.map((option) => (_jsxs(SelectPrimitive.Item, { value: option.value, className: "relative flex w-full cursor-pointer select-none items-start gap-2 rounded-md px-8 py-2.5 text-[12px] outline-none data-[highlighted]:bg-accent/60 data-[state=checked]:bg-accent/40", style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx("span", { className: "absolute left-2 top-2.5 flex h-4 w-4 items-center justify-center text-muted-foreground", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(IconCheck, { size: 14 }) }) }), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx(SelectPrimitive.ItemText, { children: _jsx("span", { className: "text-foreground", children: option.label }) }), option.description ? (_jsx("span", { className: "mt-0.5 text-[11px] leading-relaxed text-muted-foreground", children: option.description })) : null] })] }, option.value))) }) }) })] })] }));
 }
-function TerminalIcon({ className }) {
-    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [_jsx("polyline", { points: "4 17 10 11 4 5" }), _jsx("line", { x1: "12", y1: "19", x2: "20", y2: "19" })] }));
+function 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" })] }) })] }) }));
 }
-export function AgentPanel({ defaultMode = "chat", className, apiUrl, emptyStateText, suggestions, showHeader = true, }) {
-    const [mode, setMode] = useState(defaultMode);
+// ─── 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, }) {
+    const mounted = useClientOnly();
+    const [execMode, setExecMode] = useState(() => {
+        try {
+            const saved = localStorage.getItem(EXEC_MODE_KEY);
+            if (saved === "build" || saved === "plan")
+                return saved;
+        }
+        catch { }
+        return "build";
+    });
+    const switchExecMode = useCallback((next) => {
+        setExecMode(next);
+        try {
+            localStorage.setItem(EXEC_MODE_KEY, next);
+        }
+        catch { }
+        window.dispatchEvent(new CustomEvent("agent-panel:exec-mode-change", {
+            detail: { mode: next },
+        }));
+    }, []);
+    const [mode, setMode] = useState(() => {
+        try {
+            const saved = localStorage.getItem("agent-native-panel-mode");
+            if (saved === "chat" || saved === "cli" || saved === "resources")
+                return saved;
+        }
+        catch { }
+        return defaultMode;
+    });
+    useEffect(() => {
+        try {
+            localStorage.setItem("agent-native-panel-mode", mode);
+        }
+        catch { }
+    }, [mode]);
+    const switchMode = useCallback((m) => {
+        startTransition(() => setMode(m));
+    }, []);
+    // CLI terminal tabs (ephemeral — not persisted to SQL)
+    const [cliTabs, setCliTabs] = useState(["cli-1"]);
+    const [activeCliTab, setActiveCliTab] = useState("cli-1");
+    const cliCounter = useRef(1);
+    const addCliTab = useCallback(() => {
+        const id = `cli-${++cliCounter.current}`;
+        setCliTabs((prev) => [...prev, id]);
+        setActiveCliTab(id);
+    }, []);
+    const closeCliTab = useCallback((id) => {
+        setCliTabs((prev) => {
+            if (prev.length <= 1)
+                return prev;
+            const next = prev.filter((t) => t !== id);
+            if (id === activeCliTab) {
+                const idx = prev.indexOf(id);
+                setActiveCliTab(next[Math.min(idx, next.length - 1)]);
+            }
+            return next;
+        });
+    }, [activeCliTab]);
+    const closeOtherCliTabs = useCallback((id) => {
+        setCliTabs([id]);
+        setActiveCliTab(id);
+    }, []);
+    const closeAllCliTabs = useCallback(() => {
+        const id = `cli-${++cliCounter.current}`;
+        setCliTabs([id]);
+        setActiveCliTab(id);
+    }, []);
     const availableClis = useAvailableClis();
     const [selectedCli, selectCli] = useCliSelection();
     const selectedLabel = availableClis.find((c) => c.command === selectedCli)?.label || selectedCli;
-    return (_jsxs("div", { className: cn("flex flex-1 flex-col h-full min-h-0", className), children: [showHeader && (_jsxs("div", { className: "flex h-11 shrink-0 items-center justify-between border-b border-border px-4", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs("button", { onClick: () => setMode("chat"), className: cn("flex items-center gap-1 px-2 py-1 rounded-md text-[12px]", mode === "chat"
+    const { isDevMode, canToggle, setDevMode } = useDevMode(apiUrl);
+    const isLocalhost = mounted &&
+        typeof window !== "undefined" &&
+        (window.location.hostname === "localhost" ||
+            window.location.hostname === "127.0.0.1" ||
+            window.location.hostname === "::1");
+    const showDevToggle = canToggle && isLocalhost;
+    const renderModeButtons = useCallback((activeMode) => (_jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [_jsxs("button", { onClick: () => switchMode("chat"), className: cn("flex items-center gap-1 rounded-md px-2 py-1 text-[12px] leading-none", activeMode === "chat"
+                    ? "bg-accent text-foreground"
+                    : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), title: "Chat mode", style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx(IconMessage, { size: 14 }), "Chat"] }), 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"
+                    ? "bg-accent text-foreground"
+                    : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), title: "CLI terminal mode", style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx(IconTerminal2, { size: 14 }), "CLI"] })), _jsxs("button", { onClick: () => switchMode("resources"), className: cn("flex items-center gap-1 rounded-md px-2 py-1 text-[12px] leading-none", activeMode === "resources"
+                    ? "bg-accent text-foreground"
+                    : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), title: "Files & resources", style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx(IconFolder, { size: 14 }), "Files"] })] })), [isDevMode]);
+    const renderHeaderActions = useCallback(() => (_jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [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 [tabMenuOpen, setTabMenuOpen] = useState(null);
+    const [cliPickerOpen, setCliPickerOpen] = useState(false);
+    // Ref callback: scroll the active tab into view in the overflow container.
+    // Manually calculates scroll position to avoid scrollIntoView moving outer containers.
+    const activeTabRefCb = useCallback((el) => {
+        if (!el)
+            return;
+        const container = el.parentElement;
+        if (!container)
+            return;
+        // Use rAF so layout is settled after React commit
+        requestAnimationFrame(() => {
+            const tabLeft = el.offsetLeft;
+            const tabRight = tabLeft + el.offsetWidth;
+            const scrollLeft = container.scrollLeft;
+            const viewWidth = container.clientWidth;
+            if (tabLeft < scrollLeft) {
+                container.scrollLeft = tabLeft;
+            }
+            else if (tabRight > scrollLeft + viewWidth) {
+                container.scrollLeft = tabRight - viewWidth;
+            }
+        });
+    }, []);
+    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:text-foreground hover:bg-accent/50"), title: "Chat mode", children: [_jsx(ChatBubbleIcon, { className: "h-3.5 w-3.5" }), "Chat"] }), IS_DEV && (_jsxs("button", { onClick: () => setMode("cli"), className: cn("flex items-center gap-1 px-2 py-1 rounded-md text-[12px]", mode === "cli"
+                                    : "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:text-foreground hover:bg-accent/50"), title: "CLI terminal mode", children: [_jsx(TerminalIcon, { className: "h-3.5 w-3.5" }), "CLI"] }))] }), IS_DEV && availableClis.length > 0 && (_jsx("select", { value: selectedCli, onChange: (e) => selectCli(e.target.value), className: "text-[12px] text-muted-foreground bg-transparent border border-border rounded px-1.5 py-0.5 outline-none hover:text-foreground cursor-pointer", title: "Select AI CLI", children: availableClis.map((cli) => (_jsx("option", { value: cli.command, children: cli.label }, cli.command))) }))] })), _jsx("div", { className: cn("flex-1 flex flex-col min-h-0", mode !== "chat" && "hidden"), children: _jsx(AssistantChat, { apiUrl: apiUrl, showHeader: false, showDevHint: IS_DEV, emptyStateText: emptyStateText, suggestions: suggestions, onSwitchToCli: IS_DEV ? () => setMode("cli") : undefined }) }), IS_DEV && mode === "cli" && (_jsx("div", { className: "flex-1 min-h-0", children: _jsx(Suspense, { fallback: _jsx("div", { className: "flex items-center justify-center h-full text-muted-foreground text-sm", children: "Loading terminal..." }), children: _jsx(AgentTerminal, { command: selectedCli, hideInHarness: false, className: "h-full", style: { background: "transparent" } }) }) }))] }));
+                                    : "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" })] })] }))] })] }))] })] }))] })), [
+        mode,
+        renderHeaderActions,
+        renderModeButtons,
+        cliTabs,
+        activeCliTab,
+        addCliTab,
+        closeCliTab,
+        closeOtherCliTabs,
+        closeAllCliTabs,
+        tabMenuOpen,
+        availableClis,
+        selectedCli,
+        selectedLabel,
+        selectCli,
+        cliPickerOpen,
+    ]);
+    return (_jsxs("div", { className: cn("agent-panel-root flex flex-1 flex-col min-h-0 h-full text-[13px] leading-[1.2] antialiased", className), style: AGENT_PANEL_ROOT_STYLE, children: [_jsx("style", { dangerouslySetInnerHTML: {
+                    __html: ".agent-tab-close{opacity:0}.agent-tab:hover .agent-tab-close{opacity:1}",
+                } }), _jsx("div", { className: cn("flex flex-col min-h-0", mode === "chat" ? "flex-1" : "shrink-0"), children: mounted && (_jsx(MultiTabAssistantChat, { apiUrl: apiUrl, showHeader: false, renderHeader: showHeader ? renderChatHeader : undefined, renderOverlay: undefined, contentHidden: mode !== "chat", emptyStateText: emptyStateText, suggestions: suggestions, onSwitchToCli: 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: {
+                        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, {}) }) }))] }));
+}
+// ─── Resize handle ──────────────────────────────────────────────────────────
+const SIDEBAR_STORAGE_KEY = "agent-native-sidebar-width";
+const SIDEBAR_OPEN_KEY = "agent-native-sidebar-open";
+const SIDEBAR_MIN = 280;
+const SIDEBAR_MAX = 700;
+function ResizeHandle({ position, onDrag, }) {
+    const ref = useRef(null);
+    const dragging = useRef(false);
+    const lastX = useRef(0);
+    const onDragRef = useRef(onDrag);
+    onDragRef.current = onDrag;
+    const GRAB_ZONE = 5; // px on each side of the border
+    // All drag logic runs via document-level listeners so the 1px-wide
+    // element doesn't need to capture pointer events itself.
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        let cursorActive = false;
+        function onMouseDown(e) {
+            const rect = el.getBoundingClientRect();
+            const dist = Math.abs(e.clientX - (rect.left + rect.width / 2));
+            if (dist > GRAB_ZONE)
+                return;
+            e.preventDefault();
+            dragging.current = true;
+            lastX.current = e.clientX;
+            document.body.style.cursor = "col-resize";
+            document.body.style.userSelect = "none";
+        }
+        function onMouseMove(e) {
+            if (dragging.current) {
+                const delta = e.clientX - lastX.current;
+                lastX.current = e.clientX;
+                onDragRef.current(position === "left" ? delta : -delta);
+                return;
+            }
+            // Hover cursor
+            const rect = el.getBoundingClientRect();
+            const dist = Math.abs(e.clientX - (rect.left + rect.width / 2));
+            const near = dist <= GRAB_ZONE;
+            if (near && !cursorActive) {
+                cursorActive = true;
+                document.body.style.cursor = "col-resize";
+            }
+            else if (!near && cursorActive) {
+                cursorActive = false;
+                document.body.style.cursor = "";
+            }
+        }
+        function onMouseUp() {
+            if (!dragging.current)
+                return;
+            dragging.current = false;
+            document.body.style.cursor = "";
+            document.body.style.userSelect = "";
+        }
+        document.addEventListener("mousedown", onMouseDown);
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+        return () => {
+            document.removeEventListener("mousedown", onMouseDown);
+            document.removeEventListener("mousemove", onMouseMove);
+            document.removeEventListener("mouseup", onMouseUp);
+            if (cursorActive)
+                document.body.style.cursor = "";
+        };
+    }, [position]);
+    return (_jsx("div", { ref: ref, className: cn("relative z-20 shrink-0 w-px touch-none select-none transition-colors", "bg-border hover:bg-accent active:bg-accent"), style: { cursor: "col-resize" } }));
 }
 /**
  * Wraps app content with a toggleable agent sidebar.
  * Use AgentToggleButton in your header to open/close it.
  */
 export function AgentSidebar({ children, emptyStateText = "How can I help you?", suggestions, sidebarWidth = 380, position = "right", defaultOpen = false, }) {
-    const [open, setOpen] = useState(defaultOpen);
+    const [open, setOpen] = useState(() => {
+        try {
+            const saved = localStorage.getItem(SIDEBAR_OPEN_KEY);
+            if (saved !== null)
+                return saved === "true";
+        }
+        catch { }
+        return defaultOpen;
+    });
+    const [width, setWidth] = useState(sidebarWidth);
     useEffect(() => {
-        const handler = () => {
-            setOpen((prev) => !prev);
+        try {
+            const saved = localStorage.getItem(SIDEBAR_STORAGE_KEY);
+            if (saved) {
+                const n = parseInt(saved, 10);
+                if (n >= SIDEBAR_MIN && n <= SIDEBAR_MAX)
+                    setWidth(n);
+            }
+        }
+        catch { }
+    }, []);
+    const setOpenPersisted = useCallback((next) => {
+        setOpen((prev) => {
+            const value = typeof next === "function" ? next(prev) : next;
+            try {
+                localStorage.setItem(SIDEBAR_OPEN_KEY, String(value));
+            }
+            catch { }
+            return value;
+        });
+    }, []);
+    useEffect(() => {
+        const toggleHandler = () => {
+            setOpenPersisted((prev) => !prev);
+        };
+        const openHandler = () => {
+            setOpenPersisted(true);
+        };
+        window.addEventListener("agent-panel:toggle", toggleHandler);
+        window.addEventListener("agent-panel:open", openHandler);
+        return () => {
+            window.removeEventListener("agent-panel:toggle", toggleHandler);
+            window.removeEventListener("agent-panel:open", openHandler);
+        };
+    }, [setOpenPersisted]);
+    // Cmd+I / Ctrl+I to focus the agent chat
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if ((e.metaKey || e.ctrlKey) && e.key === "i") {
+                e.preventDefault();
+                focusAgentChat();
+            }
         };
-        window.addEventListener("agent-panel:toggle", handler);
-        return () => window.removeEventListener("agent-panel:toggle", handler);
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, []);
+    const handleDrag = useCallback((delta) => {
+        setWidth((prev) => {
+            const next = Math.min(SIDEBAR_MAX, Math.max(SIDEBAR_MIN, prev + delta));
+            try {
+                localStorage.setItem(SIDEBAR_STORAGE_KEY, String(next));
+            }
+            catch { }
+            return next;
+        });
     }, []);
     const isLeft = position === "left";
-    const borderClass = isLeft ? "border-r" : "border-l";
-    const sidebar = open ? (_jsx("div", { className: `flex flex-col ${borderClass} border-border shrink-0 overflow-hidden agent-sidebar-panel`, style: { width: sidebarWidth }, children: _jsx(AgentPanel, { emptyStateText: emptyStateText, suggestions: suggestions }) })) : null;
-    return (_jsxs("div", { className: "flex flex-1 overflow-hidden", children: [isLeft && sidebar, _jsx("div", { className: "flex flex-1 flex-col overflow-hidden min-w-0", children: children }), !isLeft && sidebar] }));
+    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] }));
+}
+/**
+ * Focus the agent chat composer input.
+ * Opens the sidebar if closed, then focuses the text input.
+ */
+export function focusAgentChat() {
+    window.dispatchEvent(new Event("agent-panel:open"));
+    // Wait for sidebar to render, then focus the composer
+    requestAnimationFrame(() => {
+        const panel = document.querySelector(".agent-sidebar-panel");
+        if (!panel)
+            return;
+        const prosemirror = panel.querySelector(".ProseMirror");
+        if (prosemirror) {
+            prosemirror.focus();
+            return;
+        }
+        const textarea = panel.querySelector("textarea");
+        if (textarea)
+            textarea.focus();
+    });
 }
 /**
  * Button to toggle the agent sidebar. Place this in your app's header/toolbar.
  * Dispatches a custom event that AgentSidebar listens for.
  */
 export function AgentToggleButton({ className }) {
-    return (_jsx("button", { onClick: () => window.dispatchEvent(new Event("agent-panel:toggle")), className: cn("flex h-7 w-7 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", className), title: "Toggle agent", children: _jsx(ChatBubbleIcon, { className: "h-4 w-4" }) }));
+    return (_jsx("button", { onClick: () => window.dispatchEvent(new Event("agent-panel:toggle")), className: cn("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