@agent-native/core 0.14.8 → 0.15.1

package/dist/client/MultiTabAssistantChat.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useRef, useEffect, useCallback } from "react";
-import { IconX, IconPlus, IconHistory, IconSearch } from "@tabler/icons-react";
+import { useState, useRef, useEffect, useCallback, useMemo, } from "react";
+import { IconX, IconPlus, IconHistory, IconSearch, IconLink, IconLinkOff, IconCheck, } from "@tabler/icons-react";
 import { AssistantChat, } from "./AssistantChat.js";
 import { isTrustedFrameMessage } from "./frame.js";
 import { cn } from "./utils.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./components/ui/tooltip.js";
-import { useChatThreads } from "./use-chat-threads.js";
+import { Popover, PopoverContent, PopoverTrigger, } from "./components/ui/popover.js";
+import { useChatThreads, } from "./use-chat-threads.js";
 import { agentNativePath } from "./api-path.js";
 import { RunStuckBanner } from "./RunStuckBanner.js";
 import { DEFAULT_MODEL } from "../agent/default-model.js";
@@ -78,8 +79,98 @@ function resolveModelSelection(selection, groups) {
 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: "ml-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" })] }))] }));
 }
+// ─── Scope Badge ─────────────────────────────────────────────────────────────
+function formatScopeType(type) {
+    return type.replace(/[-_]+/g, " ");
+}
+function indefiniteArticleFor(value) {
+    return /^[aeiou]/i.test(value.trim()) ? "an" : "a";
+}
+function getScopeCopy(scope, isCurrentScope) {
+    const type = formatScopeType(scope.type);
+    const fallbackObject = isCurrentScope
+        ? `this ${type}`
+        : `${indefiniteArticleFor(type)} ${type}`;
+    const objectLabel = scope.label || fallbackObject;
+    return {
+        objectLabel,
+        chipLabel: scope.label || (isCurrentScope ? `this ${type}` : `${type} context`),
+    };
+}
+/**
+ * Thin context chip at the top of a scoped chat. Click → popover with
+ * related chats and the remove-context action. The chip stays unobtrusive
+ * when the user doesn't need it, but remains available as the escape hatch
+ * for taking a scoped chat back to a general one.
+ */
+function ScopeBadge({ scope, currentScope, onDetach, otherScopedThreads, activeThreadId, openTabIds, onSelectThread, }) {
+    const [open, setOpen] = useState(false);
+    const isCurrentScope = Boolean(currentScope &&
+        currentScope.type === scope.type &&
+        currentScope.id === scope.id);
+    const hasDifferentCurrentScope = Boolean(currentScope && !isCurrentScope);
+    const { objectLabel, chipLabel } = getScopeCopy(scope, isCurrentScope);
+    const heading = `Using ${chipLabel}`;
+    const detailSuffix = hasDifferentCurrentScope
+        ? "Start a new chat to use the current page."
+        : isCurrentScope
+            ? "New chats here keep this context."
+            : "Start a new chat for a general conversation.";
+    const otherCount = otherScopedThreads.length;
+    return (_jsx("div", { className: "flex items-center justify-center py-1 px-3 text-[11px] text-muted-foreground border-b border-border/40 shrink-0", children: _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 hover:bg-accent/50 hover:text-foreground cursor-pointer", "aria-label": heading, children: [_jsx(IconLink, { size: 11, className: "shrink-0 opacity-70" }), _jsx("span", { className: "truncate max-w-[220px]", children: heading }), otherCount > 0 && (_jsxs("span", { className: "ml-0.5 rounded-full bg-muted px-1.5 py-px text-[10px] leading-none text-muted-foreground", "aria-label": `${otherCount} other chats for ${objectLabel}`, children: ["+", otherCount] }))] }) }), _jsxs(PopoverContent, { align: "center", side: "bottom", className: "w-72 p-0", children: [_jsxs("p", { className: "px-3 pt-2 pb-1.5 text-[11px] text-muted-foreground", children: ["This chat can see", " ", _jsx("span", { className: "text-foreground", children: objectLabel }), ".", " ", detailSuffix] }), otherCount > 0 && (_jsxs("div", { className: "border-t border-border", children: [_jsxs("div", { className: "px-3 pt-1.5 pb-1 text-[10px] uppercase tracking-wider text-muted-foreground/70", children: ["Chats for ", objectLabel] }), _jsx("div", { className: "max-h-56 overflow-y-auto pb-1", children: otherScopedThreads.map((thread) => renderThreadRow(thread, activeThreadId, openTabIds, formatThreadTime, onSelectThread, () => setOpen(false))) })] })), _jsx("div", { className: "border-t border-border p-1", children: _jsxs("button", { type: "button", onClick: () => {
+                                    setOpen(false);
+                                    onDetach();
+                                }, className: "flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs text-foreground hover:bg-accent cursor-pointer", children: [_jsx(IconLinkOff, { size: 13 }), _jsx("span", { children: "Remove context" })] }) })] })] }) }));
+}
+/**
+ * Empty-state addon shown when the user starts a fresh chat inside a
+ * scoped surface that already has other threads. Surfaces those threads
+ * inline so chats don't feel "lost" after the user navigates away and
+ * back — the chip popover lists them too, but this nudge is visible
+ * without any extra clicks.
+ */
+function PreviousScopedChatsHint({ scope, threads, onSelectThread, }) {
+    const MAX_INLINE = 3;
+    const shown = threads.slice(0, MAX_INLINE);
+    const remaining = threads.length - shown.length;
+    const scopeLabel = scope.label || `this ${formatScopeType(scope.type)}`;
+    return (_jsxs("div", { className: "flex w-full max-w-[280px] flex-col gap-1.5", children: [_jsxs("div", { className: "text-[10px] uppercase tracking-wider text-muted-foreground/70 text-center", children: ["Previous chats for ", scopeLabel] }), _jsx("div", { className: "flex flex-col gap-1", children: shown.map((thread) => (_jsxs("button", { type: "button", onClick: () => onSelectThread(thread.id), className: "flex items-baseline justify-between gap-2 rounded-md border border-border px-2.5 py-1.5 text-left hover:bg-accent cursor-pointer", children: [_jsx("span", { className: "truncate text-[12px] text-foreground", children: thread.title || thread.preview || "Chat" }), _jsx("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: formatThreadTime(thread.updatedAt) })] }, thread.id))) }), remaining > 0 && (_jsxs("div", { className: "text-[10px] text-muted-foreground/70 text-center", children: ["+", remaining, " more"] }))] }));
+}
+/**
+ * Thin confirmation banner shown briefly after detach. The chip itself
+ * unmounts the moment scope clears on the active thread, so this banner
+ * holds the visual feedback long enough for the user to register what
+ * just happened and learn where the chat went (History popover).
+ */
+function DetachConfirmationBanner() {
+    return (_jsx("div", { className: "flex items-center justify-center py-1 px-3 text-[11px] text-muted-foreground border-b border-border/40 shrink-0", children: _jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-accent/40 px-2 py-0.5 text-foreground", children: [_jsx(IconCheck, { size: 11, className: "shrink-0 opacity-80" }), _jsx("span", { children: "Context removed. Find this chat in History." })] }) }));
+}
 // ─── History Popover ─────────────────────────────────────────────────────────
-function HistoryPopover({ threads, openTabIds, activeThreadId, onSelect, onClose, onSearch, }) {
+function formatThreadTime(ts) {
+    const d = new Date(ts);
+    const now = new Date();
+    const diffMs = now.getTime() - d.getTime();
+    const diffDays = Math.floor(diffMs / 86400000);
+    if (diffDays === 0)
+        return d.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+    if (diffDays === 1)
+        return "Yesterday";
+    if (diffDays < 7)
+        return d.toLocaleDateString([], { weekday: "short" });
+    return d.toLocaleDateString([], { month: "short", day: "numeric" });
+}
+function renderThreadRow(thread, activeThreadId, openTabIds, formatTime, onSelect, onClose) {
+    const isActive = thread.id === activeThreadId;
+    return (_jsxs("button", { onClick: () => {
+            onSelect(thread.id);
+            onClose();
+        }, className: cn("w-full px-3 py-2 text-left hover:bg-accent/50 cursor-pointer", isActive && "bg-accent/30"), children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [_jsx("span", { className: "text-xs font-medium text-foreground truncate", children: thread.title || thread.preview || "Chat" }), _jsx("span", { className: "text-[10px] text-muted-foreground shrink-0", children: isActive
+                            ? "Active"
+                            : openTabIds.has(thread.id)
+                                ? "Open"
+                                : formatTime(thread.updatedAt) })] }), thread.preview && thread.title !== thread.preview && (_jsx("div", { className: "text-[11px] text-muted-foreground truncate mt-0.5", children: thread.preview })), thread.scope?.label && (_jsx("div", { className: "mt-0.5 text-[10px] text-muted-foreground/70 truncate", children: thread.scope.label }))] }, thread.id));
+}
+function HistoryPopover({ threads, openTabIds, activeThreadId, currentScope, onSelect, onClose, onSearch, }) {
     const [search, setSearch] = useState("");
     const [searchResults, setSearchResults] = useState(null);
     const [isSearching, setIsSearching] = useState(false);
@@ -136,30 +227,20 @@ function HistoryPopover({ threads, openTabIds, activeThreadId, onSelect, onClose
     const filtered = search.trim()
         ? (searchResults ?? visibleThreads).filter((t) => t.messageCount > 0 || t.id === activeThreadId)
         : visibleThreads;
-    const formatTime = (ts) => {
-        const d = new Date(ts);
-        const now = new Date();
-        const diffMs = now.getTime() - d.getTime();
-        const diffDays = Math.floor(diffMs / 86400000);
-        if (diffDays === 0)
-            return d.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
-        if (diffDays === 1)
-            return "Yesterday";
-        if (diffDays < 7)
-            return d.toLocaleDateString([], { weekday: "short" });
-        return d.toLocaleDateString([], { month: "short", day: "numeric" });
-    };
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40", onClick: onClose }), _jsxs("div", { className: "absolute right-2 top-0 z-50 w-72 rounded-lg border border-border bg-popover shadow-lg", children: [_jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-border", children: [_jsx(IconSearch, { size: 13 }), _jsx("input", { ref: inputRef, type: "text", value: search, onChange: (e) => setSearch(e.target.value), placeholder: "Search chats...", className: "flex-1 bg-transparent text-xs text-foreground placeholder:text-muted-foreground outline-none" })] }), _jsx("div", { className: "max-h-64 overflow-y-auto py-1", children: isSearching ? (_jsx("div", { className: "px-3 py-4 text-xs text-muted-foreground text-center", children: "Searching..." })) : filtered.length === 0 ? (_jsx("div", { className: "px-3 py-4 text-xs text-muted-foreground text-center", children: search ? "No matching chats" : "No chats yet" })) : (filtered.map((thread) => {
-                            const isActive = thread.id === activeThreadId;
-                            return (_jsxs("button", { onClick: () => {
-                                    onSelect(thread.id);
-                                    onClose();
-                                }, className: cn("w-full px-3 py-2 text-left hover:bg-accent/50", isActive && "bg-accent/30"), children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [_jsx("span", { className: "text-xs font-medium text-foreground truncate", children: thread.title || thread.preview || "Chat" }), _jsx("span", { className: "text-[10px] text-muted-foreground shrink-0", children: isActive
-                                                    ? "Active"
-                                                    : openTabIds.has(thread.id)
-                                                        ? "Open"
-                                                        : formatTime(thread.updatedAt) })] }), thread.preview && thread.title !== thread.preview && (_jsx("div", { className: "text-[11px] text-muted-foreground truncate mt-0.5", children: thread.preview }))] }, thread.id));
-                        })) })] })] }));
+    // When scope is set we split history into two sections so the user can
+    // see "this deck's chats" first without losing access to general /
+    // other-deck chats. Section labels intentionally use the current
+    // resource type (deck/design/dashboard) instead of a generic phrase.
+    const sectionedThreads = currentScope
+        ? {
+            scoped: filtered.filter((t) => t.scope?.type === currentScope.type &&
+                t.scope?.id === currentScope.id),
+            other: filtered.filter((t) => !t.scope ||
+                t.scope.type !== currentScope.type ||
+                t.scope.id !== currentScope.id),
+        }
+        : null;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40", onClick: onClose }), _jsxs("div", { className: "absolute right-2 top-0 z-50 w-72 rounded-lg border border-border bg-popover shadow-lg", children: [_jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-border", children: [_jsx(IconSearch, { size: 13 }), _jsx("input", { ref: inputRef, type: "text", value: search, onChange: (e) => setSearch(e.target.value), placeholder: "Search chats...", className: "flex-1 bg-transparent text-xs text-foreground placeholder:text-muted-foreground outline-none" })] }), _jsx("div", { className: "max-h-64 overflow-y-auto py-1", children: isSearching ? (_jsx("div", { className: "px-3 py-4 text-xs text-muted-foreground text-center", children: "Searching..." })) : filtered.length === 0 ? (_jsx("div", { className: "px-3 py-4 text-xs text-muted-foreground text-center", children: search ? "No matching chats" : "No chats yet" })) : sectionedThreads ? (_jsxs(_Fragment, { children: [sectionedThreads.scoped.length > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "px-3 pt-1.5 pb-1 text-[10px] uppercase tracking-wider text-muted-foreground/70", children: ["This ", currentScope.type] }), sectionedThreads.scoped.map((thread) => renderThreadRow(thread, activeThreadId, openTabIds, formatThreadTime, onSelect, onClose))] })), sectionedThreads.other.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "px-3 pt-2 pb-1 text-[10px] uppercase tracking-wider text-muted-foreground/70", children: "All chats" }), sectionedThreads.other.map((thread) => renderThreadRow(thread, activeThreadId, openTabIds, formatThreadTime, onSelect, onClose))] }))] })) : (filtered.map((thread) => renderThreadRow(thread, activeThreadId, openTabIds, formatThreadTime, onSelect, onClose))) })] })] }));
 }
 // ─── Help Popover ────────────────────────────────────────────────────────────
 function HelpPopover({ onClose }) {
@@ -185,8 +266,8 @@ function HelpPopover({ onClose }) {
     ];
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40", onClick: onClose }), _jsxs("div", { className: "absolute right-2 top-0 z-50 w-72 rounded-lg border border-border bg-popover shadow-lg", children: [_jsxs("div", { className: "flex items-center justify-between px-3 py-2 border-b border-border", children: [_jsx("span", { className: "text-xs font-medium text-foreground", children: "Available Commands" }), _jsx("button", { onClick: onClose, "aria-label": "Close help", className: "flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:text-foreground", children: _jsx(IconX, { size: 12 }) })] }), _jsx("div", { className: "py-1", children: commands.map((cmd) => (_jsxs("div", { className: "px-3 py-1.5", children: [_jsx("div", { className: "text-xs font-medium text-foreground", children: cmd.name }), _jsx("div", { className: "text-[11px] text-muted-foreground", children: cmd.description })] }, cmd.name))) })] })] }));
 }
