diff --git a/src/public/app.js b/src/public/app.js index c0fa421..36a8f3a 100644 --- a/src/public/app.js +++ b/src/public/app.js @@ -73,7 +73,7 @@ class ClaudeCodeWebInterface { this.setupTerminal(); this.setupUI(); this.setupPlanDetector(); - // Pane manager after UI exists (always-on multi-pane) + // Pane manager after UI exists (optional multi-pane) this.paneManager = new PaneManager(this); this.loadSettings(); this.applyAliasesToUI(); @@ -85,10 +85,8 @@ class ClaudeCodeWebInterface { // Initialize the session tab manager and wait for sessions to load this.sessionTabManager = new SessionTabManager(this); await this.sessionTabManager.init(); - // Always enable multi-pane mode and hide global tabs - if (this.paneManager && !this.paneManager.enabled) { - this.paneManager.enable(); - } + // Respect user preference from storage; do not auto-enable panes by default + // PaneManager.restoreFromStorage() will enable if previously enabled. // Show mode switcher on mobile if (this.isMobile) { diff --git a/src/public/panes.js b/src/public/panes.js index 515df97..f4ea07d 100644 --- a/src/public/panes.js +++ b/src/public/panes.js @@ -79,6 +79,21 @@ class ClaudePane { this.hadOutput = true; this.hideStartOverlay(); } + } else if (msg.type === 'session_joined') { + // Replay recent buffer so existing sessions show content immediately + if (Array.isArray(msg.outputBuffer) && msg.outputBuffer.length) { + const joined = msg.outputBuffer.join(''); + const filtered = joined.replace(/\x1b\[\[?[IO]/g, ''); + this.terminal.write(filtered); + if (filtered) { + this.hadOutput = true; + this.hideStartOverlay(); + } + } + } else if (msg.type === 'error') { + // Show errors in terminal UI for visibility + const text = (msg.message || 'Error').toString(); + this.terminal.write(`\r\n\x1b[31m${text}\x1b[0m\r\n`); } }; this.socket.onclose = () => {}; @@ -267,11 +282,7 @@ class PaneManager { const active = this.app?.currentClaudeSessionId; if (active) this.assignSession(0, active); this.focusPane(this.activeIndex || 0); - // Hide global tabs in tiled mode - const tabsSection = document.querySelector('.tabs-section'); - if (tabsSection) tabsSection.style.display = 'none'; - const overflow = document.getElementById('tabOverflowWrapper'); - if (overflow) overflow.style.display = 'none'; + // Keep global tabs visible; they target the active pane (VS Code-style) this.persist(); } disable() { @@ -283,11 +294,7 @@ class PaneManager { const tw = tc.querySelector('.terminal-wrapper'); if (tw) tw.style.display = ''; } - // Show global tabs again - const tabsSection = document.querySelector('.tabs-section'); - if (tabsSection) tabsSection.style.display = ''; - const overflow = document.getElementById('tabOverflowWrapper'); - if (overflow) overflow.style.display = ''; + // Global tabs remain visible in both modes this.persist(); } @@ -739,7 +746,12 @@ class PaneManager { this.grid.querySelectorAll('.pane-add').forEach(btn => btn.addEventListener('click', (e) => { const idx = parseInt(btn.dataset.index, 10); this.focusPane(idx); - this.app?.showFolderBrowser?.(); + // Shift-click to create a new session directly; normal click opens session picker + if (e.shiftKey) { + this.app?.showFolderBrowser?.(); + } else { + this.openAddMenu(idx, btn); + } e.stopPropagation(); })); this.refreshSessionSelects(); diff --git a/src/public/style.css b/src/public/style.css index 100065f..b07efa0 100644 --- a/src/public/style.css +++ b/src/public/style.css @@ -467,9 +467,7 @@ body { .tab-tile:hover { background: var(--bg-tertiary); color: var(--text-primary); } .tab-tile[disabled] { opacity: .5; cursor: not-allowed; } -/* Always multi-pane: hide global tabs */ -.session-tabs-bar .tabs-section { display: none !important; } -#tabOverflowWrapper { display: none !important; } +/* Global tabs are visible; panes can be enabled optionally */ .tab-new:hover { background-color: var(--bg-tertiary);