claude-code-hub 0.37.0 → 0.39.0-rc.1

package/public/app.js

@@ -2,10 +2,15 @@ let apps = {};
 let activeApp = null;
 const iframes = {};
 const loadedApps = new Set();
+const guardedApps = new Set();
 let allowedOrigins = new Set();
-// {theme: 'dark'|'light', colorTheme: '<id>'} — survives hub reloads so
-// late-loading iframes and fresh sessions get the last chosen theme.
+// {theme: 'dark'|'light', colorTheme: '<id>', colorThemes: {<configDir>: '<id>'}} — survives hub
+// reloads so late-loading iframes and fresh sessions get the last chosen theme. Light/dark is
+// global; the color theme is per config dir, and colorTheme is the last one picked anywhere, which
+// a dir that has never been themed inherits.
 const themeState = loadThemeState();
+// Keys themeState.colorThemes. Null until /api/config lands, so the first paint uses the fallback.
+let activeConfigDir = null;
 // {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.
@@ -24,11 +29,19 @@ const palette = {
 };
 
 function loadThemeState() {
+  let state;
   try {
-    return JSON.parse(localStorage.getItem('hub-theme')) ?? {};
+    state = JSON.parse(localStorage.getItem('hub-theme')) ?? {};
   } catch {
-    return {};
+    state = {};
   }
+  if (!state.colorThemes || typeof state.colorThemes !== 'object') state.colorThemes = {};
+  return state;
+}
+
+// The color theme of the active config dir, falling back to the last one picked anywhere.
+function activeColorTheme() {
+  return themeState.colorThemes[activeConfigDir] ?? themeState.colorTheme;
 }
 
 function osTheme() {
@@ -38,21 +51,33 @@ function osTheme() {
 // Sub-apps disagree on their first-run default (marketplace follows the OS, the rest start dark),
 // so an unset theme resolves to the OS preference here and reaches every iframe on load.
 function themeMessage() {
-  return { type: 'hub:theme', theme: themeState.theme ?? osTheme(), colorTheme: themeState.colorTheme };
+  return { type: 'hub:theme', theme: themeState.theme ?? osTheme(), colorTheme: activeColorTheme() };
 }
 
-// {<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 = {};
+// {<themeId>: {dark, light}}, each a map of CSS variables, 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; then the hub keeps index.html's colors.
+let themePalettes = {};
+// The last applied variables, so the loading screen paints in the theme before /api/config lands.
+const PALETTE_KEY = 'hub-palette';
 
-// Paints the palette — the hub's only themed surface — in the active theme. The hub relays
+// Paints the hub's own surfaces (loading screen, palette) 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() {
   const mode = themeState.theme ?? osTheme();
-  document.documentElement.classList.toggle('light', mode === 'light');
-  const pair = themeAccents[themeState.colorTheme];
-  if (pair) document.documentElement.style.setProperty('--accent', pair[mode]);
+  const root = document.documentElement;
+  root.classList.toggle('light', mode === 'light');
+  const key = `${activeColorTheme()}/${mode}`;
+  let vars = themePalettes[activeColorTheme()]?.[mode];
+  try {
+    if (vars) localStorage.setItem(PALETTE_KEY, JSON.stringify({ key, vars }));
+    else {
+      const cached = JSON.parse(localStorage.getItem(PALETTE_KEY));
+      if (cached?.key === key) vars = cached.vars;
+    }
+  } catch {}
+  root.style.cssText = '';
+  for (const [name, value] of Object.entries(vars ?? {})) root.style.setProperty(name, value);
 }
 
 // Claude's on-disk project-directory name. Matches memory/server.js encodeProjectPath. The hub
@@ -91,6 +116,10 @@ function postTo(appId, message) {
   iframes[appId]?.contentWindow?.postMessage(message, originOf(appId));
 }
 
+function appIdOf(source) {
+  return Object.keys(iframes).find((id) => iframes[id].contentWindow === source);
+}
+
 // 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)) {
@@ -119,12 +148,14 @@ 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();
+  showLoading();
   const res = await fetch('/api/config');
   const config = await res.json();
   setApps(config.apps);
   defaultConfigDir = config.defaultConfigDir ?? null;
+  activeConfigDir = config.activeConfigDir ?? null;
   applyTitle(config.activeConfigDir);
-  themeAccents = config.themeAccents ?? {};
+  themePalettes = config.themePalettes ?? {};
   applyHubTheme();
   buildIframes();
   switchTab(Object.keys(apps)[0]);
@@ -153,27 +184,91 @@ function reloadIframes() {
   loadedApps.clear();
   projectState = null;
   // Assigning src navigates even when the URL is unchanged.
-  for (const [id, iframe] of Object.entries(iframes)) iframe.src = apps[id].url;
-}
+  for (const [id, iframe] of Object.entries(iframes)) iframe.src = appSrc(id);
+}
+
+// The terminal token rides in the fragment so it never reaches a server log or a Referer.
+function appSrc(id, path = '') {
+  const token = apps[id].terminalToken;
+  return apps[id].url + path + (token ? `#t=${token}` : '');
+}
+
+const LOADING_VERBS = {
+  kanban: [
+    'Shuffling cards…',
+    'Herding tasks…',
+    'Waking sessions…',
+    'Sorting the board…',
+    'Pinning sticky notes…',
+    'Moving cards to done…',
+    'Nudging agents…',
+    'Drawing columns…',
+    'Reading the backlog…',
+  ],
+  cost: [
+    'Counting tokens…',
+    'Tallying the bill…',
+    'Stacking bars…',
+    'Crunching numbers…',
+    'Checking the cache hits…',
+    'Adding up the days…',
+    'Balancing the books…',
+    'Plotting the trend…',
+    'Weighing the models…',
+  ],
+  memory: [
+    'Recalling memories…',
+    'Walking the tree…',
+    'Dusting off notes…',
+    'Reading CLAUDE.md…',
+    'Following imports…',
+    'Tracing the context…',
+    'Flipping through pages…',
+    'Connecting the dots…',
+    'Checking what sticks…',
+  ],
+  marketplace: [
+    'Unpacking plugins…',
+    'Polishing skills…',
+    'Dusting off agents…',
+    'Wiring up hooks…',
+    'Fetching manifests…',
+    'Reading SKILL.md files…',
+    'Listing commands…',
+    'Scanning MCP servers…',
+    'Gathering plugins…',
+  ],
+};
 
