clideck 1.22.2

package/public/js/color-mode.js

@@ -0,0 +1,51 @@
+import { state, send } from './state.js';
+import { applyTheme } from './profiles.js';
+
+const LIGHT_THEMES = new Set(['github-light', 'solarized-light', 'catppuccin-latte', 'one-light', 'rose-pine-dawn']);
+const DARK_DEFAULTS = new Set(['catppuccin-mocha', 'solarized-dark', 'dracula', 'default']);
+const LIGHT_DEFAULT = 'github-light';
+const DARK_DEFAULT = 'catppuccin-mocha';
+
+export function isLightTheme(id) { return LIGHT_THEMES.has(id); }
+
+function isDarkDefault(id) { return DARK_DEFAULTS.has(id); }
+
+export function getMode() {
+  return state.cfg.colorMode || 'dark';
+}
+
+export function modeDefault(mode) {
+  return mode === 'light' ? LIGHT_DEFAULT : DARK_DEFAULT;
+}
+
+export function applyMode(mode) {
+  document.documentElement.classList.toggle('light', mode === 'light');
+}
+
+export function toggleMode() {
+  // Guard: don't send config before the real config has arrived from backend
+  if (!state.cfg.commands.length) return;
+
+  const next = getMode() === 'dark' ? 'light' : 'dark';
+  state.cfg.colorMode = next;
+  applyMode(next);
+
+  const newDefault = modeDefault(next);
+  const isGoingLight = next === 'light';
+
+  // Switch terminals that are on a mode-default theme
+  for (const [id, entry] of state.terms) {
+    const shouldSwitch = isGoingLight ? isDarkDefault(entry.themeId) : isLightTheme(entry.themeId);
+    if (shouldSwitch) {
+      // Use setSessionTheme via app.js to avoid circular import
+      // setSessionTheme handles polarity detection and restart banner
+      document.dispatchEvent(new CustomEvent('clideck-theme-switch', { detail: { id, themeId: newDefault } }));
+    }
+  }
+
+  // Update default theme so new sessions follow the mode
+  const shouldSwitchDefault = isGoingLight ? isDarkDefault(state.cfg.defaultTheme) : isLightTheme(state.cfg.defaultTheme);
+  if (shouldSwitchDefault) state.cfg.defaultTheme = newDefault;
+
+  send({ type: 'config.update', config: state.cfg });
+}

package/public/js/confirm.js

@@ -0,0 +1,27 @@
+const overlay = document.getElementById('confirm-close');
+const messageEl = document.getElementById('cc-message');
+const confirmBtn = document.getElementById('cc-confirm');
+const cancelBtn = document.getElementById('cc-cancel');
+let pendingResolve = null;
+
+const DEFAULT_MSG = 'Close this session? The terminal process will be killed.';
+
+export function confirmClose(message, confirmLabel) {
+  return new Promise((resolve) => {
+    pendingResolve = resolve;
+    messageEl.textContent = message || DEFAULT_MSG;
+    confirmBtn.textContent = confirmLabel || 'Delete';
+    overlay.classList.remove('hidden');
+    overlay.classList.add('flex');
+  });
+}
+
+function close(result) {
+  overlay.classList.add('hidden');
+  overlay.classList.remove('flex');
+  if (pendingResolve) { pendingResolve(result); pendingResolve = null; }
+}
+
+confirmBtn.addEventListener('click', () => close(true));
+cancelBtn.addEventListener('click', () => close(false));
+overlay.addEventListener('click', (e) => { if (e.target === overlay) close(false); });

package/public/js/creator.js

