feat: shared PaneHeaderActions + chat-resolve WorkspaceState fix (v2.7.7)

In-flight workspace UX work.

- Extract a shared PaneHeaderActions cluster (+/Split/Reopen/History/Close)
  used by ChatTabBar + the Workspace coder/terminal pane headers, replacing the
  divergent per-header copies; SessionLandingPage history + useWorkspacePanes
  tweaks.
- Fix coder-side correctness bug: resolveChatId read sessions.workspace_panes as
  a bare WorkspacePane[] but v2.6.5 widened it to a WorkspaceState envelope, so
  it mis-read panes and clobbered tabNumbers/nextTabNumber/closedPaneStack on
  every pane-chat write. New normalizeWorkspaceState handles either shape and
  preserves the envelope (+ regression test).
- CLAUDE.md doc-sync (coder vitest suite, deploy-by-surface, dual-remote push,
  in-flight-web-WIP staging, release-branch naming).

Web tsc + coder build + coder tests green. Builds on v2.7.6.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

apps/coder/src/routes/__tests__/chat-resolve.test.ts

@@ -0,0 +1,110 @@
+import { describe, it, expect } from 'vitest';
+import { resolveChatId } from '../chat-resolve.js';
+import type { Sql } from '../../db.js';
+
+// Mock the porsager/postgres surface that chat-resolve.ts uses: a tagged-template
+// `tx` (dispatched by query substring), `tx.json`, and `sql.begin(fn)` which just
+// runs fn(tx). Captures the value written back to workspace_panes so we can assert
+// the WorkspaceState envelope survives the UPDATE.
+interface MockState {
+  stored: unknown; // initial sessions.workspace_panes value
+  existingChatOpen: boolean; // whether `SELECT id FROM chats ...` finds the active chat
+  newChatId: string;
+  written?: unknown; // captured tx.json(...) payload from `UPDATE sessions`
+  inserted: boolean; // whether INSERT INTO chats ran
+}
+
+interface MockTx {
+  (strings: TemplateStringsArray): Promise<unknown>;
+  json: (v: unknown) => unknown;
+}
+
+function mockSql(state: MockState): Sql {
+  const tx = ((strings: TemplateStringsArray) => {
+    const q = strings.join('');
+    if (q.includes('SELECT workspace_panes FROM sessions')) {
+      return Promise.resolve([{ workspace_panes: state.stored }]);
+    }
+    if (q.includes('FROM chats')) {
+      return Promise.resolve(state.existingChatOpen ? [{ id: 'placeholder' }] : []);
+    }
+    if (q.includes('INSERT INTO chats')) {
+      state.inserted = true;
+      return Promise.resolve([{ id: state.newChatId }]);
+    }
+    if (q.includes('UPDATE sessions')) {
+      return Promise.resolve([]);
+    }
+    return Promise.resolve([]);
+  }) as unknown as MockTx;
+  tx.json = (v: unknown) => {
+    state.written = v;
+    return v;
+  };
+  const sql = {
+    begin: (fn: (t: Sql) => Promise<unknown>) => fn(tx as unknown as Sql),
+  };
+  return sql as unknown as Sql;
+}
+
+const ENVELOPE = () => ({
+  panes: [{ id: 'pane-1', kind: 'coder', chatIds: [] as string[], activeChatIdx: 0 }],
+  tabNumbers: { 'chat-x': 3 },
+  nextTabNumber: 7,
+  closedPaneStack: [{ kind: 'coder', chatIds: ['old'], activeChatIdx: 0 }],
+});
+
+describe('resolveChatId — v2.6.5 WorkspaceState envelope', () => {
+  it('reads panes from the envelope without crashing (regression: panes.findIndex is not a function)', async () => {
+    const state: MockState = {
+      stored: ENVELOPE(),
+      existingChatOpen: false,
+      newChatId: 'new-chat-1',
+      inserted: false,
+    };
+    const chatId = await resolveChatId(mockSql(state), 'session-1', 'pane-1');
+    expect(chatId).toBe('new-chat-1');
+    expect(state.inserted).toBe(true);
+  });
+
+  it('preserves the envelope (tabNumbers/nextTabNumber/closedPaneStack) on write-back', async () => {
+    const state: MockState = {
+      stored: ENVELOPE(),
+      existingChatOpen: false,
+      newChatId: 'new-chat-1',
+      inserted: false,
+    };
+    await resolveChatId(mockSql(state), 'session-1', 'pane-1');
+    const w = state.written as Record<string, unknown>;
+    expect(Array.isArray(w.panes)).toBe(true); // envelope, not a bare array
+    expect(w.tabNumbers).toEqual({ 'chat-x': 3 });
+    expect(w.nextTabNumber).toBe(7);
+    expect(w.closedPaneStack).toEqual([{ kind: 'coder', chatIds: ['old'], activeChatIdx: 0 }]);
+  });
+
+  it('returns the existing open chat when the pane already has one', async () => {
+    const env = ENVELOPE();
+    env.panes[0]!.chatIds = ['existing-1'];
+    const state: MockState = {
+      stored: env,
+      existingChatOpen: true,
+      newChatId: 'should-not-be-used',
+      inserted: false,
+    };
+    const chatId = await resolveChatId(mockSql(state), 'session-1', 'pane-1');
+    expect(chatId).toBe('existing-1');
+    expect(state.inserted).toBe(false);
+  });
+
+  it('still accepts a legacy bare WorkspacePane[] array', async () => {
+    const state: MockState = {
+      stored: [{ id: 'pane-1', kind: 'coder', chatId: 'legacy-1', chatIds: ['legacy-1'], activeChatIdx: 0 }],
+      existingChatOpen: true,
+      newChatId: 'should-not-be-used',
+      inserted: false,
+    };
+    const chatId = await resolveChatId(mockSql(state), 'session-1', 'pane-1');
+    expect(chatId).toBe('legacy-1');
+    expect(state.inserted).toBe(false);
+  });
+});

