myrlin-workbook 0.3.1 → 0.4.0

package/README.md

@@ -1,12 +1,17 @@
-# Myrlin Workbook
-
-[![License: AGPL-3.0](https://img.shields.io/badge/License-AGPL--3.0-blue.svg)](LICENSE)
-[![npm](https://img.shields.io/npm/v/myrlin-workbook.svg)](https://www.npmjs.com/package/myrlin-workbook)
-[![Node](https://img.shields.io/badge/Node.js-18%2B-green.svg)](https://nodejs.org)
-[![Platform](https://img.shields.io/badge/Platform-Windows%20%7C%20macOS%20%7C%20Linux-lightgrey.svg)]()
-[![Tests](https://img.shields.io/badge/Tests-26%20passing-brightgreen.svg)]()
+<p align="center">
+  <img src="docs/images/logo.png" alt="Myrlin's Workbook" width="250">
+</p>
+<h1 align="center">Myrlin's Workbook</h1>
+<p align="center">
+  <a href="https://www.npmjs.com/package/myrlin-workbook"><img src="https://img.shields.io/npm/v/myrlin-workbook.svg?style=flat-square" alt="npm version"></a>
+  <a href="https://www.npmjs.com/package/myrlin-workbook"><img src="https://img.shields.io/npm/dm/myrlin-workbook.svg?style=flat-square" alt="npm downloads"></a>
+  <a href="LICENSE"><img src="https://img.shields.io/badge/License-AGPL--3.0-blue.svg?style=flat-square" alt="License: AGPL-3.0"></a>
+  <a href="https://nodejs.org"><img src="https://img.shields.io/badge/Node.js-18%2B-green.svg?style=flat-square" alt="Node.js 18+"></a>
+</p>
 
-Open-source workspace manager for Claude Code - cost tracking, conflict detection, 4-pane embedded terminals, per-workspace docs & kanban, session templates, session manager overlay, costs dashboard, 8 themes, [and more](#full-feature-list). Discovers every session you've ever run, organizes them into workspaces. Runs in your browser, everything stays local.
+<p align="center">
+Open-source workspace manager for Claude Code - cost tracking, conflict detection, 4-pane embedded terminals, per-workspace docs & kanban, session templates, costs dashboard, 13 themes, <a href="#full-feature-list">and more</a>. Discovers every session you've ever run, organizes them into workspaces. Runs in your browser, everything stays local.
+</p>
 
 <p align="center">
   <img src="docs/images/hero-demo.gif" alt="4-pane terminal grid with live sessions" width="800">
@@ -87,7 +92,7 @@ There are good tools in this space. I tried them. Here's where Myrlin fits:
 | Session discovery | Yes | Yes | No | No |
 | Session manager overlay | Yes | No | No | No |
 | Workspace docs/kanban | Yes | No | No | No |
-| Themes | 8 (Catppuccin + fun flavors) | No | No | No |
+| Themes | 13 (Catppuccin, Nord, Dracula, etc.) | No | No | No |
 | Session templates | Yes | No | No | No |
 | Conflict detection | Yes | No | No | No |
 | Embedded terminals | 4-pane grid | Single | No | No |
@@ -174,7 +179,7 @@ Real-time warnings when two or more running sessions are editing the same files.
 
 ![Theme switching in action](docs/images/theme-switching.gif)
 
-8 themes: 4 classic [Catppuccin](https://github.com/catppuccin/catppuccin) (Mocha, Macchiato, Frappe, Latte) plus 4 fun flavors - Cherry (rose), Ocean (navy), Amber (gold), and Mint (jade). Toggle from the header dropdown. Choice persists in localStorage.
+13 themes organized into Dark and Light sections. 4 official [Catppuccin](https://github.com/catppuccin/catppuccin) (Mocha, Macchiato, Frappe, Latte), 3 community favorites (Nord, Dracula, Tokyo Night), 4 custom flavors (Cherry, Ocean, Amber, Mint), and 2 light alternatives (Rose Pine Dawn, Gruvbox Light). Toggle from the header dropdown. Choice persists in localStorage.
 
 ### Port Detection & Resource Monitoring
 
@@ -260,7 +265,7 @@ A comprehensive list of everything Myrlin Workbook offers today.
 
 ### Themes
 
-- **8 themes** - 4 Catppuccin (Mocha, Macchiato, Frappe, Latte) + 4 fun flavors (Cherry, Ocean, Amber, Mint)
+- **13 themes** - 4 Catppuccin (Mocha, Macchiato, Frappe, Latte) + Nord, Dracula, Tokyo Night + Cherry, Ocean, Amber, Mint + Rose Pine Dawn, Gruvbox Light
 - **Header dropdown toggle** - choice persists in localStorage
 
 ### Resources & Monitoring

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myrlin-workbook",
-  "version": "0.3.1",
+  "version": "0.4.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/gui.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 /**
  * Claude Workspace Manager - GUI Entry Point
  *

package/src/web/public/app.js

@@ -2299,7 +2299,7 @@ class CWMApp {
   // Legacy alias for any remaining callers
   toggleTheme() {
     const current = document.documentElement.dataset.theme || 'mocha';
-    const themes = ['mocha', 'macchiato', 'frappe', 'latte', 'cherry', 'ocean', 'amber', 'mint'];
+    const themes = ['mocha', 'macchiato', 'frappe', 'nord', 'dracula', 'tokyo-night', 'cherry', 'ocean', 'amber', 'mint', 'latte', 'rose-pine-dawn', 'gruvbox-light'];
     const next = themes[(themes.indexOf(current) + 1) % themes.length];
     this.setTheme(next);
   }

package/src/web/public/index.html

@@ -17,7 +17,7 @@
   <script>
     (function() {
       var t = localStorage.getItem('cwm_theme');
-      if (['latte','frappe','macchiato'].includes(t)) document.documentElement.dataset.theme = t;
+      if (['latte','frappe','macchiato','cherry','ocean','amber','mint','nord','dracula','tokyo-night','rose-pine-dawn','gruvbox-light'].includes(t)) document.documentElement.dataset.theme = t;
       var s = parseFloat(localStorage.getItem('cwm_ui_scale'));
       if (s && s >= 0.85 && s <= 1.2) {
         document.documentElement.style.setProperty('--ui-scale', s);
@@ -92,8 +92,8 @@
           </svg>
         </button>
         <div class="header-brand">
-          <img src="logo.png" alt="myrlin" class="header-logo-img">
-          <span class="header-title">myrlin's workbook</span>
+          <img src="logo.png" alt="Myrlin" class="header-logo-img">
+          <span class="header-title">Myrlin's Workbook</span>
         </div>
       </div>
 
@@ -156,14 +156,21 @@
             </svg>
           </button>
           <div class="theme-dropdown" id="theme-dropdown" hidden>
-            <button class="theme-option" data-theme="mocha"><span class="theme-swatch" style="background:#1e1e2e"></span>Mocha</button>
-            <button class="theme-option" data-theme="macchiato"><span class="theme-swatch" style="background:#24273a"></span>Macchiato</button>
-            <button class="theme-option" data-theme="frappe"><span class="theme-swatch" style="background:#303446"></span>Frapp&eacute;</button>
-            <button class="theme-option" data-theme="latte"><span class="theme-swatch" style="background:#eff1f5;border:1px solid #ccd0da"></span>Latte</button>
+            <div class="theme-dropdown-section">Dark</div>
+            <button class="theme-option" data-theme="mocha"><span class="theme-swatch" style="background:#1e1e2e"></span>Mocha<span class="theme-catppuccin-badge" title="Official Catppuccin">&#9733;</span></button>
+            <button class="theme-option" data-theme="macchiato"><span class="theme-swatch" style="background:#24273a"></span>Macchiato<span class="theme-catppuccin-badge" title="Official Catppuccin">&#9733;</span></button>
+            <button class="theme-option" data-theme="frappe"><span class="theme-swatch" style="background:#303446"></span>Frapp&eacute;<span class="theme-catppuccin-badge" title="Official Catppuccin">&#9733;</span></button>
+            <button class="theme-option" data-theme="nord"><span class="theme-swatch" style="background:#2e3440"></span>Nord</button>
+            <button class="theme-option" data-theme="dracula"><span class="theme-swatch" style="background:#282a36"></span>Dracula</button>
+            <button class="theme-option" data-theme="tokyo-night"><span class="theme-swatch" style="background:#1a1b26"></span>Tokyo Night</button>
             <button class="theme-option" data-theme="cherry"><span class="theme-swatch" style="background:linear-gradient(135deg,#221a22,#f5a0d0)"></span>Cherry</button>
             <button class="theme-option" data-theme="ocean"><span class="theme-swatch" style="background:linear-gradient(135deg,#1a1e28,#70a8f0)"></span>Ocean</button>
             <button class="theme-option" data-theme="amber"><span class="theme-swatch" style="background:linear-gradient(135deg,#211e1a,#f0d070)"></span>Amber</button>
             <button class="theme-option" data-theme="mint"><span class="theme-swatch" style="background:linear-gradient(135deg,#1a2120,#78e0a0)"></span>Mint</button>
+            <div class="theme-dropdown-section">Light</div>
+            <button class="theme-option" data-theme="latte"><span class="theme-swatch" style="background:#eff1f5;border:1px solid #ccd0da"></span>Latte<span class="theme-catppuccin-badge" title="Official Catppuccin">&#9733;</span></button>
+            <button class="theme-option" data-theme="rose-pine-dawn"><span class="theme-swatch" style="background:#faf4ed;border:1px solid #dfdad9"></span>Rose Pine Dawn</button>
+            <button class="theme-option" data-theme="gruvbox-light"><span class="theme-swatch" style="background:#fbf1c7;border:1px solid #d5c4a1"></span>Gruvbox Light</button>
           </div>
         </div>
         <div class="scale-controls" id="scale-controls">

package/src/web/public/styles.css

@@ -634,7 +634,7 @@ textarea.input {
 .header-brand {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 8px;
   overflow: visible;
   position: relative;
   z-index: 1;
@@ -646,10 +646,9 @@ textarea.input {
 }
 
 .header-logo-img {
-  width: 52px;
-  height: 52px;
+  width: 64px;
+  height: 64px;
   object-fit: contain;
-  margin-right: 4px;
   filter: drop-shadow(0 0 10px rgba(203, 166, 247, 0.3));
   transition: filter 0.3s ease;
   pointer-events: auto;
@@ -660,10 +659,10 @@ textarea.input {
 }
 
 .header-title {
-  font-size: 15px;
+  font-size: 17px;
   font-weight: 700;
   color: var(--text-primary);
-  letter-spacing: -0.02em;
+  letter-spacing: -0.01em;
 }
 
 .header-center {
@@ -6294,3 +6293,240 @@ html {
     width: auto;
   }
 }
+
+/* ═══════════════════════════════════════════════════════════ */
+/* Theme Dropdown Section Headers + Catppuccin Badge          */
+/* ═══════════════════════════════════════════════════════════ */
+
+/* Theme dropdown section headers */
+.theme-dropdown-section {
+  padding: 4px 12px 2px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--overlay1);
+  pointer-events: none;
+  user-select: none;
+}
+.theme-dropdown-section:not(:first-child) {
+  margin-top: 4px;
+  border-top: 1px solid var(--surface0);
+  padding-top: 6px;
+}
+.theme-catppuccin-badge {
+  margin-left: auto;
+  font-size: 10px;
+  color: var(--yellow);
+  opacity: 0.7;
+}
+
+/* ═══════════════════════════════════════════════════════════ */
+/* NORD (Dark — Polar Night & Aurora)                         */
+/* ═══════════════════════════════════════════════════════════ */
+
+:root[data-theme="nord"] {
+  --base: #2e3440;
+  --mantle: #292e39;
+  --crust: #242933;
+  --surface0: #3b4252;
+  --surface1: #434c5e;
+  --surface2: #4c566a;
+  --overlay0: #616e88;
+  --overlay1: #6e7e99;
+  --text: #eceff4;
+  --subtext0: #a5b1c2;
+  --subtext1: #d8dee9;
+  --mauve: #b48ead;
+  --blue: #81a1c1;
+  --green: #a3be8c;
+  --yellow: #ebcb8b;
+  --red: #bf616a;
+  --peach: #d08770;
+  --teal: #8fbcbb;
+  --sky: #88c0d0;
+  --pink: #b48ead;
+  --lavender: #9db2cf;
+  --flamingo: #d08770;
+  --rosewater: #d8b4a0;
+  --sapphire: #5e81ac;
+  --border-subtle: rgba(67, 76, 94, 0.5);
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
+  --shadow-md: 0 4px 12px rgba(0,0,0,0.25);
+  --shadow-lg: 0 8px 30px rgba(0,0,0,0.3);
+  --shadow-xl: 0 16px 50px rgba(0,0,0,0.35);
+}
+:root[data-theme="nord"] .theme-icon-moon { display: inline; }
+:root[data-theme="nord"] .theme-icon-sun { display: none; }
+:root[data-theme="nord"] ::selection { background: rgba(129, 161, 193, 0.25); color: var(--text); }
+:root[data-theme="nord"] .stat-dot-running { background: var(--green); box-shadow: 0 0 4px rgba(163, 190, 140, 0.5); }
+:root[data-theme="nord"] .terminal-pane-empty.drag-over .terminal-container { background: rgba(129, 161, 193, 0.05); }
+:root[data-theme="nord"] .terminal-resize-handle:hover { background: rgba(129, 161, 193, 0.4); }
+
+/* ═══════════════════════════════════════════════════════════ */
+/* DRACULA (Dark — Iconic Purple & Neon)                      */
+/* ═══════════════════════════════════════════════════════════ */
+
+:root[data-theme="dracula"] {
+  --base: #282a36;
+  --mantle: #21222c;
+  --crust: #191a21;
+  --surface0: #343746;
+  --surface1: #44475a;
+  --surface2: #545768;
+  --overlay0: #6272a4;
+  --overlay1: #7283b5;
+  --text: #f8f8f2;
+  --subtext0: #b8b8b0;
+  --subtext1: #d8d8d0;
+  --mauve: #bd93f9;
+  --blue: #8be9fd;
+  --green: #50fa7b;
+  --yellow: #f1fa8c;
+  --red: #ff5555;
+  --peach: #ffb86c;
+  --teal: #8be9fd;
+  --sky: #8be9fd;
+  --pink: #ff79c6;
+  --lavender: #caa9fa;
+  --flamingo: #ff79c6;
+  --rosewater: #ffd0e0;
+  --sapphire: #6cb6ff;
+  --border-subtle: rgba(68, 71, 90, 0.5);
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
+  --shadow-md: 0 4px 12px rgba(0,0,0,0.25);
+  --shadow-lg: 0 8px 30px rgba(0,0,0,0.3);
+  --shadow-xl: 0 16px 50px rgba(0,0,0,0.35);
+}
+:root[data-theme="dracula"] .theme-icon-moon { display: inline; }
+:root[data-theme="dracula"] .theme-icon-sun { display: none; }
+:root[data-theme="dracula"] ::selection { background: rgba(189, 147, 249, 0.25); color: var(--text); }
+:root[data-theme="dracula"] .stat-dot-running { background: var(--green); box-shadow: 0 0 4px rgba(80, 250, 123, 0.5); }
+:root[data-theme="dracula"] .terminal-pane-empty.drag-over .terminal-container { background: rgba(189, 147, 249, 0.05); }
+:root[data-theme="dracula"] .terminal-resize-handle:hover { background: rgba(189, 147, 249, 0.4); }
+
+/* ═══════════════════════════════════════════════════════════ */
+/* TOKYO NIGHT (Dark — Neon City Lights)                      */
+/* ═══════════════════════════════════════════════════════════ */
+
+:root[data-theme="tokyo-night"] {
+  --base: #1a1b26;
+  --mantle: #16161e;
+  --crust: #12121a;
+  --surface0: #292e42;
+  --surface1: #3b4261;
+  --surface2: #545c7e;
+  --overlay0: #565f89;
+  --overlay1: #6b7394;
+  --text: #c0caf5;
+  --subtext0: #9aa5ce;
+  --subtext1: #a9b1d6;
+  --mauve: #bb9af7;
+  --blue: #7aa2f7;
+  --green: #9ece6a;
+  --yellow: #e0af68;
+  --red: #f7768e;
+  --peach: #ff9e64;
+  --teal: #73daca;
+  --sky: #7dcfff;
+  --pink: #ff79c6;
+  --lavender: #b4befe;
+  --flamingo: #f7768e;
+  --rosewater: #ffc0cb;
+  --sapphire: #2ac3de;
+  --border-subtle: rgba(59, 66, 97, 0.5);
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
+  --shadow-md: 0 4px 12px rgba(0,0,0,0.25);
+  --shadow-lg: 0 8px 30px rgba(0,0,0,0.3);
+  --shadow-xl: 0 16px 50px rgba(0,0,0,0.35);
+}
+:root[data-theme="tokyo-night"] .theme-icon-moon { display: inline; }
+:root[data-theme="tokyo-night"] .theme-icon-sun { display: none; }
+:root[data-theme="tokyo-night"] ::selection { background: rgba(122, 162, 247, 0.25); color: var(--text); }
+:root[data-theme="tokyo-night"] .stat-dot-running { background: var(--green); box-shadow: 0 0 4px rgba(158, 206, 106, 0.5); }
+:root[data-theme="tokyo-night"] .terminal-pane-empty.drag-over .terminal-container { background: rgba(122, 162, 247, 0.05); }
+:root[data-theme="tokyo-night"] .terminal-resize-handle:hover { background: rgba(122, 162, 247, 0.4); }
+
+/* ═══════════════════════════════════════════════════════════ */
+/* ROSE PINE DAWN (Light — Soft Warm Rose)                    */
+/* ═══════════════════════════════════════════════════════════ */
+
+:root[data-theme="rose-pine-dawn"] {
+  --base: #faf4ed;
+  --mantle: #f2e9e1;
+  --crust: #ebe0d6;
+  --surface0: #f4ede8;
+  --surface1: #dfdad9;
+  --surface2: #cecacd;
+  --overlay0: #9893a5;
+  --overlay1: #797593;
+  --text: #575279;
+  --subtext0: #6e6a86;
+  --subtext1: #635f7b;
+  --mauve: #907aa9;
+  --blue: #286983;
+  --green: #56949f;
+  --yellow: #ea9d34;
+  --red: #b4637a;
+  --peach: #d7827e;
+  --teal: #56949f;
+  --sky: #56949f;
+  --pink: #d7827e;
+  --lavender: #907aa9;
+  --flamingo: #d7827e;
+  --rosewater: #d7827e;
+  --sapphire: #286983;
+  --border-subtle: rgba(206, 202, 205, 0.5);
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.08);
+  --shadow-xl: 0 16px 50px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.1);
+}
+:root[data-theme="rose-pine-dawn"] .theme-icon-moon { display: none; }
+:root[data-theme="rose-pine-dawn"] .theme-icon-sun { display: block !important; }
+:root[data-theme="rose-pine-dawn"] ::selection { background: rgba(144, 122, 169, 0.2); color: var(--text); }
+:root[data-theme="rose-pine-dawn"] .stat-dot-running { background: var(--green); box-shadow: 0 0 4px rgba(86, 148, 159, 0.5); }
+:root[data-theme="rose-pine-dawn"] .terminal-pane-empty.drag-over .terminal-container { background: rgba(144, 122, 169, 0.05); }
+:root[data-theme="rose-pine-dawn"] .terminal-resize-handle:hover { background: rgba(144, 122, 169, 0.4); }
+
+/* ═══════════════════════════════════════════════════════════ */
+/* GRUVBOX LIGHT (Light — Warm Retro Earthy)                  */
+/* ═══════════════════════════════════════════════════════════ */
+
+:root[data-theme="gruvbox-light"] {
+  --base: #fbf1c7;
+  --mantle: #f2e5bc;
+  --crust: #ebdbb2;
+  --surface0: #d5c4a1;
+  --surface1: #bdae93;
+  --surface2: #a89984;
+  --overlay0: #928374;
+  --overlay1: #7c6f64;
+  --text: #3c3836;
+  --subtext0: #504945;
+  --subtext1: #453e3a;
+  --mauve: #8f3f71;
+  --blue: #076678;
+  --green: #79740e;
+  --yellow: #b57614;
+  --red: #9d0006;
+  --peach: #af3a03;
+  --teal: #427b58;
+  --sky: #076678;
+  --pink: #8f3f71;
+  --lavender: #8f3f71;
+  --flamingo: #af3a03;
+  --rosewater: #c8956c;
+  --sapphire: #458588;
+  --border-subtle: rgba(168, 153, 132, 0.5);
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.08);
+  --shadow-xl: 0 16px 50px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.1);
+}
+:root[data-theme="gruvbox-light"] .theme-icon-moon { display: none; }
+:root[data-theme="gruvbox-light"] .theme-icon-sun { display: block !important; }
+:root[data-theme="gruvbox-light"] ::selection { background: rgba(175, 58, 3, 0.2); color: var(--text); }
+:root[data-theme="gruvbox-light"] .stat-dot-running { background: var(--green); box-shadow: 0 0 4px rgba(121, 116, 14, 0.5); }
+:root[data-theme="gruvbox-light"] .terminal-pane-empty.drag-over .terminal-container { background: rgba(175, 58, 3, 0.05); }
+:root[data-theme="gruvbox-light"] .terminal-resize-handle:hover { background: rgba(175, 58, 3, 0.4); }

package/src/web/server.js

@@ -942,16 +942,23 @@ function decodeClaudePath(encoded) {
       let matched = false;
 
       for (let len = tokens.length - idx; len > 1; len--) {
-        const candidate = tokens.slice(idx, idx + len).join('-');
-        const candidatePath = path.join(resolved, candidate);
-        try {
-          if (fs.existsSync(candidatePath)) {
-            resolved = candidatePath;
-            idx += len;
-            matched = true;
-            break;
-          }
-        } catch (_) { /* skip */ }
+        const slice = tokens.slice(idx, idx + len);
+        // Try hyphen-joined (e.g. "claude-workspace-manager") and
+        // space-joined (e.g. "Work AI Project") since Claude encodes
+        // both path separators and spaces as dashes
+        const candidates = [slice.join('-'), slice.join(' ')];
+        for (const candidate of candidates) {
+          const candidatePath = path.join(resolved, candidate);
+          try {
+            if (fs.existsSync(candidatePath)) {
+              resolved = candidatePath;
+              idx += len;
+              matched = true;
+              break;
+            }
+          } catch (_) { /* skip */ }
+        }
+        if (matched) break;
       }
 
       if (!matched) {