@agent-native/core 0.6.1 → 0.7.2

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
@@ -22,12 +22,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *   <AgentPanel className="h-screen" />
  */
 import ReactDOM from "react-dom";
-import { useState, useEffect, useRef, useCallback, lazy, Suspense, startTransition, } from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
+import React, { useState, useEffect, useRef, useCallback, useMemo, lazy, Suspense, startTransition, } from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { IconMessage, IconTerminal2, IconSettings, IconLayoutSidebarRightCollapse, IconChevronDown, IconCheck, IconPlus, IconFolder, IconX, IconDotsVertical, IconHistory, IconPlugConnected, IconChevronLeft, IconCopy, IconExternalLink, } from "@tabler/icons-react";
+import { IconMessage, IconTerminal2, IconSettings, IconLayoutSidebarRightCollapse, IconLayoutGrid, IconCheck, IconPlus, IconX, IconDotsVertical, IconHistory, IconArrowsMaximize, IconArrowsMinimize, } from "@tabler/icons-react";
+import { FeedbackButton } from "./FeedbackButton.js";
 import { MultiTabAssistantChat, } from "./MultiTabAssistantChat.js";
 import { useDevMode } from "./use-dev-mode.js";
+import { useScreenRefreshKey } from "./use-db-sync.js";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useLocation, useNavigate } from "react-router";
 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 })));
