@agent-native/core 0.4.5 → 0.6.1

package/dist/client/MultiTabAssistantChat.js

@@ -1,33 +1,299 @@
-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";
 import { useState, useRef, useEffect, useCallback } from "react";
+import { IconX, IconPlus, IconHistory, IconSearch } from "@tabler/icons-react";
 import { AssistantChat, } from "./AssistantChat.js";
-import { generateTabId } from "./agent-chat.js";
-import { getHarnessOrigin } from "./harness.js";
-// ─── Inline Icons ───────────────────────────────────────────────────────────
-function IconX({ size = 10 }) {
-    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12" }) }));
+import { getFrameOrigin } from "./frame.js";
+import { cn } from "./utils.js";
+import { useChatThreads } from "./use-chat-threads.js";
+// ─── Skeleton Loader ─────────────────────────────────────────────────────────
+function ChatSkeleton() {
+    return (_jsxs("div", { className: "flex flex-1 flex-col h-full min-h-0", children: [_jsxs("div", { className: "flex items-center h-8 px-2 border-b border-border shrink-0 gap-2", children: [_jsx("div", { className: "h-4 w-12 rounded bg-muted animate-pulse" }), _jsxs("div", { className: "ml-auto flex gap-1", children: [_jsx("div", { className: "h-5 w-5 rounded bg-muted animate-pulse" }), _jsx("div", { className: "h-5 w-5 rounded bg-muted animate-pulse" })] })] }), _jsxs("div", { className: "flex-1 flex flex-col gap-3 p-4", children: [_jsx("div", { className: "flex justify-center py-8", children: _jsx("div", { className: "h-10 w-10 rounded-full bg-muted animate-pulse" }) }), _jsx("div", { className: "h-3 w-32 rounded bg-muted animate-pulse mx-auto" })] })] }));
 }
-let labelCounter = 0;
-function createChatTab() {
-    return {
-        id: generateTabId(),
-        label: String(++labelCounter),
-        status: "idle",
+// ─── History Popover ─────────────────────────────────────────────────────────
+function HistoryPopover({ threads, openTabIds, onSelect, onClose, onSearch, }) {
+    const [search, setSearch] = useState("");
+    const [searchResults, setSearchResults] = useState(null);
+    const [isSearching, setIsSearching] = useState(false);
+    const inputRef = useRef(null);
+    const debounceRef = useRef();
+    useEffect(() => {
+        inputRef.current?.focus();
+    }, []);
+    useEffect(() => {
+        const handler = (e) => {
+            if (e.key === "Escape")
+                onClose();
+        };
+        window.addEventListener("keydown", handler);
+        return () => window.removeEventListener("keydown", handler);
+    }, [onClose]);
+    // Debounced server-side search
+    const searchIdRef = useRef(0);
+    useEffect(() => {
+        if (debounceRef.current)
+            clearTimeout(debounceRef.current);
+        const q = search.trim();
+        if (!q) {
+            searchIdRef.current++;
+            setSearchResults(null);
+            setIsSearching(false);
+            return;
+        }
+        setIsSearching(true);
+        const id = ++searchIdRef.current;
+        debounceRef.current = setTimeout(async () => {
+            if (onSearch) {
+                const results = await onSearch(q);
+                if (id !== searchIdRef.current)
+                    return;
+                setSearchResults(results);
+            }
+            else {
+                // Fallback to client-side filtering
+                setSearchResults(null);
+            }
+            setIsSearching(false);
+        }, 250);
+        return () => {
+            if (debounceRef.current)
+                clearTimeout(debounceRef.current);
+        };
+    }, [search, onSearch]);
+    // Only show threads not currently open as tabs
+    const closedThreads = threads.filter((t) => !openTabIds.has(t.id) && t.messageCount > 0);
+    const filtered = search.trim()
+        ? (searchResults ?? closedThreads).filter((t) => t.messageCount > 0)
+        : closedThreads;
+    const formatTime = (ts) => {
+        const d = new Date(ts);
+        const now = new Date();
+        const diffMs = now.getTime() - d.getTime();
+        const diffDays = Math.floor(diffMs / 86400000);
+        if (diffDays === 0)
+            return d.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+        if (diffDays === 1)
+            return "Yesterday";
+        if (diffDays < 7)
+            return d.toLocaleDateString([], { weekday: "short" });
+        return d.toLocaleDateString([], { month: "short", day: "numeric" });
     };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40", onClick: onClose }), _jsxs("div", { className: "absolute right-2 top-0 z-50 w-72 rounded-lg border border-border bg-popover shadow-lg", children: [_jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-border", children: [_jsx(IconSearch, { size: 13 }), _jsx("input", { ref: inputRef, type: "text", value: search, onChange: (e) => setSearch(e.target.value), placeholder: "Search past chats...", className: "flex-1 bg-transparent text-xs text-foreground placeholder:text-muted-foreground outline-none" })] }), _jsx("div", { className: "max-h-64 overflow-y-auto py-1", children: isSearching ? (_jsx("div", { className: "px-3 py-4 text-xs text-muted-foreground text-center", children: "Searching..." })) : filtered.length === 0 ? (_jsx("div", { className: "px-3 py-4 text-xs text-muted-foreground text-center", children: search ? "No matching chats" : "No past chats" })) : (filtered.map((thread) => (_jsxs("button", { onClick: () => {
+                                onSelect(thread.id);
+                                onClose();
+                            }, className: "w-full px-3 py-2 text-left hover:bg-accent/50", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [_jsx("span", { className: "text-xs font-medium text-foreground truncate", children: thread.title || thread.preview || "Chat" }), _jsx("span", { className: "text-[10px] text-muted-foreground shrink-0", children: formatTime(thread.updatedAt) })] }), thread.preview && thread.title !== thread.preview && (_jsx("div", { className: "text-[11px] text-muted-foreground truncate mt-0.5", children: thread.preview }))] }, thread.id)))) })] })] }));
+}
+// ─── Help Popover ────────────────────────────────────────────────────────────
+function HelpPopover({ onClose }) {
+    useEffect(() => {
+        const handler = (e) => {
+            if (e.key === "Escape")
+                onClose();
+        };
+        window.addEventListener("keydown", handler);
+        return () => window.removeEventListener("keydown", handler);
+    }, [onClose]);
+    const commands = [
+        {
+            name: "/clear",
+            description: "Start a new chat (keeps current chat in history)",
+        },
+        { name: "/new", description: "Same as /clear" },
+        { name: "/history", description: "Browse and search past chats" },
+        { name: "/help", description: "Show this list of commands" },
+        { name: "@", description: "Mention files, agents, or resources" },
+    ];
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40", onClick: onClose }), _jsxs("div", { className: "absolute right-2 top-0 z-50 w-72 rounded-lg border border-border bg-popover shadow-lg", children: [_jsxs("div", { className: "flex items-center justify-between px-3 py-2 border-b border-border", children: [_jsx("span", { className: "text-xs font-medium text-foreground", children: "Available Commands" }), _jsx("button", { onClick: onClose, className: "flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:text-foreground", children: _jsx(IconX, { size: 12 }) })] }), _jsx("div", { className: "py-1", children: commands.map((cmd) => (_jsxs("div", { className: "px-3 py-1.5", children: [_jsx("div", { className: "text-xs font-medium text-foreground", children: cmd.name }), _jsx("div", { className: "text-[11px] text-muted-foreground", children: cmd.description })] }, cmd.name))) })] })] }));
 }
