myrlin-workbook 0.8.6 → 0.8.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myrlin-workbook",
-  "version": "0.8.6",
+  "version": "0.8.10",
   "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/src/web/pty-manager.js

@@ -373,14 +373,17 @@ class PtySessionManager {
         }
       }
 
-      // Throttled lastActive update - fires immediately then at most once per 30s
+      // Throttled lastActive update - deferred via setImmediate to avoid
+      // blocking the PTY data path with synchronous JSON file I/O.
       if (!session._lastActiveTimer) {
-        try {
-          const store = getStore();
-          if (store.getSession(sessionId)) {
-            store.updateSession(sessionId, {});
-          }
-        } catch (_) {}
+        setImmediate(() => {
+          try {
+            const store = getStore();
+            if (store.getSession(sessionId)) {
+              store.updateSession(sessionId, {});
+            }
+          } catch (_) {}
+        });
         session._lastActiveTimer = setTimeout(() => {
           session._lastActiveTimer = null;
         }, 30000);

package/src/web/public/app.js

@@ -114,6 +114,8 @@ class CWMApp {
       hiddenSessions: new Set(JSON.parse(localStorage.getItem('cwm_hiddenSessions') || '[]')),
       hiddenProjectSessions: new Set(JSON.parse(localStorage.getItem('cwm_hiddenProjectSessions') || '[]')),
       hiddenProjects: new Set(JSON.parse(localStorage.getItem('cwm_hiddenProjects') || '[]')),
+      hiddenWorkspaces: new Set(JSON.parse(localStorage.getItem('cwm_hiddenWorkspaces') || '[]')),
+      hiddenGroups: new Set(JSON.parse(localStorage.getItem('cwm_hiddenGroups') || '[]')),
       projectSearchQuery: '',
       showHidden: false,
       resourceData: null,
@@ -1048,6 +1050,9 @@ class CWMApp {
           this.closeQuickSwitcher();
         } else if (!this.els.modalOverlay.hidden) {
           this.closeModal(null);
+        } else {
+          // Lowest priority: collapse any expanded terminal pane
+          this._collapseAllExpandedPanes();
         }
       }
     });
@@ -2572,6 +2577,52 @@ class CWMApp {
     }
   }
 