-function showLoading(text = '') {
-  document.getElementById('loading-text').textContent = text;
+let loadingTimer = null;
+
+function showLoading() {
+  const verbs = LOADING_VERBS[activeApp] ?? Object.values(LOADING_VERBS).flat();
+  const text = document.getElementById('loading-text');
+  let i = Math.floor(Math.random() * verbs.length);
+  text.textContent = verbs[i];
+  clearInterval(loadingTimer);
+  loadingTimer = setInterval(() => {
+    i = (i + 1 + Math.floor(Math.random() * (verbs.length - 1))) % verbs.length;
+    text.textContent = verbs[i];
+  }, 1200);
   document.getElementById('loading-overlay').classList.remove('fade-out');
 }
 
 function hideLoading() {
+  clearInterval(loadingTimer);
   document.getElementById('loading-text').textContent = '';
   document.getElementById('loading-overlay').classList.add('fade-out');
 }
 
 function buildIframes() {
   const container = document.getElementById('iframe-container');
-  for (const [id, cfg] of Object.entries(apps)) {
+  for (const id of Object.keys(apps)) {
     const iframe = document.createElement('iframe');
     iframe.id = `iframe-${id}`;
-    iframe.src = cfg.url;
+    iframe.src = appSrc(id);
     iframe.className = 'hidden';
-    iframe.allow = 'clipboard-write';
+    iframe.allow = 'clipboard-write; microphone';
     iframe.addEventListener('load', () => onIframeLoad(id));
     container.appendChild(iframe);
     iframes[id] = iframe;
@@ -197,6 +292,7 @@ function switchTab(appId) {
 
 function onIframeLoad(appId) {
   loadedApps.add(appId);
+  guardedApps.delete(appId);
   if (appId === activeApp) hideLoading();
   postTo(appId, themeMessage());
   postProjectTo(appId);
@@ -212,15 +308,38 @@ function onIframeLoad(appId) {
 }
 
 function listenMessages() {
+  window.addEventListener('beforeunload', (e) => {
+    if (guardedApps.size) e.preventDefault();
+  });
   window.addEventListener('message', (e) => {
     if (!allowedOrigins.has(e.origin)) return;
     const data = e.data ?? {};
     if (data.type === 'hub:navigate') {
       if (!apps[data.app]) return;
       switchTab(data.app);
-      if (data.url) iframes[data.app].src = apps[data.app].url + data.url;
+      if (typeof data.url !== 'string' || !data.url) return;
+      // A url such as '@evil.example/' turns the app host into userinfo, and the token rides in the fragment.
+      const src = appSrc(data.app, data.url);
+      if (URL.canParse(src) && new URL(src).origin === originOf(data.app)) iframes[data.app].src = src;
     } else if (data.type === 'hub:keydown') {
       handleForwardedKey(data);
+    } else if (data.type === 'hub:closeGuard') {
+      const appId = appIdOf(e.source);
+      if (!appId) return;
+      if (data.on === true) guardedApps.add(appId);
+      else guardedApps.delete(appId);
+    } else if (data.type === 'hub:terminalToken') {
+      // This hub page may have outlived the restart too, so the cached token is not trusted.
+      const appId = appIdOf(e.source);
+      if (!appId) return;
+      sendJson('GET', '/api/config')
+        .then((cfg) => {
+          const token = cfg.apps?.[appId]?.terminalToken;
+          if (!token) return;
+          apps[appId].terminalToken = token;
+          postTo(appId, { type: 'hub:terminalToken', token });
+        })
+        .catch(() => {});
     } else if (data.type === 'hub:openExternal') {
       // In the installed PWA window a framed sub-app's own target=_blank opens
       // nothing, so the shims hand external links up to the top frame instead.
@@ -236,10 +355,13 @@ function listenMessages() {
       // Legacy senders pass only {theme}; colorTheme is optional and sticky.
       if (data.theme !== 'light' && data.theme !== 'dark') return;
       const hasColor = typeof data.colorTheme === 'string' && /^[a-z0-9-]{0,32}$/.test(data.colorTheme);
-      const changed = data.theme !== themeState.theme || (hasColor && data.colorTheme !== themeState.colorTheme);
+      const changed = data.theme !== themeState.theme || (hasColor && data.colorTheme !== activeColorTheme());
       if (!changed) return;
       themeState.theme = data.theme;
-      if (hasColor) themeState.colorTheme = data.colorTheme;
+      if (hasColor) {
+        themeState.colorTheme = data.colorTheme;
+        if (activeConfigDir) themeState.colorThemes[activeConfigDir] = data.colorTheme;
+      }
       localStorage.setItem('hub-theme', JSON.stringify(themeState));
       applyHubTheme();
       broadcast(themeMessage(), e.source);
@@ -254,18 +376,30 @@ function handleForwardedKey(d) {
   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;
+  const k = bindingKey(d);
   if (!ctrl) {
-    if (/^[1-9]$/.test(d.key)) switchByIndex(Number(d.key) - 1);
+    if (/^[1-9]$/.test(k)) switchByIndex(Number(k) - 1);
     return;
   }
-  if (d.key === 'ArrowLeft') cycleTab(-1);
-  else if (d.key === 'ArrowRight') cycleTab(1);
-  else if (PALETTE_KEYS[d.key.toLowerCase()]) togglePalette(PALETTE_KEYS[d.key.toLowerCase()]);
+  if (k === 'ArrowLeft') cycleTab(-1);
+  else if (k === 'ArrowRight') cycleTab(1);
+  else if (PALETTE_KEYS[k]) togglePalette(PALETTE_KEYS[k]);
 }
 
 // Ctrl+Alt+<letter> bindings. Sub-app shims forward every letter, so this is the one keymap.
 const PALETTE_KEYS = { p: 'project', w: 'configDir' };
 
+// macOS composes Option+<key> into a character — Option+1 is '¡', Option+P is 'π' — and holding
+// Control does not undo it, so e.key alone cannot carry these bindings there. e.code is the
+// physical key, which is wrong for non-US layouts, hence only as a fallback. Takes a real
+// KeyboardEvent or a forwarded {key, code} payload; a payload without code degrades to key.
+function bindingKey(e) {
+  const lower = typeof e.key === 'string' ? e.key.toLowerCase() : '';
+  if (/^[a-z1-9]$/.test(lower)) return lower;
+  const m = /^(?:Key|Digit)([A-Z1-9])$/.exec(e.code || '');
+  return m ? m[1].toLowerCase() : e.key;
+}
+
 function cycleTab(delta) {
   const ids = Object.keys(apps);
   const idx = ids.indexOf(activeApp);
@@ -280,11 +414,13 @@ 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 && PALETTE_KEYS[e.key.toLowerCase()]) {
-      e.preventDefault();
-      togglePalette(PALETTE_KEYS[e.key.toLowerCase()]);
-      return;
+    if (e.ctrlKey && e.altKey && !e.shiftKey && !e.metaKey) {
+      const mode = PALETTE_KEYS[bindingKey(e)];
+      if (mode) {
+        e.preventDefault();
+        togglePalette(mode);
+        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). Escape still closes:
@@ -297,10 +433,10 @@ function listenKeys() {
       return;
     }
     if (e.altKey && !e.ctrlKey && !e.shiftKey && !e.metaKey) {
-      const digit = parseInt(e.key, 10);
-      if (digit >= 1 && digit <= 9) {
+      const k = bindingKey(e);
+      if (/^[1-9]$/.test(k)) {
         e.preventDefault();
-        switchByIndex(digit - 1);
+        switchByIndex(Number(k) - 1);
         return;
       }
     }
@@ -342,28 +478,37 @@ function subseq(text, q) {
 }
 
 // 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.
+// hits above parent-path hits, and within those an exact name, then a prefix, then a word start.
+// Rank 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.
+const PATH_RANK = 4;
+
 function projectRows(projects, q) {
   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;
+  const rankOf = (p) => {
+    const name = p.name.toLowerCase();
+    const at = name.indexOf(q);
+    if (name === q) return 0;
+    if (at === 0) return 1;
+    if (at > 0) return /[^a-z0-9]/.test(name[at - 1]) ? 2 : 3;
+    const path = p.path.toLowerCase();
+    if (path.split(/[/\\]/).includes(q)) return PATH_RANK;
+    if (path.includes(q)) return PATH_RANK + 1;
     return -1;
   };
-  let out = projects.map((p) => ({ p, tier: tierOf(p) })).filter((x) => x.tier >= 0);
+  let out = projects.map((p) => ({ p, rank: rankOf(p) })).filter((x) => x.rank >= 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 };
+        const rank = subseq(p.name.toLowerCase(), q) ? 0 : subseq(p.path.toLowerCase(), q) ? PATH_RANK : -1;
+        return { p, rank };
       })
-      .filter((x) => x.tier >= 0);
+      .filter((x) => x.rank >= 0);
   }
-  out.sort((a, b) => a.tier - b.tier || b.p.ts - a.p.ts);
-  return out.slice(0, 100);
+  out.sort((a, b) => a.rank - b.rank || b.p.ts - a.p.ts);
+  return out.slice(0, 100).map(({ p, rank }) => ({ p, tier: rank < PATH_RANK ? 0 : 1 }));
 }
 
 // The [start, end) slices of `lower` that q matched, mirroring the tiers in projectRows: one
@@ -431,6 +576,10 @@ async function removeConfigDir(dirPath) {
     console.warn('remove config dir failed:', err.message);
     return;
   }
+  if (dirPath in themeState.colorThemes) {
+    delete themeState.colorThemes[dirPath];
+    localStorage.setItem('hub-theme', JSON.stringify(themeState));
+  }
   if (palette.open && palette.mode === 'configDir') renderPalette();
 }
 
@@ -639,12 +788,15 @@ async function commitConfigDir(row) {
   closePalette();
   // The server would no-op too, but the client would still reload every iframe.
   if (target === palette.configDirs.active) return;
-  showLoading(`Switching to ${target}...`);
+  showLoading();
   try {
     setApps((await sendJson('POST', '/api/config-dirs/activate', { path: target })).apps);
     // The palette renders from this cache before its refetch lands, and initialSel keys off it.
     palette.configDirs.active = target;
+    activeConfigDir = target;
     applyTitle(target);
+    // Each iframe gets the new dir's color theme from its load handler; this repaints the palette.
+    applyHubTheme();
     reloadIframes();
   } catch (err) {
     console.warn('config dir switch failed:', err.message);
@@ -705,8 +857,15 @@ function bindPalette() {
     palette.sel = Number(li.dataset.idx);
     commitPalette();
   });
+  // Vimium eats Escape inside a text input and only blurs it, so the page never sees the key —
+  // losing focus is the one signal left. Busy disables the input and Alt+Tab blurs the window;
+  // neither is a dismissal.
+  input.addEventListener('blur', () => {
+    if (palette.open && !input.disabled && document.hasFocus()) closePalette();
+  });
   document.getElementById('palette').addEventListener('mousedown', (e) => {
     if (e.target.id === 'palette') closePalette();
+    else if (e.target !== input) e.preventDefault();
   });
 }
 

package/public/index.html

@@ -5,6 +5,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="theme-color" content="#1a1a2e">
   <link rel="manifest" href="/manifest.json">
+  <!-- A manifest alone does not set the favicon: without these, app windows,
+       shortcuts and the history list fall back to /favicon.ico and then to whatever
+       icon localhost was last seen with, which is a sub-app's. -->
+  <link rel="icon" type="image/svg+xml" href="/icons/icon-192.svg">
+  <link rel="icon" type="image/png" sizes="192x192" href="/icons/icon-192.png">
+  <link rel="icon" type="image/png" sizes="512x512" href="/icons/icon-512.png">
+  <link rel="apple-touch-icon" href="/icons/icon-192.png">
   <title>Claude Code Hub</title>
   <style>
     :root {
@@ -18,6 +25,7 @@
       --text: #e8e8ef;
       --text-dim: #8a8fa3;
       --shadow: rgba(0, 0, 0, 0.55);
+      --ghost-mix: 22%;
     }
 
     /* applyHubTheme() owns light/dark and stamps this class, resolving the pushed hub:theme first
@@ -32,6 +40,7 @@
       --text: #18181b;
       --text-dim: #71717a;
       --shadow: rgba(0, 0, 0, 0.18);
+      --ghost-mix: 10%;
     }
 
     * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -71,7 +80,9 @@
       gap: 14px;
       align-items: center;
       justify-content: center;
-      background: var(--bg);
+      background:
+        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 45%),
+        var(--bg);
       z-index: 10;
       transition: opacity 0.3s ease;
     }
@@ -81,16 +92,85 @@
       pointer-events: none;
     }
 
-    .spinner {
-      width: 28px;
-      height: 28px;
-      border: 3px solid var(--border);
-      border-top-color: var(--accent);
-      border-radius: 50%;
-      animation: spin 0.8s linear infinite;
+    /* Clawd, drawn from the Claude Code banner's block art; cck's boot splash uses the same one. */
+    .clawd {
+      width: 64px;
+      height: 40px;
+      fill: #d97757;
+      overflow: visible;
+      transform-origin: 50% 100%;
+      animation: clawd-jump 0.9s ease-in-out infinite;
+    }
+
+    @keyframes clawd-jump {
+      0%, 100% { transform: translateY(0) scale(1, 1); }
+      15% { transform: translateY(0) scale(1.1, 0.85); }
+      45% { transform: translateY(-14px) scale(0.95, 1.05); }
+      70% { transform: translateY(0) scale(1.08, 0.9); }
+      85% { transform: translateY(0) scale(1, 1); }
     }
 
-    @keyframes spin { to { transform: rotate(360deg); } }
+    @media (prefers-reduced-motion: reduce) {
+      .clawd { animation: none; }
+    }
+
+    /* Faint outlines of the four apps, one per quadrant, so the wait reads as "the pages are
+       coming" rather than a blank screen. */
+    .ghosts {
+      --ghost: color-mix(in srgb, var(--accent) 60%, var(--text-dim));
+      position: absolute;
+      inset: 0;
+      display: grid;
+      grid-template: 1fr 1fr / 1fr 1fr;
+      gap: 16px;
+      padding: 16px;
+      pointer-events: none;
+      -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 80px, #000 240px);
+      mask-image: radial-gradient(circle at 50% 50%, transparent 0 80px, #000 240px);
+    }
+
+    .ghost {
+      display: grid;
+      gap: 12px;
+      padding: 14px;
+      min-height: 0;
+      overflow: hidden;
+      border: 1px solid color-mix(in srgb, var(--ghost) calc(var(--ghost-mix) * 0.8), transparent);
+      border-radius: 10px;
+    }
+
+    .ghost i {
+      display: block;
+      min-height: 12px;
+      border-radius: 6px;
+      background: color-mix(in srgb, var(--ghost) var(--ghost-mix), transparent);
+    }
+
+    .ghost .h { height: 18px; width: 45%; }
+    .ghost .stack { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
+    .ghost .row { display: flex; gap: 16px; }
+    .ghost .row > i { flex: 1; }
+
+    .ghost-kanban { grid-template-columns: 22% repeat(3, 1fr); }
+    .ghost-kanban .side i { height: 24px; }
+    .ghost-kanban .col i:not(.h) { height: 60px; }
+
+    .ghost-cost { grid-template-rows: 56px 1fr auto; }
+    .ghost-cost .row > i { height: 56px; }
+    .ghost-cost .bars { display: flex; align-items: flex-end; gap: 8px; min-height: 0; }
+    .ghost-cost .bars i { flex: 1; }
+    .ghost-cost .stack i:not(.h) { height: 16px; }
+
+    .ghost-memory { grid-template-columns: 28% 1fr; }
+    .ghost-memory .side i { height: 18px; }
+    .ghost-memory .side .in { margin-left: 14px; }
+    .ghost-memory .side .in2 { margin-left: 28px; }
+    .ghost-memory .doc i:not(.h) { height: 12px; }
+
+    .ghost-marketplace { grid-template-rows: 32px 1fr; }
+    .ghost-marketplace .cards { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 12px; min-height: 0; }
+
+    .loading-overlay > :not(.ghosts) { position: relative; }
 
     .loading-text {
       color: var(--text-dim);
@@ -226,7 +306,48 @@
 <body>
   <div class="iframe-container" id="iframe-container">
     <div class="loading-overlay" id="loading-overlay">
-      <div class="spinner"></div>
+      <div class="ghosts" aria-hidden="true">
+      <div class="ghost ghost-kanban">
+        <div class="stack side"><i class="h"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
+        <div class="stack col"><i class="h"></i><i></i><i></i><i></i></div>
+        <div class="stack col"><i class="h"></i><i></i><i></i></div>
+        <div class="stack col"><i class="h"></i><i></i><i></i><i></i><i></i></div>
+      </div>
+      <div class="ghost ghost-cost">
+        <div class="row"><i></i><i></i><i></i><i></i></div>
+        <div class="bars">
+          <i style="height:35%"></i><i style="height:60%"></i><i style="height:45%"></i><i style="height:80%"></i>
+          <i style="height:55%"></i><i style="height:30%"></i><i style="height:70%"></i><i style="height:50%"></i>
+          <i style="height:65%"></i><i style="height:40%"></i><i style="height:75%"></i><i style="height:58%"></i>
+        </div>
+        <div class="stack"><i class="h"></i><i></i><i></i><i></i></div>
+      </div>
+      <div class="ghost ghost-memory">
+        <div class="stack side">
+          <i class="h"></i><i></i><i class="in"></i><i class="in2"></i><i class="in2"></i><i class="in"></i>
+          <i></i><i class="in"></i><i class="in2"></i><i class="in"></i><i></i>
+        </div>
+        <div class="stack doc">
+          <i class="h"></i><i></i><i></i><i style="width:70%"></i><i></i><i style="width:85%"></i><i style="width:40%"></i>
+        </div>
+      </div>
+      <div class="ghost ghost-marketplace">
+        <i></i>
+        <div class="cards"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
+      </div>
+      </div>
+      <svg class="clawd" viewBox="1 0 16 10" shape-rendering="crispEdges" aria-hidden="true">
+        <rect x="3" y="0" width="12" height="2"/>
+        <rect x="3" y="2" width="2" height="2"/>
+        <rect x="6" y="2" width="6" height="2"/>
+        <rect x="13" y="2" width="2" height="2"/>
+        <rect x="1" y="4" width="16" height="2"/>
+        <rect x="3" y="6" width="12" height="2"/>
+        <rect x="4" y="8" width="1" height="2"/>
+        <rect x="6" y="8" width="1" height="2"/>
+        <rect x="11" y="8" width="1" height="2"/>
+        <rect x="13" y="8" width="1" height="2"/>
+      </svg>
       <div class="loading-text" id="loading-text"></div>
     </div>
   </div>