myrlin-workbook 0.4.0 → 0.5.0

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="docs/images/logo.png" alt="Myrlin's Workbook" width="250">
+  <img src="docs/images/logo-animated.svg" alt="Myrlin's Workbook" width="250">
 </p>
 <h1 align="center">Myrlin's Workbook</h1>
 <p align="center">
@@ -38,21 +38,22 @@ npm run gui                   # Real sessions
 npm run gui:demo              # Sample data
 ```
 
-On first launch, a random password is generated and printed to the console. Saved to `state/config.json`.
+### Password
 
-**Custom password:**
+On first launch, a random password is generated and saved to `~/.myrlin/config.json`. This password **persists across updates, reinstalls, and npx cache clears** — you'll always use the same password.
 
-```bash
-# Bash/zsh
-CWM_PASSWORD=mypassword npm run gui
+To set your own:
 
-# PowerShell
-$env:CWM_PASSWORD="mypassword"; npm run gui
+```bash
+# Option 1: Edit the config file (recommended — persists forever)
+# ~/.myrlin/config.json → { "password": "your-password-here" }
 
-# cmd.exe
-set CWM_PASSWORD=mypassword && npm run gui
+# Option 2: Environment variable (overrides config, per-session)
+CWM_PASSWORD=mypassword npx myrlin-workbook
 ```
 