@@ -35,9 +38,18 @@ const AgentTerminal = lazy(() => import("./terminal/index.js").then((m) => ({ de
 const ResourcesPanel = lazy(() => import("./resources/ResourcesPanel.js").then((m) => ({
     default: m.ResourcesPanel,
 })));
-// Lazy-load IntegrationsPanel to avoid bundling when not needed
-const IntegrationsPanel = lazy(() => import("./integrations/IntegrationsPanel.js").then((m) => ({
-    default: m.IntegrationsPanel,
+// 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 = "claude";
@@ -91,230 +103,24 @@ function useCliSelection(keyPrefix) {
 }
 // Detect dev mode at build time (Vite replaces this)
 const IS_DEV = import.meta.env?.DEV === true;
-function SettingsSelect({ label, value, options, onValueChange, }) {
-    const selected = options.find((option) => option.value === value);
-    return (_jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: "text-[12px] font-medium text-foreground", children: label }), _jsxs(SelectPrimitive.Root, { value: value, onValueChange: onValueChange, children: [_jsxs(SelectPrimitive.Trigger, { className: "flex h-9 w-full items-center justify-between rounded-md border border-border bg-background px-3 text-left text-[12px] text-foreground outline-none transition-colors hover:bg-accent/40 data-[placeholder]:text-muted-foreground", "aria-label": label, style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx(SelectPrimitive.Value, { children: selected?.label ?? value }), _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(IconChevronDown, { size: 14, className: "text-muted-foreground" }) })] }), _jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Content, { position: "popper", sideOffset: 6, className: "z-[9999] w-[var(--radix-select-trigger-width)] overflow-hidden rounded-lg border border-border bg-popover shadow-lg", children: _jsx(SelectPrimitive.Viewport, { className: "p-1", children: options.map((option) => (_jsxs(SelectPrimitive.Item, { value: option.value, className: "relative flex w-full cursor-pointer select-none items-start gap-2 rounded-md px-8 py-2.5 text-[12px] outline-none data-[highlighted]:bg-accent/60 data-[state=checked]:bg-accent/40", style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx("span", { className: "absolute left-2 top-2.5 flex h-4 w-4 items-center justify-center text-muted-foreground", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(IconCheck, { size: 14 }) }) }), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx(SelectPrimitive.ItemText, { children: _jsx("span", { className: "text-foreground", children: option.label }) }), option.description ? (_jsx("span", { className: "mt-0.5 text-[11px] leading-relaxed text-muted-foreground", children: option.description })) : null] })] }, option.value))) }) }) })] })] }));
-}
+// ─── 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, devAppUrl, showEnvToggle = true, }) {
-    const [open, setOpen] = useState(false);
-    const popoverRef = useRef(null);
-    const buttonRef = useRef(null);
-    // Close on outside click
-    useEffect(() => {
-        if (!open)
-            return;
-        function handleClick(e) {
-            const target = e.target;
-            // Ignore clicks inside the popover itself or its trigger button
-            if (popoverRef.current?.contains(target))
-                return;
-            if (buttonRef.current?.contains(target))
-                return;
-            // Ignore clicks inside portaled Radix Select content (rendered outside the popover DOM)
-            if (target.closest?.("[data-radix-popper-content-wrapper], [data-radix-select-viewport], [role='listbox']"))
-                return;
-            setOpen(false);
-        }
-        document.addEventListener("mousedown", handleClick);
-        return () => document.removeEventListener("mousedown", handleClick);
-    }, [open]);
-    // Close on Escape
-    useEffect(() => {
-        if (!open)
-            return;
-        function handleKey(e) {
-            if (e.key === "Escape")
-                setOpen(false);
-        }
-        document.addEventListener("keydown", handleKey);
-        return () => document.removeEventListener("keydown", handleKey);
-    }, [open]);
-    const environmentOptions = [
-        {
-            value: "production",
-            label: "Production",
-            description: "Restricted to app tools only.",
-        },
-        {
-            value: "development",
-            label: "Development",
-            description: "Full access to code editing, shell, and files.",
-        },
-    ];
-    // Compute fixed position from the button so the popover escapes all
-    // stacking contexts (the CLI terminal otherwise paints over it).
-    const [pos, setPos] = useState(null);
-    useEffect(() => {
-        if (!open || !buttonRef.current)
-            return;
-        const rect = buttonRef.current.getBoundingClientRect();
-        setPos({
-            top: rect.bottom + 6,
-            right: window.innerWidth - rect.right,
-        });
-    }, [open]);
-    return (_jsxs("div", { className: "relative", children: [_jsx("button", { ref: buttonRef, onClick: () => setOpen(!open), className: cn("flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50", open && "bg-accent/50 text-foreground"), title: "Agent settings", children: _jsx(IconSettings, { size: 14 }) }), open &&
-                pos &&
-                ReactDOM.createPortal(_jsx("div", { ref: popoverRef, className: "fixed z-[9990] w-72 rounded-lg border border-border bg-popover shadow-md animate-in fade-in-0 zoom-in-95 duration-100", style: { top: pos.top, right: pos.right }, children: _jsxs("div", { className: "space-y-3 p-3", children: [showEnvToggle && (_jsx(SettingsSelect, { label: "Environment", value: isDevMode ? "development" : "production", options: environmentOptions, onValueChange: (next) => {
-                                    const nextIsDev = next === "development";
-                                    if (nextIsDev !== isDevMode)
-                                        onToggle();
-                                } })), devAppUrl && (_jsxs("a", { href: devAppUrl, target: "_blank", rel: "noopener noreferrer", className: "flex items-center gap-1.5 text-[11px] text-muted-foreground hover:text-foreground mt-1", children: [_jsx(IconExternalLink, { size: 12 }), "Open app in new tab"] })), _jsx("div", { className: showEnvToggle || devAppUrl
-                                    ? "border-t border-border pt-3 mt-3"
-                                    : "", children: _jsx(Suspense, { fallback: null, children: _jsx(IntegrationsPanel, {}) }) }), _jsx("div", { className: "border-t border-border pt-3 mt-3", children: _jsx(AgentsSection, {}) })] }) }), document.body)] }));
-}
-function AgentDetail({ agent, onBack, onDelete, }) {
-    const [copied, setCopied] = useState(false);
-    const handleCopy = useCallback(async () => {
-        await navigator.clipboard.writeText(agent.url);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2000);
-    }, [agent.url]);
-    return (_jsxs("div", { children: [_jsxs("button", { onClick: onBack, className: "flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground mb-2", children: [_jsx(IconChevronLeft, { size: 12 }), "Back"] }), _jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(IconPlugConnected, { size: 16, className: "text-foreground shrink-0" }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-xs font-medium text-foreground truncate", children: agent.name }), agent.description && (_jsx("div", { className: "text-[10px] text-muted-foreground", children: agent.description }))] })] }), _jsxs("div", { className: "mb-3", children: [_jsx("div", { className: "text-[10px] font-medium text-muted-foreground mb-1", children: "A2A Endpoint" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("code", { className: "flex-1 truncate rounded bg-muted px-1.5 py-0.5 text-[10px] text-foreground", children: agent.url }), _jsx("button", { onClick: handleCopy, className: "shrink-0 rounded p-0.5 text-muted-foreground hover:text-foreground hover:bg-accent/50", title: "Copy URL", children: copied ? _jsx(IconCheck, { size: 12 }) : _jsx(IconCopy, { size: 12 }) })] })] }), _jsx("div", { className: "rounded-md border border-border bg-muted/30 px-2.5 py-2 text-[10px] text-muted-foreground mb-3", children: "@-mention this agent in chat to send it tasks via the A2A protocol. It will use its own tools and skills to respond." }), _jsx("button", { onClick: () => onDelete(agent.id), className: "w-full rounded-md border border-red-800/50 px-2 py-1.5 text-[11px] font-medium text-red-400 hover:bg-red-900/20", children: "Remove agent" })] }));
-}
-function AgentsSection() {
-    const [expanded, setExpanded] = useState(false);
-    const [showAdd, setShowAdd] = useState(false);
-    const [selectedAgent, setSelectedAgent] = useState(null);
-    const [name, setName] = useState("");
-    const [url, setUrl] = useState("");
-    const [description, setDescription] = useState("");
-    const nameRef = useRef(null);
-    // Fetch agents from resources
-    const [agents, setAgents] = useState([]);
-    const [loading, setLoading] = useState(true);
-    const fetchAgents = useCallback(async () => {
-        try {
-            const res = await fetch("/_agent-native/resources?scope=all");
-            if (!res.ok)
-                return;
-            const data = await res.json();
-            const agentResources = (data.resources ?? []).filter((r) => r.path.startsWith("agents/") && r.path.endsWith(".json"));
-            const parsed = await Promise.all(agentResources.map(async (r) => {
-                try {
-                    const detail = await fetch(`/_agent-native/resources/${r.id}`);
-                    if (!detail.ok)
-                        return null;
-                    const d = await detail.json();
-                    const config = JSON.parse(d.content);
-                    return {
-                        id: r.id,
-                        path: r.path,
-                        name: config.name,
-                        url: config.url,
-                        description: config.description,
-                    };
-                }
-                catch {
-                    return null;
-                }
-            }));
-            setAgents(parsed.filter(Boolean));
-        }
-        finally {
-            setLoading(false);
-        }
-    }, []);
-    useEffect(() => {
-        fetchAgents();
-    }, [fetchAgents]);
-    useEffect(() => {
-        if (showAdd) {
-            setName("");
-            setUrl("");
-            setDescription("");
-            const t = setTimeout(() => nameRef.current?.focus(), 50);
-            return () => clearTimeout(t);
-        }
-    }, [showAdd]);
-    const handleAdd = async () => {
-        const trimmedName = name.trim();
-        const trimmedUrl = url.trim();
-        if (!trimmedName || !trimmedUrl)
-            return;
-        const id = trimmedName.toLowerCase().replace(/[^a-z0-9-]/g, "-");
-        const agentJson = JSON.stringify({
-            id,
-            name: trimmedName,
-            description: description.trim() || undefined,
-            url: trimmedUrl,
-            color: "#6B7280",
-        }, null, 2);
-        try {
-            const res = await fetch("/_agent-native/resources", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({
-                    path: `agents/${id}.json`,
-                    content: agentJson,
-                    shared: true,
-                }),
-            });
-            if (res.ok) {
-                setShowAdd(false);
-                fetchAgents();
-            }
-        }
-        catch { }
-    };
-    const handleDelete = async (agentId) => {
-        try {
-            const res = await fetch(`/_agent-native/resources/${agentId}`, {
-                method: "DELETE",
-            });
-            if (res.ok) {
-                setSelectedAgent(null);
-                fetchAgents();
-            }
-        }
-        catch { }
-    };
-    if (selectedAgent) {
-        return (_jsx(AgentDetail, { agent: selectedAgent, onBack: () => setSelectedAgent(null), onDelete: handleDelete }));
-    }
-    return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs font-medium text-foreground", children: "Agents" }), _jsx("div", { className: "text-[10px] text-muted-foreground", children: loading
-                                    ? "Loading..."
-                                    : agents.length > 0
-                                        ? `${agents.length} connected via A2A`
-                                        : "Connect agents via A2A protocol" })] }), _jsx("button", { onClick: () => {
-                            if (expanded || showAdd) {
-                                setExpanded(false);
-                                setShowAdd(false);
-                            }
-                            else {
-                                setExpanded(true);
-                            }
-                        }, className: "flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", title: expanded ? "Collapse" : "Manage agents", children: expanded || showAdd ? _jsx(IconX, { size: 12 }) : _jsx(IconPlus, { size: 12 }) })] }), (expanded || showAdd) && (_jsxs(_Fragment, { children: [!showAdd && (_jsxs("div", { className: "flex flex-col gap-0.5 mb-1.5", children: [agents.map((agent) => (_jsxs("button", { onClick: () => setSelectedAgent(agent), className: "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left hover:bg-accent/30", children: [_jsx(IconPlugConnected, { size: 13, className: "shrink-0 text-muted-foreground" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-[11px] font-medium text-foreground truncate", children: agent.name }), _jsx("div", { className: "text-[10px] text-muted-foreground/60 truncate", children: agent.url })] })] }, agent.id))), _jsxs("button", { onClick: () => setShowAdd(true), className: "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[11px] text-muted-foreground hover:text-foreground hover:bg-accent/30", children: [_jsx(IconPlus, { size: 12, className: "shrink-0" }), "Add agent"] })] })), showAdd && (_jsxs("div", { className: "mb-1.5 flex flex-col gap-1.5 rounded-md border border-border bg-background p-2", children: [_jsx("input", { ref: nameRef, value: name, onChange: (e) => setName(e.target.value), onKeyDown: (e) => {
-                                    if (e.key === "Enter")
-                                        handleAdd();
-                                    if (e.key === "Escape")
-                                        setShowAdd(false);
-                                }, className: "w-full rounded border border-border bg-background px-2 py-1 text-[12px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent", placeholder: "Name" }), _jsx("input", { value: url, onChange: (e) => setUrl(e.target.value), onKeyDown: (e) => {
-                                    if (e.key === "Enter")
-                                        handleAdd();
-                                    if (e.key === "Escape")
-                                        setShowAdd(false);
-                                }, className: "w-full rounded border border-border bg-background px-2 py-1 text-[12px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent", placeholder: "URL (e.g. http://localhost:8085)" }), _jsx("input", { value: description, onChange: (e) => setDescription(e.target.value), onKeyDown: (e) => {
-                                    if (e.key === "Enter")
-                                        handleAdd();
-                                    if (e.key === "Escape")
-                                        setShowAdd(false);
-                                }, className: "w-full rounded border border-border bg-background px-2 py-1 text-[12px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent", placeholder: "Description (optional)" }), _jsxs("div", { className: "flex justify-end gap-1.5", children: [_jsx("button", { onClick: () => setShowAdd(false), className: "rounded px-2.5 py-1 text-[11px] font-medium text-muted-foreground hover:text-foreground", children: "Cancel" }), _jsx("button", { onClick: handleAdd, disabled: !name.trim() || !url.trim(), className: "rounded bg-accent px-2.5 py-1 text-[11px] font-medium text-foreground hover:bg-accent/80 disabled:opacity-40 disabled:pointer-events-none", children: "Add" })] })] }))] }))] }));
-}
 function useClientOnly() {
     const [mounted, setMounted] = useState(false);
     useEffect(() => setMounted(true), []);
     return mounted;
 }
