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

package/dist/client/MultiTabAssistantChat.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useRef, useEffect, useCallback } from "react";
 import { IconX, IconPlus, IconHistory, IconSearch } from "@tabler/icons-react";
 import { AssistantChat, } from "./AssistantChat.js";
-import { getHarnessOrigin } from "./harness.js";
+import { getFrameOrigin } from "./frame.js";
 import { cn } from "./utils.js";
 import { useChatThreads } from "./use-chat-threads.js";
 // ─── Skeleton Loader ─────────────────────────────────────────────────────────
@@ -82,55 +82,139 @@ function HistoryPopover({ threads, openTabIds, onSelect, onClose, onSearch, }) {
                                 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)))) })] })] }));
 }
-export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderOverlay, contentHidden = false, apiUrl = "/_agent-native/agent-chat", ...props }) {
-    const { threads, activeThreadId, isLoading, createThread, switchThread, deleteThread, saveThreadData, generateTitle, searchThreads, } = useChatThreads(apiUrl);
+// ─── 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({ 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";
+    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)
+                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
+    // Persist open tab IDs to localStorage (exclude sub-agent tabs — they're session-only)
     useEffect(() => {
-        if (openTabIds.length > 0) {
+        const mainTabs = openTabIds.filter((id) => !parentMap[id]);
+        if (mainTabs.length > 0) {
             try {
-                localStorage.setItem(OPEN_TABS_KEY, JSON.stringify(openTabIds));
+                localStorage.setItem(OPEN_TABS_KEY, JSON.stringify(mainTabs));
             }
             catch { }
         }
-    }, [openTabIds]);
+    }, [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
-            const valid = prev.filter((id) => threadIds.has(id));
-            // Ensure active thread is included
-            if (!valid.includes(activeThreadId)) {
+            // 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]);
+    }, [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.
@@ -139,6 +223,22 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
             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)
@@ -150,6 +250,7 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
         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;
@@ -157,15 +258,13 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
         if (!container)
             return;
         requestAnimationFrame(() => {
-            const tabLeft = el.offsetLeft;
-            const tabRight = tabLeft + el.offsetWidth;
-            const scrollLeft = container.scrollLeft;
-            const viewWidth = container.clientWidth;
-            if (tabLeft < scrollLeft) {
-                container.scrollLeft = tabLeft;
+            const containerRect = container.getBoundingClientRect();
+            const tabRect = el.getBoundingClientRect();
+            if (tabRect.left < containerRect.left) {
+                container.scrollLeft += tabRect.left - containerRect.left;
             }
-            else if (tabRight > scrollLeft + viewWidth) {
-                container.scrollLeft = tabRight - viewWidth;
+            else if (tabRect.right > containerRect.right) {
+                container.scrollLeft += tabRect.right - containerRect.right;
             }
         });
     }, []);
@@ -186,7 +285,7 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
     }, [threads]);
     // Listen for builder.submitChat postMessages
     useEffect(() => {
-        const EXEC_MODE_KEY = "agent-native-exec-mode";
+        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` +
@@ -194,7 +293,7 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
             `Do NOT edit any files, run any scripts, or make any changes until the user says to proceed.`;
         const handler = (event) => {
             if (event.origin !== window.location.origin &&
-                event.origin !== getHarnessOrigin()) {
+                event.origin !== getFrameOrigin()) {
                 return;
             }
             if (event.data?.type !== "builder.submitChat")
@@ -205,7 +304,7 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
             const context = event.data.data?.context;
             const isPlanMode = (() => {
                 try {
-                    return localStorage.getItem(EXEC_MODE_KEY) === "plan";
+                    return localStorage.getItem(execModeKey) === "plan";
                 }
                 catch {
                     return false;
@@ -230,7 +329,7 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
         };
         window.addEventListener("message", handler);
         return () => window.removeEventListener("message", handler);
-    }, []);
+    }, [keyPrefix]);
     // Process pending sends when refs mount
     useEffect(() => {
         for (const [tabId, message] of pendingSends.current) {
@@ -268,13 +367,20 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
         const id = await createThread();
         if (id) {
             newThreadIds.current.add(id);
-            setOpenTabIds((prev) => [...prev, id]);
         }
     }, [createThread]);
     const closeTab = useCallback((tabId) => {
         setOpenTabIds((prev) => {
-            if (prev.length <= 1)
-                return 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);
@@ -285,7 +391,20 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
         chatRefs.current.delete(tabId);
         pendingSends.current.delete(tabId);
         newThreadIds.current.delete(tabId);
-    }, [switchThread]);
+        // 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) {
@@ -299,6 +418,17 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
                 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();
@@ -309,6 +439,8 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
             // Clean up all old refs
             chatRefs.current.clear();
             pendingSends.current.clear();
+            setParentMap({});
+            setSubAgentNames({});
         }
     }, [createThread, switchThread]);
     const clearActiveTab = useCallback(() => {
@@ -320,25 +452,125 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
         }
         switchThread(threadId);
     }, [openTabIds, switchThread]);
-    const handleGenerateTitle = useCallback((message) => {
-        if (activeThreadId) {
-            generateTitle(activeThreadId, message).then((title) => {
-                if (title && activeThreadId) {
-                    // Persist the generated title to the server
-                    saveThreadData(activeThreadId, {
-                        threadData: "",
-                        title,
-                        preview: message.slice(0, 120),
-                    });
+    // 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;
+                        }
+                    }
+                    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]);
+                        }
+                        switchThread(threadId);
+                        // Clear the command
+                        fetch("/_agent-native/application-state/chat-command", {
+                            method: "DELETE",
+                        }).catch(() => { });
+                    }
                 }
-            });
+            }
+            catch { }
+            if (!stopped) {
+                timer = setTimeout(pollChatCommand, 2000);
+            }
         }
-    }, [activeThreadId, generateTitle, saveThreadData]);
-    const handleSaveThread = useCallback((data) => {
-        if (activeThreadId) {
-            saveThreadData(activeThreadId, data);
+        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;
         }
-    }, [activeThreadId, saveThreadData]);
+    }, [addTab]);
     // Build tabs from open thread IDs
     const threadMap = new Map(threads.map((t) => [t.id, t]));
     const tabs = openTabIds
@@ -347,14 +579,28 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
         const t = threadMap.get(id);
         return {
             id,
-            label: t?.title || t?.preview?.slice(0, 20) || "New chat",
+            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 ?? "",
@@ -376,21 +622,57 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
     }
     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 ? (_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: tabs.map((tab) => (_jsxs("button", { ref: tab.id === activeThreadId ? 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]", tab.id === activeThreadId
-                                ? "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" })), openTabIds.length > 1 && (_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 }) })] })] })) : 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 })), [...new Set(openTabIds)].map((tabId) => (_jsx("div", { className: "flex-1 min-h-0", style: {
+                } }), 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) {
@@ -399,6 +681,6 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
                                 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: tabId === activeThreadId ? handleSaveThread : undefined, onGenerateTitle: tabId === activeThreadId ? handleGenerateTitle : undefined }) }, 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