+  /**
+   * Hide a workspace from the sidebar. Persisted in localStorage.
+   * @param {string} workspaceId - The workspace ID to hide
+   */
+  hideWorkspace(workspaceId) {
+    const ws = this.state.workspaces.find(w => w.id === workspaceId);
+    this.state.hiddenWorkspaces.add(workspaceId);
+    localStorage.setItem('cwm_hiddenWorkspaces', JSON.stringify([...this.state.hiddenWorkspaces]));
+    this.renderWorkspaces();
+    this.renderSessions();
+    this.showToast(`Hidden "${ws ? ws.name : 'project'}" - manage in Settings > Hidden Items`, 'info');
+  }
+
+  /**
+   * Unhide a workspace, making it visible in the sidebar again.
+   * @param {string} workspaceId - The workspace ID to unhide
+   */
+  unhideWorkspace(workspaceId) {
+    this.state.hiddenWorkspaces.delete(workspaceId);
+    localStorage.setItem('cwm_hiddenWorkspaces', JSON.stringify([...this.state.hiddenWorkspaces]));
+    this.renderWorkspaces();
+    this.renderSessions();
+  }
+
+  /**
+   * Hide a category (group) from the sidebar. Persisted in localStorage.
+   * @param {string} groupId - The group ID to hide
+   */
+  hideGroup(groupId) {
+    const group = (this.state.groups || []).find(g => g.id === groupId);
+    this.state.hiddenGroups.add(groupId);
+    localStorage.setItem('cwm_hiddenGroups', JSON.stringify([...this.state.hiddenGroups]));
+    this.renderWorkspaces();
+    this.showToast(`Hidden category "${group ? group.name : ''}" - manage in Settings > Hidden Items`, 'info');
+  }
+
+  /**
+   * Unhide a category (group), making it visible in the sidebar again.
+   * @param {string} groupId - The group ID to unhide
+   */
+  unhideGroup(groupId) {
+    this.state.hiddenGroups.delete(groupId);
+    localStorage.setItem('cwm_hiddenGroups', JSON.stringify([...this.state.hiddenGroups]));
+    this.renderWorkspaces();
+  }
+
   toggleShowHidden() {
     this.state.showHidden = !this.state.showHidden;
     if (this.els.toggleHiddenBtn) this.els.toggleHiddenBtn.classList.toggle('active', this.state.showHidden);
@@ -2581,6 +2632,97 @@ class CWMApp {
     this.renderProjects();
   }
 
+  /**
+   * Build a flat list of all currently hidden items for the settings panel.
+   * Returns array of { type, name, id } objects.
+   * @returns {Array<{type: string, name: string, id: string}>}
+   */
+  _getHiddenItemsList() {
+    const items = [];
+
+    // Hidden categories (groups)
+    for (const groupId of this.state.hiddenGroups) {
+      const group = (this.state.groups || []).find(g => g.id === groupId);
+      items.push({ type: 'category', name: group ? group.name : groupId, id: groupId });
+    }
+
+    // Hidden workspaces (projects)
+    for (const wsId of this.state.hiddenWorkspaces) {
+      const ws = this.state.workspaces.find(w => w.id === wsId);
+      items.push({ type: 'project', name: ws ? ws.name : wsId, id: wsId });
+    }
+
+    // Hidden sessions
+    for (const sessionId of this.state.hiddenSessions) {
+      const session = (this.state.allSessions || this.state.sessions).find(s => s.id === sessionId);
+      items.push({ type: 'session', name: session ? session.name : sessionId, id: sessionId });
+    }
+
+    // Hidden project folders (discovered projects)
+    for (const encoded of this.state.hiddenProjects) {
+      // Decode the encoded project name for display
+      const decoded = decodeURIComponent(encoded).replace(/\+/g, '/');
+      items.push({ type: 'folder', name: decoded, id: encoded });
+    }
+
+    // Hidden project sessions (by name)
+    for (const name of this.state.hiddenProjectSessions) {
+      items.push({ type: 'file', name: name, id: name });
+    }
+
+    return items;
+  }
+
+  /**
+   * Unhide a single item by type and ID. Called from the settings panel.
+   * @param {string} type - Item type: category, project, session, folder, file
+   * @param {string} id - The item identifier
+   */
+  _unhideItem(type, id) {
+    switch (type) {
+      case 'category':
+        this.unhideGroup(id);
+        break;
+      case 'project':
+        this.unhideWorkspace(id);
+        break;
+      case 'session':
+        this.unhideSession(id);
+        break;
+      case 'folder':
+        this.state.hiddenProjects.delete(id);
+        localStorage.setItem('cwm_hiddenProjects', JSON.stringify([...this.state.hiddenProjects]));
+        this.renderProjects();
+        break;
+      case 'file':
+        this.state.hiddenProjectSessions.delete(id);
+        localStorage.setItem('cwm_hiddenProjectSessions', JSON.stringify([...this.state.hiddenProjectSessions]));
+        this.renderProjects();
+        break;
+    }
+    this.showToast('Item unhidden', 'success');
+  }
+
+  /**
+   * Unhide all hidden items at once. Clears all hidden sets.
+   */
+  _unhideAllItems() {
+    this.state.hiddenGroups.clear();
+    this.state.hiddenWorkspaces.clear();
+    this.state.hiddenSessions.clear();
+    this.state.hiddenProjects.clear();
+    this.state.hiddenProjectSessions.clear();
+    localStorage.setItem('cwm_hiddenGroups', '[]');
+    localStorage.setItem('cwm_hiddenWorkspaces', '[]');
+    localStorage.setItem('cwm_hiddenSessions', '[]');
+    localStorage.setItem('cwm_hiddenProjects', '[]');
+    localStorage.setItem('cwm_hiddenProjectSessions', '[]');
+    this.renderWorkspaces();
+    this.renderSessions();
+    this.renderProjects();
+    this.showToast('All items unhidden', 'success');
+  }
+
   async startSession(id) {
     try {
       await this.api('POST', `/api/sessions/${id}/start`);
@@ -4039,8 +4181,57 @@ class CWMApp {
       html += `</div>`;
     }
 
+    // ── Hidden Items section ──────────────────────────────
+    // Build a list of all currently hidden items across all categories
+    const hiddenItems = this._getHiddenItemsList();
+    const hiddenMatchesFilter = !lowerFilter || 'hidden items'.includes(lowerFilter) || 'visibility'.includes(lowerFilter) || 'unhide'.includes(lowerFilter) || 'show'.includes(lowerFilter);
+    if (hiddenMatchesFilter) {
+      html += `<div class="settings-category">`;
+      html += `<div class="settings-category-label">Hidden Items</div>`;
+      if (hiddenItems.length === 0) {
+        html += `<div class="settings-row"><div class="settings-row-info"><div class="settings-row-desc" style="opacity:0.5;">No hidden items. Right-click projects or categories in the sidebar to hide them.</div></div></div>`;
+      } else {
+        html += `<div class="settings-row" style="flex-direction:column;align-items:stretch;gap:4px;">`;
+        html += `<div class="settings-row-info" style="margin-bottom:4px;"><div class="settings-row-desc">${hiddenItems.length} hidden item${hiddenItems.length !== 1 ? 's' : ''}. Click the eye icon to unhide.</div></div>`;
+        for (const item of hiddenItems) {
+          html += `
+            <div class="settings-hidden-item" style="display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--surface0);border-radius:6px;">
+              <span class="settings-hidden-item-type" style="font-size:10px;text-transform:uppercase;opacity:0.5;min-width:60px;">${this.escapeHtml(item.type)}</span>
+              <span class="settings-hidden-item-name" style="flex:1;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${this.escapeHtml(item.name)}</span>
+              <button class="btn btn-ghost btn-icon btn-sm settings-unhide-btn" data-unhide-type="${item.type}" data-unhide-id="${this.escapeHtml(item.id)}" title="Unhide" style="opacity:0.5;flex-shrink:0;">
+                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M8 3C4.5 3 1.7 5.1 1 8c.7 2.9 3.5 5 7 5s6.3-2.1 7-5c-.7-2.9-3.5-5-7-5zm0 8a3 3 0 110-6 3 3 0 010 6zm0-5a2 2 0 100 4 2 2 0 000-4z"/></svg>
+              </button>
+            </div>`;
+        }
+        // Unhide All button
+        html += `<button class="btn btn-ghost btn-sm settings-unhide-all-btn" style="margin-top:4px;font-size:11px;opacity:0.7;">Unhide All</button>`;
+        html += `</div>`;
+      }
+      html += `</div>`;
+    }
+
     this.els.settingsBody.innerHTML = html;
 
+    // ── Hidden items event bindings ────────────────────────
+    this.els.settingsBody.querySelectorAll('.settings-unhide-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const type = btn.dataset.unhideType;
+        const id = btn.dataset.unhideId;
+        this._unhideItem(type, id);
+        // Re-render settings to update the hidden items list
+        const filter = this.els.settingsSearchInput ? this.els.settingsSearchInput.value : '';
+        this.renderSettingsBody(filter);
+      });
+    });
+    const unhideAllBtn = this.els.settingsBody.querySelector('.settings-unhide-all-btn');
+    if (unhideAllBtn) {
+      unhideAllBtn.addEventListener('click', () => {
+        this._unhideAllItems();
+        const filter = this.els.settingsSearchInput ? this.els.settingsSearchInput.value : '';
+        this.renderSettingsBody(filter);
+      });
+    }
+
     // ── Named tunnel controls ──────────────────────────────
     const ntStatus = document.getElementById('named-tunnel-status');
     const ntTokenInput = document.getElementById('named-tunnel-token-input');