-export function AgentPanel({ defaultMode = "chat", className, apiUrl, emptyStateText, suggestions, showHeader = true, onCollapse, devAppUrl, storageKey, }) {
+export function AgentPanel({ defaultMode = "chat", className, apiUrl, emptyStateText, suggestions, showHeader = true, onCollapse, isFullscreen, onToggleFullscreen, devAppUrl, storageKey, }) {
     const mounted = useClientOnly();
     const keyPrefix = storageKey ? `:${storageKey}` : "";
     const execModeKey = `${EXEC_MODE_KEY}${keyPrefix}`;
     const panelModeKey = `agent-native-panel-mode${keyPrefix}`;
+    const isMac = useMemo(() => typeof navigator !== "undefined" &&
+        /Mac|iPhone|iPad/.test(navigator.userAgent), []);
+    const closeTabHint = isMac ? "\u2303W" : "Alt+W";
+    const closeAllTabsHint = isMac ? "\u2303\u2325W" : "Ctrl+Alt+W";
     const [execMode, setExecMode] = useState(() => {
         try {
             const saved = localStorage.getItem(execModeKey);
@@ -337,7 +143,10 @@ export function AgentPanel({ defaultMode = "chat", className, apiUrl, emptyState
     const [mode, setMode] = useState(() => {
         try {
             const saved = localStorage.getItem(panelModeKey);
-            if (saved === "chat" || saved === "cli" || saved === "resources")
+            if (saved === "chat" ||
+                saved === "cli" ||
+                saved === "resources" ||
+                saved === "settings")
                 return saved;
         }
         catch { }
@@ -362,6 +171,14 @@ export function AgentPanel({ defaultMode = "chat", className, apiUrl, emptyState
         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");
@@ -396,6 +213,35 @@ export function AgentPanel({ defaultMode = "chat", className, apiUrl, emptyState
         setCliTabs([id]);
         setActiveCliTab(id);
     }, []);
+    // Tab close shortcuts. Avoid Cmd+W (browser/OS) and (on Windows) Ctrl+W.
+    //   Mac:           Ctrl+W → close tab,  Ctrl+Alt+W → close all
+    //   Windows/Linux: Alt+W  → close tab,  Ctrl+Alt+W → close all
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key.toLowerCase() !== "w" || e.metaKey || e.shiftKey)
+                return;
+            const isCloseAll = e.ctrlKey && e.altKey;
+            const isCloseOne = isMac
+                ? e.ctrlKey && !e.altKey
+                : e.altKey && !e.ctrlKey;
+            if (!isCloseAll && !isCloseOne)
+                return;
+            e.preventDefault();
+            if (mode === "chat") {
+                window.dispatchEvent(new CustomEvent(isCloseAll
+                    ? "agent-chat:close-all-tabs"
+                    : "agent-chat:close-current-tab"));
+            }
+            else if (mode === "cli") {
+                if (isCloseAll)
+                    closeAllCliTabs();
+                else if (activeCliTab)
+                    closeCliTab(activeCliTab);
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [mode, activeCliTab, closeCliTab, closeAllCliTabs, isMac]);
     const availableClis = useAvailableClis();
     const [selectedCli, selectCli] = useCliSelection(keyPrefix);
     const selectedLabel = availableClis.find((c) => c.command === selectedCli)?.label || selectedCli;
@@ -424,12 +270,14 @@ 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"] }), _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"] }), 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: "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: [_jsx(IconTooltip, { content: "Agent settings", children: _jsx("div", { children: _jsx(AgentSettingsPopover, { isDevMode: isDevMode, onToggle: () => setDevMode(!isDevMode), devAppUrl: devAppUrl, showEnvToggle: showDevToggle }) }) }), onCollapse && (_jsx(IconTooltip, { content: "Collapse sidebar", children: _jsx("button", { onClick: onCollapse, className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", children: _jsx(IconLayoutSidebarRightCollapse, { size: 14 }) }) }))] })), [isDevMode, onCollapse, setDevMode, showDevToggle, devAppUrl]);
+                    : "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: [isDevMode && (_jsx(Suspense, { fallback: null, children: _jsx(SetupButton, {}) })), _jsx(FeedbackButton, { variant: "icon", side: "bottom", align: "end" }), onToggleFullscreen && (_jsx(IconTooltip, { content: isFullscreen ? "Exit fullscreen" : "Fullscreen", children: _jsx("button", { onClick: onToggleFullscreen, className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", children: isFullscreen ? (_jsx(IconArrowsMinimize, { size: 14 })) : (_jsx(IconArrowsMaximize, { size: 14 })) }) })), 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, isDevMode, onToggleFullscreen, isFullscreen]);
     const [tabMenuOpen, setTabMenuOpen] = useState(null);
     const [cliPickerOpen, setCliPickerOpen] = useState(false);
     const cliPickerBtnRef = useRef(null);
