@agent-native/core 0.103.1 → 0.105.0

package/corpus/core/src/client/AgentPanel.tsx

@@ -220,7 +220,7 @@ type AgentPanelStyle = React.CSSProperties & {
   "--agent-sidebar-width"?: string;
 };
 const AGENT_PANEL_HEADER_CLASS =
-  "agent-native-shell-topbar relative z-[240] flex h-12 shrink-0 items-center justify-between gap-2 border-b border-border";
+  "agent-native-shell-topbar relative z-[240] flex h-12 shrink-0 items-center justify-between gap-2";
 const AGENT_PANEL_HEADER_STYLE = {
   paddingLeft: 8,
   paddingRight: 8,
@@ -422,6 +422,12 @@ export function shouldShowAgentPanelChatTabBar(
   return mainTabs.length > 1 || hasSubTabs;
 }
 
+export function shouldShowAgentPanelSidebarChatTabs(
+  tabs: MultiTabAssistantChatHeaderProps["tabs"],
+) {
+  return tabs.filter((tab) => !tab.parentThreadId).length > 1;
+}
+
 export function shouldShowAgentPanelPageNewChatButton(
   tabs: MultiTabAssistantChatHeaderProps["tabs"],
   activeTabId: string,
@@ -588,16 +594,9 @@ export interface AgentPanelProps extends Omit<
   storageKey?: string;
   /** Restore the previously active chat thread on mount. Default: true. */
   restoreActiveThread?: boolean;
-  /**
-   * Bind the chat to a specific resource (deck, design, dashboard, ...).
-   * When set, chats started inside the panel inherit this scope and tuck
-   * away when the user leaves that resource. General chats stay visible
-   * across resource navigation. Scoped chats get a context badge with a
-   * Detach escape hatch. Templates compute this from the current route —
-   * see the `Layout` files for each template.
-   */
+  /** Ambient resource context rendered as a composer chip. */
   scope?: import("./use-chat-threads.js").ChatThreadScope | null;
-  /** Show the compact scope chip above the composer. Default: true. */
+  /** @deprecated Scope context now appears inside the composer. */
   showScopeBadge?: MultiTabAssistantChatProps["showScopeBadge"];
   /** Stable browser tab id used for tab-scoped app-state context. */
   browserTabId?: string;
@@ -1230,7 +1229,7 @@ function AgentPanelInner({
             />
           }
         />
-        {!onCollapse && mode === "chat" && (
+        {mode === "chat" && (
           <IconTooltip content={t("agentPanel.newChat")}>
             <button
               onClick={addTab}
@@ -1567,147 +1566,289 @@ function AgentPanelInner({
       closeAllTabs,
       showHistory,
       toggleHistory,
-    }: MultiTabAssistantChatHeaderProps) => (
-      <div
-        className="agent-sidebar-chat-header flex flex-col shrink-0"
-        data-agent-sidebar-chat-header={onCollapse ? "" : undefined}
-        data-agent-sidebar-chat-header-active={
-          headerMenuOpen || feedbackOpen ? "" : undefined
-        }
-      >
-        {/* Top bar: mode buttons + actions */}
+    }: MultiTabAssistantChatHeaderProps) => {
+      const { activeTab, childTabs, focusParentId, hasSubTabs, mainTabs } =
+        getAgentPanelChatTabGroups(tabs, activeTabId);
+      const showSidebarChatTabs =
+        Boolean(onCollapse) &&
+        mode === "chat" &&
+        shouldShowAgentPanelSidebarChatTabs(tabs);
+
+      return (
         <div
-          className={AGENT_PANEL_HEADER_CLASS}
-          style={AGENT_PANEL_HEADER_STYLE}
+          className="agent-sidebar-chat-header flex flex-col shrink-0"
+          data-agent-sidebar-chat-header={onCollapse ? "" : undefined}
+          data-agent-sidebar-chat-header-active={
+            headerMenuOpen || feedbackOpen ? "" : undefined
+          }
         >
-          <div className="flex min-w-0 flex-1 items-center gap-1 overflow-hidden">
-            {shouldShowAgentPanelModeButtons(Boolean(onCollapse))
-              ? renderModeButtons(mode)
-              : null}
-          </div>
-          <div className="flex items-center gap-0.5">
-            {renderHeaderActions({
-              activeChatSessionId: activeTabId,
-              activeTabId,
-              activeTabMessageCount,
-              addTab,
-              clearActiveTab,
-              closeAllTabs,
-              closeOtherTabs,
-              closeTab,
-              showHistory,
-              tabs,
-              toggleHistory,
-            })}
+          {/* Top bar: chat tabs/mode buttons + actions */}
+          <div
+            className={cn(
+              AGENT_PANEL_HEADER_CLASS,
+              !onCollapse && "border-b border-border",
+            )}
+            style={AGENT_PANEL_HEADER_STYLE}
+          >
+            <div className="flex min-w-0 flex-1 items-center gap-1 overflow-hidden">
+              {showSidebarChatTabs ? (
+                <div className="agent-tabs-scroll flex min-w-0 flex-1 items-center gap-0.5 overflow-x-auto">
+                  {mainTabs.map((tab) => {
+                    const isActive =
+                      tab.id === activeTabId ||
+                      (tab.id === focusParentId &&
+                        activeTab?.parentThreadId === tab.id);
+                    return (
+                      <div
+                        key={tab.id}
+                        role="button"
+                        tabIndex={0}
+                        ref={isActive ? activeTabRefCb : undefined}
+                        onClick={() => setActiveTabId(tab.id)}
+                        onKeyDown={activateOnKeyDown(() =>
+                          setActiveTabId(tab.id),
+                        )}
+                        className={cn(
+                          "agent-tab relative flex shrink-0 items-center gap-1 rounded-md px-2.5 py-1.5 text-[11px] font-medium cursor-pointer max-w-[150px]",
+                          isActive
+                            ? "bg-accent text-foreground"
+                            : "text-muted-foreground hover:bg-accent hover:text-foreground",
+                        )}
+                      >
+                        <span className="truncate pe-1">{tab.label}</span>
+                        {tab.status === "running" && (
+                          <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/50 animate-pulse" />
+                        )}
+                        <button
+                          type="button"
+                          aria-label="Close tab"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            closeTab(tab.id);
+                          }}
+                          className="agent-tab-close flex items-center justify-end text-muted-foreground hover:text-foreground"
+                          style={{
+                            position: "absolute",
+                            right: 0,
+                            top: 0,
+                            bottom: 0,
+                            width: 28,
+                            paddingRight: 6,
+                            borderRadius: "0 6px 6px 0",
+                            background:
+                              "linear-gradient(to right, transparent, hsl(var(--accent)) 40%)",
+                          }}
+                        >
+                          <IconX size={10} />
+                        </button>
+                      </div>
+                    );
+                  })}
+                </div>
+              ) : shouldShowAgentPanelModeButtons(Boolean(onCollapse)) ? (
+                renderModeButtons(mode)
+              ) : null}
+            </div>
+            <div className="flex items-center gap-0.5">
+              {renderHeaderActions({
+                activeChatSessionId: activeTabId,
+                activeTabId,
+                activeTabMessageCount,
+                addTab,
+                clearActiveTab,
+                closeAllTabs,
+                closeOtherTabs,
+                closeTab,
+                showHistory,
+                tabs,
+                toggleHistory,
+              })}
+            </div>
           </div>
-        </div>
-        {mode === "chat" && chatNotice ? (
-          <div className="border-b border-border">{chatNotice}</div>
-        ) : null}
-        {/* Tab bar: only visible when there is actually more than one tab to switch between. */}
-        {showTabBar &&
-          (mode === "chat" || (mode === "cli" && canUseCodeTools)) &&
-          (() => {
-            const {
-              activeTab,
-              childTabs,
-              focusParentId,
-              hasSubTabs,
-              mainTabs,
-            } = getAgentPanelChatTabGroups(tabs, activeTabId);
-            const showChatTabBar =
-              mode === "chat" &&
-              shouldShowAgentPanelChatTabBar(tabs, activeTabId);
-            const showCliTabBar =
-              mode === "cli" &&
-              canUseCodeTools &&
-              shouldShowAgentPanelCliTabBar(cliTabs);
-
-            if (!showChatTabBar && !showCliTabBar) return null;
-
-            return (
-              <>
-                <div className="flex items-center px-2 py-1 border-b border-border gap-0.5">
-                  <div className="agent-tabs-scroll flex items-center gap-0.5 min-w-0 overflow-x-auto flex-1">
-                    {mode === "chat"
-                      ? mainTabs.map((tab) => {
-                          // Highlight the parent tab if a child is active
-                          const isActive =
-                            tab.id === activeTabId ||
-                            (tab.id === focusParentId &&
-                              activeTab?.parentThreadId === tab.id);
-                          return (
-                            <div
-                              key={tab.id}
-                              role="button"
-                              tabIndex={0}
-                              ref={isActive ? activeTabRefCb : undefined}
-                              onClick={() => setActiveTabId(tab.id)}
-                              onKeyDown={activateOnKeyDown(() =>
-                                setActiveTabId(tab.id),
-                              )}
-                              className={cn(
-                                "agent-tab relative flex shrink-0 items-center gap-1 rounded-md px-2.5 py-1.5 text-[11px] font-medium cursor-pointer max-w-[150px]",
-                                isActive
-                                  ? "bg-accent text-foreground"
-                                  : "text-muted-foreground hover:bg-accent hover:text-foreground",
-                              )}
-                            >
-                              <span className="truncate pe-1">{tab.label}</span>
-                              {tab.status === "running" && (
-                                <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/50 animate-pulse" />
-                              )}
-                              <button
-                                type="button"
-                                aria-label="Close tab"
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  closeTab(tab.id);
-                                }}
-                                className="agent-tab-close flex items-center justify-end text-muted-foreground hover:text-foreground"
-                                style={{
-                                  position: "absolute",
-                                  right: 0,
-                                  top: 0,
-                                  bottom: 0,
-                                  width: 28,
-                                  paddingRight: 6,
-                                  borderRadius: "0 6px 6px 0",
-                                  background:
-                                    "linear-gradient(to right, transparent, hsl(var(--accent)) 40%)",
-                                }}
+          {mode === "chat" && chatNotice ? (
+            <div className="border-b border-border">{chatNotice}</div>
+          ) : null}
+          {/* Tab bar: only visible when there is actually more than one tab to switch between. */}
+          {showTabBar &&
+            (mode === "chat" || (mode === "cli" && canUseCodeTools)) &&
+            (() => {
+              const showChatTabBar =
+                mode === "chat" &&
+                shouldShowAgentPanelChatTabBar(tabs, activeTabId);
+              const showCliTabBar =
+                mode === "cli" &&
+                canUseCodeTools &&
+                shouldShowAgentPanelCliTabBar(cliTabs);
+
+              if (!showChatTabBar && !showCliTabBar) return null;
+
+              return (
+                <>
+                  {!showSidebarChatTabs && (
+                    <div className="flex items-center px-2 py-1 border-b border-border gap-0.5">
+                      <div className="agent-tabs-scroll flex items-center gap-0.5 min-w-0 overflow-x-auto flex-1">
+                        {mode === "chat"
+                          ? mainTabs.map((tab) => {
+                              // Highlight the parent tab if a child is active
+                              const isActive =
+                                tab.id === activeTabId ||
+                                (tab.id === focusParentId &&
+                                  activeTab?.parentThreadId === tab.id);
+                              return (
+                                <div
+                                  key={tab.id}
+                                  role="button"
+                                  tabIndex={0}
+                                  ref={isActive ? activeTabRefCb : undefined}
+                                  onClick={() => setActiveTabId(tab.id)}
+                                  onKeyDown={activateOnKeyDown(() =>
+                                    setActiveTabId(tab.id),
+                                  )}
+                                  className={cn(
+                                    "agent-tab relative flex shrink-0 items-center gap-1 rounded-md px-2.5 py-1.5 text-[11px] font-medium cursor-pointer max-w-[150px]",
+                                    isActive
+                                      ? "bg-accent text-foreground"
+                                      : "text-muted-foreground hover:bg-accent hover:text-foreground",
+                                  )}
+                                >
+                                  <span className="truncate pe-1">
+                                    {tab.label}
+                                  </span>
+                                  {tab.status === "running" && (
+                                    <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/50 animate-pulse" />
+                                  )}
+                                  <button
+                                    type="button"
+                                    aria-label="Close tab"
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      closeTab(tab.id);
+                                    }}
+                                    className="agent-tab-close flex items-center justify-end text-muted-foreground hover:text-foreground"
+                                    style={{
+                                      position: "absolute",
+                                      right: 0,
+                                      top: 0,
+                                      bottom: 0,
+                                      width: 28,
+                                      paddingRight: 6,
+                                      borderRadius: "0 6px 6px 0",
+                                      background:
+                                        "linear-gradient(to right, transparent, hsl(var(--accent)) 40%)",
+                                    }}
+                                  >
+                                    <IconX size={10} />
+                                  </button>
+                                </div>
+                              );
+                            })
+                          : cliTabs.map((id, i) => (
+                              <div
+                                key={id}
+                                role="button"
+                                tabIndex={0}
+                                ref={
+                                  id === activeCliTab
+                                    ? activeTabRefCb
+                                    : undefined
+                                }
+                                onClick={() => setActiveCliTab(id)}
+                                onKeyDown={activateOnKeyDown(() =>
+                                  setActiveCliTab(id),
+                                )}
+                                className={cn(
+                                  "agent-tab relative flex shrink-0 items-center gap-1 rounded-md px-2.5 py-1.5 text-[11px] font-medium cursor-pointer",
+                                  id === activeCliTab
+                                    ? "bg-accent text-foreground"
+                                    : "text-muted-foreground hover:bg-accent hover:text-foreground",
+                                )}
                               >
-                                <IconX size={10} />
-                              </button>
-                            </div>
-                          );
-                        })
-                      : cliTabs.map((id, i) => (
+                                <span>Terminal {i + 1}</span>
+                                <button
+                                  type="button"
+                                  aria-label="Close tab"
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    closeCliTab(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%)",
+                                  }}
+                                >
+                                  <IconX size={10} />
+                                </button>
+                              </div>
+                            ))}
+                      </div>
+                    </div>
+                  )}
+                  {/* Sub-agent tab row — shown when the active context has children */}
+                  {mode === "chat" && hasSubTabs && (
+                    <div
+                      className={cn(
+                        "flex items-center px-2 py-0.5 gap-0.5 bg-muted/30",
+                        !showSidebarChatTabs && "border-b border-border",
+                      )}
+                    >
+                      <div className="agent-tabs-scroll flex items-center gap-0.5 min-w-0 overflow-x-auto flex-1">
+                        <div
+                          role="button"
+                          tabIndex={0}
+                          onClick={() => setActiveTabId(focusParentId)}
+                          onKeyDown={activateOnKeyDown(() =>
+                            setActiveTabId(focusParentId),
+                          )}
+                          className={cn(
+                            "flex shrink-0 items-center gap-1 rounded-md px-2 py-1 text-[10px] font-medium cursor-pointer",
+                            activeTabId === focusParentId
+                              ? "bg-accent text-foreground"
+                              : "text-muted-foreground hover:bg-accent hover:text-foreground",
+                          )}
+                        >
+                          Main
+                        </div>
+                        {childTabs.map((tab) => (
                           <div
-                            key={id}
+                            key={tab.id}
                             role="button"
                             tabIndex={0}
                             ref={
-                              id === activeCliTab ? activeTabRefCb : undefined
+                              tab.id === activeTabId
+                                ? activeTabRefCb
+                                : undefined
                             }
-                            onClick={() => setActiveCliTab(id)}
+                            onClick={() => setActiveTabId(tab.id)}
                             onKeyDown={activateOnKeyDown(() =>
-                              setActiveCliTab(id),
+                              setActiveTabId(tab.id),
                             )}
                             className={cn(
-                              "agent-tab relative flex shrink-0 items-center gap-1 rounded-md px-2.5 py-1.5 text-[11px] font-medium cursor-pointer",
-                              id === activeCliTab
+                              "agent-tab relative flex shrink-0 items-center gap-1 rounded-md px-2 py-1 text-[10px] font-medium cursor-pointer max-w-[140px]",
+                              tab.id === activeTabId
                                 ? "bg-accent text-foreground"
                                 : "text-muted-foreground hover:bg-accent hover:text-foreground",
                             )}
                           >
-                            <span>Terminal {i + 1}</span>
+                            <span className="truncate pe-1">
+                              {tab.subAgentName || tab.label}
+                            </span>
+                            {tab.status === "running" && (
+                              <span className="h-1 w-1 shrink-0 rounded-full bg-muted-foreground/50 animate-pulse" />
+                            )}
                             <button
                               type="button"
                               aria-label="Close tab"
                               onClick={(e) => {
                                 e.stopPropagation();
-                                closeCliTab(id);
+                                closeTab(tab.id);
                               }}
                               className="agent-tab-close flex items-center justify-end text-muted-foreground hover:text-foreground"
                               style={{
@@ -1715,96 +1856,26 @@ function AgentPanelInner({
                                 right: 0,
                                 top: 0,
                                 bottom: 0,
-                                width: 28,
-                                paddingRight: 6,
+                                width: 24,
+                                paddingRight: 4,
                                 borderRadius: "0 6px 6px 0",
                                 background:
                                   "linear-gradient(to right, transparent, hsl(var(--accent)) 40%)",
                               }}
                             >
-                              <IconX size={10} />
+                              <IconX size={8} />
                             </button>
                           </div>
                         ))}
-                  </div>
-                </div>
-                {/* Sub-agent tab row — shown when the active context has children */}
-                {mode === "chat" && hasSubTabs && (
-                  <div className="flex items-center px-2 py-0.5 border-b border-border gap-0.5 bg-muted/30">
-                    <div className="agent-tabs-scroll flex items-center gap-0.5 min-w-0 overflow-x-auto flex-1">
-                      <div
-                        role="button"
-                        tabIndex={0}
-                        onClick={() => setActiveTabId(focusParentId)}
-                        onKeyDown={activateOnKeyDown(() =>
-                          setActiveTabId(focusParentId),
-                        )}
-                        className={cn(
-                          "flex shrink-0 items-center gap-1 rounded-md px-2 py-1 text-[10px] font-medium cursor-pointer",
-                          activeTabId === focusParentId
-                            ? "bg-accent text-foreground"
-                            : "text-muted-foreground hover:bg-accent hover:text-foreground",
-                        )}
-                      >
-                        Main
                       </div>
-                      {childTabs.map((tab) => (
-                        <div
-                          key={tab.id}
-                          role="button"
-                          tabIndex={0}
-                          ref={
-                            tab.id === activeTabId ? activeTabRefCb : undefined
-                          }
-                          onClick={() => setActiveTabId(tab.id)}
-                          onKeyDown={activateOnKeyDown(() =>
-                            setActiveTabId(tab.id),
-                          )}
-                          className={cn(
-                            "agent-tab relative flex shrink-0 items-center gap-1 rounded-md px-2 py-1 text-[10px] font-medium cursor-pointer max-w-[140px]",
-                            tab.id === activeTabId
-                              ? "bg-accent text-foreground"
-                              : "text-muted-foreground hover:bg-accent hover:text-foreground",
-                          )}
-                        >
-                          <span className="truncate pe-1">
-                            {tab.subAgentName || tab.label}
-                          </span>
-                          {tab.status === "running" && (
-                            <span className="h-1 w-1 shrink-0 rounded-full bg-muted-foreground/50 animate-pulse" />
-                          )}
-                          <button
-                            type="button"
-                            aria-label="Close tab"
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              closeTab(tab.id);
-                            }}
-                            className="agent-tab-close flex items-center justify-end text-muted-foreground hover:text-foreground"
-                            style={{
-                              position: "absolute",
-                              right: 0,
-                              top: 0,
-                              bottom: 0,
-                              width: 24,
-                              paddingRight: 4,
-                              borderRadius: "0 6px 6px 0",
-                              background:
-                                "linear-gradient(to right, transparent, hsl(var(--accent)) 40%)",
-                            }}
-                          >
-                            <IconX size={8} />
-                          </button>
-                        </div>
-                      ))}
                     </div>
-                  </div>
-                )}
-              </>
-            );
-          })()}
-      </div>
-    ),
+                  )}
+                </>
+              );
+            })()}
+        </div>
+      );
+    },
     [
       mode,
       renderHeaderActions,
@@ -2034,15 +2105,23 @@ const FULLSCREEN_CHAT_COLUMN_MAX_PX = 684;
 function ResizeHandle({
   position,
   onDrag,
+  onResizeStart,
+  onResizeEnd,
 }: {
   position: "left" | "right";
   onDrag: (delta: number) => void;
+  onResizeStart: () => void;
+  onResizeEnd: () => void;
 }) {
   const ref = useRef<HTMLDivElement>(null);
   const dragging = useRef(false);
   const lastX = useRef(0);
   const onDragRef = useRef(onDrag);
+  const onResizeStartRef = useRef(onResizeStart);
+  const onResizeEndRef = useRef(onResizeEnd);
   onDragRef.current = onDrag;
+  onResizeStartRef.current = onResizeStart;
+  onResizeEndRef.current = onResizeEnd;
   const GRAB_ZONE = 5; // px on each side of the border
 
   // All drag logic runs via document-level listeners so the 1px-wide
@@ -2059,6 +2138,7 @@ function ResizeHandle({
       e.preventDefault();
       dragging.current = true;
       lastX.current = e.clientX;
+      onResizeStartRef.current();
       document.body.style.cursor = "col-resize";
       document.body.style.userSelect = "none";
     }
@@ -2088,6 +2168,7 @@ function ResizeHandle({
       dragging.current = false;
       document.body.style.cursor = "";
       document.body.style.userSelect = "";
+      onResizeEndRef.current();
     }
 
     // mouseup covers the normal release-inside-the-page case; window blur
@@ -2113,6 +2194,7 @@ function ResizeHandle({
       // selection app-wide until reload.
       document.body.style.userSelect = "";
       dragging.current = false;
+      onResizeEndRef.current();
     };
   }, [position]);
 
@@ -2512,7 +2594,8 @@ export interface AgentChatSurfaceProps extends AgentPanelProps {
   /**
    * Layout treatment for the reusable chat surface. Use "page" when rendering
    * chat as the primary route content instead of inside the sidebar shell.
-   * Default: "panel".
+   * Default: "panel". Inline header and chat-tab chrome are hidden by default;
+   * pass `showHeader` or `showTabBar` to opt into those controls.
    */
   mode?: AgentChatSurfaceMode;
   /**
@@ -2541,13 +2624,15 @@ export function shouldAllowAgentChatSurfaceSettingsMode(
  * Reusable chat surface backed by AgentPanel internals.
  *
  * This gives page-level routes the same tabbed conversations, composer,
- * model controls, scoped chat behavior, and recovery boundary used by the
+ * model controls, context chips, and recovery boundary used by the
  * sidebar without introducing a second chat implementation.
  */
 export function AgentChatSurface({
   mode = "panel",
   className,
   defaultMode = "chat",
+  showHeader = false,
+  showTabBar = false,
   isFullscreen,
   style,
   chatViewTransition = false,
@@ -2556,12 +2641,14 @@ export function AgentChatSurface({
 }: AgentChatSurfaceProps) {
   const pageMode = mode === "page";
   const defaultShowPageNewChatButton =
-    shouldDefaultAgentChatSurfacePageNewChatButton(mode, props.showTabBar);
+    shouldDefaultAgentChatSurfacePageNewChatButton(mode, showTabBar);
 
   return (
     <AgentPanel
       {...props}
       defaultMode={defaultMode}
+      showHeader={showHeader}
+      showTabBar={showTabBar}
       isFullscreen={isFullscreen ?? pageMode}
       allowSettingsMode={shouldAllowAgentChatSurfaceSettingsMode(
         mode,
@@ -2626,14 +2713,9 @@ export interface AgentSidebarProps {
   openOnChatRunning?: boolean;
   /** Override the fullscreen menu action, for templates with a chat-first page. */
   onFullscreenRequest?: () => void;
-  /**
-   * Bind chats to a resource. When set, every chat started here is
-   * scoped to `{type, id}`, the tab bar/history partition by that scope,
-   * and a "Working on {label}" badge appears with a Detach option.
-   * Templates compute this from the active route (see template layouts).
-   */
+  /** Ambient resource context rendered as a composer chip. */
   scope?: import("./use-chat-threads.js").ChatThreadScope | null;
-  /** Show the compact scope chip above the composer. Default: true. */
+  /** @deprecated Scope context now appears inside the composer. */
   showScopeBadge?: MultiTabAssistantChatProps["showScopeBadge"];
   /** Stable browser tab id used for tab-scoped app-state context. */
   browserTabId?: string;
@@ -2680,6 +2762,7 @@ export function AgentSidebar({
   );
   const [presentationMode, setPresentationMode] = useState(false);
   const [width, setWidth] = useState(initialWidth);
+  const [isResizing, setIsResizing] = useState(false);
   const [fullscreen, setFullscreen] = useState(() => {
     // Force-disable on mobile: a Claude-style centered column makes no sense
     // when the sidebar already covers most of the viewport.
@@ -3046,6 +3129,8 @@ export function AgentSidebar({
       return next;
     });
   }, []);
+  const handleResizeStart = useCallback(() => setIsResizing(true), []);
+  const handleResizeEnd = useCallback(() => setIsResizing(false), []);
 
   const isLeft = position === "left";
   // Fullscreen only applies on desktop — on mobile the existing overlay is
@@ -3161,7 +3246,12 @@ export function AgentSidebar({
   const sidebar = shouldRenderPanel ? (
     <>
       {showResizeHandle && !isLeft && (
-        <ResizeHandle position={position} onDrag={handleDrag} />
+        <ResizeHandle
+          position={position}
+          onDrag={handleDrag}
+          onResizeStart={handleResizeStart}
+          onResizeEnd={handleResizeEnd}
+        />
       )}
       <div
         className={cn(
@@ -3179,6 +3269,7 @@ export function AgentSidebar({
         data-agent-sidebar-layout={panelLayout}
         data-agent-sidebar-position={position}
         data-agent-sidebar-state={panelOpen ? "open" : "closed"}
+        data-agent-sidebar-resizing={isResizing ? "true" : undefined}
         style={
           chatViewTransition
             ? getAgentChatViewTransitionStyle(panelStyle)
@@ -3214,7 +3305,12 @@ export function AgentSidebar({
         </div>
       </div>
       {showResizeHandle && isLeft && (
-        <ResizeHandle position={position} onDrag={handleDrag} />
+        <ResizeHandle
+          position={position}
+          onDrag={handleDrag}
+          onResizeStart={handleResizeStart}
+          onResizeEnd={handleResizeEnd}
+        />
       )}
     </>
   ) : null;
@@ -3224,6 +3320,7 @@ export function AgentSidebar({
       <div
         className="agent-sidebar-shell flex min-w-0 flex-1 h-screen overflow-hidden"
         data-agent-sidebar-position={position}
+        data-agent-sidebar-resizing={isResizing ? "true" : undefined}
       >
         <AgentNativeRouteWarmup />
         {/* Mobile backdrop — tapping it closes the sidebar */}
@@ -3256,6 +3353,7 @@ export function AgentSidebar({
               ? "open"
               : "closed"
           }
+          data-agent-sidebar-resizing={isResizing ? "true" : undefined}
         >
           {/* Screen-refresh key: the agent's `refresh-screen` tool bumps this
             counter, remounting only the main content subtree so it re-fetches