myrlin-workbook 0.9.29 → 0.9.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myrlin-workbook",
-  "version": "0.9.29",
+  "version": "0.9.31",
   "description": "Browser-based project manager for Claude Code sessions - session discovery, multi-terminal, cost tracking, docs, and kanban board",
   "main": "src/index.js",
   "bin": {

package/scripts/postinstall.js

@@ -1,37 +1,77 @@
-#!/usr/bin/env node
-/**
- * Postinstall script: fix node-pty spawn-helper permissions on macOS/Linux.
- * The prebuilt spawn-helper binary ships without execute permission (644),
- * causing posix_spawnp failures. This sets it to 755.
- * See: https://github.com/therealarthur/myrlin-workbook/issues/4
- */
-'use strict';
-
-if (process.platform === 'win32') {
-  process.exit(0);
-}
-
-const { execSync } = require('child_process');
-const path = require('path');
-const fs = require('fs');
-
-const prebuildsDir = path.join(__dirname, '..', 'node_modules', 'node-pty', 'prebuilds');
-
-if (!fs.existsSync(prebuildsDir)) {
-  process.exit(0);
-}
-
-try {
-  // Find all spawn-helper binaries across platform dirs and chmod +x them
-  const dirs = fs.readdirSync(prebuildsDir, { withFileTypes: true })
-    .filter(d => d.isDirectory());
-
-  for (const dir of dirs) {
-    const helper = path.join(prebuildsDir, dir.name, 'spawn-helper');
-    if (fs.existsSync(helper)) {
-      execSync(`chmod +x "${helper}"`, { stdio: 'ignore' });
-    }
-  }
-} catch (_) {
-  // Non-fatal: if chmod fails, user can still manually fix
-}
+#!/usr/bin/env node
+/**
+ * Postinstall script: fix node-pty spawn-helper permissions on macOS/Linux.
+ *
+ * The prebuilt spawn-helper binary in node-pty's package ships without
+ * execute permission (mode 644 instead of 755), causing posix_spawnp to
+ * fail with "posix_spawnp failed" on first PTY spawn.
+ *
+ * This is a known node-pty packaging issue. We work around it here by
+ * locating node-pty (wherever npm/npx hoisted it), finding all prebuilt
+ * spawn-helper binaries across platform dirs, and setting them to 755.
+ *
+ * See: https://github.com/therealarthur/myrlin-workbook/issues/4
+ */
+'use strict';
+
+if (process.platform === 'win32') {
+  process.exit(0);
+}
+
+const path = require('path');
+const fs = require('fs');
+
+/**
+ * Locate node-pty's package directory using require.resolve.
+ * Works regardless of where npm/npx/yarn placed it (hoisted, nested,
+ * pnp-virtual, etc.). Returns null if node-pty isn't installed.
+ */
+function findNodePtyDir() {
+  try {
+    const ptyMain = require.resolve('node-pty', { paths: [path.join(__dirname, '..')] });
+    let dir = path.dirname(ptyMain);
+    // Walk up until we find package.json with "name": "node-pty"
+    for (let i = 0; i < 8; i++) {
+      const pkg = path.join(dir, 'package.json');
+      if (fs.existsSync(pkg)) {
+        try {
+          const json = JSON.parse(fs.readFileSync(pkg, 'utf8'));
+          if (json && json.name === 'node-pty') return dir;
+        } catch (_) {}
+      }
+      const parent = path.dirname(dir);
+      if (parent === dir) break;
+      dir = parent;
+    }
+  } catch (_) {}
+  return null;
+}
+
+const ptyDir = findNodePtyDir();
+if (!ptyDir) {
+  // node-pty not installed yet (rare during postinstall); skip silently.
+  process.exit(0);
+}
+
+const prebuildsDir = path.join(ptyDir, 'prebuilds');
+if (!fs.existsSync(prebuildsDir)) {
+  process.exit(0);
+}
+
+try {
+  const platforms = fs.readdirSync(prebuildsDir, { withFileTypes: true })
+    .filter(d => d.isDirectory());
+
+  for (const platform of platforms) {
+    const helper = path.join(prebuildsDir, platform.name, 'spawn-helper');
+    if (fs.existsSync(helper)) {
+      try {
+        fs.chmodSync(helper, 0o755);
+      } catch (_) {
+        // Non-fatal: runtime fix will catch this on first PTY spawn
+      }
+    }
+  }
+} catch (_) {
+  // Non-fatal
+}

package/src/web/pty-manager.js

@@ -11,10 +11,52 @@
  *   - Scrollback is capped at ~100KB total characters
  */
 
-const pty = require('node-pty');
 const fs = require('fs');
 const os = require('os');
 const path = require('path');
+
+// Ensure node-pty's prebuilt spawn-helper is executable BEFORE requiring node-pty.
+// node-pty's prebuild ships with mode 644 instead of 755, causing posix_spawnp
+// to fail on macOS/Linux. The postinstall script handles this in normal installs
+// but doesn't run with --ignore-scripts or in some npx caches. This runtime
+// fallback covers those cases. See: https://github.com/therealarthur/myrlin-workbook/issues/4
+if (process.platform !== 'win32') {
+  try {
+    const ptyMain = require.resolve('node-pty');
+    let dir = path.dirname(ptyMain);
+    for (let i = 0; i < 8; i++) {
+      const pkg = path.join(dir, 'package.json');
+      if (fs.existsSync(pkg)) {
+        try {
+          const json = JSON.parse(fs.readFileSync(pkg, 'utf8'));
+          if (json && json.name === 'node-pty') break;
+        } catch (_) {}
+      }
+      const parent = path.dirname(dir);
+      if (parent === dir) { dir = null; break; }
+      dir = parent;
+    }
+    if (dir) {
+      const prebuildsDir = path.join(dir, 'prebuilds');
+      if (fs.existsSync(prebuildsDir)) {
+        for (const p of fs.readdirSync(prebuildsDir)) {
+          const helper = path.join(prebuildsDir, p, 'spawn-helper');
+          if (fs.existsSync(helper)) {
+            try {
+              const stat = fs.statSync(helper);
+              // Only chmod if not already executable, avoids unnecessary syscalls
+              if ((stat.mode & 0o111) === 0) fs.chmodSync(helper, 0o755);
+            } catch (_) {}
+          }
+        }
+      }
+    }
+  } catch (_) {
+    // node-pty not yet resolvable; require() below will throw with a clearer error
+  }
+}
+
+const pty = require('node-pty');
 const { getStore } = require('../state/store');
 
 /**

package/src/web/public/app.js

@@ -142,6 +142,7 @@ class CWMApp {
     // ─── Terminal panes ──────────────────────────────────────────
     this.terminalPanes = new Array(CWMApp.MAX_PANES).fill(null);
     this._activeTerminalSlot = null;
+    this._paneRefreshTimers = {};
     // Cache of TerminalPane instances per group to avoid reconnection on tab switch.
     // Key: groupId, Value: { panes: [TerminalPane|null x MAX_PANES], domFragments: [DocumentFragment|null x MAX_PANES] }
     this._groupPaneCache = {};
@@ -5017,8 +5018,8 @@ class CWMApp {
    * Builds a two-pane layout: file tree sidebar on left, editor pane on right.
    * Skips re-initialization if already rendered for the same workspace.
    */
-  async renderTasksFilesPanel() {
-    const panel = document.getElementById('tasks-files-panel');
+  async renderTasksFilesPanel(container = null) {
+    const panel = container || document.getElementById('tasks-files-panel');
     if (!panel) return;
 
     const ws = this.state.activeWorkspace;
@@ -5353,8 +5354,8 @@ class CWMApp {
    * and commit log; right pane shows diff for the selected file.
    * Includes 10-second auto-refresh when the tab is active.
    */
-  async renderTasksGitPanel() {
-    const panel = document.getElementById('tasks-git-panel');
+  async renderTasksGitPanel(container = null) {
+    const panel = container || document.getElementById('tasks-git-panel');
     if (!panel) return;
 
     const ws = this.state.activeWorkspace;
@@ -5706,7 +5707,7 @@ class CWMApp {
   }
 
   /** Fetch tasks and render in the active layout */
-  async renderTasksView() {
+  async renderTasksView(container = null) {
     // Initialize layout from localStorage (default: board)
     if (!this._tasksLayout) {
       this._tasksLayout = localStorage.getItem('cwm_tasksLayout') || 'board';
@@ -10150,7 +10151,7 @@ class CWMApp {
         // Right-click context menu on terminal pane
         pane.addEventListener('contextmenu', (e) => {
           const tp = this.terminalPanes[slotIdx];
-          if (!tp) return; // empty pane - let default menu show
+          if (!tp) { e.preventDefault(); e.stopPropagation(); this._showEmptyPaneContextMenu(slotIdx, e.clientX, e.clientY); return; }
           e.preventDefault();
           e.stopPropagation();
           this.showTerminalContextMenu(slotIdx, e.clientX, e.clientY);
@@ -10305,6 +10306,128 @@ class CWMApp {
     this._refreshPanePin(slotIdx);
   }
 
+  /**
+   * Replace the terminal in a pane with a structured view (tasks, doc, etc.).
+   * The terminal is hidden but not disposed; restoreTerminalInPane() brings it back.
+   * @param {number} slotIdx - The pane slot index
+   * @param {string} viewType - One of: 'tasks-git', 'tasks-td', 'tasks-worktree', 'tasks-files', 'doc'
+   * @param {Object} [viewData={}] - Optional view-specific data (e.g. { docId } for doc views)
+   */
+  async openViewInPane(slotIdx, viewType, viewData = {}) {
+    const paneEl = document.getElementById(`term-pane-${slotIdx}`);
+    if (!paneEl) return;
+    const termContainer = document.getElementById(`term-container-${slotIdx}`);
+    const viewContainer = document.getElementById(`pane-view-${slotIdx}`);
+    if (!termContainer || !viewContainer) return;
+
+    termContainer.hidden = true;
+    viewContainer.hidden = false;
+    viewContainer.replaceChildren();
+
+    const labels = {
+      'tasks-git': 'Git',
+      'tasks-td': 'Tasks',
+      'tasks-worktree': 'Worktree',
+      'tasks-files': 'Files',
+      'doc': 'Doc'
+    };
+    const badge = paneEl.querySelector('.pane-view-badge');
+    const backBtn = paneEl.querySelector('.pane-view-back');
+    if (badge) { badge.textContent = labels[viewType] || viewType; badge.hidden = false; }
+    if (backBtn) backBtn.hidden = false;
+
+    paneEl.dataset.viewType = viewType;
+    paneEl.dataset.viewData = JSON.stringify(viewData);
+
+    await this._renderPaneView(slotIdx, viewType, viewData, viewContainer);
+    this.saveTerminalLayout();
+  }
+
+  /**
+   * Restore a pane from a structured view back to its terminal.
+   * Clears the view container, stops any refresh timers, and refits the terminal.
+   * @param {number} slotIdx - The pane slot index
+   */
+  restoreTerminalInPane(slotIdx) {
+    const paneEl = document.getElementById(`term-pane-${slotIdx}`);
+    if (!paneEl) return;
+    const termContainer = document.getElementById(`term-container-${slotIdx}`);
+    const viewContainer = document.getElementById(`pane-view-${slotIdx}`);
+
+    if (viewContainer) { viewContainer.hidden = true; viewContainer.replaceChildren(); }
+    if (termContainer) termContainer.hidden = false;
+
+    const badge = paneEl.querySelector('.pane-view-badge');
+    const backBtn = paneEl.querySelector('.pane-view-back');
+    if (badge) badge.hidden = true;
+    if (backBtn) backBtn.hidden = true;
+
+    delete paneEl.dataset.viewType;
+    delete paneEl.dataset.viewData;
+
+    if (this._paneRefreshTimers[slotIdx]) {
+      clearInterval(this._paneRefreshTimers[slotIdx]);
+      delete this._paneRefreshTimers[slotIdx];
+    }
+
+    const tp = this.terminalPanes[slotIdx];
+    if (tp && tp.safeFit) tp.safeFit();
+    this.saveTerminalLayout();
+  }
+
+  /**
+   * Render the appropriate view into the pane view container.
+   * Clears any existing refresh timer for this slot before rendering.
+   * Git panels auto-refresh every 10 seconds.
+   * @param {number} slotIdx - The pane slot index (used for refresh timer key)
+   * @param {string} viewType - The view type identifier
+   * @param {Object} viewData - View-specific data
+   * @param {HTMLElement} container - The container element to render into
+   */
+  async _renderPaneView(slotIdx, viewType, viewData, container) {
+    if (this._paneRefreshTimers[slotIdx]) {
+      clearInterval(this._paneRefreshTimers[slotIdx]);
+      delete this._paneRefreshTimers[slotIdx];
+    }
+    switch (viewType) {
+      case 'tasks-git':
+        await this.renderTasksGitPanel(container);
+        this._paneRefreshTimers[slotIdx] = setInterval(() => this.renderTasksGitPanel(container), 10000);
+        break;
+      case 'tasks-td':
+        await this.renderTasksTdPanel(container);
+        break;
+      case 'tasks-worktree':
+        await this.renderTasksView(container);
+        break;
+      case 'tasks-files':
+        await this.renderTasksFilesPanel(container);
+        break;
+      case 'doc':
+        await this._renderDocInPane(container, viewData);
+        break;
+    }
+  }
+
+  /**
+   * Render a workspace docs textarea into the given pane container.
+   * Saves content on blur via the workspace docs API.
+   * @param {HTMLElement} container - The container element to render into
+   * @param {Object} viewData - Optional view data (currently unused for doc type)
+   */
+  async _renderDocInPane(container, viewData) {
+    const ws = this.state.activeWorkspace;
+    if (!ws) return;
+    const docs = await this.api('GET', `/api/workspaces/${ws.id}/docs`);
+    const textarea = document.createElement('textarea');
+    textarea.style.cssText = 'width:100%;height:100%;resize:none;background:var(--base);color:var(--text);border:none;padding:12px;font-family:var(--mono);flex:1;min-height:0;';
+    textarea.value = docs.raw || '';
+    textarea.addEventListener('blur', async () => {
+      await this.api('POST', `/api/workspaces/${ws.id}/docs`, { content: textarea.value });
+    });
+    container.appendChild(textarea);
+  }
+
   /**
    * Update the activity indicator on a terminal pane header.
    * Called when 'terminal-activity' events fire from TerminalPane.
@@ -10368,6 +10491,22 @@ class CWMApp {
     });
   }
 
+  /**
+   * Context menu shown when right-clicking an empty (no terminal) pane slot.
+   * Offers quick access to all pane view types.
+   */
+  _showEmptyPaneContextMenu(slotIdx, x, y) {
+    const items = [
+      { label: 'Worktree Tasks', action: () => this.openViewInPane(slotIdx, 'tasks-worktree') },
+      { label: 'td Issues', action: () => this.openViewInPane(slotIdx, 'tasks-td') },
+      { label: 'Git Status', action: () => this.openViewInPane(slotIdx, 'tasks-git') },
+      { label: 'Files', action: () => this.openViewInPane(slotIdx, 'tasks-files') },
+      { type: 'sep' },
+      { label: 'Workspace Doc', action: () => this.openViewInPane(slotIdx, 'doc') },
+    ];
+    this._renderContextItems('Open View', items, x, y);
+  }
+
   showTerminalContextMenu(slotIdx, x, y) {
     const tp = this.terminalPanes[slotIdx];
     if (!tp) return;
@@ -10550,10 +10689,28 @@ class CWMApp {
       },
     });
 
+    // ── Switch to view ────────────────────────────────────────
+    items.push({ type: 'sep' });
+    items.push({
+      label: 'Switch to view',
+      submenu: [
+        { label: 'Worktree Tasks', action: () => this.openViewInPane(slotIdx, 'tasks-worktree') },
+        { label: 'td Issues', action: () => this.openViewInPane(slotIdx, 'tasks-td') },
+        { label: 'Git Status', action: () => this.openViewInPane(slotIdx, 'tasks-git') },
+        { label: 'Files', action: () => this.openViewInPane(slotIdx, 'tasks-files') },
+        { label: 'Workspace Doc', action: () => this.openViewInPane(slotIdx, 'doc') },
+      ],
+    });
+
     this._renderContextItems(tp.sessionName || 'Terminal', items, x, y);
   }
 
   closeTerminalPane(slotIdx) {
+    if (this._paneRefreshTimers[slotIdx]) {
+      clearInterval(this._paneRefreshTimers[slotIdx]);
+      delete this._paneRefreshTimers[slotIdx];
+    }
+
     const tp = this.terminalPanes[slotIdx];
     const sessionName = tp ? tp.sessionName : '';
 
@@ -12934,6 +13091,9 @@ class CWMApp {
       group.panes.forEach(p => {
         if (p.sessionId && !this.terminalPanes[p.slot]) {
           this.openTerminalInPane(p.slot, p.sessionId, p.sessionName || 'Terminal', p.spawnOpts || {});
+          if (p.viewType) {
+            setTimeout(() => this.openViewInPane(p.slot, p.viewType, p.viewData || {}), 100);
+          }
         }
       });
     }
@@ -13396,11 +13556,16 @@ class CWMApp {
       const tp = this.terminalPanes[i];
       // Save live TerminalPanes for layout restore.
       if (tp && tp.sessionId) {
+        const paneEl = document.getElementById('term-pane-' + i);
+        const viewType = paneEl?.dataset?.viewType || null;
+        const viewData = viewType ? JSON.parse(paneEl?.dataset?.viewData || '{}') : {};
         group.panes.push({
           slot: i,
           sessionId: tp.sessionId,
           sessionName: tp.sessionName,
           spawnOpts: tp.spawnOpts || {},
+          viewType,
+          viewData,
         });
       }
     }

package/src/web/public/index.html

@@ -562,8 +562,11 @@
               <button class="terminal-pane-close btn btn-ghost btn-icon btn-sm" hidden>
                 <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>
               </button>
+              <span class="pane-view-badge" hidden></span>
+              <button class="pane-view-back btn btn-ghost btn-icon btn-sm" hidden title="Back to terminal">←</button>
             </div>
             <div class="terminal-container" id="term-container-0"></div>
+            <div class="pane-view-container" id="pane-view-0" hidden></div>
             <button class="terminal-pane-upload" hidden title="Upload image to Claude">
               <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 10v3.5a1 1 0 01-1 1h-11a1 1 0 01-1-1V10"/><polyline points="4.5 5.5 8 2 11.5 5.5"/><line x1="8" y1="2" x2="8" y2="10.5"/></svg>
             </button>
@@ -609,8 +612,11 @@
               <button class="terminal-pane-close btn btn-ghost btn-icon btn-sm" hidden>
                 <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>
               </button>
+              <span class="pane-view-badge" hidden></span>
+              <button class="pane-view-back btn btn-ghost btn-icon btn-sm" hidden title="Back to terminal">←</button>
             </div>
             <div class="terminal-container" id="term-container-1"></div>
+            <div class="pane-view-container" id="pane-view-1" hidden></div>
             <button class="terminal-pane-upload" hidden title="Upload image to Claude">
               <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 10v3.5a1 1 0 01-1 1h-11a1 1 0 01-1-1V10"/><polyline points="4.5 5.5 8 2 11.5 5.5"/><line x1="8" y1="2" x2="8" y2="10.5"/></svg>
             </button>
@@ -656,8 +662,11 @@
               <button class="terminal-pane-close btn btn-ghost btn-icon btn-sm" hidden>
                 <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>
               </button>
+              <span class="pane-view-badge" hidden></span>
+              <button class="pane-view-back btn btn-ghost btn-icon btn-sm" hidden title="Back to terminal">←</button>
             </div>
             <div class="terminal-container" id="term-container-2"></div>
+            <div class="pane-view-container" id="pane-view-2" hidden></div>
             <button class="terminal-pane-upload" hidden title="Upload image to Claude">
               <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 10v3.5a1 1 0 01-1 1h-11a1 1 0 01-1-1V10"/><polyline points="4.5 5.5 8 2 11.5 5.5"/><line x1="8" y1="2" x2="8" y2="10.5"/></svg>
             </button>
@@ -703,8 +712,11 @@
               <button class="terminal-pane-close btn btn-ghost btn-icon btn-sm" hidden>
                 <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>
               </button>
+              <span class="pane-view-badge" hidden></span>
+              <button class="pane-view-back btn btn-ghost btn-icon btn-sm" hidden title="Back to terminal">←</button>
             </div>
             <div class="terminal-container" id="term-container-3"></div>
+            <div class="pane-view-container" id="pane-view-3" hidden></div>
             <button class="terminal-pane-upload" hidden title="Upload image to Claude">
               <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 10v3.5a1 1 0 01-1 1h-11a1 1 0 01-1-1V10"/><polyline points="4.5 5.5 8 2 11.5 5.5"/><line x1="8" y1="2" x2="8" y2="10.5"/></svg>
             </button>
@@ -750,8 +762,11 @@
               <button class="terminal-pane-close btn btn-ghost btn-icon btn-sm" hidden>
                 <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>
               </button>
+              <span class="pane-view-badge" hidden></span>
+              <button class="pane-view-back btn btn-ghost btn-icon btn-sm" hidden title="Back to terminal">←</button>
             </div>
             <div class="terminal-container" id="term-container-4"></div>
+            <div class="pane-view-container" id="pane-view-4" hidden></div>
             <button class="terminal-pane-upload" hidden title="Upload image to Claude">
               <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 10v3.5a1 1 0 01-1 1h-11a1 1 0 01-1-1V10"/><polyline points="4.5 5.5 8 2 11.5 5.5"/><line x1="8" y1="2" x2="8" y2="10.5"/></svg>
             </button>
@@ -797,8 +812,11 @@
               <button class="terminal-pane-close btn btn-ghost btn-icon btn-sm" hidden>
                 <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>
               </button>
+              <span class="pane-view-badge" hidden></span>
+              <button class="pane-view-back btn btn-ghost btn-icon btn-sm" hidden title="Back to terminal">←</button>
             </div>
             <div class="terminal-container" id="term-container-5"></div>
+            <div class="pane-view-container" id="pane-view-5" hidden></div>
             <button class="terminal-pane-upload" hidden title="Upload image to Claude">
               <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 10v3.5a1 1 0 01-1 1h-11a1 1 0 01-1-1V10"/><polyline points="4.5 5.5 8 2 11.5 5.5"/><line x1="8" y1="2" x2="8" y2="10.5"/></svg>
             </button>

package/src/web/public/styles.css

@@ -5111,6 +5111,34 @@ textarea.input {
   background: rgba(203, 166, 247, 0.05);
 }
 
+/* ─── Pane View Container, Badge, Back Button ──────────── */
+.pane-view-container {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  background: var(--base);
+}
+
+.pane-view-badge {
+  font-size: 11px;
+  padding: 2px 6px;
+  background: var(--surface1);
+  color: var(--subtext0);
+  border-radius: 4px;
+  font-weight: 600;
+  margin-right: 4px;
+}
+
+.pane-view-back {
+  opacity: 0.6;
+}
+
+.pane-view-back:hover {
+  opacity: 1;
+}
+
 /* Terminal pane drag-to-reposition */
 .terminal-pane-header {
   cursor: grab;