clideck 1.22.3 → 1.22.5

package/agent-presets.json

@@ -4,6 +4,7 @@
     "name": "Claude Code",
     "icon": "/img/claude-code.png",
     "command": "claude",
+    "installCmd": "npm install -g @anthropic-ai/claude-code",
     "isAgent": true,
     "canResume": true,
     "resumeCommand": "claude --resume {{sessionId}}",
@@ -23,6 +24,7 @@
     "name": "Codex",
     "icon": "/img/codex.png",
     "command": "codex --no-alt-screen",
+    "installCmd": "npm install -g @openai/codex",
     "isAgent": true,
     "canResume": true,
     "resumeCommand": "codex resume {{sessionId}} --no-alt-screen",
@@ -45,6 +47,7 @@
     "name": "Gemini CLI",
     "icon": "/img/gemini.png",
     "command": "gemini",
+    "installCmd": "npm install -g @google/gemini-cli",
     "isAgent": true,
     "canResume": true,
     "resumeCommand": "gemini --resume {{sessionId}}",
@@ -67,6 +70,7 @@
     "name": "OpenCode",
     "icon": "/img/opencode.png",
     "command": "opencode",
+    "installCmd": "npm install -g opencode-ai",
     "isAgent": true,
     "canResume": true,
     "resumeCommand": "opencode --session {{sessionId}}",

package/handlers.js

@@ -1,5 +1,6 @@
 const { readFileSync, writeFileSync, mkdirSync, existsSync, copyFileSync, unlinkSync } = require('fs');
 const { join, dirname } = require('path');
+const { execFileSync } = require('child_process');
 const os = require('os');
 const config = require('./config');
 const sessions = require('./sessions');
@@ -10,6 +11,17 @@ for (const p of presets) if (p.presetId === 'shell') p.command = defaultShell;
 const transcript = require('./transcript');
 const plugins = require('./plugin-loader');
 
+// Check which agent binaries are available on PATH
+const whichCmd = process.platform === 'win32' ? 'where' : 'which';
+function checkAvailability() {
+  for (const p of presets) {
+    if (p.presetId === 'shell') { p.available = true; continue; }
+    try { execFileSync(whichCmd, [binName(p.command)], { stdio: 'ignore' }); p.available = true; }
+    catch { p.available = false; }
+  }
+}
+checkAvailability();
+
 let cfg = config.load();
 if (detectTelemetryConfig(cfg)) config.save(cfg);
 