@@ -0,0 +1,201 @@
+import { state, send } from './state.js';
+import { esc, agentIcon, binName } from './utils.js';
+import { openFolderPicker } from './folder-picker.js';
+import { estimateSize } from './terminals.js';
+
+const ADJECTIVES = [
+  'Blue', 'Red', 'Green', 'Purple', 'Golden', 'Silver', 'Coral', 'Amber',
+  'Mint', 'Crimson', 'Teal', 'Rose', 'Jade', 'Copper', 'Ivory', 'Rusty',
+];
+const ANIMALS = [
+  'Panda', 'Falcon', 'Fox', 'Wolf', 'Owl', 'Tiger', 'Bear', 'Eagle',
+  'Dolphin', 'Lynx', 'Hawk', 'Raven', 'Otter', 'Panther', 'Crane', 'Bison',
+];
+const MRU_KEY = 'termui-last-preset';
+const FOLDER_SVG = `<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>`;
+
+function randomName() {
+  const a = ADJECTIVES[Math.random() * ADJECTIVES.length | 0];
+  const b = ANIMALS[Math.random() * ANIMALS.length | 0];
+  return `${a} ${b}`;
+}
+
+function sortedPresets() {
+  const all = [...state.presets].filter(p => {
+    const cmd = state.cfg.commands.find(c =>
+      binName(c.command) === binName(p.command)
+    );
+    return !cmd || cmd.enabled !== false;
+  });
+  const shell = all.filter(p => !p.isAgent);
+  const agents = all.filter(p => p.isAgent);
+  const lastId = localStorage.getItem(MRU_KEY);
+  if (lastId) {
+    const idx = agents.findIndex(p => p.presetId === lastId);
+    if (idx > 0) agents.unshift(...agents.splice(idx, 1));
+  }
+  return [...agents, ...shell];
+}
+
+function createFromPreset(preset, sessionName, cwd, projectId) {
+  // Find existing command matching this preset
+  let cmd = state.cfg.commands.find(c =>
+    binName(c.command) === binName(preset.command)
+  );
+  // Auto-create the command if it doesn't exist yet
+  if (!cmd) {
+    cmd = {
+      id: crypto.randomUUID(),
+      label: preset.name,
+      icon: preset.icon,
+      command: preset.command,
+      enabled: true,
+      defaultPath: '',
+      isAgent: preset.isAgent,
+      canResume: preset.canResume,
+      resumeCommand: preset.resumeCommand,
+      sessionIdPattern: preset.sessionIdPattern,
+      outputMarker: preset.outputMarker || null,
+      telemetryEnabled: preset.presetId === 'claude-code',
+      telemetryStatus: preset.presetId === 'claude-code' ? { ok: true } : null,
+      bridge: preset.bridge,
+    };
+    state.cfg.commands.push(cmd);
+    send({ type: 'config.update', config: state.cfg });
+  }
+  send({ type: 'create', commandId: cmd.id, name: sessionName, cwd, projectId: projectId || undefined, ...estimateSize() });
+  localStorage.setItem(MRU_KEY, preset.presetId);
+}
+
+export function openCreator() {
+  // Toggle off if already open
+  if (document.getElementById('session-creator')) {
+    closeCreator();
+    return;
+  }
+  // Close project creator if open
+  document.getElementById('project-creator')?.remove();
+  if (!state.presets.length) return;
+
+  const fallbackName = randomName();
+  const presets = sortedPresets();
+  const defaultPath = state.cfg.defaultPath || '';
+
+  const card = document.createElement('div');
+  card.id = 'session-creator';
+  card.className = 'p-3 border-b border-slate-700/50 bg-slate-800/30';
+  card.innerHTML = `
+    ${(state.cfg.projects?.length) ? `
+    <input type="hidden" id="creator-project" value="">
+    <button type="button" id="creator-project-trigger" class="w-full px-3 py-1.5 text-xs bg-slate-900 border border-slate-700 rounded-md text-slate-400 text-left flex items-center justify-between outline-none hover:border-slate-500 transition-colors cursor-pointer mb-2">
+      <span id="creator-project-label">No project</span>
+      <span class="text-slate-600 ml-2">&#9662;</span>
+    </button>` : ''}
+    <input id="creator-name" type="text" maxlength="35" placeholder="Session / Agent name"
+      class="w-full px-3 py-2 text-sm bg-slate-900 border border-slate-700 rounded-md text-slate-200 placeholder-slate-500 outline-none focus:border-blue-500 transition-colors mb-2">
+    <div class="flex items-center gap-1.5 mb-2">
+      <input id="creator-cwd" type="text" value="${esc(defaultPath)}" placeholder="Working directory"
+        class="flex-1 px-3 py-1.5 text-xs bg-slate-900 border border-slate-700 rounded-md text-slate-400 placeholder-slate-600 outline-none focus:border-blue-500 transition-colors font-mono">
+      <button id="creator-browse" class="flex-shrink-0 w-7 h-7 flex items-center justify-center rounded-md border border-slate-700 text-slate-500 hover:text-slate-300 hover:bg-slate-700 transition-colors" title="Browse">
+        ${FOLDER_SVG}
+      </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('')}
+    </div>`;
+
+  const list = document.getElementById('session-list');
+  list.parentElement.insertBefore(card, list);
+
+  const nameInput = card.querySelector('#creator-name');
+  const cwdInput = card.querySelector('#creator-cwd');
+  nameInput.focus();
+
+  nameInput.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') closeCreator();
+  });
+  cwdInput.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') closeCreator();
+  });
+
+  card.querySelector('#creator-browse').addEventListener('click', () => {
+    openFolderPicker(cwdInput.value.trim() || defaultPath, (path) => {
+      cwdInput.value = path;
+    });
+  });
+
+  // Project picker dropdown
+  const projTrigger = card.querySelector('#creator-project-trigger');
+  if (projTrigger) {
+    let projMenuCleanup = null;
+    projTrigger.addEventListener('click', () => {
+      if (projMenuCleanup) { projMenuCleanup(); return; }
+      const rect = projTrigger.getBoundingClientRect();
+      const hidden = card.querySelector('#creator-project');
+      const label = card.querySelector('#creator-project-label');
+      const projects = state.cfg.projects || [];
+
+      const menu = document.createElement('div');
+      menu.className = 'fixed z-[500] bg-slate-800 border border-slate-600 rounded-lg shadow-xl shadow-black/40 py-1 overflow-y-auto';
+      menu.style.maxHeight = '200px';
+      menu.style.left = rect.left + 'px';
+      menu.style.top = (rect.bottom + 4) + 'px';
+      menu.style.width = rect.width + 'px';
+
+      menu.innerHTML = `
+        <div class="proj-option px-3 py-1.5 cursor-pointer hover:bg-slate-700 transition-colors text-xs text-slate-400 ${!hidden.value ? 'bg-slate-700/50' : ''}" data-value="">No project</div>
+        ${projects.map(p => `
+          <div class="proj-option flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-slate-700 transition-colors text-xs text-slate-300 ${hidden.value === p.id ? 'bg-slate-700/50' : ''}" data-value="${p.id}">
+            <span class="w-2 h-2 rounded-full flex-shrink-0" style="background:${p.color || '#3b82f6'}"></span>
+            ${esc(p.name)}
+          </div>`).join('')}`;
+
+      document.body.appendChild(menu);
+
+      const onClick = (e) => {
+        const item = e.target.closest('.proj-option');
+        if (!item) return;
+        hidden.value = item.dataset.value;
+        const proj = projects.find(p => p.id === item.dataset.value);
+        label.textContent = proj ? proj.name : 'No project';
+        // Auto-set working directory from project path
+        if (proj?.path) cwdInput.value = proj.path;
+        else cwdInput.value = defaultPath;
+        projMenuCleanup();
+      };
+      const onOutside = (e) => {
+        if (!menu.contains(e.target) && !projTrigger.contains(e.target)) projMenuCleanup();
+      };
+      menu.addEventListener('click', onClick);
+      requestAnimationFrame(() => document.addEventListener('click', onOutside));
+
+      projMenuCleanup = () => {
+        menu.removeEventListener('click', onClick);
+        document.removeEventListener('click', onOutside);
+        menu.remove();
+        projMenuCleanup = null;
+      };
+    });
+  }
+
+  card.addEventListener('click', (e) => {
+    const btn = e.target.closest('.preset-btn');
+    if (!btn) return;
+    const preset = state.presets.find(p => p.presetId === btn.dataset.preset);
+    if (!preset) return;
+    const name = nameInput.value.trim() || fallbackName;
+    const cwd = cwdInput.value.trim() || undefined;
+    const projectSelect = card.querySelector('#creator-project');
+    const projectId = projectSelect?.value || undefined;
+    createFromPreset(preset, name, cwd, projectId);
+    closeCreator();
+  });
+}
+
+export function closeCreator() {
+  document.getElementById('session-creator')?.remove();
+}