-export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderOverlay, contentHidden = false, apiUrl = agentNativePath("/_agent-native/agent-chat"), storageKey, ...props }) {
-    const { threads, activeThreadId, isLoading, createThread, switchThread, deleteThread, forkThread, saveThreadData, generateTitle, searchThreads, refreshThreads, isNewThread, } = useChatThreads(apiUrl, storageKey);
+export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderOverlay, contentHidden = false, apiUrl = agentNativePath("/_agent-native/agent-chat"), storageKey, browserTabId, scope = null, ...props }) {
+    const { threads, activeThreadId, isLoading, createThread, switchThread, deleteThread, detachThread, forkThread, saveThreadData, generateTitle, searchThreads, refreshThreads, isNewThread, } = useChatThreads(apiUrl, storageKey, scope);
     // Namespace all localStorage keys by storageKey when provided (for per-app isolation in frame)
     const keyPrefix = storageKey ? `:${storageKey}` : "";
     const modelSelectionKey = `${MODEL_SELECTION_STORAGE_KEY}${keyPrefix}`;
@@ -404,7 +485,11 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
         catch { }
     }, [subAgentNames, SUB_AGENT_NAMES_KEY]);
     // Open tabs — persisted to localStorage so they survive refresh.
-    const OPEN_TABS_KEY = `agent-chat-open-tabs${keyPrefix}`;
+    // Per-scope: when scope changes (e.g. user navigates from Deck A to Deck
+    // B), the tab bar reflects whichever tabs they had open for *that*
+    // resource. We do not bleed deck A's tabs into deck B's view.
+    const scopeKeyPart = scope ? `:scope:${scope.type}:${scope.id}` : "";
+    const OPEN_TABS_KEY = `agent-chat-open-tabs${keyPrefix}${scopeKeyPart}`;
     const [openTabIds, setOpenTabIds] = useState(() => {
         try {
             const saved = localStorage.getItem(OPEN_TABS_KEY);
@@ -422,8 +507,88 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
         return [];
     });
     const initializedRef = useRef(false);
+    // Rehydrate open tabs when the scope flips. Mirrors `persistedKeyRef` in
+    // `useChatThreads`: on a scope change we need to read the new key BEFORE
+    // the persistence effect writes the current (now-wrong) tab list under
+    // that new key.
+    const openTabsKeyRef = useRef(OPEN_TABS_KEY);
+    useEffect(() => {
+        if (openTabsKeyRef.current === OPEN_TABS_KEY)
+            return;
+        openTabsKeyRef.current = OPEN_TABS_KEY;
+        initializedRef.current = false;
+        try {
+            const saved = localStorage.getItem(OPEN_TABS_KEY);
+            if (saved) {
+                const parsed = JSON.parse(saved);
+                if (Array.isArray(parsed)) {
+                    for (const id of parsed)
+                        mountedTabsRef.current.add(id);
+                    setOpenTabIds(parsed);
+                    return;
+                }
+            }
+        }
+        catch { }
+        setOpenTabIds([]);
+    }, [OPEN_TABS_KEY]);
+    // Look up the active thread's actual scope from the list — when the
+    // user opens a chat from history that was scoped to a different
+    // resource, the badge should advertise that thread's binding, not
+    // necessarily the resource currently in the viewport. When the thread
+    // and the live prop refer to the same resource, prefer the prop's
+    // label so a rename or a deferred deck-title load shows up in the UI
+    // without waiting on the next persistence cycle.
+    const activeThreadScope = useMemo(() => {
+        if (!activeThreadId)
+            return null;
+        const t = threads.find((x) => x.id === activeThreadId);
+        const stored = t?.scope ?? null;
+        if (!stored)
+            return null;
+        if (scope && stored.type === scope.type && stored.id === scope.id) {
+            return { ...stored, label: scope.label || stored.label };
+        }
+        return stored;
+    }, [threads, activeThreadId, scope?.type, scope?.id, scope?.label]);
+    // Brief confirmation banner shown after detach. The chip itself disappears
+    // the instant scope clears, which the user described as "nothing different
+    // happened." We hold the confirmation in the same slot for ~2s so the
+    // detach is visually acknowledged and the user is pointed at History.
+    const [detachConfirmType, setDetachConfirmType] = useState(null);
+    const detachTimerRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            if (detachTimerRef.current)
+                clearTimeout(detachTimerRef.current);
+        };
+    }, []);
+    const handleDetachActiveThread = useCallback(() => {
+        if (!activeThreadId || !activeThreadScope)
+            return;
+        const type = activeThreadScope.type;
+        setDetachConfirmType(type);
+        if (detachTimerRef.current)
+            clearTimeout(detachTimerRef.current);
+        detachTimerRef.current = setTimeout(() => setDetachConfirmType(null), 2200);
+        detachThread(activeThreadId);
+    }, [activeThreadId, activeThreadScope, detachThread]);
+    // Other chats scoped to the active thread's resource (excluding the active
+    // thread itself). Sorted most-recent-first to match user expectation in the
+    // chip popover and empty-state addon.
+    const otherScopedThreads = useMemo(() => {
+        if (!activeThreadScope)
+            return [];
+        return threads
+            .filter((t) => t.id !== activeThreadId &&
+            t.scope?.type === activeThreadScope.type &&
+            t.scope?.id === activeThreadScope.id)
+            .sort((a, b) => b.updatedAt - a.updatedAt);
+    }, [threads, activeThreadId, activeThreadScope]);
     // 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 {