-export function MultiTabAssistantChat(props) {
-    const [tabs, setTabs] = useState(() => [createChatTab()]);
-    const [activeTabId, setActiveTabId] = useState(() => tabs[0].id);
-    const activeTabIdRef = useRef(activeTabId);
-    activeTabIdRef.current = activeTabId;
+export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderOverlay, contentHidden = false, apiUrl = "/_agent-native/agent-chat", storageKey, ...props }) {
+    const { threads, activeThreadId, isLoading, createThread, switchThread, deleteThread, saveThreadData, generateTitle, searchThreads, refreshThreads, } = useChatThreads(apiUrl, storageKey);
+    // Namespace all localStorage keys by storageKey when provided (for per-app isolation in frame)
+    const keyPrefix = storageKey ? `:${storageKey}` : "";
+    // Track which tabs have been focused at least once (lazy mount for sub-agent tabs)
+    const mountedTabsRef = useRef(new Set());
+    const activeThreadIdRef = useRef(activeThreadId);
+    activeThreadIdRef.current = activeThreadId;
+    // Mark the active tab as mounted so it persists when switched away
+    if (activeThreadId)
+        mountedTabsRef.current.add(activeThreadId);
     const chatRefs = useRef(new Map());
     const pendingSends = useRef(new Map());
+    const [runningThreads, setRunningThreads] = useState(new Set());
+    const [showHistory, setShowHistory] = useState(false);
+    const newThreadIds = useRef(new Set());
+    // Parent-child thread mapping — persisted to localStorage.
+    // Maps childThreadId → parentThreadId for sub-agent tabs.
+    const PARENT_MAP_KEY = `agent-chat-parent-map${keyPrefix}`;
+    const [parentMap, setParentMap] = useState(() => {
+        try {
+            const saved = localStorage.getItem(PARENT_MAP_KEY);
+            if (saved)
+                return JSON.parse(saved);
+        }
+        catch { }
+        return {};
+    });
+    // Persist parent map to localStorage
+    useEffect(() => {
+        try {
+            localStorage.setItem(PARENT_MAP_KEY, JSON.stringify(parentMap));
+        }
+        catch { }
+    }, [parentMap, PARENT_MAP_KEY]);
+    // Sub-agent display names — persisted to localStorage.
+    // Maps childThreadId → short name (e.g. "Research", "Draft email").
+    const SUB_AGENT_NAMES_KEY = `agent-chat-sub-agent-names${keyPrefix}`;
+    const [subAgentNames, setSubAgentNames] = useState(() => {
+        try {
+            const saved = localStorage.getItem(SUB_AGENT_NAMES_KEY);
+            if (saved)
+                return JSON.parse(saved);
+        }
+        catch { }
+        return {};
+    });
+    useEffect(() => {
+        try {
+            localStorage.setItem(SUB_AGENT_NAMES_KEY, JSON.stringify(subAgentNames));
+        }
+        catch { }
+    }, [subAgentNames, SUB_AGENT_NAMES_KEY]);
+    // Open tabs — persisted to localStorage so they survive refresh.
+    const OPEN_TABS_KEY = `agent-chat-open-tabs${keyPrefix}`;
+    const [openTabIds, setOpenTabIds] = useState(() => {
+        try {
+            const saved = localStorage.getItem(OPEN_TABS_KEY);
+            if (saved) {
+                const parsed = JSON.parse(saved);
+                if (Array.isArray(parsed) && parsed.length > 0) {
+                    // Mark restored tabs as mounted
+                    for (const id of parsed)
+                        mountedTabsRef.current.add(id);
+                    return parsed;
+                }
+            }
+        }
+        catch { }
+        return [];
+    });
+    const initializedRef = useRef(false);
+    // Persist open tab IDs to localStorage (exclude sub-agent tabs — they're session-only)
+    useEffect(() => {
+        const mainTabs = openTabIds.filter((id) => !parentMap[id]);
+        if (mainTabs.length > 0) {
+            try {
+                localStorage.setItem(OPEN_TABS_KEY, JSON.stringify(mainTabs));
+            }
+            catch { }
+        }
+    }, [openTabIds, parentMap, OPEN_TABS_KEY]);
+    // Initialize open tabs once threads load — validate saved tabs still exist
+    useEffect(() => {
+        if (initializedRef.current || !activeThreadId || threads.length === 0)
+            return;
+        initializedRef.current = true;
+        const threadIds = new Set(threads.map((t) => t.id));
+        // If the active thread is a sub-agent, switch to its parent or the most recent main thread
+        if (parentMap[activeThreadId]) {
+            const parent = parentMap[activeThreadId];
+            if (parent && threadIds.has(parent)) {
+                switchThread(parent);
+            }
+            else {
+                // Fall back to most recent main thread
+                const mainThread = threads.find((t) => !parentMap[t.id]);
+                if (mainThread)
+                    switchThread(mainThread.id);
+            }
+        }
+        setOpenTabIds((prev) => {
+            // Filter out any saved tabs that no longer exist, and any sub-agent tabs
+            const valid = prev.filter((id) => threadIds.has(id) && !parentMap[id]);
+            // Ensure active thread is included (only if it's not a sub-agent)
+            if (!parentMap[activeThreadId] && !valid.includes(activeThreadId)) {
+                valid.push(activeThreadId);
+            }
+            return valid.length > 0 ? valid : [activeThreadId];
+        });
+    }, [activeThreadId, threads, parentMap, switchThread]);
+    // Ensure active thread is always in open tabs.
+    // Use functional update to check inside the setter — avoids race with the
+    // initialization effect that may have already added the ID in the same batch.
+    useEffect(() => {
+        if (activeThreadId) {
+            setOpenTabIds((prev) => prev.includes(activeThreadId) ? prev : [...prev, activeThreadId]);
+        }
+    }, [activeThreadId]);
+    // Ensure at least one tab is always open — auto-create if sidebar is empty
+    const autoCreatingRef = useRef(false);
+    useEffect(() => {
+        if (isLoading || autoCreatingRef.current)
+            return;
+        if (openTabIds.length === 0) {
+            autoCreatingRef.current = true;
+            createThread().then((id) => {
+                autoCreatingRef.current = false;
+                if (id) {
+                    newThreadIds.current.add(id);
+                    setOpenTabIds([id]);
+                }
+            });
+        }
+    }, [isLoading, openTabIds, createThread]);
+    // Focus the composer when switching tabs
+    useEffect(() => {
+        if (!activeThreadId)
+            return;
+        // Small delay to ensure the tab is visible before focusing
+        const t = setTimeout(() => {
+            chatRefs.current.get(activeThreadId)?.focusComposer();
+        }, 50);
+        return () => clearTimeout(t);
+    }, [activeThreadId]);
+    // Ref callback: scroll the active tab into view in the overflow container.
+    // Uses getBoundingClientRect for reliable positioning regardless of offsetParent.
+    const activeTabRefCb = useCallback((el) => {
+        if (!el)
+            return;
+        const container = el.parentElement;
+        if (!container)
+            return;
+        requestAnimationFrame(() => {
+            const containerRect = container.getBoundingClientRect();
+            const tabRect = el.getBoundingClientRect();
+            if (tabRect.left < containerRect.left) {
+                container.scrollLeft += tabRect.left - containerRect.left;
+            }
+            else if (tabRect.right > containerRect.right) {
+                container.scrollLeft += tabRect.right - containerRect.right;
+            }
+        });
+    }, []);
+    const [messageCounts, setMessageCounts] = useState(() => Object.fromEntries(threads.map((t) => [t.id, t.messageCount ?? 0])));
+    // Sync message counts from threads when they load
+    useEffect(() => {
+        if (threads.length > 0) {
+            setMessageCounts((prev) => {
+                const next = { ...prev };
+                for (const t of threads) {
+                    if (!(t.id in next)) {
+                        next[t.id] = t.messageCount ?? 0;
+                    }
+                }
+                return next;
+            });
+        }
+    }, [threads]);
     // Listen for builder.submitChat postMessages
     useEffect(() => {
+        const execModeKey = `agent-native-exec-mode${keyPrefix}`;
+        const PLAN_MODE_INSTRUCTION = `PLAN MODE ACTIVE: Before making any changes, you MUST:\n` +
+            `1. Explore the codebase to understand what's needed\n` +
+            `2. Write a plan to \`.builder/plans/YYYY-MM-DD-<topic>.md\`\n` +
+            `3. Present your approach clearly and wait for the user's explicit approval\n` +
+            `Do NOT edit any files, run any scripts, or make any changes until the user says to proceed.`;
         const handler = (event) => {
-            // Only accept messages from same origin or known harness
             if (event.origin !== window.location.origin &&
-                event.origin !== getHarnessOrigin()) {
+                event.origin !== getFrameOrigin()) {
                 return;
             }
             if (event.data?.type !== "builder.submitChat")
@@ -35,31 +301,45 @@ export function MultiTabAssistantChat(props) {
             const message = event.data.data?.message;
             if (!message)
                 return;
-            const currentTabId = activeTabIdRef.current;
+            const context = event.data.data?.context;
+            const isPlanMode = (() => {
+                try {
+                    return localStorage.getItem(execModeKey) === "plan";
+                }
+                catch {
+                    return false;
+                }
+            })();
+            const baseMessage = context
+                ? `${message}\n\n<context>\n${context}\n</context>`
+                : message;
+            const fullMessage = isPlanMode
+                ? `${PLAN_MODE_INSTRUCTION}\n\n${baseMessage}`
+                : baseMessage;
+            const currentTabId = activeThreadIdRef.current;
+            if (!currentTabId)
+                return;
             const activeRef = chatRefs.current.get(currentTabId);
             if (activeRef) {
-                // Always send to the current tab — it will queue if busy
-                activeRef.sendMessage(message);
+                activeRef.sendMessage(fullMessage);
             }
             else {
-                // Ref not yet mounted — queue it
-                pendingSends.current.set(currentTabId, message);
+                pendingSends.current.set(currentTabId, fullMessage);
             }
         };
         window.addEventListener("message", handler);
         return () => window.removeEventListener("message", handler);
-    }, []); // stable — uses refs instead of state
+    }, [keyPrefix]);
     // Process pending sends when refs mount
     useEffect(() => {
         for (const [tabId, message] of pendingSends.current) {
             const ref = chatRefs.current.get(tabId);
             if (ref) {
-                // Small delay to let the runtime initialise
                 setTimeout(() => ref.sendMessage(message), 50);
                 pendingSends.current.delete(tabId);
             }
         }
-    }, [tabs]);
+    }, [openTabIds]);
     // Listen for chatRunning completion events
     useEffect(() => {
         const handler = (e) => {
@@ -69,47 +349,338 @@ export function MultiTabAssistantChat(props) {
             const { isRunning, tabId } = detail;
             if (!tabId)
                 return;
-            setTabs((prev) => prev.map((t) => {
-                if (t.id !== tabId)
-                    return t;
-                if (isRunning === false)
-                    return { ...t, status: "completed" };
-                if (isRunning === true)
-                    return { ...t, status: "running" };
-                return t;
-            }));
+            setRunningThreads((prev) => {
+                const next = new Set(prev);
+                if (isRunning) {
+                    next.add(tabId);
+                }
+                else {
+                    next.delete(tabId);
+                }
+                return next;
+            });
         };
-        window.addEventListener("builder.fusion.chatRunning", handler);
-        return () => window.removeEventListener("builder.fusion.chatRunning", handler);
+        window.addEventListener("builder.chatRunning", handler);
+        return () => window.removeEventListener("builder.chatRunning", handler);
     }, []);
+    const addTab = useCallback(async () => {
+        const id = await createThread();
+        if (id) {
+            newThreadIds.current.add(id);
+        }
+    }, [createThread]);
     const closeTab = useCallback((tabId) => {
-        setTabs((prev) => {
-            if (prev.length <= 1)
-                return prev;
-            const idx = prev.findIndex((t) => t.id === tabId);
-            const next = prev.filter((t) => t.id !== tabId);
-            if (tabId === activeTabId) {
-                const newIdx = Math.min(idx, next.length - 1);
-                setActiveTabId(next[newIdx].id);
+        setOpenTabIds((prev) => {
+            if (prev.length <= 1) {
+                // Last tab — create a new one and replace the old tab atomically
+                createThread().then((newId) => {
+                    if (newId) {
+                        newThreadIds.current.add(newId);
+                        setOpenTabIds([newId]);
+                    }
+                });
+                return prev; // Keep old tab until new one is ready
+            }
+            const next = prev.filter((id) => id !== tabId);
+            if (tabId === activeThreadIdRef.current && next.length > 0) {
+                const idx = prev.indexOf(tabId);
+                switchThread(next[Math.min(idx, next.length - 1)]);
             }
             return next;
         });
         chatRefs.current.delete(tabId);
         pendingSends.current.delete(tabId);
-    }, [activeTabId]);
-    const showTabs = tabs.length > 1;
-    return (_jsxs("div", { className: "flex flex-1 flex-col h-full min-h-0", children: [showTabs && (_jsx("div", { className: "flex items-center gap-0.5 px-2 py-1 border-b border-border shrink-0", children: tabs.map((tab) => (_jsxs("button", { onClick: () => setActiveTabId(tab.id), className: `flex items-center gap-1 px-2.5 py-1 rounded text-[11px] font-medium transition-colors ${tab.id === activeTabId
-                        ? "bg-accent text-foreground"
-                        : "text-muted-foreground hover:text-foreground hover:bg-accent/50"}`, children: [_jsx("span", { children: tab.label }), tab.status === "completed" && (_jsx("span", { className: "w-2 h-2 rounded-full bg-blue-500 shrink-0" })), tabs.length > 1 && (_jsx("span", { role: "button", onClick: (e) => {
-                                e.stopPropagation();
-                                closeTab(tab.id);
-                            }, className: "text-muted-foreground/50 hover:text-muted-foreground ml-0.5", children: _jsx(IconX, { size: 10 }) }))] }, tab.id))) })), tabs.map((tab) => (_jsx("div", { className: "flex-1 min-h-0", style: { display: tab.id === activeTabId ? "flex" : "none" }, children: _jsx(AssistantChat, { ref: (handle) => {
-                        if (handle) {
-                            chatRefs.current.set(tab.id, handle);
+        newThreadIds.current.delete(tabId);
+        // Clean up parent map and sub-agent names
+        setParentMap((prev) => {
+            if (!(tabId in prev))
+                return prev;
+            const { [tabId]: _, ...rest } = prev;
+            return rest;
+        });
+        setSubAgentNames((prev) => {
+            if (!(tabId in prev))
+                return prev;
+            const { [tabId]: _, ...rest } = prev;
+            return rest;
+        });
+    }, [switchThread, createThread]);
+    const closeOtherTabs = useCallback((tabId) => {
+        setOpenTabIds([tabId]);
+        if (activeThreadIdRef.current !== tabId) {
+            switchThread(tabId);
+        }
+        // Clean up refs for closed tabs
+        for (const key of chatRefs.current.keys()) {
+            if (key !== tabId) {
+                chatRefs.current.delete(key);
+                pendingSends.current.delete(key);
+                newThreadIds.current.delete(key);
+            }
+        }
+        // Clean up parent map and sub-agent names — only keep entries for the surviving tab
+        setParentMap((prev) => {
+            if (tabId in prev)
+                return { [tabId]: prev[tabId] };
+            return {};
+        });
+        setSubAgentNames((prev) => {
+            if (tabId in prev)
+                return { [tabId]: prev[tabId] };
+            return {};
+        });
+    }, [switchThread]);
+    const closeAllTabs = useCallback(async () => {
+        const id = await createThread();
+        if (id) {
+            newThreadIds.current.add(id);
+            setOpenTabIds([id]);
+            switchThread(id);
+            // Clean up all old refs
+            chatRefs.current.clear();
+            pendingSends.current.clear();
+            setParentMap({});
+            setSubAgentNames({});
+        }
+    }, [createThread, switchThread]);
+    const clearActiveTab = useCallback(() => {
+        addTab();
+    }, [addTab]);
+    const openFromHistory = useCallback((threadId) => {
+        if (!openTabIds.includes(threadId)) {
+            setOpenTabIds((prev) => [...prev, threadId]);
+        }
+        switchThread(threadId);
+    }, [openTabIds, switchThread]);
+    // Listen for agent-task-open events (from AgentTaskCard "Open" button)
+    useEffect(() => {
+        function handleOpenTask(e) {
+            const detail = e.detail;
+            const threadId = detail?.threadId;
+            if (!threadId)
+                return;
+            // The current active thread is the parent that spawned this sub-agent
+            const parentId = activeThreadIdRef.current;
+            if (parentId && parentId !== threadId) {
+                setParentMap((prev) => prev[threadId] === parentId
+                    ? prev
+                    : { ...prev, [threadId]: parentId });
+            }
+            // Store the sub-agent name/description for the tab label
+            const name = detail.name || detail.description || "";
+            if (name) {
+                setSubAgentNames((prev) => prev[threadId] === name ? prev : { ...prev, [threadId]: name });
+            }
+            // Refresh thread list so the new sub-agent thread appears with its title
+            refreshThreads();
+            // Open the sub-agent thread as a tab — insert after parent for visual grouping
+            if (!openTabIds.includes(threadId)) {
+                setOpenTabIds((prev) => {
+                    if (parentId) {
+                        const parentIdx = prev.indexOf(parentId);
+                        if (parentIdx !== -1) {
+                            // Insert after the parent (and any existing children of that parent)
+                            const next = [...prev];
+                            let insertIdx = parentIdx + 1;
+                            // Skip past any existing children of the same parent
+                            while (insertIdx < next.length &&
+                                parentMap[next[insertIdx]] === parentId) {
+                                insertIdx++;
+                            }
+                            next.splice(insertIdx, 0, threadId);
+                            return next;
                         }
-                        else {
-                            chatRefs.current.delete(tab.id);
+                    }
+                    return [...prev, threadId];
+                });
+            }
+            switchThread(threadId);
+        }
+        window.addEventListener("agent-task-open", handleOpenTask);
+        return () => window.removeEventListener("agent-task-open", handleOpenTask);
+    }, [openTabIds, switchThread, refreshThreads, parentMap]);
+    // Watch for agent-issued chat-command in application-state
+    const lastChatCommandRef = useRef(0);
+    useEffect(() => {
+        let stopped = false;
+        let timer = null;
+        async function pollChatCommand() {
+            if (stopped)
+                return;
+            try {
+                const res = await fetch("/_agent-native/application-state/chat-command");
+                if (res.ok) {
+                    const data = await res.json();
+                    if (data?.value?.command === "open-thread" &&
+                        data.value.threadId &&
+                        data.value.timestamp > lastChatCommandRef.current) {
+                        lastChatCommandRef.current = data.value.timestamp;
+                        const threadId = data.value.threadId;
+                        // Open the thread as a tab and focus it
+                        if (!openTabIds.includes(threadId)) {
+                            setOpenTabIds((prev) => [...prev, threadId]);
                         }
-                    }, tabId: tab.id, ...props }) }, tab.id)))] }));
+                        switchThread(threadId);
+                        // Clear the command
+                        fetch("/_agent-native/application-state/chat-command", {
+                            method: "DELETE",
+                        }).catch(() => { });
+                    }
+                }
+            }
+            catch { }
+            if (!stopped) {
+                timer = setTimeout(pollChatCommand, 2000);
+            }
+        }
+        pollChatCommand();
+        return () => {
+            stopped = true;
+            if (timer)
+                clearTimeout(timer);
+        };
+    }, [openTabIds, switchThread]);
+    const handleGenerateTitle = useCallback((threadId, message) => {
+        generateTitle(threadId, message).then((title) => {
+            if (title) {
+                // Persist the generated title to the server
+                saveThreadData(threadId, {
+                    threadData: "",
+                    title,
+                    preview: message.slice(0, 120),
+                });
+            }
+        });
+    }, [generateTitle, saveThreadData]);
+    const handleSaveThread = useCallback((threadId, data) => {
+        saveThreadData(threadId, data);
+    }, [saveThreadData]);
+    // ─── Slash command handler ──────────────────────────────────────────
+    const [helpVisible, setHelpVisible] = useState(false);
+    const handleSlashCommand = useCallback((command) => {
+        switch (command) {
+            case "clear":
+            case "new":
+                addTab();
+                break;
+            case "history":
+                setShowHistory(true);
+                break;
+            case "help":
+                setHelpVisible(true);
+                break;
+        }
+    }, [addTab]);
+    // Build tabs from open thread IDs
+    const threadMap = new Map(threads.map((t) => [t.id, t]));
+    const tabs = openTabIds
+        .filter((id) => threadMap.has(id) || id === activeThreadId)
+        .map((id) => {
+        const t = threadMap.get(id);
+        return {
+            id,
+            label: t?.title || t?.preview?.slice(0, 30) || "New chat",
+            status: runningThreads.has(id)
+                ? "running"
+                : (messageCounts[id] ?? t?.messageCount ?? 0) > 0
+                    ? "completed"
+                    : "idle",
+            parentThreadId: parentMap[id],
+            subAgentName: subAgentNames[id],
+        };
+    });
+    // Include sub-agent tabs that aren't in threadMap yet (just created, not refreshed)
+    for (const id of openTabIds) {
+        if (!tabs.some((t) => t.id === id)) {
+            tabs.push({
+                id,
+                label: subAgentNames[id] || (parentMap[id] ? "Sub-agent..." : "New chat"),
+                status: "running",
+                parentThreadId: parentMap[id],
+                subAgentName: subAgentNames[id],
+            });
+        }
+    }
+    const headerProps = {
+        tabs,
+        activeTabId: activeThreadId ?? "",
+        activeTabMessageCount: activeThreadId
+            ? (messageCounts[activeThreadId] ?? 0)
+            : 0,
+        setActiveTabId: switchThread,
+        addTab,
+        closeTab,
+        closeOtherTabs,
+        closeAllTabs,
+        clearActiveTab,
+        showHistory,
+        toggleHistory: () => setShowHistory((v) => !v),
+        tabCount: openTabIds.length,
+    };
+    if (isLoading) {
+        return _jsx(ChatSkeleton, {});
+    }
+    return (_jsxs("div", { className: "flex flex-1 flex-col h-full min-h-0 overflow-x-hidden", children: [_jsx("style", { dangerouslySetInnerHTML: {
+                    __html: ".agent-tab-close{opacity:0}.agent-tab:hover .agent-tab-close{opacity:1}",
+                } }), renderHeader
+                ? renderHeader(headerProps)
+                : showTabBar
+                    ? (() => {
+                        const activeTab = tabs.find((t) => t.id === activeThreadId);
+                        const focusParentId = activeTab?.parentThreadId || activeThreadId;
+                        const childTabs = tabs.filter((t) => t.parentThreadId === focusParentId);
+                        const hasSubTabs = childTabs.length > 0;
+                        const mainTabs = tabs.filter((t) => !t.parentThreadId);
+                        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center px-1 py-1 border-b border-border shrink-0 gap-0.5", children: [_jsx("div", { className: "flex items-center gap-0.5 min-w-0 overflow-x-auto scrollbar-none flex-1", children: mainTabs.map((tab) => {
+                                                const isActive = tab.id === activeThreadId ||
+                                                    (tab.id === focusParentId &&
+                                                        activeTab?.parentThreadId === tab.id);
+                                                return (_jsxs("button", { ref: isActive ? activeTabRefCb : undefined, onClick: () => switchThread(tab.id), className: cn("agent-tab relative flex items-center gap-1 px-2.5 py-1.5 rounded-md text-[11px] font-medium shrink-0 max-w-[130px]", isActive
+                                                        ? "bg-accent text-foreground"
+                                                        : "text-muted-foreground hover:text-foreground hover:bg-accent"), children: [_jsx("span", { className: "truncate pr-1", children: tab.label }), tab.status === "running" && (_jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-muted-foreground/50 shrink-0 animate-pulse" })), _jsx("span", { role: "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: 8 }) })] }, tab.id));
+                                            }) }), _jsxs("div", { className: "flex items-center gap-px shrink-0 ml-auto", children: [_jsx("button", { onClick: addTab, className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground/60 hover:text-foreground hover:bg-accent/50", title: "New chat", children: _jsx(IconPlus, { size: 12 }) }), _jsx("button", { onClick: () => setShowHistory(!showHistory), className: cn("flex h-6 w-6 items-center justify-center rounded text-muted-foreground/60 hover:text-foreground hover:bg-accent/50", showHistory && "bg-accent text-foreground"), title: "Chat history", children: _jsx(IconHistory, { size: 12 }) })] })] }), hasSubTabs && (_jsx("div", { className: "flex items-center px-1 py-0.5 border-b border-border shrink-0 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("button", { onClick: () => switchThread(focusParentId), className: cn("flex shrink-0 items-center gap-1 rounded-md px-2 py-1 text-[10px] font-medium cursor-pointer", activeThreadId === focusParentId
+                                                    ? "bg-accent text-foreground"
+                                                    : "text-muted-foreground hover:bg-accent hover:text-foreground"), children: "Main" }), childTabs.map((tab) => (_jsxs("button", { ref: tab.id === activeThreadId
+                                                    ? activeTabRefCb
+                                                    : undefined, onClick: () => switchThread(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-[130px]", tab.id === activeThreadId
+                                                    ? "bg-accent text-foreground"
+                                                    : "text-muted-foreground hover:bg-accent hover:text-foreground"), children: [_jsx("span", { className: "truncate pr-1", children: tab.subAgentName || tab.label }), tab.status === "running" && (_jsx("span", { className: "w-1 h-1 rounded-full bg-muted-foreground/50 shrink-0 animate-pulse" })), _jsx("span", { role: "button", onClick: (e) => {
+                                                            e.stopPropagation();
+                                                            closeTab(tab.id);
+                                                        }, className: "agent-tab-close flex items-center justify-end text-muted-foreground hover:!text-foreground", style: {
+                                                            position: "absolute",
+                                                            right: 0,
+                                                            top: 0,
+                                                            bottom: 0,
+                                                            width: 24,
+                                                            paddingRight: 4,
+                                                            borderRadius: "0 6px 6px 0",
+                                                            background: "linear-gradient(to right, transparent, hsl(var(--accent)) 40%)",
+                                                        }, children: _jsx(IconX, { size: 8 }) })] }, tab.id)))] }) }))] }));
+                    })()
+                    : null, _jsxs("div", { className: "relative flex-1 flex flex-col min-h-0", children: [renderOverlay ? renderOverlay(headerProps) : null, showHistory && (_jsx(HistoryPopover, { threads: threads, openTabIds: new Set(openTabIds), onSelect: openFromHistory, onClose: () => setShowHistory(false), onSearch: searchThreads })), helpVisible && _jsx(HelpPopover, { onClose: () => setHelpVisible(false) }), [...new Set(openTabIds)]
+                        .filter((tabId) => tabId === activeThreadId || mountedTabsRef.current.has(tabId))
+                        .map((tabId) => (_jsx("div", { className: "flex-1 min-h-0", style: {
+                            display: contentHidden || tabId !== activeThreadId ? "none" : "flex",
+                        }, children: _jsx(AssistantChat, { ...props, ref: (handle) => {
+                                if (handle) {
+                                    chatRefs.current.set(tabId, handle);
+                                }
+                                else {
+                                    chatRefs.current.delete(tabId);
+                                }
+                            }, threadId: tabId, tabId: tabId, apiUrl: apiUrl, isNewThread: newThreadIds.current.has(tabId), onMessageCountChange: (count) => setMessageCounts((prev) => prev[tabId] === count ? prev : { ...prev, [tabId]: count }), onSaveThread: handleSaveThread, onGenerateTitle: handleGenerateTitle, onSlashCommand: handleSlashCommand }) }, tabId)))] })] }));
 }
 //# sourceMappingURL=MultiTabAssistantChat.js.map