@@ -7444,9 +7635,10 @@ class CWMApp {
       // Respect persisted collapse state: active workspace stays open unless user manually collapsed it
       const isManuallyCollapsed = this._wsCollapseState && this._wsCollapseState[ws.id] === true;
       const showBody = isActive && !isManuallyCollapsed;
+      const isWsHidden = this.state.hiddenWorkspaces.has(ws.id);
 
       return `
-        <div class="workspace-accordion" data-id="${ws.id}">
+        <div class="workspace-accordion${isWsHidden ? ' hidden-item' : ''}" data-id="${ws.id}">
           <div class="workspace-item${isActive ? ' active' : ''}" data-id="${ws.id}" draggable="true">
             <span class="ws-chevron${showBody ? ' open' : ''}">&#9654;</span>
             <div class="workspace-color-dot" style="background: ${color}"></div>
@@ -7475,10 +7667,14 @@ class CWMApp {
     };
 
     // Split workspaces into grouped and ungrouped
-    const groups = this.state.groups || [];
+    const allGroups = this.state.groups || [];
+    // Filter hidden groups (unless showHidden is on)
+    const groups = allGroups.filter(g => this.state.showHidden || !this.state.hiddenGroups.has(g.id));
     const groupedIds = new Set();
-    groups.forEach(g => (g.workspaceIds || []).forEach(id => groupedIds.add(id)));
-    const ungrouped = workspaces.filter(ws => !groupedIds.has(ws.id));
+    allGroups.forEach(g => (g.workspaceIds || []).forEach(id => groupedIds.add(id)));
+    const ungrouped = workspaces
+      .filter(ws => !groupedIds.has(ws.id))
+      .filter(ws => this.state.showHidden || !this.state.hiddenWorkspaces.has(ws.id));
 
     let html = '';
 
@@ -7487,17 +7683,19 @@ class CWMApp {
       const groupColor = colorMap[group.color] || colorMap.mauve;
       const groupWorkspaces = (group.workspaceIds || [])
         .map(id => workspaces.find(ws => ws.id === id))
-        .filter(Boolean);
+        .filter(Boolean)
+        .filter(ws => this.state.showHidden || !this.state.hiddenWorkspaces.has(ws.id));
 
       // Show empty groups too so user can drag workspaces into them
       const groupCount = groupWorkspaces.length;
       const isCollapsed = this._groupCollapseState && this._groupCollapseState[group.id] === true;
+      const isGroupHidden = this.state.hiddenGroups.has(group.id);
       const groupItemsHtml = groupCount > 0
         ? groupWorkspaces.map(ws => renderWorkspaceItem(ws)).join('')
         : '<div class="workspace-group-empty">Drag projects here</div>';
 
       html += `
-        <div class="workspace-group" data-group-id="${group.id}">
+        <div class="workspace-group${isGroupHidden ? ' hidden-item' : ''}" data-group-id="${group.id}">
           <div class="workspace-group-header" data-group-id="${group.id}" style="--group-color: ${groupColor}">
             <span class="group-chevron${isCollapsed ? '' : ' open'}">&#9662;</span>
             <span class="group-color-dot" style="background: ${groupColor}"></span>
@@ -7615,6 +7813,7 @@ class CWMApp {
     }
 
     items.push({ type: 'sep' });
+    items.push({ label: 'Hide Project', icon: '&#128065;', action: () => this.hideWorkspace(workspaceId) });
     items.push({ label: 'Delete Project', icon: '&#10005;', action: () => this.deleteWorkspace(workspaceId), danger: true });
 
     this._renderContextItems(ws.name, items, x, y);
@@ -7750,6 +7949,7 @@ class CWMApp {
     const items = [
       { label: 'Edit Category', icon: '&#9998;', action: () => this.renameGroup(groupId) },
       { type: 'sep' },
+      { label: 'Hide Category', icon: '&#128065;', action: () => this.hideGroup(groupId) },
       { label: 'Delete Category', icon: '&#10005;', danger: true, action: () => this.deleteGroup(groupId) },
     ];
 
@@ -8585,6 +8785,26 @@ class CWMApp {
           closeBtn.addEventListener('click', () => this.closeTerminalPane(slotIdx));
         }
 
+        // Expand button: normal → stage1 (fills grid), stage1 → stage2 (fills viewport)
+        const expandBtn = pane.querySelector('.terminal-pane-expand');
+        if (expandBtn) {
+          expandBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this._cycleExpandPane(slotIdx);
+          });
+        }
+
+        // Collapse button: always collapses back to normal from any expanded state
+        const collapseBtn = pane.querySelector('.terminal-pane-collapse');
+        if (collapseBtn) {
+          collapseBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this._collapseExpandPane(slotIdx);
+            const tp = this.terminalPanes[slotIdx];
+            if (tp) requestAnimationFrame(() => tp.safeFit());
+          });
+        }
+
         // Mic (voice input) button - only show if SpeechRecognition API is available
         const micBtn = pane.querySelector('.terminal-pane-mic');
         if (micBtn && this._speechRecognitionAvailable) {
@@ -8722,6 +8942,8 @@ class CWMApp {
     // Show mic button if SpeechRecognition is supported
     const micBtn2 = paneEl.querySelector('.terminal-pane-mic');
     if (micBtn2 && this._speechRecognitionAvailable) micBtn2.hidden = false;
+    const expandBtn2 = paneEl.querySelector('.terminal-pane-expand');
+    if (expandBtn2) expandBtn2.hidden = false;
 
     // Create and mount TerminalPane
     const tp = new TerminalPane(containerId, sessionId, sessionName, spawnOpts);
@@ -8996,6 +9218,12 @@ class CWMApp {
     if (closeBtn) closeBtn.hidden = true;
     const uploadBtn3 = paneEl.querySelector('.terminal-pane-upload');
     if (uploadBtn3) uploadBtn3.hidden = true;
+    // Collapse any active expansion before closing
+    this._collapseExpandPane(slotIdx);
+    const expandBtn3 = paneEl.querySelector('.terminal-pane-expand');
+    if (expandBtn3) expandBtn3.hidden = true;
+    const collapseBtn3 = paneEl.querySelector('.terminal-pane-collapse');
+    if (collapseBtn3) collapseBtn3.hidden = true;
     // Stop any active voice recognition and hide mic button on pane close
     this._stopVoiceRecognition(slotIdx);
     const micBtn3 = paneEl.querySelector('.terminal-pane-mic');
@@ -9034,6 +9262,73 @@ class CWMApp {
     }
   }
 
+  /**
+   * Cycle expand state: normal → stage1 (fills grid) → stage2 (fills full viewport).
+   * Expand button (outward arrows): visible at normal + stage1 (green at stage1), hidden at stage2.
+   * Collapse button (inward arrows, red): hidden at normal, visible at stage1 + stage2.
+   * @param {number} slotIdx - The terminal pane slot index
+   */
+  _cycleExpandPane(slotIdx) {
+    const paneEl = document.getElementById(`term-pane-${slotIdx}`);
+    if (!paneEl) return;
+    const expandBtn = paneEl.querySelector('.terminal-pane-expand');
+    const collapseBtn = paneEl.querySelector('.terminal-pane-collapse');
+
+    if (paneEl.classList.contains('pane-expanded-stage1')) {
+      // Stage1 → stage2: hide expand, keep collapse visible
+      paneEl.classList.remove('pane-expanded-stage1');
+      paneEl.classList.add('pane-expanded-stage2');
+      if (expandBtn) {
+        expandBtn.classList.remove('terminal-pane-expand-stage1');
+        expandBtn.classList.add('terminal-pane-expand-stage2');
+        expandBtn.title = 'Expand pane';
+      }
+    } else {
+      // Normal → stage1: expand turns green, collapse appears
+      paneEl.classList.add('pane-expanded-stage1');
+      if (expandBtn) {
+        expandBtn.classList.add('terminal-pane-expand-stage1');
+        expandBtn.title = 'Expand to full screen';
+      }
+      if (collapseBtn) collapseBtn.hidden = false;
+    }
+
+    const tp = this.terminalPanes[slotIdx];
+    if (tp) requestAnimationFrame(() => tp.safeFit());
+  }
+
+  /**
+   * Collapse an expanded pane back to normal state.
+   * @param {number} slotIdx - The terminal pane slot index
+   */
+  _collapseExpandPane(slotIdx) {
+    const paneEl = document.getElementById(`term-pane-${slotIdx}`);
+    if (!paneEl) return;
+    paneEl.classList.remove('pane-expanded-stage1', 'pane-expanded-stage2');
+    const expandBtn = paneEl.querySelector('.terminal-pane-expand');
+    if (expandBtn) {
+      expandBtn.classList.remove('terminal-pane-expand-stage1', 'terminal-pane-expand-stage2');
+      expandBtn.title = 'Expand pane';
+    }
+    const collapseBtn = paneEl.querySelector('.terminal-pane-collapse');
+    if (collapseBtn) collapseBtn.hidden = true;
+  }
+
+  /**
+   * Collapse all expanded terminal panes back to normal state.
+   * Used by the Escape key cascade as lowest-priority action.
+   */
+  _collapseAllExpandedPanes() {
+    for (let i = 0; i < CWMApp.MAX_PANES; i++) {
+      const paneEl = document.getElementById(`term-pane-${i}`);
+      if (paneEl && (paneEl.classList.contains('pane-expanded-stage1') || paneEl.classList.contains('pane-expanded-stage2'))) {
+        this._collapseExpandPane(i);
+        const tp = this.terminalPanes[i];
+        if (tp) requestAnimationFrame(() => tp.safeFit());
+      }
+    }
+  }
+
   /**
    * Toggle voice input (speech-to-text) for a terminal pane.
    * Uses the Web Speech API (SpeechRecognition) to capture a single utterance,
@@ -14260,7 +14555,7 @@ class CWMApp {
       const resp = await fetch(`/api/pty/${tp.sessionId}/upload-image`, {
         method: 'POST',
         headers: {
-          'Authorization': `Bearer ${this.authToken}`,
+          'Authorization': `Bearer ${this.state.token}`,
           'Content-Type': file.type,
           'X-Filename': encodeURIComponent(file.name),
         },
@@ -15561,12 +15856,28 @@ class CWMApp {
         }
       }
 
+      // If no workspace matched by directory, try matching by project folder name
+      if (!workspaceId) {
+        const matchByName = (this.state.workspaces || []).find(
+          ws => ws.name.toLowerCase() === projectName.toLowerCase()
+        );
+        if (matchByName) workspaceId = matchByName.id;
+      }
+
+      // If still no workspace found, auto-create one for this project
+      if (!workspaceId) {
+        const wsData = await this.api('POST', '/api/workspaces', { name: projectName });
+        const newWs = wsData.workspace || wsData;
+        workspaceId = newWs.id;
+        await this.loadWorkspaces();
+      }
+
       const payload = {
         name,
         workingDir: dir,
+        workspaceId,
         command: 'claude',
       };
-      if (workspaceId) payload.workspaceId = workspaceId;
       if (model) payload.model = model;
 
       const data = await this.api('POST', '/api/sessions', payload);

package/src/web/public/index.html

@@ -540,6 +540,16 @@
                   <path d="M4 6.5a.5.5 0 011 0V7a3 3 0 006 0v-.5a.5.5 0 011 0V7a4 4 0 01-3.5 3.97V13H10a.5.5 0 010 1H6a.5.5 0 010-1h1.5v-2.03A4 4 0 014 7v-.5z"/>
                 </svg>
               </button>
+              <button class="terminal-pane-expand btn btn-ghost btn-icon btn-sm" title="Expand pane" hidden>
+                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                  <path d="M1.5 1h4a.5.5 0 010 1H2.707l3.147 3.146a.5.5 0 01-.708.708L2 2.707V5.5a.5.5 0 01-1 0v-4A.5.5 0 011.5 1zM14.5 1a.5.5 0 01.5.5v4a.5.5 0 01-1 0V2.707l-3.146 3.147a.5.5 0 01-.708-.708L13.293 2H10.5a.5.5 0 010-1h4zM1.5 15a.5.5 0 01-.5-.5v-4a.5.5 0 011 0v2.793l3.146-3.147a.5.5 0 01.708.708L2.707 14H5.5a.5.5 0 010 1h-4zM10.354 10.146a.5.5 0 01.708 0L14 13.293V10.5a.5.5 0 011 0v4a.5.5 0 01-.5.5h-4a.5.5 0 010-1h2.793l-3.147-3.146a.5.5 0 010-.708z"/>
+                </svg>
+              </button>
+              <button class="terminal-pane-collapse btn btn-ghost btn-icon btn-sm" title="Collapse pane" hidden>
+                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                  <path d="M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5zm5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5zM0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zm10 1a1.5 1.5 0 0 1 1.5-1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4z"/>
+                </svg>
+              </button>
               <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>
@@ -576,6 +586,16 @@
                   <path d="M4 6.5a.5.5 0 011 0V7a3 3 0 006 0v-.5a.5.5 0 011 0V7a4 4 0 01-3.5 3.97V13H10a.5.5 0 010 1H6a.5.5 0 010-1h1.5v-2.03A4 4 0 014 7v-.5z"/>
                 </svg>
               </button>
+              <button class="terminal-pane-expand btn btn-ghost btn-icon btn-sm" title="Expand pane" hidden>
+                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                  <path d="M1.5 1h4a.5.5 0 010 1H2.707l3.147 3.146a.5.5 0 01-.708.708L2 2.707V5.5a.5.5 0 01-1 0v-4A.5.5 0 011.5 1zM14.5 1a.5.5 0 01.5.5v4a.5.5 0 01-1 0V2.707l-3.146 3.147a.5.5 0 01-.708-.708L13.293 2H10.5a.5.5 0 010-1h4zM1.5 15a.5.5 0 01-.5-.5v-4a.5.5 0 011 0v2.793l3.146-3.147a.5.5 0 01.708.708L2.707 14H5.5a.5.5 0 010 1h-4zM10.354 10.146a.5.5 0 01.708 0L14 13.293V10.5a.5.5 0 011 0v4a.5.5 0 01-.5.5h-4a.5.5 0 010-1h2.793l-3.147-3.146a.5.5 0 010-.708z"/>
+                </svg>
+              </button>
+              <button class="terminal-pane-collapse btn btn-ghost btn-icon btn-sm" title="Collapse pane" hidden>
+                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                  <path d="M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5zm5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5zM0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zm10 1a1.5 1.5 0 0 1 1.5-1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4z"/>
+                </svg>
+              </button>
               <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>
@@ -612,6 +632,16 @@
                   <path d="M4 6.5a.5.5 0 011 0V7a3 3 0 006 0v-.5a.5.5 0 011 0V7a4 4 0 01-3.5 3.97V13H10a.5.5 0 010 1H6a.5.5 0 010-1h1.5v-2.03A4 4 0 014 7v-.5z"/>
                 </svg>
               </button>
+              <button class="terminal-pane-expand btn btn-ghost btn-icon btn-sm" title="Expand pane" hidden>
+                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                  <path d="M1.5 1h4a.5.5 0 010 1H2.707l3.147 3.146a.5.5 0 01-.708.708L2 2.707V5.5a.5.5 0 01-1 0v-4A.5.5 0 011.5 1zM14.5 1a.5.5 0 01.5.5v4a.5.5 0 01-1 0V2.707l-3.146 3.147a.5.5 0 01-.708-.708L13.293 2H10.5a.5.5 0 010-1h4zM1.5 15a.5.5 0 01-.5-.5v-4a.5.5 0 011 0v2.793l3.146-3.147a.5.5 0 01.708.708L2.707 14H5.5a.5.5 0 010 1h-4zM10.354 10.146a.5.5 0 01.708 0L14 13.293V10.5a.5.5 0 011 0v4a.5.5 0 01-.5.5h-4a.5.5 0 010-1h2.793l-3.147-3.146a.5.5 0 010-.708z"/>
+                </svg>
+              </button>
+              <button class="terminal-pane-collapse btn btn-ghost btn-icon btn-sm" title="Collapse pane" hidden>
+                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                  <path d="M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5zm5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5zM0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zm10 1a1.5 1.5 0 0 1 1.5-1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4z"/>
+                </svg>
+              </button>
               <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>
@@ -648,6 +678,16 @@
                   <path d="M4 6.5a.5.5 0 011 0V7a3 3 0 006 0v-.5a.5.5 0 011 0V7a4 4 0 01-3.5 3.97V13H10a.5.5 0 010 1H6a.5.5 0 010-1h1.5v-2.03A4 4 0 014 7v-.5z"/>
                 </svg>
               </button>
+              <button class="terminal-pane-expand btn btn-ghost btn-icon btn-sm" title="Expand pane" hidden>
+                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                  <path d="M1.5 1h4a.5.5 0 010 1H2.707l3.147 3.146a.5.5 0 01-.708.708L2 2.707V5.5a.5.5 0 01-1 0v-4A.5.5 0 011.5 1zM14.5 1a.5.5 0 01.5.5v4a.5.5 0 01-1 0V2.707l-3.146 3.147a.5.5 0 01-.708-.708L13.293 2H10.5a.5.5 0 010-1h4zM1.5 15a.5.5 0 01-.5-.5v-4a.5.5 0 011 0v2.793l3.146-3.147a.5.5 0 01.708.708L2.707 14H5.5a.5.5 0 010 1h-4zM10.354 10.146a.5.5 0 01.708 0L14 13.293V10.5a.5.5 0 011 0v4a.5.5 0 01-.5.5h-4a.5.5 0 010-1h2.793l-3.147-3.146a.5.5 0 010-.708z"/>
+                </svg>
+              </button>
+              <button class="terminal-pane-collapse btn btn-ghost btn-icon btn-sm" title="Collapse pane" hidden>
+                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                  <path d="M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5zm5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5zM0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zm10 1a1.5 1.5 0 0 1 1.5-1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4z"/>
+                </svg>
+              </button>
               <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>
@@ -684,6 +724,16 @@
                   <path d="M4 6.5a.5.5 0 011 0V7a3 3 0 006 0v-.5a.5.5 0 011 0V7a4 4 0 01-3.5 3.97V13H10a.5.5 0 010 1H6a.5.5 0 010-1h1.5v-2.03A4 4 0 014 7v-.5z"/>
                 </svg>
               </button>
+              <button class="terminal-pane-expand btn btn-ghost btn-icon btn-sm" title="Expand pane" hidden>
+                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                  <path d="M1.5 1h4a.5.5 0 010 1H2.707l3.147 3.146a.5.5 0 01-.708.708L2 2.707V5.5a.5.5 0 01-1 0v-4A.5.5 0 011.5 1zM14.5 1a.5.5 0 01.5.5v4a.5.5 0 01-1 0V2.707l-3.146 3.147a.5.5 0 01-.708-.708L13.293 2H10.5a.5.5 0 010-1h4zM1.5 15a.5.5 0 01-.5-.5v-4a.5.5 0 011 0v2.793l3.146-3.147a.5.5 0 01.708.708L2.707 14H5.5a.5.5 0 010 1h-4zM10.354 10.146a.5.5 0 01.708 0L14 13.293V10.5a.5.5 0 011 0v4a.5.5 0 01-.5.5h-4a.5.5 0 010-1h2.793l-3.147-3.146a.5.5 0 010-.708z"/>
+                </svg>
+              </button>
+              <button class="terminal-pane-collapse btn btn-ghost btn-icon btn-sm" title="Collapse pane" hidden>
+                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                  <path d="M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5zm5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5zM0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zm10 1a1.5 1.5 0 0 1 1.5-1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4z"/>
+                </svg>
+              </button>
               <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>
@@ -720,6 +770,16 @@
                   <path d="M4 6.5a.5.5 0 011 0V7a3 3 0 006 0v-.5a.5.5 0 011 0V7a4 4 0 01-3.5 3.97V13H10a.5.5 0 010 1H6a.5.5 0 010-1h1.5v-2.03A4 4 0 014 7v-.5z"/>
                 </svg>
               </button>
+              <button class="terminal-pane-expand btn btn-ghost btn-icon btn-sm" title="Expand pane" hidden>
+                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                  <path d="M1.5 1h4a.5.5 0 010 1H2.707l3.147 3.146a.5.5 0 01-.708.708L2 2.707V5.5a.5.5 0 01-1 0v-4A.5.5 0 011.5 1zM14.5 1a.5.5 0 01.5.5v4a.5.5 0 01-1 0V2.707l-3.146 3.147a.5.5 0 01-.708-.708L13.293 2H10.5a.5.5 0 010-1h4zM1.5 15a.5.5 0 01-.5-.5v-4a.5.5 0 011 0v2.793l3.146-3.147a.5.5 0 01.708.708L2.707 14H5.5a.5.5 0 010 1h-4zM10.354 10.146a.5.5 0 01.708 0L14 13.293V10.5a.5.5 0 011 0v4a.5.5 0 01-.5.5h-4a.5.5 0 010-1h2.793l-3.147-3.146a.5.5 0 010-.708z"/>
+                </svg>
+              </button>
+              <button class="terminal-pane-collapse btn btn-ghost btn-icon btn-sm" title="Collapse pane" hidden>
+                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+                  <path d="M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5zm5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5zM0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zm10 1a1.5 1.5 0 0 1 1.5-1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4z"/>
+                </svg>
+              </button>
               <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>

package/src/web/public/styles.css

@@ -2167,6 +2167,23 @@ textarea.input {
   font-size: 13px;
 }
 
+/* Hidden items in settings panel */
+.settings-hidden-item:hover {
+  background: var(--surface1) !important;
+}
+.settings-hidden-item .settings-unhide-btn:hover {
+  opacity: 1 !important;
+  color: var(--green);
+}
+
+/* Sidebar: hidden items shown via "Show hidden" toggle get a dim visual */
+.workspace-group.hidden-item {
+  opacity: 0.45;
+}
+.workspace-accordion.hidden-item {
+  opacity: 0.45;
+}
+
 .modal {
   width: 100%;
   max-width: 440px;
@@ -4693,6 +4710,60 @@ textarea.input {
 }
 
 .terminal-pane-close { width: 20px; height: 20px; padding: 0; }
+
+/* Expand button - between mic and close, hidden until pane is active */
+.terminal-pane-expand {
+  opacity: 0.5;
+  transition: opacity 0.15s, color 0.15s;
+}
+.terminal-pane-expand:hover {
+  opacity: 1;
+}
+/* Stage 1: expand button turns green (advance to stage 2) */
+.terminal-pane-expand-stage1 {
+  color: var(--green);
+  opacity: 1;
+}
+/* Stage 2: expand button hidden — already at max, no further expansion */
+.terminal-pane-expand-stage2 {
+  display: none !important;
+}
+
+/* Collapse button — inward arrows, always red, shown at stage1 + stage2 */
+.terminal-pane-collapse {
+  color: var(--red);
+  opacity: 0.8;
+  transition: opacity 0.15s;
+}
+.terminal-pane-collapse:hover {
+  opacity: 1;
+}
+
+/* Stage 1: pane overlays entire terminal grid */
+.terminal-pane.pane-expanded-stage1 {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+/* Stage 2: pane overlays entire browser viewport (covers sidebar too) */
+/* z-index 900: below all overlay panels (1000+) so modals/overlays remain accessible */
+.terminal-pane.pane-expanded-stage2 {
+  position: fixed;
+  inset: 0;
+  z-index: 900;
+  width: 100vw !important;
+  height: 100vh !important;
+}
+
+/* Smooth expand/collapse transitions */
+.terminal-pane.pane-expanded-stage1,
+.terminal-pane.pane-expanded-stage2 {
+  transition: all 150ms ease;
+}
+
 /* Voice input mic button - in terminal pane header, between activity and close */
 .terminal-pane-mic {
   opacity: 0.5;
@@ -4749,13 +4820,17 @@ textarea.input {
 .terminal-pane.image-drag-over { position: relative; }
 .terminal-pane.image-drag-over .terminal-container {
   outline: 2px dashed var(--blue); outline-offset: -2px;
+  filter: blur(4px) brightness(0.7);
+  transition: filter 150ms ease;
 }
 .terminal-pane.image-drag-over::after {
-  content: 'Drop image here'; position: absolute; top: 50%; left: 50%;
+  content: 'Drop image to send to this session'; position: absolute; top: 50%; left: 50%;
   transform: translate(-50%, -50%); color: var(--blue);
   font-size: 14px; font-weight: 600; pointer-events: none; z-index: 10;
+  background: var(--base); padding: 8px 16px; border-radius: 8px;
+  border: 1px solid var(--blue); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
-.terminal-container { flex: 1; overflow: hidden; }
+.terminal-container { flex: 1; overflow: hidden; transition: filter 150ms ease; }
 .terminal-pane-empty .terminal-container {
   display: flex; align-items: center; justify-content: center;
   border: 2px dashed var(--surface1); margin: 8px;

package/src/web/public/terminal.js

@@ -1009,14 +1009,18 @@ class TerminalPane {
     // Track completion (debounced internally)
     this._trackActivityForCompletion();
 
-    // Debounce activity detection to at most once per 200ms
+    // Debounce activity detection to at most once per 200ms.
+    // Skip for unfocused terminals to avoid wasting CPU on regex
+    // parsing when the result won't be visible anyway.
     if (!this._activityDebounceTimer) {
       this._activityDebounceTimer = setTimeout(() => {
         this._activityDebounceTimer = null;
         const sample = this._activitySample;
         this._activitySample = '';
-        if (sample) this._detectActivity(sample);
-        this._analyzeForAutoTrust(sample);
+        if (sample && this._isFocused) {
+          this._detectActivity(sample);
+          this._analyzeForAutoTrust(sample);
+        }
       }, 200);
     }
   }