@@ -766,13 +931,18 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
         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]);
+    }, [closeTab, closeAllTabs, addTab]);
     const clearActiveTab = useCallback(() => {
         addTab();
     }, [addTab]);
@@ -909,7 +1079,8 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
         }
     }, [addTab, props.onExecModeChange]);
     const handleForkChat = useCallback(async (sourceThreadId) => {
-        const forkedId = await forkThread(sourceThreadId);
+        const sourceSnapshot = chatRefs.current.get(sourceThreadId)?.exportThreadSnapshot() ?? null;
+        const forkedId = await forkThread(sourceThreadId, sourceSnapshot);
         if (!forkedId)
             return;
         setOpenTabIds((prev) => {
@@ -994,8 +1165,8 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
                                                     (tab.id === focusParentId &&
                                                         activeTab?.parentThreadId === tab.id);
                                                 return (_jsxs("div", { ref: isActive ? activeTabRefCb : undefined, className: cn("agent-tab relative flex items-center rounded-md text-[11px] font-medium shrink-0 max-w-[130px]", isActive
-                                                        ? "bg-accent text-foreground"
-                                                        : "text-muted-foreground hover:text-foreground hover:bg-accent"), children: [_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-left", children: [_jsx("span", { className: "truncate pr-1", children: tab.label }), tab.status === "running" && (_jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-muted-foreground/50 shrink-0 animate-pulse" }))] }), _jsx("button", { type: "button", "aria-label": "Close tab", onClick: (e) => {
+                                                        ? "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-left", children: [_jsx("span", { className: "truncate pr-1", children: tab.label }), tab.status === "running" && (_jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-muted-foreground/50 shrink-0 animate-pulse" }))] }), _jsx("button", { type: "button", "aria-label": "Close tab", onClick: (e) => {
                                                                 e.stopPropagation();
                                                                 e.preventDefault();
                                                                 closeTab(tab.id);
@@ -1030,23 +1201,31 @@ export function MultiTabAssistantChat({ showTabBar = true, renderHeader, renderO
                                                             background: "linear-gradient(to right, transparent, hsl(var(--accent)) 40%)",
                                                         }, children: _jsx(IconX, { size: 12 }) })] }, tab.id)))] }) }))] }));
                     })()
