@agent-native/toolkit 0.23.1 → 0.198.1

package/dist/app/chat/MultiTabAssistantChat.js

@@ -0,0 +1,2237 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DEFAULT_MODEL, AGENT_CHAT_CLEAR_CONTEXT_MESSAGE_TYPE, AGENT_CHAT_REMOVE_CONTEXT_MESSAGE_TYPE, AGENT_CHAT_SET_CONTEXT_MESSAGE_TYPE, appendAgentChatContextToMessage, claimAgentChatOpenRequest, claimAgentChatSubmit, drainBufferedAgentChatOpenRequests, drainBufferedAgentChatSubmits, filterAgentChatContextItems, getAgentChatContextState, isAgentChatSubmitCancelled, normalizeAgentChatContextItem, parseSubmitChatMessage, removeAgentChatContextItem, reportAgentChatSubmitResult, reportAgentChatSubmitTarget, setAgentChatContextItem, } from "@agent-native/core/client/agent-chat";
+import { CHAT_MODEL_SELECTION_CHANGED_EVENT, chatModelSelectionStorageKey, loadChatModelCatalog, } from "@agent-native/core/client/agent-chat";
+import { useChatThreads, } from "@agent-native/core/client/agent-chat";
+import { agentNativePath, appPath } from "@agent-native/core/client/api-path";
+import { getBrowserTabId } from "@agent-native/core/client/hooks";
+import { useChangeVersion } from "@agent-native/core/client/hooks";
+import { usePollLoop } from "@agent-native/core/client/hooks";
+import { isTrustedFrameMessage } from "@agent-native/core/client/host";
+import { DEFAULT_LOCALE, useOptionalLocale, useT, } from "@agent-native/core/client/i18n";
+import { DEFAULT_REASONING_EFFORT, isReasoningEffort, resolveReasoningEffortSelection, } from "@agent-native/core/shared";
+import { isClaudeCodeAgentId, isLunaModel, resolvePreferredAgentModel, } from "@agent-native/toolkit/composer/model-selection";
+import { Popover, PopoverAnchor, PopoverContent, } from "@agent-native/toolkit/ui/popover";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@agent-native/toolkit/ui/tooltip";
+import { cn } from "@agent-native/toolkit/utils";
+import { IconPlus, IconHistory, IconX } from "@tabler/icons-react";
+import { useState, useRef, useEffect, useLayoutEffect, useCallback, } from "react";
+import { AgentKitAssistantChat } from "./AgentKitAssistantChat.js";
+import { ChatHistoryList, } from "./chat/ChatHistoryList.js";
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+/** The single path that hands a queued send to a mounted chat ref. */
+function deliverPendingSend(ref, send) {
+    if (isAgentChatSubmitCancelled(send.submitMessageId))
+        return;
+    if (!send.submit) {
+        ref.prefillMessage(send.message);
+        return;
+    }
+    // Every field is decided once, here; a separate "has options" condition
+    // listing them again is how a new field ends up silently dropped.
+    const options = {
+        ...(send.trackInRunsTray ? { trackInRunsTray: true } : {}),
+        ...(send.requestMode ? { requestMode: send.requestMode } : {}),
+        ...(send.attachments ? { attachments: send.attachments } : {}),
+        ...(send.submitMessageId ? { submitMessageId: send.submitMessageId } : {}),
+        ...(send.usageLabel ? { usageLabel: send.usageLabel } : {}),
+        ...(send.actionScope ? { actionScope: send.actionScope } : {}),
+        // An approval resume is a protocol continuation, not a visible prompt.
+        ...(send.approvedToolCalls
+            ? { approvedToolCalls: send.approvedToolCalls, hideUserMessage: true }
+            : {}),
+    };
+    const submission = Object.keys(options).length > 0
+        ? ref.sendMessage(send.message, send.images, options)
+        : ref.sendMessage(send.message, send.images);
+    void submission.then((result) => {
+        if (result.status === "rejected") {
+            reportAgentChatSubmitResult(send.submitMessageId, false, result.reason);
+        }
+    }, () => reportAgentChatSubmitResult(send.submitMessageId, false, "submission-failed"));
+}
+function readStoredModelSelection(key) {
+    if (typeof window === "undefined")
+        return undefined;
+    try {
+        const raw = window.localStorage.getItem(key);
+        if (!raw)
+            return undefined;
+        const parsed = JSON.parse(raw);
+        if (typeof parsed.model !== "string" || !parsed.model.trim()) {
+            return undefined;
+        }
+        const selection = {
+            model: parsed.model,
+            effort: resolveReasoningEffortSelection(parsed.model, isReasoningEffort(parsed.effort) ? parsed.effort : undefined),
+        };
+        if (typeof parsed.engine === "string")
+            selection.engine = parsed.engine;
+        return selection;
+    }
+    catch {
+        return undefined;
+    }
+}
+function writeStoredModelSelection(key, selection) {
+    if (typeof window === "undefined")
+        return;
+    try {
+        window.localStorage.setItem(key, JSON.stringify(selection));
+        queueMicrotask(() => {
+            window.dispatchEvent(new CustomEvent(CHAT_MODEL_SELECTION_CHANGED_EVENT, {
+                detail: { key },
+            }));
+        });
+    }
+    catch { }
+}
+function resolveModelSelection(selection, groups) {
+    if (!selection?.model) {
+        const group = groups.find((candidate) => candidate.configured);
+        const model = group?.models[0];
+        return group && model
+            ? {
+                model,
+                engine: group.engine,
+                effort: resolveReasoningEffortSelection(model, undefined),
+            }
+            : undefined;
+    }
+    // Engine precedence turns on whether the catalog OFFERS the supplied engine,
+    // not on whether that engine advertises this model:
+    //   offered      → honor it. A gateway's advertised list is its built-in
+    //                  catalog, not what the endpoint serves, and one model id
+    //                  sits under several groups (claude-sonnet-5 under both
+    //                  anthropic and builder) — so a model-only match would
+    //                  reroute the turn to a different provider and bill it there.
+    //   not offered  → heal to a group that serves the model. A selection left
+    //                  on `builder` after disconnecting it must still run on the
+    //                  user's own key; the same model through another configured
+    //                  provider is the point of bring-your-own-key.
+    // `builder` is in the catalog exactly when Builder is connected, so this is a
+    // real availability signal rather than a guess.
+    const suppliedEngine = selection.engine?.trim()
+        ? selection.engine
+        : undefined;
+    const suppliedEngineGroup = suppliedEngine
+        ? groups.find((group) => group.engine === suppliedEngine)
+        : undefined;
+    const matchingConfiguredGroup = groups.find((group) => group.configured && group.models.includes(selection.model));
+    const fallbackConfiguredGroup = groups.find((group) => group.configured);
+    const fallbackGroup = matchingConfiguredGroup ?? fallbackConfiguredGroup;
+    const engine = suppliedEngineGroup?.engine ?? fallbackGroup?.engine;
+    const model = suppliedEngineGroup
+        ? selection.model
+        : matchingConfiguredGroup?.models.includes(selection.model)
+            ? selection.model
+            : fallbackGroup?.models[0];
+    // A non-empty catalog is an availability boundary: do not keep routing a
+    // stale selection through a provider group hidden for missing credentials.
+    if (!engine || !model) {
+        if (groups.length > 0)
+            return undefined;
+        return {
+            model: selection.model,
+            ...(suppliedEngine ? { engine: suppliedEngine } : {}),
+            effort: resolveReasoningEffortSelection(selection.model, selection.effort),
+        };
+    }
+    const effort = resolveReasoningEffortSelection(model, selection.effort);
+    const resolved = { model, effort };
+    if (engine)
+        resolved.engine = engine;
+    return resolved;
+}
+// ─── Skeleton Loader ─────────────────────────────────────────────────────────
+function ChatSkeleton({ header, headerOnly = false, }) {
+    return (_jsxs("div", { className: cn("flex flex-col min-h-0", headerOnly ? "shrink-0" : "flex-1 h-full"), children: [header ?? (_jsxs("div", { className: "flex items-center px-1 py-1 border-b border-border shrink-0 gap-0.5", children: [_jsx("div", { className: "h-[22px] w-20 rounded-md bg-muted animate-pulse" }), _jsxs("div", { className: "ms-auto flex gap-0.5", children: [_jsx("div", { className: "h-[22px] w-[22px] rounded-md bg-muted animate-pulse" }), _jsx("div", { className: "h-[22px] w-[22px] rounded-md bg-muted animate-pulse" })] })] })), !headerOnly && (_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" })] }))] }));
+}
+// ─── Resource context ────────────────────────────────────────────────────────
+function formatScopeType(type) {
+    return type.replace(/[-_]+/g, " ");
+}
+function buildResourceContextItem(scope, contextNamespace) {
+    const type = formatScopeType(scope.type);
+    const label = scope.label?.trim();
+    const marker = `Resource context: ${scope.type}:${scope.id}`;
+    return {
+        key: scope.contextKey?.trim() || "agent-current-resource-context",
+        title: label || type.replace(/^./, (character) => character.toUpperCase()),
+        ...(contextNamespace ? { contextNamespace } : {}),
+        context: [
+            marker,
+            `The user is currently viewing this ${type}.`,
+            label ? `Resource name: ${label}` : "",
+            `Resource id: ${scope.id}`,
+            scope.context?.trim() || "",
+            typeof window !== "undefined"
+                ? `Current URL: ${window.location.pathname}${window.location.search}`
+                : "",
+        ]
+            .filter(Boolean)
+            .join("\n"),
+    };
+}
+// ─── History Popover ─────────────────────────────────────────────────────────
+function formatThreadTime(ts, locale, yesterdayLabel) {
+    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(locale, {
+            hour: "numeric",
+            minute: "2-digit",
+        });
+    if (diffDays === 1)
+        return yesterdayLabel;
+    if (diffDays < 7)
+        return d.toLocaleDateString(locale, { weekday: "short" });
+    return d.toLocaleDateString(locale, { month: "short", day: "numeric" });
+}
+function HistoryPopover({ threads, openTabIds, activeThreadId, hasMoreThreads = false, isLoadingMoreThreads = false, loadError, onSelect, onClose, onLoadMore, onSearch, onTogglePin, onRename, popoverAlign = "end", }) {
+    const t = useT();
+    const locale = useOptionalLocale()?.locale ?? DEFAULT_LOCALE;
+    const [search, setSearch] = useState("");
+    const [searchResults, setSearchResults] = useState(null);
+    const [isSearching, setIsSearching] = useState(false);
+    const inputRef = useRef(null);
+    const debounceRef = useRef(undefined);
+    useEffect(() => {
+        inputRef.current?.focus();
+    }, []);
+    // 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]);
+    // Hide empty threads from the history list — except the currently-active
+    // one. The active thread always belongs in the list so the user can see
+    // they're in it (the previous filter dropped a brand-new chat the user
+    // had just opened, making them think their chat had vanished).
+    const visibleThreads = threads.filter((t) => t.messageCount > 0 || t.id === activeThreadId);
+    const filtered = search.trim()
+        ? (searchResults ?? visibleThreads).filter((t) => t.messageCount > 0 || t.id === activeThreadId)
+        : visibleThreads;
+    // Pinned threads always float to the top of `threads` already (see
+    // `sortThreadSummaries` in use-chat-threads.ts and the matching server
+    // ORDER BY), but pulling them into their own labeled section — instead of
+    // just relying on sort order within "All chats" — makes the pin affordance
+    // visible at a glance, matching common chat-history UX.
+    const pinnedThreads = filtered.filter((t) => t.pinnedAt != null);
+    const unpinnedThreads = filtered.filter((t) => t.pinnedAt == null);
+    const toHistoryItem = (thread) => {
+        const isActive = thread.id === activeThreadId;
+        const hasTitle = Boolean(thread.title);
+        const title = thread.title || t("agentChat.history.untitledChat");
+        return {
+            id: thread.id,
+            title,
+            titleText: title,
+            subtitle: hasTitle && thread.preview && thread.title !== thread.preview
+                ? thread.preview
+                : undefined,
+            timestamp: isActive
+                ? t("agentChat.history.active")
+                : openTabIds.has(thread.id)
+                    ? t("agentChat.history.open")
+                    : formatThreadTime(thread.updatedAt, locale, t("agentChat.history.yesterday")),
+            pinned: thread.pinnedAt != null,
+        };
+    };
+    const historySections = [
+        ...(pinnedThreads.length > 0
+            ? [
+                {
+                    id: "pinned",
+                    label: t("agentChat.history.pinned"),
+                    items: pinnedThreads.map(toHistoryItem),
+                },
+            ]
+            : []),
+        { id: "all", items: unpinnedThreads.map(toHistoryItem) },
+    ];
+    return (_jsxs(Popover, { open: true, onOpenChange: (open) => !open && onClose(), children: [_jsx(PopoverAnchor, { asChild: true, children: _jsx("span", { "aria-hidden": true, className: `absolute top-0 h-px w-px ${popoverAlign === "start" ? "start-2" : "end-2"}` }) }), _jsx(PopoverContent, { align: popoverAlign, side: "bottom", sideOffset: 0, onOpenAutoFocus: (event) => {
+                    event.preventDefault();
+                    inputRef.current?.focus();
+                }, className: "w-72 rounded-lg p-0", children: _jsx(ChatHistoryList, { sections: historySections, activeId: activeThreadId, onSelect: (id) => {
+                        onSelect(id);
+                        onClose();
+                    }, onTogglePin: onTogglePin
+                        ? (id) => {
+                            const isPinned = threads.find((t) => t.id === id)?.pinnedAt != null;
+                            onTogglePin(id, !isPinned);
+                        }
+                        : undefined, onRename: onRename, searchValue: search, onSearchChange: setSearch, searchPlaceholder: t("agentChat.history.search"), searchInputRef: inputRef, loading: isSearching, loadingLabel: t("agentChat.history.searching"), error: loadError && !search.trim() ? loadError : undefined, emptyLabel: t("agentChat.history.empty"), emptySearchLabel: t("agentChat.history.noMatches"), footer: !search.trim() && hasMoreThreads ? (_jsx("button", { type: "button", onClick: () => onLoadMore?.(), disabled: isLoadingMoreThreads, className: "mx-1 mt-1 flex w-[calc(100%-0.5rem)] items-center justify-center rounded-md px-3 py-2 text-xs text-muted-foreground hover:bg-accent hover:text-foreground disabled:cursor-default disabled:opacity-60", children: isLoadingMoreThreads
+                            ? t("agentChat.common.loading")
+                            : t("agentChat.history.loadOlder") })) : undefined }) })] }));
+}
+// ─── Help Popover ────────────────────────────────────────────────────────────
+function HelpPopover({ onClose }) {
+    const t = useT();
+    useEffect(() => {
+        const handler = (e) => {
+            if (e.key === "Escape")
+                onClose();
+        };
+        window.addEventListener("keydown", handler);
+        return () => window.removeEventListener("keydown", handler);
+    }, [onClose]);
+    const commands = [
+        {
+            name: "/clear",
+            description: t("agentChat.commands.clear"),
+        },
+        { name: "/new", description: t("agentChat.commands.new") },
+        { name: "/history", description: t("agentChat.commands.history") },
+        { name: "/plan", description: t("agentChat.commands.plan") },
+        { name: "/act", description: t("agentChat.commands.act") },
+        { name: "/help", description: t("agentChat.commands.help") },
+        { name: "@", description: t("agentChat.commands.mention") },
+    ];
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40", onClick: onClose }), _jsxs("div", { className: "absolute end-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: t("agentChat.commands.available") }), _jsx("button", { onClick: onClose, "aria-label": t("agentChat.commands.closeHelp"), 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))) })] })] }));
+}
+function readString(value) {
+    return typeof value === "string" ? value.trim() : "";
+}
+function requestModeFromExecMode(value) {
+    if (value === "plan")
+        return "plan";
+    if (value === "build")
+        return "act";
+    return undefined;
+}
+function isActiveAgentTeamStatus(status) {
+    return (status === "queued" ||
+        status === "running" ||
+        status === "paused" ||
+        status === "needs-approval");
+}
+function chatTabStatusFromAgentTeamStatus(status) {
+    if (!status)
+        return undefined;
+    return isActiveAgentTeamStatus(status) ? "running" : "completed";
+}
+const STALE_THREAD_THRESHOLD_MS = 12 * 60 * 60 * 1000;
+const DEFAULT_AGENT_TEAM_POLL_MS = 3000;
+const DEFAULT_THREAD_URL_PARAM = "thread";
+const THREAD_URL_CHANGED_EVENT = "agent-chat:url-thread-changed";
+// A duplicated id in `openTabIds` makes two tab-bar entries share one
+// underlying thread: closing either one filters that id out of the array
+// entirely, so both disappear at once. De-duplicate at every boundary the
+// array crosses (localStorage read and write) so a corrupted persisted list
+// self-heals instead of reproducing the phantom tab on every reload.
+function dedupeIds(ids) {
+    const seen = new Set();
+    const result = [];
+    for (const id of ids) {
+        if (seen.has(id))
+            continue;
+        seen.add(id);
+        result.push(id);
+    }
+    return result;
+}
+// The history patch is installed once and shared via a ref count so that
+// multiple synced chats (or a remount) don't restore a stale `pushState`
+// reference and silently drop a wrapper installed by another instance.
+let historyPatchRefCount = 0;
+let restoreHistoryPatch = null;
+function installHistoryThreadUrlPatch() {
+    if (typeof window === "undefined")
+        return () => { };
+    historyPatchRefCount += 1;
+    if (historyPatchRefCount === 1) {
+        const originalPushState = window.history.pushState.bind(window.history);
+        const originalReplaceState = window.history.replaceState.bind(window.history);
+        const dispatchUrlChange = () => {
+            window.dispatchEvent(new Event(THREAD_URL_CHANGED_EVENT));
+        };
+        window.history.pushState = function pushState(...args) {
+            const result = originalPushState.apply(this, args);
+            dispatchUrlChange();
+            return result;
+        };
+        window.history.replaceState = function replaceState(...args) {
+            const result = originalReplaceState.apply(this, args);
+            dispatchUrlChange();
+            return result;
+        };
+        restoreHistoryPatch = () => {
+            window.history.pushState = originalPushState;
+            window.history.replaceState = originalReplaceState;
+        };
+    }
+    return () => {
+        historyPatchRefCount = Math.max(0, historyPatchRefCount - 1);
+        if (historyPatchRefCount === 0) {
+            restoreHistoryPatch?.();
+            restoreHistoryPatch = null;
+        }
+    };
+}
+function normalizeUrlThreadId(value) {
+    if (typeof value !== "string")
+        return null;
+    const trimmed = value.trim();
+    return trimmed || null;
+}
+function resolveThreadUrlSync(value) {
+    if (!value)
+        return { enabled: false, paramName: DEFAULT_THREAD_URL_PARAM };
+    if (value === true) {
+        return { enabled: true, paramName: DEFAULT_THREAD_URL_PARAM };
+    }
+    return {
+        enabled: true,
+        paramName: value.paramName?.trim() || DEFAULT_THREAD_URL_PARAM,
+        ...(Object.hasOwn(value, "routeThreadId")
+            ? { routeThreadId: normalizeUrlThreadId(value.routeThreadId) }
+            : {}),
+        ...(value.getPath ? { getPath: value.getPath } : {}),
+        ...(value.navigate ? { navigate: value.navigate } : {}),
+    };
+}
+function readUrlThreadId(paramName) {
+    if (typeof window === "undefined")
+        return null;
+    try {
+        const params = new URLSearchParams(window.location.search);
+        return normalizeUrlThreadId(params.get(paramName) ??
+            (paramName === DEFAULT_THREAD_URL_PARAM
+                ? params.get("threadId")
+                : null));
+    }
+    catch {
+        return null;
+    }
+}
+function runToAgentTeamTabInfo(run) {
+    if (run.sourceRecord?.type && run.sourceRecord.type !== "agent-team-task") {
+        return null;
+    }
+    const metadata = run.metadata ?? {};
+    const threadId = readString(run.sourceRecord?.threadId) || readString(metadata.threadId);
+    const parentThreadId = readString(run.sourceRecord?.parentThreadId) ||
+        readString(metadata.parentThreadId);
+    if (!threadId || !parentThreadId || threadId === parentThreadId)
+        return null;
+    const name = readString(run.sourceRecord?.name) ||
+        readString(metadata.name) ||
+        readString(run.title) ||
+        "Sub-agent";
+    return {
+        threadId,
+        parentThreadId,
+        name,
+        status: run.status ?? "unknown",
+    };
+}
+export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderOverlay, contentHidden = false, apiUrl = agentNativePath("/_agent-native/agent-chat"), storageKey, restoreActiveThread = true, browserTabId: browserTabIdProp, threadUrlSync = false, scope = null, isolateHistoryByScope = false, agentTeamPollMs = DEFAULT_AGENT_TEAM_POLL_MS, availableModels: hostAvailableModels, modelListLoading: hostModelListLoading, onModelChange: hostOnModelChange, ...props }) {
+    const translate = useT();
+    const browserTabId = browserTabIdProp ??
+        (typeof window === "undefined" ? undefined : getBrowserTabId());
+    const tabStoragePart = browserTabId ? `:tab:${browserTabId}` : "";
+    const localStorageNamespace = storageKey
+        ? `${storageKey}${tabStoragePart}`
+        : browserTabId
+            ? `tab:${browserTabId}`
+            : undefined;
+    const keyPrefix = localStorageNamespace ? `:${localStorageNamespace}` : "";
+    const legacyKeyPrefix = storageKey ? `:${storageKey}` : "";
+    const modelSelectionKey = chatModelSelectionStorageKey(storageKey);
+    const contextNamespace = scope
+        ? scope.contextKey?.trim() || `scope:${scope.type}:${scope.id}`
+        : undefined;
+    const lastResourceContextVersionRef = useRef(scope?.contextVersion);
+    const { enabled: threadUrlSyncEnabled, paramName: threadUrlParamName, routeThreadId, getPath: getThreadPath, navigate: navigateThreadUrl, } = resolveThreadUrlSync(threadUrlSync);
+    const threadRouteControlsActiveThread = threadUrlSyncEnabled &&
+        threadUrlSync !== true &&
+        typeof threadUrlSync === "object" &&
+        Object.hasOwn(threadUrlSync, "routeThreadId");
+    const [urlThreadId, setUrlThreadId] = useState(() => threadUrlSyncEnabled
+        ? threadRouteControlsActiveThread
+            ? (routeThreadId ?? readUrlThreadId(threadUrlParamName))
+            : readUrlThreadId(threadUrlParamName)
+        : null);
+    const [deepLinkedThreadId] = useState(() => threadUrlSyncEnabled ? null : readUrlThreadId(DEFAULT_THREAD_URL_PARAM));
+    const [activeDeepLinkedThreadId, setActiveDeepLinkedThreadId] = useState(deepLinkedThreadId);
+    const urlThreadIdRef = useRef(urlThreadId);
+    urlThreadIdRef.current = urlThreadId;
+    useEffect(() => {
+        if (!threadUrlSyncEnabled || threadRouteControlsActiveThread)
+            return;
+        const update = () => setUrlThreadId(readUrlThreadId(threadUrlParamName));
+        const uninstallHistoryPatch = installHistoryThreadUrlPatch();
+        update();
+        window.addEventListener("popstate", update);
+        window.addEventListener(THREAD_URL_CHANGED_EVENT, update);
+        return () => {
+            uninstallHistoryPatch();
+            window.removeEventListener("popstate", update);
+            window.removeEventListener(THREAD_URL_CHANGED_EVENT, update);
+        };
+    }, [
+        threadRouteControlsActiveThread,
+        threadUrlParamName,
+        threadUrlSyncEnabled,
+    ]);
+    useEffect(() => {
+        if (!threadUrlSyncEnabled || !threadRouteControlsActiveThread)
+            return;
+        setUrlThreadId(routeThreadId ?? readUrlThreadId(threadUrlParamName));
+    }, [
+        routeThreadId,
+        threadRouteControlsActiveThread,
+        threadUrlParamName,
+        threadUrlSyncEnabled,
+    ]);
+    useEffect(() => {
+        if (threadUrlSyncEnabled)
+            return;
+        const update = () => setActiveDeepLinkedThreadId(readUrlThreadId(DEFAULT_THREAD_URL_PARAM));
+        const uninstallHistoryPatch = installHistoryThreadUrlPatch();
+        update();
+        window.addEventListener("popstate", update);
+        window.addEventListener(THREAD_URL_CHANGED_EVENT, update);
+        return () => {
+            uninstallHistoryPatch();
+            window.removeEventListener("popstate", update);
+            window.removeEventListener(THREAD_URL_CHANGED_EVENT, update);
+        };
+    }, [threadUrlSyncEnabled]);
+    const writeThreadUrl = useCallback((threadId, options = {}) => {
+        if (!threadUrlSyncEnabled || typeof window === "undefined")
+            return;
+        try {
+            const normalizedThreadId = normalizeUrlThreadId(threadId);
+            let next;
+            if (getThreadPath) {
+                next = getThreadPath(normalizedThreadId);
+            }
+            else {
+                const url = new URL(window.location.href);
+                if (normalizedThreadId) {
+                    url.searchParams.set(threadUrlParamName, normalizedThreadId);
+                }
+                else {
+                    url.searchParams.delete(threadUrlParamName);
+                }
+                if (threadUrlParamName !== "threadId") {
+                    url.searchParams.delete("threadId");
+                }
+                next = `${url.pathname}${url.search}${url.hash}`;
+            }
+            const current = `${window.location.pathname}${window.location.search}${window.location.hash}`;
+            if (next === current) {
+                setUrlThreadId(normalizedThreadId);
+                return;
+            }
+            if (getThreadPath && navigateThreadUrl) {
+                navigateThreadUrl(next, { replace: options.replace === true });
+                setUrlThreadId(normalizedThreadId);
+                return;
+            }
+            const method = options.replace ? "replaceState" : "pushState";
+            // `getThreadPath` returns a router-local path (no app basename). When we
+            // fall back to the raw History API instead of a router navigate, resolve
+            // the basename so deep-link reloads work in mounted apps.
+            const historyTarget = getThreadPath ? appPath(next) : next;
+            window.history[method](window.history.state, "", historyTarget);
+            setUrlThreadId(normalizedThreadId);
+            window.dispatchEvent(new Event(THREAD_URL_CHANGED_EVENT));
+            const popstate = typeof PopStateEvent === "function"
+                ? new PopStateEvent("popstate", { state: window.history.state })
+                : new Event("popstate");
+            window.dispatchEvent(popstate);
+        }
+        catch { }
+    }, [
+        getThreadPath,
+        navigateThreadUrl,
+        threadUrlParamName,
+        threadUrlSyncEnabled,
+    ]);
+    const { threads, activeThreadId, isLoading, createThread, openThread, switchThread: switchThreadState, forkThread, saveThreadData, generateTitle, searchThreads, loadMoreThreads, refreshThreads, hasMoreThreads, isLoadingMoreThreads, threadsLoadError, restoredThreadIdOnListFailure, evictedThreadIds, isNewThread, pinThread, renameThread, } = useChatThreads(apiUrl, storageKey, scope, {
+        restoreActiveThread,
+        browserTabId,
+        routeThreadId: threadUrlSyncEnabled
+            ? urlThreadId
+            : (activeDeepLinkedThreadId ?? undefined),
+        isolateHistoryByScope,
+    });
+    const switchThread = useCallback((threadId, options = {}) => {
+        switchThreadState(threadId);
+        writeThreadUrl(threadId, options);
+    }, [switchThreadState, writeThreadUrl]);
+    // 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());
+    // Sends queued until their target thread is ready (see PendingDelivery).
+    const pendingDeliveries = useRef([]);
+    const pendingContextItems = useRef(new Map());
+    const [runningThreads, setRunningThreads] = useState(new Set());
+    const [showHistory, setShowHistory] = useState(false);
+    const [pageOverlayScrolled, setPageOverlayScrolled] = useState(false);
+    const newThreadIds = useRef(new Set());
+    const latestOpenThreadRequestRef = useRef(0);
+    useEffect(() => {
+        setPageOverlayScrolled(false);
+    }, [activeThreadId]);
+    const handlePageOverlayScroll = useCallback((event) => {
+        const target = event.target;
+        if (!renderOverlay ||
+            !(target instanceof HTMLElement) ||
+            !target.closest(".agent-chat-scroll")) {
+            return;
+        }
+        setPageOverlayScrolled(target.scrollTop > 1);
+    }, [renderOverlay]);
+    // ─── Model state ─────────────────────────────────────────────────────────
+    // A host that supplies its own catalog owns the whole picker: the server
+    // catalog must not be discovered or merged, or a host with no engine of its
+    // own silently gets this app's models instead.
+    const hostManagedModels = hostAvailableModels !== undefined;
+    const [discoveredModels, setDiscoveredModels] = useState([]);
+    const availableModels = hostAvailableModels ?? discoveredModels;
+    const [discoveredModelsLoading, setModelListLoading] = useState(true);
+    const modelListLoading = hostManagedModels
+        ? (hostModelListLoading ?? false)
+        : discoveredModelsLoading;
+    const [defaultModel, setDefaultModel] = useState(DEFAULT_MODEL);
+    const threadModelRef = useRef(new Map());
+    const [persistedModelSelection, setPersistedModelSelection] = useState(() => readStoredModelSelection(modelSelectionKey));
+    const [modelSelectionVersion, setModelSelectionVersion] = useState(0);
+    useEffect(() => {
+        setPersistedModelSelection(readStoredModelSelection(modelSelectionKey));
+    }, [modelSelectionKey]);
+    const bumpModelSelectionVersion = useCallback(() => {
+        setModelSelectionVersion((version) => version + 1);
+    }, []);
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const syncPersistedSelection = (event) => {
+            const detail = event
+                ?.detail;
+            if (detail?.key && detail.key !== modelSelectionKey)
+                return;
+            const next = readStoredModelSelection(modelSelectionKey);
+            if (!next)
+                return;
+            const activeThreadId = activeThreadIdRef.current;
+            if (activeThreadId) {
+                threadModelRef.current.set(activeThreadId, next);
+            }
+            setPersistedModelSelection(next);
+            bumpModelSelectionVersion();
+        };
+        const handleStorage = (event) => {
+            if (event.key === modelSelectionKey)
+                syncPersistedSelection();
+        };
+        window.addEventListener(CHAT_MODEL_SELECTION_CHANGED_EVENT, syncPersistedSelection);
+        window.addEventListener("storage", handleStorage);
+        return () => {
+            window.removeEventListener(CHAT_MODEL_SELECTION_CHANGED_EVENT, syncPersistedSelection);
+            window.removeEventListener("storage", handleStorage);
+        };
+    }, [bumpModelSelectionVersion, modelSelectionKey]);
+    const postMessageSubmissionsDisabled = props.composerDisabled === true;
+    const setContextInTab = useCallback((threadId, item, options) => {
+        if (filterAgentChatContextItems([item], contextNamespace).length === 0) {
+            return;
+        }
+        const ref = chatRefs.current.get(threadId);
+        if (ref) {
+            ref.setComposerContextItem(item, options);
+            return;
+        }
+        const existing = pendingContextItems.current.get(threadId) ?? [];
+        const index = existing.findIndex((current) => current.key === item.key);
+        const next = index === -1
+            ? [...existing, item]
+            : existing.map((current, currentIndex) => currentIndex === index ? item : current);
+        pendingContextItems.current.set(threadId, next);
+    }, [contextNamespace]);
+    const removeContextInTab = useCallback((threadId, key) => {
+        const ref = chatRefs.current.get(threadId);
+        if (ref) {
+            ref.removeComposerContextItem(key);
+            return;
+        }
+        const existing = pendingContextItems.current.get(threadId);
+        if (!existing)
+            return;
+        const next = existing.filter((item) => item.key !== key);
+        if (next.length === 0) {
+            pendingContextItems.current.delete(threadId);
+        }
+        else {
+            pendingContextItems.current.set(threadId, next);
+        }
+    }, []);
+    const clearContextInTab = useCallback((threadId) => {
+        const ref = chatRefs.current.get(threadId);
+        if (ref) {
+            ref.clearComposerContextItems();
+            return;
+        }
+        pendingContextItems.current.delete(threadId);
+    }, []);
+    const resolveThreadModelSelection = useCallback((threadId) => resolveModelSelection(threadModelRef.current.get(threadId) ?? persistedModelSelection, availableModels), [availableModels, persistedModelSelection, modelSelectionVersion]);
+    const persistModelSelection = useCallback((selection) => {
+        setPersistedModelSelection(selection);
+        writeStoredModelSelection(modelSelectionKey, selection);
+    }, [modelSelectionKey]);
+    const handleModelChange = useCallback((model, engine) => {
+        const threadId = activeThreadIdRef.current;
+        if (!threadId)
+            return;
+        const preferredAgentModel = isClaudeCodeAgentId(props.selectedAgent) && isLunaModel(model)
+            ? resolvePreferredAgentModel(props.selectedAgent, availableModels)
+            : undefined;
+        const nextModel = preferredAgentModel?.model ?? model;
+        const nextEngine = preferredAgentModel?.engine ?? engine;
+        const existing = threadModelRef.current.get(threadId);
+        const effort = resolveReasoningEffortSelection(nextModel, existing?.effort);
+        const selection = { model: nextModel, engine: nextEngine, effort };
+        threadModelRef.current.set(threadId, selection);
+        persistModelSelection(selection);
+        bumpModelSelectionVersion();
+    }, [
+        availableModels,
+        bumpModelSelectionVersion,
+        persistModelSelection,
+        props.selectedAgent,
+    ]);
+    // A host that owns the model list still needs the internal selection updated:
+    // `selectedModel`/`selectedEngine` render from it and submitted turns read it,
+    // so routing a pick only to the host snaps the picker back to the previous
+    // model and sends that one.
+    const handleModelChangeWithHost = useCallback((model, engine) => {
+        handleModelChange(model, engine);
+        hostOnModelChange?.(model, engine);
+    }, [handleModelChange, hostOnModelChange]);
+    const handleEffortChange = useCallback((effort) => {
+        const threadId = activeThreadIdRef.current;
+        if (!threadId)
+            return;
+        const existing = resolveThreadModelSelection(threadId);
+        const model = existing?.model ?? defaultModel;
+        const engine = existing?.engine ??
+            availableModels.find((group) => group.models.includes(model))?.engine ??
+            availableModels[0]?.engine;
+        const selection = { model, effort };
+        if (engine)
+            selection.engine = engine;
+        threadModelRef.current.set(threadId, selection);
+        persistModelSelection(selection);
+        bumpModelSelectionVersion();
+    }, [
+        availableModels,
+        bumpModelSelectionVersion,
+        defaultModel,
+        persistModelSelection,
+        resolveThreadModelSelection,
+    ]);
+    useEffect(() => {
+        const threadId = activeThreadIdRef.current;
+        const current = threadId
+            ? resolveThreadModelSelection(threadId)
+            : persistedModelSelection;
+        // Only correct a selection the agent cannot run. This effect re-runs on
+        // every selection change, so an unconditional rewrite pins the picker and
+        // each later user pick snaps straight back.
+        const preferredAgentModel = isClaudeCodeAgentId(props.selectedAgent) &&
+            isLunaModel(current?.model ?? "")
+            ? resolvePreferredAgentModel(props.selectedAgent, availableModels)
+            : undefined;
+        if (!preferredAgentModel)
+            return;
+        if (current?.model === preferredAgentModel.model &&
+            current.engine === preferredAgentModel.engine) {
+            return;
+        }
+        const selection = {
+            model: preferredAgentModel.model,
+            engine: preferredAgentModel.engine,
+            effort: resolveReasoningEffortSelection(preferredAgentModel.model, current?.effort),
+        };
+        if (threadId) {
+            threadModelRef.current.set(threadId, selection);
+            bumpModelSelectionVersion();
+        }
+        persistModelSelection(selection);
+    }, [
+        availableModels,
+        bumpModelSelectionVersion,
+        persistedModelSelection,
+        props.selectedAgent,
+        persistModelSelection,
+        resolveThreadModelSelection,
+    ]);
+    const refreshEngines = useCallback(() => {
+        if (hostManagedModels)
+            return;
+        setModelListLoading(true);
+        loadChatModelCatalog()
+            .then((catalog) => {
+            if (catalog.state !== "available") {
+                if (catalog.enginesUnavailable) {
+                    // Leaves `availableModels` empty for the session, so an override
+                    // with no engine of its own has nothing to resolve against.
+                    console.warn("[agent-chat] no engine list; model overrides cannot be catalog-resolved");
+                }
+                return;
+            }
+            setDiscoveredModels(catalog.groups);
+            setDefaultModel(catalog.defaultModel);
+            void catalog.loadLiveGroups().then((liveGroups) => {
+                if (liveGroups)
+                    setDiscoveredModels(liveGroups);
+            });
+        })
+            .catch(() => { })
+            .finally(() => setModelListLoading(false));
+    }, [hostManagedModels]);
+    useEffect(() => {
+        refreshEngines();
+        window.addEventListener("agent-engine:configured-changed", refreshEngines);
+        return () => window.removeEventListener("agent-engine:configured-changed", refreshEngines);
+    }, [refreshEngines]);
+    // Parent-child thread mapping — persisted to localStorage.
+    // Maps childThreadId → parentThreadId for sub-agent tabs.
+    const PARENT_MAP_KEY = `agent-chat-parent-map${keyPrefix}`;
+    const LEGACY_PARENT_MAP_KEY = `agent-chat-parent-map${legacyKeyPrefix}`;
+    const [parentMap, setParentMap] = useState(() => {
+        try {
+            const saved = localStorage.getItem(PARENT_MAP_KEY);
+            const legacySaved = saved === null && PARENT_MAP_KEY !== LEGACY_PARENT_MAP_KEY
+                ? localStorage.getItem(LEGACY_PARENT_MAP_KEY)
+                : null;
+            const raw = saved ?? legacySaved;
+            if (raw)
+                return JSON.parse(raw);
+        }
+        catch {
+            // coercion-ok: unavailable or malformed localStorage is absent metadata.
+        }
+        return {};
+    });
+    const parentMapRef = useRef(parentMap);
+    parentMapRef.current = parentMap;
+    const dismissedSubAgentTabsRef = useRef(new Set());
+    // Persist parent map to localStorage
+    useEffect(() => {
+        try {
+            localStorage.setItem(PARENT_MAP_KEY, JSON.stringify(parentMap));
+        }
+        catch { }
+    }, [parentMap, PARENT_MAP_KEY]);
+    // AgentKit message forks are distinct from Agent Team child tabs. Keep their
+    // lineage separate so fork navigation never changes sub-agent semantics.
+    const FORK_PARENT_MAP_KEY = `agent-chat-fork-parent-map${keyPrefix}`;
+    const [forkParentMap, setForkParentMap] = useState(() => {
+        try {
+            const raw = localStorage.getItem(FORK_PARENT_MAP_KEY);
+            if (!raw)
+                return {};
+            const parsed = JSON.parse(raw);
+            if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+                return {};
+            }
+            const next = {};
+            for (const [child, parent] of Object.entries(parsed)) {
+                if (child &&
+                    typeof parent === "string" &&
+                    parent &&
+                    child !== parent) {
+                    next[child] = parent;
+                }
+            }
+            return next;
+        }
+        catch (error) {
+            console.warn("Could not read stored AgentKit fork lineage.", error);
+            return {};
+        }
+    });
+    useEffect(() => {
+        try {
+            localStorage.setItem(FORK_PARENT_MAP_KEY, JSON.stringify(forkParentMap));
+        }
+        catch (error) {
+            console.warn("Could not persist AgentKit fork lineage.", error);
+        }
+    }, [forkParentMap, FORK_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 LEGACY_SUB_AGENT_NAMES_KEY = `agent-chat-sub-agent-names${legacyKeyPrefix}`;
+    const [subAgentNames, setSubAgentNames] = useState(() => {
+        try {
+            const saved = localStorage.getItem(SUB_AGENT_NAMES_KEY);
+            const legacySaved = saved === null && SUB_AGENT_NAMES_KEY !== LEGACY_SUB_AGENT_NAMES_KEY
+                ? localStorage.getItem(LEGACY_SUB_AGENT_NAMES_KEY)
+                : null;
+            const raw = saved ?? legacySaved;
+            if (raw)
+                return JSON.parse(raw);
+        }
+        catch { }
+        return {};
+    });
+    const subAgentNamesRef = useRef(subAgentNames);
+    subAgentNamesRef.current = subAgentNames;
+    const [subAgentStatuses, setSubAgentStatuses] = useState({});
+    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.
+    // Per-scope, for the same reason the active thread is: the tab list must
+    // follow the resource in view, so one resource's tabs never stay mounted
+    // (and rebroadcasting their run state) while another resource is open.
+    const scopeKeyPart = scope ? `:scope:${scope.type}:${scope.id}` : "";
+    const OPEN_TABS_KEY = `agent-chat-open-tabs${keyPrefix}${scopeKeyPart}`;
+    const LEGACY_OPEN_TABS_KEY = `agent-chat-open-tabs${legacyKeyPrefix}${scopeKeyPart}`;
+    const readStoredOpenTabs = useCallback(() => {
+        try {
+            const saved = localStorage.getItem(OPEN_TABS_KEY);
+            const legacySaved = saved === null && OPEN_TABS_KEY !== LEGACY_OPEN_TABS_KEY
+                ? localStorage.getItem(LEGACY_OPEN_TABS_KEY)
+                : null;
+            const raw = saved ?? legacySaved;
+            if (raw === null)
+                return undefined;
+            const parsed = JSON.parse(raw);
+            if (!Array.isArray(parsed))
+                return undefined;
+            const deduped = dedupeIds(parsed);
+            for (const id of deduped)
+                mountedTabsRef.current.add(id);
+            return deduped;
+        }
+        catch {
+            // coercion-ok: unavailable or malformed localStorage is an absent tab list.
+        }
+        return undefined;
+    }, [LEGACY_OPEN_TABS_KEY, OPEN_TABS_KEY]);
+    const [openTabIds, setOpenTabIdsRaw] = useState(() => {
+        if (!restoreActiveThread && activeThreadId) {
+            for (const id of [activeThreadId])
+                mountedTabsRef.current.add(id);
+            return [activeThreadId];
+        }
+        const restored = readStoredOpenTabs();
+        if (restored && restored.length > 0)
+            return restored;
+        return [];
+    });
+    // Every writer routes through here so a duplicate id can never reach state.
+    // A `.includes()` guard evaluated outside the updater cannot prevent one: a
+    // synchronous burst of writes (the mount-time replay of buffered open
+    // requests dispatches its whole backlog in one loop) has every handler read
+    // the same pre-render list, so each one appends. Two tab-bar entries then
+    // share a single thread id and `closeTab`'s filter removes both at once.
+    // Returning `prev` unchanged is load-bearing, not an optimization — callers
+    // rely on identity bail-outs to keep effects that depend on `openTabIds`
+    // from re-running forever.
+    const setOpenTabIds = useCallback((value) => {
+        setOpenTabIdsRaw((prev) => {
+            const next = dedupeIds(typeof value === "function" ? value(prev) : value);
+            return next.length === prev.length &&
+                next.every((id, i) => id === prev[i])
+                ? prev
+                : next;
+        });
+    }, []);
+    const openTabIdsRef = useRef(openTabIds);
+    openTabIdsRef.current = openTabIds;
+    const initializedRef = useRef(false);
+    // Rehydrate open tabs when the scope flips. Read the new key before the
+    // persistence effect can write the current (now-wrong) tab list under it.
+    const openTabsKeyRef = useRef(OPEN_TABS_KEY);
+    useEffect(() => {
+        if (openTabsKeyRef.current === OPEN_TABS_KEY)
+            return;
+        openTabsKeyRef.current = OPEN_TABS_KEY;
+        initializedRef.current = false;
+        if (!restoreActiveThread) {
+            setOpenTabIds(activeThreadId ? [activeThreadId] : []);
+            return;
+        }
+        const restored = readStoredOpenTabs();
+        if (restored) {
+            setOpenTabIds(restored);
+            return;
+        }
+        setOpenTabIds([]);
+    }, [OPEN_TABS_KEY, activeThreadId, readStoredOpenTabs, restoreActiveThread]);
+    useBrowserLayoutEffect(() => {
+        const nextScope = scope;
+        if (!nextScope)
+            return;
+        const item = buildResourceContextItem(nextScope, contextNamespace);
+        const marker = `Resource context: ${nextScope.type}:${nextScope.id}`;
+        const existing = getAgentChatContextState().items.find((current) => current.key === item.key);
+        const ownsContextItem = !existing || existing.context.startsWith("Resource context:");
+        if (ownsContextItem)
+            setAgentChatContextItem({ ...item, openSidebar: false, focus: false });
+        return () => {
+            const current = getAgentChatContextState().items.find((candidate) => candidate.key === item.key);
+            if (ownsContextItem && current?.context.startsWith(marker)) {
+                removeAgentChatContextItem(item.key);
+            }
+        };
+    }, [contextNamespace, scope?.contextKey, scope?.id, scope?.type]);
+    useBrowserLayoutEffect(() => {
+        const nextScope = scope;
+        if (!nextScope)
+            return;
+        const item = buildResourceContextItem(nextScope, contextNamespace);
+        const marker = `Resource context: ${nextScope.type}:${nextScope.id}`;
+        const targetChanged = nextScope.contextVersion !== undefined &&
+            lastResourceContextVersionRef.current !== nextScope.contextVersion;
+        if (nextScope.contextVersion !== undefined) {
+            lastResourceContextVersionRef.current = nextScope.contextVersion;
+        }
+        const existing = getAgentChatContextState().items.find((current) => current.key === item.key);
+        if (!existing) {
+            if (!targetChanged)
+                return;
+        }
+        else if (!existing.context.startsWith(marker)) {
+            return;
+        }
+        if (existing &&
+            existing.title === item.title &&
+            existing.context === item.context &&
+            existing.contextNamespace === item.contextNamespace) {
+            return;
+        }
+        setAgentChatContextItem({ ...item, openSidebar: false, focus: false });
+    }, [
+        contextNamespace,
+        scope?.contextKey,
+        scope?.contextVersion,
+        scope?.id,
+        scope?.label,
+        scope?.type,
+    ]);
+    // Persist open tab IDs to localStorage (exclude sub-agent tabs — they're session-only)
+    useEffect(() => {
+        if (openTabsKeyRef.current !== OPEN_TABS_KEY)
+            return;
+        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));
+        const threadMap = new Map(threads.map((t) => [t.id, t]));
+        // Hide tabs that have had no activity for more than 12 hours. Stale tabs
+        // are removed from the sidebar on load but remain accessible via history.
+        const now = Date.now();
+        const isStale = (id) => {
+            const thread = threadMap.get(id);
+            return thread
+                ? now - thread.updatedAt > STALE_THREAD_THRESHOLD_MS
+                : false;
+        };
+        // 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 tabs that no longer exist, sub-agent tabs, or stale tabs (>12h inactive)
+            const valid = prev.filter((id) => threadIds.has(id) && !parentMap[id] && !isStale(id));
+            // Ensure active thread is included (only if it's not a sub-agent and not stale)
+            if (!parentMap[activeThreadId] &&
+                !valid.includes(activeThreadId) &&
+                !isStale(activeThreadId)) {
+                valid.push(activeThreadId);
+            }
+            return valid;
+        });
+        // If active thread is stale, start fresh
+        if (!parentMap[activeThreadId] && isStale(activeThreadId)) {
+            void createThread().then((id) => {
+                if (id)
+                    writeThreadUrl(null);
+            });
+        }
+    }, [
+        activeThreadId,
+        threads,
+        parentMap,
+        switchThread,
+        createThread,
+        writeThreadUrl,
+    ]);
+    // 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.
+    //
+    // Re-check after tab-list resets so the sidebar cannot end up with a live
+    // active thread but no mounted chat.
+    useEffect(() => {
+        if (!activeThreadId || openTabIds.includes(activeThreadId))
+            return;
+        if (parentMap[activeThreadId])
+            return;
+        const activeThread = threads.find((thread) => thread.id === activeThreadId);
+        if (activeThread &&
+            Date.now() - activeThread.updatedAt > STALE_THREAD_THRESHOLD_MS) {
+            return;
+        }
+        setOpenTabIds((prev) => prev.includes(activeThreadId) ? prev : [...prev, activeThreadId]);
+    }, [activeThreadId, openTabIds, parentMap, threads]);
+    // Ensure at least one tab is always open — auto-create if sidebar is empty.
+    // Skipped when an active thread already exists (e.g. the hook generated an
+    // optimistic id for a brand-new session); the activeThreadId effect above
+    // adds it to openTabIds without spinning up a duplicate thread.
+    const autoCreatingRef = useRef(false);
+    const restoreFailureReplacementInFlightRef = useRef(null);
+    const lastTabReplacementInFlightRef = useRef(false);
+    useEffect(() => {
+        if (isLoading ||
+            !restoredThreadIdOnListFailure ||
+            activeThreadId !== restoredThreadIdOnListFailure ||
+            restoreFailureReplacementInFlightRef.current ===
+                restoredThreadIdOnListFailure) {
+            return;
+        }
+        restoreFailureReplacementInFlightRef.current =
+            restoredThreadIdOnListFailure;
+        void createThread().then((id) => {
+            if (!id) {
+                restoreFailureReplacementInFlightRef.current = null;
+                return;
+            }
+            newThreadIds.current.add(id);
+            setOpenTabIds([id]);
+            writeThreadUrl(null, { replace: true });
+        });
+    }, [
+        activeThreadId,
+        createThread,
+        isLoading,
+        restoredThreadIdOnListFailure,
+        writeThreadUrl,
+    ]);
+    useEffect(() => {
+        if (isLoading || autoCreatingRef.current)
+            return;
+        if (openTabIds.length === 0 && !activeThreadId) {
+            autoCreatingRef.current = true;
+            void createThread().then((id) => {
+                autoCreatingRef.current = false;
+                if (id) {
+                    newThreadIds.current.add(id);
+                    setOpenTabIds([id]);
+                    writeThreadUrl(null, { replace: true });
+                }
+            });
+        }
+    }, [isLoading, openTabIds, activeThreadId, createThread, writeThreadUrl]);
+    usePollLoop(async (signal) => {
+        const runsUrl = `${apiUrl.replace(/\/$/, "")}/runs/list?goalId=agent-team`;
+        try {
+            const res = await fetch(runsUrl, { signal });
+            if (res.ok) {
+                const data = (await res.json());
+                const infos = Array.isArray(data.runs)
+                    ? data.runs
+                        .map(runToAgentTeamTabInfo)
+                        .filter((info) => Boolean(info))
+                    : [];
+                setSubAgentStatuses((prev) => {
+                    let changed = false;
+                    const next = {};
+                    for (const info of infos) {
+                        next[info.threadId] = info.status;
+                        if (prev[info.threadId] !== info.status)
+                            changed = true;
+                    }
+                    if (Object.keys(prev).length !== Object.keys(next).length) {
+                        changed = true;
+                    }
+                    return changed ? next : prev;
+                });
+                const openSet = new Set(openTabIdsRef.current);
+                const candidates = infos.filter((info) => !dismissedSubAgentTabsRef.current.has(info.threadId) &&
+                    (openSet.has(info.parentThreadId) || openSet.has(info.threadId)));
+                if (candidates.length > 0) {
+                    const shouldRefreshThreads = candidates.some((info) => !openSet.has(info.threadId) && openSet.has(info.parentThreadId));
+                    const candidateParents = new Map(candidates.map((info) => [info.threadId, info.parentThreadId]));
+                    setParentMap((prev) => {
+                        let next = prev;
+                        for (const info of candidates) {
+                            if (next[info.threadId] === info.parentThreadId)
+                                continue;
+                            next =
+                                next === prev
+                                    ? { ...prev, [info.threadId]: info.parentThreadId }
+                                    : { ...next, [info.threadId]: info.parentThreadId };
+                        }
+                        return next;
+                    });
+                    setSubAgentNames((prev) => {
+                        let next = prev;
+                        for (const info of candidates) {
+                            if (!info.name || next[info.threadId] === info.name)
+                                continue;
+                            next =
+                                next === prev
+                                    ? { ...prev, [info.threadId]: info.name }
+                                    : { ...next, [info.threadId]: info.name };
+                        }
+                        return next;
+                    });
+                    setOpenTabIds((prev) => {
+                        let next = prev;
+                        for (const info of candidates) {
+                            if (next.includes(info.threadId))
+                                continue;
+                            const parentIdx = next.indexOf(info.parentThreadId);
+                            if (parentIdx === -1)
+                                continue;
+                            if (next === prev)
+                                next = [...prev];
+                            let insertIdx = parentIdx + 1;
+                            while (insertIdx < next.length) {
+                                const siblingParent = parentMapRef.current[next[insertIdx]] ||
+                                    candidateParents.get(next[insertIdx]);
+                                if (siblingParent !== info.parentThreadId)
+                                    break;
+                                insertIdx++;
+                            }
+                            next.splice(insertIdx, 0, info.threadId);
+                        }
+                        return next;
+                    });
+                    if (shouldRefreshThreads) {
+                        refreshThreads();
+                    }
+                }
+            }
+        }
+        catch {
+            // Best effort: task cards and manual history still work if this poll fails.
+        }
+    }, { intervalMs: agentTeamPollMs, pauseWhenHidden: true });
+    // 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.
+    // A margin keeps the active tab from sitting flush against either container
+    // edge — at the right edge it was landing directly under the +/history/menu
+    // buttons, which visually clipped the tab label.
+    const activeTabRefCb = useCallback((el) => {
+        if (!el)
+            return;
+        const container = el.parentElement;
+        if (!container)
+            return;
+        const MARGIN = 24;
+        requestAnimationFrame(() => {
+            const containerRect = container.getBoundingClientRect();
+            const tabRect = el.getBoundingClientRect();
+            if (tabRect.left < containerRect.left + MARGIN) {
+                container.scrollLeft += tabRect.left - containerRect.left - MARGIN;
+            }
+            else if (tabRect.right > containerRect.right - MARGIN) {
+                container.scrollLeft += tabRect.right - containerRect.right + MARGIN;
+            }
+        });
+    }, []);
+    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 handler = (event) => {
+            if (!isTrustedFrameMessage(event))
+                return;
+            if (event.data?.type === AGENT_CHAT_SET_CONTEXT_MESSAGE_TYPE) {
+                const item = normalizeAgentChatContextItem(event.data.data);
+                if (!item)
+                    return;
+                const openSidebar = event.data.data?.openSidebar;
+                if (openSidebar !== false) {
+                    window.dispatchEvent(new CustomEvent("agent-panel:open"));
+                }
+                if (postMessageSubmissionsDisabled)
+                    return;
+                const currentTabId = activeThreadIdRef.current;
+                if (!currentTabId)
+                    return;
+                // Focus defaults to true; a caller opts out with `focus: false` for
+                // passive context (e.g. a canvas selection) so staging never steals
+                // focus from an in-progress inline editor.
+                const focus = event.data.data?.focus !== false;
+                setContextInTab(currentTabId, item, { focus });
+                return;
+            }
+            if (event.data?.type === AGENT_CHAT_REMOVE_CONTEXT_MESSAGE_TYPE) {
+                const key = typeof event.data.data?.key === "string"
+                    ? event.data.data.key.trim()
+                    : "";
+                if (!key)
+                    return;
+                const openSidebar = event.data.data?.openSidebar;
+                if (openSidebar === true) {
+                    window.dispatchEvent(new CustomEvent("agent-panel:open"));
+                }
+                if (postMessageSubmissionsDisabled)
+                    return;
+                const currentTabId = activeThreadIdRef.current;
+                if (!currentTabId)
+                    return;
+                removeContextInTab(currentTabId, key);
+                return;
+            }
+            if (event.data?.type === AGENT_CHAT_CLEAR_CONTEXT_MESSAGE_TYPE) {
+                const openSidebar = event.data.data?.openSidebar;
+                if (openSidebar === true) {
+                    window.dispatchEvent(new CustomEvent("agent-panel:open"));
+                }
+                if (postMessageSubmissionsDisabled)
+                    return;
+                const currentTabId = activeThreadIdRef.current;
+                if (!currentTabId)
+                    return;
+                clearContextInTab(currentTabId);
+                return;
+            }
+            const parsed = parseSubmitChatMessage(event);
+            if (!parsed)
+                return;
+            // Dedup the live post against the cold-start replay; first one wins.
+            if (!claimAgentChatSubmit(parsed.submitMessageId))
+                return;
+            const { message, context, openSidebar, model, engine, effort, newTab, targetTabId, reuseEmptyTab, background, submit, images, attachments, submitMessageId, usageLabel, actionScope, approvedToolCalls, } = parsed;
+            const requestedTabId = parsed.tabId;
+            const requestMode = parsed.requestMode ?? requestModeFromExecMode(props.execMode);
+            // Make sure the sidebar is visible to show the response, unless the
+            // caller explicitly opted out or it's a background send.
+            if (openSidebar !== false && !background) {
+                window.dispatchEvent(new CustomEvent("agent-panel:open"));
+            }
+            if (postMessageSubmissionsDisabled) {
+                reportAgentChatSubmitResult(submitMessageId, false, "composer-disabled");
+                return;
+            }
+            // Plan mode is sent as request metadata by the chat adapter. Keep the
+            // user-visible message clean so mode instructions never enter history.
+            const fullMessage = context
+                ? appendAgentChatContextToMessage(message, context)
+                : message;
+            const send = {
+                message: fullMessage,
+                images,
+                attachments,
+                submit,
+                ...(background ? { trackInRunsTray: true } : {}),
+                ...(requestMode ? { requestMode } : {}),
+                ...(submitMessageId ? { submitMessageId } : {}),
+                ...(usageLabel ? { usageLabel } : {}),
+                ...(actionScope ? { actionScope } : {}),
+                ...(approvedToolCalls ? { approvedToolCalls } : {}),
+            };
+            // Resolved once, up front, and carried with the send until a thread
+            // exists to key it by. Applying it only when `model` matched
+            // `availableModels` dropped every override that arrived before the
+            // engines fetch resolved — and the cold-start replay below runs at mount,
+            // when that list is always still empty.
+            let modelOverride;
+            if (model) {
+                const catalogEngine = availableModels.find((g) => g.models.includes(model))?.engine;
+                const overrideEngine = engine ?? catalogEngine;
+                if (!overrideEngine && availableModels.length > 0) {
+                    console.warn(`[agent-chat] model override "${model}" is in no engine group and carries no engine; the server will substitute its default`);
+                }
+                modelOverride = {
+                    model,
+                    ...(overrideEngine ? { engine: overrideEngine } : {}),
+                    effort: resolveReasoningEffortSelection(model, isReasoningEffort(effort) ? effort : undefined),
+                };
+            }
+            const sendToTab = (threadId) => {
+                if (isAgentChatSubmitCancelled(submitMessageId))
+                    return;
+                reportAgentChatSubmitTarget(submitMessageId, threadId);
+                if (modelOverride) {
+                    threadModelRef.current.set(threadId, modelOverride);
+                    bumpModelSelectionVersion();
+                }
+                const ref = chatRefs.current.get(threadId);
+                if (ref) {
+                    deliverPendingSend(ref, send);
+                }
+                else {
+                    pendingDeliveries.current.push({ threadId, send, modelOverride });
+                }
+            };
+            if (targetTabId) {
+                if (!openTabIds.includes(targetTabId)) {
+                    mountedTabsRef.current.add(targetTabId);
+                    setOpenTabIds((prev) => prev.includes(targetTabId) ? prev : [...prev, targetTabId]);
+                }
+                if (!chatRefs.current.has(targetTabId)) {
+                    switchThread(targetTabId);
+                }
+                sendToTab(targetTabId);
+            }
+            else if (newTab) {
+                const previousTabId = activeThreadIdRef.current;
+                const previousChat = previousTabId
+                    ? chatRefs.current.get(previousTabId)
+                    : undefined;
+                // A blank active chat is already an isolated destination. Reuse it for
+                // foreground creation requests so the action does not leave a ghost tab.
+                if (reuseEmptyTab &&
+                    !background &&
+                    previousTabId &&
+                    previousChat &&
+                    (newThreadIds.current.has(previousTabId) ||
+                        isNewThread(previousTabId)) &&
+                    previousChat.exportThreadSnapshot() === null) {
+                    sendToTab(previousTabId);
+                    return;
+                }
+                createThread(requestedTabId)
+                    .then((newId) => {
+                    if (isAgentChatSubmitCancelled(submitMessageId))
+                        return;
+                    if (!newId) {
+                        reportAgentChatSubmitResult(submitMessageId, false, "thread-create-failed");
+                        return;
+                    }
+                    newThreadIds.current.add(newId);
+                    if (background) {
+                        mountedTabsRef.current.add(newId);
+                    }
+                    setOpenTabIds((prev) => prev.includes(newId) ? prev : [...prev, newId]);
+                    if (!background) {
+                        writeThreadUrl(newId);
+                    }
+                    sendToTab(newId);
+                    if (background && previousTabId) {
+                        switchThreadState(previousTabId);
+                    }
+                })
+                    .catch(() => {
+                    reportAgentChatSubmitResult(submitMessageId, false, "thread-create-failed");
+                });
+            }
+            else {
+                const currentTabId = activeThreadIdRef.current;
+                if (currentTabId) {
+                    sendToTab(currentTabId);
+                }
+                else {
+                    // Cold start: no thread yet. Queue for the first active thread (the
+                    // bootstrap effect creates it) rather than racing a second create.
+                    pendingDeliveries.current.push({
+                        threadId: null,
+                        send,
+                        modelOverride,
+                    });
+                }
+            }
+        };
+        window.addEventListener("message", handler);
+        return () => window.removeEventListener("message", handler);
+    }, [
+        availableModels,
+        bumpModelSelectionVersion,
+        clearContextInTab,
+        createThread,
+        isNewThread,
+        openTabIds,
+        postMessageSubmissionsDisabled,
+        props.execMode,
+        removeContextInTab,
+        setContextInTab,
+        switchThread,
+        switchThreadState,
+        writeThreadUrl,
+    ]);
+    // Replay submits posted before this lazy panel's listener attached. Dedup in
+    // the handler keeps a live + replayed message single.
+    useEffect(() => {
+        const buffered = drainBufferedAgentChatSubmits();
+        for (const data of buffered) {
+            window.dispatchEvent(new MessageEvent("message", {
+                data: { type: "agentNative.submitChat", data },
+                origin: window.location.origin,
+            }));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const flushPendingDeliveries = useCallback((onlyThreadId) => {
+        if (pendingDeliveries.current.length === 0)
+            return;
+        const active = activeThreadIdRef.current;
+        const remaining = [];
+        for (const delivery of pendingDeliveries.current) {
+            if (isAgentChatSubmitCancelled(delivery.send.submitMessageId))
+                continue;
+            const threadId = delivery.threadId ?? active ?? null;
+            if (onlyThreadId && threadId !== onlyThreadId) {
+                remaining.push(delivery);
+                continue;
+            }
+            const ref = threadId ? chatRefs.current.get(threadId) : null;
+            if (threadId && delivery.modelOverride) {
+                threadModelRef.current.set(threadId, delivery.modelOverride);
+                bumpModelSelectionVersion();
+            }
+            if (threadId && ref) {
+                const { send } = delivery;
+                setTimeout(() => deliverPendingSend(ref, send), 50);
+            }
+            else {
+                // Not ready — keep it, pinning the resolved threadId once known.
+                remaining.push(threadId
+                    ? { ...delivery, threadId, send: delivery.send }
+                    : delivery);
+            }
+        }
+        pendingDeliveries.current = remaining;
+    }, [bumpModelSelectionVersion]);
+    // Flush queued context items and sends once their thread's ref is mounted.
+    useEffect(() => {
+        for (const [tabId, items] of pendingContextItems.current) {
+            const ref = chatRefs.current.get(tabId);
+            if (!ref)
+                continue;
+            for (const item of items)
+                ref.setComposerContextItem(item);
+            pendingContextItems.current.delete(tabId);
+        }
+        flushPendingDeliveries();
+    }, [openTabIds, activeThreadId, flushPendingDeliveries]);
+    // Listen for chatRunning completion events
+    useEffect(() => {
+        const handler = (e) => {
+            const detail = e.detail;
+            if (!detail)
+                return;
+            const { isRunning, tabId } = detail;
+            if (!tabId)
+                return;
+            setRunningThreads((prev) => {
+                const next = new Set(prev);
+                if (isRunning) {
+                    next.add(tabId);
+                }
+                else {
+                    next.delete(tabId);
+                }
+                return next;
+            });
+        };
+        window.addEventListener("agentNative.chatRunning", handler);
+        return () => window.removeEventListener("agentNative.chatRunning", handler);
+    }, []);
+    const addTab = useCallback(async () => {
+        const id = await createThread();
+        if (id) {
+            newThreadIds.current.add(id);
+            // `createThread` advances the active thread before its promise resolves.
+            // Add the same id in this transaction so a new chat is mounted even if
+            // the active-thread reconciliation effect has not run yet.
+            setOpenTabIds((prev) => (prev.includes(id) ? prev : [...prev, id]));
+            writeThreadUrl(null);
+        }
+        return id;
+    }, [createThread, setOpenTabIds, writeThreadUrl]);
+    const cleanupClosedTab = useCallback((tabId) => {
+        if (parentMapRef.current[tabId]) {
+            dismissedSubAgentTabsRef.current.add(tabId);
+        }
+        chatRefs.current.delete(tabId);
+        pendingDeliveries.current = pendingDeliveries.current.filter((d) => d.threadId !== tabId);
+        pendingContextItems.current.delete(tabId);
+        newThreadIds.current.delete(tabId);
+        mountedTabsRef.current.delete(tabId);
+        threadModelRef.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;
+        });
+        setSubAgentStatuses((prev) => {
+            if (!(tabId in prev))
+                return prev;
+            const { [tabId]: _, ...rest } = prev;
+            return rest;
+        });
+    }, []);
+    useEffect(() => {
+        if (evictedThreadIds.length === 0)
+            return;
+        for (const threadId of evictedThreadIds)
+            cleanupClosedTab(threadId);
+        setOpenTabIds((prev) => prev.filter((threadId) => !evictedThreadIds.includes(threadId)));
+    }, [cleanupClosedTab, evictedThreadIds, setOpenTabIds]);
+    const closeTab = useCallback((tabId) => {
+        // Read the current list from the ref rather than a `setOpenTabIds`
+        // updater callback — `createThread()`/`switchThread()` below set
+        // `activeThreadId` synchronously as a side effect, and calling them
+        // from inside an updater left `openTabIds` and `activeThreadId`
+        // inconsistent for a render: the "ensure active thread is in open
+        // tabs" effect would then re-add the just-closed id, so the tab
+        // appeared to reopen itself right after closing.
+        const prev = openTabIdsRef.current;
+        if (prev.length <= 1) {
+            if (lastTabReplacementInFlightRef.current)
+                return;
+            lastTabReplacementInFlightRef.current = true;
+            // Last tab — create a new one and replace the old tab once ready;
+            // the old tab stays visible in the meantime so the bar is never empty.
+            cleanupClosedTab(tabId);
+            void (async () => {
+                try {
+                    const newId = await createThread();
+                    if (newId) {
+                        newThreadIds.current.add(newId);
+                        setOpenTabIds([newId]);
+                        writeThreadUrl(null);
+                    }
+                }
+                catch (error) {
+                    console.error("[agent-chat] failed to replace the closed final tab", error);
+                }
+                finally {
+                    lastTabReplacementInFlightRef.current = false;
+                }
+            })();
+            return;
+        }
+        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)]);
+        }
+        setOpenTabIds(next);
+        cleanupClosedTab(tabId);
+    }, [switchThread, createThread, cleanupClosedTab, writeThreadUrl]);
+    const closeOtherTabs = useCallback((tabId) => {
+        for (const id of openTabIdsRef.current) {
+            if (id !== tabId && parentMapRef.current[id]) {
+                dismissedSubAgentTabsRef.current.add(id);
+            }
+        }
+        setOpenTabIds([tabId]);
+        if (activeThreadIdRef.current !== tabId) {
+            switchThread(tabId);
+        }
+        // Clean up refs for closed tabs
+        for (const key of chatRefs.current.keys()) {
+            if (key !== tabId) {
+                if (parentMapRef.current[key]) {
+                    dismissedSubAgentTabsRef.current.add(key);
+                }
+                chatRefs.current.delete(key);
+                pendingDeliveries.current = pendingDeliveries.current.filter((d) => d.threadId !== key);
+                pendingContextItems.current.delete(key);
+                newThreadIds.current.delete(key);
+                threadModelRef.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 {};
+        });
+        setSubAgentStatuses((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]);
+            switchThreadState(id);
+            writeThreadUrl(null);
+            dismissedSubAgentTabsRef.current.clear();
+            // Clean up all old refs
+            chatRefs.current.clear();
+            pendingDeliveries.current = [];
+            pendingContextItems.current.clear();
+            threadModelRef.current.clear();
+            setParentMap({});
+            setSubAgentNames({});
+            setSubAgentStatuses({});
+        }
+    }, [createThread, switchThreadState, writeThreadUrl]);
+    // Keyboard shortcuts dispatched from AgentPanel based on the active mode
+    useEffect(() => {
+        const handleCloseCurrent = () => {
+            const id = activeThreadIdRef.current;
+            if (id)
+                closeTab(id);
+        };
+        const handleCloseAll = () => {
+            void closeAllTabs();
+        };
+        const handleNewChat = () => {
+            void addTab();
+        };
+        window.addEventListener("agent-chat:close-current-tab", handleCloseCurrent);
+        window.addEventListener("agent-chat:close-all-tabs", handleCloseAll);
+        window.addEventListener("agent-chat:new-chat", handleNewChat);
+        return () => {
+            window.removeEventListener("agent-chat:close-current-tab", handleCloseCurrent);
+            window.removeEventListener("agent-chat:close-all-tabs", handleCloseAll);
+            window.removeEventListener("agent-chat:new-chat", handleNewChat);
+        };
+    }, [closeTab, closeAllTabs, addTab]);
+    useEffect(() => {
+        const handleOpenThread = async (event) => {
+            const detail = event.detail;
+            const threadId = typeof detail?.threadId === "string" ? detail.threadId : "";
+            if (!detail || !threadId)
+                return;
+            if (!claimAgentChatOpenRequest(detail.openRequestId))
+                return;
+            const requestGeneration = ++latestOpenThreadRequestRef.current;
+            const onlyIfActiveThreadId = typeof detail.onlyIfActiveThreadId === "string"
+                ? detail.onlyIfActiveThreadId.trim()
+                : "";
+            const activeThreadId = activeThreadIdRef.current;
+            if (onlyIfActiveThreadId &&
+                activeThreadId &&
+                activeThreadId !== onlyIfActiveThreadId) {
+                return;
+            }
+            if (detail?.newThread === true) {
+                newThreadIds.current.add(threadId);
+                void createThread(threadId).then((createdId) => {
+                    if (!createdId)
+                        return;
+                    setOpenTabIds((prev) => prev.includes(createdId) ? prev : [...prev, createdId]);
+                    writeThreadUrl(null);
+                });
+                return;
+            }
+            const activeThreadBeforeLookup = activeThreadIdRef.current;
+            const openResult = await openThread(threadId);
+            if (openResult === "missing") {
+                cleanupClosedTab(threadId);
+                return;
+            }
+            if (openResult === "unavailable")
+                return;
+            if (requestGeneration !== latestOpenThreadRequestRef.current ||
+                activeThreadIdRef.current !== activeThreadBeforeLookup ||
+                (onlyIfActiveThreadId &&
+                    activeThreadIdRef.current &&
+                    activeThreadIdRef.current !== onlyIfActiveThreadId)) {
+                return;
+            }
+            const prefill = typeof detail.prefill === "string" ? detail.prefill.trim() : "";
+            if (prefill) {
+                const send = { message: prefill, submit: false };
+                const ref = chatRefs.current.get(threadId);
+                if (ref) {
+                    setTimeout(() => deliverPendingSend(ref, send), 50);
+                }
+                else {
+                    pendingDeliveries.current.push({ threadId, send });
+                }
+            }
+            mountedTabsRef.current.add(threadId);
+            setOpenTabIds((prev) => prev.includes(threadId) ? prev : [...prev, threadId]);
+            switchThread(threadId);
+        };
+        window.addEventListener("agent-chat:open-thread", handleOpenThread);
+        return () => window.removeEventListener("agent-chat:open-thread", handleOpenThread);
+    }, [
+        cleanupClosedTab,
+        createThread,
+        openThread,
+        switchThread,
+        writeThreadUrl,
+    ]);
+    const clearActiveTab = useCallback(() => {
+        const tabIdToClear = activeThreadIdRef.current;
+        void addTab().then((newTabId) => {
+            if (!tabIdToClear || !newTabId || tabIdToClear === newTabId)
+                return;
+            setOpenTabIds((prev) => {
+                const next = prev.filter((id) => id !== tabIdToClear);
+                return next.includes(newTabId) ? next : [...next, newTabId];
+            });
+            cleanupClosedTab(tabIdToClear);
+        });
+    }, [addTab, cleanupClosedTab]);
+    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;
+            if (!claimAgentChatOpenRequest(detail.openRequestId))
+                return;
+            dismissedSubAgentTabsRef.current.delete(threadId);
+            // Prefer an explicit parent (RunsTray/background hydration knows it);
+            // inline task cards fall back to the active orchestrator thread.
+            const explicitParentId = typeof detail?.parentThreadId === "string"
+                ? detail.parentThreadId.trim()
+                : "";
+            const parentId = explicitParentId || 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]);
+    // Replay thread/task opens requested before this lazy panel's listeners
+    // attached. Live events claim their id; replay drains only unclaimed requests.
+    useEffect(() => {
+        const buffered = drainBufferedAgentChatOpenRequests();
+        for (const request of buffered) {
+            window.dispatchEvent(new CustomEvent(request.eventType, { detail: request.detail }));
+        }
+    }, []);
+    // Watch for agent-issued chat-command in application-state. The shared
+    // DB-sync transport advances this key-specific version, so the command gets
+    // one initial read and one read per actual write instead of a 2s loop.
+    const lastChatCommandRef = useRef(0);
+    const chatCommandVersion = useChangeVersion("app-state:chat-command");
+    useEffect(() => {
+        let stopped = false;
+        async function readChatCommand() {
+            if (stopped)
+                return;
+            try {
+                const res = await fetch(agentNativePath("/_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
+                        setOpenTabIds((prev) => prev.includes(threadId) ? prev : [...prev, threadId]);
+                        switchThread(threadId);
+                        // Clear the command
+                        fetch(agentNativePath("/_agent-native/application-state/chat-command"), {
+                            method: "DELETE",
+                            headers: { "X-Agent-Native-CSRF": "1" },
+                        }).catch(() => { });
+                    }
+                }
+            }
+            catch { }
+        }
+        void readChatCommand();
+        return () => {
+            stopped = true;
+        };
+    }, [chatCommandVersion, switchThread]);
+    const handleGenerateTitle = useCallback((threadId, message) => {
+        void generateTitle(threadId, message).then((title) => {
+            if (title) {
+                // Persist the generated title to the server
+                void saveThreadData(threadId, {
+                    threadData: "",
+                    title,
+                    preview: message.slice(0, 120),
+                    titleSource: "generated",
+                });
+            }
+        });
+    }, [generateTitle, saveThreadData]);
+    const handleSaveThread = useCallback((threadId, data) => {
+        void saveThreadData(threadId, data);
+        if (data.messageCount > 0 &&
+            threadId === activeThreadIdRef.current &&
+            urlThreadIdRef.current !== threadId) {
+            writeThreadUrl(threadId);
+        }
+    }, [saveThreadData, writeThreadUrl]);
+    // ─── Slash command handler ──────────────────────────────────────────
+    const [helpVisible, setHelpVisible] = useState(false);
+    const handleSlashCommand = useCallback((command) => {
+        switch (command) {
+            case "clear":
+            case "new":
+                void addTab();
+                break;
+            case "history":
+                setShowHistory(true);
+                break;
+            case "plan":
+                props.onExecModeChange?.("plan");
+                break;
+            case "act": {
+                const ref = activeThreadIdRef.current
+                    ? chatRefs.current.get(activeThreadIdRef.current)
+                    : undefined;
+                if (!ref?.implementPlan())
+                    props.onExecModeChange?.("build");
+                break;
+            }
+            case "help":
+                setHelpVisible(true);
+                break;
+        }
+    }, [addTab, props.onExecModeChange]);
+    const activateForkedThread = useCallback((sourceThreadId, forkedId) => {
+        if (sourceThreadId && forkedId && sourceThreadId !== forkedId) {
+            setForkParentMap((prev) => prev[forkedId] === sourceThreadId
+                ? prev
+                : { ...prev, [forkedId]: sourceThreadId });
+        }
+        setOpenTabIds((prev) => {
+            if (prev.includes(forkedId))
+                return prev;
+            const idx = prev.indexOf(sourceThreadId);
+            if (idx !== -1) {
+                const next = [...prev];
+                next.splice(idx + 1, 0, forkedId);
+                return next;
+            }
+            return [...prev, forkedId];
+        });
+        switchThread(forkedId);
+    }, [switchThread]);
+    const activateForkSibling = useCallback((threadId) => {
+        setOpenTabIds((prev) => prev.includes(threadId) ? prev : [...prev, threadId]);
+        switchThread(threadId);
+    }, [switchThread]);
+    const getBranchNavigation = useCallback((threadId) => {
+        const parentThreadId = forkParentMap[threadId] ?? threadId;
+        const knownThreadIds = new Set([
+            activeThreadId,
+            ...openTabIds,
+            ...threads.map((thread) => thread.id),
+        ]);
+        const siblings = [
+            parentThreadId,
+            ...Object.entries(forkParentMap)
+                .filter(([childThreadId, parentId]) => parentId === parentThreadId && childThreadId !== parentThreadId)
+                .map(([childThreadId]) => childThreadId),
+        ].filter((id, index, all) => knownThreadIds.has(id) && all.indexOf(id) === index);
+        const index = siblings.indexOf(threadId);
+        if (siblings.length < 2 || index < 0)
+            return undefined;
+        return {
+            index: index + 1,
+            count: siblings.length,
+            onPrevious: () => {
+                const previous = siblings[index - 1];
+                if (previous)
+                    activateForkSibling(previous);
+            },
+            onNext: () => {
+                const next = siblings[index + 1];
+                if (next)
+                    activateForkSibling(next);
+            },
+        };
+    }, [activeThreadId, activateForkSibling, forkParentMap, openTabIds, threads]);
+    const handleForkChat = useCallback(async (sourceThreadId) => {
+        const sourceSnapshot = chatRefs.current.get(sourceThreadId)?.exportThreadSnapshot() ?? null;
+        const forkedId = await forkThread(sourceThreadId, sourceSnapshot);
+        if (!forkedId)
+            return false;
+        activateForkedThread(sourceThreadId, forkedId);
+        return true;
+    }, [activateForkedThread, forkThread]);
+    // Build tabs from open thread IDs. During the first thread-list fetch,
+    // `activeThreadId` is seeded synchronously so the chat can mount before
+    // persisted open tabs have been reconciled.
+    const visibleOpenTabIds = activeThreadId && !openTabIds.includes(activeThreadId)
+        ? [...openTabIds, activeThreadId]
+        : openTabIds;
+    const threadMap = new Map(threads.map((t) => [t.id, t]));
+    const tabs = visibleOpenTabIds
+        .filter((id) => threadMap.has(id) || id === activeThreadId)
+        .map((id) => {
+        const t = threadMap.get(id);
+        const agentTeamStatus = chatTabStatusFromAgentTeamStatus(subAgentStatuses[id]);
+        return {
+            id,
+            label: t?.title || translate("agentChat.tabs.newChat"),
+            status: agentTeamStatus ??
+                (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 visibleOpenTabIds) {
+        if (!tabs.some((t) => t.id === id)) {
+            tabs.push({
+                id,
+                label: subAgentNames[id] ||
+                    (parentMap[id]
+                        ? translate("agentChat.tabs.subAgent")
+                        : translate("agentChat.tabs.newChat")),
+                status: chatTabStatusFromAgentTeamStatus(subAgentStatuses[id]) ??
+                    "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: visibleOpenTabIds.length,
+    };
+    // Wait for the first thread-list pass only when there is no synchronously
+    // seeded active thread. Suggestion loading and thread-list reconciliation
+    // should not block the chat shell from mounting.
+    if (isLoading && !activeThreadId) {
+        return (_jsx(ChatSkeleton, { header: renderHeader?.(headerProps), headerOnly: contentHidden }));
+    }
+    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;pointer-events:none}" +
+                        ".agent-tab-group:hover .agent-tab-close,.agent-tab-close:focus-visible{opacity:1;pointer-events:auto}" +
+                        ".agent-tabs-scroll{scrollbar-width:none;-ms-overflow-style:none;}" +
+                        ".agent-tabs-scroll::-webkit-scrollbar{display:none;}",
+                } }), 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: "agent-tabs-scroll flex items-center gap-0.5 min-w-0 overflow-x-auto flex-1", children: mainTabs.map((tab) => {
+                                                const isActive = tab.id === activeThreadId ||
+                                                    (tab.id === focusParentId &&
+                                                        activeTab?.parentThreadId === tab.id);
+                                                return (_jsxs("div", { ref: isActive ? activeTabRefCb : undefined, className: cn("agent-tab agent-tab-group relative flex items-center rounded-md text-[11px] font-medium shrink-0 min-w-[56px] max-w-[130px]", isActive
+                                                        ? "bg-accent text-foreground ring-1 ring-inset ring-border/60 shadow-sm"
+                                                        : "text-muted-foreground hover:text-foreground hover:bg-accent/50"), children: [_jsxs("button", { type: "button", onClick: () => switchThread(tab.id), className: "flex items-center gap-1 px-2.5 py-1.5 min-w-0 flex-1 text-start", children: [_jsx("span", { className: "truncate pe-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("button", { type: "button", "aria-label": translate("agentChat.tabs.closeTab"), onClick: (e) => {
+                                                                e.stopPropagation();
+                                                                e.preventDefault();
+                                                                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: 12 }) })] }, tab.id));
+                                            }) }), _jsx(TooltipProvider, { delayDuration: 200, children: _jsxs("div", { className: "flex items-center gap-px shrink-0 ms-auto", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { onClick: addTab, "aria-label": translate("agentChat.tabs.newChat"), className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground/60 hover:text-foreground hover:bg-accent/50", children: _jsx(IconPlus, { size: 12 }) }) }), _jsx(TooltipContent, { children: translate("agentChat.tabs.newChat") })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { onClick: () => setShowHistory(!showHistory), "aria-label": translate("agentChat.tabs.allChats"), 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"), children: _jsx(IconHistory, { size: 12 }) }) }), _jsx(TooltipContent, { children: translate("agentChat.tabs.allChats") })] })] }) })] }), 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: "agent-tabs-scroll flex items-center gap-0.5 min-w-0 overflow-x-auto 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: translate("agentChat.tabs.main") }), childTabs.map((tab) => (_jsxs("div", { ref: tab.id === activeThreadId
+                                                    ? activeTabRefCb
+                                                    : undefined, className: cn("agent-tab agent-tab-group relative flex shrink-0 items-center rounded-md text-[10px] font-medium min-w-[48px] max-w-[130px]", tab.id === activeThreadId
+                                                    ? "bg-accent text-foreground"
+                                                    : "text-muted-foreground hover:bg-accent hover:text-foreground"), children: [_jsxs("button", { type: "button", onClick: () => switchThread(tab.id), className: "flex items-center gap-1 px-2 py-1 min-w-0 flex-1 text-start", children: [_jsx("span", { className: "truncate pe-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("button", { type: "button", "aria-label": translate("agentChat.tabs.closeTab"), onClick: (e) => {
+                                                            e.stopPropagation();
+                                                            e.preventDefault();
+                                                            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: 12 }) })] }, tab.id)))] }) }))] }));
+                    })()
+                    : null, _jsxs("div", { className: cn("relative flex-1 flex flex-col min-h-0", renderOverlay && "pt-14"), "data-agent-page-chat-topbar": renderOverlay ? "" : undefined, "data-agent-page-chat-scrolled": renderOverlay && pageOverlayScrolled ? "" : undefined, onScrollCapture: renderOverlay ? handlePageOverlayScroll : undefined, children: [renderOverlay ? renderOverlay(headerProps) : null, showHistory && (_jsx(HistoryPopover, { threads: threads, openTabIds: new Set(openTabIds), activeThreadId: activeThreadId, hasMoreThreads: hasMoreThreads, isLoadingMoreThreads: isLoadingMoreThreads, loadError: threadsLoadError, onSelect: openFromHistory, onClose: () => setShowHistory(false), onLoadMore: loadMoreThreads, onSearch: searchThreads, onTogglePin: pinThread, onRename: renameThread, popoverAlign: renderOverlay ? "start" : "end" })), helpVisible && _jsx(HelpPopover, { onClose: () => setHelpVisible(false) }), [...new Set(visibleOpenTabIds)]
+                        .filter((tabId) => tabId === activeThreadId || mountedTabsRef.current.has(tabId))
+                        .map((tabId) => {
+                        const modelSelection = resolveThreadModelSelection(tabId);
+                        const modelSelectionPending = !hostManagedModels && modelListLoading && !modelSelection;
+                        const tabDynamicSuggestions = tabId === activeThreadId && !contentHidden
+                            ? props.dynamicSuggestions
+                            : false;
+                        return (_jsx("div", { className: "flex-1 min-h-0 flex-col", style: {
+                                display: contentHidden || tabId !== activeThreadId ? "none" : "flex",
+                            }, children: _jsx(AgentKitAssistantChat, { ...props, dynamicSuggestions: tabDynamicSuggestions, ref: (handle) => {
+                                    if (handle) {
+                                        chatRefs.current.set(tabId, handle);
+                                        flushPendingDeliveries(tabId);
+                                    }
+                                    else {
+                                        chatRefs.current.delete(tabId);
+                                    }
+                                }, threadId: tabId, tabId: tabId, browserTabId: browserTabId, contextScope: scope, contextNamespace: contextNamespace, isolateHistoryByScope: isolateHistoryByScope, isActiveComposer: !contentHidden && tabId === activeThreadId, apiUrl: apiUrl, isNewThread: newThreadIds.current.has(tabId) || isNewThread(tabId), onThreadRestoreNotFound: tabId === activeThreadId &&
+                                    (props.agentChatSurface !== "desktop" ||
+                                        props.desktopIdentityAuthenticated === true)
+                                    ? clearActiveTab
+                                    : undefined, isThreadStateLoading: isLoading, onMessageCountChange: (count) => {
+                                    setMessageCounts((prev) => prev[tabId] === count
+                                        ? prev
+                                        : { ...prev, [tabId]: count });
+                                    // This sits after `{...props}`, so forwarding is not
+                                    // optional: taking the callback for the tab counter alone
+                                    // silently drops the host's.
+                                    props.onMessageCountChange?.(count);
+                                }, onSaveThread: handleSaveThread, onGenerateTitle: handleGenerateTitle, onSlashCommand: handleSlashCommand, onForkedThread: (forkedId) => activateForkedThread(tabId, forkedId), branchNavigation: getBranchNavigation(tabId), selectedModel: modelSelection?.model, selectedEngine: modelSelection?.engine, selectedEffort: modelSelection?.effort ?? DEFAULT_REASONING_EFFORT, composerSlot: props.composerSlot, defaultModel: defaultModel, availableModels: availableModels, modelListLoading: modelListLoading, onModelChange: handleModelChangeWithHost, onEffortChange: handleEffortChange, onForkChat: () => handleForkChat(tabId), 
+                                // Sub-agent tabs are read-only: sending a new message from the
+                                // sub-agent tab would start a fresh run on that thread and kill
+                                // the in-flight team chunk. Disable the composer and show a
+                                // hint so users know to send via the orchestrator chat instead.
+                                composerDisabled: props.composerDisabled || Boolean(parentMap[tabId]), composerSubmissionDisabled: props.composerSubmissionDisabled || modelSelectionPending, composerDisabledPlaceholder: props.composerDisabled
+                                    ? props.composerDisabledPlaceholder
+                                    : parentMap[tabId]
+                                        ? translate("agentChat.composer.subAgentReadOnly")
+                                        : props.composerDisabledPlaceholder }) }, tabId));
+                    })] })] }));
+}
+//# sourceMappingURL=MultiTabAssistantChat.js.map