package/public/js/drag.js

@@ -0,0 +1,134 @@
+import { state, send } from './state.js';
+import { setSessionProject, regroupSessions } from './terminals.js';
+
+let dragState = null;
+
+const DRAG_THRESHOLD = 5;
+
+export function initDrag() {
+  const list = document.getElementById('session-list');
+
+  list.addEventListener('pointerdown', (e) => {
+    if (e.button !== 0) return;
+    const row = e.target.closest('.group[data-id]');
+    if (!row || e.target.closest('.menu-btn') || e.target.closest('button')) return;
+
+    const id = row.dataset.id;
+    const rect = row.getBoundingClientRect();
+    dragState = {
+      id,
+      startX: e.clientX,
+      startY: e.clientY,
+      offsetY: e.clientY - rect.top,
+      row,
+      ghost: null,
+      active: false,
+      dropTarget: null,
+      pointerId: e.pointerId,
+    };
+  });
+
+  list.addEventListener('pointermove', (e) => {
+    if (!dragState) return;
+
+    if (!dragState.active) {
+      const dx = Math.abs(e.clientX - dragState.startX);
+      const dy = Math.abs(e.clientY - dragState.startY);
+      if (dx < DRAG_THRESHOLD && dy < DRAG_THRESHOLD) return;
+      dragState.row.setPointerCapture(dragState.pointerId);
+      startDrag(dragState);
+    }
+
+    // Move ghost
+    dragState.ghost.style.top = (e.clientY - dragState.offsetY) + 'px';
+
+    // Find drop target
+    updateDropTarget(e.clientY);
+  });
+
+  list.addEventListener('pointerup', (e) => {
+    if (!dragState) return;
+    if (dragState.active) endDrag();
+    dragState = null;
+  });
+
+  list.addEventListener('pointercancel', () => {
+    if (dragState?.active) cancelDrag();
+    dragState = null;
+  });
+}
+
+function startDrag(ds) {
+  ds.active = true;
+  ds.row.style.opacity = '0.3';
+
+  // Create ghost
+  const ghost = ds.row.cloneNode(true);
+  ghost.className = ds.row.className + ' fixed z-[500] pointer-events-none shadow-xl shadow-black/50 bg-slate-800 border border-slate-600 rounded-lg w-[320px]';
+  ghost.style.top = (ds.startY - ds.offsetY) + 'px';
+  ghost.style.left = ds.row.getBoundingClientRect().left + 'px';
+  ghost.style.width = ds.row.offsetWidth + 'px';
+  ghost.style.transition = 'none';
+  document.body.appendChild(ghost);
+  ds.ghost = ghost;
+
+  // Add drop indicators
+  document.querySelectorAll('.project-header').forEach(h => {
+    h.classList.add('drop-zone');
+  });
+}
+
+function updateDropTarget(clientY) {
+  // Clear previous
+  document.querySelectorAll('.drop-highlight').forEach(el => el.classList.remove('drop-highlight'));
+  dragState.dropTarget = null;
+
+  // Check if hovering over a project header
+  for (const header of document.querySelectorAll('.project-header')) {
+    const rect = header.getBoundingClientRect();
+    if (clientY >= rect.top && clientY <= rect.bottom) {
+      header.classList.add('drop-highlight');
+      dragState.dropTarget = { type: 'project', projectId: header.dataset.projectId };
+      return;
+    }
+  }
+
+  // Check if above all project groups (= ungrouped area)
+  const firstGroup = document.querySelector('.project-group');
+  if (firstGroup) {
+    const rect = firstGroup.getBoundingClientRect();
+    if (clientY < rect.top) {
+      dragState.dropTarget = { type: 'ungrouped' };
+    }
+  }
+}
+
+function endDrag() {
+  const ds = dragState;
+  ds.row.style.opacity = '';
+  ds.ghost?.remove();
+  document.querySelectorAll('.drop-highlight, .drop-zone').forEach(el => {
+    el.classList.remove('drop-highlight', 'drop-zone');
+  });
+
+  if (ds.dropTarget) {
+    const entry = state.terms.get(ds.id);
+    if (!entry) return;
+
+    if (ds.dropTarget.type === 'project' && entry.projectId !== ds.dropTarget.projectId) {
+      setSessionProject(ds.id, ds.dropTarget.projectId);
+    } else if (ds.dropTarget.type === 'ungrouped' && entry.projectId) {
+      setSessionProject(ds.id, null);
+    }
+  }
+}
+
+function cancelDrag() {
+  if (dragState) {
+    dragState.row.style.opacity = '';
+    dragState.ghost?.remove();
+    document.querySelectorAll('.drop-highlight, .drop-zone').forEach(el => {
+      el.classList.remove('drop-highlight', 'drop-zone');
+    });
+  }
+}

