myrlin-workbook 0.9.33 → 0.9.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myrlin-workbook",
-  "version": "0.9.33",
+  "version": "0.9.34",
   "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/public/app.js

@@ -148,6 +148,7 @@ class CWMApp {
     // Key: groupId, Value: { panes: [TerminalPane|null x MAX_PANES], domFragments: [DocumentFragment|null x MAX_PANES] }
     this._groupPaneCache = {};
     this.PANE_SLOT_COLORS = ['mauve', 'blue', 'green', 'peach', 'red', 'pink'];
+    this.TAB_COLORS = (window.InstanceColors && window.InstanceColors.TAB_COLORS) || [];
     this._gridColSizes = [1, 1];  // fr ratios for column widths
     this._gridRowSizes = [1, 1];  // fr ratios for row heights
     // Voice recognition instances per slot (for mic-to-terminal input)
@@ -1421,6 +1422,14 @@ class CWMApp {
         return;
       }
 
+      // Pip click — navigate to that instance (handled BEFORE session-item click).
+      const pip = e.target.closest('.instance-indicator');
+      if (pip && pip.dataset.tabId) {
+        e.stopPropagation();
+        this._navigateToInstance(pip.dataset.tabId, parseInt(pip.dataset.slot, 10));
+        return;
+      }
+
       const wsSessionItem = e.target.closest('.ws-session-item');
       if (wsSessionItem) {
         e.stopPropagation();
@@ -4148,14 +4157,68 @@ class CWMApp {
     });
   }
 
