Release v3.0.4 (#48)

* fix(ui): restore global tabs, keep panes optional; pane Add menu selects existing sessions; show session history on join in split panes

* chore(release): v3.0.4

Author: vultuk

CHANGELOG.md

@@ -289,3 +289,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Reattach active sessions to terminals after grid rebuilds so sessions no longer appear to vanish.
 - Honor copy vs move when dragging tabs between splits and avoid removing from the wrong source pane.
 - Improve edge-of-grid splits to consistently place the tab into the intended new split.
+## [3.0.4] - 2025-09-14
+
+### Fixed
+- Restore VS Code-style tab workflow: global tabs are visible in both single and tiled modes; selecting a tab targets the active pane.
+- Make tiled panes optional again (no auto-enable on load); preserve pane layout and assignments across refresh via localStorage.
+- Pane “+” opens a reliable session picker (Shift+click opens folder browser to create a new one).
+- When attaching an existing session to a split, replay recent output buffer so tabs don’t look like “new” empty sessions.
+- Remove CSS that hid tabs in tiled mode; panes fill width without interfering with the tab bar.

bin/cc-web.js

@@ -11,7 +11,7 @@ const program = new Command();
 program
   .name('cc-web')
   .description('Web-based interface for Claude Code CLI')
-  .version('3.0.3')
+  .version('3.0.4')
   .option('-p, --port <number>', 'port to run the server on', '32352')
   .option('--no-open', 'do not automatically open browser')
   .option('--auth <token>', 'authentication token for secure access')

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-web",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "Web-based interface for Claude Code CLI accessible via browser",
   "main": "src/server.js",
   "bin": {
@@ -44,4 +44,4 @@
   "devDependencies": {
     "mocha": "^11.7.1"
   }
-}
+}

package.json

@@ -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) {

src/public/app.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();

src/public/panes.js

@@ -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);