@steerable/agent-shell-web 0.6.63 → 0.6.65

package/src/components/chat/TaskOutcomeCards.tsx

@@ -42,7 +42,7 @@ export function TaskOutcomeCards({ tasks, onInspect, onDismiss }: TaskOutcomeCar
       ))}
       {overflow > 0 && (
         <div className="px-1 text-[11px] text-agent-muted-foreground">
-          {t('{count} more background tasks finished. See the tasks button in the title bar.', {
+          {t('{count} more background tasks finished. See Chat resources in the title bar.', {
             count: overflow,
           })}
         </div>
@@ -103,7 +103,7 @@ function TaskOutcomeCard({
             <span className="min-w-0 truncate font-mono text-[10px]">
               {task.worktreeBranch}
             </span>
-            <span>{t('Awaiting merge. Handle it from the tasks button in the title bar.')}</span>
+            <span>{t('Awaiting merge. Handle it from Chat resources in the title bar.')}</span>
           </div>
         )}
       </div>

package/src/layouts/AgentLayout.tsx

@@ -3,6 +3,7 @@ import { Outlet, useParams } from 'react-router-dom';
 import { LuPanelLeftOpen } from 'react-icons/lu';
 import { AgentSidebar } from '@/components/AgentSidebar';
 import { TerminalPanel } from '@/components/TerminalPanel';
+import { RightPanelTabBar } from '@/layouts/RightPanelTabBar';
 import { TaskProcessPanel, type InspectedTask } from '@/components/chat/TaskProcessPanel';
 import { AskUserPromptProvider } from '@/components/chat/AskUserPromptProvider';
 import { ApprovalPromptProvider } from '@/components/chat/ApprovalPromptProvider';
@@ -18,6 +19,21 @@ import {
 } from '@/hooks/useChatsAndAgents';
 import { hostToolChrome, sanitizeRightPanelKind, settingsChrome } from '@/lib/host-tools';
 import { t } from '@/i18n';
+import {
+  closeRightPanelTab,
+  collapseRightPanel,
+  expandRightPanel,
+  openRightPanelTab,
+  parseRightPanelMap,
+  revealRightPanelTab,
+  toggleRightPanelEntry,
+  type RightPanelMap,
+  type RightPanelTabs,
+} from '@/layouts/right-panel-tabs';
+import { subscribeChatSlotRequests } from '@/layouts/request-chat-slot';
+
+export { parseRightPanelMap };
+export type { RightPanelMap, RightPanelTabs };
 
 /**
  * AgentLayout wraps `/agent`, `/agent/:chatId`, and `/` (default) with a
@@ -70,53 +86,9 @@ const DEFAULT_TERMINAL_WIDTH = 520;
 const MIN_TERMINAL_WIDTH = 360;
 const MAX_TERMINAL_WIDTH = 960;
 
-/**
- * 右侧栏位状态：null = 都不打开，'terminal' = 终端，其余字符串 = 包注册的
- * 聊天页槽位（chatSlots，如文档包的预览栏位）。栏位同一时刻只开一个
- * （互斥规则在本布局，不在包）。
- */
+/** 当前看见的标签。null = 这一侧没有打开的标签。 */
 export type RightPanelState = string | null;
 
-/** 每个会话各自的右侧栏位状态：chatId → RightPanelState（null 不落盘）。 */
-export type RightPanelMap = Record<string, string>;
-
-/**
- * 解析持久化的「会话 → 右侧栏位」映射。
- *
- * 兼容三种历史格式：
- *   - 新格式：{"<chatId>": "terminal" | "<slotId>"}；
- *   - 旧格式：整个值就是单个字符串（'' / 'terminal' / slotId）→ 迁到当前会话；
- *   - 更老：只记录终端是否打开过的布尔 key。
- * 无效的会话 / 栏位值会被丢弃，避免脏数据把某个会话卡在打不开的面板上。
- */
-export function parseRightPanelMap(options: {
-  raw: string | null;
-  legacyTerminalOpen: string | null;
-  chatId: string | null;
-  isValidValue: (value: string) => boolean;
-}): RightPanelMap {
-  const { raw, legacyTerminalOpen, chatId, isValidValue } = options;
-  if (raw !== null) {
-    if (raw === '') return {};
-    try {
-      const parsed = JSON.parse(raw) as unknown;
-      if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
-        const map: RightPanelMap = {};
-        for (const [key, value] of Object.entries(parsed as Record<string, unknown>)) {
-          if (typeof value === 'string' && isValidValue(value)) map[key] = value;
-        }
-        return map;
-      }
-    } catch {
-      // 旧格式：整个 key 就是单个值。
-      if (isValidValue(raw) && chatId) return { [chatId]: raw };
-    }
-    return {};
-  }
-  if (legacyTerminalOpen === '1' && chatId) return { [chatId]: 'terminal' };
-  return {};
-}
-
 /** 从聊天页外把一段内容作为普通用户消息发进当前会话（包槽位的 fallback 通道）。 */
 export type ChatMessageSender = (input: {
   content: string;
@@ -131,10 +103,12 @@ export type AgentOutletContext = UseChatsAndAgentsResult & {
   inspectTask: (task: InspectedTask) => void;
   /** 包槽位（如文档预览）：入口渲染在 chat 标题栏，状态按会话隔离。 */
   chatSlots: readonly PackChatSlotContribution[];
-  /** 当前会话打开的右侧栏位（null = 都关着）。 */
+  /** 当前会话正在看的右侧标签（null = 整栏关着或收起）。 */
   rightPanel: RightPanelState;
-  /** 顶栏入口：点已打开的关闭，点另一个直接切换。 */
-  onToggleChatSlot: (slotId: string) => void;
+  /** 当前会话已经打开且正在显示的标签，顺序与标签条一致。 */
+  openPanelIds: readonly string[];
+  /** 标题栏开关：整栏收着或空着时打开。 */
+  onOpenRightPanel: () => void;
 };
 
 function AgentLayoutContent() {
@@ -328,17 +302,13 @@ function AgentLayoutContent() {
   }, []);
 
   // ───── Right-side panel (embedded column beside the chat content) ─────
-  // 终端与包槽位面板（如 PPT 预览）合并为同一栏位的互斥切换：
-  // null | 'terminal' | <slotId>。持久化到新 key；老版本只持久化终端打开
-  // 状态，首次读取时迁移。
+  // 终端与包槽位（PPT、Word、Markdown）共用一条标签。可以同时打开多个，
+  // 标签条切换当前看见的那一个。持久化按会话存标签列表；老的单值会迁成一个标签。
   const packChatSlots = getPackChatSlots();
 
   /**
-   * 右侧栏位状态按会话隔离：chatId → null | 'terminal' | <slotId>。
-   *
-   * 以前是单个全局值（localStorage 里存一个字符串），会话 1 打开预览会连带
-   * 影响会话 2。现在存成映射，每个会话独立；老的单值 key 读取时自动迁移到
-   * 当前会话。
+   * 右侧标签按会话隔离。以前是单个全局值，会话 1 打开预览会连带影响会话 2。
+   * 现在存成映射，每个会话独立；老的单值 key 读取时自动迁移到当前会话。
    */
   const readRightPanelMap = useCallback((): RightPanelMap => {
     const isValidValue = (value: string): boolean =>
@@ -351,9 +321,17 @@ function AgentLayoutContent() {
         isValidValue,
       });
       const sanitized: RightPanelMap = {};
-      for (const [id, value] of Object.entries(map)) {
-        const next = sanitizeRightPanelKind(value);
-        if (next) sanitized[id] = next;
+      for (const [id, entry] of Object.entries(map)) {
+        const tabs: string[] = [];
+        for (const tab of entry.tabs) {
+          const next = sanitizeRightPanelKind(tab);
+          if (next && !tabs.includes(next)) tabs.push(next);
+        }
+        if (tabs.length === 0) continue;
+        const active = tabs.includes(entry.active) ? entry.active : tabs[0]!;
+        sanitized[id] = entry.collapsed
+          ? { tabs, active, collapsed: true }
+          : { tabs, active };
       }
       return sanitized;
     } catch {
@@ -370,7 +348,12 @@ function AgentLayoutContent() {
     setRightPanelMap(readRightPanelMap());
   }, [readRightPanelMap]);
 
-  const rightPanel: RightPanelState = chatId ? rightPanelMap[chatId] ?? null : null;
+  const panelEntry: RightPanelTabs | null = chatId ? rightPanelMap[chatId] ?? null : null;
+  const panelOpen = panelEntry !== null && panelEntry.collapsed !== true;
+  const rightPanel: RightPanelState = panelOpen ? panelEntry.active : null;
+  const openPanelIds = panelOpen ? panelEntry.tabs : [];
+  // 自动展开 / 手动切换回调是挂载时注册的，直接读 state 会拿到过期闭包。
+  const panelEntryRef = useRef<RightPanelTabs | null>(panelEntry);
 
   const persistRightPanelMap = useCallback((map: RightPanelMap) => {
     try {
@@ -380,9 +363,10 @@ function AgentLayoutContent() {
     }
   }, []);
 
-  const setRightPanel = useCallback(
-    (next: RightPanelState) => {
+  const applyPanelEntry = useCallback(
+    (next: RightPanelTabs | null) => {
       if (!chatId) return;
+      panelEntryRef.current = next;
       setRightPanelMap((prev) => {
         const map = { ...prev };
         if (next === null) delete map[chatId];
@@ -394,29 +378,74 @@ function AgentLayoutContent() {
     [chatId, persistRightPanelMap],
   );
 
-  // 自动展开 / 手动切换回调是挂载时注册的，直接读 state 会拿到过期闭包，
-  // 所以用 ref 跟踪当前栏位状态（见下方同步 effect）。
-  const rightPanelRef = useRef<RightPanelState>(rightPanel);
-
   useEffect(() => {
-    rightPanelRef.current = rightPanel;
-  }, [rightPanel]);
+    panelEntryRef.current = panelEntry;
+  }, [panelEntry]);
 
-  const closeRightPanel = useCallback(() => {
-    setRightPanel(null);
-  }, [setRightPanel]);
+  const closePanelTab = useCallback(
+    (kind: string) => {
+      const current = panelEntryRef.current;
+      if (!current) return;
+      applyPanelEntry(closeRightPanelTab(current, kind));
+    },
+    [applyPanelEntry],
+  );
 
-  /** 顶栏 / 快捷键入口：点已打开的按钮关闭；点另一个按钮直接切换。
-      打开任一面板即离开任务 dock（栏位同一时刻只呈现一个内容）。 */
+  const activatePanelTab = useCallback(
+    (kind: string) => {
+      const current = panelEntryRef.current;
+      if (!current || !current.tabs.includes(kind)) return;
+      setInspectedTask(null);
+      if (current.active === kind) return;
+      applyPanelEntry({ tabs: current.tabs, active: kind });
+    },
+    [applyPanelEntry],
+  );
+
+  const openPanelTab = useCallback(
+    (kind: string) => {
+      const id = sanitizeRightPanelKind(kind);
+      if (!id) return;
+      if (id !== 'terminal' && !packChatSlots.some((slot) => slot.slotId === id)) return;
+      setInspectedTask(null);
+      applyPanelEntry(openRightPanelTab(panelEntryRef.current, id));
+    },
+    [applyPanelEntry, packChatSlots],
+  );
+
+  const expandRightSide = useCallback(() => {
+    const current = panelEntryRef.current;
+    if (current && current.tabs.length > 0) {
+      setInspectedTask(null);
+      applyPanelEntry(expandRightPanel(current));
+      return;
+    }
+    const firstSlot = packChatSlots
+      .map((slot) => sanitizeRightPanelKind(slot.slotId))
+      .find((id): id is string => id !== null);
+    const first = firstSlot ?? sanitizeRightPanelKind('terminal');
+    if (!first) return;
+    setInspectedTask(null);
+    applyPanelEntry({ tabs: [first], active: first });
+  }, [applyPanelEntry, packChatSlots]);
+
+  const collapseRightSide = useCallback(() => {
+    const current = panelEntryRef.current;
+    if (!current || current.tabs.length === 0) return;
+    setInspectedTask(null);
+    applyPanelEntry(collapseRightPanel(current));
+  }, [applyPanelEntry]);
+
+  /** 快捷键：没开就追加并显示，已开但不是当前就切过去，当前这个就关掉。整栏收着时改为打开。 */
   const toggleRightPanel = useCallback(
     (kind: string) => {
-      const raw: RightPanelState = rightPanelRef.current === kind ? null : kind;
-      const next = sanitizeRightPanelKind(raw);
-      rightPanelRef.current = next;
+      const id = sanitizeRightPanelKind(kind);
+      if (!id) return;
+      const next = toggleRightPanelEntry(panelEntryRef.current, id);
       if (next !== null) setInspectedTask(null);
-      setRightPanel(next);
+      applyPanelEntry(next);
     },
-    [setRightPanel],
+    [applyPanelEntry],
   );
 
   // Cmd+T from the app menu — wired in src/main.ts:createMenu (sends
@@ -480,20 +509,22 @@ function AgentLayoutContent() {
   const showTerminalFromTask = useCallback(() => {
     if (!hostToolChrome('terminal')) return;
     setInspectedTask(null);
-    setRightPanel('terminal');
-  }, [setRightPanel]);
+    applyPanelEntry(openRightPanelTab(panelEntryRef.current, 'terminal'));
+  }, [applyPanelEntry]);
 
-  // 包槽位的自动展开（如文档包：后端在本轮产出新设计稿时广播包事件）。
-  // 互斥规则：仅当栏位空闲（null）时 reveal 才生效；
-  // 已打开任一面板时，自动展开请求被忽略。订阅逻辑由包自己实现。
+  // 包槽位的自动展开（如文档包：后端在本轮产出新稿时广播）。
+  // 栏位空着时打开并显示；已经有别的标签时只追加，不抢走当前标签。
   useEffect(() => {
     const cleanups: Array<() => void> = [];
     for (const slot of packChatSlots) {
       const cleanup = slot.setupAutoReveal?.({
         reveal: () => {
-          if (rightPanelRef.current !== null) return;
-          rightPanelRef.current = slot.slotId;
-          setRightPanel(slot.slotId);
+          const id = sanitizeRightPanelKind(slot.slotId);
+          if (!id) return;
+          const next = revealRightPanelTab(panelEntryRef.current, id);
+          if (next === panelEntryRef.current) return;
+          if (panelEntryRef.current === null) setInspectedTask(null);
+          applyPanelEntry(next);
         },
         getCurrentChatId: () => chatId ?? null,
       });
@@ -504,7 +535,10 @@ function AgentLayoutContent() {
     };
     // packChatSlots 在 bootstrap 后稳定；chatId 经 getCurrentChatId 闭包读取。
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chatId, setRightPanel]);
+  }, [chatId, applyPanelEntry]);
+
+  // 交付文件点击要打开对应栏位。菜单按钮不在文档里时也能切过去。
+  useEffect(() => subscribeChatSlotRequests(openPanelTab), [openPanelTab]);
 
   // Same drag ergonomics as the sidebar handle, mirrored: the terminal's
   // right edge is pinned to the window's right padding (p-1.5 = 6px), so the
@@ -610,13 +644,14 @@ function AgentLayoutContent() {
                   inspectTask,
                   chatSlots: packChatSlots,
                   rightPanel,
-                  onToggleChatSlot: toggleRightPanel,
+                  openPanelIds,
+                  onOpenRightPanel: expandRightSide,
                 } satisfies AgentOutletContext}
               />
             </div>
             {settingsChrome('insights') && <InsightsConsentBanner />}
           </div>
-          {(rightPanel !== null || inspectedTask !== null) && (
+          {(panelOpen || inspectedTask !== null) && (
             <>
               <div
                 role="separator"
@@ -628,40 +663,61 @@ function AgentLayoutContent() {
                 title={t('Drag to resize the right panel (double-click to reset)')}
               />
               <div
-                className={`h-full flex-shrink-0 overflow-hidden rounded-agent-lg shadow-sm ${
-                  rightPanel === 'terminal' && !inspectedTask ? 'bg-[#0b0b0c]' : 'bg-agent-canvas'
-                }`}
+                className="flex h-full flex-shrink-0 flex-col overflow-hidden rounded-agent-lg bg-agent-canvas shadow-sm"
                 style={{ width: terminalWidth }}
                 data-testid={inspectedTask ? 'task-process-dock' : 'terminal-panel'}
               >
-                {inspectedTask ? (
-                  <TaskProcessPanel
-                    inspected={inspectedTask}
-                    onClose={closeTaskProcess}
-                    onShowTerminal={
-                      hostToolChrome('terminal') ? showTerminalFromTask : undefined
-                    }
-                  />
-                ) : rightPanel === 'terminal' ? (
-                  <TerminalPanel
-                    onClose={closeRightPanel}
-                    onShowTaskProcess={recentTask ? showRecentTask : undefined}
-                    taskProcessTitle={recentTask?.title}
+                {panelOpen && panelEntry && (
+                  <RightPanelTabBar
+                    tabs={panelEntry.tabs}
+                    active={panelEntry.active}
+                    slots={packChatSlots}
+                    showTerminal={hostToolChrome('terminal')}
+                    onActivate={activatePanelTab}
+                    onClose={closePanelTab}
+                    onOpen={openPanelTab}
+                    onCollapse={collapseRightSide}
                   />
-                ) : (
-                  (() => {
-                    const slot = packChatSlots.find((s) => s.slotId === rightPanel);
-                    if (!slot) return null;
-                    const SlotPanel = slot.Component;
-                    return (
-                      <SlotPanel
-                        chatId={chatId ?? ''}
-                        onClose={closeRightPanel}
-                        onSubmitToChat={sendChatMessage}
-                      />
-                    );
-                  })()
                 )}
+                <div className="relative min-h-0 flex-1">
+                  {inspectedTask ? (
+                    <TaskProcessPanel
+                      inspected={inspectedTask}
+                      onClose={closeTaskProcess}
+                      onShowTerminal={
+                        hostToolChrome('terminal') ? showTerminalFromTask : undefined
+                      }
+                    />
+                  ) : (
+                    panelEntry?.tabs.map((id) => {
+                      const visible = id === panelEntry.active;
+                      return (
+                        <div key={id} className={visible ? 'h-full' : 'hidden'}>
+                          {id === 'terminal' ? (
+                            <TerminalPanel
+                              onClose={() => closePanelTab('terminal')}
+                              onShowTaskProcess={recentTask ? showRecentTask : undefined}
+                              taskProcessTitle={recentTask?.title}
+                            />
+                          ) : (
+                            (() => {
+                              const slot = packChatSlots.find((s) => s.slotId === id);
+                              if (!slot) return null;
+                              const SlotPanel = slot.Component;
+                              return (
+                                <SlotPanel
+                                  chatId={chatId ?? ''}
+                                  onClose={() => closePanelTab(id)}
+                                  onSubmitToChat={sendChatMessage}
+                                />
+                              );
+                            })()
+                          )}
+                        </div>
+                      );
+                    })
+                  )}
+                </div>
               </div>
             </>
           )}

package/src/layouts/PanelToggleButton.tsx

@@ -0,0 +1,35 @@
+import { LuCopy } from 'react-icons/lu';
+import { t } from '@/i18n';
+
+/**
+ * 右侧整栏的开关。栏关着时放在对话标题栏，栏开着时放到右侧标签条最右，点一下收起。
+ */
+export function PanelToggleButton({
+  pressed,
+  onClick,
+}: {
+  pressed: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs transition-colors hover:bg-agent-foreground/5 hover:text-agent-foreground ${
+        pressed
+          ? 'bg-agent-foreground/10 text-agent-foreground'
+          : 'text-agent-muted-foreground'
+      }`}
+      title={
+        pressed
+          ? t('Close {name}', { name: t('Panels') })
+          : t('Open {name}', { name: t('Panels') })
+      }
+      aria-label={t('Panels')}
+      aria-pressed={pressed}
+      data-testid="header-chat-panels"
+    >
+      <LuCopy className="h-4 w-4" />
+    </button>
+  );
+}

package/src/layouts/RightPanelTabBar.tsx

@@ -0,0 +1,214 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import { LuPlus, LuTerminal, LuX } from 'react-icons/lu';
+import type { PackChatSlotContribution } from '@/packs/registry';
+import { t } from '@/i18n';
+import { PanelToggleButton } from '@/layouts/PanelToggleButton';
+
+/**
+ * 右侧栏位的标签条。打开的文档、终端都留在这一行，点标签切换，点 × 关掉那一个。
+ * 还没打开的栏位从行尾的加号加进去。最右边的按钮收起整栏。
+ */
+export function RightPanelTabBar({
+  tabs,
+  active,
+  slots,
+  showTerminal,
+  onActivate,
+  onClose,
+  onOpen,
+  onCollapse,
+}: {
+  tabs: readonly string[];
+  active: string;
+  slots: readonly PackChatSlotContribution[];
+  showTerminal: boolean;
+  onActivate: (id: string) => void;
+  onClose: (id: string) => void;
+  onOpen: (id: string) => void;
+  onCollapse: () => void;
+}) {
+  const addable = unopenedPanels(tabs, slots, showTerminal);
+  return (
+    <div className="flex h-10 shrink-0 items-center gap-1 border-b border-agent-border bg-agent-canvas px-2">
+      <div
+        role="tablist"
+        aria-label={t('Panels')}
+        data-testid="right-panel-tabs"
+        className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto"
+      >
+        {tabs.map((id) => {
+          const slot = slots.find((item) => item.slotId === id);
+          const title = slot?.title ?? (id === 'terminal' ? t('Terminal') : id);
+          const Icon = slot?.Icon ?? (id === 'terminal' ? LuTerminal : null);
+          const selected = id === active;
+          return (
+            <div
+              key={id}
+              role="tab"
+              aria-selected={selected}
+              data-testid={`right-panel-tab-${id}`}
+              className={`flex h-7 max-w-[11rem] shrink-0 items-center rounded-md pl-1.5 text-xs ${
+                selected
+                  ? 'bg-agent-foreground/10 font-medium text-agent-foreground'
+                  : 'text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground'
+              }`}
+            >
+              <button
+                type="button"
+                onClick={() => onActivate(id)}
+                className="flex min-w-0 items-center gap-1 px-0.5"
+                title={title}
+              >
+                {Icon ? <Icon className="h-3.5 w-3.5 shrink-0" /> : null}
+                <span className="truncate">{title}</span>
+              </button>
+              <button
+                type="button"
+                onClick={() => onClose(id)}
+                className="flex h-5 w-5 shrink-0 items-center justify-center rounded text-agent-muted-foreground hover:bg-agent-foreground/10 hover:text-agent-foreground"
+                aria-label={t('Close {name}', { name: title })}
+                title={t('Close {name}', { name: title })}
+              >
+                <LuX className="h-3 w-3" />
+              </button>
+            </div>
+          );
+        })}
+        {addable.length > 0 && <AddPanelButton entries={addable} onOpen={onOpen} />}
+      </div>
+      <PanelToggleButton pressed onClick={onCollapse} />
+    </div>
+  );
+}
+
+function AddPanelButton({
+  entries,
+  onOpen,
+}: {
+  entries: readonly AddPanelEntry[];
+  onOpen: (id: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [box, setBox] = useState<{ top: number; left: number } | null>(null);
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const menuRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const button = buttonRef.current;
+    if (!open || !button) {
+      setBox(null);
+      return;
+    }
+    const update = () => {
+      const rect = button.getBoundingClientRect();
+      const width = 168;
+      const left = Math.min(Math.max(8, rect.left), window.innerWidth - width - 8);
+      setBox({ top: rect.bottom + 4, left });
+    };
+    update();
+    window.addEventListener('resize', update);
+    window.addEventListener('scroll', update, true);
+    return () => {
+      window.removeEventListener('resize', update);
+      window.removeEventListener('scroll', update, true);
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event: MouseEvent) => {
+      const target = event.target as Node;
+      if (buttonRef.current?.contains(target) || menuRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    document.addEventListener('mousedown', onPointerDown);
+    return () => document.removeEventListener('mousedown', onPointerDown);
+  }, [open]);
+
+  return (
+    <>
+      <button
+        ref={buttonRef}
+        type="button"
+        onClick={() => setOpen((current) => !current)}
+        className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-agent-muted-foreground transition-colors hover:bg-agent-foreground/5 hover:text-agent-foreground"
+        title={t('Open {name}', { name: t('Panels') })}
+        aria-label={t('Open {name}', { name: t('Panels') })}
+        aria-expanded={open}
+        data-testid="right-panel-add"
+      >
+        <LuPlus className="h-3.5 w-3.5" />
+      </button>
+      {open &&
+        box &&
+        createPortal(
+          <div
+            ref={menuRef}
+            className="fixed z-[80] w-[168px] rounded-lg border border-agent-border bg-agent-canvas p-1 shadow-lg"
+            style={{ top: box.top, left: box.left }}
+            data-testid="right-panel-add-menu"
+          >
+            {entries.map((entry) => (
+              <button
+                key={entry.id}
+                type="button"
+                onClick={() => {
+                  onOpen(entry.id);
+                  setOpen(false);
+                }}
+                className="flex w-full items-center gap-2 rounded px-2.5 py-1.5 text-left text-xs text-agent-muted-foreground transition-colors hover:bg-agent-foreground/5 hover:text-agent-foreground"
+                title={entry.detail ?? t('Open {name}', { name: entry.title })}
+                aria-label={entry.id === 'terminal' ? t('Terminal') : entry.title}
+                data-testid={entry.testId}
+              >
+                {entry.icon}
+                <span className="min-w-0 flex-1 truncate">{entry.title}</span>
+              </button>
+            ))}
+          </div>,
+          document.body,
+        )}
+    </>
+  );
+}
+
+interface AddPanelEntry {
+  id: string;
+  title: string;
+  testId: string;
+  icon: ReactNode;
+  detail?: string;
+}
+
+function unopenedPanels(
+  tabs: readonly string[],
+  slots: readonly PackChatSlotContribution[],
+  showTerminal: boolean,
+): AddPanelEntry[] {
+  const entries: AddPanelEntry[] = [];
+  for (const slot of slots) {
+    if (tabs.includes(slot.slotId)) continue;
+    const Icon = slot.Icon;
+    entries.push({
+      id: slot.slotId,
+      title: slot.title,
+      testId: `header-slot-${slot.slotId}`,
+      icon: <Icon className="h-3.5 w-3.5 shrink-0" />,
+    });
+  }
+  if (showTerminal && !tabs.includes('terminal')) {
+    const shortcut =
+      typeof navigator !== 'undefined' && /Mac|iPod|iPhone|iPad/.test(navigator.platform)
+        ? '⌘T'
+        : 'Ctrl+T';
+    entries.push({
+      id: 'terminal',
+      title: t('Terminal'),
+      testId: 'header-terminal',
+      icon: <LuTerminal className="h-3.5 w-3.5 shrink-0" />,
+      detail: t('Open terminal panel ({shortcut})', { shortcut }),
+    });
+  }
+  return entries;
+}