package/public/js/folder-picker.js

@@ -0,0 +1,81 @@
+import { state, send } from './state.js';
+import { esc } from './utils.js';
+
+function isRoot(p) { return p === '/' || /^[A-Za-z]:\\$/.test(p); }
+function parentOf(p) {
+  const up = p.replace(/[\\/][^\\/]+[\\/]?$/, '');
+  if (!up) {
+    const drive = p.match(/^([A-Za-z]:)/);
+    return drive ? drive[1] + '\\' : '/';
+  }
+  return /^[A-Za-z]:$/.test(up) ? up + '\\' : up;
+}
+function joinChild(base, name) {
+  const sep = base.includes('\\') ? '\\' : '/';
+  return base.endsWith(sep) ? base + name : base + sep + name;
+}
+
+const overlay = document.getElementById('folder-picker');
+const pathBar = document.getElementById('fp-path');
+const listing = document.getElementById('fp-listing');
+const selectBtn = document.getElementById('fp-select');
+let currentPath = '';
+let pendingPath = '';
+let onSelect = null;
+
+export function openFolderPicker(startPath, callback) {
+  currentPath = '';
+  onSelect = callback;
+  overlay.classList.remove('hidden');
+  overlay.classList.add('flex');
+  navigate(startPath || state.cfg.defaultPath || '/');
+}
+
+export function closeFolderPicker() {
+  overlay.classList.add('hidden');
+  overlay.classList.remove('flex');
+  onSelect = null;
+}
+
+function navigate(path) {
+  pendingPath = path;
+  pathBar.textContent = path;
+  listing.innerHTML = '<div class="p-4 text-center text-slate-500 text-sm">Loading...</div>';
+  selectBtn.disabled = true;
+  send({ type: 'dirs.list', path });
+}
+
+export function handleDirsResponse(msg) {
+  if (overlay.classList.contains('hidden')) return;
+  if (msg.path !== pendingPath) return;
+  if (msg.error) {
+    listing.innerHTML = `<div class="p-4 text-center text-red-400 text-sm">${esc(msg.error)}</div>`;
+    return;
+  }
+  currentPath = msg.path;
+  selectBtn.disabled = false;
+  let html = '';
+  if (!isRoot(currentPath)) {
+    const parent = parentOf(currentPath);
+    html += `<div class="fp-item px-4 py-1.5 cursor-pointer hover:bg-slate-700 text-sm text-slate-400 transition-colors" data-path="${esc(parent)}">..</div>`;
+  }
+  if (msg.entries.length === 0 && !html) {
+    html = '<div class="p-4 text-center text-slate-500 text-sm">Empty directory</div>';
+  }
+  html += msg.entries.map(name =>
+    `<div class="fp-item px-4 py-1.5 cursor-pointer hover:bg-slate-700 text-sm text-slate-200 transition-colors" data-path="${esc(joinChild(currentPath, name))}">${esc(name)}</div>`
+  ).join('');
+  listing.innerHTML = html;
+}
+
+listing.addEventListener('click', (e) => {
+  const item = e.target.closest('.fp-item');
+  if (item) navigate(item.dataset.path);
+});
+
+document.getElementById('fp-select').addEventListener('click', () => {
+  if (onSelect && currentPath) onSelect(currentPath);
+  closeFolderPicker();
+});
+
+document.getElementById('fp-cancel').addEventListener('click', closeFolderPicker);

