synabun 2.0.0 → 2.0.7

package/neural-interface/public/shared/ui-claude-panel.js

@@ -1,3 +1,8 @@
+import { providerAuthSnapshot } from './ui-provider-auth.js';
+import { mountProviderTerminalAuth, providerApiKeyRequest, startProviderTerminalLogin } from './ui-provider-terminal-auth.js';
+import { accountName, accountSwitchPlan, accountText, tabAccountId, serverAccountId } from './account-view.js';
+import { mountAccountMenu } from './account-menu.js';
+import './account-i18n.js';
 import { hostedSidepanelId, sidepanelHost } from './ui-sidepanel-runtime.js';
 // ═══════════════════════════════════════════
 // SynaBun — Claude Code Panel (Main Area)
@@ -7,14 +12,18 @@ import { hostedSidepanelId, sidepanelHost } from './ui-sidepanel-runtime.js';
 import { storage } from './storage.js';
 import { fetchBlobNamespace, putBlob, deleteBlob, flushBlobs } from './blob-store.js';
 import { state, emit, on } from './state.js';
+import { forgetGreeting, mountGreeting } from './greeting/greeting-card.js';
 import { fetchClaudeSessions, fetchBrowserSessions, searchSessions } from './api.js';
 import { createFrameRenderer } from './utils.js';
 import { notify, NOTIF_TYPE } from './ui-notifications.js';
 import { registerSidepanel, setSidepanelVisible, syncSidepanelLayout, focusSidepanel, openAnotherSidepanelSession, isHostedSessionFocused } from './ui-sidepanel-windows.js';
-import { subscribeCliStatus, recheckCliStatus, getCliDocUrl, getCliInstallCommand, getCliLabel } from './cli-status.js';
+import { mountCliBanner } from './ui-cli-banner.js';
 import { nativeLoopWindowId } from './ui-native-window-id.js';
 import { createStickyScrollController } from './ui-scroll-follow.js';
 import { requestGeneratedSessionTitle } from './session-title.js';
+import { wireFileLinks } from './ui-file-links.js';
+import { WORKER_END_CLASS, backToAssistant, buildWorkerEndCard, endWorkerRunOnClose, forgetWorkerEnd, trackWorkerEnd, updateWorkerEndBusy } from './ui-worker-end.js';
+import { isDispatchedRun, isEndOfRunAbort } from './worker-end.js';
 // ── cp/ feature modules (SDK-engine CLI parity: diffs, agents, bash, perms, statusline) ──
 import { setCpCtx } from './cp/cp-ctx.js';
 import { buildDiffCard, buildDiffPreviewEl, finalizeDiffCard } from './cp/cp-diff.js';