@@ -505,13 +353,13 @@ export function AgentPanel({ defaultMode = "chat", className, apiUrl, emptyState
                                                                         "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: () => {
+                                                                                }, children: ["Close Tab", _jsx("kbd", { className: "text-[10px] text-muted-foreground", children: closeTabHint })] }), _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: () => {
+                                                                                }, children: "Close Other Tabs" }), _jsxs("button", { className: "flex w-full items-center justify-between 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 &&
+                                                                                }, children: ["Close All Tabs", _jsx("kbd", { className: "text-[10px] text-muted-foreground", children: closeAllTabsHint })] })] })] }))] })] })), 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)
@@ -533,13 +381,13 @@ export function AgentPanel({ defaultMode = "chat", className, apiUrl, emptyState
                                                                         "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: () => {
+                                                                                }, children: ["Close Tab", _jsx("kbd", { className: "text-[10px] text-muted-foreground", children: closeTabHint })] }), _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: () => {
+                                                                                }, children: "Close Other Tabs" }), _jsxs("button", { className: "flex w-full items-center justify-between 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
+                                                                                }, children: ["Close All Tabs", _jsx("kbd", { className: "text-[10px] text-muted-foreground", children: closeAllTabsHint })] })] })] }))] })] }))] })] }), 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"
@@ -572,20 +420,29 @@ export function AgentPanel({ defaultMode = "chat", className, apiUrl, emptyState
         selectedLabel,
         selectCli,
         cliPickerOpen,
+        closeTabHint,
+        closeAllTabsHint,
     ]);