package/public/js/hotkeys.js

@@ -0,0 +1,90 @@
+// Central hotkey dispatcher — works in terminal focus and outside it.
+// Plugins register shortcuts via registerHotkey(combo, callback).
+
+import { handleTerminalKey } from './prompts.js';
+
+const registry = new Map(); // normalized combo → { pluginId, callback }
+
+// Normalize a KeyboardEvent into a canonical combo string
+function normalizeEvent(e) {
+  const parts = [];
+  if (e.ctrlKey || e.metaKey) parts.push('Ctrl');
+  if (e.altKey) parts.push('Alt');
+  if (e.shiftKey) parts.push('Shift');
+  parts.push(e.code);
+  return parts.join('+');
+}
+
+// Normalize a user-provided combo string (e.g. "Alt+Ctrl+F4" → "Ctrl+Alt+F4")
+function normalizeCombo(combo) {
+  const parts = combo.split('+').map(p => p.trim());
+  const mods = [];
+  let key = parts[parts.length - 1];
+  // Normalize key token to match e.code values
+  if (/^f\d+$/i.test(key)) key = key.toUpperCase(); // f4 → F4
+  else if (/^[a-z]$/i.test(key)) key = 'Key' + key.toUpperCase(); // k → KeyK
+  else if (/^[0-9]$/.test(key)) key = 'Digit' + key; // 1 → Digit1
+  else if (key.toLowerCase() === 'escape') key = 'Escape';
+  else if (key.toLowerCase() === 'space') key = 'Space';
+  else if (key.toLowerCase() === 'enter') key = 'Enter';
+  else if (key.toLowerCase() === 'tab') key = 'Tab';
+  for (const p of parts.slice(0, -1)) {
+    const lower = p.toLowerCase();
+    if (lower === 'ctrl' || lower === 'cmd' || lower === 'meta') mods.push('Ctrl');
+    else if (lower === 'alt') mods.push('Alt');
+    else if (lower === 'shift') mods.push('Shift');
+  }
+  // Dedupe and sort in canonical order
+  const order = ['Ctrl', 'Alt', 'Shift'];
+  const sorted = order.filter(m => mods.includes(m));
+  sorted.push(key);
+  return sorted.join('+');
+}
+
+function isInput(target) {
+  return target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
+}
+
+function dispatch(e) {
+  const combo = normalizeEvent(e);
+  const entry = registry.get(combo);
+  if (!entry) return true;
+  e.preventDefault();
+  e.stopPropagation();
+  entry.callback(e);
+  return false;
+}
+
+// Catch keys outside terminals — skip text inputs
+document.addEventListener('keydown', (e) => {
+  if (isInput(e.target)) return;
+  dispatch(e);
+}, true);
+
+export function registerHotkey(pluginId, combo, callback) {
+  const norm = normalizeCombo(combo);
+  if (registry.has(norm)) {
+    console.warn(`[hotkeys] "${norm}" already registered by ${registry.get(norm).pluginId}, ignoring ${pluginId}`);
+    return false;
+  }
+  registry.set(norm, { pluginId, callback });
+  return true;
+}
+
+export function unregisterHotkey(pluginId, combo) {
+  const norm = normalizeCombo(combo);
+  const entry = registry.get(norm);
+  if (entry && entry.pluginId === pluginId) registry.delete(norm);
+}
+
+// Attach to an xterm terminal instance — xterm's hidden textarea is an input,
+// so we bypass the isInput check and dispatch directly.
+// Prompt autocomplete (// trigger) runs first, then hotkey dispatch.
+export function attachToTerminal(term) {
+  term.attachCustomKeyEventHandler((e) => {
+    const promptResult = handleTerminalKey(e);
+    if (promptResult === false) return false;
+    if (e.type !== 'keydown') return true;
+    return dispatch(e);
+  });
+}