-  /** Find which pane slot (0-3) a session is open in, or -1 if not found */
-  getSlotForSession(sessionId) {
-    for (let i = 0; i < this.terminalPanes.length; i++) {
-      if (this.terminalPanes[i] && this.terminalPanes[i].sessionId === sessionId) {
-        return i;
-      }
+  /** Return one entry per place a session is open across all tab groups. */
+  getSessionInstances(sessionId) {
+    return window.InstanceColors.getSessionInstances(sessionId, this._tabGroups || []);
+  }
+
+  /** Return the (positional) colour for a tab — global index across all tabs. */
+  getTabColor(tabId) {
+    return window.InstanceColors.getTabColor(tabId, this._tabGroups || []);
+  }
+
+  /** Render one indicator: top half = tab colour, bottom half = slot colour, 1px divider. */
+  renderInstanceIndicator({ tabColor, slotColor, title, tabId, slot }) {
+    return `<span class="instance-indicator"
+      title="${this.escapeHtml(title || '')}"
+      data-tab-id="${this.escapeHtml(tabId)}"
+      data-slot="${slot}"
+      style="--c-outer:var(--${tabColor});
+             --c-inner:var(--${slotColor})">
+      <span class="instance-indicator-square">
+        <span class="instance-indicator-inner"></span>
+      </span>
+    </span>`;
+  }
+
+  /** Render the full row of indicators for a session, or empty string. */
+  renderInstanceIndicatorRow(sessionId) {
+    if (!this.state.settings.paneColorHighlights) return '';
+    const instances = this.getSessionInstances(sessionId);
+    if (!instances.length) return '';
+    return `<span class="instance-indicator-row">${
+      instances.map(inst => this.renderInstanceIndicator({
+        tabColor:  this.getTabColor(inst.tabId),
+        slotColor: this.PANE_SLOT_COLORS[inst.slot % this.PANE_SLOT_COLORS.length],
+        title:     this._formatInstanceTooltip(inst),
+        tabId:     inst.tabId,
+        slot:      inst.slot,
+      })).join('')
+    }</span>`;
+  }
+
+  /** Build a textual tooltip for an instance: "<tab> › slot N". */
+  _formatInstanceTooltip({ tabId, slot }) {
+    const tab = (this._tabGroups || []).find(g => g.id === tabId);
+    const tabName = tab ? tab.name : '?';
+    return `${tabName} › slot ${slot + 1}`;
+  }
+
+  /** Navigate to a session instance: switch to its tab, then briefly pulse the pane. */
+  _navigateToInstance(tabId, slot) {
+    if (this._activeGroupId !== tabId) {
+      this.switchTerminalGroup(tabId);
     }
-    return -1;
+    // Pulse the target pane on the next frame so the switch has rendered.
+    requestAnimationFrame(() => {
+      const paneEls = document.querySelectorAll('.terminal-pane');
+      const paneEl = paneEls[slot];
+      if (!paneEl) return;
+      paneEl.classList.remove('pane-nav-pulse');
+      void paneEl.offsetWidth;                 // force reflow so the animation restarts
+      paneEl.classList.add('pane-nav-pulse');
+      setTimeout(() => paneEl.classList.remove('pane-nav-pulse'), 800);
+    });
   }
 
   /** Open the settings overlay */
@@ -8862,11 +8925,8 @@ class CWMApp {
           }
         }
 
-        // Pane color pip — show matching dot if session is open in a terminal slot
-        const slotIdx = this.getSlotForSession(s.id);
-        const pip = (slotIdx !== -1 && this.state.settings.paneColorHighlights)
-          ? `<span class="pane-color-pip" style="background:var(--${this.PANE_SLOT_COLORS[slotIdx]})"></span>`
-          : '';
+        // Three-layer indicator — one per place this session is open across all tab groups
+        const pip = this.renderInstanceIndicatorRow(s.id);
 
         // Build meta row (badges + size + time) — only if there's something to show
         const metaParts = [badges, sizeStr ? `<span class="ws-session-size">${sizeStr}</span>` : ''].filter(Boolean).join('');
@@ -8874,8 +8934,8 @@ class CWMApp {
         const timeEl = timeStr ? `<span class="ws-session-time">${timeStr}</span>` : '';
 
         return `<div class="ws-session-item${isHidden ? ' ws-session-hidden' : ''}" data-session-id="${s.id}" draggable="true" title="${this.escapeHtml(s.workingDir || '')}">
-          <span class="ws-session-dot${tristateAttr}" style="background: ${statusDot}"></span>${pip}
-          <span class="ws-session-name">${this.escapeHtml(name)}</span>${timeEl}
+          <span class="ws-session-dot${tristateAttr}" style="background: ${statusDot}"></span>
+          <span class="ws-session-name">${this.escapeHtml(name)}</span>${pip}${timeEl}
           ${metaRow}
         </div>`;
       };
@@ -10543,13 +10603,12 @@ class CWMApp {
       this.switchTerminalTab(slotIdx);
     }
 
-    // Re-render sidebar to show pane color pips
-    if (this.state.settings.paneColorHighlights) {
-      this.renderWorkspaces();
-    }
-
     // Refresh pinned-notes badge for this pane now that a session is loaded
     this._refreshPanePin(slotIdx);
+
+    // Route through the centralised chokepoint so the sidebar indicator and
+    // server-persisted layout reflect the new pane.
+    this.saveTerminalLayout();
   }
 
   /**
@@ -11025,14 +11084,13 @@ class CWMApp {
       this.updateTerminalTabs();
     }
 
-    // Re-render sidebar to remove pane color pips
-    if (this.state.settings.paneColorHighlights) {
-      this.renderWorkspaces();
-    }
-
     if (sessionName) {
       this.showToast(`"${sessionName}" moved to background - drag it back to reconnect`, 'info');
     }
+
+    // Route through the centralised chokepoint so the sidebar indicator and
+    // server-persisted layout reflect the closed pane.
+    this.saveTerminalLayout();
   }
 
   /**
@@ -11360,6 +11418,10 @@ class CWMApp {
         if (tp) tp.safeFit();
       });
     });
+
+    // Route through the centralised chokepoint so the sidebar indicator and
+    // server-persisted layout reflect the swapped panes.
+    this.saveTerminalLayout();
   }
 
   updateTerminalGridLayout() {
@@ -13413,7 +13475,10 @@ class CWMApp {
       const tp = this.terminalPanes.find((_, i) => p.slot === i);
       return tp !== null;
     });
-    return `<button class="terminal-group-tab${isActive ? ' active' : ''}" data-group-id="${g.id}">
+    const tabColor = this.getTabColor(g.id);
+    return `<button class="terminal-group-tab${isActive ? ' active' : ''}"
+      data-group-id="${g.id}"
+      style="--tab-color:var(--${tabColor})">
       <span class="terminal-group-tab-dot${hasActive ? '' : ' inactive'}"></span>
       <span class="terminal-group-tab-name">${this.escapeHtml(g.name)}</span>
       ${paneCount > 0 ? `<span class="terminal-group-tab-count">${paneCount}</span>` : ''}
@@ -14351,7 +14416,24 @@ class CWMApp {
     });
   }
 
+  /**
+   * Central chokepoint for tab/pane mutations. Performs three things in order:
+   *   1. Synchronously flushes live pane state via `saveCurrentGroupPanes()`.
+   *   2. Synchronously re-renders the sidebar via `renderWorkspaces()`.
+   *   3. Schedules a debounced (500ms) PUT to /api/layout for server persistence.
+   * Callers that mutate `terminalPanes` or `_tabGroups` should route through
+   * this method rather than calling `renderWorkspaces()` themselves. Note:
+   * `renderWorkspaces()` does not feed back into `saveTerminalLayout()`, so
+   * there is no recursion.
+   */
   saveTerminalLayout() {
+    // Flush live pane state into _tabGroups[*].panes synchronously so the
+    // sidebar indicator (which reads from _tabGroups) is fresh — the
+    // server PUT below stays debounced.
+    this.saveCurrentGroupPanes();
+    if (typeof this.renderWorkspaces === 'function') {
+      this.renderWorkspaces();
+    }
     clearTimeout(this._layoutSaveTimer);
     this._layoutSaveTimer = setTimeout(async () => {
       this.saveCurrentGroupPanes();

package/src/web/public/index.html

@@ -1749,6 +1749,7 @@
   <script src="vendor/xterm-addon-fit/xterm-addon-fit.min.js"></script>
   <script src="vendor/xterm-addon-web-links/xterm-addon-web-links.min.js"></script>
   <script src="terminal.js"></script>
+  <script src="instance-colors.js"></script>
   <script src="app.js"></script>
   <script src="schedules.js"></script>
   <script>

package/src/web/public/instance-colors.js

@@ -0,0 +1,49 @@
+/* ═══════════════════════════════════════════════════════════════
+   Instance-color helpers for the session indicator.
+   Pure functions over tab data; no DOM dependencies.
+   Loaded as a browser <script> AND requireable from Node tests.
+   SPDX-License-Identifier: AGPL-3.0-only
+   ═══════════════════════════════════════════════════════════════ */
+
+(function (root, factory) {
+  if (typeof module === 'object' && module.exports) {
+    module.exports = factory();
+  } else {
+    root.InstanceColors = factory();
+  }
+})(typeof self !== 'undefined' ? self : this, function () {
+  'use strict';
+
+  const TAB_COLORS = ['red', 'yellow', 'green', 'teal', 'blue', 'mauve'];
+
+  /**
+   * Return one entry per place sessionId is currently open across all tab groups.
+   * @param {string} sessionId
+   * @param {Array<{id:string, panes:Array<{slot:number,sessionId:string}>}>} tabGroups
+   * @returns {Array<{tabId:string, slot:number}>}
+   */
+  function getSessionInstances(sessionId, tabGroups) {
+    const out = [];
+    if (!sessionId || !Array.isArray(tabGroups)) return out;
+    for (const tab of tabGroups) {
+      const panes = (tab && tab.panes) || [];
+      for (const p of panes) {
+        if (p && p.sessionId === sessionId) {
+          out.push({ tabId: tab.id, slot: p.slot });
+        }
+      }
+    }
+    return out;
+  }
+
+  /**
+   * Return the tab's positional colour. Index is the tab's global position
+   * across all tab groups (regardless of folder), wrapping modulo the palette.
+   */
+  function getTabColor(tabId, tabGroups) {
+    const idx = (tabGroups || []).findIndex(g => g.id === tabId);
+    return TAB_COLORS[(idx >= 0 ? idx : 0) % TAB_COLORS.length];
+  }
+
+  return { TAB_COLORS, getSessionInstances, getTabColor };
+});

package/src/web/public/styles.css

@@ -1290,7 +1290,7 @@ textarea.input {
   flex-wrap: wrap;
   align-items: center;
   gap: 4px 6px;
-  padding: 5px 10px 5px 34px;
+  padding: 5px 10px 5px 24px;
   border-radius: var(--radius-sm);
   cursor: pointer;
   transition: background var(--transition-fast);
@@ -5197,19 +5197,67 @@ html.pane-colors-enabled .terminal-pane:not(.terminal-pane-empty)[data-slot="5"]
   border-left: 3px solid var(--pink);
 }
 
-/* ─── Sidebar Pane Color Pip ───────────────────────────── */
-.pane-color-pip {
+/* ─── Sidebar Session Instance Indicator ───────────────── */
+.instance-indicator-row {
+  display: inline-flex;
+  gap: 0;                /* per-pip 2px padding provides spacing */
+  margin-left: 4px;
+  flex-shrink: 0;
+}
+.instance-indicator {
+  padding: 2px;          /* invisible 2px hit-area extension; also growth room */
+  cursor: pointer;
   display: inline-block;
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
+  line-height: 0;
   flex-shrink: 0;
-  margin-left: 2px;
 }
-html:not(.pane-colors-enabled) .pane-color-pip {
+.instance-indicator-square {
+  width: 10px;
+  height: 10px;
+  border-radius: 1px;
+  background: var(--c-outer);
+  position: relative;
+  overflow: hidden;
+  display: inline-block;
+  transition: transform 120ms ease, box-shadow 120ms ease;
+  transform-origin: center center;
+}
+.instance-indicator:hover .instance-indicator-square {
+  transform: scale(1.1);
+}
+/* Hover ring around the visible square — disabled for now.
+.instance-indicator:hover .instance-indicator-square {
+  box-shadow: 0 0 0 1.5px var(--c-outer);
+}
+*/
+.instance-indicator-inner {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 7px;
+  background: var(--c-inner);
+  border-top: 1px solid #000;
+  box-sizing: border-box;
+}
+html:not(.pane-colors-enabled) .instance-indicator-row {
   display: none;
 }
 
+/* Pane pulse — short flash when navigating from a sidebar pip */
+@keyframes pane-nav-pulse {
+  0%   { background-color: rgba(205, 214, 244, 0.05); box-shadow: inset 0 0 0 3px var(--text), 0 0 16px rgba(205, 214, 244, 0.4); }
+  100% { background-color: transparent; box-shadow: inset 0 0 0 0 transparent, 0 0 0 transparent; }
+}
+.pane-nav-pulse::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9999;
+  animation: pane-nav-pulse 700ms ease-out forwards;
+}
+
 /* ─── Tri-State Dots (Worktree Tasks) ─────────────────── */
 .ws-session-dot[data-tristate="busy"] {
   animation: tristate-pulse 1.5s ease-in-out infinite;
@@ -5461,11 +5509,24 @@ html.activity-indicators-disabled .terminal-pane-activity {
   transition: all var(--transition-fast);
   position: relative;
   /* Touch: let DragDropTouch polyfill handle long-press-to-drag without the
-     browser claiming the gesture for the scrollable tab strip. 
+     browser claiming the gesture for the scrollable tab strip.
   */
   touch-action: none;
 }
 
+.terminal-group-tab::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  bottom: 2px;
+  transform: translateX(-50%);
+  width: 85%;
+  height: 2px;
+  border-radius: 2px;
+  background: var(--tab-color);
+  pointer-events: none;
+}
+
 .terminal-group-tab:hover {
   color: var(--text);
   background: var(--surface0);
@@ -5480,12 +5541,16 @@ html.activity-indicators-disabled .terminal-pane-activity {
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: var(--green);
+  background: var(--tab-color);
   flex-shrink: 0;
 }
 
 .terminal-group-tab-dot.inactive {
-  background: var(--surface2);
+  opacity: 0.4;
+}
+
+.terminal-group-tab-name {
+  color: var(--tab-color);
 }
 
 .terminal-group-tab-count {