@@ -24,7 +33,7 @@ import { buildAgentCard, ensureAgentScope, noteAgentActivity, updateAgentTodoBad
 import { renderPermissionCard, renderPlanApprovalCard, renderElicitationCard, decorateAskCard, askAnnotations, markAskAnswered, PERMISSION_MODES, MODE_LABELS } from './cp/cp-permissions.js';
 import { normalizeSession, changedStartSettings, sessionFlags, sessionRows, fastModeSupported, fastModeReason, mergeSessionModels, parseMcpServerLines, formatMcpServerLines } from './cp/cp-session-model.js';
 import { renderSessionSettingsCard } from './cp/cp-session-settings.js';
-import { describeOrigin, reconcileTasks, adoptLiveTasks, describeHistorySystemRow, workEndedByRestart } from './cp/cp-tasks-model.js';
+import { describeOrigin, reconcileTasks, adoptLiveTasks, describeHistorySystemRow, workEndedByRestart, isTaskRunning } from './cp/cp-tasks-model.js';
 import { renderTasksCard } from './cp/cp-tasks.js';
 import { sessionListLabel, collectTags, tagSession as tagClaudeSession, sessionActionsAvailable, sessionOpsSupported, labelledSessionIds, mergeSessionSearch, writeSessionTitle, forkSession as forkClaudeSession, deleteSession as deleteClaudeSession, fetchSubagentMessages, forkTitle, entryBefore, promptText, removeFrom, sessionRowParts, fillSelectOptions } from './cp/cp-sessions.js';
 import { contextCard, usageCard, mcpRows, rewindPreviewText, rewindResultText } from './cp/cp-usage-model.js';
@@ -162,9 +171,8 @@ function activeTab() { return _tabs[_activeTabIdx] || null; }
 let _browserEmbed = null;   // { sessionId, ws, canvas, ctx, urlBar, container }
 let _browserEmbedVisible = false;
 
-// ── CLI-installed status (claude binary detection) ──
-let _cliInstalled = null;   // null = unknown / missing, version string = installed
-let _cliUnsub = null;
+// ── CLI status (claude binary detection): the banner controller, ui-cli-banner.js ──
+let _cliBanner = null;
 
 // Marked.js (lazy loaded)
 let _marked = null;
@@ -304,7 +312,7 @@ const SLASH_COMMANDS = [
   { name: 'plugin', desc: 'List active plugins and skills', kind: 'info' },
   { name: 'status', desc: 'Show session status summary', kind: 'info' },
   { name: 'cost', desc: 'Toggle the cost widget', kind: 'action' },
-  { name: 'login', desc: 'Open Claude account login', kind: 'action' },
+  { name: 'login', desc: 'Sign this tab\'s Claude account in (opens the account menu)', kind: 'action' },
   { name: 'logout', desc: 'Open Claude account sign-out', kind: 'action' },
   { name: 'plan', desc: 'Toggle plan mode', kind: 'action' },
   { name: 'btw', desc: 'Add context while Claude is processing (Shift+Enter)', kind: 'info' },
@@ -318,7 +326,7 @@ const SLASH_COMMANDS = [
   { name: 'reload-plugins', desc: 'Reload plugins without restarting the session', kind: 'action', needs: 'reload_plugins' },
   { name: 'tasks', desc: 'Background work of this tab: running tasks (with stop) and scheduled wakeups', kind: 'info' },
   { name: 'usage', desc: 'This session\'s cost and the plan\'s usage limits', kind: 'info', needs: 'session_requests' },
-  { name: 'account', desc: 'Choose the Claude account this tab runs under', kind: 'action', needs: 'accounts' },
+  { name: 'account', desc: 'Choose and manage the Claude account of this tab (the header account menu)', kind: 'action', needs: 'accounts' },
   { name: 'effective-settings', desc: 'The Claude Code settings in effect here, and the file each comes from', kind: 'info', needs: 'settings_view' },
 ];
 
@@ -540,72 +548,7 @@ function injectStyles() {
     .cp-messages:has(.msg) .cp-empty,
     .cp-messages:has(.msg-status) .cp-empty { display: none; }
 
-    /* ── CLI-not-installed banner (sticky top of messages container) ── */
-    .cp-cli-banner {
-      flex-shrink: 0;
-      display: grid;
-      grid-template-columns: auto 1fr auto;
-      gap: 10px;
-      align-items: center;
-      margin: 6px 8px 0;
-      padding: 10px 12px;
-      border: 1px solid rgba(255,180,80,0.45);
-      border-radius: 8px;
-      background: rgba(255,180,80,0.08);
-      color: rgba(255,235,200,0.92);
-      font-size: 11px;
-      line-height: 1.4;
-      pointer-events: auto;
-      position: relative;
-      z-index: 5;
-    }
-    .cp-cli-banner-icon {
-      width: 22px; height: 22px;
-      display: flex; align-items: center; justify-content: center;
-      border-radius: 50%;
-      background: rgba(255,180,80,0.25);
-      color: rgba(255,210,140,1);
-      font-weight: 700;
-    }
-    .cp-cli-banner-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
-    .cp-cli-banner-title {
-      font-size: 12px; font-weight: 600;
-      color: rgba(255,210,140,0.95);
-    }
-    .cp-cli-banner-body {
-      font-size: 11px;
-      color: rgba(255,255,255,0.7);
-      word-break: break-word;
-    }
-    .cp-cli-banner-body code {
-      padding: 1px 5px;
-      background: rgba(0,0,0,0.35);
-      border-radius: 3px;
-      font-size: 10.5px;
-      color: rgba(255,255,255,0.85);
-    }
-    .cp-cli-banner-actions { display: flex; gap: 6px; }
-    .cp-cli-banner-link, .cp-cli-banner-recheck {
-      display: inline-flex; align-items: center; gap: 4px;
-      padding: 4px 9px;
-      font-size: 11px;
-      font-weight: 500;
-      border-radius: 4px;
-      border: 1px solid rgba(255,255,255,0.2);
-      background: rgba(255,255,255,0.05);
-      color: rgba(255,255,255,0.9);
-      text-decoration: none;
-      cursor: pointer;
-      user-select: none;
-      font-family: inherit;
-    }
-    .cp-cli-banner-link:hover, .cp-cli-banner-recheck:hover {
-      background: rgba(255,255,255,0.12);
-      border-color: rgba(255,255,255,0.4);
-    }
-    .cp-cli-banner-recheck:disabled { opacity: 0.5; cursor: default; }
-    .claude-panel.cp-cli-blocked .cp-send { opacity: 0.4 !important; cursor: not-allowed !important; }
-    .claude-panel.cp-cli-blocked .cp-input { opacity: 0.7; }
+    /* ── CLI banner (ui-cli-banner.js): its rules are in cp/cp-styles.js ── */
 
     /* ── Browser embed (live screencast inside panel) ── */
     .cp-browser-embed {
@@ -2928,6 +2871,7 @@ function newTabState(sessionId = null, label = 'New chat', id = null) {
     automationRunId: null,
     automationActive: false,
     automationOwnerId: null,
+    releasedRunId: null,      // the ended run this tab showed before the user continued it by hand
   };
 }
 
@@ -2970,6 +2914,7 @@ function connectTab(tab) {
   ws.addEventListener('open', () => {
     if (tab.ws !== ws) return;
     clearTimeout(tab.reconnectTimer);
+    _ensureClaudeTerminalAuth(tab);
     connectionOpened(tab); // no statement of the tab's mode was made on this socket yet
     // Reclaim this tab's server session if it outlived the old socket — a turn in
     // flight, a permission card, background agents or a scheduled wakeup. The
@@ -3041,6 +2986,7 @@ function switchTab(idx) {
   tab.messagesEl._exitToken = (tab.messagesEl._exitToken || 0) + 1; // cancel pending exits
   _attachMessagesEl(tab);
   tab.messagesEl.style.display = '';
+  _ensureClaudeTerminalAuth(tab);
   tab.scrollController?.setActive(true);
   tab.messagesEl.classList.remove('cp-tab-exit');
   tab.messagesEl.classList.add('cp-tab-enter');
@@ -3122,6 +3068,7 @@ function switchTab(idx) {
   _setCompactingUI(!!tab.compacting);
   populateViewDropdown(_panel?.querySelector('#cp-view'), tab);
   populateModeDropdown(_panel?.querySelector('#cp-mode'), tab);
+  _renderAccountMenu();
   _paintTemporary(tab);
   saveTabs();
 }
@@ -3130,17 +3077,22 @@ function closeTab(idx, { detachAutomation = false } = {}) {
   if (idx < 0 || idx >= _tabs.length) return;
   const tab = _tabs[idx];
   if (tab.automationRunId && !detachAutomation) {
+    const runId = tab.automationRunId;
     window.dispatchEvent(new CustomEvent('native-loop:dismissed', {
-      detail: { runId: tab.automationRunId },
+      detail: { runId },
     }));
-    fetch('/api/loop/stop', {
+    // A worker that finished its task is completed; any other run is stopped.
+    endWorkerRunOnClose(runId, () => fetch('/api/loop/stop', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ runId: tab.automationRunId }),
-    }).catch(() => {});
+      body: JSON.stringify({ runId }),
+    }).catch(() => {}), { busy: hasLiveBackgroundWork(tab) });
   }
+  if (tab.automationRunId) forgetWorkerEnd(tab.automationRunId);
   flushSessionSnapshotSave(tab);
   recordHookEvent(tab, 'SessionEnd', tab.sessionId || '(new)');
+  tab.authView?.dispose();
+  tab.terminalAuthView?.dispose();
   tab.closed = true;
   tab.titleRequestController?.abort();
   tab.titleRequestController = null;
@@ -3264,7 +3216,7 @@ function saveTabs() {
   try {
     // A temporary tab is never written: not the tab, its label, its queue or its session id.
     const kept = persistableTabs(_tabs, _activeTabIdx);
-    const localTabs = kept.tabs.map(t => ({ id: t.id, sessionId: t.sessionId, label: t.label, titleState: t.titleState === 'generating' ? 'default' : (t.titleState || 'default'), sessionCost: t.sessionCost || 0, running: t.running || false, project: t.project || '', model: t.model || '', effort: t.effort || 'off', planMode: t.planMode || false, ...savedMode(t), toolPolicy: t.toolPolicy || 'full', accountId: t.accountId || '', session: normalizeSession(t.session), transcriptAt: t.transcriptAt || null, planFilePath: t.planFilePath || '', conversation: t.conversation || '', queue: t.queue || [], queuePaused: t.queuePaused || false, automationRunId: t.automationRunId || null, automationActive: !!t.automationActive, automationOwnerId: t.automationOwnerId || null }));
+    const localTabs = kept.tabs.map(t => ({ id: t.id, sessionId: t.sessionId, label: t.label, titleState: t.titleState === 'generating' ? 'default' : (t.titleState || 'default'), sessionCost: t.sessionCost || 0, running: t.running || false, project: t.project || '', model: t.model || '', effort: t.effort || 'off', planMode: t.planMode || false, ...savedMode(t), toolPolicy: t.toolPolicy || 'full', accountId: t.accountId || '', session: normalizeSession(t.session), transcriptAt: t.transcriptAt || null, planFilePath: t.planFilePath || '', conversation: t.conversation || '', queue: t.queue || [], queuePaused: t.queuePaused || false, automationRunId: t.automationRunId || null, automationActive: !!t.automationActive, automationOwnerId: t.automationOwnerId || null, releasedRunId: t.releasedRunId || null }));
     const localRunIds = new Set(localTabs.map((tab) => tab.automationRunId).filter(Boolean));
     let foreignAutomationTabs = [];
     try {
@@ -3406,6 +3358,7 @@ function restoreTabs() {
           if (t && saved.automationRunId) t.automationRunId = saved.automationRunId;
           if (t && saved.automationRunId) t.automationActive = !!saved.automationActive;
           if (t && saved.automationRunId) t.automationOwnerId = saved.automationOwnerId || null;
+          if (t && saved.releasedRunId && !saved.automationRunId) t.releasedRunId = saved.releasedRunId;
         }
         if (_tabs.length) {
           switchTab(Math.min(data.activeIdx || 0, _tabs.length - 1));
@@ -4470,7 +4423,7 @@ function writeSessionSnapshot(tab) {
   const sid = tab?.sessionId || null;
   const $msgs = tab?.messagesEl || null;
   if (!sid || !$msgs) return;
-  const html = $msgs.innerHTML || '';
+  const html = providerAuthSnapshot($msgs);
   if (!html.trim()) return;
   // Skip snapshot if the transcript only contains the empty-state placeholder
   if ($msgs.children.length === 1 && $msgs.firstElementChild?.classList?.contains('cp-empty')) return;
@@ -5125,7 +5078,7 @@ function _contextMenuData(tab, { full = false } = {}) {
     folder: tab.init?.cwd || tab.project || '',
     // The mode as the project bar words it (it knows Bypass and "from settings").
     mode: ($mode && !$mode.hidden && $mode.querySelector('.cp-dd-label')?.textContent) || tab.permissionMode || '',
-    account: [tab.accountInfo?.email, tab.accountInfo?.organization].filter(Boolean).join(' · '),
+    account: [tab.accountInfo?.authMethod === 'apiKey' ? 'API key' : tab.accountInfo?.email, tab.accountInfo?.organization].filter(Boolean).join(' · '),
     flags: sessionFlags(tab.session, { toolPolicy: tab.toolPolicy, fastModeState: tab.fastModeState, account: tab.accountId }),
     limit: tab.rateLimit?.text || '',
     backgroundTasks: (tab.backgroundWork || []).length,
@@ -5314,6 +5267,7 @@ function _processTabMsg(tab, msg) {
       if (tab === activeTab()) {
         renderStatusline(tab);
         populateModeDropdown(_panel?.querySelector('#cp-mode'), tab);
+        _renderAccountMenu();
       }
       break;
     }
@@ -5537,6 +5491,8 @@ function _processTabMsg(tab, msg) {
         break;
       }
       appendError(tab, msg.message);
+      // The tab's account is gone, or belongs to another conversation: the accounts card is where to choose.
+      if (msg.code === 'account_unavailable' || msg.code === 'account_change_refused') _showAccounts(tab);
       notify('panel', NOTIF_TYPE.ERROR, tab.label || 'Claude Code', { tabId: tab.id });
       if (typeof msg.message === 'string' && /Claude CLI not found|ENOENT/i.test(msg.message)) {
         flagClaudeCliInstallFailure(msg.message);
@@ -7445,7 +7401,57 @@ function handleControlRequest(tab, msg) {
 // What a query tells the bridge about this tab's session: the permission mode
 // (or that the user's own settings should pick it), the tool policy, and what
 // this panel can render. Keys a server that predates them ignores.
+// ── Greeting (shared/greeting/, lib/greeting/) ──
+// What SynaBun says when a person comes back and opens a new chat: one or two sentences in the
+// empty state, written by SynaBun ahead of time (this session's model never greets). Only for a
+// tab that holds no conversation yet: never a resumed session, a temporary chat or a tab showing
+// an automation run (hence the short wait: those are marked right after the tab is made). The
+// server decides whether this opening is a return worth greeting; an older server answers nothing.
+// Asked from _paintTemporary(), which runs wherever the conversation area is rebuilt. Nothing of it
+// is kept on the tab object (what a tab carries over, and what is saved of it, is listed elsewhere).
+const _greetingOf = new WeakMap(); // tab → { seq, host, greeting: { id, session } | null }
+function _greetingState(tab) {
+  let held = _greetingOf.get(tab);
+  if (!held) { held = { seq: 0, host: null, greeting: null }; _greetingOf.set(tab, held); }
+  return held;
+}
+function _offerGreetingSoon(tab) {
+  if (!tab) return;
+  setTimeout(() => { try { _offerGreeting(tab); } catch { /* a tab always opens */ } }, 300);
+}
+function _offerGreeting(tab) {
+  if (!_tabs.includes(tab) || tab.sessionId || tab.temporary || tab.automationRunId || tab.automationActive || tab.running) return;
+  const host = tab.messagesEl?.querySelector(':scope > .cp-empty');
+  if (!host || host.dataset.greetingAsked === '1') return;
+  host.dataset.greetingAsked = '1';
+  const held = _greetingState(tab);
+  // The conversation area was rebuilt: a new conversation in the same tab is a new opening.
+  if (held.host && held.host !== host) { held.seq += 1; held.greeting = null; }
+  held.host = host;
+  const session = `${tab.id}.${held.seq}`;
+  const cwd = tab.project || ddGetValue(_panel?.querySelector('#cp-project')) || '';
+  mountGreeting(host, {
+    surface: 'claude-panel', session, cwd,
+    onOpenMemory: (id) => { if (id) emit('memory:open', { id }); },
+    isCurrent: () => !tab.sessionId && !tab.temporary && !tab.automationRunId && held.host === host && tab.messagesEl?.contains(host),
+  }).then((greeting) => {
+    if (held.host === host) held.greeting = greeting ? { id: greeting.id, session } : null;
+  }).catch(() => {});
+}
+
+// The greeting a chat opened with goes back once, with its first prompt: the bridge tells the model
+// what was said (capability 'greeting'). A temporary chat names nothing, so it takes none.
+function _echoGreeting(tab, msg) {
+  const held = msg.type === 'query' ? _greetingOf.get(tab) : null;
+  if (!held?.greeting?.id) return;
+  if (hasCapability(tab, 'greeting') && !tab.temporary) msg.greetingId = held.greeting.id;
+  forgetGreeting('claude-panel', held.greeting.session);
+  held.greeting = null;
+}
+
 function _applySessionOptions(tab, msg) {
+  // The greeting this chat opened with goes back once, with its first prompt.
+  _echoGreeting(tab, msg);
   // The tab's own mode (statedMode() in cp/cp-permission-model.js: Bypass only
   // as the user's recorded pick). A tab that never picked one leaves it to the
   // user's Claude Code settings (permissions.defaultMode).
@@ -7471,6 +7477,8 @@ function _applySessionOptions(tab, msg) {
 function _paintTemporary(tab) {
   if (!tab) return;
   paintTemporary(tab, { capable: hasCapability(tab, TEMPORARY_CAPABILITY), onToggle: (on) => _chooseTemporary(tab, on) });
+  // The conversation area was (re)built: a new chat may open with SynaBun's greeting.
+  _offerGreetingSoon(tab);
 }
 
 // The user's choice on a new tab. A process kept ready for the other kind of
@@ -7506,6 +7514,7 @@ function _afterTemporary(tab, sid, label) {
   for (const waiting of tab._sessionRequests?.values() || []) { clearTimeout(waiting.timer); try { waiting.reject(new Error('The temporary chat has ended.')); } catch {} }
   // An open history search lists its prompts.
   if (tab === activeTab()) _panel?.querySelector('.cp-rsearch')?.remove();
+  tab.terminalAuthView?.dispose();
   tabAfterTemporary(tab, newTabState(sid, label || 'New chat', tab.id));
 }
 
@@ -8556,47 +8565,149 @@ function _showUsage(tab) {
   }).catch(err => appendInfoCard(tab, { title: 'Usage', kind: 'info', body: err.message }));
 }
 
-// /account: the Claude accounts set up in SynaBun, and which one this tab uses.
+// ── Claude accounts ──
+// Every account and its state come from the server (lib/claude-accounts.js
+// describe(): its mode, whether it is signed in, its identity: an email or a
+// masked key, never a key); account-view.js decides the words. One list for
+// every tab, and one place to choose and manage accounts: the account menu in
+// the header (account-menu.js, the same component as the Codex panel's).
+// /account, /login and the sign-in screen's "Other accounts…" open it.
+// `claude:accounts-changed` (any window, any surface) reloads the list.
 // A conversation belongs to the account it started under (its transcript lives
-// in that account's config directory), so the account is chosen before the
-// first message of a tab.
-function _showAccounts(tab, wanted = '') {
-  if (!hasCapability(tab, 'accounts')) { appendStatus(tab, 'Choosing an account needs a newer SynaBun server: restart it to enable this.'); return; }
-  fetch('/api/claude/accounts').then(r => r.json()).then((d) => {
-    const accounts = Array.isArray(d?.accounts) ? d.accounts : [];
-    const pick = (account) => {
-      const id = account.isDefault ? '' : account.id;
-      if (id === (tab.accountId || '')) { appendStatus(tab, `This tab already uses ${account.label}.`); return; }
-      if (tab.sessionId) { appendStatus(tab, 'This conversation belongs to the account it started under. Start a new chat (or a new tab) to use another account.'); return; }
-      if (!account.loggedIn) { appendStatus(tab, `${account.label} is not signed in yet. Sign it in from Settings first.`); return; }
-      tab.accountId = id;
-      saveTabs();
-      if (tab === activeTab()) renderStatusline(tab);
-      appendStatus(tab, `This tab runs under ${account.label}${account.email ? ` (${account.email})` : ''}.`);
-    };
-    if (wanted) {
+// in that account's config directory): a tab with one opens another account in
+// a new chat, and the tab's own account changes only before its first message.
+let _claudeAccountRows = null;
+let _claudeAccountsLoad = null;
+let _claudeAccountsError = '';
+let _accountMenu = null;
+function _loadClaudeAccounts({ force = false, refresh = false } = {}) {
+  if (!force && !refresh && _claudeAccountRows) return Promise.resolve(_claudeAccountRows);
+  if (_claudeAccountsLoad && !refresh) return _claudeAccountsLoad;
+  const load = fetch(`/api/claude/accounts${refresh ? '?refresh=true' : ''}`, { cache: 'no-store' })
+    .then(r => r.ok ? r.json() : Promise.reject(new Error(accountText('readFailed'))))
+    .then((d) => {
+      _claudeAccountRows = Array.isArray(d?.accounts) ? d.accounts : [];
+      _claudeAccountsError = '';
+      _claudeAccountsChanged();
+      return _claudeAccountRows;
+    })
+    .catch((error) => { _claudeAccountsError = accountText('readFailed'); _claudeAccountsChanged(); throw error; })
+    .finally(() => { if (_claudeAccountsLoad === load) _claudeAccountsLoad = null; });
+  _claudeAccountsLoad = load;
+  return load;
+}
+function _claudeAccountRow(id) {
+  return (_claudeAccountRows || []).find(row => row.id === serverAccountId(id)) || null;
+}
+function _claudeAccountsChanged() {
+  _renderAccountMenu();
+}
+
+// The header account menu: the active tab's account and what it runs on, every account, and their
+// management (add, sign in with Claude, an API key, the "Uses" switch, sign out, rename, remove).
+function _mountAccountMenu() {
+  if (_accountMenu || !_panel) return _accountMenu;
+  const actions = _panel.querySelector('.cp-header-actions');
+  if (!actions) return null;
+  const path = id => `/api/claude/accounts/${encodeURIComponent(id)}`;
+  _accountMenu = mountAccountMenu({
+    provider: 'claude', container: actions, before: actions.firstChild, layer: () => _panel,
+    read: () => {
+      const tab = activeTab();
+      return {
+        rows: _claudeAccountRows || [], currentId: tab?.accountId || '', hasConversation: !!tab?.sessionId,
+        available: !!tab && hasCapability(tab, 'accounts') && !tab.automationActive,
+        busy: !!(tab?.running || tab?.automationActive), loading: !_claudeAccountRows, error: _claudeAccountsError,
+      };
+    },
+    actions: {
+      load: ({ refresh }) => _loadClaudeAccounts({ force: true, refresh }),
+      pick: (id) => { const tab = activeTab(); if (tab) _pickAccount(tab, id); },
+      add: async () => (await _claudeAuthRequest('/api/claude/accounts', { method: 'POST', body: '{}' })).account,
+      signIn: (id) => startProviderTerminalLogin('claude', id, `Claude sign-in · ${_claudeAccountRow(id)?.label || id}`),
+      saveKey: (id, key) => providerApiKeyRequest('claude', id, key),
+      setMode: (id, mode) => _claudeAuthRequest(path(id), { method: 'PATCH', body: JSON.stringify({ mode }) }),
+      signOut: (id, credential) => _claudeAuthRequest(`${path(id)}/auth/logout`, { method: 'POST', body: JSON.stringify({ credential }) }),
+      rename: (id, label) => _claudeAuthRequest(path(id), { method: 'PATCH', body: JSON.stringify({ label }) }),
+      remove: (id) => _claudeAuthRequest(path(id), { method: 'DELETE' }),
+    },
+  });
+  return _accountMenu;
+}
+function _renderAccountMenu() {
+  if (!_accountMenu) return;
+  const tab = activeTab();
+  if (tab && hasCapability(tab, 'accounts') && !_claudeAccountRows && !_claudeAccountsLoad) _loadClaudeAccounts().catch(() => {});
+  _accountMenu.render();
+}
+
+// Pick an account for a tab: now when it has no conversation yet, else in a new chat (a new tab).
+function _pickAccount(tab, id) {
+  const rows = _claudeAccountRows || [];
+  const plan = accountSwitchPlan({ rows, currentId: tab.accountId || '', targetId: id, hasConversation: !!tab.sessionId });
+  const target = _claudeAccountRow(id);
+  if (plan.effect === 'missing' || plan.effect === 'same') { appendStatus(tab, plan.message); return; }
+  if (plan.effect === 'next-chat') {
+    if (_tabs.length >= MAX_TABS) { appendStatus(tab, `${plan.message} ${accountText('tooManyTabs')}`); return; }
+    const fresh = createTab(null, 'New chat');
+    fresh.accountId = tabAccountId(id);
+    _ensureClaudeTerminalAuth(fresh);
+    saveTabs();
+    if (fresh === activeTab()) _renderAccountMenu();
+    appendStatus(fresh, accountText('newChatUnder', { label: target ? accountName(target) : id }));
+    return;
+  }
+  tab.accountId = tabAccountId(id);
+  _ensureClaudeTerminalAuth(tab);
+  saveTabs();
+  if (tab === activeTab()) { renderStatusline(tab); _renderAccountMenu(); }
+  appendStatus(tab, plan.message);
+}
+
+// /account (and /login, and the sign-in screen's "Other accounts…"): the header account menu.
+// `/account <name>` picks that account at once; `manage` opens one account's management.
+function _showAccounts(tab, wanted = '', { manage = '' } = {}) {
+  if (!hasCapability(tab, 'accounts')) { appendStatus(tab, accountText('needsServer')); return; }
+  if (wanted) {
+    _loadClaudeAccounts({ force: true }).then((accounts) => {
       const w = wanted.trim().toLowerCase();
-      const match = accounts.find(a => a.id.toLowerCase() === w || String(a.label || '').toLowerCase() === w || String(a.email || '').toLowerCase() === w);
+      const match = accounts.find(a => a.id.toLowerCase() === w || String(a.label || '').toLowerCase() === w || String(a.subscription?.email || '').toLowerCase() === w);
       if (!match) { appendStatus(tab, `No account "${wanted}". Use /account to list them.`); return; }
-      pick(match);
-      return;
-    }
-    const current = tab.accountId || 'default';
-    const html = accounts.map(a => `<div class="cp-task-row" data-account="${esc(a.id)}"><div class="cp-task-head">
-        <span class="cp-task-title">${esc(a.label)}${a.id === current ? ' ✓' : ''}</span>
-        <span class="cp-chip ${a.loggedIn ? 'cp-chip-ok' : 'cp-chip-warn'}">${a.loggedIn ? 'signed in' : 'not signed in'}</span>
-        ${a.id !== current ? '<button type="button" class="cp-engine-retry" data-use>Use for this tab</button>' : ''}</div>
-        <div class="cp-task-stats">${esc([a.email, a.organization].filter(Boolean).join(' · ') || 'no identity yet')}</div></div>`).join('')
-      + '<div class="cp-info-row muted">Accounts are added and signed in from Settings. The default account is what Claude Code uses in a terminal.</div>';
-    const card = appendInfoCard(tab, { title: 'Claude accounts', kind: 'info', html });
-    card?.querySelectorAll('[data-use]').forEach((btn) => {
-      btn.addEventListener('click', () => {
-        const id = btn.closest('[data-account]')?.dataset.account;
-        const account = accounts.find(a => a.id === id);
-        if (account) pick(account);
-      });
-    });
-  }).catch(() => appendStatus(tab, 'Could not read the accounts.'));
+      _pickAccount(tab, match.id);
+    }).catch(() => appendStatus(tab, accountText('readFailed')));
+    return;
+  }
+  if (tab !== activeTab()) return;
+  _mountAccountMenu()?.open(manage ? { manage } : {});
+}
+
+async function _claudeAuthRequest(url, options = {}) {
+  const response = await fetch(url, { ...options, cache: 'no-store', headers: { 'Content-Type': 'application/json' } });
+  const data = await response.json().catch(() => ({}));
+  if (!response.ok || data.error) throw new Error(data.error || 'Claude authentication request failed.');
+  return data;
+}
+
+function _ensureClaudeTerminalAuth(tab) {
+  const accountId = tab.accountId || 'default';
+  if (tab.closed || !tab.messagesEl) return;
+  if (tab.terminalAuthView && tab.terminalAuthAccount === accountId) { void tab.terminalAuthView.refresh(); return; }
+  tab.terminalAuthView?.dispose();
+  tab.terminalAuthAccount = accountId;
+  const named = accountId !== 'default' ? _claudeAccountRow(accountId) : null;
+  tab.terminalAuthView = mountProviderTerminalAuth({
+    host: tab.messagesEl, provider: 'claude', accountId, logo: CLAUDE_ICON,
+    ...(named ? { message: `Sign in to Claude to use ${named.label}.` } : {}),
+    // Another account (or a new one) is one click away from the sign-in screen: the header account menu.
+    moreAction: { label: accountText('otherAccounts'), run: () => _showAccounts(tab) },
+    isCurrent: () => !tab.closed && (tab.accountId || 'default') === accountId,
+    readAccount: async () => {
+      const account = (await _claudeAuthRequest(`/api/claude/accounts/${encodeURIComponent(accountId)}/auth?refresh=true`)).account;
+      if (!tab.closed && (tab.accountId || 'default') === accountId) tab.accountInfo = account;
+      return account;
+    },
+    onSignedIn: () => { _loadClaudeAccounts({ force: true }).catch(() => {}); },
+  });
 }
 
 // /mcp: every server of the session with its state, and what can be done about it.
@@ -9115,8 +9226,15 @@ function runSlashCommand(tab, raw) {
       return true;
     }
     case 'cost': { clearInput(); emit('cost:toggle'); return true; }
-    case 'login': { clearInput(); window.open('https://claude.ai/login', '_blank'); return true; }
-    case 'logout': { clearInput(); window.open('https://claude.ai/logout', '_blank'); return true; }
+    case 'login': { clearInput(); _showAccounts(tab, '', { manage: serverAccountId(tab.accountId) }); return true; }
+    case 'logout': {
+      clearInput();
+      if (tab.running || tab.automationActive) { appendStatus(tab, 'Finish or stop the current turn before signing out.'); return true; }
+      void _claudeAuthRequest(`/api/claude/accounts/${encodeURIComponent(tab.accountId || 'default')}/auth/logout`, { method: 'POST', body: '{}' })
+        .then(() => { tab.accountInfo = null; tab.terminalAuthView?.update({ loggedIn: false }); })
+        .catch(() => appendStatus(tab, 'Could not sign out. Try again.'));
+      return true;
+    }
     case 'plan': {
       clearInput();
       // The one path for plan mode: on is the user's pick of Plan, off goes back
@@ -9138,8 +9256,9 @@ function runSlashCommand(tab, raw) {
 function send({ shift = false } = {}) {
   const tab = activeTab();
   if (!tab) return;
-  if ((_cliInstalled === null || _cliInstallFailureForced) && !tab.automationActive) {
-    notify({ type: NOTIF_TYPE.WARN, title: 'Claude CLI not installed', body: 'Install the Claude Code CLI before sending a message.' });
+  if (_cliBlocked() && !tab.automationActive) {
+    // The banner above the transcript says why, and offers the way out.
+    _cliBanner?.nudge();
     return;
   }
   const $input = _panel?.querySelector('#cp-input');
@@ -9228,6 +9347,9 @@ function send({ shift = false } = {}) {
   // A temporary chat that is over, or one the running server would save: nothing is sent.
   { const refusal = temporaryRefusal(tab, { capable: hasCapability(tab, TEMPORARY_CAPABILITY) }); if (refusal) { appendStatus(tab, refusal); return; } }
 
+  // A message of the user's own in the tab of a run that ended: the tab is theirs from here on.
+  releaseAutomationForManualUse(tab);
+
   // ── !bash shortcut — prefix a Bash-tool hint so Claude executes the command ──
   if (text.startsWith('!') && text.length > 1) {
     const cmd = text.slice(1).trim();
@@ -10030,116 +10152,50 @@ function syncReservedWidth(knownWidth) {
 }
 
 // ── CLI installation status (banner + send-block) ──
-let _cliInstallFailureForced = false;
-let _cliFailureReason = null;
-
-function _ensureCliBannerEl() {
-  if (!_panel) return null;
-  const container = _panel.querySelector('#cp-messages-container');
-  if (!container || !container.parentNode) return null;
-  let banner = container.parentNode.querySelector(':scope > .cp-cli-banner');
-  if (banner) { _renderCliBannerContent(banner); return banner; }
-  const url = getCliDocUrl('claude-code');
-  banner = document.createElement('div');
-  banner.className = 'cp-cli-banner';
-  banner.innerHTML = `
-    <div class="cp-cli-banner-icon">!</div>
-    <div class="cp-cli-banner-text">
-      <div class="cp-cli-banner-title"></div>
-      <div class="cp-cli-banner-body"></div>
-    </div>
-    <div class="cp-cli-banner-actions">
-      <a class="cp-cli-banner-link" href="${esc(url || '#')}" target="_blank" rel="noopener noreferrer">Install guide</a>
-      <button class="cp-cli-banner-recheck" type="button">Re-check</button>
-    </div>
-  `;
-  container.parentNode.insertBefore(banner, container);
-  const btn = banner.querySelector('.cp-cli-banner-recheck');
-  btn?.addEventListener('click', async () => {
-    btn.disabled = true;
-    btn.textContent = 'Checking…';
-    try { await recheckCliStatus('claude-code'); }
-    finally {
-      if (btn.isConnected) {
-        btn.disabled = false;
-        btn.textContent = 'Re-check';
-      }
-    }
-  });
-  _renderCliBannerContent(banner);
-  return banner;
-}
-
-// Distinguish "never installed" from "installed but would not launch" —
-// telling the user to install something already present sends them chasing a
-// reinstall they do not need.
-function _renderCliBannerContent(banner) {
-  const titleEl = banner.querySelector('.cp-cli-banner-title');
-  const bodyEl = banner.querySelector('.cp-cli-banner-body');
-  if (!titleEl || !bodyEl) return;
-  const label = getCliLabel('claude-code');
-  bodyEl.replaceChildren();
-
-  if (_cliInstalled === null) {
-    titleEl.textContent = `${label} CLI not installed`;
-    bodyEl.append('Run ');
-    const code = document.createElement('code');
-    code.textContent = getCliInstallCommand('claude-code');
-    bodyEl.append(code, ' or follow the install guide.');
-    return;
-  }
-
-  titleEl.textContent = `${label} CLI failed to start`;
-  bodyEl.append(`${label} v${_cliInstalled} is installed, but it could not be launched. `);
-  if (_cliFailureReason) {
-    const code = document.createElement('code');
-    code.textContent = _cliFailureReason;
-    bodyEl.append(code);
-  } else {
-    bodyEl.append('Check the CLI path in Settings, then re-check.');
+// One controller (ui-cli-banner.js) draws the banner above the transcript while
+// Claude Code is not usable: not installed (with Install, which runs Anthropic's
+// own installer on the server), being installed, failed to install, or found but
+// failed to start (with the error it gave). It also holds the class that keeps
+// sending off. What it says is cli-install-view.js (`cliInstall.*` strings).
+function _cliBannerController() {
+  if (!_cliBanner) {
+    _cliBanner = mountCliBanner({
+      toolKey: 'claude-code',
+      prefix: 'cp',
+      panel: () => _panel,
+      anchor: () => _panel?.querySelector('#cp-messages-container'),
+      onBlockedChange: (blocked) => {
+        const $send = _panel?.querySelector('#cp-send');
+        if (!$send) return;
+        if (blocked) { $send.disabled = true; return; }
+        const tab = activeTab();
+        const $input = _panel?.querySelector('#cp-input');
+        if (tab?.running) $send.disabled = false;
+        else $send.disabled = !$input?.value.trim() && !tab?.attachedImages?.length && !tab?.attachedFiles?.length;
+      },
+    });
   }
+  return _cliBanner;
 }
 
-function _removeCliBannerEl() {
-  if (!_panel) return;
-  const banner = _panel.querySelector(':scope > .cp-cli-banner');
-  banner?.remove();
+/** Sending is held back: Claude Code is missing, broken, failed to install, or being installed. */
+function _cliBlocked() {
+  return !!_cliBanner?.blocked();
 }
 
 function _refreshCliBanners() {
   if (!_panel) return;
-  const missing = _cliInstalled === null || _cliInstallFailureForced;
-  _panel.classList.toggle('cp-cli-blocked', missing);
-  if (missing) _ensureCliBannerEl();
-  else _removeCliBannerEl();
-  const $send = _panel.querySelector('#cp-send');
-  if ($send && missing) $send.disabled = true;
+  _cliBannerController().refresh();
 }
 
+// A session could not start Claude Code: "failed to start" with its words at
+// once, then the server is asked again and its answer decides what stays.
 export function flagClaudeCliInstallFailure(reason = null) {
-  _cliInstallFailureForced = true;
-  _cliFailureReason = reason ? String(reason).slice(0, 300) : null;
-  _refreshCliBanners();
-  // Clear from the RETURNED value, not the subscriber callback: the callback
-  // only fires when the version string changes, and a launch failure does not
-  // change it, so the banner would otherwise latch permanently.
-  recheckCliStatus('claude-code')
-    .then((info) => {
-      if (!info?.installed) return;
-      _cliInstallFailureForced = false;
-      _cliFailureReason = null;
-      _refreshCliBanners();
-    })
-    .catch(() => {});
+  _cliBannerController().flagFailure(reason);
 }
 
 function _ensureCliSubscription() {
-  if (_cliUnsub) return;
-  _cliUnsub = subscribeCliStatus('claude-code', (info) => {
-    _cliInstalled = info?.installed || null;
-    if (_cliInstalled) { _cliInstallFailureForced = false; _cliFailureReason = null; }
-    _refreshCliBanners();
-  });
+  _cliBannerController();
 }
 
 // ── Delegated transcript actions ──
@@ -10162,15 +10218,7 @@ function _onMessagesClick(e) {
     });
     return;
   }
-  const link = e.target.closest('a.file-link');
-  if (link) {
-    e.preventDefault();
-    const path = (link.textContent || '').replace(/:\d+$/, '');
-    navigator.clipboard.writeText(path);
-    link.style.opacity = '0.5';
-    setTimeout(() => { link.style.opacity = ''; }, 300);
-    return;
-  }
+  // File links (a.file-link, and the links of a message's Markdown) are taken by _fileLinkOptions below.
   const hdr = e.target.closest('.tool-hdr');
   if (hdr && !e.target.closest('button, a, input, select, textarea')) {
     const card = hdr.closest('.tool-card');
@@ -10183,6 +10231,25 @@ function _onMessagesClick(e) {
   }
 }
 
+// ── File links ──
+// A link to a file the code editor can open opens it there (ui-file-links.js, shared with the other panels).
+// The same delegation as above: it covers streaming, finished and snapshot-restored messages of every tab.
+const _fileLinkOptions = {
+  // A relative path is a path in the folder of the tab the message belongs to.
+  cwd: (link) => {
+    const tab = _tabs.find((t) => t.messagesEl?.contains(link)) || activeTab();
+    return tab?.init?.cwd || tab?.project || '';
+  },
+  textLinks: 'a.file-link',
+  // A path the editor does not open keeps what a click on it did: it is copied.
+  copyPath: (link) => {
+    const path = (link.textContent || '').replace(/:\d+$/, '');
+    link.style.opacity = '0.5';
+    setTimeout(() => { link.style.opacity = ''; }, 300);
+    return navigator.clipboard.writeText(path);
+  },
+};
+
 // ── Public API ──
 async function _ensureClaudePanelReady() {
   if (!_panel) {
@@ -10197,6 +10264,7 @@ async function _ensureClaudePanelReady() {
     });
     wireEvents();
     _panel.querySelector('#cp-messages-container')?.addEventListener('click', _onMessagesClick);
+    wireFileLinks(_panel.querySelector('#cp-messages-container'), _fileLinkOptions);
     await loadConfig();   // must complete before restoreTabs — checks server boot ID
     loadSkills();
     restoreTabs();
@@ -10248,6 +10316,18 @@ export async function attachClaudeAutomation(run, { focus = !!run?.focus, isCanc
   if (!run?.runId || !run?.providerSessionId) return { ok: false, reason: 'identity_pending' };
   await _ensureClaudePanelReady();
   if (isCancelled()) return { ok: false, reason: 'dismissed' };
+  // The user continued this run's tab by hand after the run ended: it stays theirs. The dock's
+  // Focus raises it; the run is let go again, and nothing in the tab changes.
+  const own = _tabs.find((entry) => !entry.automationRunId && entry.releasedRunId === run.runId && entry.sessionId === run.providerSessionId);
+  if (own && !(run.status === 'starting' || run.status === 'running')) {
+    window.dispatchEvent(new CustomEvent('native-loop:dismissed', { detail: { runId: run.runId } }));
+    if (focus) {
+      if (!_visible) await toggleClaudePanel();
+      const ownIdx = _tabs.indexOf(own);
+      if (ownIdx >= 0) switchTab(ownIdx);
+    }
+    return { ok: true, tabId: own.id, released: true };
+  }
   let tab = _tabs.find((entry) => entry.automationRunId === run.runId)
     || _tabs.find((entry) => entry.sessionId === run.providerSessionId);
   if (!tab) {
@@ -10270,6 +10350,7 @@ export async function attachClaudeAutomation(run, { focus = !!run?.focus, isCanc
   tab.automationRunId = run.runId;
   tab.automationActive = running;
   tab.automationOwnerId = nativeLoopWindowId;
+  tab.releasedRunId = null;
   tab.sdkMode = true;
   tab.sessionId = run.providerSessionId;
   tab.label = run.title || tab.label || 'Automation';
@@ -10288,10 +10369,12 @@ export async function attachClaudeAutomation(run, { focus = !!run?.focus, isCanc
       return { ok: false, reason: 'dismissed' };
     }
   }
-  if (run.status === 'failed' && run.error && tab._automationLifecycleError !== run.error) {
+  // (A dispatched worker's failure, with its reason, is on its end card.)
+  if (run.status === 'failed' && run.error && !isDispatchedRun(run) && tab._automationLifecycleError !== run.error) {
     tab._automationLifecycleError = run.error;
     appendError(tab, run.error);
   }
+  trackWorkerEnd(run, { apply: (view) => showWorkerEnd(tab, view), busy: hasLiveBackgroundWork(tab) });
   // The mode control is hidden while the run is active and back when it ended.
   if (tab === activeTab()) populateModeDropdown(_panel?.querySelector('#cp-mode'), tab);
   const idx = _tabs.indexOf(tab);
@@ -10319,10 +10402,60 @@ export function handleClaudeAutomationEvent(runId, payload) {
     return true;
   }
   if (event.type === 'synabun.error') {
+    // Every run's end disposes its SDK query, and the SDK says so in these words: not a failure.
+    if (isEndOfRunAbort(event.message)) return true;
     appendError(tab, event.message || 'Claude Code automation failed');
     return true;
   }
   handleTabMsg(tab, { type: 'event', event, fromRun: true });
+  // Background agents still running keep a warm worker's "Task complete" away.
+  if (event.type === 'system' || event.type === 'result') updateWorkerEndBusy(runId, hasLiveBackgroundWork(tab));
+  return true;
+}
+
+function hasLiveBackgroundWork(tab) {
+  for (const task of tab?.tasks?.values?.() || []) {
+    if (task && !task.ambient && isTaskRunning(task)) return true;
+  }
+  return false;
+}
+
+// The end of a worker the Assistant dispatched (ui-worker-end.js): one card,
+// the last row of its transcript. Its button closes this tab the way the X
+// does (a warm worker that finished its task is completed, one still at work
+// is stopped; its record stays for the Assistant) and shows the Assistant
+// session that dispatched it.
+function showWorkerEnd(tab, view) {
+  tab._workerEnd = view || null;
+  const $msgs = tab.messagesEl;
+  if (!$msgs || tab.closed) return;
+  $msgs.querySelectorAll(`.${WORKER_END_CLASS}`).forEach((el) => el.remove());
+  if (!view) return;
+  $msgs.appendChild(buildWorkerEndCard(view, {
+    classes: { card: 'cp-worker-end', title: 'post-plan-header', actions: 'post-plan-actions', button: 'post-plan-action pp-primary' },
+    onBack: () => {
+      const idx = _tabs.indexOf(tab);
+      if (idx >= 0) closeTab(idx);
+      backToAssistant(view.assistantSessionId);
+    },
+  }));
+  if (tab === activeTab()) scrollEnd(true);
+}
+
+// The user sends a message of their own in the tab of a run that ended (Codex's
+// releaseAutomationForManualUse): the run's end card goes, the tab stops following
+// the run, and the router leaves the run alone, so nothing of it comes back here.
+// A run that is still going keeps its tab (the composer refuses a manual turn then).
+function releaseAutomationForManualUse(tab) {
+  if (!tab?.automationRunId || tab.automationActive) return false;
+  const runId = tab.automationRunId;
+  forgetWorkerEnd(runId);
+  showWorkerEnd(tab, null);
+  tab.automationRunId = null;
+  tab.automationOwnerId = null;
+  tab.releasedRunId = runId;
+  window.dispatchEvent(new CustomEvent('native-loop:dismissed', { detail: { runId } }));
+  saveTabs();
   return true;
 }
 
@@ -11051,6 +11184,13 @@ function wireEvents() {
   const $close = _panel.querySelector('.cp-close-btn');
   const $minimize = _panel.querySelector('.cp-minimize-btn');
   const $slide = _panel.querySelector('.cp-slide-btn');
+  _mountAccountMenu();
+  // Any window or surface changed an account (signed in, a key saved, its mode, renamed, added,
+  // removed): the account menu re-reads the list, and the tabs on it re-check sign-in.
+  on('sync:claude:accounts-changed', (msg) => {
+    _loadClaudeAccounts({ force: true }).catch(() => {});
+    for (const t of _tabs) if (!msg?.accountId || serverAccountId(t.accountId) === msg.accountId) void t.terminalAuthView?.refresh();
+  });
   const $new = _panel.querySelector('.cp-new-btn');
 
   const $brand = _panel.querySelector('.cp-brand');