package/public/js/nav.js

@@ -0,0 +1,56 @@
+import { closeThemeMenu } from './settings.js';
+import { closeDropdown } from './prompts.js';
+
+const ALL_PANELS = ['chats', 'prompts', 'plugins', 'settings'];
+const PANEL_TITLES = { chats: 'Sessions', prompts: 'Prompts', plugins: 'Plugins', settings: 'Settings' };
+const ACTIVE = ['text-slate-200', 'bg-slate-800'];
+const INACTIVE = ['text-slate-500', 'hover:text-slate-300', 'hover:bg-slate-800/50'];
+
+function setRailActive(id) {
+  document.querySelectorAll('#nav-rail .rail-btn').forEach(btn => {
+    const match = (btn.dataset.panel === id) || (btn.id === 'rail-settings' && id === 'settings');
+    ACTIVE.forEach(c => btn.classList.toggle(c, match));
+    INACTIVE.forEach(c => btn.classList.toggle(c, !match));
+  });
+}
+
+function hideAllPanels() {
+  ALL_PANELS.forEach(id => {
+    const el = document.getElementById(`panel-${id}`);
+    if (el) { el.classList.add('hidden'); el.classList.remove('flex'); }
+  });
+}
+
+function showSettings() {
+  hideAllPanels();
+  document.getElementById('panel-settings').classList.remove('hidden');
+  document.getElementById('panel-settings').classList.add('flex');
+  document.getElementById('settings-overlay').classList.remove('hidden');
+  document.getElementById('btn-new').classList.add('opacity-30', 'pointer-events-none');
+  setRailActive('settings');
+  document.title = 'CliDeck — Settings';
+}
+
+function hideSettings() {
+  closeThemeMenu();
+  document.getElementById('settings-overlay').classList.add('hidden');
+  document.getElementById('btn-new').classList.remove('opacity-30', 'pointer-events-none');
+}
+
+export function switchPanel(panelId) {
+  hideSettings();
+  hideAllPanels();
+  document.getElementById('session-creator')?.remove();
+  const el = document.getElementById(`panel-${panelId}`);
+  if (el) { el.classList.remove('hidden'); el.classList.add('flex'); }
+  setRailActive(panelId);
+  document.title = 'CliDeck — ' + (PANEL_TITLES[panelId] || 'CliDeck');
+}
+
+document.getElementById('nav-rail').addEventListener('click', (e) => {
+  const btn = e.target.closest('.rail-btn');
+  if (!btn) return;
+  closeDropdown();
+  if (btn.id === 'rail-settings') showSettings();
+  else if (btn.dataset.panel) switchPanel(btn.dataset.panel);
+});

package/public/js/profiles.js

@@ -0,0 +1,22 @@
+import { state } from './state.js';
+
+const FALLBACK = { background: '#1e1e2e', foreground: '#cdd6f4' };
+
+export function resolveTheme(themeId) {
+  return state.themes.find(t => t.id === themeId)?.theme || FALLBACK;
+}
+
+export function resolveAccent(themeId) {
+  return state.themes.find(t => t.id === themeId)?.accent || '#89b4fa';
+}
+
+export function applyTheme(term, themeId) {
+  term.options.theme = resolveTheme(themeId);
+}
+
+export function themePreviewColors(themeId) {
+  const preset = state.themes.find(t => t.id === themeId);
+  if (!preset) return [];
+  const t = preset.theme;
+  return [t.background, t.foreground, t.red, t.green, t.yellow, t.blue, t.magenta, t.cyan];
+}