+Password lookup order: `CWM_PASSWORD` env var > `~/.myrlin/config.json` > `./state/config.json` > auto-generate.
+
 ### Prerequisites
 
 - **Node.js 18+** ([download](https://nodejs.org))

package/package.json

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

package/src/web/auth.js

@@ -11,8 +11,9 @@
  *
  * Password is loaded from (in priority order):
  *   1. CWM_PASSWORD environment variable
- *   2. state/config.json file
- *   3. Auto-generated on first run (saved to state/config.json)
+ *   2. ~/.myrlin/config.json (persists across npx updates/reinstalls)
+ *   3. ./state/config.json (local project config)
+ *   4. Auto-generated on first run (saved to both locations)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -20,11 +21,14 @@
 const crypto = require('crypto');
 const fs = require('fs');
 const path = require('path');
+const os = require('os');
 
 // ─── Configuration ─────────────────────────────────────────
 const TOKEN_BYTE_LENGTH = 32;
-const CONFIG_DIR = path.join(__dirname, '..', '..', 'state');
-const CONFIG_FILE = path.join(CONFIG_DIR, 'config.json');
+const HOME_CONFIG_DIR = path.join(os.homedir(), '.myrlin');
+const HOME_CONFIG_FILE = path.join(HOME_CONFIG_DIR, 'config.json');
+const LOCAL_CONFIG_DIR = path.join(__dirname, '..', '..', 'state');
+const LOCAL_CONFIG_FILE = path.join(LOCAL_CONFIG_DIR, 'config.json');
 
 // ─── Rate Limiting ─────────────────────────────────────────
 // Simple in-memory rate limiter: max 5 login attempts per IP per 60 seconds
@@ -67,50 +71,86 @@ setInterval(() => {
 // ─── Password Management ──────────────────────────────────
 
 /**
- * Load or generate the auth password.
- * Priority: env var > config file > auto-generate.
- * @returns {string}
+ * Read password from a config file, returns null if not found.
+ * @param {string} filePath - Path to config.json
+ * @returns {string|null}
  */
-function loadPassword() {
-  // 1. Environment variable
-  if (process.env.CWM_PASSWORD) {
-    return process.env.CWM_PASSWORD;
-  }
-
-  // 2. Config file
+function readPasswordFromFile(filePath) {
   try {
-    if (fs.existsSync(CONFIG_FILE)) {
-      const config = JSON.parse(fs.readFileSync(CONFIG_FILE, 'utf-8'));
+    if (fs.existsSync(filePath)) {
+      const config = JSON.parse(fs.readFileSync(filePath, 'utf-8'));
       if (config.password && typeof config.password === 'string') {
         return config.password;
       }
     }
   } catch (_) {
-    // Corrupted config - regenerate
+    // Corrupted config - skip
   }
+  return null;
+}
 
-  // 3. Auto-generate and save
-  const generated = crypto.randomBytes(16).toString('base64url');
+/**
+ * Save password to a config file (merges with existing keys).
+ * @param {string} dir - Config directory path
+ * @param {string} filePath - Config file path
+ * @param {string} password - Password to save
+ */
+function savePasswordToFile(dir, filePath, password) {
   try {
-    if (!fs.existsSync(CONFIG_DIR)) {
-      fs.mkdirSync(CONFIG_DIR, { recursive: true });
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, { recursive: true });
     }
     const config = {};
     try {
-      if (fs.existsSync(CONFIG_FILE)) {
-        Object.assign(config, JSON.parse(fs.readFileSync(CONFIG_FILE, 'utf-8')));
+      if (fs.existsSync(filePath)) {
+        Object.assign(config, JSON.parse(fs.readFileSync(filePath, 'utf-8')));
       }
     } catch (_) {}
-    config.password = generated;
-    fs.writeFileSync(CONFIG_FILE, JSON.stringify(config, null, 2), 'utf-8');
+    config.password = password;
+    fs.writeFileSync(filePath, JSON.stringify(config, null, 2), 'utf-8');
   } catch (err) {
-    console.error('[AUTH] Failed to save generated password to config:', err.message);
+    // Non-fatal: password still works in memory for this session
+  }
+}
+
+/**
+ * Load or generate the auth password.
+ * Priority: env var > ~/.myrlin/config.json > ./state/config.json > auto-generate.
+ * When auto-generating, saves to both ~/.myrlin/ and ./state/ so the password
+ * persists across npx cache clears and project reinstalls.
+ * @returns {string}
+ */
+function loadPassword() {
+  // 1. Environment variable (highest priority, always wins)
+  if (process.env.CWM_PASSWORD) {
+    return process.env.CWM_PASSWORD;
+  }
+
+  // 2. Home directory config (~/.myrlin/config.json) — persists across reinstalls
+  const homePassword = readPasswordFromFile(HOME_CONFIG_FILE);
+  if (homePassword) {
+    // Also sync to local config so it's visible in the project
+    savePasswordToFile(LOCAL_CONFIG_DIR, LOCAL_CONFIG_FILE, homePassword);
+    return homePassword;
   }
 
+  // 3. Local project config (./state/config.json)
+  const localPassword = readPasswordFromFile(LOCAL_CONFIG_FILE);
+  if (localPassword) {
+    // Promote to home config for persistence across reinstalls
+    savePasswordToFile(HOME_CONFIG_DIR, HOME_CONFIG_FILE, localPassword);
+    return localPassword;
+  }
+
+  // 4. Auto-generate and save to both locations
+  const generated = crypto.randomBytes(16).toString('base64url');
+  savePasswordToFile(HOME_CONFIG_DIR, HOME_CONFIG_FILE, generated);
+  savePasswordToFile(LOCAL_CONFIG_DIR, LOCAL_CONFIG_FILE, generated);
+
   console.log('');
   console.log('══════════════════════════════════════════════════');
   console.log('  CWM auto-generated password: ' + generated);
-  console.log('  Saved to: state/config.json');
+  console.log('  Saved to: ~/.myrlin/config.json');
   console.log('  Set CWM_PASSWORD env var to override.');
   console.log('══════════════════════════════════════════════════');
   console.log('');

package/src/web/public/app.js

@@ -822,9 +822,7 @@ class CWMApp {
           // Refit terminal panes
           if (this.state.viewMode === 'terminal') {
             this.terminalPanes.forEach(tp => {
-              if (tp && tp.fitAddon) {
-                try { tp.fitAddon.fit(); } catch (_) {}
-              }
+              if (tp) tp.safeFit();
             });
           }
         }, 150);
@@ -1580,6 +1578,19 @@ class CWMApp {
         this.state.selectedSession = updated;
         this.renderSessionDetail();
       }
+      // Sync terminal pane titles — if this session is open in a terminal,
+      // update the TerminalPane instance and the DOM tab header.
+      if (result.name) {
+        for (let i = 0; i < this.terminalPanes.length; i++) {
+          const tp = this.terminalPanes[i];
+          if (tp && tp.sessionId === id) {
+            tp.sessionName = result.name;
+            const paneEl = document.getElementById(`term-pane-${i}`);
+            const titleEl = paneEl && paneEl.querySelector('.terminal-pane-title');
+            if (titleEl) titleEl.textContent = result.name;
+          }
+        }
+      }
     } catch (err) {
       this.showToast(err.message || 'Failed to update session', 'error');
     }
@@ -1714,9 +1725,16 @@ class CWMApp {
      CONTEXT MENU
      ═══════════════════════════════════════════════════════════ */
 
-  showContextMenu(sessionId, x, y) {
+  /**
+   * Build the shared session management context menu items.
+   * Used by both the sidebar context menu and the terminal pane context menu
+   * so that all session actions are available from either location.
+   * @param {string} sessionId - The session to build items for
+   * @returns {Array|null} Array of menu items, or null if session not found
+   */
+  _buildSessionContextItems(sessionId) {
     const session = (this.state.allSessions || this.state.sessions).find(s => s.id === sessionId);
-    if (!session) return;
+    if (!session) return null;
 
     const isRunning = session.status === 'running' || session.status === 'idle';
     const isBypassed = !!session.bypassPermissions;
@@ -1731,36 +1749,7 @@ class CWMApp {
 
     const items = [];
 
-    // View details (shows full session info in detail panel)
-    items.push({
-      label: 'View Details', icon: '&#128269;', action: () => {
-        this.selectSession(sessionId);
-      },
-    });
-
-    // Open in terminal (quick action) - pass all session flags as spawnOpts
-    items.push({
-      label: 'Open in Terminal', icon: '&#9654;', action: () => {
-        const emptySlot = this.terminalPanes.findIndex(p => p === null);
-        if (emptySlot !== -1) {
-          this.setViewMode('terminal');
-          const spawnOpts = {};
-          if (session.resumeSessionId) spawnOpts.resumeSessionId = session.resumeSessionId;
-          if (session.workingDir) spawnOpts.cwd = session.workingDir;
-          if (session.command) spawnOpts.command = session.command;
-          if (session.bypassPermissions) spawnOpts.bypassPermissions = true;
-          if (session.verbose) spawnOpts.verbose = true;
-          if (session.model) spawnOpts.model = session.model;
-          if (session.agentTeams) spawnOpts.agentTeams = true;
-          this.openTerminalInPane(emptySlot, sessionId, session.name, spawnOpts);
-        } else {
-          this.showToast('All terminal panes full. Close one first.', 'warning');
-        }
-      },
-    });
-
-    items.push({ type: 'sep' });
-
+    // Start / Stop / Restart
     if (!isRunning) {
       items.push(
         { label: 'Start', icon: '&#9654;', action: () => this.startSession(sessionId) },
@@ -1819,6 +1808,15 @@ class CWMApp {
       { label: 'Summarize to Docs', icon: '&#128221;', action: () => this.summarizeSessionToDocs(sessionId) },
     );
 
+    // Refocus submenu — distill conversation + reset or compact
+    items.push({
+      label: 'Refocus', icon: '&#128260;',
+      submenu: [
+        { label: 'Reset & Refocus', action: () => this.refocusSession(sessionId, 'reset') },
+        { label: 'Compact & Refocus', action: () => this.refocusSession(sessionId, 'compact') },
+      ],
+    });
+
     // If the session has a working directory, add git worktree option
     if (session.workingDir) {
       items.push({
@@ -1853,6 +1851,49 @@ class CWMApp {
     // Remove from workspace (actually deletes the session record)
     items.push({ label: 'Remove from Workspace', icon: '&#10005;', danger: true, action: () => this.removeSessionFromWorkspace(sessionId) });
 
+    return items;
+  }
+
+  showContextMenu(sessionId, x, y) {
+    const session = (this.state.allSessions || this.state.sessions).find(s => s.id === sessionId);
+    if (!session) return;
+
+    const items = [];
+
+    // Sidebar-specific: View details
+    items.push({
+      label: 'View Details', icon: '&#128269;', action: () => {
+        this.selectSession(sessionId);
+      },
+    });
+
+    // Sidebar-specific: Open in terminal
+    items.push({
+      label: 'Open in Terminal', icon: '&#9654;', action: () => {
+        const emptySlot = this.terminalPanes.findIndex(p => p === null);
+        if (emptySlot !== -1) {
+          this.setViewMode('terminal');
+          const spawnOpts = {};
+          if (session.resumeSessionId) spawnOpts.resumeSessionId = session.resumeSessionId;
+          if (session.workingDir) spawnOpts.cwd = session.workingDir;
+          if (session.command) spawnOpts.command = session.command;
+          if (session.bypassPermissions) spawnOpts.bypassPermissions = true;
+          if (session.verbose) spawnOpts.verbose = true;
+          if (session.model) spawnOpts.model = session.model;
+          if (session.agentTeams) spawnOpts.agentTeams = true;
+          this.openTerminalInPane(emptySlot, sessionId, session.name, spawnOpts);
+        } else {
+          this.showToast('All terminal panes full. Close one first.', 'warning');
+        }
+      },
+    });
+
+    items.push({ type: 'sep' });
+
+    // Shared session management items
+    const sessionItems = this._buildSessionContextItems(sessionId);
+    if (sessionItems) items.push(...sessionItems);
+
     this._renderContextItems(session.name, items, x, y);
   }
 
@@ -2200,6 +2241,16 @@ class CWMApp {
           this.state.selectedSession = this.state.sessions.find(s => s.id === sessionId);
           this.renderSessionDetail();
         }
+        // Sync terminal pane titles
+        for (let i = 0; i < this.terminalPanes.length; i++) {
+          const tp = this.terminalPanes[i];
+          if (tp && tp.sessionId === sessionId) {
+            tp.sessionName = data.title;
+            const paneEl = document.getElementById(`term-pane-${i}`);
+            const titleEl = paneEl && paneEl.querySelector('.terminal-pane-title');
+            if (titleEl) titleEl.textContent = data.title;
+          }
+        }
       }
     } catch (err) {
       this.showToast(err.message || 'Failed to auto-title', 'error');
@@ -2220,6 +2271,16 @@ class CWMApp {
         this.showToast(`Titled: "${data.title}"`, 'success');
         this.renderProjects();
         this.renderWorkspaces();
+        // Sync terminal pane titles (project sessions use Claude UUID as sessionId)
+        for (let i = 0; i < this.terminalPanes.length; i++) {
+          const tp = this.terminalPanes[i];
+          if (tp && tp.sessionId === claudeSessionId) {
+            tp.sessionName = data.title;
+            const paneEl = document.getElementById(`term-pane-${i}`);
+            const titleEl = paneEl && paneEl.querySelector('.terminal-pane-title');
+            if (titleEl) titleEl.textContent = data.title;
+          }
+        }
       }
     } catch (err) {
       this.showToast(err.message || 'Failed to auto-title', 'error');
@@ -2360,7 +2421,7 @@ class CWMApp {
     // Refit all terminal panes after a brief delay for zoom to take effect
     setTimeout(() => {
       this.terminalPanes.forEach(tp => {
-        if (tp && tp.fit) tp.fit();
+        if (tp) tp.safeFit();
       });
     }, 100);
   }
@@ -2839,9 +2900,7 @@ class CWMApp {
       // Refit all terminal panes after view switch (viewport size may differ)
       requestAnimationFrame(() => {
         this.terminalPanes.forEach(tp => {
-          if (tp && tp.fitAddon) {
-            try { tp.fitAddon.fit(); } catch (_) {}
-          }
+          if (tp) tp.safeFit();
         });
       });
     } else {
@@ -2890,7 +2949,7 @@ class CWMApp {
     // Trigger resize on terminal panes after animation
     setTimeout(() => {
       this.terminalPanes.forEach(tp => {
-        if (tp && tp.fitAddon) tp.fitAddon.fit();
+        if (tp) tp.safeFit();
       });
     }, 250);
   }
@@ -2943,7 +3002,7 @@ class CWMApp {
 
       // Refit terminal panes
       this.terminalPanes.forEach(tp => {
-        if (tp && tp.fitAddon) tp.fitAddon.fit();
+        if (tp) tp.safeFit();
       });
 
       document.removeEventListener('mousemove', onMouseMove);
@@ -5723,6 +5782,8 @@ class CWMApp {
 
     const items = [];
 
+    // ── Terminal-specific actions ──────────────────────────────
+
     // Copy selected text (only show when there's a selection)
     if (tp.term && tp.term.hasSelection()) {
       items.push({
@@ -5767,15 +5828,15 @@ class CWMApp {
       },
     });
 
-    items.push({ type: 'sep' });
+    // ── Shared session management items ───────────────────────
+    const sessionItems = this._buildSessionContextItems(tp.sessionId);
+    if (sessionItems) {
+      items.push({ type: 'sep' });
+      items.push(...sessionItems);
+    }
 
-    // Copy session ID
-    items.push({
-      label: 'Copy Session ID', icon: '&#128203;', action: () => {
-        navigator.clipboard.writeText(tp.sessionId);
-        this.showToast('Session ID copied', 'success');
-      },
-    });
+    // ── Pane management ───────────────────────────────────────
+    items.push({ type: 'sep' });
 
     // Close pane
     items.push({
@@ -5784,15 +5845,10 @@ class CWMApp {
       },
     });
 
-    items.push({ type: 'sep' });
-
     // Inspect - open browser DevTools console
     items.push({
       label: 'Inspect', icon: '&#128269;', action: () => {
-        // Try to open DevTools programmatically (only works in Electron/NW.js)
-        // For regular browsers, show a hint about the keyboard shortcut
         if (window.__TAURI__ || (window.process && window.process.versions && window.process.versions.electron)) {
-          // Electron / Tauri - can open devtools directly
           try { require('electron').remote.getCurrentWindow().webContents.openDevTools(); } catch (_) {}
         } else {
           this.showToast('Press F12 or Ctrl+Shift+I to open DevTools', 'info');
@@ -5915,9 +5971,7 @@ class CWMApp {
     requestAnimationFrame(() => {
       [srcSlot, dstSlot].forEach(slot => {
         const tp = this.terminalPanes[slot];
-        if (tp && tp.fitAddon) {
-          try { tp.fitAddon.fit(); } catch (_) {}
-        }
+        if (tp) tp.safeFit();
       });
     });
   }
@@ -5958,7 +6012,7 @@ class CWMApp {
     // Double-rAF ensures browser has fully laid out the grid before fitting.
     requestAnimationFrame(() => { requestAnimationFrame(() => {
       this.terminalPanes.forEach(tp => {
-        if (tp && tp.fitAddon) try { tp.fitAddon.fit(); } catch (_) {}
+        if (tp) tp.safeFit();
       });
     }); });
   }
@@ -6247,14 +6301,9 @@ class CWMApp {
         document.removeEventListener('mousemove', onMove);
         document.removeEventListener('mouseup', onUp);
         // Refit all terminals after resize completes
+        // safeFit() handles both the fit and sending resize to the server
         this.terminalPanes.forEach(tp => {
-          if (tp && tp.fitAddon) {
-            try { tp.fitAddon.fit(); } catch (_) {}
-            // Notify server of new dimensions
-            if (tp.ws && tp.ws.readyState === WebSocket.OPEN && tp.term) {
-              tp.ws.send(JSON.stringify({ type: 'resize', cols: tp.term.cols, rows: tp.term.rows }));
-            }
-          }
+          if (tp) tp.safeFit();
         });
       };
 
@@ -6675,11 +6724,11 @@ class CWMApp {
     // Set as active pane and focus it
     this.setActiveTerminalPane(slotIdx);
 
-    // Refit the terminal after switching
+    // Refit the terminal after switching (safeFit guards against hidden panes)
     const tp = this.terminalPanes[slotIdx];
-    if (tp && tp.fitAddon) {
+    if (tp) {
       requestAnimationFrame(() => {
-        try { tp.fitAddon.fit(); } catch (_) {}
+        tp.safeFit();
       });
     }
 
@@ -7076,6 +7125,16 @@ class CWMApp {
             // Project session - sync everywhere (localStorage + any linked workspace sessions)
             this.syncSessionTitle(sessionId, newName);
           }
+          // Sync terminal pane titles if this session is open in a terminal
+          for (let i = 0; i < this.terminalPanes.length; i++) {
+            const tp = this.terminalPanes[i];
+            if (tp && tp.sessionId === sessionId) {
+              tp.sessionName = newName;
+              const paneEl = document.getElementById(`term-pane-${i}`);
+              const titleEl = paneEl && paneEl.querySelector('.terminal-pane-title');
+              if (titleEl) titleEl.textContent = newName;
+            }
+          }
           nameEl.textContent = newName;
           nameEl.classList.add('rename-flash');
           setTimeout(() => nameEl.classList.remove('rename-flash'), 600);
@@ -7159,8 +7218,9 @@ class CWMApp {
           nameEl.classList.add('rename-flash');
           setTimeout(() => nameEl.classList.remove('rename-flash'), 600);
 
-          // Refresh sidebar
+          // Refresh sidebar and project sessions view
           this.renderWorkspaces();
+          this.renderProjects();
         } catch (err) {
           nameEl.textContent = currentName;
           this.showToast('Rename failed: ' + (err.message || ''), 'error');
@@ -9609,6 +9669,62 @@ class CWMApp {
     }
   }
 
+  /**
+   * Refocus a session by distilling the conversation into a structured context
+   * document, then sending /clear (reset) or /compact to the terminal and
+   * injecting the document back in for Claude to ingest.
+   *
+   * @param {string} sessionId - The session ID to refocus
+   * @param {'reset'|'compact'} mode - Whether to clear or compact the conversation
+   */
+  async refocusSession(sessionId, mode) {
+    // Find the terminal pane for this session
+    const tp = this.terminalPanes.find(p => p && p.sessionId === sessionId);
+    if (!tp || !tp.ws || tp.ws.readyState !== WebSocket.OPEN) {
+      this.showToast('Session must be open in a terminal pane to refocus', 'warning');
+      return;
+    }
+
+    this.showToast('Generating refocus document...', 'info');
+
+    try {
+      // Generate the refocus document on the server
+      const data = await this.api('POST', `/api/sessions/${sessionId}/refocus`, { mode });
+
+      if (!data || !data.success) {
+        this.showToast(data?.error || 'Failed to generate refocus document', 'error');
+        return;
+      }
+
+      const filePath = data.filePath;
+
+      // Send /clear or /compact to the terminal
+      const command = mode === 'reset' ? '/clear' : '/compact';
+      tp.sendCommand(command + '\r');
+
+      // Wait for Claude to process the command, then inject the refocus prompt
+      setTimeout(() => {
+        const refocusPrompt = 'Read the file .refocus-context.md in this directory. It contains a comprehensive summary of our previous conversation including what was accomplished, key decisions, open issues, and next steps. Use this to fully orient yourself on the project state. After reading, briefly confirm what you understand and ask what I\'d like to work on next.';
+        tp.sendCommand(refocusPrompt + '\r');
+
+        this.showToast(`Session refocused (${mode}) — context document injected`, 'success');
+      }, 3000);
+
+      // Clean up the refocus file after a delay
+      const cleanupDelay = mode === 'reset' ? 60000 : 120000;
+      setTimeout(async () => {
+        try {
+          await this.api('DELETE', `/api/refocus-cleanup?filePath=${encodeURIComponent(filePath)}`);
+        } catch (_) {
+          // Non-critical — file may already be gone
+        }
+      }, cleanupDelay);
+
+    } catch (err) {
+      this.showToast(err.message || 'Failed to refocus session', 'error');
+    }
+  }
+
   /* ─── Image Upload for Terminal Sessions ──────────────────── */
 
   /**

package/src/web/public/index.html

@@ -92,7 +92,7 @@
           </svg>
         </button>
         <div class="header-brand">
-          <img src="logo.png" alt="Myrlin" class="header-logo-img">
+          <img src="logo-cropped.png" alt="Myrlin" class="header-logo-img">
           <span class="header-title">Myrlin's Workbook</span>
         </div>
       </div>

package/src/web/public/styles-mobile.css

@@ -557,20 +557,24 @@
     flex: 1;
     min-height: 0;
     overflow: hidden;
-    /* Isolate scroll: our custom touch handler manages scrolling */
     overscroll-behavior: contain;
-    touch-action: none;
+    /* Allow native vertical scrolling — compositor-thread smooth */
+    touch-action: pan-y;
   }
 
-  /* xterm viewport (the actual scrollable area inside xterm.js) */
+  /* xterm viewport (the actual scrollable area inside xterm.js).
+     Native touch scroll is enabled via pan-y — the browser handles momentum,
+     deceleration, and overscroll on the compositor thread for 60fps smoothness.
+     -webkit-overflow-scrolling: touch enables iOS inertial scroll. */
   .terminal-pane.mobile-active .xterm-viewport {
     overscroll-behavior: contain;
-    /* Disable native touch scroll - our handler uses term.scrollLines() */
-    touch-action: none;
+    -webkit-overflow-scrolling: touch;
+    touch-action: pan-y;
   }
 
-  /* xterm screen layer - disable browser touch handling so our
-     custom touch scroll handler can manage scrolling directly */
+  /* xterm screen layer (canvas) — pointer-events toggled by JS:
+     Scroll mode: pointer-events: none → touches pass through to viewport for native scroll
+     Type mode:   pointer-events: auto → xterm.js handles touch for cursor/selection */
   .terminal-pane.mobile-active .xterm-screen {
     touch-action: none;
   }

package/src/web/public/terminal.js

@@ -371,16 +371,17 @@ class TerminalPane {
         }
       });
 
-      this._resizeObserver = new ResizeObserver(() => {
+      this._resizeObserver = new ResizeObserver((entries) => {
+        // Guard: skip fit when container is hidden (e.g., tab switch sets display:none).
+        // A 0×0 contentRect causes fitAddon to calculate 1×1 cols/rows, which sends a
+        // resize to the PTY server and permanently garbles the terminal's buffered output.
+        const entry = entries[0];
+        if (entry && (entry.contentRect.width === 0 || entry.contentRect.height === 0)) return;
+
         // Debounce resize to prevent layout thrashing during mobile tab switches
         clearTimeout(this._fitTimer);
         this._fitTimer = setTimeout(() => {
-          if (this.fitAddon) {
-            try { this.fitAddon.fit(); } catch (_) {}
-            if (this.ws && this.ws.readyState === WebSocket.OPEN) {
-              this.ws.send(JSON.stringify({ type: 'resize', cols: this.term.cols, rows: this.term.rows }));
-            }
-          }
+          this.safeFit();
         }, 100);
       });
       this._resizeObserver.observe(container);
@@ -574,6 +575,25 @@ class TerminalPane {
     }
   }
 
+  /**
+   * Visibility-safe fit: only calls fitAddon.fit() when the container is visible.
+   * Hidden panes (display:none from tab switching) report 0×0 dimensions, which
+   * causes fitAddon to resize the PTY to 1×1 — permanently garbling scrollback.
+   * All external callers should use safeFit() instead of fitAddon.fit() directly.
+   */
+  safeFit() {
+    if (!this.fitAddon || !this.term) return;
+    const container = document.getElementById(this.containerId);
+    if (!container) return;
+    const rect = container.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) return;
+    try { this.fitAddon.fit(); } catch (_) { return; }
+    // Notify server of new dimensions
+    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+      this.ws.send(JSON.stringify({ type: 'resize', cols: this.term.cols, rows: this.term.rows }));
+    }
+  }
+
   /**
    * Mobile scroll/type mode.
    * On mobile, touching the terminal to scroll triggers the keyboard because
@@ -608,135 +628,45 @@ class TerminalPane {
     if (!textarea) return;
 
     this._xtermTextarea = textarea;
+    this._xtermScreen = container.querySelector('.xterm-screen');
 
-    // Default to scroll mode: block touch from reaching textarea via CSS.
-    // This prevents the keyboard from appearing when scrolling.
-    // Unlike readonly, this doesn't interfere with programmatic input.
+    // Default to scroll mode: block touch from reaching textarea and screen.
+    // textarea: prevents keyboard popup on scroll
+    // screen: lets touches pass through to .xterm-viewport for native scroll
     textarea.style.pointerEvents = 'none';
-
-    // ── Custom Touch Scroll Handler ──────────────────────────────
-    this._initTouchScroll(container);
+    if (this._xtermScreen) this._xtermScreen.style.pointerEvents = 'none';
   }
 
-  /**
-   * Custom touch scroll for mobile. Directly manipulates the xterm viewport's
-   * scrollTop for pixel-smooth scrolling that feels like native scroll.
-   * xterm.js's .xterm-screen canvas sits on top of .xterm-viewport and
-   * intercepts touch events, so we handle them manually.
-   */
-  _initTouchScroll(container) {
-    let touchStartY = 0;
-    let touchLastY = 0;
-    let touchLastTime = 0;
-    let velocity = 0;
-    let momentumId = null;
-    let isScrolling = false;
-
-    // Get the xterm viewport element (the actual scrollable div)
-    const viewport = container.querySelector('.xterm-viewport');
-    if (!viewport) {
-      this._log('Touch scroll: .xterm-viewport not found');
-      return;
-    }
-
-    const cancelMomentum = () => {
-      if (momentumId) {
-        cancelAnimationFrame(momentumId);
-        momentumId = null;
-      }
-    };
-
-    const applyMomentum = () => {
-      if (Math.abs(velocity) < 0.3) {
-        velocity = 0;
-        return;
-      }
-
-      // Scroll the viewport directly - pixel-smooth, no line snapping
-      viewport.scrollTop += velocity;
-
-      // Decelerate - 0.95 gives a smooth, native-feeling coast
-      velocity *= 0.95;
-
-      momentumId = requestAnimationFrame(applyMomentum);
-    };
-
-    container.addEventListener('touchstart', (e) => {
-      if (this._mobileTypeMode) return;
-
-      cancelMomentum();
-      const touch = e.touches[0];
-      touchStartY = touch.clientY;
-      touchLastY = touch.clientY;
-      touchLastTime = Date.now();
-      velocity = 0;
-      isScrolling = false;
-    }, { passive: true });
-
-    container.addEventListener('touchmove', (e) => {
-      if (this._mobileTypeMode) return;
-
-      const touch = e.touches[0];
-      const deltaY = touchLastY - touch.clientY; // positive = scroll down
-      const now = Date.now();
-      const dt = Math.max(now - touchLastTime, 1);
-
-      // Determine if this is a scroll gesture (>5px vertical movement)
-      if (!isScrolling) {
-        if (Math.abs(touchStartY - touch.clientY) > 5) {
-          isScrolling = true;
-        } else {
-          return;
-        }
-      }
-
-      // Prevent page scroll - we're handling it
-      e.preventDefault();
-
-      // Directly scroll the viewport - pixel smooth, no line quantization
-      viewport.scrollTop += deltaY;
-
-      // Track velocity for momentum (pixels per 16ms frame)
-      velocity = deltaY * (16 / dt);
-
-      touchLastY = touch.clientY;
-      touchLastTime = now;
-    }, { passive: false });
-
-    container.addEventListener('touchend', () => {
-      if (this._mobileTypeMode) return;
-      if (!isScrolling) return;
-
-      // Apply momentum scrolling with deceleration
-      if (Math.abs(velocity) > 0.5) {
-        momentumId = requestAnimationFrame(applyMomentum);
-      }
-      isScrolling = false;
-    }, { passive: true });
-
-    this._touchScrollCleanup = () => cancelMomentum();
-  }
+  // Touch scrolling is handled natively by the browser.
+  // In scroll mode, .xterm-screen has pointer-events: none, so touches
+  // pass through to .xterm-viewport which scrolls natively via CSS
+  // touch-action: pan-y. This runs on the compositor thread for 60fps
+  // smoothness with native momentum/deceleration — no JS needed.
 
   /**
-   * Switch to type mode - keyboard appears, user can type into terminal
+   * Switch to type mode - keyboard appears, user can type into terminal.
+   * Restores pointer-events on both textarea (keyboard input) and screen
+   * (xterm.js touch handling for cursor/selection).
    */
   setMobileTypeMode() {
     if (!this._xtermTextarea || !this.term) return;
     this._mobileTypeMode = true;
-    // Allow touch to reach textarea so keyboard can appear
     this._xtermTextarea.style.pointerEvents = 'auto';
+    if (this._xtermScreen) this._xtermScreen.style.pointerEvents = 'auto';
     this.term.focus();
     if (this.onMobileModeChange) this.onMobileModeChange('type');
   }
 
   /**
-   * Switch to scroll mode - keyboard hidden, touch scrolls terminal output
+   * Switch to scroll mode - keyboard hidden, touch scrolls terminal output.
+   * Disables pointer-events on textarea (prevents keyboard popup) and screen
+   * (lets touches pass through to viewport for native compositor-thread scroll).
    */
   setMobileScrollMode() {
     if (!this._xtermTextarea) return;
     this._mobileTypeMode = false;
-    // Block touch from reaching textarea - prevents keyboard on scroll
     this._xtermTextarea.style.pointerEvents = 'none';
+    if (this._xtermScreen) this._xtermScreen.style.pointerEvents = 'none';
     if (this.term) this.term.blur();
     if (this.onMobileModeChange) this.onMobileModeChange('scroll');
   }

package/src/web/server.js

@@ -2603,6 +2603,278 @@ app.get('/api/sessions/:id/export-context', requireAuth, (req, res) => {
   }
 });
 
+// ──────────────────────────────────────────────────────────
+//  SESSION REFOCUS (DISTILL + RESET/COMPACT)
+// ──────────────────────────────────────────────────────────
+
+/**
+ * POST /api/sessions/:id/refocus
+ * Generates a comprehensive refocus document from the session's conversation,
+ * writes it to the session's working directory as .refocus-context.md, and
+ * returns the file path + content. The frontend then sends /clear or /compact
+ * to the terminal and injects the document back into the session.
+ *
+ * Request body: { mode: 'reset' | 'compact' }
+ * Response: { success, filePath, content, sessionName }
+ */
+app.post('/api/sessions/:id/refocus', requireAuth, (req, res) => {
+  const store = getStore();
+  const session = store.getSession(req.params.id);
+  const mode = req.body.mode;
+
+  if (!mode || (mode !== 'reset' && mode !== 'compact')) {
+    return res.status(400).json({ error: 'Invalid mode. Must be "reset" or "compact".' });
+  }
+
+  if (!session) {
+    return res.status(404).json({ error: 'Session not found' });
+  }
+
+  const claudeSessionId = session.resumeSessionId || req.params.id;
+  const sessionName = session.name || claudeSessionId || 'Unknown Session';
+
+  if (!claudeSessionId) {
+    return res.status(400).json({ error: 'No Claude session ID available' });
+  }
+
+  // Need a working directory to write the refocus file
+  const workingDir = session.workingDir;
+  if (!workingDir || !fs.existsSync(workingDir)) {
+    return res.status(400).json({ error: 'Session has no valid working directory' });
+  }
+
+  // Find the JSONL conversation file
+  const jsonlPath = findJsonlFile(claudeSessionId);
+  if (!jsonlPath) {
+    return res.status(404).json({ error: 'No conversation data found for this session' });
+  }
+
+  try {
+    const stat = fs.statSync(jsonlPath);
+    const fileSize = stat.size;
+
+    // Read more of the conversation than export-context for comprehensive coverage
+    // Head: first 50KB for early messages, Tail: last 200KB for recent context
+    const headSize = Math.min(50 * 1024, fileSize);
+    const tailSize = Math.min(200 * 1024, fileSize);
+    const tailOffset = Math.max(0, fileSize - tailSize);
+
+    const fd = fs.openSync(jsonlPath, 'r');
+
+    const headBuf = Buffer.alloc(headSize);
+    fs.readSync(fd, headBuf, 0, headSize, 0);
+
+    const tailBuf = Buffer.alloc(tailSize);
+    fs.readSync(fd, tailBuf, 0, tailSize, tailOffset);
+
+    fs.closeSync(fd);
+
+    // Parse head messages — collect first 10 user messages
+    const headContent = headBuf.toString('utf-8');
+    const headLines = headContent.split('\n').filter(l => l.trim());
+    const firstUserMessages = [];
+    for (const line of headLines) {
+      if (firstUserMessages.length >= 10) break;
+      const parsed = extractExportMessageText(line);
+      if (parsed && parsed.role === 'user') {
+        firstUserMessages.push(parsed.text);
+      }
+    }
+
+    // Parse tail messages — collect last 15 user + last 15 assistant messages
+    const tailContent = tailBuf.toString('utf-8');
+    const tailLines = tailContent.split('\n').filter(l => l.trim());
+    // Drop partial first line if we started mid-file
+    if (tailOffset > 0 && tailLines.length > 0) tailLines.shift();
+
+    const lastUserMessages = [];
+    const lastAssistantMessages = [];
+    for (let i = tailLines.length - 1; i >= 0; i--) {
+      const parsed = extractExportMessageText(tailLines[i]);
+      if (!parsed) continue;
+      if (parsed.role === 'user' && lastUserMessages.length < 15) {
+        lastUserMessages.unshift(parsed);
+      }
+      if (parsed.role === 'assistant' && lastAssistantMessages.length < 15) {
+        lastAssistantMessages.unshift(parsed);
+      }
+      if (lastUserMessages.length >= 15 && lastAssistantMessages.length >= 15) break;
+    }
+
+    // Extract file paths from the full conversation (combine head + tail text)
+    const allText = [];
+    for (const line of headLines) {
+      const parsed = extractExportMessageText(line);
+      if (parsed) allText.push(parsed.text.substring(0, 2000));
+    }
+    for (const line of tailLines) {
+      const parsed = extractExportMessageText(line);
+      if (parsed) allText.push(parsed.text.substring(0, 2000));
+    }
+    const filesTouched = extractFilePaths(allText.join('\n'));
+
+    // ── Build the structured refocus document ──
+    const timestamp = new Date().toISOString();
+    const mdParts = [];
+
+    mdParts.push(`# Session Refocus: ${sessionName}`);
+    mdParts.push(`_Generated: ${timestamp} | This file will be auto-deleted after ingestion._`);
+    mdParts.push('');
+
+    // Project Overview — the original request/goal
+    mdParts.push('## Project Overview');
+    if (firstUserMessages.length > 0) {
+      const overview = firstUserMessages[0].length > 3000
+        ? firstUserMessages[0].substring(0, 3000) + '...'
+        : firstUserMessages[0];
+      mdParts.push(overview);
+    } else {
+      mdParts.push('_No initial user message found._');
+    }
+    mdParts.push('');
+
+    // What Was Accomplished — last 3-5 assistant messages summarized
+    mdParts.push('## What Was Accomplished');
+    if (lastAssistantMessages.length > 0) {
+      const workMsgs = lastAssistantMessages.slice(-5);
+      for (const msg of workMsgs) {
+        const truncated = msg.text.length > 800
+          ? msg.text.substring(0, 800).replace(/\s+\S*$/, '') + '...'
+          : msg.text;
+        mdParts.push(`- ${truncated}`);
+      }
+    } else {
+      mdParts.push('_No assistant messages found._');
+    }
+    mdParts.push('');
+
+    // Key Decisions & Context — early user follow-ups (decisions, clarifications)
+    mdParts.push('## Key Decisions & Context');
+    if (firstUserMessages.length > 1) {
+      const decisions = firstUserMessages.slice(1, 8);
+      for (const msg of decisions) {
+        const truncated = msg.length > 600
+          ? msg.substring(0, 600).replace(/\s+\S*$/, '') + '...'
+          : msg;
+        mdParts.push(`- ${truncated}`);
+      }
+    } else {
+      mdParts.push('_No additional context decisions found._');
+    }
+    mdParts.push('');
+
+    // Files Modified
+    mdParts.push('## Files Modified');
+    if (filesTouched.length > 0) {
+      for (const fp of filesTouched) {
+        mdParts.push(`- \`${fp}\``);
+      }
+    } else {
+      mdParts.push('_No file paths detected in conversation._');
+    }
+    mdParts.push('');
+
+    // Current State — last assistant message
+    mdParts.push('## Current State');
+    if (lastAssistantMessages.length > 0) {
+      const lastMsg = lastAssistantMessages[lastAssistantMessages.length - 1];
+      const truncated = lastMsg.text.length > 3000
+        ? lastMsg.text.substring(0, 3000).replace(/\s+\S*$/, '') + '...'
+        : lastMsg.text;
+      mdParts.push(truncated);
+    } else {
+      mdParts.push('_No assistant messages found._');
+    }
+    mdParts.push('');
+
+    // Open Issues — scan recent messages for TODO/FIXME/error/issue/bug patterns
+    mdParts.push('## Open Issues');
+    const issuePatterns = /\b(?:TODO|FIXME|HACK|BUG|ERROR|ISSUE|PROBLEM|BROKEN|FAILING|BLOCKED)\b/i;
+    const issues = [];
+    for (const msg of [...lastUserMessages, ...lastAssistantMessages].slice(-10)) {
+      if (issuePatterns.test(msg.text)) {
+        const truncated = msg.text.length > 400
+          ? msg.text.substring(0, 400).replace(/\s+\S*$/, '') + '...'
+          : msg.text;
+        issues.push(`- [${msg.role}] ${truncated}`);
+      }
+    }
+    if (issues.length > 0) {
+      mdParts.push(...issues);
+    } else {
+      mdParts.push('_No explicit issues/TODOs detected in recent messages._');
+    }
+    mdParts.push('');
+
+    // Next Steps — derived from recent user messages
+    mdParts.push('## Next Steps');
+    if (lastUserMessages.length > 0) {
+      const recentUserMsgs = lastUserMessages.slice(-3);
+      for (const msg of recentUserMsgs) {
+        const truncated = msg.text.length > 600
+          ? msg.text.substring(0, 600).replace(/\s+\S*$/, '') + '...'
+          : msg.text;
+        mdParts.push(`- ${truncated}`);
+      }
+    } else {
+      mdParts.push('_No recent user instructions found._');
+    }
+    mdParts.push('');
+
+    // Important Notes — environment info from the session
+    mdParts.push('## Important Notes');
+    mdParts.push(`- Working directory: \`${workingDir}\``);
+    if (session.model) mdParts.push(`- Model: ${session.model}`);
+    if (session.command) mdParts.push(`- Command: ${session.command}`);
+    mdParts.push(`- Mode used: ${mode === 'reset' ? 'Reset & Refocus' : 'Compact & Refocus'}`);
+    mdParts.push('');
+
+    const content = mdParts.join('\n');
+    const filePath = path.join(workingDir, '.refocus-context.md');
+
+    // Write the refocus document to the session's working directory
+    fs.writeFileSync(filePath, content, 'utf-8');
+
+    return res.json({
+      success: true,
+      filePath,
+      content,
+      sessionName,
+    });
+  } catch (err) {
+    return res.status(500).json({ error: 'Failed to generate refocus document: ' + err.message });
+  }
+});
+
+/**
+ * DELETE /api/refocus-cleanup
+ * Cleans up a .refocus-context.md file after ingestion.
+ * Only deletes files that end with '.refocus-context.md' for safety.
+ *
+ * Query param: filePath - absolute path to the file to delete
+ */
+app.delete('/api/refocus-cleanup', requireAuth, (req, res) => {
+  const filePath = req.query.filePath;
+
+  if (!filePath || typeof filePath !== 'string') {
+    return res.status(400).json({ error: 'Missing filePath query parameter' });
+  }
+
+  // Safety: only allow deleting .refocus-context.md files
+  if (!filePath.endsWith('.refocus-context.md')) {
+    return res.status(403).json({ error: 'Can only delete .refocus-context.md files' });
+  }
+
+  try {
+    if (fs.existsSync(filePath)) {
+      fs.unlinkSync(filePath);
+    }
+    return res.json({ success: true });
+  } catch (err) {
+    return res.status(500).json({ error: 'Failed to delete refocus file: ' + err.message });
+  }
+});
+
 // ──────────────────────────────────────────────────────────
 //  SUBAGENT TRACKING
 // ──────────────────────────────────────────────────────────
@@ -3574,7 +3846,7 @@ app.post('/api/resources/kill-process', requireAuth, (req, res) => {
 
 function gitExec(args, cwd) {
   return new Promise((resolve, reject) => {
-    execFile('git', args, { cwd, timeout: 5000 }, (err, stdout, stderr) => {
+    execFile('git', args, { cwd, timeout: 5000, maxBuffer: 1024 * 512 }, (err, stdout, stderr) => {
       if (err) {
         const msg = (stderr || err.message || '').trim();
         return reject(new Error(msg || 'git command failed'));
@@ -3584,6 +3856,22 @@ function gitExec(args, cwd) {
   });
 }
 
+// ─── Server-side git status cache ─────────────────────────
+// Prevents OOM from excessive child process spawning when the
+// frontend polls git status for every visible session.
+const GIT_STATUS_CACHE_TTL = 15000; // 15 seconds
+const gitStatusCache = new Map();
+
+// Evict stale entries every 60 seconds to prevent unbounded growth
+setInterval(() => {
+  const now = Date.now();
+  for (const [key, entry] of gitStatusCache) {
+    if (now - entry.ts > GIT_STATUS_CACHE_TTL * 2) {
+      gitStatusCache.delete(key);
+    }
+  }
+}, 60000).unref();
+
 async function gitRepoRoot(dir) {
   try {
     const root = await gitExec(['rev-parse', '--show-toplevel'], dir);
@@ -3596,9 +3884,20 @@ async function gitRepoRoot(dir) {
 app.get('/api/git/status', requireAuth, async (req, res) => {
   const dir = req.query.dir;
   if (!dir) return res.status(400).json({ error: 'dir query parameter required' });
+
+  // Return cached result if fresh enough
+  const cached = gitStatusCache.get(dir);
+  if (cached && Date.now() - cached.ts < GIT_STATUS_CACHE_TTL) {
+    return res.json(cached.data);
+  }
+
   try {
     const root = await gitRepoRoot(dir);
-    if (!root) return res.json({ isGitRepo: false });
+    if (!root) {
+      const result = { isGitRepo: false };
+      gitStatusCache.set(dir, { data: result, ts: Date.now() });
+      return res.json(result);
+    }
     const branch = (await gitExec(['rev-parse', '--abbrev-ref', 'HEAD'], dir)).trim();
     let dirty = false;
     try {
@@ -3618,7 +3917,9 @@ app.get('/api/git/status', requireAuth, async (req, res) => {
         behind = b || 0;
       } catch {}
     }
-    res.json({ isGitRepo: true, repoRoot: root, branch, dirty, remote, ahead, behind });
+    const result = { isGitRepo: true, repoRoot: root, branch, dirty, remote, ahead, behind };
+    gitStatusCache.set(dir, { data: result, ts: Date.now() });
+    res.json(result);
   } catch (err) {
     res.status(500).json({ error: err.message });
   }