claude-code-hub 0.20.1 → 0.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-hub",
-  "version": "0.20.1",
+  "version": "0.21.0",
   "description": "Unified hub for Claude Code tools — Marketplace + Kanban in one PWA",
   "main": "server.js",
   "bin": {
@@ -35,10 +35,10 @@
   },
   "homepage": "https://github.com/NikiforovAll/claude-code-hub#readme",
   "dependencies": {
-    "claude-code-cost": "^0.10.0",
-    "claude-code-kanban": "^4.14.1",
-    "claude-code-marketplace": "^0.10.0",
-    "claude-code-memory-explorer": "^0.7.0",
+    "claude-code-cost": "^0.12.0",
+    "claude-code-kanban": "^4.15.0",
+    "claude-code-marketplace": "^0.12.0",
+    "claude-code-memory-explorer": "^0.9.0",
     "express": "^4.21.0",
     "open": "^10.1.0"
   },

package/public/app.js

@@ -6,6 +6,11 @@ let allowedOrigins = new Set();
 // {theme: 'dark'|'light', colorTheme: '<id>'} — survives hub reloads so
 // late-loading iframes and fresh sessions get the last chosen theme.
 const themeState = loadThemeState();
+// {project, encoded, name} — the current project scope. Deliberately NOT persisted, unlike
+// hub-theme: starting unset means there is nothing to race against each sub-app's own
+// project self-restore on boot. Once set it never returns to null.
+let projectState = null;
+const palette = { open: false, projects: [], rows: [], sel: 0, query: '' };
 
 function loadThemeState() {
   try {
@@ -19,14 +24,92 @@ function themeMessage() {
   return { type: 'hub:theme', theme: themeState.theme, colorTheme: themeState.colorTheme };
 }
 
+// {<themeId>: {dark, light}} from /api/config, which derives it from scripts/themes.json — the same
+// registry that generates each sub-app's themes.css. Empty until config arrives, and empty if the
+// registry is unreadable; either way the palette keeps the --accent from index.html.
+let themeAccents = {};
+
+// Paints the palette — the hub's only themed surface — in the active theme. The hub relays
+// hub:theme to the sub-apps; this is what makes it apply to the hub's own chrome too.
+function applyHubTheme() {
+  // themeState.theme is unset until a sub-app pushes one, so fall back to the OS preference.
+  const mode = themeState.theme ?? (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
+  document.documentElement.classList.toggle('light', mode === 'light');
+  const pair = themeAccents[themeState.colorTheme];
+  if (pair) document.documentElement.style.setProperty('--accent', pair[mode]);
+}
+
+// Claude's on-disk project-directory name. Matches memory/server.js encodeProjectPath. The hub
+// owns this transform so cost never has to convert anything; the inverse is lossy and not needed.
+function encodeProjectPath(p) {
+  return p.replace(/\\/g, '/').replace(/:/g, '-').replace(/\//g, '-');
+}
+
+function basename(p) {
+  return p.split(/[/\\]/).filter(Boolean).pop() || p;
+}
+
+function parentOf(p) {
+  const i = Math.max(p.lastIndexOf('/'), p.lastIndexOf('\\'));
+  return i <= 0 ? '' : p.slice(0, i);
+}
+
+function projectMessage() {
+  return {
+    type: 'hub:project',
+    project: projectState.project,
+    encoded: projectState.encoded,
+    name: projectState.name,
+  };
+}
+
+function originOf(appId) {
+  return new URL(apps[appId].url).origin;
+}
+
+function postTo(appId, message) {
+  iframes[appId]?.contentWindow?.postMessage(message, originOf(appId));
+}
+
+// exceptWindow lets an echo of a sub-app's own message skip that sub-app.
+function broadcast(message, exceptWindow) {
+  for (const [id, iframe] of Object.entries(iframes)) {
+    if (exceptWindow && iframe.contentWindow === exceptWindow) continue;
+    postTo(id, message);
+  }
+}
+
+function setProject(absPath) {
+  projectState = { project: absPath, encoded: encodeProjectPath(absPath), name: basename(absPath) };
+  broadcast(projectMessage());
+}
+
+function postProjectTo(appId) {
+  if (!projectState) return;
+  postTo(appId, projectMessage());
+}
+
+// Sub-apps can't detect this themselves: inactive iframes are display:none, and a nested
+// document's visibilityState still follows the top-level tab. Used for polling/auto-refresh.
+function postActiveTo(appId) {
+  postTo(appId, { type: 'hub:active', active: appId === activeApp });
+}
+
 async function init() {
+  // Twice: light/dark comes from localStorage and shouldn't wait on the fetch, the accent can't be
+  // resolved until the registry arrives with it.
+  applyHubTheme();
   const res = await fetch('/api/config');
-  apps = (await res.json()).apps;
+  const config = await res.json();
+  apps = config.apps;
+  themeAccents = config.themeAccents ?? {};
+  applyHubTheme();
   allowedOrigins = new Set(Object.values(apps).map((a) => new URL(a.url).origin));
   buildIframes();
   switchTab(Object.keys(apps)[0]);
   listenMessages();
   listenKeys();
+  bindPalette();
   registerSW();
 }
 
@@ -50,6 +133,7 @@ function switchTab(appId) {
 
   for (const [id, iframe] of Object.entries(iframes)) {
     iframe.classList.toggle('hidden', id !== appId);
+    postActiveTo(id);
   }
 
   const overlay = document.getElementById('loading-overlay');
@@ -68,8 +152,17 @@ function onIframeLoad(appId) {
     document.getElementById('loading-overlay').classList.add('fade-out');
   }
   if (themeState.theme || themeState.colorTheme) {
-    iframes[appId].contentWindow?.postMessage(themeMessage(), new URL(apps[appId].url).origin);
+    postTo(appId, themeMessage());
   }
+  postProjectTo(appId);
+  postActiveTo(appId);
+  // Posted twice: the shims gate their origin check on window.__HUB__, which they populate from
+  // an async /hub-config fetch that resolves after this load event, so the first post can be
+  // dropped. Safe to repeat — every shim's apply is idempotent.
+  setTimeout(() => {
+    postProjectTo(appId);
+    postActiveTo(appId);
+  }, 400);
 }
 
 function listenMessages() {
@@ -81,12 +174,7 @@ function listenMessages() {
       switchTab(data.app);
       if (data.url) iframes[data.app].src = apps[data.app].url + data.url;
     } else if (data.type === 'hub:keydown') {
-      if (data.key === 'ArrowLeft') cycleTab(-1);
-      else if (data.key === 'ArrowRight') cycleTab(1);
-      else {
-        const digit = parseInt(data.key, 10);
-        if (digit >= 1 && digit <= 9) switchByIndex(digit - 1);
-      }
+      handleForwardedKey(data);
     } else if (data.type === 'hub:theme') {
       // Legacy senders pass only {theme}; colorTheme is optional and sticky.
       if (data.theme !== 'light' && data.theme !== 'dark') return;
@@ -96,14 +184,28 @@ function listenMessages() {
       themeState.theme = data.theme;
       if (hasColor) themeState.colorTheme = data.colorTheme;
       localStorage.setItem('hub-theme', JSON.stringify(themeState));
-      for (const [id, iframe] of Object.entries(iframes)) {
-        if (iframe.contentWindow === e.source) continue;
-        iframe.contentWindow?.postMessage(themeMessage(), new URL(apps[id].url).origin);
-      }
+      applyHubTheme();
+      broadcast(themeMessage(), e.source);
     }
   });
 }
 
+function handleForwardedKey(d) {
+  // The modifier fields are new. A sub-app running an older service-worker-cached bundle sends
+  // {key} only; it forwards nothing but the pre-existing bindings, and each of those is
+  // unambiguous from the key alone, so normalize instead of dispatching twice.
+  const alt = typeof d.alt === 'boolean' ? d.alt : true;
+  const ctrl = typeof d.alt === 'boolean' ? d.ctrl : d.key.startsWith('Arrow');
+  if (!alt || d.shift === true) return;
+  if (!ctrl) {
+    if (/^[1-9]$/.test(d.key)) switchByIndex(Number(d.key) - 1);
+    return;
+  }
+  if (d.key === 'ArrowLeft') cycleTab(-1);
+  else if (d.key === 'ArrowRight') cycleTab(1);
+  else if (d.key.toLowerCase() === 'p') togglePalette();
+}
+
 function cycleTab(delta) {
   const ids = Object.keys(apps);
   const idx = ids.indexOf(activeApp);
@@ -118,6 +220,15 @@ function switchByIndex(idx) {
 
 function listenKeys() {
   document.addEventListener('keydown', (e) => {
+    // Matches both cases: with Ctrl+Alt held, some layouts report AltGr-shifted characters.
+    if (e.ctrlKey && e.altKey && !e.shiftKey && !e.metaKey && e.key.toLowerCase() === 'p') {
+      e.preventDefault();
+      togglePalette();
+      return;
+    }
+    // While the palette is open the input owns the keyboard — don't let tab shortcuts fire
+    // mid-path (Alt+digit especially, since Windows paths contain digits).
+    if (palette.open) return;
     if (e.altKey && !e.ctrlKey && !e.shiftKey && !e.metaKey) {
       const digit = parseInt(e.key, 10);
       if (digit >= 1 && digit <= 9) {
@@ -141,6 +252,257 @@ function listenKeys() {
   });
 }
 
+async function loadProjects() {
+  const res = await fetch('/api/projects');
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}));
+    throw new Error(body.error || `HTTP ${res.status}`);
+  }
+  const list = await res.json();
+  // kanban sorts alphabetically; a picker wants most-recently-touched first.
+  palette.projects = list
+    .map((p) => ({
+      path: p.path,
+      name: basename(p.path),
+      parent: parentOf(p.path),
+      ts: p.modifiedAt ? Date.parse(p.modifiedAt) : 0,
+    }))
+    .sort((a, b) => b.ts - a.ts);
+}
+
+function subseq(text, q) {
+  let i = 0;
+  for (const ch of text) {
+    if (ch === q[i]) i++;
+    if (i === q.length) return true;
+  }
+  return false;
+}
+
+// Matches the full path so worktrees with opaque basenames stay reachable, but ranks basename
+// hits above parent-path hits. Tier ties fall back to the recency order set in loadProjects.
+// Returns {p, tier} so the renderer can mark the field that actually explains the match instead of
+// re-deriving it.
+function projectRows(projects, query) {
+  const q = query.trim().toLowerCase();
+  if (!q) return projects.slice(0, 100).map((p) => ({ p, tier: 0 }));
+  const tierOf = (p) => {
+    if (p.name.toLowerCase().includes(q)) return 0;
+    if (p.path.toLowerCase().includes(q)) return 1;
+    return -1;
+  };
+  let out = projects.map((p) => ({ p, tier: tierOf(p) })).filter((x) => x.tier >= 0);
+  if (out.length === 0) {
+    // Subsequence only as a fallback — it would otherwise swamp real substring matches.
+    out = projects
+      .map((p) => {
+        const tier = subseq(p.name.toLowerCase(), q) ? 0 : subseq(p.path.toLowerCase(), q) ? 1 : -1;
+        return { p, tier };
+      })
+      .filter((x) => x.tier >= 0);
+  }
+  out.sort((a, b) => a.tier - b.tier || b.p.ts - a.p.ts);
+  return out.slice(0, 100);
+}
+
+// The [start, end) slices of `lower` that q matched, mirroring the tiers in projectRows: one
+// contiguous range for a substring hit, otherwise the subsequence positions, coalesced so adjacent
+// letters share a range. Null when q is absent altogether.
+function matchRanges(lower, q) {
+  const at = lower.indexOf(q);
+  if (at >= 0) return [[at, at + q.length]];
+  const ranges = [];
+  let qi = 0;
+  for (let i = 0; i < lower.length && qi < q.length; i++) {
+    if (lower[i] !== q[qi]) continue;
+    const last = ranges[ranges.length - 1];
+    if (last && last[1] === i) last[1] = i + 1;
+    else ranges.push([i, i + 1]);
+    qi++;
+  }
+  return qi === q.length ? ranges : null;
+}
+
+// Marks the letters that made this row match, so a hit on an opaque basename explains itself.
+// Returns nodes, never HTML — a project path must never be interpolated.
+function markMatch(text, q) {
+  const ranges = q ? matchRanges(text.toLowerCase(), q) : null;
+  if (!ranges) return [document.createTextNode(text)];
+  const nodes = [];
+  let at = 0;
+  for (const [from, to] of ranges) {
+    if (from > at) nodes.push(document.createTextNode(text.slice(at, from)));
+    nodes.push(el('mark', '', text.slice(from, to)));
+    at = to;
+  }
+  if (at < text.length) nodes.push(document.createTextNode(text.slice(at)));
+  return nodes;
+}
+
+function markedSpan(className, text, q) {
+  const node = el('span', className);
+  node.append(...markMatch(text, q));
+  return node;
+}
+
+function looksLikePath(q) {
+  return /[/\\:]/.test(q.trim());
+}
+
+function relAge(ts) {
+  if (!ts) return '';
+  const m = Math.round((Date.now() - ts) / 60000);
+  if (m < 60) return `${m}m`;
+  if (m < 1440) return `${Math.round(m / 60)}h`;
+  return `${Math.round(m / 1440)}d`;
+}
+
+function renderPalette() {
+  const list = document.getElementById('palette-list');
+  const q = palette.query.trim().toLowerCase();
+  const rows = projectRows(palette.projects, palette.query).map((x) => ({
+    kind: 'project',
+    path: x.p.path,
+    p: x.p,
+    tier: x.tier,
+  }));
+  if (looksLikePath(palette.query)) rows.push({ kind: 'literal', path: palette.query.trim() });
+  palette.rows = rows;
+  palette.sel = Math.min(palette.sel, Math.max(0, rows.length - 1));
+  if (rows.length === 0) {
+    list.replaceChildren(el('li', 'palette-empty', 'No matching project'));
+    return;
+  }
+  list.replaceChildren(
+    ...rows.map((row, i) => {
+      const li = el(
+        'li',
+        `palette-row${row.kind === 'literal' ? ' literal' : ''}${i === palette.sel ? ' selected' : ''}`,
+      );
+      li.dataset.idx = String(i);
+      if (row.kind === 'literal') {
+        li.textContent = `Use literal path -- ${row.path}`;
+      } else {
+        // Only the field that ranked the row is marked — otherwise a one-letter query like "c"
+        // would light up the "C:" drive letter on every row. Tier 0 is a basename hit.
+        li.append(
+          markedSpan('name', row.p.name, row.tier === 0 ? q : ''),
+          markedSpan('parent', row.p.parent, row.tier === 0 ? '' : q),
+          el('span', 'age', relAge(row.p.ts)),
+        );
+      }
+      return li;
+    }),
+  );
+  list.querySelector('.selected')?.scrollIntoView({ block: 'nearest' });
+}
+
+// textContent throughout — paths are user data and the hub has no escaping helper.
+function el(tag, className, text) {
+  const node = document.createElement(tag);
+  node.className = className;
+  if (text !== undefined) node.textContent = text;
+  return node;
+}
+
+function togglePalette() {
+  if (palette.open) closePalette();
+  else openPalette();
+}
+
+function openPalette() {
+  const input = document.getElementById('palette-input');
+  palette.open = true;
+  palette.query = '';
+  palette.sel = 0;
+  input.value = '';
+  document.getElementById('palette').hidden = false;
+  renderPalette();
+  input.focus();
+  // Stale-while-revalidate: the cached list renders instantly, recency refreshes when this lands.
+  loadProjects()
+    .then(() => {
+      if (palette.open) renderPalette();
+    })
+    .catch((err) => console.warn('project list unavailable:', err.message));
+}
+
+function closePalette() {
+  palette.open = false;
+  document.getElementById('palette').hidden = true;
+  iframes[activeApp]?.focus();
+}
+
+function movePaletteSel(delta) {
+  const n = palette.rows.length;
+  if (n === 0) return;
+  palette.sel = (palette.sel + delta + n) % n;
+  renderPalette();
+}
+
+async function commitPalette() {
+  const row = palette.rows[palette.sel];
+  if (!row) return;
+  // List rows broadcast verbatim: kanban handed us this exact string and matches it with strict
+  // ===. Only a typed path needs normalizing.
+  const absPath = row.kind === 'project' ? row.path : await resolveTypedPath(row.path);
+  if (!absPath) return;
+  closePalette();
+  setProject(absPath);
+}
+
+// Returns the real on-disk path, or null when it can't be resolved (the palette stays open).
+async function resolveTypedPath(typed) {
+  const input = document.getElementById('palette-input');
+  input.disabled = true;
+  try {
+    const res = await fetch(`/api/resolve-path?path=${encodeURIComponent(typed)}`);
+    const data = await res.json().catch(() => ({}));
+    if (res.ok) return data.path;
+    console.warn('resolve-path failed:', data.error || res.status);
+  } catch (err) {
+    console.warn('resolve-path failed:', err.message);
+  } finally {
+    input.disabled = false;
+    if (palette.open) input.focus();
+  }
+  return null;
+}
+
+function bindPalette() {
+  const input = document.getElementById('palette-input');
+  input.addEventListener('input', () => {
+    palette.query = input.value;
+    palette.sel = 0;
+    renderPalette();
+  });
+  // Bound to the input rather than the document: the palette always owns focus while open.
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      closePalette();
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      commitPalette();
+    } else if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+      e.preventDefault();
+      movePaletteSel(1);
+    } else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+      e.preventDefault();
+      movePaletteSel(-1);
+    }
+  });
+  document.getElementById('palette-list').addEventListener('click', (e) => {
+    const li = e.target.closest('.palette-row');
+    if (!li) return;
+    palette.sel = Number(li.dataset.idx);
+    commitPalette();
+  });
+  document.getElementById('palette').addEventListener('mousedown', (e) => {
+    if (e.target.id === 'palette') closePalette();
+  });
+}
+
 function registerSW() {
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.register('/sw.js');

package/public/index.html

@@ -10,14 +10,28 @@
     :root {
       --bg: #1a1a2e;
       --border: #0f3460;
-      --accent: #e94560;
+      /* Fallback until applyHubAccent() overrides it with the active theme's accent, and the value
+         that stands if /api/config carries no accents. Ember, every sub-app's :root default. */
+      --accent: #e86f33;
+      --surface: #16213e;
+      --surface-hover: #1f2a4a;
+      --text: #e8e8ef;
+      --text-dim: #8a8fa3;
+      --shadow: rgba(0, 0, 0, 0.55);
     }
 
-    @media (prefers-color-scheme: light) {
-      :root {
-        --bg: #f4f4f5;
-        --border: #e4e4e7;
-      }
+    /* applyHubTheme() owns light/dark and stamps this class, resolving the pushed hub:theme first
+       and prefers-color-scheme only as its fallback. Deliberately not a @media block: the theme a
+       sub-app pushed has to win over the OS preference, and the only surface painted before JS runs
+       is a background the iframes immediately cover. */
+    :root.light {
+      --bg: #f4f4f5;
+      --border: #e4e4e7;
+      --surface: #ffffff;
+      --surface-hover: #f1f1f4;
+      --text: #18181b;
+      --text-dim: #71717a;
+      --shadow: rgba(0, 0, 0, 0.18);
     }
 
     * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -75,6 +89,100 @@
     }
 
     @keyframes spin { to { transform: rotate(360deg); } }
+
+    /* Project switcher palette — the hub's only chrome, summoned with Ctrl+Alt+P. */
+    .palette {
+      position: fixed;
+      inset: 0;
+      z-index: 20;
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      padding-top: 12vh;
+      background: color-mix(in srgb, var(--bg) 78%, transparent);
+    }
+
+    .palette[hidden] { display: none; }
+
+    .palette-box {
+      width: min(680px, 92vw);
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      box-shadow: 0 18px 48px var(--shadow);
+      overflow: hidden;
+      font: 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
+    }
+
+    .palette-input {
+      width: 100%;
+      padding: 12px 14px;
+      border: none;
+      border-bottom: 1px solid var(--border);
+      background: transparent;
+      color: var(--text);
+      font: inherit;
+      outline: none;
+    }
+
+    .palette-input::placeholder { color: var(--text-dim); }
+
+    .palette-list {
+      list-style: none;
+      max-height: 46vh;
+      overflow-y: auto;
+    }
+
+    .palette-row {
+      display: flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 14px;
+      cursor: pointer;
+      color: var(--text);
+      white-space: nowrap;
+    }
+
+    /* Bar over the neutral hover background, no accent tint: the faintest theme accents
+       (monokai light #c08a00, vitesse light #1c6b48) barely register as a tint, but read
+       clearly as a 2px bar. */
+    .palette-row.selected {
+      background: var(--surface-hover);
+      box-shadow: inset 2px 0 0 var(--accent);
+    }
+
+    .palette-row .name { font-weight: 600; }
+
+    /* The letters that made this row match. Accent-coloured rather than block-highlighted so it
+       reads inside a bold name without fighting the selected row's bar. */
+    .palette-row mark {
+      background: transparent;
+      color: var(--accent);
+      font-weight: 700;
+    }
+
+    .palette-row .parent {
+      color: var(--text-dim);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex: 1;
+    }
+
+    .palette-row .age {
+      color: var(--text-dim);
+      margin-left: auto;
+      padding-left: 10px;
+    }
+
+    .palette-row.literal {
+      border-top: 1px solid var(--border);
+      color: var(--accent);
+    }
+
+    .palette-empty {
+      padding: 10px 14px;
+      color: var(--text-dim);
+    }
   </style>
 </head>
 <body>
@@ -84,6 +192,14 @@
     </div>
   </div>
 
+  <div class="palette" id="palette" hidden>
+    <div class="palette-box" role="dialog" aria-modal="true" aria-label="Switch project">
+      <input class="palette-input" id="palette-input" type="text" spellcheck="false"
+             autocomplete="off" placeholder="Search projects or type a path...">
+      <ul class="palette-list" id="palette-list" role="listbox"></ul>
+    </div>
+  </div>
+
   <script src="/app.js"></script>
 </body>
 </html>

package/server.js

@@ -2,6 +2,7 @@
 
 const { spawn } = require('child_process');
 const express = require('express');
+const fs = require('fs');
 const http = require('http');
 const path = require('path');
 
@@ -113,8 +114,23 @@ spawnApp('memory', process.execPath, [NODE_HDR, memoryPath, `--port=${MEMORY_POR
 
 const app = express();
 
+// The accent hex per color theme, read from the same registry generate-themes.mjs compiles into each
+// sub-app's themes.css. Served rather than hand-copied into public/app.js so there is one source of
+// truth; the palette is the hub's only themed surface, so only ember (the accent role) is needed.
+// Read once — themes.json only changes when the generator is re-run, which restarts the hub anyway.
+const themeAccents = (() => {
+  try {
+    const themes = JSON.parse(fs.readFileSync(path.join(__dirname, 'scripts/themes.json'), 'utf8'));
+    return Object.fromEntries(themes.map((t) => [t.id, { dark: t.dark.ember, light: t.light.ember }]));
+  } catch {
+    // Palette falls back to the --accent in index.html; not worth failing startup over.
+    return {};
+  }
+})();
+
 app.get('/api/config', (_req, res) => {
   res.json({
+    themeAccents,
     apps: {
       kanban: { name: 'Kanban', url: `http://localhost:${actualPorts.kanban}`, icon: 'columns' },
       marketplace: { name: 'Marketplace', url: `http://localhost:${actualPorts.marketplace}`, icon: 'store' },
@@ -124,6 +140,51 @@ app.get('/api/config', (_req, res) => {
   });
 });
 
+// Project list for the switcher palette, proxied from kanban — it is the only sub-app that
+// enumerates projects. actualPorts is read per request because kanban's real port is only
+// known once its banner has been scraped (see spawnApp).
+app.get('/api/projects', async (_req, res) => {
+  res.setHeader('Cache-Control', 'no-store');
+  try {
+    // 127.0.0.1, not localhost — Node's verbatim DNS ordering tries ::1 first on Windows.
+    const upstream = await fetch(`http://127.0.0.1:${actualPorts.kanban}/api/projects`, {
+      signal: AbortSignal.timeout(4000),
+    });
+    if (!upstream.ok) {
+      res.status(502).json({ error: `kanban responded ${upstream.status}` });
+      return;
+    }
+    res.json(await upstream.json());
+  } catch (err) {
+    // Soft-fail so the palette still opens and offers literal-path entry.
+    res.status(502).json({ error: `kanban unavailable: ${err.message}` });
+  }
+});
+
+// Normalizes a typed path to its real on-disk form (true casing, native separators) so cck's
+// strict === project match and cost's abs->encoded transform both hit. List-picked paths skip
+// this: they are byte-exact copies of what kanban reported.
+app.get('/api/resolve-path', (req, res) => {
+  res.setHeader('Cache-Control', 'no-store');
+  const input = typeof req.query.path === 'string' ? req.query.path.trim() : '';
+  if (!input) {
+    res.status(400).json({ error: 'path is required' });
+    return;
+  }
+  let resolved;
+  try {
+    resolved = fs.realpathSync.native(path.resolve(input));
+  } catch {
+    res.status(404).json({ error: 'Path not found' });
+    return;
+  }
+  if (!fs.statSync(resolved).isDirectory()) {
+    res.status(400).json({ error: 'Not a directory' });
+    return;
+  }
+  res.json({ path: resolved });
+});
+
 app.use(express.static(path.join(__dirname, 'public')));
 
 const server = http.createServer({ maxHeaderSize: 65536 }, app);