-                    : null, _jsxs("div", { className: "relative flex-1 flex flex-col min-h-0", children: [renderOverlay ? renderOverlay(headerProps) : null, showHistory && (_jsx(HistoryPopover, { threads: threads, openTabIds: new Set(openTabIds), activeThreadId: activeThreadId, onSelect: openFromHistory, onClose: () => setShowHistory(false), onSearch: searchThreads })), helpVisible && _jsx(HelpPopover, { onClose: () => setHelpVisible(false) }), [...new Set(openTabIds)]
+                    : null, _jsxs("div", { className: "relative flex-1 flex flex-col min-h-0", children: [renderOverlay ? renderOverlay(headerProps) : null, !contentHidden &&
+                        (activeThreadScope && activeThreadId ? (_jsx(ScopeBadge, { scope: activeThreadScope, currentScope: scope, onDetach: handleDetachActiveThread, otherScopedThreads: otherScopedThreads, activeThreadId: activeThreadId, openTabIds: new Set(openTabIds), onSelectThread: openFromHistory })) : detachConfirmType ? (_jsx(DetachConfirmationBanner, {})) : null), showHistory && (_jsx(HistoryPopover, { threads: threads, openTabIds: new Set(openTabIds), activeThreadId: activeThreadId, currentScope: scope, onSelect: openFromHistory, onClose: () => setShowHistory(false), onSearch: searchThreads })), helpVisible && _jsx(HelpPopover, { onClose: () => setHelpVisible(false) }), [...new Set(openTabIds)]
                         .filter((tabId) => tabId === activeThreadId || mountedTabsRef.current.has(tabId))
                         .map((tabId) => {
                         const modelSelection = resolveThreadModelSelection(tabId);
+                        const tabThread = threads.find((thread) => thread.id === tabId);
+                        const tabScope = tabThread?.scope ??
+                            (tabId === activeThreadId ? activeThreadScope : null);
                         return (_jsxs("div", { className: "flex-1 min-h-0 flex-col", style: {
                                 display: contentHidden || tabId !== activeThreadId ? "none" : "flex",
                             }, children: [_jsx(RunStuckBanner, { threadId: tabId, apiUrl: apiUrl, onRetry: () => {
                                         const handle = chatRefs.current.get(tabId);
                                         handle?.sendMessage("Continue from where you left off and finish my last request. Do not repeat completed work.");
-                                    } }), _jsx(AssistantChat, { ...props, ref: (handle) => {
+                                    } }), _jsx(AssistantChat, { ...props, emptyStateText: tabScope?.label && tabId === activeThreadId
+                                        ? `Ask about ${tabScope.label}`
+                                        : props.emptyStateText, emptyStateAddon: tabId === activeThreadId &&
+                                        tabScope &&
+                                        otherScopedThreads.length > 0 ? (_jsx(PreviousScopedChatsHint, { scope: tabScope, threads: otherScopedThreads, onSelectThread: openFromHistory })) : undefined, ref: (handle) => {
                                         if (handle) {
                                             chatRefs.current.set(tabId, handle);
                                         }
                                         else {
                                             chatRefs.current.delete(tabId);
                                         }
-                                    }, threadId: tabId, tabId: tabId, apiUrl: apiUrl, isNewThread: newThreadIds.current.has(tabId) || isNewThread(tabId), onMessageCountChange: (count) => setMessageCounts((prev) => prev[tabId] === count
+                                    }, threadId: tabId, tabId: tabId, browserTabId: browserTabId, contextScope: tabScope, apiUrl: apiUrl, isNewThread: newThreadIds.current.has(tabId) || isNewThread(tabId), onMessageCountChange: (count) => setMessageCounts((prev) => prev[tabId] === count
                                         ? prev
                                         : { ...prev, [tabId]: count }), onSaveThread: handleSaveThread, onGenerateTitle: handleGenerateTitle, onSlashCommand: handleSlashCommand, selectedModel: modelSelection?.model, selectedEngine: modelSelection?.engine, selectedEffort: modelSelection?.effort ?? "auto", defaultModel: defaultModel, availableModels: availableModels, onModelChange: handleModelChange, onEffortChange: handleEffortChange, onForkChat: () => handleForkChat(tabId) })] }, tabId));
                     })] })] }));