-    return (_jsxs("div", { className: cn("agent-panel-root flex flex-1 flex-col min-h-0 h-full text-[13px] leading-[1.2] antialiased", className), style: AGENT_PANEL_ROOT_STYLE, children: [_jsx("style", { dangerouslySetInnerHTML: {
-                    __html: ".agent-tab-close{opacity:0}.agent-tab:hover .agent-tab-close{opacity:1}",
-                } }), _jsx("div", { className: cn("flex flex-col min-h-0", mode === "chat" ? "flex-1" : "shrink-0"), children: mounted && (_jsx(MultiTabAssistantChat, { apiUrl: apiUrl, showHeader: false, renderHeader: showHeader ? renderChatHeader : undefined, renderOverlay: undefined, contentHidden: mode !== "chat", emptyStateText: emptyStateText, suggestions: suggestions, onSwitchToCli: () => switchMode("cli"), execMode: execMode, onExecModeChange: switchExecMode, storageKey: storageKey })) }), isDevMode
+    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, "data-agent-fullscreen": isFullscreen ? "true" : undefined, children: [_jsx("style", { dangerouslySetInnerHTML: {
+                    __html: ".agent-tab-close{opacity:0}.agent-tab:hover .agent-tab-close{opacity:1}" +
+                        `[data-agent-fullscreen='true'] .agent-thread-content,` +
+                        `[data-agent-fullscreen='true'] .agent-composer-area{` +
+                        `max-width:${FULLSCREEN_CONTENT_MAX_PX}px;` +
+                        `margin-left:auto;margin-right:auto;width:100%;}`,
+                } }), mounted && isDevMode && (_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, 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 === "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";
 const SIDEBAR_OPEN_KEY = "agent-native-sidebar-open";
+const SIDEBAR_FULLSCREEN_KEY = "agent-native-sidebar-fullscreen";
 const SIDEBAR_MIN = 280;
 const SIDEBAR_MAX = 700;
+/** Max width of the centered chat column in fullscreen mode (Claude-style). */
+const FULLSCREEN_CONTENT_MAX_PX = 760;
 function ResizeHandle({ position, onDrag, }) {
     const ref = useRef(null);
     const dragging = useRef(false);
@@ -651,6 +508,160 @@ function ResizeHandle({ position, onDrag, }) {
     }, [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" } }));
 }
+/**
+ * Remounts its children whenever the framework's `refresh-screen` tool is
+ * invoked. Used inside AgentSidebar so the main content area re-fetches
+ * without disturbing the chat sidebar's in-flight state.
+ *
+ * Two mechanisms work together here:
+ *
+ *  1. Before the remount, every react-query cache entry is marked stale
+ *     via `invalidateQueries({ refetchType: "none" })`. This does NOT
+ *     trigger a refetch on its own, so active queries elsewhere (chat
+ *     sidebar, left nav) keep their current data — they'll refetch only
+ *     on their next natural trigger.
+ *  2. The React `key` then bumps, unmounting and remounting the subtree.
+ *     On remount, child components re-subscribe to their queries, see
+ *     the data is stale, and refetch — regardless of configured
+ *     `staleTime`. This is what makes the dashboard pick up the agent's
+ *     edits even when the query uses `staleTime: 30_000` or similar.
+ */
+/**
+ * Syncs the current URL (pathname + search + hash) to application_state
+ * under `__url__`, and processes one-shot URL-update commands the agent
+ * writes to `__set_url__`. Lives inside AgentSidebar so every framework
+ * template gets URL visibility + URL-write capability for its agent
+ * without per-template wiring.
+ *
+ * Two directions:
+ *   UI → state  — on route change, write `{ pathname, search, hash,
+ *                 searchParams }` to `__url__`. The production agent reads
+ *                 this and includes it in the auto-injected `<current-url>`
+ *                 block, so the agent always knows what page the user is
+ *                 on, including filter/search params like `?f_date=2026-01`.
+ *
+ *   state → UI  — the framework's `set-search-params` / `set-url-path`
+ *                 tools write a command to `__set_url__`. This hook reads
+ *                 the command, applies it via react-router, then deletes
+ *                 the key. The UI reacts in one tick, no page reload.
+ */
+function URLSync() {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const queryClient = useQueryClient();
+    // Outbound: write the current URL to app-state whenever it changes.
+    React.useEffect(() => {
+        const searchParams = {};
+        for (const [k, v] of new URLSearchParams(location.search).entries()) {
+            searchParams[k] = v;
+        }
+        const body = {
+            pathname: location.pathname,
+            search: location.search,
+            hash: location.hash,
+            searchParams,
+        };
+        fetch("/_agent-native/application-state/__url__", {
+            method: "PUT",
+            keepalive: true,
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(body),
+        }).catch(() => { });
+    }, [location.pathname, location.search, location.hash]);
+    // Inbound: poll for URL-update commands from the agent. We piggyback on
+    // the same 2-second cadence useDbSync uses so there's no extra timer.
+    const { data: command } = useQuery({
+        queryKey: ["__set_url__"],
+        queryFn: async () => {
+            try {
+                const res = await fetch("/_agent-native/application-state/__set_url__");
+                if (!res.ok || res.status === 204)
+                    return null;
+                const text = await res.text();
+                if (!text)
+                    return null;
+                const data = JSON.parse(text);
+                return data ? { ...data, _ts: Date.now() } : null;
+            }
+            catch {
+                return null;
+            }
+        },
+        refetchInterval: 2_000,
+        refetchIntervalInBackground: true,
+        structuralSharing: false,
+        retry: false,
+    });
+    React.useEffect(() => {
+        if (!command)
+            return;
+        // Delete the one-shot command before applying so duplicate events
+        // don't cause repeated navigation.
+        fetch("/_agent-native/application-state/__set_url__", {
+            method: "DELETE",
+        }).catch(() => { });
+        const cmd = command;
+        try {
+            const current = new URL(window.location.href);
+            const nextPath = cmd.pathname ?? current.pathname;
+            const nextSearch = cmd.mergeSearchParams !== false
+                ? new URLSearchParams(current.search)
+                : new URLSearchParams();
+            if (cmd.searchParams) {
+                for (const [k, v] of Object.entries(cmd.searchParams)) {
+                    if (v === null || v === "")
+                        nextSearch.delete(k);
+                    else
+                        nextSearch.set(k, v);
+                }
+            }
+            const nextHash = cmd.hash ?? current.hash;
+            const qs = nextSearch.toString();
+            const url = nextPath + (qs ? `?${qs}` : "") + (nextHash || "");
+            // Skip the navigation if the URL is already at the target state —
+            // avoids needless react-router work and any revalidation side-effects
+            // that come with it.
+            // Mark that the agent just wrote the URL so consumers (e.g. a
+            // dashboard restoring saved filter defaults) can skip any auto-
+            // restore that would clobber the agent's change. Set this BEFORE
+            // the same-URL short-circuit — a no-op nav is still an explicit
+            // "agent authored this state" signal that consumers depend on.
+            try {
+                sessionStorage.setItem("__agentUrlAppliedAt__", String(Date.now()));
+            }
+            catch {
+                // sessionStorage unavailable — not fatal.
+            }
+            const currentUrl = current.pathname + (current.search || "") + (current.hash || "");
+            if (url === currentUrl) {
+                queryClient.setQueryData(["__set_url__"], null);
+                return;
+            }
+            // Replace rather than push so repeated agent URL updates don't
+            // clutter the history stack and can't trigger extra remounts from
+            // router navigation lifecycle.
+            navigate(url, { replace: true });
+        }
+        catch {
+            // Malformed command — ignore.
+        }
+        queryClient.setQueryData(["__set_url__"], null);
+    }, [command, navigate, queryClient]);
+    return null;
+}
+function ScreenRefreshBoundary({ children }) {
+    const key = useScreenRefreshKey();
+    const queryClient = useQueryClient();
+    const lastKeyRef = React.useRef(key);
+    if (key !== lastKeyRef.current) {
+        lastKeyRef.current = key;
+        // Mark every cached query stale without kicking off a refetch. The
+        // subtree-level refetches happen naturally when the new tree mounts
+        // below and child components re-subscribe.
+        queryClient.invalidateQueries({ refetchType: "none" });
+    }
+    return _jsx(React.Fragment, { children: children }, key);
+}
 /**
  * Wraps app content with a toggleable agent sidebar.
  * Use AgentToggleButton in your header to open/close it.
@@ -673,6 +684,29 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
     });
     const [presentationMode, setPresentationMode] = useState(false);
     const [width, setWidth] = useState(sidebarWidth);
+    const [fullscreen, setFullscreen] = useState(() => {
+        // Force-disable on mobile: a Claude-style centered column makes no sense
+        // when the sidebar already covers most of the viewport.
+        if (typeof window !== "undefined" &&
+            window.matchMedia("(max-width: 767px)").matches) {
+            return false;
+        }
+        try {
+            return localStorage.getItem(SIDEBAR_FULLSCREEN_KEY) === "true";
+        }
+        catch {
+            return false;
+        }
+    });
+    // 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);
@@ -694,6 +728,16 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
             return value;
         });
     }, []);
+    const toggleFullscreen = useCallback(() => {
+        setFullscreen((prev) => {
+            const next = !prev;
+            try {
+                localStorage.setItem(SIDEBAR_FULLSCREEN_KEY, String(next));
+            }
+            catch { }
+            return next;
+        });
+    }, []);
     // 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.
@@ -794,17 +838,60 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
         });
     }, []);
     const isLeft = position === "left";
+    // Fullscreen only applies on desktop — on mobile the existing overlay is
+    // already viewport-covering, so the maximize button is hidden and the
+    // mounted state ignores any persisted value.
+    const effectiveFullscreen = fullscreen && !isMobile;
+    // 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, except
+    // in fullscreen mode where it overlays the entire viewport (Claude-style).
+    let panelStyle;
+    if (isMobile) {
+        panelStyle = {
+            ...AGENT_PANEL_ROOT_STYLE,
+            position: "fixed",
+            top: 0,
+            [isLeft ? "left" : "right"]: 0,
+            height: "100%",
+            width,
+            maxWidth: "85vw",
+            maxHeight: "100vh",
+            zIndex: 50,
+            background: "hsl(var(--background))",
+            borderLeft: isLeft ? "none" : "1px solid hsl(var(--border))",
+            borderRight: isLeft ? "1px solid hsl(var(--border))" : "none",
+            display: open ? "flex" : "none",
+        };
+    }
+    else if (effectiveFullscreen) {
+        panelStyle = {
+            ...AGENT_PANEL_ROOT_STYLE,
+            position: "fixed",
+            inset: 0,
+            width: "100%",
+            maxHeight: "100vh",
+            zIndex: 40,
+            background: "hsl(var(--background))",
+            display: open ? "flex" : "none",
+        };
+    }
+    else {
+        panelStyle = {
+            ...AGENT_PANEL_ROOT_STYLE,
+            width,
+            maxHeight: "100vh",
+            display: open ? "flex" : "none",
+        };
+    }
+    // Hide the resize handle when not draggable: mobile (overlay) or fullscreen
+    // (no width to drag — the panel covers the viewport).
+    const showResizeHandle = !isMobile && !effectiveFullscreen && open;
     // Always render the sidebar panel (even when closed) so MultiTabAssistantChat
     // stays mounted and can receive messages (e.g. from voice dictation) while
     // the sidebar is visually hidden. When the user opens the sidebar they'll see
     // any in-progress or completed conversations.
-    const sidebar = (_jsxs(_Fragment, { children: [isLeft ? null : open ? (_jsx(ResizeHandle, { position: position, onDrag: handleDrag })) : null, _jsx("div", { className: "agent-sidebar-panel flex shrink-0 flex-col overflow-hidden text-[13px] leading-[1.2] antialiased", style: {
-                    ...AGENT_PANEL_ROOT_STYLE,
-                    width,
-                    maxHeight: "100vh",
-                    display: open ? "flex" : "none",
-                }, children: _jsx(AgentPanel, { emptyStateText: emptyStateText, suggestions: suggestions, onCollapse: () => setOpenPersisted(false) }) }), isLeft ? (open ? (_jsx(ResizeHandle, { position: position, onDrag: handleDrag })) : null) : null] }));
-    return (_jsxs("div", { className: "flex min-w-0 flex-1 h-screen overflow-hidden", children: [isLeft && !presentationMode ? sidebar : null, _jsx("div", { className: "flex flex-1 flex-col overflow-auto min-w-0", children: children }), !isLeft && !presentationMode ? sidebar : null] }));
+    const sidebar = (_jsxs(_Fragment, { children: [showResizeHandle && !isLeft && (_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: panelStyle, children: _jsx(AgentPanel, { emptyStateText: emptyStateText, suggestions: suggestions, onCollapse: () => setOpenPersisted(false), isFullscreen: effectiveFullscreen, onToggleFullscreen: isMobile ? undefined : toggleFullscreen }) }), showResizeHandle && isLeft && (_jsx(ResizeHandle, { position: position, onDrag: handleDrag }))] }));
+    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) })), _jsx(URLSync, {}), isLeft && !presentationMode ? sidebar : null, _jsx("div", { className: "flex flex-1 flex-col overflow-auto min-w-0", children: _jsx(ScreenRefreshBoundary, { children: children }) }), !isLeft && !presentationMode ? sidebar : null] }));
 }
 /**
  * Focus the agent chat composer input.