@@ -80,6 +92,11 @@ function onConnection(ws) {
         ws.send(JSON.stringify({ type: 'config', config: cfg }));
         break;
 
+      case 'checkAvailability':
+        checkAvailability();
+        ws.send(JSON.stringify({ type: 'presets', presets }));
+        break;
+
       case 'config.update':
         cfg = { ...cfg, ...msg.config };
         detectTelemetryConfig(cfg);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clideck",
-  "version": "1.22.3",
+  "version": "1.22.5",
   "description": "One screen for all your AI coding agents — run, monitor, and manage multiple CLI agents from a single browser tab",
   "main": "server.js",
   "bin": {

package/public/index.html

@@ -6,6 +6,45 @@
   <link rel="icon" type="image/png" href="/img/clideck-logo-icon.png">
   <link rel="stylesheet" href="/xterm.css">
   <link rel="stylesheet" href="/tailwind.css">
+  <style>
+    :root {
+      --color-project-header-bg: #191c21;
+      --color-unread-pill-bg: rgba(59, 130, 246, 0.15);
+      --color-filter-unread-bg: transparent;
+      --color-list-row-hover: color-mix(in srgb, var(--color-chat-hover) 55%, transparent);
+      --color-list-row-active: var(--color-chat-active);
+      --color-session-icon-bg: #242626;
+    }
+    .light {
+      --color-project-header-bg: #f6f5f5;
+      --color-unread-pill-bg: #f6f5f5;
+      --color-filter-unread-bg: #f6f5f5;
+      --color-session-icon-bg: #f7f5f3;
+    }
+    .session-row,
+    .resumable-row {
+      margin: 2px 8px;
+      border-radius: 10px;
+      transition: background-color 0.18s ease;
+    }
+    .session-row:hover,
+    .resumable-row:hover {
+      background: var(--color-list-row-hover) !important;
+    }
+    .session-row.active-session {
+      background: var(--color-list-row-active) !important;
+    }
+    .project-group {
+      margin: 8px 0 4px;
+    }
+    .project-group:first-child {
+      margin-top: 4px;
+    }
+    .project-header {
+      margin: 0 8px 4px;
+      border-radius: 10px;
+    }
+  </style>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@700&display=swap" rel="stylesheet">
@@ -58,9 +97,9 @@
         </div>
         <div class="flex bg-slate-800/30 rounded-lg p-[3px]">
           <button class="filter-tab flex-1 text-[11px] font-medium py-[5px] rounded-md transition-all bg-slate-700/60 text-slate-200" data-tab="all">All</button>
-          <button class="filter-tab flex-1 text-[11px] font-medium py-[5px] rounded-md transition-all text-slate-500 hover:text-slate-400 flex items-center justify-center gap-1" data-tab="unread">
+          <button class="filter-tab flex-1 text-[11px] font-medium py-[5px] rounded-md transition-all text-slate-500 hover:text-slate-400 flex items-center justify-center gap-1" data-tab="unread" style="background:var(--color-filter-unread-bg)">
             Unread
-            <span id="unread-badge" class="hidden min-w-[16px] h-4 px-1 rounded-full bg-blue-500/15 text-blue-400 text-[10px] font-semibold inline-flex items-center justify-center">0</span>
+            <span id="unread-badge" class="hidden min-w-[16px] h-4 px-1 rounded-full text-blue-400 text-[10px] font-semibold inline-flex items-center justify-center" style="background:var(--color-unread-pill-bg)">0</span>
           </button>
         </div>
       </div>

package/public/js/app.js

@@ -2,7 +2,7 @@ import { state, send } from './state.js';
 import { esc, binName } from './utils.js';
 import { addTerminal, removeTerminal, select, startRename, startProjectRename, setSessionTheme, openMenu, closeMenu, setStatus, updateMuteIndicator, updatePreview, markUnread, applyFilter, setTab, renderResumable, regroupSessions, toggleProjectCollapse, setSessionProject, estimateSize, restartComplete, positionMenu } from './terminals.js';
 import { renderSettings } from './settings.js';
-import { openCreator, closeCreator } from './creator.js';
+import { openCreator, closeCreator, refreshCreator } from './creator.js';
 import { handleDirsResponse, openFolderPicker } from './folder-picker.js';
 import { confirmClose } from './confirm.js';
 import { applyTheme } from './profiles.js';
@@ -42,6 +42,7 @@ function connect() {
       case 'presets':
         state.presets = msg.presets;
         renderSettings();
+        refreshCreator();
         break;
       case 'sessions.resumable':
         state.resumable = msg.list;
@@ -295,7 +296,10 @@ function showModeToast() {
   });
 }
 
-document.getElementById('btn-new').addEventListener('click', openCreator);
+document.getElementById('btn-new').addEventListener('click', () => {
+  send({ type: 'checkAvailability' });
+  openCreator();
+});
 document.getElementById('btn-new-project').addEventListener('click', () => {
   closeCreator();
   openProjectCreator();
@@ -385,6 +389,18 @@ function showTelemetrySetup(commandId, sessionId) {
 
 // --- Project context menu ---
 let projectMenuCleanup = null;
+
+function resumeDormantSessions(ids, label) {
+  const uniqueIds = [...new Set(ids)].filter(Boolean);
+  if (!uniqueIds.length) return;
+  showToast(`Starting ${uniqueIds.length} dormant session${uniqueIds.length > 1 ? 's' : ''}${label ? ` from ${label}` : ''}…`, { duration: 3000 });
+  uniqueIds.forEach((id, index) => {
+    setTimeout(() => {
+      if (state.resumable.some(s => s.id === id)) send({ type: 'session.resume', id });
+    }, index * 1000);
+  });
+}
+
 function openProjectMenu(projectId, anchorEl) {
   if (projectMenuCleanup) projectMenuCleanup();
   const proj = (state.cfg.projects || []).find(p => p.id === projectId);
@@ -407,6 +423,10 @@ function openProjectMenu(projectId, anchorEl) {
       <svg class="w-4 h-4 flex-shrink-0 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path d="M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg>
       Rename
     </button>
+    <button class="pm-action flex items-center gap-2 w-full px-3 py-2 text-sm ${hasDormant ? 'text-slate-300 hover:bg-slate-700 cursor-pointer' : 'text-slate-600 cursor-default'} transition-colors text-left" data-action="start-dormant" ${hasDormant ? '' : 'disabled'}>
+      <svg class="w-4 h-4 flex-shrink-0 ${hasDormant ? 'text-slate-400' : 'text-slate-600'}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="7 5 19 12 7 19 7 5"/></svg>
+      Start all dormant sessions
+    </button>
     <button class="pm-action flex items-center gap-2 w-full px-3 py-2 text-sm ${hasDormant ? 'text-slate-300 hover:bg-slate-700 cursor-pointer' : 'text-slate-600 cursor-default'} transition-colors text-left" data-action="clear-dormant" ${hasDormant ? '' : 'disabled'}>
       <svg class="w-4 h-4 flex-shrink-0 ${hasDormant ? 'text-slate-400' : 'text-slate-600'}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 4H8l-7 8 7 8h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"/><line x1="18" y1="9" x2="12" y2="15"/><line x1="12" y1="9" x2="18" y2="15"/></svg>
       Clear dormant sessions
@@ -433,6 +453,13 @@ function openProjectMenu(projectId, anchorEl) {
       startProjectRename(projectId);
       return;
     }
+    if (btn.dataset.action === 'start-dormant') {
+      const ids = [...document.querySelectorAll(`.project-group[data-project-id="${projectId}"] .project-sessions [data-resumable-id]`)]
+        .map(el => el.dataset.resumableId);
+      if (!ids.length) return;
+      resumeDormantSessions(ids, `"${proj?.name || 'project'}"`);
+      return;
+    }
     if (btn.dataset.action === 'clear-dormant') {
       const ids = state.resumable.filter(s => s.projectId === projectId).map(s => s.id);
       if (!ids.length) return;

package/public/js/creator.js

@@ -2,6 +2,7 @@ import { state, send } from './state.js';
 import { esc, agentIcon, binName } from './utils.js';
 import { openFolderPicker } from './folder-picker.js';
 import { estimateSize } from './terminals.js';
+import { showToast } from './toast.js';
 
 const ADJECTIVES = [
   'Blue', 'Red', 'Green', 'Purple', 'Golden', 'Silver', 'Coral', 'Amber',
@@ -101,11 +102,18 @@ export function openCreator() {
       </button>
     </div>
     <div class="space-y-0.5">
-      ${presets.map(p => `
-        <button class="preset-btn w-full flex items-center gap-2.5 px-3 py-2 rounded-md hover:bg-slate-700/70 text-sm text-slate-300 transition-colors text-left" data-preset="${p.presetId}">
-          ${agentIcon(p.icon, 24)}
-          <span>${esc(p.name)}</span>
-        </button>`).join('')}
+      ${presets.map(p => {
+        const hasConfigured = state.cfg.commands.some(c => binName(c.command) === binName(p.command) && c.enabled !== false);
+        const missing = p.available === false && !hasConfigured;
+        return `
+        <button class="preset-btn w-full flex items-center gap-2.5 px-3 py-2 rounded-md hover:bg-slate-700/70 text-sm transition-colors text-left ${missing ? 'text-slate-500' : 'text-slate-300'}" data-preset="${p.presetId}">
+          <span class="${missing ? 'opacity-40' : ''}">${agentIcon(p.icon, 24)}</span>
+          <span class="flex-1 min-w-0">
+            <span>${esc(p.name)}</span>
+            ${missing ? `<span class="block text-[10px] text-slate-600 truncate">${esc(p.installCmd || 'Not installed')}</span>` : ''}
+          </span>
+        </button>`;
+      }).join('')}
     </div>`;
 
   const list = document.getElementById('session-list');
@@ -187,6 +195,14 @@ export function openCreator() {
     if (!btn) return;
     const preset = state.presets.find(p => p.presetId === btn.dataset.preset);
     if (!preset) return;
+    const hasConfigured = state.cfg.commands.some(c => binName(c.command) === binName(preset.command) && c.enabled !== false);
+    if (preset.available === false && !hasConfigured && preset.installCmd) {
+      navigator.clipboard.writeText(preset.installCmd).then(
+        () => showToast(`Install command copied: <code class="text-slate-200">${esc(preset.installCmd)}</code>`, { html: true, duration: 4000 }),
+        () => showToast(`Run: ${preset.installCmd}`, { duration: 4000 }),
+      );
+      return;
+    }
     const name = nameInput.value.trim() || fallbackName;
     const cwd = cwdInput.value.trim() || undefined;
     const projectSelect = card.querySelector('#creator-project');
@@ -196,6 +212,13 @@ export function openCreator() {
   });
 }
 
+export function refreshCreator() {
+  if (document.getElementById('session-creator')) {
+    closeCreator();
+    openCreator();
+  }
+}
+
 export function closeCreator() {
   document.getElementById('session-creator')?.remove();
 }

package/public/js/terminals.js

@@ -1,5 +1,5 @@
 import { state, send } from './state.js';
-import { esc } from './utils.js';
+import { esc, resolveIconPath } from './utils.js';
 import { resolveTheme, resolveAccent, applyTheme } from './profiles.js';
 import { attachToTerminal } from './hotkeys.js';
 import { closeDropdown } from './prompts.js';
@@ -97,7 +97,7 @@ function startBounce(container) {
 function iconHtml(commandId) {
   const icon = state.cfg.commands.find(c => c.id === commandId)?.icon || 'terminal';
   if (icon.startsWith('/'))
-    return `<img src="${esc(icon)}" class="w-5 h-5 object-contain" draggable="false">`;
+    return `<img src="${esc(resolveIconPath(icon))}" class="w-5 h-5 object-contain" draggable="false">`;
   return TERMINAL_SVG;
 }
 
@@ -290,10 +290,10 @@ export function addTerminal(id, name, themeId, commandId, projectId, muted, last
   themeId = themeId || state.cfg.defaultTheme || 'default';
 
   const item = document.createElement('div');
-  item.className = 'group flex items-center gap-2 px-2.5 py-2 cursor-pointer transition-colors select-none';
+  item.className = 'group session-row flex items-center gap-2 px-2.5 py-2 cursor-pointer transition-colors select-none';
   item.dataset.id = id;
   item.innerHTML = `
-    <div class="session-icon w-8 h-8 rounded-full bg-slate-800 flex items-center justify-center flex-shrink-0 overflow-hidden pointer-events-none">
+    <div class="session-icon w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 overflow-hidden pointer-events-none" style="background:var(--color-session-icon-bg)">
       ${iconHtml(commandId)}
     </div>
     <div class="flex-1 min-w-0 pointer-events-none">
@@ -698,7 +698,7 @@ export function regroupSessions() {
 
     const collapsed = proj.collapsed;
     header.innerHTML = `
-      <div class="group project-header flex items-center gap-1.5 px-2.5 py-1.5 cursor-pointer hover:bg-slate-800/30 transition-colors select-none" data-project-id="${proj.id}">
+      <div class="group project-header flex items-center gap-1.5 px-2.5 py-1.5 cursor-pointer hover:bg-slate-800/30 transition-colors select-none" data-project-id="${proj.id}" style="background:var(--color-project-header-bg)">
         <span class="project-chevron ${collapsed ? 'collapsed' : ''} text-slate-500">${CHEVRON_SVG}</span>
         <span class="w-2 h-2 rounded-full flex-shrink-0" style="background:${projectColor(proj)}"></span>
         <span class="project-name flex-1 text-[11px] font-semibold uppercase tracking-wider text-slate-500 truncate">${esc(proj.name)}</span>
@@ -797,7 +797,7 @@ function buildResumableRow(s) {
   row.className = 'group resumable-row flex items-center gap-2 px-2.5 py-2 cursor-pointer hover:bg-slate-800/30 transition-colors';
   row.dataset.resumableId = s.id;
   row.innerHTML = `
-    <div class="w-8 h-8 rounded-full bg-slate-800/50 flex items-center justify-center flex-shrink-0 overflow-hidden opacity-40">
+    <div class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 overflow-hidden opacity-40" style="background:var(--color-session-icon-bg)">
       ${iconHtml(s.commandId)}
     </div>
     <div class="flex-1 min-w-0">
@@ -807,7 +807,7 @@ function buildResumableRow(s) {
       </div>
       <div class="flex items-center gap-1 mt-0.5">
         <span class="flex-1 text-xs text-slate-600 truncate">${s.lastPreview ? esc(s.lastPreview) : esc(label) + (path ? ' · ' + esc(path) : '')}</span>
-        <button class="resume-btn opacity-0 group-hover:opacity-100 text-slate-600 hover:text-emerald-400 flex-shrink-0 transition-all flex items-center gap-0.5 text-[11px] font-medium" title="Resume session">
+        <button class="resume-btn opacity-60 group-hover:opacity-100 text-slate-500 hover:text-emerald-400 flex-shrink-0 transition-all flex items-center gap-0.5 text-[11px] font-medium" title="Resume session">
           Resume${RESUME_SVG}
         </button>
       </div>
@@ -875,6 +875,7 @@ export function setTab(tab) {
     const base = 'filter-tab flex-1 text-[11px] font-medium py-[5px] rounded-md transition-all';
     const extra = btn.dataset.tab === 'unread' ? ' flex items-center justify-center gap-1' : '';
     btn.className = base + extra + (active ? ' bg-slate-700/60 text-slate-200' : ' text-slate-500 hover:text-slate-400');
+    btn.style.background = !active && btn.dataset.tab === 'unread' ? 'var(--color-filter-unread-bg)' : '';
   });
   applyFilter();
 }

package/public/js/utils.js

@@ -15,10 +15,26 @@ export function debounce(fn, ms) {
 
 const TERMINAL_SVG = `<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>`;
 
+const ICON_VARIANTS = {
+  '/img/claude-code.png': { all: '/img/claude-all.png' },
+  '/img/codex.png': { dark: '/img/codex-dark.png', light: '/img/codex-light.png' },
+  '/img/gemini.png': { all: '/img/gemini-all.png' },
+  '/img/opencode.png': { all: '/img/opencode-all.png' },
+};
+
+export function resolveIconPath(icon) {
+  if (!icon || !icon.startsWith('/')) return icon;
+  const canonical = icon.replace(/-(light|dark|all)(?=\.[a-z]+$)/, '');
+  const variants = ICON_VARIANTS[canonical];
+  if (!variants) return icon;
+  const isLight = document.documentElement.classList.contains('light');
+  return (isLight ? variants.light : variants.dark) || variants.all || icon;
+}
+
 export function agentIcon(icon, px = 32) {
   const s = `width:${px}px;height:${px}px`;
   if (icon && icon.startsWith('/')) {
-    return `<img src="${esc(icon)}" style="${s}" class="rounded object-cover flex-shrink-0" alt="">`;
+    return `<img src="${esc(resolveIconPath(icon))}" style="${s}" class="rounded object-cover flex-shrink-0" alt="">`;
   }
   if (icon === 'terminal') {
     return `<div style="${s}" class="rounded bg-slate-700 flex items-center justify-center text-slate-400 flex-shrink-0">${TERMINAL_SVG}</div>`;