myrlin-workbook 0.9.26 → 0.9.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myrlin-workbook",
-  "version": "0.9.26",
+  "version": "0.9.27",
   "description": "Browser-based project manager for Claude Code sessions - session discovery, multi-terminal, cost tracking, docs, and kanban board",
   "main": "src/index.js",
   "bin": {
@@ -20,7 +20,8 @@
     "mcp:visual-qa": "node src/mcp/visual-qa.js",
     "gui:cdp": "node src/supervisor.js --cdp",
     "postinstall": "node scripts/postinstall.js",
-    "restart": "bash scripts/restart-gui.sh"
+    "restart": "bash scripts/restart-gui.sh",
+    "build:icons": "node scripts/build-lucide-bundle.mjs && node scripts/build-material-bundle.mjs"
   },
   "repository": {
     "type": "git",
@@ -46,17 +47,20 @@
   "author": "Arthur",
   "license": "AGPL-3.0-only",
   "dependencies": {
+    "@lucide/lab": "^0.1.2",
     "blessed": "^0.1.81",
     "blessed-contrib": "^4.11.0",
     "chalk": "^5.6.2",
     "chrome-remote-interface": "^0.34.0",
     "express": "^5.2.1",
+    "lucide": "^1.8.0",
     "node-pty": "^1.1.0",
     "qrcode": "^1.5.4",
     "simple-git": "^3.33.0",
     "ws": "^8.19.0"
   },
   "devDependencies": {
+    "@material-icons/svg": "^1.0.33",
     "@playwright/test": "^1.58.2",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/addon-web-links": "^0.12.0",

package/scripts/build-lucide-bundle.mjs

@@ -0,0 +1,244 @@
+#!/usr/bin/env node
+/**
+ * Build script: generates public/vendor/lucide.bundle.js
+ * Imports curated icons from `lucide` and `@lucide/lab`, converts to SVG strings,
+ * and outputs a plain JS bundle that sets window.__lucideIcons.
+ */
+
+import { readFileSync, writeFileSync, mkdirSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, resolve } from 'path';
+import vm from 'vm';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const ROOT = resolve(__dirname, '..');
+const OUT = resolve(ROOT, 'src/web/public/vendor/lucide.bundle.js');
+
+// ── Curated icon list ────────────────────────────────────────────────────────
+// Format: { category: [[kebab-name, 'lucide' | 'lab'], ...], ... }
+const ICON_CATEGORIES = {
+  'Folders & Files': [
+    ['folder',          'lucide'],
+    ['folder-open',     'lucide'],
+    ['folder-code',     'lucide'],
+    ['folder-git-2',    'lucide'],
+    ['folder-sync',     'lucide'],
+    ['folder-key',      'lucide'],
+    ['folder-search',   'lucide'],
+    ['folders',         'lucide'],
+    ['file',            'lucide'],
+    ['file-code',       'lucide'],
+    ['file-text',       'lucide'],
+    ['files',           'lucide'],
+    ['notebook',        'lucide'],
+    ['notebook-pen',    'lucide'],
+  ],
+  'Code & Dev': [
+    ['code',            'lucide'],
+    ['code-xml',        'lucide'],
+    ['square-terminal', 'lucide'],
+    ['terminal',        'lucide'],
+    ['git-branch',      'lucide'],
+    ['git-merge',       'lucide'],
+    ['git-commit-vertical', 'lucide'],
+    ['git-fork',        'lucide'],
+    ['braces',          'lucide'],
+    ['brackets',        'lucide'],
+    ['hash',            'lucide'],
+    ['variable',        'lucide'],
+  ],
+  'Infrastructure': [
+    ['database',        'lucide'],
+    ['database-zap',    'lucide'],
+    ['server',          'lucide'],
+    ['server-cog',      'lucide'],
+    ['cpu',             'lucide'],
+    ['hard-drive',      'lucide'],
+    ['network',         'lucide'],
+    ['wifi',            'lucide'],
+    ['cloud',           'lucide'],
+    ['cloud-upload',    'lucide'],
+    ['globe',           'lucide'],
+    ['layers',          'lucide'],
+  ],
+  'Apps & Tools': [
+    ['box',             'lucide'],
+    ['package',         'lucide'],
+    ['package-2',       'lucide'],
+    ['workflow',        'lucide'],
+    ['settings',        'lucide'],
+    ['settings-2',      'lucide'],
+    ['wrench',          'lucide'],
+    ['hammer',          'lucide'],
+    ['cog',             'lucide'],
+    ['tool-case',       'lucide'],
+    ['puzzle',          'lucide'],
+    ['blocks',          'lucide'],
+    ['plug',            'lucide'],
+    ['cpu',             'lucide'],
+  ],
+  'Design & Art': [
+    ['palette',         'lucide'],
+    ['brush',           'lucide'],
+    ['paintbrush',      'lucide'],
+    ['wand',            'lucide'],
+    ['wand-sparkles',   'lucide'],
+    ['sparkles',        'lucide'],
+    ['pen-tool',        'lucide'],
+    ['pencil',          'lucide'],
+    ['scissors',        'lucide'],
+    ['crop',            'lucide'],
+    ['image',           'lucide'],
+    ['camera',          'lucide'],
+  ],
+  'Learning & Science': [
+    ['book-open',       'lucide'],
+    ['book',            'lucide'],
+    ['scroll',          'lucide'],
+    ['flask-conical',   'lucide'],
+    ['flask-round',     'lucide'],
+    ['microscope',      'lucide'],
+    ['test-tube',       'lucide'],
+    ['brain',           'lucide'],
+    ['brain-circuit',   'lucide'],
+    ['atom',            'lucide'],
+    ['dna',             'lucide'],
+    ['telescope',       'lucide'],
+  ],
+  'People & Status': [
+    ['user',            'lucide'],
+    ['users',           'lucide'],
+    ['user-round',      'lucide'],
+    ['bot',             'lucide'],
+    ['rocket',          'lucide'],
+    ['star',            'lucide'],
+    ['heart',           'lucide'],
+    ['zap',             'lucide'],
+    ['shield',          'lucide'],
+    ['lock',            'lucide'],
+    ['key',             'lucide'],
+    ['flag',            'lucide'],
+    ['trophy',          'lucide'],
+    ['medal',           'lucide'],
+    ['crown',           'lucide'],
+  ],
+  'Home & Work': [
+    ['house',           'lucide'],
+    ['briefcase',       'lucide'],
+    ['building',        'lucide'],
+    ['building-2',      'lucide'],
+    ['store',           'lucide'],
+    ['landmark',        'lucide'],
+    ['map-pin',         'lucide'],
+    ['compass',         'lucide'],
+    ['map',             'lucide'],
+    ['globe-2',         'lucide'],
+    ['mountain',        'lucide'],
+  ],
+  'Media & Comms': [
+    ['monitor',         'lucide'],
+    ['laptop',          'lucide'],
+    ['smartphone',      'lucide'],
+    ['mail',            'lucide'],
+    ['message-circle',  'lucide'],
+    ['bell',            'lucide'],
+    ['phone',           'lucide'],
+    ['mic',             'lucide'],
+    ['music',           'lucide'],
+    ['headphones',      'lucide'],
+    ['video',           'lucide'],
+    ['radio',           'lucide'],
+  ],
+  'Nature & Fun': [
+    ['sun',             'lucide'],
+    ['moon',            'lucide'],
+    ['cloud-sun',       'lucide'],
+    ['flame',           'lucide'],
+    ['waves',           'lucide'],
+    ['coffee',          'lucide'],
+    ['leaf',            'lucide'],
+    ['flower',          'lucide'],
+    ['flower-2',        'lucide'],
+    ['tree-pine',       'lucide'],
+    ['trees',           'lucide'],
+    ['snail',           'lucide'],
+    ['fish',            'lucide'],
+    ['rabbit',          'lucide'],
+    ['turtle',          'lucide'],
+    ['bird',            'lucide'],
+    ['dog',             'lucide'],
+    ['cat',             'lucide'],
+  ],
+  'Lab Extras': [
+    ['owl',             'lab'],
+    ['planet',          'lab'],
+    ['bee',             'lab'],
+    ['venn',            'lab'],
+    ['copy-code',       'lab'],
+    ['grid-lines',      'lab'],
+    ['farm',            'lab'],
+    ['toolbox',         'lab'],
+    ['toolbox-2',       'lab'],
+    ['snowman',         'lab'],
+    ['mountain-snow',   'lab'],
+  ],
+};
+
+// ── SVG serializer ────────────────────────────────────────────────────────────
+function iconDataToSvg(iconData) {
+  const children = iconData.map(([tag, attrs]) => {
+    // Filter out non-SVG metadata attrs ('key' is a React/lucide internal)
+    const entries = Object.entries(attrs).filter(([k]) => k !== 'key');
+    const attrStr = entries.map(([k, v]) => `${k}="${v}"`).join(' ');
+    return `<${tag} ${attrStr}/>`;
+  }).join('');
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">${children}</svg>`;
+}
+
+// ── Main ──────────────────────────────────────────────────────────────────────
+const icons = {};    // { "folder": "<svg>...</svg>", ... }
+const categories = {}; // { "Folders & Files": ["folder", "folder-open", ...], ... }
+const skipped = [];
+
+for (const [category, entries] of Object.entries(ICON_CATEGORIES)) {
+  const catIcons = [];
+  for (const [name, pkg] of entries) {
+    // De-dup (e.g. 'cpu' appears twice in the list above)
+    if (icons[name]) { catIcons.push(name); continue; }
+
+    const iconDir = pkg === 'lab'
+      ? resolve(ROOT, `node_modules/@lucide/lab/dist/esm/icons/${name}.js`)
+      : resolve(ROOT, `node_modules/lucide/dist/esm/icons/${name}.js`);
+
+    try {
+      const src = readFileSync(iconDir, 'utf8');
+      // Extract: const <Name> = <array>;\nexport { <Name> as default }
+      // Use greedy match up to the last ";" before the export statement
+      const match = src.match(/const \w+ = ([\s\S]+?);\s*\nexport/);
+      if (!match) { skipped.push(`${name} (parse fail)`); continue; }
+      // Evaluate JS object literal (has unquoted keys, not valid JSON)
+      const iconData = vm.runInNewContext(`(${match[1]})`);
+      icons[name] = iconDataToSvg(iconData);
+      catIcons.push(name);
+    } catch {
+      skipped.push(`${name} (${pkg})`);
+    }
+  }
+  if (catIcons.length > 0) categories[category] = catIcons;
+}
+
+// ── Output ────────────────────────────────────────────────────────────────────
+mkdirSync(resolve(ROOT, 'src/web/public/vendor'), { recursive: true });
+
+const output = `/* lucide icons bundle — generated by scripts/build-lucide-bundle.mjs */
+/* Includes ${Object.keys(icons).length} icons from lucide + @lucide/lab */
+(function() {
+  window.__lucideIcons = ${JSON.stringify(icons)};
+  window.__lucideIconCategories = ${JSON.stringify(categories)};
+  document.dispatchEvent(new Event('lucide-ready'));
+})();
+`;
+
+writeFileSync(OUT, output);
+console.log(`✓ Built ${Object.keys(icons).length} icons → src/web/public/vendor/lucide.bundle.js`);
+if (skipped.length) console.log(`  Skipped (not found): ${skipped.join(', ')}`);

package/scripts/build-material-bundle.mjs

@@ -0,0 +1,108 @@
+#!/usr/bin/env node
+/**
+ * Build script: generates public/vendor/material-icons.bundle.js
+ * Includes ALL ~2191 icons from @material-icons/svg (baseline/filled variant),
+ * organized by their official categories from data.json.
+ *
+ * Icon names are stored with a "mi/" prefix when used in ws.icon so they
+ * can coexist with Lucide icon names without collision.
+ */
+
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, resolve } from 'path';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const ROOT = resolve(__dirname, '..');
+const ICONS_DIR = resolve(ROOT, 'node_modules/@material-icons/svg/svg');
+const DATA_JSON = resolve(ROOT, 'node_modules/@material-icons/svg/data.json');
+const OUT = resolve(ROOT, 'src/web/public/vendor/material-icons.bundle.js');
+
+// Official category short-name → display name
+const CATEGORY_LABELS = {
+  action:       'Action',
+  alert:        'Alert',
+  av:           'Audio & Video',
+  communication:'Communication',
+  content:      'Content',
+  device:       'Device',
+  editor:       'Editor',
+  file:         'File',
+  hardware:     'Hardware',
+  home:         'Home',
+  image:        'Image',
+  maps:         'Maps',
+  math:         'Math',
+  navigation:   'Navigation',
+  notification: 'Notification',
+  places:       'Places',
+  search:       'Search',
+  shopping:     'Shopping',
+  social:       'Social',
+  toggle:       'Toggle',
+};
+
+// ── SVG processor ─────────────────────────────────────────────────────────────
+function processSvg(raw) {
+  return raw
+    .replace(/width="24"/, 'width="14"')
+    .replace(/height="24"/, 'height="14"')
+    // Make color inherit from CSS (without this, icons always render black)
+    .replace('<svg ', '<svg fill="currentColor" ');
+}
+
+// ── Load icon metadata ────────────────────────────────────────────────────────
+const data = JSON.parse(readFileSync(DATA_JSON, 'utf8'));
+const iconMeta = data.icons; // [{ name, categories: [string], tags: [string] }]
+
+// Build category → [name] map using official categories
+const categoryMap = {}; // { 'Audio & Video': ['10k', ...], ... }
+for (const icon of iconMeta) {
+  for (const cat of (icon.categories || [])) {
+    const label = CATEGORY_LABELS[cat] || cat;
+    if (!categoryMap[label]) categoryMap[label] = [];
+    categoryMap[label].push(icon.name);
+  }
+}
+
+// ── Process all icons ─────────────────────────────────────────────────────────
+const icons = {};      // { name: '<svg>...' }
+const categories = {}; // { 'Audio & Video': ['10k', ...] }
+const skipped = [];
+
+for (const icon of iconMeta) {
+  const svgPath = resolve(ICONS_DIR, icon.name, 'baseline.svg');
+  if (!existsSync(svgPath)) {
+    skipped.push(icon.name);
+    continue;
+  }
+  try {
+    const raw = readFileSync(svgPath, 'utf8').trim();
+    icons[icon.name] = processSvg(raw);
+  } catch {
+    skipped.push(icon.name);
+  }
+}
+
+// Build final categories (only include icons that were successfully loaded)
+for (const [label, names] of Object.entries(categoryMap)) {
+  const valid = names.filter(n => icons[n]);
+  if (valid.length > 0) categories[label] = valid;
+}
+
+// ── Output ────────────────────────────────────────────────────────────────────
+mkdirSync(resolve(ROOT, 'src/web/public/vendor'), { recursive: true });
+
+const output = `/* Material Icons bundle — generated by scripts/build-material-bundle.mjs */
+/* Includes ${Object.keys(icons).length} icons from @material-icons/svg (baseline variant) */
+/* Icon names are stored as "mi/<name>" in workspace records to avoid Lucide collisions */
+(function() {
+  window.__materialIcons = ${JSON.stringify(icons)};
+  window.__materialIconCategories = ${JSON.stringify(categories)};
+  document.dispatchEvent(new Event('material-icons-ready'));
+})();
+`;
+
+writeFileSync(OUT, output);
+console.log(`✓ Built ${Object.keys(icons).length} Material icons across ${Object.keys(categories).length} categories → src/web/public/vendor/material-icons.bundle.js`);
+if (skipped.length) console.log(`  Skipped (not found): ${skipped.join(', ')}`);

package/src/state/store.js

@@ -452,7 +452,7 @@ class Store extends EventEmitter {
 
   // ─── Workspace CRUD ──────────────────────────────────────
 
-  createWorkspace({ name, description = '', color = 'cyan' }) {
+  createWorkspace({ name, description = '', color = 'cyan', icon = null }) {
     const id = crypto.randomUUID();
     const now = new Date().toISOString();
     const workspace = {
@@ -460,6 +460,7 @@ class Store extends EventEmitter {
       name,
       description,
       color,
+      icon,
       sessions: [],
       createdAt: now,
       lastActive: now,

package/src/web/public/app.js

@@ -1369,11 +1369,17 @@ class CWMApp {
       const newTaskBtn = e.target.closest('.ws-new-task-btn');
       if (newTaskBtn) { e.stopPropagation(); this.openNewTaskDialog(newTaskBtn.dataset.wsId); return; }
 
-      const renameBtn = e.target.closest('.ws-rename-btn');
-      if (renameBtn) { e.stopPropagation(); this.renameWorkspace(renameBtn.dataset.id); return; }
-
-      const deleteBtn = e.target.closest('.ws-delete-btn');
-      if (deleteBtn) { e.stopPropagation(); this.deleteWorkspace(deleteBtn.dataset.id); return; }
+      const moreBtn = e.target.closest('.ws-more-btn');
+      if (moreBtn) {
+        e.stopPropagation();
+        const wsId = moreBtn.dataset.id;
+        const rect = moreBtn.getBoundingClientRect();
+        this._renderContextItems('Workspace', [
+          { icon: '✏️', label: 'Rename', action: () => this.renameWorkspace(wsId) },
+          { icon: '🗑️', label: 'Delete', danger: true, action: () => this.deleteWorkspace(wsId) },
+        ], rect.right, rect.bottom);
+        return;
+      }
 
       const wsSessionItem = e.target.closest('.ws-session-item');
       if (wsSessionItem) {
@@ -2193,6 +2199,7 @@ class CWMApp {
         { key: 'name', label: 'Name', placeholder: 'my-project', required: true },
         { key: 'description', label: 'Description', placeholder: 'What is this project for?', type: 'textarea' },
         { key: 'color', label: 'Color', type: 'color' },
+        { key: 'icon', label: 'Icon', type: 'icon' },
       ],
       confirmText: 'Create',
       confirmClass: 'btn-primary',
@@ -2220,6 +2227,7 @@ class CWMApp {
         { key: 'name', label: 'Name', value: ws.name, required: true },
         { key: 'description', label: 'Description', value: ws.description || '', type: 'textarea' },
         { key: 'color', label: 'Color', type: 'color', value: ws.color },
+        { key: 'icon', label: 'Icon', type: 'icon', value: ws.icon || '' },
       ],
       confirmText: 'Save',
       confirmClass: 'btn-primary',
@@ -7884,6 +7892,53 @@ class CWMApp {
             </div>`;
           return;
         }
+        if (f.type === 'icon') {
+          // Merge Lucide icons (bare name) and Material icons (mi/ prefix)
+          const lucideIcons = window.__lucideIcons || {};
+          const lucideCats  = window.__lucideIconCategories || {};
+          const materialIcons = window.__materialIcons || {};
+          const materialCats  = window.__materialIconCategories || {};
+
+          const selectedIcon = f.value || '';
+          let gridHtml = `<div class="icon-swatch icon-swatch-none${!selectedIcon ? ' selected' : ''}" data-icon="" title="No icon">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4" stroke-dasharray="3 2"/></svg>
+          </div>`;
+
+          // Lucide section
+          if (Object.keys(lucideCats).length > 0) {
+            gridHtml += `<span class="icon-picker-set-sep" data-set="lucide">Lucide</span>`;
+            for (const [cat, names] of Object.entries(lucideCats)) {
+              gridHtml += `<span class="icon-picker-cat-sep" data-cat="${this.escapeHtml(cat)}">${this.escapeHtml(cat)}</span>`;
+              for (const name of names) {
+                if (!lucideIcons[name]) continue;
+                gridHtml += `<div class="icon-swatch${selectedIcon === name ? ' selected' : ''}" data-icon="${this.escapeHtml(name)}" title="${this.escapeHtml(name)}">${lucideIcons[name]}</div>`;
+              }
+            }
+          }
+
+          // Material section
+          if (Object.keys(materialCats).length > 0) {
+            gridHtml += `<span class="icon-picker-set-sep" data-set="material">Material</span>`;
+            for (const [cat, names] of Object.entries(materialCats)) {
+              gridHtml += `<span class="icon-picker-cat-sep" data-cat="${this.escapeHtml('Material — ' + cat)}">${this.escapeHtml(cat)}</span>`;
+              for (const name of names) {
+                if (!materialIcons[name]) continue;
+                const storedName = 'mi/' + name;
+                gridHtml += `<div class="icon-swatch${selectedIcon === storedName ? ' selected' : ''}" data-icon="${this.escapeHtml(storedName)}" title="${this.escapeHtml(name)}">${materialIcons[name]}</div>`;
+              }
+            }
+          }
+
+          bodyHtml += `
+            <div class="input-group">
+              <label class="input-label">${f.label} <span class="field-optional">optional</span></label>
+              <div class="icon-picker" id="modal-field-${f.key}">
+                <input type="text" class="input icon-picker-search" placeholder="Search icons..." autocomplete="off" spellcheck="false">
+                <div class="icon-picker-grid">${gridHtml}</div>
+              </div>
+            </div>`;
+          return;
+        }
         if (f.type === 'checkbox') {
           const checked = f.value ? 'checked' : '';
           bodyHtml += `
@@ -7939,6 +7994,44 @@ class CWMApp {
         });
       });
 
+      // Icon picker behavior
+      const iconPickers = this.els.modalBody.querySelectorAll('.icon-picker');
+      iconPickers.forEach(picker => {
+        const grid = picker.querySelector('.icon-picker-grid');
+        const search = picker.querySelector('.icon-picker-search');
+        // Selection
+        grid.addEventListener('click', (e) => {
+          const swatch = e.target.closest('.icon-swatch');
+          if (!swatch) return;
+          grid.querySelectorAll('.icon-swatch').forEach(s => s.classList.remove('selected'));
+          swatch.classList.add('selected');
+        });
+        // Search filter
+        if (search) {
+          search.addEventListener('input', () => {
+            const q = search.value.toLowerCase().trim();
+            grid.querySelectorAll('.icon-swatch').forEach(swatch => {
+              if (!swatch.dataset.icon) return; // "none" always visible
+              // Match against stored name (mi/folder → "folder" for search)
+              const searchable = swatch.dataset.icon.replace(/^mi\//, '').replace(/_/g, ' ');
+              swatch.hidden = !!q && !searchable.includes(q);
+            });
+            // Hide category separators when their section is empty
+            grid.querySelectorAll('.icon-picker-cat-sep, .icon-picker-set-sep').forEach(sep => {
+              if (!q) { sep.hidden = false; return; }
+              let next = sep.nextElementSibling;
+              let hasVisible = false;
+              while (next && !next.classList.contains('icon-picker-cat-sep') && !next.classList.contains('icon-picker-set-sep')) {
+                if (!next.hidden) { hasVisible = true; break; }
+                next = next.nextElementSibling;
+              }
+              sep.hidden = !hasVisible;
+            });
+          });
+          search.addEventListener('keydown', e => e.stopPropagation());
+        }
+      });
+
       // Re-enable confirm button (may have been disabled by previous modal interaction)
       this.els.modalConfirmBtn.disabled = false;
 
@@ -7951,6 +8044,9 @@ class CWMApp {
           if (f.type === 'color') {
             const selected = this.els.modalBody.querySelector(`#modal-field-${f.key} .color-swatch.selected`);
             result[f.key] = selected ? selected.dataset.color : 'mauve';
+          } else if (f.type === 'icon') {
+            const selected = this.els.modalBody.querySelector(`#modal-field-${f.key} .icon-swatch.selected`);
+            result[f.key] = (selected && selected.dataset.icon) ? selected.dataset.icon : null;
           } else if (f.type === 'checkbox') {
             const el = document.getElementById(`modal-field-${f.key}`);
             if (el) result[f.key] = el.checked;
@@ -8547,12 +8643,13 @@ class CWMApp {
           : '';
 
         // Build meta row (badges + size + time) — only if there's something to show
-        const metaParts = [badges, sizeStr ? `<span class="ws-session-size">${sizeStr}</span>` : '', timeStr ? `<span class="ws-session-time">${timeStr}</span>` : ''].filter(Boolean).join('');
+        const metaParts = [badges, sizeStr ? `<span class="ws-session-size">${sizeStr}</span>` : ''].filter(Boolean).join('');
         const metaRow = metaParts ? `<div class="ws-session-meta-row">${metaParts}</div>` : '';
+        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>
+          <span class="ws-session-name">${this.escapeHtml(name)}</span>${timeEl}
           ${metaRow}
         </div>`;
       };
@@ -8595,25 +8692,24 @@ class CWMApp {
 
       return `
         <div class="workspace-accordion${isWsHidden ? ' hidden-item' : ''}" data-id="${ws.id}">
-          <div class="workspace-item${isActive ? ' active' : ''}" data-id="${ws.id}" draggable="true">
+          <div class="workspace-item${isActive ? ' active' : ''}" data-id="${ws.id}" draggable="true" style="--ws-color: ${color}">
             <span class="ws-chevron${showBody ? ' open' : ''}">&#9654;</span>
-            <div class="workspace-color-dot" style="background: ${color}"></div>
+            ${(() => {
+              const iconSvg = ws.icon
+                ? (ws.icon.startsWith('mi/')
+                    ? window.__materialIcons?.[ws.icon.slice(3)]
+                    : window.__lucideIcons?.[ws.icon])
+                : null;
+              return iconSvg
+                ? `<span class="workspace-icon" style="color: ${color}">${iconSvg}</span>`
+                : `<div class="workspace-color-dot" style="background: ${color}"></div>`;
+            })()}
             <div class="workspace-info">
-              <div class="workspace-name">${this.escapeHtml(ws.name)}</div>
-              <div class="workspace-session-count">${sessionCount} session${sessionCount !== 1 ? 's' : ''}</div>
+              <div class="workspace-name">${this.escapeHtml(ws.name)}<span class="ws-count-badge">${sessionCount}</span></div>
             </div>
             <div class="workspace-actions">
               ${this.state.settings.enableWorktreeTasks ? `<button class="btn btn-ghost btn-icon btn-sm ws-new-task-btn" data-ws-id="${ws.id}" title="New Task">+</button>` : ''}
-              <button class="btn btn-ghost btn-icon btn-sm ws-rename-btn" data-id="${ws.id}" title="Edit">
-                <svg width="12" height="12" viewBox="0 0 14 14" fill="none">
-                  <path d="M8.5 2.5l3 3M2 9.5V12h2.5L11 5.5l-3-3L2 9.5z" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
-              </button>
-              <button class="btn btn-ghost btn-icon btn-sm btn-danger-hover ws-delete-btn" data-id="${ws.id}" title="Delete">
-                <svg width="12" height="12" viewBox="0 0 14 14" fill="none">
-                  <path d="M2.5 4h9M5 4V2.5h4V4M3.5 4v7.5a1 1 0 001 1h5a1 1 0 001-1V4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
-              </button>
+              <button class="btn btn-ghost btn-icon btn-sm ws-more-btn" data-id="${ws.id}" title="More actions">&#8230;</button>
             </div>
           </div>
           <div class="workspace-accordion-body"${showBody ? '' : ' hidden'}>

package/src/web/public/index.html

@@ -1656,6 +1656,8 @@
   <!-- Hidden file input for image uploads (reused by all terminal panes) -->
   <input type="file" id="image-upload-input" accept="image/*" hidden>
 
+  <script src="vendor/lucide.bundle.js"></script>
+  <script src="vendor/material-icons.bundle.js"></script>
   <script src="vendor/qrcode.min.js"></script>
   <script src="vendor/xterm/xterm.min.js"></script>
   <script src="vendor/xterm-addon-fit/xterm-addon-fit.min.js"></script>