feat(ui): per-pane start prompt (Claude/Codex) overlay in each split\n\nchore(release): v2.16.0 (#37)

Author: vultuk

CHANGELOG.md

@@ -221,3 +221,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 - Start‑prompt (Claude/Codex) overlay now appears in multi‑pane mode: terminal container is kept available for overlays even when panes are active.
+## [2.16.0] - 2025-09-13
+
+### Added
+- Per‑pane start prompt overlay: when a session is attached to a pane and hasn’t produced output yet, the pane shows a local dialog to pick the assistant (Claude/Codex), including dangerous variants.
+
+### Changed
+- Overlays no longer rely on the single‑pane terminal; the per‑pane overlay sits within each split.
+
+### Notes
+- UI‑only; no server/CLI changes.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-web",
-  "version": "2.15.1",
+  "version": "2.16.0",
   "description": "Web-based interface for Claude Code CLI accessible via browser",
   "main": "src/server.js",
   "bin": {

package.json

@@ -8,6 +8,8 @@ class ClaudePane {
     this.socket = null;
     this.sessionId = null;
     this.container = document.getElementById(`tileTerminal${index}`);
+    this.hadOutput = false;
+    this.startOverlayEl = null;
   }
 
   async setSession(sessionId) {
@@ -17,6 +19,10 @@ class ClaudePane {
     if (!sessionId) return;
     this.ensureTerminal();
     await this.connect();
+    // If newly attached and no output yet, show per-pane start overlay
+    setTimeout(() => {
+      if (!this.hadOutput) this.showStartOverlay();
+    }, 50);
   }
 
   ensureTerminal() {
@@ -61,6 +67,10 @@ class ClaudePane {
       if (msg.type === 'output') {
         const filtered = msg.data.replace(/\x1b\[\[?[IO]/g, '');
         this.terminal.write(filtered);
+        if (filtered) {
+          this.hadOutput = true;
+          this.hideStartOverlay();
+        }
       }
     };
     this.socket.onclose = () => {};
@@ -83,6 +93,50 @@ class ClaudePane {
     try { this.socket?.close(); } catch (_) {}
     this.socket = null;
     try { this.terminal?.clear(); } catch (_) {}
+    this.hadOutput = false;
+    this.hideStartOverlay();
+  }
+
+  showStartOverlay() {
+    // Build a minimal per-pane start overlay (Claude/Codex)
+    if (!this.container) return;
+    this.hideStartOverlay();
+    const ov = document.createElement('div');
+    ov.className = 'pane-start-overlay';
+    ov.innerHTML = `
+      <div class="pane-start-card">
+        <h3>Select Assistant</h3>
+        <p>Start an assistant in this session.</p>
+        <div class="pane-start-actions">
+          <button class="btn btn-primary" data-kind="claude">Start ${this.app?.getAlias?.('claude') || 'Claude'}</button>
+          <button class="btn btn-danger" data-kind="claude" data-danger>Dangerous ${this.app?.getAlias?.('claude') || 'Claude'}</button>
+          <button class="btn btn-primary" data-kind="codex">Start ${this.app?.getAlias?.('codex') || 'Codex'}</button>
+          <button class="btn btn-danger" data-kind="codex" data-danger>Dangerous ${this.app?.getAlias?.('codex') || 'Codex'}</button>
+        </div>
+      </div>`;
+    ov.querySelectorAll('button').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const kind = btn.getAttribute('data-kind');
+        const dangerous = btn.hasAttribute('data-danger');
+        this.startAssistant(kind, { dangerouslySkipPermissions: dangerous });
+      });
+    });
+    this.container.appendChild(ov);
+    this.startOverlayEl = ov;
+  }
+
+  hideStartOverlay() {
+    if (this.startOverlayEl && this.startOverlayEl.parentNode) {
+      this.startOverlayEl.remove();
+      this.startOverlayEl = null;
+    }
+  }
+
+  startAssistant(kind = 'claude', options = {}) {
+    if (!this.socket || this.socket.readyState !== WebSocket.OPEN) return;
+    const type = kind === 'codex' ? 'start_codex' : 'start_claude';
+    this.socket.send(JSON.stringify({ type, options }));
+    this.hideStartOverlay();
   }
 }
 

src/public/panes.js

@@ -942,6 +942,13 @@ body {
 .pane-session-sep { height:1px; background: var(--border); margin:6px 0; }
 .pane-session-action { padding:8px 10px; color: var(--accent); cursor:pointer; border-radius:6px; }
 .pane-session-action:hover { background: var(--bg-tertiary); }
+
+/* Per-pane start overlay */
+.pane-start-overlay { position:absolute; inset:0; background: rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index: 5; }
+.pane-start-card { background: var(--bg-secondary); border:1px solid var(--border); border-radius:12px; padding:16px 20px; width: 90%; max-width: 420px; text-align:center; box-shadow: 0 12px 40px rgba(0,0,0,.4); }
+.pane-start-card h3 { margin: 0 0 6px 0; font-size: 16px; }
+.pane-start-card p { margin: 0 0 14px 0; color: var(--text-secondary); font-size: 13px; }
+.pane-start-actions { display:flex; flex-wrap: wrap; gap:8px; align-items:center; justify-content:center; }
 .tile-session-select { background: var(--bg-tertiary); color: var(--text-primary); border:1px solid var(--border); border-radius:6px; padding:6px 8px; font-family: var(--font-mono); font-size:12px; }
 .tile-close { background: transparent; border:1px solid var(--border); border-radius:4px; color: var(--text-secondary); width:26px; height:26px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
 .tile-close:hover { background: var(--bg-tertiary); color: var(--text-primary); }