/** * @fileoverview Subagent panel (discovery, detail view, kill), subagent parent tracking, * agent teams (tasks panel, teammate badges, terminals), project insights (bash tool tracking), * file browser (directory tree, preview), log viewer (floating file streamers), * image popups (auto-popup for screenshots), mux sessions, monitor panel, * token statistics, toast notifications, and system stats. * Includes 19 SSE handlers for tasks, mux, bash tools, subagents, and images. * * @mixin Extends CodemanApp.prototype via Object.assign * @dependency app.js (CodemanApp class, this.subagents, this.subagentWindows, this.sessions) * @dependency constants.js (escapeHtml, ZINDEX_* constants) * @dependency subagent-windows.js (openSubagentWindow, closeSubagentWindow) * @loadorder 11 of 15 — loaded after settings-ui.js, before session-ui.js */ const AWAY_DIGEST_LAST_VIEWED_KEY = 'codeman-away-digest-last-viewed'; const FILE_BROWSER_SHOW_HIDDEN_KEY = 'codeman:fileBrowserShowHidden'; // Bounds for the by-id text preview, mirroring what the workspace text preview // already does server-side (500 lines). The byte cap rides a Range request, so // a huge log is a partial read rather than a download the viewer throws away. const TEXT_PREVIEW_MAX_BYTES = 512 * 1024; const TEXT_PREVIEW_MAX_LINES = 500; // A markdown document gets the route's ceiling instead of the 500-line preview // cap: a rendered README cut mid-way reads as the whole document. const MARKDOWN_PREVIEW_MAX_LINES = 10000; const MARKDOWN_EXTS = new Set(['md', 'markdown']); // File Viewer text-view prefs: per-device, in their own localStorage keys for // the same reason as FILE_BROWSER_SHOW_HIDDEN_KEY (the app-settings object is // rebuilt from the settings modal on save, so a key toggled from the viewer // would be dropped on the next save). const FILE_PREVIEW_PREF_KEYS = { mdRendered: 'codeman:filePreviewMdRendered', htmlRendered: 'codeman:filePreviewHtmlRendered', lineNumbers: 'codeman:filePreviewLineNumbers', wrap: 'codeman:filePreviewWrap', expanded: 'codeman:filePreviewExpanded', }; const FILE_PREVIEW_PREF_DEFAULTS = { mdRendered: true, htmlRendered: true, lineNumbers: false, wrap: true, expanded: false }; // Back/forward list of previews opened from one overlay session (links between documents). const FILE_PREVIEW_HISTORY_MAX = 50; const AWAY_DIGEST_SECTIONS = [ ['needsAttention', 'Needs Attention'], ['completed', 'Completed'], ['stillRunning', 'Still Running'], ['idle', 'Idle'], ['informational', 'Informational'], ]; Object.assign(CodemanApp.prototype, { _addActivityEntry(agentId, entry, maxSize = 50) { const activity = this.subagentActivity.get(agentId) || []; activity.push(entry); if (activity.length > maxSize) activity.shift(); this.subagentActivity.set(agentId, activity); }, // Tasks _onTaskCreated(data) { this.renderSessionTabs(); if (data.sessionId === this.activeSessionId) { this.renderTaskPanel(); } }, _onTaskCompleted(data) { this.renderSessionTabs(); if (data.sessionId === this.activeSessionId) { this.renderTaskPanel(); } }, _onTaskFailed(data) { this.renderSessionTabs(); if (data.sessionId === this.activeSessionId) { this.renderTaskPanel(); } }, _onTaskUpdated(data) { if (data.sessionId === this.activeSessionId) { this.renderTaskPanel(); } }, // Mux (tmux) _onMuxCreated(data) { this.muxSessions.push(data); this.renderMuxSessions(); }, _onMuxKilled(data) { this.muxSessions = this.muxSessions.filter(s => s.sessionId !== data.sessionId); this.renderMuxSessions(); }, _onMuxDied(data) { this.muxSessions = this.muxSessions.filter(s => s.sessionId !== data.sessionId); this.renderMuxSessions(); this.showToast('Mux session died: ' + this.getShortId(data.sessionId), 'warning'); }, _onMuxStatsUpdated(data) { this.muxSessions = data; if (document.getElementById('monitorPanel').classList.contains('open')) { this.renderMuxSessions(); } }, // Remote auto-reconnect (COD-108) _onRemoteSessionReconnected(data) { const id = this.getShortId(data.sessionId); this.showToast(`Remote session ${id} reconnected`, 'success'); // A successful reattach (the wake flow's own, or the watcher's) means the host is // back: drop the "unreachable" banner without waiting out the poll interval. if (this.activeSessionId === data.sessionId) this._pollHostReachability?.(true); }, _onRemoteReconnectExhausted(data) { const sessionId = data.sessionId; const id = this.getShortId(sessionId); // Auto-reconnect gave up after the bounded backoff. Surface a manual // "Reconnect" affordance that re-triggers the attach path (force-reload the // session, which re-runs the create/attach flow against the durable remote). this.showToast(`Remote session ${id} dropped — auto-reconnect gave up`, 'error', { duration: 15000, action: { label: 'Reconnect', onClick: () => { if (this.sessions && this.sessions.has(sessionId)) { this.selectSession(sessionId, { forceReload: true }); } else { this.showToast('Session no longer available', 'warning'); } }, }, }); }, // Wake-on-LAN from user input on a sleeping remote host (see remote-wake.ts). // ⚠️ The `remote:hostWaking` / `remote:hostWakeFailed` HANDLERS live in // `host-wake-ui.js`, which owns the banner state. They are NOT redefined here: // both files mix into `CodemanApp.prototype` and `host-wake-ui.js` is loaded // later, so a second definition would silently shadow the banner update (and the // toast would never fire — the exact silent no-op `sse-dispatch-table.test.ts` // exists to prevent, which cannot see shadowing). The toasts are shown from the // host-wake-ui handlers instead. // Bash tools _onBashToolStart(data) { this.handleBashToolStart(data.sessionId, data.tool); }, _onBashToolEnd(data) { this.handleBashToolEnd(data.sessionId, data.tool); }, _onBashToolsUpdate(data) { this.handleBashToolsUpdate(data.sessionId, data.tools); }, // Subagents (Claude Code background agents) _onSubagentDiscovered(data) { // Clear all old data for this agentId (in case of ID reuse) this.subagents.set(data.agentId, data); this.subagentActivity.set(data.agentId, []); this.subagentToolResults.delete(data.agentId); // Close any existing window for this agentId (will be reopened fresh) if (this.subagentWindows.has(data.agentId)) { this.forceCloseSubagentWindow(data.agentId); } this.renderSubagentPanel(); // Find which Codeman session owns this subagent (direct claudeSessionId match only) this.findParentSessionForSubagent(data.agentId); // Subagent windows are no longer auto-opened on discovery. // Users can open them manually from the monitor panel or via openAllActiveSubagentWindows(). // Ensure connection lines are updated after window is created and DOM settles requestAnimationFrame(() => { this.updateConnectionLines(); }); // Notify about new subagent discovery const parentId = this.subagentParentMap.get(data.agentId); this._notifySession(parentId || data.sessionId, 'info', 'subagent-spawn', 'Subagent Spawned', data.description || 'New background agent started'); }, _onSubagentUpdated(data) { const existing = this.subagents.get(data.agentId); if (existing) { // Merge updated fields (especially description) Object.assign(existing, data); this.subagents.set(data.agentId, existing); } else { this.subagents.set(data.agentId, data); } this.renderSubagentPanel(); // Update floating window if open (content + header/title) if (this.subagentWindows.has(data.agentId)) { this.renderSubagentWindowContent(data.agentId); this.updateSubagentWindowHeader(data.agentId); } }, _onSubagentToolCall(data) { this._addActivityEntry(data.agentId, { type: 'tool', ...data }); if (this.activeSubagentId === data.agentId) { this.renderSubagentDetail(); } this.renderSubagentPanel(); // Update floating window (debounced — tool_call events fire rapidly) if (this.subagentWindows.has(data.agentId)) { this.scheduleSubagentWindowRender(data.agentId); } }, _onSubagentProgress(data) { this._addActivityEntry(data.agentId, { type: 'progress', ...data }); if (this.activeSubagentId === data.agentId) { this.renderSubagentDetail(); } // Update floating window (debounced) if (this.subagentWindows.has(data.agentId)) { this.scheduleSubagentWindowRender(data.agentId); } }, _onSubagentMessage(data) { this._addActivityEntry(data.agentId, { type: 'message', ...data }); if (this.activeSubagentId === data.agentId) { this.renderSubagentDetail(); } // Update floating window (debounced) if (this.subagentWindows.has(data.agentId)) { this.scheduleSubagentWindowRender(data.agentId); } }, _onSubagentToolResult(data) { // Store tool result by toolUseId for later lookup (cap at 50 per agent) if (!this.subagentToolResults.has(data.agentId)) { this.subagentToolResults.set(data.agentId, new Map()); } const resultsMap = this.subagentToolResults.get(data.agentId); resultsMap.set(data.toolUseId, data); if (resultsMap.size > 50) { const oldest = resultsMap.keys().next().value; resultsMap.delete(oldest); } // Add to activity stream this._addActivityEntry(data.agentId, { type: 'tool_result', ...data }); if (this.activeSubagentId === data.agentId) { this.renderSubagentDetail(); } // Update floating window (debounced) if (this.subagentWindows.has(data.agentId)) { this.scheduleSubagentWindowRender(data.agentId); } }, async _onSubagentCompleted(data) { const existing = this.subagents.get(data.agentId); if (existing) { existing.status = 'completed'; this.subagents.set(data.agentId, existing); } this.renderSubagentPanel(); this.updateSubagentWindows(); // Auto-minimize completed subagent windows if (this.subagentWindows.has(data.agentId)) { const windowData = this.subagentWindows.get(data.agentId); if (windowData && !windowData.minimized) { await this.closeSubagentWindow(data.agentId); // This minimizes to tab this.saveSubagentWindowStates(); // Persist the minimized state } } // Notify about subagent completion const parentId = this.subagentParentMap.get(data.agentId); this._notifySession(parentId || existing?.sessionId || data.sessionId, 'info', 'subagent-complete', 'Subagent Completed', existing?.description || data.description || 'Background agent finished'); // Clean up activity/tool data for completed agents after 5 minutes // This prevents memory leaks from long-running sessions with many subagents setTimeout(() => { const agent = this.subagents.get(data.agentId); // Only clean up if agent is still completed (not restarted) if (agent?.status === 'completed') { this.subagentActivity.delete(data.agentId); this.subagentToolResults.delete(data.agentId); } }, 5 * 60 * 1000); // 5 minutes // Prune stale completed agents from main maps after 30 minutes // Keeps subagents/subagentParentMap from growing unbounded in 24h sessions setTimeout(() => { const agent = this.subagents.get(data.agentId); if (agent?.status === 'completed' && !this.subagentWindows.has(data.agentId)) { this.subagents.delete(data.agentId); this.subagentParentMap.delete(data.agentId); } }, 30 * 60 * 1000); // 30 minutes }, // Images _onImageDetected(data) { console.log('[Image Detected]', data); this.openImagePopup(data); }, // ═══════════════════════════════════════════════════════════════ // Command Palette (COD-153) // Fast Cmd/Ctrl+K switcher for currently open sessions, plus launch-new. // ═══════════════════════════════════════════════════════════════ shouldOpenCommandPaletteFromShortcut(e) { if (!e) return false; // Every palette chord requires Ctrl/Cmd/Alt (capture enforces the same for // rebinds), so plain typing exits before any registry work — this runs on // the document AND xterm keydown hot paths. if (!e.ctrlKey && !e.metaKey && !e.altKey) return false; // Registry-aware chord check (COD-157): honors a rebound or disabled // palette shortcut. Falls back to the default Ctrl/Cmd/Alt+K chord when the // registry isn't available (isolated test harnesses). const registryAvailable = typeof this.getShortcutRegistry === 'function' && typeof this.matchesShortcutEvent === 'function'; const palette = registryAvailable ? this.getShortcutRegistry().find((s) => s.id === 'command-palette') : null; if (palette) { if (palette.disabled || !this.matchesShortcutEvent(e, palette)) return false; } else { const key = (e.key || '').toLowerCase(); if (key !== 'k' && e.code !== 'KeyK') return false; // Don't hijack chords with extra modifiers (Ctrl+Shift+K is the Firefox // devtools console; matchesShortcutEvent applies the same rule above). if (e.shiftKey) return false; } const target = e.target; if (!target) return true; const tagName = (target.tagName || '').toUpperCase(); const className = typeof target.className === 'string' ? target.className : ''; const isXtermHelper = target.classList?.contains?.('xterm-helper-textarea') || className.includes('xterm-helper-textarea'); if (isXtermHelper) return true; if (tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT') return false; if (target.isContentEditable) return false; if (typeof target.closest === 'function' && target.closest('[contenteditable="true"]')) return false; return true; }, /** * Save what had focus before a search-first overlay takes it. * * The Command Palette and the Session Manager both call `search.focus()` on * open, and both used to close by removing the `active` class and nothing * else. Hiding the focused input does not hand focus back to anyone — the * browser drops it on `` — so after Escape closed the overlay every * keystroke went nowhere and the user had to click the terminal to type * again (measured: `document.activeElement` is BODY afterwards and the * terminal emits no onData at all). Every close path has the same hole, so * the restore lives in the close functions, not in the global Escape chain. * * ⚠️ Deliberately only the save/restore half of {@link FocusTrap}, not the * whole thing. `FocusTrap.activate()` moves focus to the first focusable * element, which in both of these overlays is not the search box — adopting * it wholesale would fix the focus loss by breaking the thing Cmd+K exists * for, typing a filter the moment it opens. */ _rememberOverlayFocus(key) { this[key] = (typeof document !== 'undefined' && document.activeElement) || null; }, /** * Hand focus back to whatever {@link _rememberOverlayFocus} saved. * * ⚠️ The terminal fallback is gated on there being an active session: an * overlay opened from the welcome screen has no terminal to return to, and * focusing one on a phone summons the on-screen keyboard over a screen that * has no input on it. * * ⚠️ A focus that already left the overlay is kept, not overridden. The * Session Manager's row menu ("Switch to session", "Open folder") calls * selectSession(), which focuses the terminal, BEFORE closeSessionManager(); * restoring there would pull focus back to the header button that opened the * modal. Only a focus still inside `modal`, or one dropped on ``, is * the overlay's to hand back. */ _restoreOverlayFocus(key, modal) { const prev = this[key]; this[key] = null; const body = typeof document !== 'undefined' ? document.body : null; const current = typeof document !== 'undefined' ? document.activeElement : null; if (current && current !== body && modal?.contains?.(current) === false) return; // `isConnected === false` means the element was removed while the overlay // was open (a re-render of the tab strip, say); anything else — including // a stub with no such property — is treated as still focusable. if (prev && prev !== body && prev.isConnected !== false && typeof prev.focus === 'function') { prev.focus(); return; } // ⚠️ `activeSessionId` alone only covers the welcome screen. On a touch device // with the keyboard down, focus sits on ``, so focusing the terminal here // would summon the on-screen keyboard — `selectSession()` deliberately skips the // focus for exactly that reason, and this would override it. The app's own // predicate already encodes the rule (true on desktop, on touch only while the // keyboard is open); the optional call keeps the vm test harness working. if (this.activeSessionId && this._shouldFocusTerminalForTabSwitch?.() !== false) { this.terminal?.focus?.(); } }, openCommandPalette() { const modal = document.getElementById('commandPaletteModal'); const search = document.getElementById('commandPaletteSearch'); if (!modal || !search) return; this.commandPaletteActiveIndex = 0; this._resetCommandPaletteAgent(); search.value = ''; modal.classList.add('active'); this._wireCommandPalette(); this.renderCommandPalette(); // BEFORE the steal, not after: `search.focus()` below is what loses the // caller's focus, so the read has to happen while it is still there. this._rememberOverlayFocus('_commandPalettePrevFocus'); search.focus(); search.select?.(); }, closeCommandPalette() { const modal = document.getElementById('commandPaletteModal'); // ⚠️ Bail out when it was not open. The global Escape handler calls this on // EVERY Escape (app.js), in the CAPTURE phase, so an unconditional restore // runs before the focused element's own Escape handler and steals focus into // the terminal: keys typed after Escape in split Pane B land in Pane A, keys // typed in any text field land in the terminal, and the inline tab rename's // Escape fires the input's blur (which commits) before its own handler // (which cancels), turning a cancel into a rename. if (!modal?.classList?.contains('active')) return; modal.classList.remove('active'); this._restoreOverlayFocus('_commandPalettePrevFocus', modal); }, _wireCommandPalette() { if (this._commandPaletteWired) return; this._commandPaletteWired = true; const modal = document.getElementById('commandPaletteModal'); const search = document.getElementById('commandPaletteSearch'); const list = document.getElementById('commandPaletteList'); search?.addEventListener('input', () => { this.commandPaletteActiveIndex = 0; this.renderCommandPalette(); }); search?.addEventListener('keydown', async (e) => { if ((e.key === 'ArrowLeft' || e.key === 'ArrowRight') && this._commandPaletteArrowCyclesAgent(e)) { e.preventDefault(); this._cycleCommandPaletteAgent(e.key === 'ArrowRight' ? 1 : -1); return; } if (e.key === 'ArrowDown') { e.preventDefault(); this.moveCommandPaletteSelection(1); return; } if (e.key === 'ArrowUp') { e.preventDefault(); this.moveCommandPaletteSelection(-1); return; } if (e.key === 'Enter') { e.preventDefault(); e.stopPropagation(); await this.activateCommandPaletteItem(); return; } if (e.key === 'Escape') { e.preventDefault(); this.closeCommandPalette(); } }); modal?.addEventListener('keydown', (e) => { if (e.key === 'Escape') { e.preventDefault(); this.closeCommandPalette(); } }); // Clicking an agent arrow must leave focus in the search box, or the // Left/Right/Enter keys stop reaching the palette after the first click. list?.addEventListener?.('mousedown', (e) => { if (e.target?.closest?.('[data-palette-agent-cycle]')) e.preventDefault?.(); }); list?.addEventListener?.('click', (e) => { // The agent arrows sit inside the new-session row: they change the agent // and must not also activate (launch) the row they are drawn in. const cycle = e.target?.closest?.('[data-palette-agent-cycle]'); if (cycle) { e.preventDefault?.(); e.stopPropagation?.(); this._cycleCommandPaletteAgent(cycle.dataset.paletteAgentCycle === 'prev' ? -1 : 1); return; } const row = e.target?.closest?.('[data-command-index]'); if (!row) return; this.commandPaletteActiveIndex = Number(row.dataset.commandIndex) || 0; void this.activateCommandPaletteItem(); }); }, buildCommandPaletteItems(query = '') { const needle = query.trim().toLowerCase(); const orderedIds = [ ...(Array.isArray(this.sessionOrder) ? this.sessionOrder : []), ...Array.from(this.sessions?.keys?.() || []).filter((id) => !this.sessionOrder?.includes?.(id)), ]; const seen = new Set(); const sessionItems = []; for (const sessionId of orderedIds) { if (seen.has(sessionId)) continue; seen.add(sessionId); const session = this.sessions?.get?.(sessionId); if (!session) continue; const title = this.getSessionName?.(session) || session.name || session.title || sessionId.slice(0, 8); const subtitleParts = [session.workingDir, session.mode, session.status].filter(Boolean); const haystack = [title, session.workingDir, session.mode, session.status, sessionId].filter(Boolean).join(' ').toLowerCase(); if (needle && !haystack.includes(needle)) continue; sessionItems.push({ id: `session:${sessionId}`, type: 'session', sessionId, title, subtitle: subtitleParts.join(' · '), }); } sessionItems.push(this._buildCommandPaletteNewSessionItem(query)); sessionItems.push({ id: 'browse-sessions', type: 'browse-sessions', title: 'Browse all sessions…', subtitle: 'Open Session Manager' }); return sessionItems; }, _buildCommandPaletteNewSessionItem(query = '') { const caseName = this._commandPaletteCaseName(query); const agent = this._commandPaletteAgent(caseName); const mode = agent?.id || this.runMode || this._runMode || 'claude'; const labels = { claude: 'Claude', opencode: 'OpenCode', codex: 'Codex', gemini: 'Gemini', antigravity: 'Antigravity', pi: 'Pi', grok: 'Grok', deepseek: 'DeepSeek', omp: 'OMP', copilot: 'Copilot' }; return { id: 'new-session', type: 'new-session', caseName, mode, title: 'New session', subtitle: `Run ${agent?.label || labels[mode] || mode} in ${caseName}`, }; }, /** The case a new session from the palette starts in: the case the query names, else the Run button's case. */ _commandPaletteCaseName(query = '') { return this._findCommandPaletteCaseMatch(query) || document.getElementById('quickStartCase')?.value || 'testcase'; }, /** The case of the new-session row on screen (the palette's last render), for the agent switch. */ _commandPaletteRowCase() { const row = (this.commandPaletteItems || []).find((item) => item?.type === 'new-session'); return row ? row.caseName : this._commandPaletteCaseName(document.getElementById('commandPaletteSearch')?.value || ''); }, /** * The agents the new-session row can start in `caseName`: the server-injected * CLI catalog's enabled entries that the toolbar Run menu offers for that case, * in catalog order. An agent entry goes through the Run menu's own rule, * _runModeAvailableForCase (session-ui.js): the host's CLIs for a local or * remote case, the container's for a Docker case. A non-agent entry (Shell) is * never gated, as in the Run menu. The vm test harness may load this file * without session-ui.js, and then the host's isCliAvailable() decides. The ids * are DATA from the registry, never a list kept here. Empty on a page rendered * without the catalog; that and a single entry both leave the row on the Run * button's mode (see _commandPaletteAgent). */ _commandPaletteAgentChoices(caseName = this._commandPaletteRowCase()) { const catalog = typeof window !== 'undefined' && Array.isArray(window.__codemanCliCatalog) ? window.__codemanCliCatalog : []; const offered = (id) => typeof this._runModeAvailableForCase === 'function' ? this._runModeAvailableForCase(id, caseName) : (this.isCliAvailable?.(id) ?? true); return catalog .filter((cli) => cli && typeof cli.id === 'string' && cli.enabled && (cli.kind !== 'agent' || offered(cli.id))) .map((cli) => ({ id: cli.id, label: (typeof cli.label === 'string' && cli.label.trim()) || cli.id })); }, /** * The agent the new-session row will start in `caseName`: the one picked with * the switch since the palette opened, else the Run button's mode, else the * first offered. Null when fewer than two are offered: with one entry there is * nothing to pick, so the row keeps the Run button's mode as it did before the * switch existed, and a Run mode the case cannot start fails the way the Run * button would, instead of the palette quietly starting the one entry offered * (often Shell). */ _commandPaletteAgent(caseName = this._commandPaletteRowCase()) { const choices = this._commandPaletteAgentChoices(caseName); if (choices.length < 2) return null; const runMode = this.runMode || this._runMode; return ( choices.find((c) => c.id === this._commandPaletteAgentId) || choices.find((c) => c.id === runMode) || choices[0] ); }, /** * Each time the palette opens it forgets the last pick, so the row starts on * the Run button's mode (see _commandPaletteAgent). That default is resolved * per render, not here: the query can move the row to another case, which may * offer the Run button's mode when the first case did not. */ _resetCommandPaletteAgent() { this._commandPaletteAgentId = null; }, _cycleCommandPaletteAgent(delta) { const caseName = this._commandPaletteRowCase(); const choices = this._commandPaletteAgentChoices(caseName); if (choices.length < 2) return; const at = Math.max(0, choices.findIndex((c) => c.id === this._commandPaletteAgent(caseName)?.id)); this._commandPaletteAgentId = choices[(((at + delta) % choices.length) + choices.length) % choices.length].id; this.renderCommandPalette(); }, /** * Left/Right change the agent only while the new-session row is highlighted, * and the caret is at either query boundary, with no selection. Both arrows * stay in picker navigation after typing a case name; inside the query they * still edit text, as do modified arrows and selection changes. */ _commandPaletteArrowCyclesAgent(e) { const active = (this.commandPaletteItems || [])[this.commandPaletteActiveIndex || 0]; if (active?.type !== 'new-session') return false; if (this._commandPaletteAgentChoices(active.caseName).length < 2) return false; if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return false; const input = e.target; const value = typeof input?.value === 'string' ? input.value : ''; const start = Number.isFinite(input?.selectionStart) ? input.selectionStart : value.length; const end = Number.isFinite(input?.selectionEnd) ? input.selectionEnd : start; if (start !== end) return false; return start <= 0 || end >= value.length; }, _findCommandPaletteCaseMatch(query = '') { const needle = query.trim().toLowerCase(); if (!needle || !Array.isArray(this.cases)) return null; const scoreCase = (caseItem) => { const name = String(caseItem?.name || '').trim(); if (!name) return 0; const haystack = [ name, caseItem?.path, caseItem?.casePath, caseItem?.workingDir, caseItem?.remote?.path, caseItem?.remote?.hostId, ] .filter(Boolean) .join(' ') .toLowerCase(); const lowerName = name.toLowerCase(); if (lowerName === needle) return 100; if (lowerName.startsWith(needle)) return 90; if (lowerName.includes(needle)) return 80; if (haystack.includes(needle)) return 60; return 0; }; let best = null; let bestScore = 0; for (const caseItem of this.cases) { const score = scoreCase(caseItem); if (score > bestScore) { best = caseItem; bestScore = score; } } return best?.name || null; }, renderCommandPalette() { const search = document.getElementById('commandPaletteSearch'); const list = document.getElementById('commandPaletteList'); if (!list) return; const query = search?.value || ''; const items = this.buildCommandPaletteItems(query); this.commandPaletteItems = items; this.commandPaletteActiveIndex = Math.max(0, Math.min(this.commandPaletteActiveIndex || 0, items.length - 1)); list.innerHTML = items .map((item, index) => { const active = index === this.commandPaletteActiveIndex ? ' active' : ''; const icon = item.type === 'new-session' ? '+' : item.type === 'browse-sessions' ? '≡' : '›'; const browse = item.type === 'browse-sessions' ? ' command-palette-item--browse' : ''; const agent = item.type === 'new-session' ? this._renderCommandPaletteAgentPicker(item.mode, item.caseName) : ''; return ` `; }) .join(''); }, /** * The new-session row's agent switch: arrows either side of the agent's logo * and name. Spans, not buttons: the row itself is a ` : ''; return `
${escapeHtml(this.formatAwayDigestTimestamp(item.timestamp))} ${escapeHtml(sourceLabel)} ${sessionLabel ? `${escapeHtml(sessionLabel)}` : ''}
${escapeHtml(item.title)}
${detail}
${action}
`; }, attachAwayDigestActions() { const sectionsEl = document.getElementById('awayDigestSections'); if (!sectionsEl) return; sectionsEl.querySelectorAll('[data-away-link-type]').forEach(button => { button.addEventListener('click', () => { this.openAwayDigestItem(button.dataset.awayLinkType, button.dataset.awaySessionId || undefined); }); }); }, async openAwayDigestItem(type, sessionId) { if (type === 'session' && sessionId) { await this.selectSession(sessionId); this.closeAwayDigest(); return; } if (type === 'run_summary' && sessionId) { await this.openRunSummary(sessionId); this.closeAwayDigest(); return; } if (type === 'lifecycle') { this.openLifecycleLog(); this.closeAwayDigest(); } }, formatAwayDigestTimestamp(timestamp) { if (!Number.isFinite(timestamp)) return ''; return new Date(timestamp).toLocaleString([], { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit', }); }, formatAwayDigestSource(source) { const labels = { lifecycle: 'Lifecycle', run_summary: 'Run Summary', status: 'Status', token_stats: 'Token Stats', subagent: 'Subagent', }; return labels[source] || source; }, // ═══════════════════════════════════════════════════════════════ // Token Statistics Modal // ═══════════════════════════════════════════════════════════════ async openTokenStats() { try { const response = await fetch('/api/token-stats'); const data = await response.json(); if (data.success) { this.renderTokenStats(data.data); document.getElementById('tokenStatsModal').classList.add('active'); } else { this.showToast('Failed to load token stats', 'error'); } } catch (err) { console.error('Failed to fetch token stats:', err); this.showToast('Failed to load token stats', 'error'); } }, renderTokenStats(data) { const { daily, totals } = data; // Calculate period totals const today = new Date().toISOString().split('T')[0]; const todayData = daily.find(d => d.date === today) || { inputTokens: 0, outputTokens: 0, estimatedCost: 0 }; // Last 7 days totals (for summary card) const sevenDaysAgo = new Date(); sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7); const last7Days = daily.filter(d => new Date(d.date) >= sevenDaysAgo); const weekInput = last7Days.reduce((sum, d) => sum + d.inputTokens, 0); const weekOutput = last7Days.reduce((sum, d) => sum + d.outputTokens, 0); const weekCost = this.estimateCost(weekInput, weekOutput); // Lifetime totals (from aggregate stats) const lifetimeInput = totals.totalInputTokens; const lifetimeOutput = totals.totalOutputTokens; const lifetimeCost = this.estimateCost(lifetimeInput, lifetimeOutput); // Render summary cards const summaryEl = document.getElementById('statsSummary'); summaryEl.innerHTML = `
Today ${this.formatTokens(todayData.inputTokens + todayData.outputTokens)} ~$${todayData.estimatedCost.toFixed(2)}
7 Days ${this.formatTokens(weekInput + weekOutput)} ~$${weekCost.toFixed(2)}
Lifetime ${this.formatTokens(lifetimeInput + lifetimeOutput)} ~$${lifetimeCost.toFixed(2)}
`; // Render bar chart (last 7 days) const chartEl = document.getElementById('statsChart'); const daysEl = document.getElementById('statsChartDays'); // Get last 7 days (fill gaps with empty data) const chartData = []; for (let i = 6; i >= 0; i--) { const date = new Date(); date.setDate(date.getDate() - i); const dateStr = date.toISOString().split('T')[0]; const dayData = daily.find(d => d.date === dateStr); chartData.push({ date: dateStr, dayName: date.toLocaleDateString('en-US', { weekday: 'short' }), tokens: dayData ? dayData.inputTokens + dayData.outputTokens : 0, cost: dayData ? dayData.estimatedCost : 0, }); } // Find max for scaling const maxTokens = Math.max(...chartData.map(d => d.tokens), 1); chartEl.innerHTML = chartData.map(d => { const height = Math.max((d.tokens / maxTokens) * 100, 3); const tooltip = `${d.dayName}: ${this.formatTokens(d.tokens)} (~$${d.cost.toFixed(2)})`; return `
`; }).join(''); daysEl.innerHTML = chartData.map(d => `${d.dayName}`).join(''); // Render table (last 14 days with data) const tableEl = document.getElementById('statsTable'); const tableData = daily.slice(0, 14); if (tableData.length === 0) { tableEl.innerHTML = '
No usage data recorded yet
'; } else { tableEl.innerHTML = `
Date Input Output Cost
${tableData.map(d => { const dateObj = new Date(d.date + 'T00:00:00'); const dateStr = dateObj.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); return `
${dateStr} ${this.formatTokens(d.inputTokens)} ${this.formatTokens(d.outputTokens)} $${d.estimatedCost.toFixed(2)}
`; }).join('')} `; } }, closeTokenStats() { const modal = document.getElementById('tokenStatsModal'); if (modal) { modal.classList.remove('active'); } }, // ═══════════════════════════════════════════════════════════════ // Monitor Panel (combined Mux Sessions + Background Tasks) // ═══════════════════════════════════════════════════════════════ async toggleMonitorPanel() { const panel = document.getElementById('monitorPanel'); const toggleBtn = document.getElementById('monitorToggleBtn'); panel.classList.toggle('open'); if (panel.classList.contains('open')) { // applyMonitorVisibility() sets inline display:none when the "Show Monitor" // setting is off — clear it so transient opens (session-tab task badge) work panel.style.display = ''; // Load screens and start stats collection await this.loadMuxSessions(); await fetch('/api/mux-sessions/stats/start', { method: 'POST' }); this.renderTaskPanel(); if (toggleBtn) toggleBtn.innerHTML = '▼'; // Down arrow when open } else { // Stop stats collection when panel is closed await fetch('/api/mux-sessions/stats/stop', { method: 'POST' }); if (toggleBtn) toggleBtn.innerHTML = '▲'; // Up arrow when closed } }, // Legacy alias for task panel toggle (used by session tab badge) toggleTaskPanel() { this.toggleMonitorPanel(); }, // ═══════════════════════════════════════════════════════════════ // Monitor Panel Detach & Drag // ═══════════════════════════════════════════════════════════════ toggleMonitorDetach() { const panel = document.getElementById('monitorPanel'); const detachBtn = document.getElementById('monitorDetachBtn'); if (panel.classList.contains('detached')) { // Re-attach to bottom panel.classList.remove('detached'); panel.style.top = ''; panel.style.left = ''; panel.style.width = ''; panel.style.height = ''; if (detachBtn) { detachBtn.innerHTML = '⧉'; // Detach icon (two overlapping squares) detachBtn.title = 'Detach panel'; } } else { // Detach as floating window panel.classList.add('detached'); panel.classList.add('open'); // Ensure it's visible if (detachBtn) { detachBtn.innerHTML = '⊞'; // Attach icon (squared plus - dock back) detachBtn.title = 'Attach panel'; } // Setup drag functionality this.setupMonitorDrag(); } }, setupMonitorDrag() { const panel = document.getElementById('monitorPanel'); const header = document.getElementById('monitorPanelHeader'); if (!panel || !header) return; let isDragging = false; let startX, startY, startLeft, startTop; const onStart = (e) => { // Only drag from header, not from buttons if (e.target.closest('button')) return; if (!panel.classList.contains('detached')) return; isDragging = true; const coords = getEventCoords(e); startX = coords.clientX; startY = coords.clientY; const rect = panel.getBoundingClientRect(); startLeft = rect.left; startTop = rect.top; document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onEnd); document.addEventListener('touchmove', onMove, { passive: false }); document.addEventListener('touchend', onEnd); e.preventDefault(); }; const onMove = (e) => { if (!isDragging) return; const coords = getEventCoords(e); const dx = coords.clientX - startX; const dy = coords.clientY - startY; let newLeft = startLeft + dx; let newTop = startTop + dy; // Keep within viewport bounds const rect = panel.getBoundingClientRect(); newLeft = Math.max(0, Math.min(window.innerWidth - rect.width, newLeft)); newTop = Math.max(0, Math.min(window.innerHeight - rect.height, newTop)); panel.style.left = newLeft + 'px'; panel.style.top = newTop + 'px'; }; const onEnd = () => { isDragging = false; document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onEnd); document.removeEventListener('touchmove', onMove); document.removeEventListener('touchend', onEnd); }; // Remove existing listeners before adding new ones header.removeEventListener('mousedown', header._dragHandler); header.removeEventListener('touchstart', header._touchDragHandler); header._dragHandler = onStart; header._touchDragHandler = onStart; header.addEventListener('mousedown', onStart); header.addEventListener('touchstart', onStart, { passive: false }); }, // ═══════════════════════════════════════════════════════════════ // Subagents Panel Detach & Drag // ═══════════════════════════════════════════════════════════════ toggleSubagentsDetach() { const panel = document.getElementById('subagentsPanel'); const detachBtn = document.getElementById('subagentsDetachBtn'); if (panel.classList.contains('detached')) { // Re-attach to bottom panel.classList.remove('detached'); panel.style.top = ''; panel.style.left = ''; panel.style.width = ''; panel.style.height = ''; if (detachBtn) { detachBtn.innerHTML = '⧉'; // Detach icon detachBtn.title = 'Detach panel'; } } else { // Detach as floating window panel.classList.add('detached'); panel.classList.add('open'); // Ensure it's visible if (detachBtn) { detachBtn.innerHTML = '⊞'; // Attach icon detachBtn.title = 'Attach panel'; } // Setup drag functionality this.setupSubagentsDrag(); } }, setupSubagentsDrag() { const panel = document.getElementById('subagentsPanel'); const header = document.getElementById('subagentsPanelHeader'); if (!panel || !header) return; let isDragging = false; let startX, startY, startLeft, startTop; const onStart = (e) => { // Only drag from header, not from buttons if (e.target.closest('button')) return; if (!panel.classList.contains('detached')) return; isDragging = true; const coords = getEventCoords(e); startX = coords.clientX; startY = coords.clientY; const rect = panel.getBoundingClientRect(); startLeft = rect.left; startTop = rect.top; document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onEnd); document.addEventListener('touchmove', onMove, { passive: false }); document.addEventListener('touchend', onEnd); e.preventDefault(); }; const onMove = (e) => { if (!isDragging) return; const coords = getEventCoords(e); const dx = coords.clientX - startX; const dy = coords.clientY - startY; let newLeft = startLeft + dx; let newTop = startTop + dy; // Keep within viewport bounds const rect = panel.getBoundingClientRect(); newLeft = Math.max(0, Math.min(window.innerWidth - rect.width, newLeft)); newTop = Math.max(0, Math.min(window.innerHeight - rect.height, newTop)); panel.style.left = newLeft + 'px'; panel.style.top = newTop + 'px'; }; const onEnd = () => { isDragging = false; document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onEnd); document.removeEventListener('touchmove', onMove); document.removeEventListener('touchend', onEnd); }; // Remove existing listeners before adding new ones header.removeEventListener('mousedown', header._dragHandler); header.removeEventListener('touchstart', header._touchDragHandler); header._dragHandler = onStart; header._touchDragHandler = onStart; header.addEventListener('mousedown', onStart); header.addEventListener('touchstart', onStart, { passive: false }); }, renderTaskPanel() { this._debouncedCall('taskPanel', this._renderTaskPanelImmediate); }, _renderTaskPanelImmediate() { const session = this.sessions.get(this.activeSessionId); const body = document.getElementById('backgroundTasksBody'); const stats = document.getElementById('taskPanelStats'); const section = document.getElementById('backgroundTasksSection'); if (!session || !session.taskTree || session.taskTree.length === 0) { // Hide the entire section when there are no background tasks if (section) section.style.display = 'none'; body.innerHTML = ''; stats.textContent = '0 tasks'; return; } // Show the section when there are tasks if (section) section.style.display = ''; const taskStats = session.taskStats || { running: 0, completed: 0, failed: 0, total: 0 }; stats.textContent = `${taskStats.running} running, ${taskStats.completed} done`; // Render task tree recursively const renderTask = (task, allTasks) => { const statusIcon = task.status === 'running' ? '' : task.status === 'completed' ? '✓' : '✗'; const duration = task.endTime ? `${((task.endTime - task.startTime) / 1000).toFixed(1)}s` : `${((Date.now() - task.startTime) / 1000).toFixed(0)}s...`; let childrenHtml = ''; if (task.children && task.children.length > 0) { childrenHtml = '
'; for (const childId of task.children) { // Find child task in allTasks map const childTask = allTasks.find(t => t.id === childId); if (childTask) { childrenHtml += `
${renderTask(childTask, allTasks)}
`; } } childrenHtml += '
'; } return `
${statusIcon}
${escapeHtml(task.description)}
${task.subagentType} ${duration}
${childrenHtml} `; }; // Flatten all tasks for lookup const allTasks = this.flattenTaskTree(session.taskTree); // Render only root tasks (those without parents or with null parentId) let html = '
'; for (const task of session.taskTree) { html += `
${renderTask(task, allTasks)}
`; } html += '
'; body.innerHTML = html; }, flattenTaskTree(tasks, result = []) { for (const task of tasks) { result.push(task); // Children are stored as IDs, not nested objects in taskTree // The task tree from server already has the structure we need } return result; }, // ═══════════════════════════════════════════════════════════════ // Subagent Panel (Claude Code Background Agents) // ═══════════════════════════════════════════════════════════════ // Legacy alias toggleSubagentPanel() { this.toggleSubagentsPanel(); }, updateSubagentBadge() { const badge = this.$('subagentCountBadge'); const activeCount = Array.from(this.subagents.values()).filter(s => s.status === 'active' || s.status === 'idle').length; // Update badge with active count if (badge) { badge.textContent = activeCount > 0 ? activeCount : ''; } }, renderSubagentPanel() { // Debounce renders at 150ms to prevent excessive DOM updates from rapid subagent events if (this._subagentPanelRenderTimeout) { clearTimeout(this._subagentPanelRenderTimeout); } this._subagentPanelRenderTimeout = setTimeout(() => { scheduleBackground(() => this._renderSubagentPanelImmediate()); }, 150); }, _renderSubagentPanelImmediate() { const list = this.$('subagentList'); if (!list) return; // Always update badge count this.updateSubagentBadge(); // Always update monitor panel (even if subagent panel is hidden) this.renderMonitorSubagents(); // If panel is not visible, don't render content if (!this.subagentPanelVisible) { return; } // Render subagent list if (this.subagents.size === 0) { list.innerHTML = '
No background agents detected
'; return; } const html = []; const sorted = Array.from(this.subagents.values()).sort((a, b) => { // Active first, then by last activity if (a.status === 'active' && b.status !== 'active') return -1; if (b.status === 'active' && a.status !== 'active') return 1; return (b.lastActivityAt || 0) - (a.lastActivityAt || 0); }); for (const agent of sorted) { const isActive = this.activeSubagentId === agent.agentId; const statusClass = agent.status === 'active' ? 'active' : agent.status === 'idle' ? 'idle' : 'completed'; const activity = this.subagentActivity.get(agent.agentId) || []; const lastActivity = activity[activity.length - 1]; const lastTool = lastActivity?.type === 'tool' ? lastActivity.tool : null; const hasWindow = this.subagentWindows.has(agent.agentId); const canKill = agent.status === 'active' || agent.status === 'idle'; const modelBadge = agent.modelShort ? `${escapeHtml(agent.modelShort)}` : ''; const teammateInfo = this.getTeammateInfo(agent); const displayName = teammateInfo ? teammateInfo.name : (agent.description || agent.agentId.substring(0, 7)); const teammateBadge = this.getTeammateBadgeHtml(agent); const agentIcon = teammateInfo ? `●` : '🤖'; html.push(`
${agentIcon} ${escapeHtml(displayName.length > 40 ? displayName.substring(0, 40) + '...' : displayName)} ${teammateBadge} ${modelBadge} ${agent.status} ${canKill ? `` : ''}
${agent.toolCallCount} tools ${lastTool ? `${this.getToolIcon(lastTool)} ${lastTool}` : ''}
`); } list.innerHTML = html.join(''); }, selectSubagent(agentId) { this.activeSubagentId = agentId; this.renderSubagentPanel(); this.renderSubagentDetail(); }, renderSubagentDetail() { const detail = this.$('subagentDetail'); if (!detail) return; if (!this.activeSubagentId) { detail.innerHTML = '
Select an agent to view details
'; return; } const agent = this.subagents.get(this.activeSubagentId); const activity = this.subagentActivity.get(this.activeSubagentId) || []; if (!agent) { detail.innerHTML = '
Agent not found
'; return; } const activityHtml = activity.slice(-30).map(a => { const time = new Date(a.timestamp).toLocaleTimeString('en-US', { hour12: false }); if (a.type === 'tool') { const toolDetail = this.getToolDetailExpanded(a.tool, a.input, a.fullInput, a.toolUseId); return `
${time} ${this.getToolIcon(a.tool)} ${escapeHtml(a.tool)} ${escapeHtml(toolDetail.primary)} ${toolDetail.hasMore ? `` : ''} ${toolDetail.hasMore ? `` : ''}
`; } else if (a.type === 'tool_result') { const icon = a.isError ? '❌' : '📄'; const statusClass = a.isError ? 'error' : ''; const sizeInfo = a.contentLength > 500 ? ` (${this.formatBytes(a.contentLength)})` : ''; const preview = a.preview.length > 80 ? a.preview.substring(0, 80) + '...' : a.preview; return `
${time} ${icon} ${escapeHtml(a.tool || 'result')} ${escapeHtml(preview)}${sizeInfo}
`; } else if (a.type === 'progress') { // Check for hook events const isHook = a.hookEvent || a.hookName; const icon = isHook ? '🪝' : (a.progressType === 'query_update' ? '⟳' : '✓'); const hookClass = isHook ? ' hook' : ''; const displayText = isHook ? (a.hookName || a.hookEvent) : (a.query || a.progressType); return `
${time} ${icon} ${escapeHtml(displayText)}
`; } else if (a.type === 'message') { const preview = a.text.length > 100 ? a.text.substring(0, 100) + '...' : a.text; return `
${time} 💬 ${escapeHtml(preview)}
`; } return ''; }).join(''); const detailTitle = agent.description || `Agent ${agent.agentId}`; const modelBadge = agent.modelShort ? `${escapeHtml(agent.modelShort)}` : ''; const tokenStats = (agent.totalInputTokens || agent.totalOutputTokens) ? `Tokens: ${this.formatTokenCount(agent.totalInputTokens || 0)}↓ ${this.formatTokenCount(agent.totalOutputTokens || 0)}↑` : ''; detail.innerHTML = `
${escapeHtml(detailTitle.length > 60 ? detailTitle.substring(0, 60) + '...' : detailTitle)} ${modelBadge} ${agent.status}
Tools: ${agent.toolCallCount} Entries: ${agent.entryCount} Size: ${(agent.fileSize / 1024).toFixed(1)}KB ${tokenStats}
${activityHtml || '
No activity yet
'}
`; }, toggleToolParams(toolUseId) { const el = document.getElementById(`tool-params-${toolUseId}`); if (!el) return; const btn = el.previousElementSibling; if (el.style.display === 'none') { el.style.display = 'block'; if (btn) btn.textContent = '▼'; } else { el.style.display = 'none'; if (btn) btn.textContent = '▶'; } }, formatTokenCount(count) { if (count >= 1000000) return (count / 1000000).toFixed(1) + 'M'; if (count >= 1000) return (count / 1000).toFixed(1) + 'k'; return count.toString(); }, formatBytes(bytes) { if (bytes >= 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(1) + 'MB'; if (bytes >= 1024) return (bytes / 1024).toFixed(1) + 'KB'; return bytes + 'B'; }, getToolIcon(tool) { const icons = { WebSearch: '🔍', WebFetch: '🌐', Read: '📖', Write: '📝', Edit: '✏️', Bash: '💻', Glob: '📁', Grep: '🔎', Task: '🤖', }; return icons[tool] || '🔧'; }, getToolDetail(tool, input) { if (!input) return ''; if (tool === 'WebSearch' && input.query) return `"${input.query}"`; if (tool === 'WebFetch' && input.url) return input.url; if (tool === 'Read' && input.file_path) return input.file_path; if ((tool === 'Write' || tool === 'Edit') && input.file_path) return input.file_path; if (tool === 'Bash' && input.command) { const cmd = input.command; return cmd.length > 40 ? cmd.substring(0, 40) + '...' : cmd; } if (tool === 'Glob' && input.pattern) return input.pattern; if (tool === 'Grep' && input.pattern) return input.pattern; return ''; }, getToolDetailExpanded(tool, input, fullInput, toolUseId) { const primary = this.getToolDetail(tool, input); // Check if there are additional params beyond the primary one const primaryKeys = ['query', 'url', 'file_path', 'command', 'pattern']; const inputKeys = Object.keys(fullInput || input || {}); const extraKeys = inputKeys.filter(k => !primaryKeys.includes(k)); const hasMore = extraKeys.length > 0 || (fullInput && JSON.stringify(fullInput).length > 100); return { primary, hasMore, fullInput: fullInput || input }; }, async killSubagent(agentId) { try { const res = await this._apiDelete(`/api/subagents/${agentId}`); const data = await res?.json(); if (data?.success) { // Update local state const agent = this.subagents.get(agentId); if (agent) { agent.status = 'completed'; this.subagents.set(agentId, agent); } this.renderSubagentPanel(); this.renderSubagentDetail(); this.updateSubagentWindows(); this.showToast(`Subagent ${agentId.substring(0, 7)} killed`, 'success'); } else { this.showToast(data.error || 'Failed to kill subagent', 'error'); } } catch (err) { console.error('Failed to kill subagent:', err); this.showToast('Failed to kill subagent: ' + err.message, 'error'); } }, async viewSubagentTranscript(agentId) { try { const res = await fetch(`/api/subagents/${agentId}/transcript?format=formatted`); const data = await res.json(); if (!data.success) { alert('Failed to load transcript'); return; } // Show in a modal or new window const content = data.data.formatted.join('\n'); const win = window.open('', '_blank', 'width=800,height=600'); win.document.write(` Subagent ${escapeHtml(agentId)} Transcript

Subagent ${escapeHtml(agentId)} Transcript (${data.data.entryCount} entries)

${escapeHtml(content)}
`); } catch (err) { console.error('Failed to load transcript:', err); alert('Failed to load transcript: ' + err.message); } }, // ═══════════════════════════════════════════════════════════════ // Subagent Parent TAB Tracking // ═══════════════════════════════════════════════════════════════ // // CRITICAL: This system tracks which TAB an agent window connects to. // The association is stored in `subagentParentMap` (agentId -> sessionId). // The sessionId IS the tab identifier (tabs have data-id="${sessionId}"). // Once set, this association is PERMANENT and persisted across restarts. /** * Find and assign the parent TAB for a subagent. * * Matching strategy (in order): * 1. Use existing stored association from subagentParentMap (permanent) * 2. Match via claudeSessionId (agent.sessionId === session.claudeSessionId) * 3. FALLBACK: Use the currently active session (since that's where the user typed the command) * * Once found, the association is stored PERMANENTLY in subagentParentMap. */ findParentSessionForSubagent(agentId) { // Check if we already have a permanent association if (this.subagentParentMap.has(agentId)) { // Already have a parent - update agent object from stored value const storedSessionId = this.subagentParentMap.get(agentId); // Verify the session still exists if (this.sessions.has(storedSessionId)) { const agent = this.subagents.get(agentId); if (agent && !agent.parentSessionId) { agent.parentSessionId = storedSessionId; const session = this.sessions.get(storedSessionId); if (session) { agent.parentSessionName = this.getSessionName(session); } this.subagents.set(agentId, agent); this.updateSubagentWindowParent(agentId); } return; } // Stored session no longer exists - clear and re-discover this.subagentParentMap.delete(agentId); } const agent = this.subagents.get(agentId); if (!agent) return; // Strategy 1: Match via claudeSessionId (most accurate) if (agent.sessionId) { for (const [sessionId, session] of this.sessions) { if (session.claudeSessionId === agent.sessionId) { // FOUND! Store this association PERMANENTLY this.setAgentParentSessionId(agentId, sessionId); this.updateSubagentWindowParent(agentId); this.updateSubagentWindowVisibility(); this.updateConnectionLines(); return; } } } // Strategy 2: FALLBACK - Use the currently active session // This works because agents spawn from where the user typed the command if (this.activeSessionId && this.sessions.has(this.activeSessionId)) { this.setAgentParentSessionId(agentId, this.activeSessionId); this.updateSubagentWindowParent(agentId); this.updateSubagentWindowVisibility(); this.updateConnectionLines(); return; } // Strategy 3: If no active session, use the first session if (this.sessions.size > 0) { const firstSessionId = this.sessions.keys().next().value; this.setAgentParentSessionId(agentId, firstSessionId); this.updateSubagentWindowParent(agentId); this.updateSubagentWindowVisibility(); this.updateConnectionLines(); } }, /** * Re-check all orphan subagents (those without a parent TAB) when a session updates. * Called when session:updated fires with claudeSessionId. * * Also re-validates existing associations when claudeSessionId becomes available, * in case the fallback association was wrong. */ recheckOrphanSubagents() { let anyChanged = false; for (const [agentId, agent] of this.subagents) { // Check if this agent has no parent in the persistent map if (!this.subagentParentMap.has(agentId)) { this.findParentSessionForSubagent(agentId); if (this.subagentParentMap.has(agentId)) { anyChanged = true; } } else if (agent.sessionId) { // Agent has a stored parent, but check if we can now do a proper claudeSessionId match // This handles the case where fallback was used but now the real parent is known const storedParent = this.subagentParentMap.get(agentId); const storedSession = this.sessions.get(storedParent); // If the stored session doesn't have a matching claudeSessionId, try to find the real match if (storedSession && storedSession.claudeSessionId !== agent.sessionId) { for (const [sessionId, session] of this.sessions) { if (session.claudeSessionId === agent.sessionId) { // Found the real parent - update the association this.subagentParentMap.set(agentId, sessionId); agent.parentSessionId = sessionId; agent.parentSessionName = this.getSessionName(session); this.subagents.set(agentId, agent); this.updateSubagentWindowParent(agentId); anyChanged = true; break; } } } } } if (anyChanged) { this.saveSubagentParentMap(); this.updateConnectionLines(); } }, /** * Update parentSessionName for all subagents belonging to a TAB. * Called when a session is renamed to keep cached names fresh. */ updateSubagentParentNames(sessionId) { const session = this.sessions.get(sessionId); if (!session) return; const newName = this.getSessionName(session); // Skip iteration if name hasn't changed (avoids O(n) loop on every session:updated) const cachedName = this._parentNameCache?.get(sessionId); if (cachedName === newName) return; if (!this._parentNameCache) this._parentNameCache = new Map(); this._parentNameCache.set(sessionId, newName); for (const [agentId, storedSessionId] of this.subagentParentMap) { if (storedSessionId === sessionId) { const agent = this.subagents.get(agentId); if (agent) { agent.parentSessionName = newName; this.subagents.set(agentId, agent); // Update the window header if open const windowData = this.subagentWindows.get(agentId); if (windowData) { const parentNameEl = windowData.element.querySelector('.subagent-window-parent .parent-name'); if (parentNameEl) { parentNameEl.textContent = newName; } } } } } }, /** * Add parent header to an agent window, showing which TAB it belongs to. */ updateSubagentWindowParent(agentId) { const windowData = this.subagentWindows.get(agentId); if (!windowData) return; // Get parent from persistent map (THE source of truth) const parentSessionId = this.subagentParentMap.get(agentId); if (!parentSessionId) return; const session = this.sessions.get(parentSessionId); const parentName = session ? this.getSessionName(session) : 'Unknown'; // Check if parent header already exists const win = windowData.element; const existingParent = win.querySelector('.subagent-window-parent'); if (existingParent) { // Update existing existingParent.dataset.parentSession = parentSessionId; const nameEl = existingParent.querySelector('.parent-name'); if (nameEl) { nameEl.textContent = parentName; nameEl.onclick = () => this.selectSession(parentSessionId); } return; } // Insert new parent header after the main header const header = win.querySelector('.subagent-window-header'); if (header) { const parentDiv = document.createElement('div'); parentDiv.className = 'subagent-window-parent'; parentDiv.dataset.parentSession = parentSessionId; parentDiv.innerHTML = ` from ${escapeHtml(parentName)} `; header.insertAdjacentElement('afterend', parentDiv); } }, /** * Show/hide subagent windows based on active session. * Behavior controlled by "Subagents for Active Tab Only" setting. * Uses the PERSISTENT subagentParentMap for accurate tab-based visibility. */ updateSubagentWindowVisibility() { const settings = this.loadAppSettingsFromStorage(); const activeTabOnly = settings.subagentActiveTabOnly ?? true; for (const [agentId, windowInfo] of this.subagentWindows) { // Get parent from PERSISTENT map (THE source of truth) const storedParent = this.subagentParentMap.get(agentId); const agent = this.subagents.get(agentId); const parentSessionId = storedParent || agent?.parentSessionId; // Determine visibility based on setting let shouldShow; if (activeTabOnly) { // Show if: no parent known yet, or parent matches active session const hasKnownParent = !!parentSessionId; shouldShow = !hasKnownParent || parentSessionId === this.activeSessionId; } else { // Show all windows (original behavior) shouldShow = true; } if (shouldShow) { // Show window (unless it was minimized by user) if (!windowInfo.minimized) { windowInfo.element.style.display = 'flex'; // Lazily re-create teammate terminal if it was disposed when hidden if (windowInfo._lazyTerminal) { this._restoreTeammateTerminalFromLazy(agentId); } } windowInfo.hidden = false; } else { // Hide window (but don't close it) // Dispose teammate terminal to free memory while hidden on inactive tab this._disposeTeammateTerminalForMinimize(agentId); windowInfo.element.style.display = 'none'; windowInfo.hidden = true; } } // Update connection lines after visibility changes this.updateConnectionLines(); // Restack mobile windows after visibility changes this.relayoutMobileSubagentWindows(); }, // Close all subagent windows for a session (fully removes them, not minimize) // If cleanupData is true, also remove activity and toolResults data to prevent memory leaks closeSessionSubagentWindows(sessionId, cleanupData = false) { const toClose = []; for (const [agentId, _windowData] of this.subagentWindows) { const agent = this.subagents.get(agentId); // Check both subagent parentSessionId and subagentParentMap // (standalone pane windows use subagentParentMap, not subagents map) const parentFromMap = this.subagentParentMap.get(agentId); if (agent?.parentSessionId === sessionId || parentFromMap === sessionId) { toClose.push(agentId); } } for (const agentId of toClose) { this.forceCloseSubagentWindow(agentId); // Clean up activity and tool results data if requested (prevents memory leaks) if (cleanupData) { this.subagents.delete(agentId); this.subagentActivity.delete(agentId); this.subagentToolResults.delete(agentId); this.subagentParentMap.delete(agentId); } } // Also clean up minimized agents for this session this.minimizedSubagents.delete(sessionId); this.renderSessionTabs(); }, // Fully close a subagent window (removes from DOM, not minimize) forceCloseSubagentWindow(agentId) { const windowData = this.subagentWindows.get(agentId); if (windowData) { // Clean up resize observer if (windowData.resizeObserver) { windowData.resizeObserver.disconnect(); } // Clean up drag event listeners (both document-level and handle-level) if (windowData.dragListeners) { document.removeEventListener('mousemove', windowData.dragListeners.move); document.removeEventListener('mouseup', windowData.dragListeners.up); if (windowData.dragListeners.touchMove) { document.removeEventListener('touchmove', windowData.dragListeners.touchMove); document.removeEventListener('touchend', windowData.dragListeners.up); document.removeEventListener('touchcancel', windowData.dragListeners.up); } // Remove handle-level listeners before DOM removal if (windowData.dragListeners.handle) { windowData.dragListeners.handle.removeEventListener('mousedown', windowData.dragListeners.handleMouseDown); windowData.dragListeners.handle.removeEventListener('touchstart', windowData.dragListeners.handleTouchStart); } } windowData.element.remove(); this.subagentWindows.delete(agentId); } // Clean up teammate terminal if present const termData = this.teammateTerminals.get(agentId); if (termData) { if (termData.resizeObserver) { termData.resizeObserver.disconnect(); } if (termData.terminal) { try { termData.terminal.dispose(); } catch {} } this.teammateTerminals.delete(agentId); } }, minimizeSubagentWindow(agentId) { const windowData = this.subagentWindows.get(agentId); if (windowData) { // Dispose teammate terminal on minimize to free DOM/memory (lazy re-creation on restore) this._disposeTeammateTerminalForMinimize(agentId); windowData.element.style.display = 'none'; windowData.minimized = true; this.updateConnectionLines(); } }, // Debounced wrapper — coalesces rapid subagent events (tool_call, progress, // message) into a single DOM update per 100ms per agent window. scheduleSubagentWindowRender(agentId) { // Skip DOM updates for windows with lazy (disposed) terminals — they're minimized const windowData = this.subagentWindows.get(agentId); if (windowData?.minimized) return; if (!this._subagentWindowRenderTimeouts) this._subagentWindowRenderTimeouts = new Map(); if (this._subagentWindowRenderTimeouts.has(agentId)) { clearTimeout(this._subagentWindowRenderTimeouts.get(agentId)); } this._subagentWindowRenderTimeouts.set(agentId, setTimeout(() => { this._subagentWindowRenderTimeouts.delete(agentId); scheduleBackground(() => this.renderSubagentWindowContent(agentId)); }, 100)); }, renderSubagentWindowContent(agentId) { // Skip if this window has a live terminal (don't overwrite xterm with activity HTML) if (this.teammateTerminals.has(agentId)) return; // Skip if this window has a lazy (disposed) terminal — it will be re-created on restore const windowData = this.subagentWindows.get(agentId); if (windowData?._lazyTerminal) return; const body = document.getElementById(`subagent-window-body-${agentId}`); if (!body) return; const activity = this.subagentActivity.get(agentId) || []; if (activity.length === 0) { body.innerHTML = '
No activity yet
'; return; } // Incremental rendering: track how many items are already rendered const renderedCount = body.dataset.renderedCount ? parseInt(body.dataset.renderedCount, 10) : 0; const maxItems = 100; const visibleActivity = activity.slice(-maxItems); // If activity was trimmed or this is a fresh render, do full rebuild if (renderedCount === 0 || renderedCount > visibleActivity.length || body.children.length === 0 || (body.children.length === 1 && body.querySelector('.subagent-empty'))) { // Full rebuild const html = visibleActivity.map(a => this._renderActivityItem(a)).join(''); body.innerHTML = html; body.dataset.renderedCount = String(visibleActivity.length); } else { // Incremental: only append new items const newItems = visibleActivity.slice(renderedCount); if (newItems.length > 0) { const newHtml = newItems.map(a => this._renderActivityItem(a)).join(''); body.insertAdjacentHTML('beforeend', newHtml); body.dataset.renderedCount = String(visibleActivity.length); // Trim excess children from the front if over maxItems while (body.children.length > maxItems) { body.removeChild(body.firstChild); } } } body.scrollTop = body.scrollHeight; }, _renderActivityItem(a) { const time = new Date(a.timestamp).toLocaleTimeString('en-US', { hour12: false }); if (a.type === 'tool') { return `
${time} ${this.getToolIcon(a.tool)} ${escapeHtml(a.tool)} ${escapeHtml(this.getToolDetail(a.tool, a.input))}
`; } else if (a.type === 'tool_result') { const icon = a.isError ? '❌' : '📄'; const statusClass = a.isError ? ' error' : ''; const sizeInfo = a.contentLength > 500 ? ` (${this.formatBytes(a.contentLength)})` : ''; const preview = a.preview.length > 60 ? a.preview.substring(0, 60) + '...' : a.preview; return `
${time} ${icon} ${escapeHtml(a.tool || '→')} ${escapeHtml(preview)}${sizeInfo}
`; } else if (a.type === 'progress') { const isHook = a.hookEvent || a.hookName; const icon = isHook ? '🪝' : (a.progressType === 'query_update' ? '⟳' : '✓'); const displayText = isHook ? (a.hookName || a.hookEvent) : (a.query || a.progressType); return `
${time} ${icon} ${escapeHtml(displayText)}
`; } else if (a.type === 'message') { const preview = a.text.length > 150 ? a.text.substring(0, 150) + '...' : a.text; return `
${time} 💬 ${escapeHtml(preview)}
`; } return ''; }, // Update all open subagent windows updateSubagentWindows() { for (const agentId of this.subagentWindows.keys()) { this.renderSubagentWindowContent(agentId); this.updateSubagentWindowHeader(agentId); } }, // Update subagent window header (title and status) updateSubagentWindowHeader(agentId) { const agent = this.subagents.get(agentId); if (!agent) return; const win = document.getElementById(`subagent-window-${agentId}`); if (!win) return; // Update title/id element with description if available const idEl = win.querySelector('.subagent-window-title .id'); if (idEl) { const teammateInfo = this.getTeammateInfo(agent); const windowTitle = teammateInfo ? teammateInfo.name : (agent.description || agentId.substring(0, 7)); const truncatedTitle = windowTitle.length > 50 ? windowTitle.substring(0, 50) + '...' : windowTitle; idEl.textContent = truncatedTitle; } // Add or update teammate badge let tmBadge = win.querySelector('.teammate-badge'); const teammateInfo = this.getTeammateInfo(agent); if (teammateInfo && !tmBadge) { const titleContainer = win.querySelector('.subagent-window-title'); if (titleContainer) { const badge = document.createElement('span'); badge.className = `teammate-badge teammate-color-${teammateInfo.color}`; badge.title = `Team: ${teammateInfo.teamName}`; badge.textContent = `@${teammateInfo.name}`; const statusEl = titleContainer.querySelector('.status'); if (statusEl) statusEl.insertAdjacentElement('beforebegin', badge); } } // Update full tooltip const titleContainer = win.querySelector('.subagent-window-title'); if (titleContainer) { titleContainer.title = agent.description || agentId; } // Update or add model badge let modelBadge = win.querySelector('.subagent-window-title .subagent-model-badge'); if (agent.modelShort) { if (!modelBadge) { modelBadge = document.createElement('span'); modelBadge.className = `subagent-model-badge ${agent.modelShort}`; const statusEl = win.querySelector('.subagent-window-title .status'); if (statusEl) { statusEl.insertAdjacentElement('beforebegin', modelBadge); } } modelBadge.className = `subagent-model-badge ${agent.modelShort}`; modelBadge.textContent = agent.modelShort; } // Update status const statusEl = win.querySelector('.subagent-window-title .status'); if (statusEl) { statusEl.className = `status ${agent.status}`; statusEl.textContent = agent.status; } }, // Open windows for all active subagents openAllActiveSubagentWindows() { for (const [agentId, agent] of this.subagents) { if (agent.status === 'active' && !this.subagentWindows.has(agentId)) { this.openSubagentWindow(agentId); } } }, // ═══════════════════════════════════════════════════════════════ // Agent Teams // ═══════════════════════════════════════════════════════════════ /** Initialize an xterm.js terminal for a teammate's tmux pane */ initTeammateTerminal(agentId, paneInfo, windowElement) { const body = windowElement.querySelector('.subagent-window-body'); if (!body) return; // Clear the activity log content body.innerHTML = ''; body.classList.add('teammate-terminal-body'); windowElement.classList.add('has-terminal'); const sessionId = paneInfo.sessionId; // Buffer incoming terminal data until xterm is ready const pendingData = []; this.teammateTerminals.set(agentId, { terminal: null, fitAddon: null, paneTarget: paneInfo.paneTarget, sessionId, resizeObserver: null, pendingData, }); // Defer terminal creation to next frame so the body element has computed dimensions requestAnimationFrame(() => { // Safety: if window was closed before we got here, bail out if (!document.contains(body)) { this.teammateTerminals.delete(agentId); return; } const fontSettings = this.loadAppSettingsFromStorage?.() || {}; const terminal = new Terminal({ theme: { ...window.codemanCurrentXtermTheme() }, minimumContrastRatio: window.codemanCurrentSkinIsLight() ? 4.5 : 1, fontFamily: window.CodemanTerminalFont.resolve(fontSettings.terminalFontFamily), // A pane opened after a weight change must match the main terminal; // one open across the change is repainted by applyTerminalFontWeights(). ...window.CodemanTerminalFont.resolveWeights(fontSettings), fontSize: 12, lineHeight: 1.2, cursorBlink: true, cursorStyle: 'block', scrollback: DEFAULT_SCROLLBACK, allowTransparency: true, allowProposedApi: true, }); const fitAddon = new FitAddon.FitAddon(); terminal.loadAddon(fitAddon); if (typeof Unicode11Addon !== 'undefined') { try { const unicode11Addon = new Unicode11Addon.Unicode11Addon(); terminal.loadAddon(unicode11Addon); terminal.unicode.activeVersion = '11'; } catch (_e) { /* Unicode11 addon failed */ } } try { terminal.open(body); } catch (err) { console.warn('[TeammateTerminal] Failed to open terminal:', err); this.teammateTerminals.delete(agentId); return; } // Ctrl+Z (SIGTSTP/job-control suspend): a teammate/subagent pane is always // running an agent CLI (Task-tool dispatched, never a plain shell), so // unlike the main terminal's mode-gated trap this one is unconditional. // Mirrors the main terminal's guard in terminal-ui.js's // attachCustomKeyEventHandler — case-insensitive so Caps Lock (which // flips ev.key to 'Z' without setting shiftKey) can't slip a suspend past it. terminal.attachCustomKeyEventHandler((ev) => { if ( ev.type === 'keydown' && ev.key.toLowerCase() === 'z' && ev.ctrlKey && !ev.altKey && !ev.metaKey && !ev.shiftKey ) { ev.preventDefault(); return false; } return true; }); // Wait for terminal renderer to fully initialize before any writes. // xterm.js needs a few frames after open() before write() is safe. setTimeout(() => { try { fitAddon.fit(); } catch {} // Fetch initial pane buffer fetch(`/api/sessions/${sessionId}/teammate-pane-buffer/${encodeURIComponent(paneInfo.paneTarget)}`) .then(r => r.json()) .then(resp => { if (resp.success && resp.data?.buffer) { try { terminal.write(resp.data.buffer); } catch {} } }) .catch(err => console.error('[TeammateTerminal] Failed to fetch buffer:', err)); // Flush any data that arrived while terminal was initializing for (const chunk of pendingData) { try { terminal.write(chunk); } catch {} } pendingData.length = 0; }, 100); // Forward keyboard input to the teammate's pane terminal.onData((data) => { fetch(`/api/sessions/${sessionId}/teammate-pane-input`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ paneTarget: paneInfo.paneTarget, input: data }), }).catch(err => console.error('[TeammateTerminal] Failed to send input:', err)); }); // Resize observer to refit terminal when window is resized const resizeObserver = new ResizeObserver(() => { requestAnimationFrame(() => { try { fitAddon.fit(); } catch {} }); }); resizeObserver.observe(body); // Update the stored entry with the real terminal const entry = this.teammateTerminals.get(agentId); if (entry) { entry.terminal = terminal; entry.fitAddon = fitAddon; entry.resizeObserver = resizeObserver; } }); }, /** Open a standalone terminal window for a tmux-pane teammate (no subagent entry needed) */ openTeammateTerminalWindow(paneData) { // Only open if the session has a tab in Codeman if (!this.sessions.has(paneData.sessionId)) return; // Use pane target as the unique ID for this window const windowId = `pane-${paneData.paneTarget}`; // If window already exists, focus it if (this.subagentWindows.has(windowId)) { const existing = this.subagentWindows.get(windowId); if (existing.hidden) { existing.element.style.display = 'flex'; existing.hidden = false; } existing.element.style.zIndex = ++this.subagentWindowZIndex; if (existing.minimized) { this.restoreSubagentWindow(windowId); } return; } // Calculate position const windowCount = this.subagentWindows.size; const windowWidth = 550; const windowHeight = 400; const gap = 20; const viewportWidth = window.innerWidth; const viewportHeight = window.innerHeight; const startX = 50; const startY = 120; const maxCols = Math.floor((viewportWidth - startX - 50) / (windowWidth + gap)) || 1; const maxRows = Math.floor((viewportHeight - startY - 50) / (windowHeight + gap)) || 1; const col = windowCount % maxCols; const row = Math.floor(windowCount / maxCols) % maxRows; let finalX = startX + col * (windowWidth + gap); let finalY = startY + row * (windowHeight + gap); finalX = Math.max(10, Math.min(finalX, viewportWidth - windowWidth - 10)); finalY = Math.max(10, Math.min(finalY, viewportHeight - windowHeight - 10)); // Color badge const colorClass = paneData.color || 'blue'; // Create window element const win = document.createElement('div'); win.className = 'subagent-window has-terminal'; win.id = `subagent-window-${windowId}`; win.style.zIndex = ++this.subagentWindowZIndex; win.style.left = `${finalX}px`; win.style.top = `${finalY}px`; win.style.width = `${windowWidth}px`; win.style.height = `${windowHeight}px`; win.innerHTML = `
⬤ ${escapeHtml(paneData.teammateName)} terminal
`; document.body.appendChild(win); // Make draggable const dragListeners = this.makeWindowDraggable(win, win.querySelector('.subagent-window-header')); // Make resizable if method exists if (typeof this.makeWindowResizable === 'function') { this.makeWindowResizable(win); } // Check visibility based on active session const settings = this.loadAppSettingsFromStorage(); const activeTabOnly = settings.subagentActiveTabOnly ?? true; const shouldHide = activeTabOnly && paneData.sessionId !== this.activeSessionId; // Store reference this.subagentWindows.set(windowId, { element: win, minimized: false, hidden: shouldHide, dragListeners, description: `Teammate: ${paneData.teammateName}`, }); // Also add to subagentParentMap for tab-based visibility this.subagentParentMap.set(windowId, paneData.sessionId); if (shouldHide) { win.style.display = 'none'; } // Focus on click win.addEventListener('mousedown', () => { win.style.zIndex = ++this.subagentWindowZIndex; }); // Resize observer for connection lines const resizeObserver = new ResizeObserver(() => { this.updateConnectionLines(); }); resizeObserver.observe(win); this.subagentWindows.get(windowId).resizeObserver = resizeObserver; // Init the xterm.js terminal (lazy if hidden) if (shouldHide) { // Window starts hidden — defer terminal creation until visible (lazy init) const windowEntry = this.subagentWindows.get(windowId); if (windowEntry) { windowEntry._lazyTerminal = true; windowEntry._lazyPaneTarget = paneData.paneTarget; windowEntry._lazySessionId = paneData.sessionId; } } else { this.initTeammateTerminal(windowId, paneData, win); } // Animate in requestAnimationFrame(() => { win.style.transition = 'transform 0.3s ease, opacity 0.3s ease'; win.style.transform = 'scale(1)'; win.style.opacity = '1'; }); }, /** Rebuild the teammate lookup map from all team configs */ rebuildTeammateMap() { this.teammateMap.clear(); for (const [teamName, team] of this.teams) { for (const member of team.members) { if (member.agentType !== 'team-lead') { // Use name as key prefix for matching subagent descriptions this.teammateMap.set(member.name, { name: member.name, color: member.color || 'blue', teamName, agentId: member.agentId, }); } } } }, /** Check if a subagent is a teammate and return its info */ getTeammateInfo(agent) { if (!agent?.description) return null; // Teammate descriptions start with \s]+)/); if (!match) return null; const teammateId = match[1]; // Extract name from teammate_id (format: name@teamName) const name = teammateId.split('@')[0]; return this.teammateMap.get(name) || { name, color: 'blue', teamName: 'unknown' }; }, /** Get teammate badge HTML for a subagent */ getTeammateBadgeHtml(agent) { const info = this.getTeammateInfo(agent); if (!info) return ''; return `@${escapeHtml(info.name)}`; }, /** Render the team tasks panel */ renderTeamTasksPanel() { const panel = document.getElementById('teamTasksPanel'); if (!panel) return; // Find team for active session let activeTeam = null; let activeTeamName = null; if (this.activeSessionId) { for (const [name, team] of this.teams) { if (team.leadSessionId === this.activeSessionId) { activeTeam = team; activeTeamName = name; break; } } } if (!activeTeam) { panel.style.display = 'none'; return; } // Set initial position and make draggable on first show const wasHidden = panel.style.display === 'none'; panel.style.display = 'flex'; if (wasHidden && !this.teamTasksDragListeners) { // Position bottom-right const panelWidth = 360; const panelHeight = 300; panel.style.left = `${Math.max(10, window.innerWidth - panelWidth - 20)}px`; panel.style.top = `${Math.max(10, window.innerHeight - panelHeight - 70)}px`; // Make draggable const header = panel.querySelector('.team-tasks-header'); if (header) { this.teamTasksDragListeners = this.makeWindowDraggable(panel, header); } } const tasks = this.teamTasks.get(activeTeamName) || []; const completed = tasks.filter(t => t.status === 'completed').length; const total = tasks.length; const pct = total > 0 ? Math.round((completed / total) * 100) : 0; const headerEl = panel.querySelector('.team-tasks-header-text'); if (headerEl) { const teammateCount = activeTeam.members.filter(m => m.agentType !== 'team-lead').length; headerEl.textContent = `Team Tasks (${teammateCount} teammates)`; } const progressEl = panel.querySelector('.team-tasks-progress-fill'); if (progressEl) { progressEl.style.width = `${pct}%`; } const progressText = panel.querySelector('.team-tasks-progress-text'); if (progressText) { progressText.textContent = `${completed}/${total}`; } const listEl = panel.querySelector('.team-tasks-list'); if (!listEl) return; if (tasks.length === 0) { listEl.innerHTML = '
No tasks yet
'; return; } const html = tasks.map(task => { const statusIcon = task.status === 'completed' ? '✓' : task.status === 'in_progress' ? '◉' : '○'; const statusClass = task.status.replace('_', '-'); const ownerBadge = task.owner ? `${escapeHtml(task.owner)}` : ''; return `
${statusIcon} ${escapeHtml(task.subject)} ${ownerBadge}
`; }).join(''); listEl.innerHTML = html; }, /** Hide team tasks panel and clean up drag listeners */ hideTeamTasksPanel() { const panel = document.getElementById('teamTasksPanel'); if (panel) panel.style.display = 'none'; if (this.teamTasksDragListeners) { document.removeEventListener('mousemove', this.teamTasksDragListeners.move); document.removeEventListener('mouseup', this.teamTasksDragListeners.up); if (this.teamTasksDragListeners.touchMove) { document.removeEventListener('touchmove', this.teamTasksDragListeners.touchMove); document.removeEventListener('touchend', this.teamTasksDragListeners.up); document.removeEventListener('touchcancel', this.teamTasksDragListeners.up); } if (this.teamTasksDragListeners.handle) { this.teamTasksDragListeners.handle.removeEventListener('mousedown', this.teamTasksDragListeners.handleMouseDown); this.teamTasksDragListeners.handle.removeEventListener('touchstart', this.teamTasksDragListeners.handleTouchStart); } this.teamTasksDragListeners = null; } }, /** Get teammate color by name */ getTeammateColor(name) { const info = this.teammateMap.get(name); return info?.color || 'blue'; }, // ═══════════════════════════════════════════════════════════════ // Project Insights Panel (Bash Tools with Clickable File Paths) // ═══════════════════════════════════════════════════════════════ /** * Normalize a file path to its canonical form for comparison. * - Expands ~ to home directory approximation * - Resolves relative paths against working directory (case folder) * - Normalizes . and .. components */ normalizeFilePath(path, workingDir) { if (!path) return ''; let normalized = path.trim(); const homeDir = '/home/' + (window.USER || 'user'); // Approximation // Expand ~ to home directory if (normalized.startsWith('~/')) { normalized = homeDir + normalized.slice(1); } else if (normalized === '~') { normalized = homeDir; } // If not absolute, resolve against working directory (case folder) if (!normalized.startsWith('/') && workingDir) { normalized = workingDir + '/' + normalized; } // Normalize path components (resolve . and ..) const parts = normalized.split('/'); const stack = []; for (const part of parts) { if (part === '' || part === '.') { continue; } else if (part === '..') { if (stack.length > 1) { stack.pop(); } } else { stack.push(part); } } return '/' + stack.join('/'); }, /** * Extract just the filename from a path. */ getFilename(path) { const parts = path.split('/'); return parts[parts.length - 1] || ''; }, /** * Check if a path is a "shallow root path" - an absolute path with only one * component after root (e.g., /test.txt, /file.log). * These are often typos where the user meant a relative path in the case folder. */ isShallowRootPath(path) { if (!path.startsWith('/')) return false; const parts = path.split('/').filter(p => p !== ''); return parts.length === 1; }, /** * Check if a path is inside (or is) the working directory (case folder). */ isPathInWorkingDir(path, workingDir) { if (!workingDir) return false; const normalized = this.normalizeFilePath(path, workingDir); return normalized.startsWith(workingDir + '/') || normalized === workingDir; }, /** * Smart path equivalence check. * Two paths are considered equivalent if: * 1. They normalize to the same path (standard case) * 2. One is a "shallow root path" (e.g., /test.txt) and the other is the * same filename inside the case folder - the shallow root path * is likely a typo and they probably meant the same file. */ pathsAreEquivalent(path1, path2, workingDir) { const norm1 = this.normalizeFilePath(path1, workingDir); const norm2 = this.normalizeFilePath(path2, workingDir); // Standard check: exact normalized match if (norm1 === norm2) return true; // Smart check: shallow root path vs case folder path with same filename const file1 = this.getFilename(norm1); const file2 = this.getFilename(norm2); if (file1 !== file2) return false; // Different filenames, can't be equivalent const shallow1 = this.isShallowRootPath(path1); const shallow2 = this.isShallowRootPath(path2); const inWorkDir1 = this.isPathInWorkingDir(norm1, workingDir); const inWorkDir2 = this.isPathInWorkingDir(norm2, workingDir); // If one is shallow root (e.g., /test.txt) and other is in case folder // with same filename, treat as equivalent (user likely made a typo) if (shallow1 && inWorkDir2) return true; if (shallow2 && inWorkDir1) return true; return false; }, /** * Pick the "better" of two paths that resolve to the same file. * Prefers paths inside the case folder, longer/more explicit paths, and absolute paths. */ pickBetterPath(path1, path2, workingDir) { // Prefer paths inside the case folder (working directory) if (workingDir) { const inWorkDir1 = this.isPathInWorkingDir(path1, workingDir); const inWorkDir2 = this.isPathInWorkingDir(path2, workingDir); if (inWorkDir1 && !inWorkDir2) return path1; if (inWorkDir2 && !inWorkDir1) return path2; } // Prefer absolute paths const abs1 = path1.startsWith('/'); const abs2 = path2.startsWith('/'); if (abs1 && !abs2) return path1; if (abs2 && !abs1) return path2; // Both absolute or both relative - prefer longer (more explicit) if (path1.length !== path2.length) { return path1.length > path2.length ? path1 : path2; } // Prefer paths without ~ if (!path1.includes('~') && path2.includes('~')) return path1; if (!path2.includes('~') && path1.includes('~')) return path2; return path1; }, /** * Deduplicate file paths across all tools, keeping the "best" version. * Uses smart equivalence checking: * - Standard normalization for relative vs absolute paths * - Detects likely typos (e.g., /file.txt when caseFolder/file.txt exists) * - Prefers paths inside the case folder (working directory) * - Prefers longer, more explicit paths * Returns a Map of normalized path -> best raw path. */ deduplicateProjectInsightPaths(tools, workingDir) { // Collect all paths with their tool IDs const allPaths = []; for (const tool of tools) { for (const rawPath of tool.filePaths) { allPaths.push({ rawPath, toolId: tool.id }); } } if (allPaths.length <= 1) { const pathMap = new Map(); for (const p of allPaths) { pathMap.set(this.normalizeFilePath(p.rawPath, workingDir), p); } return pathMap; } // Sort paths: prefer paths in case folder first, then by length (longer first) allPaths.sort((a, b) => { const aInWorkDir = this.isPathInWorkingDir(a.rawPath, workingDir); const bInWorkDir = this.isPathInWorkingDir(b.rawPath, workingDir); if (aInWorkDir && !bInWorkDir) return -1; if (bInWorkDir && !aInWorkDir) return 1; return b.rawPath.length - a.rawPath.length; // Longer paths first }); const result = new Map(); // normalized -> { rawPath, toolId } const seenNormalized = new Set(); for (const { rawPath, toolId } of allPaths) { const normalized = this.normalizeFilePath(rawPath, workingDir); // Check if we've already seen an equivalent path let isDuplicate = false; for (const [, existing] of result) { if (this.pathsAreEquivalent(rawPath, existing.rawPath, workingDir)) { isDuplicate = true; break; } } if (!isDuplicate && !seenNormalized.has(normalized)) { result.set(normalized, { rawPath, toolId }); seenNormalized.add(normalized); } } return result; }, handleBashToolStart(sessionId, tool) { let tools = this.projectInsights.get(sessionId) || []; // Add new tool tools = tools.filter(t => t.id !== tool.id); tools.push(tool); this.projectInsights.set(sessionId, tools); this.renderProjectInsightsPanel(); }, handleBashToolEnd(sessionId, tool) { const tools = this.projectInsights.get(sessionId) || []; const existing = tools.find(t => t.id === tool.id); if (existing) { existing.status = 'completed'; } this.renderProjectInsightsPanel(); // Remove after a short delay setTimeout(() => { const current = this.projectInsights.get(sessionId) || []; this.projectInsights.set(sessionId, current.filter(t => t.id !== tool.id)); this.renderProjectInsightsPanel(); }, 2000); }, handleBashToolsUpdate(sessionId, tools) { this.projectInsights.set(sessionId, tools); this.renderProjectInsightsPanel(); }, renderProjectInsightsPanel() { const panel = this.$('projectInsightsPanel'); const list = this.$('projectInsightsList'); if (!panel || !list) return; // Check if panel is enabled in settings const settings = this.loadAppSettingsFromStorage(); const showProjectInsights = settings.showProjectInsights ?? false; if (!showProjectInsights) { panel.classList.remove('visible'); this.projectInsightsPanelVisible = false; return; } // Get tools for active session only const tools = this.projectInsights.get(this.activeSessionId) || []; const runningTools = tools.filter(t => t.status === 'running'); if (runningTools.length === 0) { panel.classList.remove('visible'); this.projectInsightsPanelVisible = false; return; } panel.classList.add('visible'); this.projectInsightsPanelVisible = true; // Get working directory for path normalization const session = this.sessions.get(this.activeSessionId); const workingDir = session?.workingDir || this.currentSessionWorkingDir; // Smart deduplication: collect all unique paths across all tools // Paths that resolve to the same file are deduplicated, keeping the most complete version const deduplicatedPaths = this.deduplicateProjectInsightPaths(runningTools, workingDir); // Build a set of paths to show (only the best version of each unique file) const pathsToShow = new Set(Array.from(deduplicatedPaths.values()).map(p => p.rawPath)); const html = []; for (const tool of runningTools) { // Filter this tool's paths to only include those that weren't deduplicated away const filteredPaths = tool.filePaths.filter(p => pathsToShow.has(p)); // Skip tools with no paths to show (all were duplicates of better paths elsewhere) if (filteredPaths.length === 0) continue; const cmdDisplay = tool.command.length > 50 ? tool.command.substring(0, 50) + '...' : tool.command; html.push(`
💻 ${escapeHtml(cmdDisplay)} ${tool.status} ${tool.timeout ? `${escapeHtml(tool.timeout)}` : ''}
`); for (const path of filteredPaths) { const fileName = path.split('/').pop(); html.push(` ${escapeHtml(fileName)} `); } html.push(`
`); } list.innerHTML = html.join(''); }, closeProjectInsightsPanel() { const panel = this.$('projectInsightsPanel'); if (panel) { panel.classList.remove('visible'); this.projectInsightsPanelVisible = false; } }, // ═══════════════════════════════════════════════════════════════ // File Browser Panel // ═══════════════════════════════════════════════════════════════ // Hidden files/folders (dot-prefixed) are filtered SERVER-side by // GET /api/sessions/:id/files, so the toggle re-fetches rather than // re-rendering the cached tree (issue #221). The flag is per-device and lives // in its own localStorage key instead of the app-settings object: that object // is rebuilt from the settings-modal DOM on every save, so a key toggled from // outside the modal would be dropped the next time settings are saved. _loadFileBrowserShowHidden() { try { return localStorage.getItem(FILE_BROWSER_SHOW_HIDDEN_KEY) === '1'; } catch { return false; } }, _syncFileBrowserHiddenBtn() { const btn = this.$('fileBrowserHiddenBtn'); if (!btn) return; const on = this.fileBrowserShowHidden === true; btn.classList.toggle('active', on); btn.setAttribute('aria-pressed', String(on)); const label = on ? 'Hide hidden files and folders' : 'Show hidden files and folders'; btn.setAttribute('title', label); btn.setAttribute('aria-label', label); }, _ensureFileBrowserState() { if (!this._fileBrowserState) { const ownerSessionId = this.activeSessionId || null; const showHidden = this.fileBrowserShowHidden === true; this._fileBrowserState = { treeEpoch: 0, searchEpoch: 0, ownerSessionId, view: 'normal', normalState: this.fileBrowserData ? { sessionId: ownerSessionId, showHidden, treeEpoch: 0, phase: 'ready', data: this.fileBrowserData } : null, treeInFlight: null, inFlight: null, matches: [], deferredDirectoryTarget: null, filter: typeof this.fileBrowserFilter === 'string' ? this.fileBrowserFilter : '', // The person asked for the session folder while the agent is in a worktree (#765). sessionRootPinned: false, }; } return this._fileBrowserState; }, _activateFileBrowserSession(sessionId) { if (!sessionId) return; const state = this._ensureFileBrowserState(); if (state.inFlight?.timer !== undefined && state.inFlight?.timer !== null) { clearTimeout(state.inFlight.timer); } state.searchEpoch++; state.treeEpoch++; state.ownerSessionId = sessionId; state.treeInFlight = null; state.inFlight = null; state.normalState = null; state.matches = []; state.deferredDirectoryTarget = null; state.filter = ''; state.view = 'normal'; state.sessionRootPinned = false; this.fileBrowserData = null; this.fileBrowserFilter = ''; this.fileBrowserExpandedDirs?.clear?.(); this.fileBrowserAllExpanded = false; const searchInput = this.$?.('fileBrowserSearch'); if (searchInput) searchInput.value = ''; this._syncFileBrowserExpandBtn(); const expandBtn = this.$?.('fileBrowserExpandBtn'); if (expandBtn) expandBtn.innerHTML = '\u229E'; this._renderFileBrowserRoot(null); const panel = this.$?.('fileBrowserPanel'); const treeEl = this.$?.('fileBrowserTree'); const statusEl = this.$?.('fileBrowserStatus'); const visible = panel?.classList.contains('visible') === true; if (treeEl) { treeEl.innerHTML = visible ? `
${escapeHtml('Loading files...')}
` : ''; } if (statusEl) statusEl.textContent = visible ? 'Loading files...' : ''; if (visible) { const load = this.loadFileBrowser?.(sessionId); load?.catch?.(() => {}); } }, _resetFileBrowserForHide() { const state = this._ensureFileBrowserState(); if (state.inFlight?.timer !== undefined && state.inFlight?.timer !== null) { clearTimeout(state.inFlight.timer); } state.searchEpoch++; state.treeEpoch++; state.treeInFlight = null; state.inFlight = null; state.normalState = null; state.matches = []; state.deferredDirectoryTarget = null; state.filter = ''; state.view = 'normal'; state.sessionRootPinned = false; this.fileBrowserData = null; this.fileBrowserFilter = ''; this.fileBrowserExpandedDirs?.clear?.(); this.fileBrowserAllExpanded = false; const searchInput = this.$?.('fileBrowserSearch'); if (searchInput) searchInput.value = ''; this._syncFileBrowserExpandBtn(); const expandBtn = this.$?.('fileBrowserExpandBtn'); if (expandBtn) expandBtn.innerHTML = '\u229E'; this._renderFileBrowserRoot(null); const treeEl = this.$?.('fileBrowserTree'); if (treeEl) treeEl.innerHTML = ''; const statusEl = this.$?.('fileBrowserStatus'); if (statusEl) statusEl.textContent = ''; }, _setFileBrowserExpandDisabled(disabled) { const btn = this.$('fileBrowserExpandBtn'); if (btn) btn.disabled = disabled; }, _hasFileBrowserQuery() { const state = this._ensureFileBrowserState(); const input = this.$?.('fileBrowserSearch'); const inputValue = typeof input?.value === 'string' ? input.value : ''; const filterValue = typeof state.filter === 'string' ? state.filter : ''; return inputValue.trim() !== '' || filterValue.trim() !== ''; }, _syncFileBrowserExpandBtn() { this._setFileBrowserExpandDisabled(this._hasFileBrowserQuery()); }, _renderFileBrowserNormalStatus(data, showHidden) { const statusEl = this.$('fileBrowserStatus'); if (!statusEl || !data) return; const { totalFiles, totalDirectories, truncated } = data; statusEl.textContent = `${totalFiles} files, ${totalDirectories} dirs${truncated ? ' (truncated)' : ''}${showHidden ? ' · hidden shown' : ''}`; }, _isFileBrowserNormalCompatible(candidate, sessionId, showHidden, treeEpoch) { return ( candidate?.sessionId === sessionId && candidate.showHidden === showHidden && candidate.treeEpoch === treeEpoch ); }, _isFileBrowserTreeContextCurrent(request, requireCurrentRecord = false) { const state = this._ensureFileBrowserState(); return ( (!requireCurrentRecord || state.treeInFlight === request) && state.ownerSessionId === request.sessionId && state.treeEpoch === request.treeEpoch && (this.fileBrowserShowHidden === true) === request.showHidden ); }, _canRenderFileBrowserNormal(normalState) { const state = this._ensureFileBrowserState(); return ( state.view === 'normal' && this.activeSessionId === normalState?.sessionId && this._isFileBrowserNormalCompatible( normalState, state.ownerSessionId, this.fileBrowserShowHidden === true, state.treeEpoch, ) && this.$('fileBrowserPanel')?.classList.contains('visible') === true ); }, _renderFileBrowserNormalState(normalState) { if (!normalState || !this._canRenderFileBrowserNormal(normalState)) return; const treeEl = this.$('fileBrowserTree'); const statusEl = this.$('fileBrowserStatus'); if (!treeEl) return; if (normalState.phase === 'loading') { this.fileBrowserData = null; treeEl.innerHTML = `
${escapeHtml('Loading files...')}
`; if (statusEl) statusEl.textContent = 'Loading files...'; return; } if (normalState.phase === 'error') { this.fileBrowserData = null; const detail = normalState.error && normalState.error !== 'Failed to load files' ? `: ${normalState.error}` : ''; const message = `Failed to load files${detail}`; treeEl.innerHTML = `
${escapeHtml(message)}
`; if (statusEl) statusEl.textContent = message; return; } if (normalState.phase !== 'ready') return; this.fileBrowserData = normalState.data; this._syncFileBrowserExpandBtn(); this.renderFileBrowserTree(normalState.sessionId); this._renderFileBrowserNormalStatus(normalState.data, normalState.showHidden); this._renderFileBrowserRoot(normalState.data); }, // The strip under the panel header, present only while the session's pane is in a linked // worktree (#765): it says which of the two folders is listed and switches between them. // Everything here comes from GET .../files, so the strip describes the tree on screen rather // than the session's state a moment later. _renderFileBrowserRoot(data) { const strip = this.$?.('fileBrowserRoot'); if (!strip) return; const worktree = data?.worktree; if (typeof worktree?.path !== 'string' || typeof worktree?.name !== 'string') { strip.hidden = true; return; } const inWorktree = data.root === worktree.path; const label = this.$?.('fileBrowserRootLabel'); const name = this.$?.('fileBrowserRootName'); const button = this.$?.('fileBrowserRootSwitch'); if (label) label.textContent = inWorktree ? 'Worktree' : 'Session folder'; if (name) name.textContent = inWorktree ? worktree.name : ''; if (button) button.textContent = inWorktree ? 'Session folder' : 'Back to worktree'; strip.title = typeof data.root === 'string' ? data.root : ''; strip.hidden = false; }, // The `root` parameter of a listing or search. The server ignores it while the pane is not in // a worktree, so the panel always asks unless the person chose the session folder. _fileBrowserRootParam() { return this._ensureFileBrowserState().sessionRootPinned ? '' : '&root=live'; }, toggleFileBrowserRoot() { const state = this._ensureFileBrowserState(); state.sessionRootPinned = !state.sessionRootPinned; return this._reloadFileBrowserKeepingQuery(); }, // Called on every session update of the active session. Compares with what the listing on // screen reported rather than with the previous update, so a load already in flight when the // pane moved is corrected by the next update, and an answer that matches ends it: a listing // always reports the session's worktree, whichever folder it walked, so this cannot loop. _followFileBrowserWorktree(session) { const state = this._fileBrowserState; if (!state || state.ownerSessionId !== session.id) return; if (this.$?.('fileBrowserPanel')?.classList.contains('visible') !== true) return; const normal = state.normalState; if (normal?.phase !== 'ready' || normal.sessionId !== session.id) return; const live = session.liveWorktree?.path ?? null; const listed = normal.data?.worktree?.path ?? null; if (live === listed) return; // The pin was about the worktree the agent has just left. state.sessionRootPinned = false; this._reloadFileBrowserKeepingQuery(); }, _validateFileBrowserTreeEnvelope(result) { if (!result || typeof result !== 'object' || result.success !== true) return null; const data = result.data; if (!data || typeof data !== 'object' || !Array.isArray(data.tree)) return null; if (data.mode === 'search') return null; if ( typeof data.totalFiles !== 'number' || !Number.isFinite(data.totalFiles) || data.totalFiles < 0 || typeof data.totalDirectories !== 'number' || !Number.isFinite(data.totalDirectories) || data.totalDirectories < 0 || typeof data.truncated !== 'boolean' ) { return null; } const validNodes = nodes => nodes.every(node => { if (!node || typeof node !== 'object') return false; if (typeof node.name !== 'string' || typeof node.path !== 'string') return false; if (node.type !== 'file' && node.type !== 'directory') return false; if (node.size !== undefined && (typeof node.size !== 'number' || !Number.isFinite(node.size))) return false; if (node.extension !== undefined && typeof node.extension !== 'string') return false; if (node.children !== undefined && (!Array.isArray(node.children) || !validNodes(node.children))) return false; return true; }); return validNodes(data.tree) ? data : null; }, _normalizeFileBrowserTreeError(error) { return typeof error?.message === 'string' && error.message ? error.message : 'Failed to load files'; }, _validateFileBrowserSearchEnvelope(result) { if (!result || typeof result !== 'object' || result.success !== true) return null; const data = result.data; if (!data || typeof data !== 'object' || data.mode !== 'search' || !Array.isArray(data.matches)) return null; if (typeof data.truncated !== 'boolean') return null; if ( data.matchCount !== undefined && (typeof data.matchCount !== 'number' || !Number.isFinite(data.matchCount) || data.matchCount < 0) ) { return null; } for (const match of data.matches) { if (!match || typeof match !== 'object') return null; if (typeof match.name !== 'string' || typeof match.path !== 'string') return null; if (match.type !== 'file' && match.type !== 'directory') return null; if (match.size !== undefined && (typeof match.size !== 'number' || !Number.isFinite(match.size))) return null; if (match.extension !== undefined && typeof match.extension !== 'string') return null; } return data; }, _canRenderFileBrowserSearch(request) { const state = this._ensureFileBrowserState(); const panel = this.$('fileBrowserPanel'); return ( state.searchEpoch === request.epoch && state.ownerSessionId === request.ownerSessionId && this.activeSessionId === request.ownerSessionId && (this.fileBrowserShowHidden === true) === request.showHidden && state.filter === request.rawInput && panel?.classList.contains('visible') === true ); }, _renderFileBrowserSearchError() { const treeEl = this.$('fileBrowserTree'); const statusEl = this.$('fileBrowserStatus'); const message = 'Search failed'; if (treeEl) treeEl.innerHTML = `
${escapeHtml(message)}
`; if (statusEl) statusEl.textContent = message; }, _canContinueFileBrowserHiddenReload(continuation, normalState) { const state = this._ensureFileBrowserState(); const input = this.$?.('fileBrowserSearch'); const currentInput = typeof input?.value === 'string' ? input.value : state.filter; return ( state.view === 'normal' && state.searchEpoch === continuation.searchEpoch && state.treeEpoch === continuation.treeEpoch && state.ownerSessionId === continuation.ownerSessionId && this.activeSessionId === continuation.ownerSessionId && (this.fileBrowserShowHidden === true) === continuation.showHidden && state.filter === continuation.rawInput && currentInput === continuation.rawInput && currentInput.trim() === continuation.query && this.$?.('fileBrowserPanel')?.classList.contains('visible') === true && normalState?.phase === 'ready' && this._isFileBrowserNormalCompatible( normalState, continuation.ownerSessionId, continuation.showHidden, continuation.treeEpoch, ) ); }, async toggleFileBrowserHidden() { this.fileBrowserShowHidden = !this.fileBrowserShowHidden; try { localStorage.setItem(FILE_BROWSER_SHOW_HIDDEN_KEY, this.fileBrowserShowHidden ? '1' : '0'); } catch {} this._syncFileBrowserHiddenBtn(); return this._reloadFileBrowserKeepingQuery(); }, // Re-fetch the tree after something the server filters on changed (hidden files, the listing's // root), then re-run the search in the box against the new tree. async _reloadFileBrowserKeepingQuery() { const state = this._ensureFileBrowserState(); const rawInput = typeof state.filter === 'string' ? state.filter : ''; const query = rawInput.trim(); if (state.inFlight?.timer !== undefined && state.inFlight?.timer !== null) { clearTimeout(state.inFlight.timer); } state.searchEpoch++; state.inFlight = null; state.matches = []; state.deferredDirectoryTarget = null; state.normalState = null; this.fileBrowserData = null; if (query.length <= 256) state.view = 'normal'; this._syncFileBrowserExpandBtn(); // Expanded-directory state is deliberately preserved so toggling does not // collapse the tree the user just navigated. const ownerSessionId = state.ownerSessionId || this.activeSessionId; if (!ownerSessionId || this.activeSessionId !== ownerSessionId) return; const searchEpoch = state.searchEpoch; const showHidden = this.fileBrowserShowHidden === true; const load = this.loadFileBrowser(ownerSessionId, { force: true }); const treeEpoch = state.treeEpoch; if (!load?.then) return; await load; if (!query || query.length > 256) return; const continuation = { ownerSessionId, showHidden, treeEpoch, searchEpoch, rawInput, query }; if (this._canContinueFileBrowserHiddenReload(continuation, state.normalState)) { this.filterFileBrowser(rawInput); } }, loadFileBrowser(sessionId, { force = false } = {}) { if (!sessionId) return undefined; const state = this._ensureFileBrowserState(); const treeEl = this.$('fileBrowserTree'); this._syncFileBrowserHiddenBtn(); if (!treeEl) return undefined; if (!state.ownerSessionId) state.ownerSessionId = sessionId; if (state.ownerSessionId !== sessionId) return undefined; if (force) state.treeEpoch++; const showHidden = this.fileBrowserShowHidden === true; const treeEpoch = state.treeEpoch; const inFlight = state.treeInFlight; if ( !force && this._isFileBrowserNormalCompatible(inFlight, sessionId, showHidden, treeEpoch) ) { return inFlight.promise; } const settled = state.normalState; if ( !force && this._isFileBrowserNormalCompatible(settled, sessionId, showHidden, treeEpoch) && (settled.phase === 'ready' || settled.phase === 'error') ) { if (settled.phase === 'ready') this.fileBrowserData = settled.data; this._renderFileBrowserNormalState(settled); return Promise.resolve(settled); } const loadingState = { sessionId, showHidden, treeEpoch, phase: 'loading' }; state.normalState = loadingState; this.fileBrowserData = null; this._renderFileBrowserNormalState(loadingState); const record = { sessionId, showHidden, treeEpoch, promise: null }; const request = (async () => { try { const res = await fetch( `/api/sessions/${encodeURIComponent(sessionId)}/files?depth=5&showHidden=${showHidden}${this._fileBrowserRootParam()}`, ); if (!res.ok) throw new Error('Failed to load files'); const result = await res.json(); const data = this._validateFileBrowserTreeEnvelope(result); if (!data) { const detail = result && typeof result === 'object' && typeof result.error === 'string' ? result.error : 'Failed to load files'; throw new Error(detail); } if (!this._isFileBrowserTreeContextCurrent(record, true)) return; const nextNormalState = { sessionId, showHidden, treeEpoch, phase: 'ready', data }; state.normalState = nextNormalState; this.fileBrowserData = data; const deferredRendered = this._completeDeferredFileBrowserDirectory?.(nextNormalState) === true; if (!deferredRendered) this._renderFileBrowserNormalState(nextNormalState); } catch (error) { if (!this._isFileBrowserTreeContextCurrent(record, true)) return; const nextNormalState = { sessionId, showHidden, treeEpoch, phase: 'error', error: this._normalizeFileBrowserTreeError(error), }; state.normalState = nextNormalState; this.fileBrowserData = null; this._completeDeferredFileBrowserDirectory?.(nextNormalState); console.error('Failed to load file browser:', error); this._renderFileBrowserNormalState(nextNormalState); } })(); record.promise = request.finally(() => { if (state.treeInFlight === record) state.treeInFlight = null; }); state.treeInFlight = record; return record.promise; }, renderFileBrowserTree(ownerSessionId) { const treeEl = this.$('fileBrowserTree'); if (!treeEl || !this.fileBrowserData) return; const state = this._ensureFileBrowserState(); const owner = ownerSessionId || state.normalState?.sessionId || state.ownerSessionId || this.activeSessionId; if (!owner) return; const { tree } = this.fileBrowserData; if (!tree || tree.length === 0) { treeEl.innerHTML = '
No files found
'; return; } const html = []; const renderNode = (node, depth) => { const isDir = node.type === 'directory'; const isExpanded = this.fileBrowserExpandedDirs.has(node.path); const icon = isDir ? (isExpanded ? '\uD83D\uDCC2' : '\uD83D\uDCC1') : this.getFileIcon(node.extension); const expandIcon = isDir ? `\u25B6` : ''; const sizeStr = !isDir && node.size !== undefined ? `${this.formatFileSize(node.size)}` : ''; const nameClass = isDir ? 'file-tree-name directory' : 'file-tree-name'; const downloadBtn = !isDir ? `⬇` : ''; html.push(`
${expandIcon} ${icon} ${escapeHtml(node.name)} ${sizeStr} ${downloadBtn}
`); // Render children if directory is expanded if (isDir && isExpanded && node.children) { for (const child of node.children) { renderNode(child, depth + 1); } } }; for (const node of tree) { renderNode(node, 0); } treeEl.innerHTML = html.join(''); // Add click handlers treeEl.querySelectorAll('.file-tree-item').forEach(item => { item.addEventListener('click', () => { const path = item.dataset.path; const type = item.dataset.type; if (type === 'directory') { this.toggleFileBrowserFolder(path); } else { this.openFilePreview(path, owner); } }); }); }, toggleFileBrowserFolder(path) { if (this.fileBrowserExpandedDirs.has(path)) { this.fileBrowserExpandedDirs.delete(path); } else { this.fileBrowserExpandedDirs.add(path); } this.renderFileBrowserTree(); }, filterFileBrowser(value) { const state = this._ensureFileBrowserState(); const rawInput = String(value ?? ''); const query = rawInput.trim(); state.searchEpoch++; state.filter = rawInput; state.deferredDirectoryTarget = null; this.fileBrowserFilter = rawInput; this._syncFileBrowserExpandBtn(); if (state.inFlight?.timer !== undefined && state.inFlight?.timer !== null) { clearTimeout(state.inFlight.timer); } state.inFlight = null; if (!state.ownerSessionId && this.activeSessionId) state.ownerSessionId = this.activeSessionId; const ownerSessionId = state.ownerSessionId || null; if (!this.activeSessionId || !ownerSessionId || this.activeSessionId !== ownerSessionId) return; if (!query) { state.view = 'normal'; state.matches = []; this._syncFileBrowserExpandBtn(); const normal = state.normalState; if ( ownerSessionId && this._isFileBrowserNormalCompatible( normal, ownerSessionId, this.fileBrowserShowHidden === true, state.treeEpoch, ) ) { this._renderFileBrowserNormalState(normal); } return; } if (query.length > 256) { const message = 'Search queries are limited to 256 characters'; state.view = 'query-error'; state.matches = []; this._syncFileBrowserExpandBtn(); const treeEl = this.$('fileBrowserTree'); const statusEl = this.$('fileBrowserStatus'); if (treeEl) treeEl.innerHTML = `
${escapeHtml(message)}
`; if (statusEl) statusEl.textContent = message; return; } const panel = this.$('fileBrowserPanel'); const treeEl = this.$('fileBrowserTree'); if (!ownerSessionId || !panel || !treeEl) return; const request = { epoch: state.searchEpoch, treeEpoch: state.treeEpoch, ownerSessionId, showHidden: this.fileBrowserShowHidden === true, rawInput, query, rootParam: this._fileBrowserRootParam(), timer: null, }; state.view = 'search-pending'; state.matches = []; state.inFlight = request; this._syncFileBrowserExpandBtn(); treeEl.innerHTML = `
${escapeHtml('Searching...')}
`; const statusEl = this.$('fileBrowserStatus'); if (statusEl) statusEl.textContent = 'Searching...'; request.timer = setTimeout(async () => { request.timer = null; try { const res = await fetch( `/api/sessions/${encodeURIComponent(ownerSessionId)}/files?depth=5&showHidden=${request.showHidden}&q=${encodeURIComponent(query)}${request.rootParam}`, ); if (!res.ok) throw new Error('Search failed'); const result = await res.json(); const data = this._validateFileBrowserSearchEnvelope(result); if (!data) throw new Error('Search failed'); const canRender = this._canRenderFileBrowserSearch(request); if (state.inFlight === request) state.inFlight = null; if (!canRender) return; state.view = 'search-results'; state.matches = data.matches; this._renderFileBrowserSearchResults(data.matches, ownerSessionId, data); } catch (err) { const canRender = this._canRenderFileBrowserSearch(request); if (state.inFlight === request) state.inFlight = null; if (!canRender) return; console.error('Failed to search file browser:', err); state.view = 'search-error'; state.matches = []; this._renderFileBrowserSearchError(); } }, 250); }, _renderFileBrowserSearchResults(matches, ownerSessionId, data) { const treeEl = this.$('fileBrowserTree'); if (!treeEl || !ownerSessionId) return; const state = this._ensureFileBrowserState(); const searchContext = { ownerSessionId, showHidden: this.fileBrowserShowHidden === true, treeEpoch: state.treeEpoch, searchEpoch: state.searchEpoch, rawInput: state.filter, query: state.filter.trim(), view: state.view, }; if (matches.length === 0) { treeEl.innerHTML = `
${escapeHtml('No matches')}
`; } else { const ownerPath = encodeURIComponent(ownerSessionId); treeEl.innerHTML = matches .map(match => { const isDir = match.type === 'directory'; const icon = isDir ? '📁' : this.getFileIcon(match.extension || ''); const sizeStr = !isDir && match.size !== undefined ? `${this.formatFileSize(match.size)}` : ''; const nameClass = isDir ? 'file-tree-name directory' : 'file-tree-name'; const downloadBtn = !isDir ? `⬇` : ''; return `
${icon} ${escapeHtml(match.name)} ${sizeStr} ${downloadBtn}
`; }) .join(''); } treeEl.querySelectorAll('.file-tree-item').forEach(item => { item.addEventListener('click', () => { const path = item.dataset.path; if (item.dataset.type === 'directory') { this._openFileBrowserSearchDirectory({ ...searchContext, path }); } else { this.openFilePreview(path, ownerSessionId); } }); }); const statusEl = this.$('fileBrowserStatus'); if (statusEl) { const count = data.matchCount === undefined ? matches.length : data.matchCount; statusEl.textContent = `${count} ${count === 1 ? 'match' : 'matches'}${data.truncated ? ' (truncated)' : ''}`; } }, _findFileBrowserDirectory(nodes, targetPath, ancestors = []) { if (!Array.isArray(nodes)) return null; for (const node of nodes) { if (!node || typeof node !== 'object') continue; if (node.type === 'directory' && node.path === targetPath) { return { target: node, ancestors: [...ancestors] }; } if (node.type !== 'directory' || !Array.isArray(node.children)) continue; const found = this._findFileBrowserDirectory(node.children, targetPath, [...ancestors, node.path]); if (found) return found; } return null; }, _isFileBrowserDirectoryContextCurrent(target) { const state = this._ensureFileBrowserState(); const input = this.$?.('fileBrowserSearch'); const currentInput = typeof input?.value === 'string' ? input.value : state.filter; return ( target && state.ownerSessionId === target.ownerSessionId && this.activeSessionId === target.ownerSessionId && state.treeEpoch === target.treeEpoch && state.searchEpoch === target.searchEpoch && (this.fileBrowserShowHidden === true) === target.showHidden && state.filter === target.rawInput && currentInput === target.rawInput && currentInput.trim() === target.query && state.view === target.view && this.$?.('fileBrowserPanel')?.classList.contains('visible') === true ); }, _promptFileBrowserDirectoryReload() { this.showToast?.('Reload files before opening this folder', 'info'); }, _openFileBrowserSearchDirectory(target) { if (!this._isFileBrowserDirectoryContextCurrent(target)) return; const state = this._ensureFileBrowserState(); const normalState = state.normalState; if ( !this._isFileBrowserNormalCompatible( normalState, target.ownerSessionId, target.showHidden, target.treeEpoch, ) ) { state.deferredDirectoryTarget = null; this._promptFileBrowserDirectoryReload(); return; } if (normalState.phase === 'loading') { state.deferredDirectoryTarget = { ...target }; return; } state.deferredDirectoryTarget = null; if (normalState.phase !== 'ready') { this._promptFileBrowserDirectoryReload(); return; } const found = this._findFileBrowserDirectory(normalState.data?.tree, target.path); if (!found) { this._promptFileBrowserDirectoryReload(); return; } this._leaveFileBrowserSearchForDirectory([...found.ancestors, found.target.path], normalState); }, _completeDeferredFileBrowserDirectory(normalState) { const state = this._ensureFileBrowserState(); const target = state.deferredDirectoryTarget; if (!target) return false; if (!this._isFileBrowserDirectoryContextCurrent(target)) { if (state.deferredDirectoryTarget === target) state.deferredDirectoryTarget = null; return false; } if ( !this._isFileBrowserNormalCompatible( normalState, target.ownerSessionId, target.showHidden, target.treeEpoch, ) || (normalState.phase !== 'ready' && normalState.phase !== 'error') ) { return false; } state.deferredDirectoryTarget = null; if (normalState.phase === 'error') { this._promptFileBrowserDirectoryReload(); return false; } const found = this._findFileBrowserDirectory(normalState.data?.tree, target.path); if (!found) { this._promptFileBrowserDirectoryReload(); return false; } this._leaveFileBrowserSearchForDirectory([...found.ancestors, found.target.path], normalState); return true; }, _leaveFileBrowserSearchForDirectory(paths, normalState) { const state = this._ensureFileBrowserState(); if (state.inFlight?.timer !== undefined && state.inFlight?.timer !== null) { clearTimeout(state.inFlight.timer); } state.searchEpoch++; state.inFlight = null; state.filter = ''; state.matches = []; state.deferredDirectoryTarget = null; state.view = 'normal'; this.fileBrowserFilter = ''; const input = this.$?.('fileBrowserSearch'); if (input) input.value = ''; this._syncFileBrowserExpandBtn(); for (const path of paths) { if (typeof path === 'string') this.fileBrowserExpandedDirs?.add?.(path); } this.fileBrowserData = normalState.data; this._renderFileBrowserNormalState(normalState); }, expandAllDirectories(nodes) { for (const node of nodes) { if (node.type === 'directory') { this.fileBrowserExpandedDirs.add(node.path); if (node.children) { this.expandAllDirectories(node.children); } } } }, collapseAllDirectories() { this.fileBrowserExpandedDirs.clear(); }, toggleFileBrowserExpand() { if (this._hasFileBrowserQuery()) { this._syncFileBrowserExpandBtn(); return; } this.fileBrowserAllExpanded = !this.fileBrowserAllExpanded; const btn = this.$('fileBrowserExpandBtn'); if (this.fileBrowserAllExpanded) { this.expandAllDirectories(this.fileBrowserData?.tree || []); if (btn) btn.innerHTML = '\u229F'; // Collapse icon } else { this.collapseAllDirectories(); if (btn) btn.innerHTML = '\u229E'; // Expand icon } this.renderFileBrowserTree(); }, refreshFileBrowser() { const state = this._ensureFileBrowserState(); if (state.inFlight?.timer !== undefined && state.inFlight?.timer !== null) { clearTimeout(state.inFlight.timer); } state.inFlight = null; state.searchEpoch++; state.filter = ''; state.matches = []; state.deferredDirectoryTarget = null; state.view = 'normal'; this.fileBrowserFilter = ''; this.fileBrowserExpandedDirs.clear(); this.fileBrowserAllExpanded = false; const expandBtn = this.$('fileBrowserExpandBtn'); if (expandBtn) expandBtn.innerHTML = '\u229E'; const searchInput = this.$('fileBrowserSearch'); if (searchInput) searchInput.value = ''; this._syncFileBrowserExpandBtn(); const ownerSessionId = state.ownerSessionId || this.activeSessionId; if (!ownerSessionId || this.activeSessionId !== ownerSessionId) return undefined; return this.loadFileBrowser(ownerSessionId, { force: true }); }, // Header "File Viewer" button (opt-in via App Settings → Header Displays → // File Viewer). Toggles the file browser panel open/closed without a trip // through settings. Persists via the same `showFileBrowser` flag the Panels // section + the panel's own close (X) use, so the three stay in sync. toggleFileBrowserButton() { const panel = this.$('fileBrowserPanel'); const isOpen = panel?.classList.contains('visible'); const btn = document.querySelector('.btn-file-viewer'); if (isOpen) { this.closeFileBrowserPanel(); if (btn) btn.setAttribute('aria-expanded', 'false'); return; } if (!this.activeSessionId) { this.showToast('Open a session to browse its files', 'info'); return; } const settings = this.loadAppSettingsFromStorage(); settings.showFileBrowser = true; this.saveAppSettingsToStorage(settings); const checkbox = document.getElementById('appSettingsShowFileBrowser'); if (checkbox) checkbox.checked = true; this.applyMonitorVisibility(); if (btn) btn.setAttribute('aria-expanded', 'true'); }, closeFileBrowserPanel() { const panel = this.$('fileBrowserPanel'); this._resetFileBrowserForHide(); if (panel) { panel.classList.remove('visible'); // Reset position so it reopens at default location panel.style.left = ''; panel.style.top = ''; panel.style.bottom = ''; panel.style.right = ''; } // Clean up drag listeners if (this.fileBrowserDragListeners) { const dl = this.fileBrowserDragListeners; document.removeEventListener('mousemove', dl.move); document.removeEventListener('mouseup', dl.up); document.removeEventListener('touchmove', dl.touchMove); document.removeEventListener('touchend', dl.up); document.removeEventListener('touchcancel', dl.up); if (dl.handle) { dl.handle.removeEventListener('mousedown', dl.handleMouseDown); dl.handle.removeEventListener('touchstart', dl.handleTouchStart); if (dl._onFirstDrag) { dl.handle.removeEventListener('mousedown', dl._onFirstDrag); dl.handle.removeEventListener('touchstart', dl._onFirstDrag); } } this.fileBrowserDragListeners = null; } // Save setting const settings = this.loadAppSettingsFromStorage(); settings.showFileBrowser = false; this.saveAppSettingsToStorage(settings); const checkbox = document.getElementById('appSettingsShowFileBrowser'); if (checkbox) checkbox.checked = false; const headerBtn = document.querySelector('.btn-file-viewer'); if (headerBtn) headerBtn.setAttribute('aria-expanded', 'false'); }, /** * Whether a path is absolute and provably OUTSIDE this session's workspace. * * `file-content` / `file-raw` resolve every path against `workingDir` and * refuse anything that escapes it, so an absolute path elsewhere on the host * (an agent's `/tmp` scratchpad capture, a screenshot, another checkout) can * only ever 404 there — it has to go through the attachment routes instead. * * A string compare is enough for ROUTING; the real containment decision stays * server-side (realpath + guard) on whichever route the request lands on. An * unknown workingDir answers false, leaving the historical path untouched. */ _isExternalPreviewPath(filePath, sessionId) { // `~/…` (a terminal or response-viewer link): only the server knows the home // of the session's host, and only the attachment route expands it. if (typeof filePath === 'string' && filePath.startsWith('~/')) return true; if (typeof filePath !== 'string' || !filePath.startsWith('/')) return false; const workingDir = this.sessions.get(sessionId)?.workingDir; if (!workingDir) return false; const root = workingDir.endsWith('/') ? workingDir : `${workingDir}/`; return filePath !== workingDir && !filePath.startsWith(root); }, /** * Register a file path as a live external attachment and return * its id, so the preview can render it through the by-id attachment routes. * * `notify: false` keeps this quiet: the caller is already opening the file in * the overlay, so the usual attachment card + unread badge would be noise on * top of the thing the user just asked to see. The server still enforces the * full attachment guard (blocked secret trees, extension allowlist, symlinks * resolved), so a refusal here is a policy answer worth showing verbatim. * * @returns {Promise<{attachmentId?: string, size?: number, error?: string, status?: number}>} */ async _registerExternalPreview(filePath, sessionId) { try { const res = await fetch(`/api/sessions/${sessionId}/attachments`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ path: filePath, notify: false }), }); const result = await res.json().catch(() => null); if (res.ok && result?.success && result.data?.attachmentId) { return { attachmentId: result.data.attachmentId, size: result.data.size || 0 }; } const reason = result?.error || `Cannot open this file (HTTP ${res.status})`; // The registry's type answer is a policy term, not an explanation, and the // user just clicked a file they can see on disk. Say what IS previewable // through this lookup instead, using the path's actual workspace scope. if (/unsupported/i.test(reason)) { const ext = (filePath.split('.').pop() || '').toLowerCase(); const target = this._isExternalPreviewPath(filePath, sessionId) ? `.${ext} from outside the session workspace` : `"${filePath}" through the attachment lookup`; return { status: res.status, error: `Cannot preview ${target} (images, video, audio, PDF, Office documents and text files only).`, }; } return { error: reason, status: res.status }; } catch (err) { return { error: err.message || 'Cannot open this file' }; } }, /** * @param {object} [options] * @param {{folderId: string, name: string}} [options.folderFile] A file of a * granted folder (folder grid): rendered from the folder's by-name routes, so * paging through 300 renders never touches the attachment registry. */ async openFilePreview(filePath, sessionId = this.activeSessionId, attachmentId = null, options = {}) { if (!sessionId || !filePath) return; const folderFile = options.folderFile || null; // Prev/next only while browsing a folder grid; a preview opened from anywhere // else ends that browsing. if (!folderFile && this.folderGrid) this.folderGrid.index = null; this._updateFolderPreviewNav(folderFile ? null : this._previewFolderPath(filePath, sessionId, attachmentId)); const overlay = this.$('filePreviewOverlay'); const titleEl = this.$('filePreviewTitle'); const bodyEl = this.$('filePreviewBody'); const footerEl = this.$('filePreviewFooter'); if (!overlay || !bodyEl) return; this._recordFilePreviewHistory(filePath, sessionId, attachmentId, options); this._bindFilePreviewChrome(); // Only the newest load may write: paging ←/→ through a folder starts the next // load while the previous one still awaits its fetch, and its late answer would // put the previous file's text under the next file's title. const load = (this._filePreviewLoad = (this._filePreviewLoad || 0) + 1); const stale = () => load !== this._filePreviewLoad; // Edit mode: reset any prior editor state whenever a preview (re)loads. this._resetFilePreviewEdit(); // Stop whatever the previous preview was playing. Overwriting innerHTML // only DETACHES a