apps/coder/src/routes/chat-resolve.ts

@@ -8,6 +8,36 @@ interface WorkspacePaneRow {
   activeChatIdx?: number;
 }
 
+// v2.6.5: sessions.workspace_panes widened from a bare WorkspacePane[] to a
+// WorkspaceState envelope { panes, tabNumbers, nextTabNumber, closedPaneStack }.
+// (See the union validator in apps/server routes/sessions.ts + normalizeWorkspaceState
+// in apps/server read_tab_by_number.ts — this is the coder-side mirror.)
+interface WorkspaceStateRow {
+  panes: WorkspacePaneRow[];
+  tabNumbers: Record<string, number>;
+  nextTabNumber: number;
+  closedPaneStack: unknown[];
+}
+
+// MIGRATION: the stored value may be the legacy bare array OR the envelope.
+// Normalize to a full envelope so callers always read `.panes` as an array and
+// write the envelope back intact (preserving tabNumbers/nextTabNumber/closedPaneStack).
+export function normalizeWorkspaceState(v: unknown): WorkspaceStateRow {
+  if (Array.isArray(v)) {
+    return { panes: v as WorkspacePaneRow[], tabNumbers: {}, nextTabNumber: 1, closedPaneStack: [] };
+  }
+  if (v && typeof v === 'object' && Array.isArray((v as { panes?: unknown }).panes)) {
+    const env = v as Partial<WorkspaceStateRow>;
+    return {
+      panes: env.panes ?? [],
+      tabNumbers: env.tabNumbers ?? {},
+      nextTabNumber: env.nextTabNumber ?? 1,
+      closedPaneStack: env.closedPaneStack ?? [],
+    };
+  }
+  return { panes: [], tabNumbers: {}, nextTabNumber: 1, closedPaneStack: [] };
+}
+
 function chatNameForKind(kind: string): string {
   if (kind === 'coder' || kind === 'agent') return 'BooCoder';
   if (kind === 'terminal') return 'Terminal';
@@ -28,12 +58,13 @@ export async function resolveChatId(
   paneId: string,
 ): Promise<string | null> {
   return sql.begin(async (tx) => {
-    const sessionRows = await tx<{ workspace_panes: WorkspacePaneRow[] }[]>`
+    const sessionRows = await tx<{ workspace_panes: unknown }[]>`
       SELECT workspace_panes FROM sessions WHERE id = ${sessionId} FOR UPDATE
     `;
     if (sessionRows.length === 0) return null;
 
-    const panes = sessionRows[0]!.workspace_panes ?? [];
+    const state = normalizeWorkspaceState(sessionRows[0]!.workspace_panes);
+    const panes = state.panes;
     const paneIdx = panes.findIndex((p) => p.id === paneId);
     if (paneIdx < 0) return null;
 
@@ -69,9 +100,10 @@ export async function resolveChatId(
         : p,
     );
 
+    const nextState: WorkspaceStateRow = { ...state, panes: nextPanes };
     await tx`
       UPDATE sessions
-      SET workspace_panes = ${tx.json(nextPanes as never)},
+      SET workspace_panes = ${tx.json(nextState as never)},
           updated_at = clock_timestamp()
       WHERE id = ${sessionId}
     `;

apps/web/src/components/ChatTabBar.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
-import { Code, Columns2, History, MessageSquare, Plus, RotateCcw, Terminal, X } from 'lucide-react';
+import { History, MessageSquare, X } from 'lucide-react';
 import type { Chat, WorkspacePane } from '@/api/types';
 import { StatusDot } from '@/components/StatusDot';
+import { PaneHeaderActions } from '@/components/PaneHeaderActions';
 import {
   ContextMenu,
   ContextMenuContent,
@@ -9,12 +10,6 @@ import {
   ContextMenuSeparator,
   ContextMenuTrigger,
 } from '@/components/ui/context-menu';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
 import { useLongPress } from '@/hooks/useLongPress';
 import { sessionEvents } from '@/hooks/sessionEvents';
 import { cn } from '@/lib/utils';
@@ -191,90 +186,15 @@ export function ChatTabBar({
         </div>
       )}
 
-      <div className="flex items-center ml-auto gap-0.5 px-1 shrink-0">
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <button
-              type="button"
-              className="inline-flex items-center justify-center p-1 rounded text-muted-foreground hover:bg-muted hover:text-foreground max-md:min-h-[44px] max-md:min-w-[44px]"
-              aria-label="New chat, terminal, or coder"
-              title="New chat / terminal / coder"
-            >
-              <Plus size={12} />
-            </button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-fit">
-            {/* New BooChat opens a tab in THIS pane; terminal/coder can't be
-                tabs, so they split into a new pane (matches the Split menu). */}
-            <DropdownMenuItem onSelect={onNewTab}>
-              <MessageSquare size={14} /> New BooChat
-            </DropdownMenuItem>
-            <DropdownMenuItem onSelect={() => onSplitPane('terminal')}>
-              <Terminal size={14} /> New BooTerm
-            </DropdownMenuItem>
-            <DropdownMenuItem onSelect={() => onSplitPane('coder')}>
-              <Code size={14} /> New BooCode
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <button
-              type="button"
-              className="inline-flex items-center justify-center p-1 rounded text-muted-foreground hover:bg-muted hover:text-foreground max-md:min-h-[44px] max-md:min-w-[44px]"
-              aria-label="Split pane"
-              title="Split pane"
-            >
-              <Columns2 size={12} />
-            </button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-fit">
-            <DropdownMenuItem onSelect={() => onSplitPane('chat')}>
-              <MessageSquare size={14} /> New BooChat
-            </DropdownMenuItem>
-            <DropdownMenuItem onSelect={() => onSplitPane('terminal')}>
-              <Terminal size={14} /> New BooTerm
-            </DropdownMenuItem>
-            <DropdownMenuItem onSelect={() => onSplitPane('coder')}>
-              <Code size={14} /> New BooCode
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-        {onReopenPane && (
-          <button
-            type="button"
-            onClick={onReopenPane}
-            className="inline-flex items-center justify-center p-1 rounded text-muted-foreground hover:bg-muted hover:text-foreground max-md:min-h-[44px] max-md:min-w-[44px]"
-            aria-label="Reopen closed pane"
-            title="Reopen closed pane"
-          >
-            <RotateCcw size={12} />
-          </button>
-        )}
-        <button
-          type="button"
-          onClick={onShowHistory}
-          className={cn(
-            'inline-flex items-center justify-center p-1 rounded text-muted-foreground hover:bg-muted hover:text-foreground max-md:min-h-[44px] max-md:min-w-[44px]',
-            pane.kind === 'empty' && 'text-foreground bg-muted/50'
-          )}
-          aria-label="Session history"
-          title="Session history"
-        >
-          <History size={12} />
-        </button>
-        {onRemovePane && (
-          <button
-            type="button"
-            onClick={onRemovePane}
-            className="inline-flex items-center justify-center p-1 rounded text-muted-foreground hover:bg-muted hover:text-foreground max-md:min-h-[44px] max-md:min-w-[44px]"
-            aria-label="Close pane"
-            title="Close pane"
-          >
-            <X size={12} />
-          </button>
-        )}
-      </div>
+      <PaneHeaderActions
+        className="ml-auto px-1"
+        onNewTab={onNewTab}
+        onSplitPane={onSplitPane}
+        onReopenPane={onReopenPane}
+        onShowHistory={onShowHistory}
+        onRemovePane={onRemovePane}
+        historyActive={pane.kind === 'empty'}
+      />
     </div>
   );
 }

apps/web/src/components/PaneHeaderActions.tsx

@@ -0,0 +1,139 @@
+import { Code, Columns2, History, MessageSquare, Plus, RotateCcw, Terminal, X } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { cn } from '@/lib/utils';
+
+// Shared pane-header action cluster: + (new) / Split / Reopen-closed-pane /
+// Session history / Close. Rendered in the chat tab bar (ChatTabBar) and the
+// desktop coder + terminal pane headers (Workspace) so all pane kinds share one
+// control set. Extracted to avoid a divergent copy per header.
+interface Props {
+  // When provided (chat panes), the "+" menu's New BooChat opens an in-pane
+  // tab. When omitted (coder/terminal panes, which can't host tabs), New BooChat
+  // splits into a new pane instead.
+  onNewTab?: () => void;
+  onSplitPane: (kind: 'chat' | 'terminal' | 'coder') => void;
+  onReopenPane?: () => void;
+  onShowHistory: () => void;
+  onRemovePane?: () => void;
+  // Highlights the History button when the pane is showing the landing page.
+  historyActive?: boolean;
+  // Positioning/spacing supplied by the parent (e.g. "ml-auto px-1").
+  className?: string;
+}
+
+const BTN =
+  'inline-flex items-center justify-center p-1 rounded text-muted-foreground hover:bg-muted hover:text-foreground max-md:min-h-[44px] max-md:min-w-[44px]';
+
+export function PaneHeaderActions({
+  onNewTab,
+  onSplitPane,
+  onReopenPane,
+  onShowHistory,
+  onRemovePane,
+  historyActive,
+  className,
+}: Props) {
+  return (
+    <div className={cn('flex items-center gap-0.5 shrink-0', className)}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button
+            type="button"
+            onClick={(e) => e.stopPropagation()}
+            className={BTN}
+            aria-label="New chat, terminal, or coder"
+            title="New chat / terminal / coder"
+          >
+            <Plus size={12} />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-fit">
+          {/* Chat panes: New BooChat opens a tab in THIS pane. Coder/terminal
+              panes can't host tabs, so it splits into a new pane. */}
+          <DropdownMenuItem onSelect={onNewTab ?? (() => onSplitPane('chat'))}>
+            <MessageSquare size={14} /> New BooChat
+          </DropdownMenuItem>
+          <DropdownMenuItem onSelect={() => onSplitPane('terminal')}>
+            <Terminal size={14} /> New BooTerm
+          </DropdownMenuItem>
+          <DropdownMenuItem onSelect={() => onSplitPane('coder')}>
+            <Code size={14} /> New BooCode
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button
+            type="button"
+            onClick={(e) => e.stopPropagation()}
+            className={cn(BTN, 'max-md:hidden')}
+            aria-label="Split pane"
+            title="Split pane"
+          >
+            <Columns2 size={12} />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-fit">
+          <DropdownMenuItem onSelect={() => onSplitPane('chat')}>
+            <MessageSquare size={14} /> New BooChat
+          </DropdownMenuItem>
+          <DropdownMenuItem onSelect={() => onSplitPane('terminal')}>
+            <Terminal size={14} /> New BooTerm
+          </DropdownMenuItem>
+          <DropdownMenuItem onSelect={() => onSplitPane('coder')}>
+            <Code size={14} /> New BooCode
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {onReopenPane && (
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            onReopenPane();
+          }}
+          className={cn(BTN, 'max-md:hidden')}
+          aria-label="Reopen closed pane"
+          title="Reopen closed pane"
+        >
+          <RotateCcw size={12} />
+        </button>
+      )}
+
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          onShowHistory();
+        }}
+        className={cn(BTN, 'max-md:hidden', historyActive && 'text-foreground bg-muted/50')}
+        aria-label="Session history"
+        title="Session history"
+      >
+        <History size={12} />
+      </button>
+
+      {onRemovePane && (
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            onRemovePane();
+          }}
+          className={BTN}
+          aria-label="Close pane"
+          title="Close pane"
+        >
+          <X size={12} />
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/SessionLandingPage.tsx

@@ -1,7 +1,15 @@
 import { useCallback, useEffect, useState } from 'react';
-import { Archive, MessageSquare, RotateCcw } from 'lucide-react';
+import { Archive, Code, MessageSquare, RotateCcw, Terminal, Trash2 } from 'lucide-react';
 import { toast } from 'sonner';
 import { ChatInput } from '@/components/ChatInput';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
 import { api } from '@/api/client';
 import type { Chat } from '@/api/types';
 
@@ -22,6 +30,8 @@ interface Props {
   chats: Chat[];
   onOpenChat: (chatId: string) => void;
   onUnarchiveChat: (chatId: string) => Promise<void>;
+  onArchiveChat: (chatId: string) => Promise<void>;
+  onDeleteChat: (chatId: string) => Promise<void>;
 }
 
 function formatRelative(iso: string): string {
@@ -42,6 +52,16 @@ function byRecent(a: Chat, b: Chat): number {
   return (b.updated_at ?? '').localeCompare(a.updated_at ?? '');
 }
 
+// Pick the row icon by the chat's seed name: coder and terminal panes create
+// placeholder chats named 'BooCoder' / 'Terminal' (see useWorkspacePanes
+// chatNameForPaneKind + the coder chat-resolve). A name heuristic keeps this
+// frontend-only — matches ProjectSidebar's isCoderSessionName approach.
+function iconForChat(name: string | null) {
+  if (name === 'BooCoder') return Code;
+  if (name === 'Terminal') return Terminal;
+  return MessageSquare;
+}
+
 export function SessionLandingPage({
   projectId,
   sessionId,
@@ -53,9 +73,13 @@ export function SessionLandingPage({
   chats,
   onOpenChat,
   onUnarchiveChat,
+  onArchiveChat,
+  onDeleteChat,
 }: Props) {
   const [chatId, setChatId] = useState<string | null>(null);
   const [archived, setArchived] = useState<Chat[]>([]);
+  // Plain Cancel/Confirm delete (no type-to-confirm), mirroring ProjectSidebar.
+  const [deleteConfirm, setDeleteConfirm] = useState<{ id: string; name: string | null } | null>(null);
 
   // Archived chats aren't in the default (open-only) list, so fetch them. One
   // shot on session change — the history view is transient (pick a chat and
@@ -130,25 +154,52 @@ export function SessionLandingPage({
                     Conversations
                   </h3>
                   <div className="space-y-0.5 mb-4">
-                    {openChats.map((c) => (
-                      <button
-                        key={c.id}
-                        type="button"
-                        onClick={() => onOpenChat(c.id)}
-                        className="w-full flex items-center gap-2 text-left px-2 py-1.5 rounded hover:bg-muted text-sm max-md:min-h-[44px]"
-                      >
-                        <MessageSquare size={14} className="shrink-0 text-muted-foreground" />
-                        <span className="truncate shrink-0 max-w-[45%]">{c.name ?? 'New chat'}</span>
-                        {c.last_message_preview && (
-                          <span className="truncate flex-1 text-xs text-muted-foreground hidden sm:block">
-                            {c.last_message_preview}
-                          </span>
-                        )}
-                        <span className="shrink-0 ml-auto text-xs text-muted-foreground">
-                          {formatRelative(c.updated_at)}
-                        </span>
-                      </button>
-                    ))}
+                    {openChats.map((c) => {
+                      const Icon = iconForChat(c.name);
+                      return (
+                        <div
+                          key={c.id}
+                          className="group/row flex items-center gap-2 px-2 py-1.5 rounded hover:bg-muted text-sm max-md:min-h-[44px]"
+                        >
+                          <button
+                            type="button"
+                            onClick={() => onOpenChat(c.id)}
+                            className="flex items-center gap-2 flex-1 min-w-0 text-left"
+                          >
+                            <Icon size={14} className="shrink-0 text-muted-foreground" />
+                            <span className="truncate shrink-0 max-w-[45%]">{c.name ?? 'New chat'}</span>
+                            {c.last_message_preview && (
+                              <span className="truncate flex-1 text-xs text-muted-foreground hidden sm:block">
+                                {c.last_message_preview}
+                              </span>
+                            )}
+                            <span className="shrink-0 ml-auto text-xs text-muted-foreground">
+                              {formatRelative(c.updated_at)}
+                            </span>
+                          </button>
+                          <div className="shrink-0 flex items-center gap-0.5 opacity-0 group-hover/row:opacity-100 focus-within:opacity-100 transition-opacity">
+                            <button
+                              type="button"
+                              onClick={(e) => { e.stopPropagation(); void onArchiveChat(c.id); }}
+                              className="inline-flex items-center justify-center size-7 rounded text-muted-foreground hover:bg-muted hover:text-foreground max-md:size-9"
+                              aria-label="Archive chat"
+                              title="Archive"
+                            >
+                              <Archive size={14} />
+                            </button>
+                            <button
+                              type="button"
+                              onClick={(e) => { e.stopPropagation(); setDeleteConfirm({ id: c.id, name: c.name }); }}
+                              className="inline-flex items-center justify-center size-7 rounded text-muted-foreground hover:bg-destructive/20 hover:text-destructive max-md:size-9"
+                              aria-label="Delete chat"
+                              title="Delete"
+                            >
+                              <Trash2 size={14} />
+                            </button>
+                          </div>
+                        </div>
+                      );
+                    })}
                   </div>
                 </>
               )}
@@ -159,21 +210,34 @@ export function SessionLandingPage({
                   </h3>
                   <div className="space-y-0.5">
                     {archivedChats.map((c) => (
-                      <button
+                      <div
                         key={c.id}
-                        type="button"
-                        onClick={() => void restoreAndOpen(c.id)}
-                        title="Restore and open"
-                        className="group/arch w-full flex items-center gap-2 text-left px-2 py-1.5 rounded hover:bg-muted text-sm text-muted-foreground max-md:min-h-[44px]"
+                        className="group/arch flex items-center gap-2 px-2 py-1.5 rounded hover:bg-muted text-sm text-muted-foreground max-md:min-h-[44px]"
                       >
-                        <Archive size={14} className="shrink-0" />
-                        <span className="truncate flex-1">{c.name ?? 'New chat'}</span>
-                        <span className="shrink-0 text-xs">{formatRelative(c.updated_at)}</span>
-                        <RotateCcw
-                          size={13}
-                          className="shrink-0 opacity-0 group-hover/arch:opacity-100"
-                        />
-                      </button>
+                        <button
+                          type="button"
+                          onClick={() => void restoreAndOpen(c.id)}
+                          title="Restore and open"
+                          className="flex items-center gap-2 flex-1 min-w-0 text-left"
+                        >
+                          <Archive size={14} className="shrink-0" />
+                          <span className="truncate flex-1">{c.name ?? 'New chat'}</span>
+                          <span className="shrink-0 text-xs">{formatRelative(c.updated_at)}</span>
+                          <RotateCcw
+                            size={13}
+                            className="shrink-0 opacity-0 group-hover/arch:opacity-100"
+                          />
+                        </button>
+                        <button
+                          type="button"
+                          onClick={(e) => { e.stopPropagation(); setDeleteConfirm({ id: c.id, name: c.name }); }}
+                          className="shrink-0 inline-flex items-center justify-center size-7 rounded hover:bg-destructive/20 hover:text-destructive max-md:size-9 opacity-0 group-hover/arch:opacity-100 focus-within:opacity-100 transition-opacity"
+                          aria-label="Delete chat"
+                          title="Delete"
+                        >
+                          <Trash2 size={14} />
+                        </button>
+                      </div>
                     ))}
                   </div>
                 </>
@@ -195,6 +259,31 @@ export function SessionLandingPage({
         messages={[]}
         modelContextLimit={null}
       />
+      <Dialog
+        open={deleteConfirm !== null}
+        onOpenChange={(open) => { if (!open) setDeleteConfirm(null); }}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Delete chat?</DialogTitle>
+            <DialogDescription>
+              Permanently deletes "{deleteConfirm?.name ?? 'New chat'}" and all its messages. This cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2 justify-end pt-2">
+            <Button variant="outline" onClick={() => setDeleteConfirm(null)}>Cancel</Button>
+            <Button
+              variant="destructive"
+              onClick={() => {
+                if (deleteConfirm) void onDeleteChat(deleteConfirm.id);
+                setDeleteConfirm(null);
+              }}
+            >
+              Delete
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

apps/web/src/components/Workspace.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { MessageSquare, Terminal, Code, Clipboard, Plus, X } from 'lucide-react';
+import { Terminal, Code, Clipboard } from 'lucide-react';
 import { api } from '@/api/client';
 import type { Chat, Project, Session, WorkspacePane } from '@/api/types';
 import { MAX_PANES, activePaneChatId, type UseWorkspacePanesResult } from '@/hooks/useWorkspacePanes';
@@ -13,13 +13,8 @@ import { CoderPane } from '@/components/panes/CoderPane';
 import { MarkdownArtifactPane } from '@/components/MarkdownArtifactPane';
 import { HtmlArtifactPane } from '@/components/HtmlArtifactPane';
 import { ChatTabBar } from '@/components/ChatTabBar';
+import { PaneHeaderActions } from '@/components/PaneHeaderActions';
 import { SessionLandingPage } from '@/components/SessionLandingPage';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
 import { cn } from '@/lib/utils';
 
 interface Props {
@@ -223,41 +218,13 @@ export function Workspace({
                 <div className="flex items-center gap-1 border-b border-border px-2 py-1 shrink-0">
                   <Code size={12} className="text-muted-foreground" />
                   <span className="text-xs text-muted-foreground">BooCode</span>
-                  <div className="ml-auto flex items-center gap-1">
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <button
-                          type="button"
-                          onClick={(e) => e.stopPropagation()}
-                          className="inline-flex items-center justify-center size-5 rounded text-muted-foreground hover:bg-muted hover:text-foreground"
-                          aria-label="New pane"
-                        >
-                          <Plus size={12} />
-                        </button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end" className="w-fit">
-                        <DropdownMenuItem onSelect={() => onAddPane('chat')}>
-                          <MessageSquare size={14} /> New BooChat
-                        </DropdownMenuItem>
-                        <DropdownMenuItem onSelect={() => onAddPane('terminal')}>
-                          <Terminal size={14} /> New BooTerm
-                        </DropdownMenuItem>
-                        <DropdownMenuItem onSelect={() => onAddPane('coder')}>
-                          <Code size={14} /> New BooCode
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                    {panes.length > 1 && (
-                      <button
-                        type="button"
-                        onClick={(e) => { e.stopPropagation(); removePane(idx); }}
-                        className="inline-flex items-center justify-center size-5 rounded text-muted-foreground hover:bg-muted hover:text-foreground"
-                        aria-label="Close pane"
-                      >
-                        <X size={12} />
-                      </button>
-                    )}
-                  </div>
+                  <PaneHeaderActions
+                    className="ml-auto"
+                    onSplitPane={onAddPane}
+                    onReopenPane={hasClosedPanes ? reopenPane : undefined}
+                    onShowHistory={() => showLandingPage(idx)}
+                    onRemovePane={panes.length > 1 ? () => removePane(idx) : undefined}
+                  />
                 </div>
               )}
               {isTerminal && (
@@ -266,61 +233,31 @@ export function Workspace({
                   <span className="text-xs text-muted-foreground">
                     {terminalLabels.get(pane.id) ?? 'Terminal'}
                   </span>
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <button
-                        type="button"
-                        onClick={(e) => e.stopPropagation()}
-                        className="ml-auto inline-flex items-center justify-center size-5 rounded text-muted-foreground hover:bg-muted hover:text-foreground max-md:size-7"
-                        aria-label="New pane"
-                        title="New pane"
-                      >
-                        <Plus size={12} />
-                      </button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end" className="w-fit">
-                      <DropdownMenuItem onSelect={() => onAddPane('chat')}>
-                        <MessageSquare size={14} /> New BooChat
-                      </DropdownMenuItem>
-                      <DropdownMenuItem onSelect={() => onAddPane('terminal')}>
-                        <Terminal size={14} /> New BooTerm
-                      </DropdownMenuItem>
-                      <DropdownMenuItem onSelect={() => onAddPane('coder')}>
-                        <Code size={14} /> New BooCode
-                      </DropdownMenuItem>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                  {/* v1.10.4: iOS Safari restricts navigator.clipboard.readText
-                      outside direct user gestures. A real button click IS a
-                      gesture, so this works where keystroke-driven paste may
-                      not on iOS. The action lives in TerminalPane behind the
-                      registry's paste() callback. */}
-                  <button
-                    type="button"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      terminalsRegistry.get(pane.id)?.paste();
-                    }}
-                    className="inline-flex items-center justify-center size-5 rounded text-muted-foreground hover:bg-muted hover:text-foreground max-md:size-7"
-                    aria-label="Paste from clipboard"
-                    title="Paste from clipboard"
-                  >
-                    <Clipboard size={12} />
-                  </button>
-                  {panes.length > 1 && (
+                  <div className="ml-auto flex items-center gap-0.5">
+                    {/* v1.10.4: iOS Safari restricts navigator.clipboard.readText
+                        outside direct user gestures. A real button click IS a
+                        gesture, so this works where keystroke-driven paste may
+                        not on iOS. The action lives in TerminalPane behind the
+                        registry's paste() callback. */}
                     <button
                       type="button"
                       onClick={(e) => {
                         e.stopPropagation();
-                        removePane(idx);
+                        terminalsRegistry.get(pane.id)?.paste();
                       }}
-                      className="inline-flex items-center justify-center size-5 rounded text-muted-foreground hover:bg-muted hover:text-foreground max-md:size-7"
-                      aria-label="Close terminal pane"
-                      title="Close terminal pane"
+                      className="inline-flex items-center justify-center p-1 rounded text-muted-foreground hover:bg-muted hover:text-foreground max-md:min-h-[44px] max-md:min-w-[44px]"
+                      aria-label="Paste from clipboard"
+                      title="Paste from clipboard"
                     >
-                      <X size={12} />
+                      <Clipboard size={12} />
                     </button>
-                  )}
+                    <PaneHeaderActions
+                      onSplitPane={onAddPane}
+                      onReopenPane={hasClosedPanes ? reopenPane : undefined}
+                      onShowHistory={() => showLandingPage(idx)}
+                      onRemovePane={panes.length > 1 ? () => removePane(idx) : undefined}
+                    />
+                  </div>
                 </div>
               )}
             </div>
@@ -395,6 +332,8 @@ export function Workspace({
                   chats={chats}
                   onOpenChat={(chatId) => openChatInPane(idx, chatId)}
                   onUnarchiveChat={unarchiveChat}
+                  onArchiveChat={archiveChat}
+                  onDeleteChat={deleteChat}
                 />
               )}
             </div>

apps/web/src/hooks/useWorkspacePanes.ts

@@ -640,13 +640,23 @@ export function useWorkspacePanes(sessionId: string): UseWorkspacePanesResult {
   const showLandingPage = useCallback((paneIdx: number) => {
     setPanes((prev) => {
       const pane = prev[paneIdx];
-      // Coder/terminal panes are not chat hosts — history button is chat-only.
-      if (!pane || pane.kind === 'coder' || pane.kind === 'terminal') return prev;
+      if (!pane) return prev;
       const next = [...prev];
-      next[paneIdx] = { ...pane, kind: 'empty', chatId: undefined };
+      if (pane.kind === 'coder' || pane.kind === 'terminal') {
+        // Scoped panes don't host chat tabs. Leaving one for the session
+        // history closes it: drop the pane→chat binding, and for terminals
+        // kill the tmux session (terminals are ephemeral — closing = killing,
+        // mirroring removePane).
+        if (pane.kind === 'terminal') {
+          api.terminals.kill(sessionId, pane.id).catch(() => { /* non-fatal */ });
+        }
+        next[paneIdx] = { ...pane, kind: 'empty', chatId: undefined, chatIds: [], activeChatIdx: -1 };
+      } else {
+        next[paneIdx] = { ...pane, kind: 'empty', chatId: undefined };
+      }
       return next;
     });
-  }, []);
+  }, [sessionId]);
 
   const addSplitPane = useCallback((kind: 'chat' | 'terminal' | 'coder'): string | null => {
     // Generate the id outside the updater so we can return it deterministically.