@jhizzard/termdeck 0.10.3 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jhizzard/termdeck",
-  "version": "0.10.3",
+  "version": "0.11.0",
   "description": "Browser-based terminal multiplexer with metadata overlays, panel flashback memory recall, and AI-aware session management",
   "bin": {
     "termdeck": "./packages/cli/src/index.js"

package/packages/cli/src/init-rumen.js

@@ -34,6 +34,7 @@ const {
   dotenv,
   supabaseUrl: urlHelper,
   migrations,
+  migrationTemplating,
   pgRunner,
   preconditions
 } = require(SETUP_DIR);
@@ -428,26 +429,53 @@ async function testFunction(projectRef, secrets, dryRun) {
   return true;
 }
 
+// Sprint 42 T3: bundle of cron-schedule migrations whose `<project-ref>`
+// placeholder must be substituted at apply-time. Both are idempotent
+// (cron.unschedule + cron.schedule), so applying in sequence is safe even
+// when one was already installed. Pre-Sprint 42, only 002 was applied —
+// migration 003 (graph-inference-tick) shipped bundled but unsubstituted
+// and unscheduled, which is part of why Sprint 38 close-out left the
+// graph-inference cron disabled.
+const SCHEDULE_MIGRATIONS = [
+  { matcher: /002.*pg_cron/, label: '002_pg_cron_schedule (rumen-tick)' },
+  { matcher: /003.*graph_inference/, label: '003_graph_inference_schedule (graph-inference-tick)' }
+];
+
 async function applySchedule(projectRef, secrets, dryRun) {
-  step('Applying pg_cron schedule (every 15 minutes)...');
+  step('Applying pg_cron schedules (rumen-tick + graph-inference-tick)...');
   if (dryRun) { ok('(dry-run)'); return true; }
 
   const files = migrations.listRumenMigrations();
-  const scheduleFile = files.find((f) => /002.*pg_cron/.test(path.basename(f)));
-  if (!scheduleFile) { fail('bundled 002_pg_cron_schedule.sql is missing'); return false; }
-
-  const raw = migrations.readFile(scheduleFile);
-  // Substitute the project ref into the schedule body. The bundled migration
-  // ships with the placeholder `<project-ref>` per Rumen's deploy docs; we
-  // also accept `{{PROJECT_REF}}` for robustness.
-  const substituted = raw
-    .replace(/<project-ref>/g, projectRef)
-    .replace(/\{\{PROJECT_REF\}\}/g, projectRef);
-
-  // The shipped migration uses Supabase Vault (`vault.decrypted_secrets`) to
-  // pull the service-role key. If the user hasn't stored the key in Vault the
-  // cron call will fail. We leave that as a post-install step and print a
-  // reminder below.
+  const planned = [];
+  for (const { matcher, label } of SCHEDULE_MIGRATIONS) {
+    const file = files.find((f) => matcher.test(path.basename(f)));
+    if (!file) { fail(`bundled ${label} is missing`); return false; }
+    planned.push({ file, label });
+  }
+
+  // Substitute the project ref into each schedule body. Both bundled
+  // migrations ship with the `<project-ref>` placeholder per Rumen's
+  // deploy docs; the helper also accepts `{{PROJECT_REF}}` for robustness
+  // and refuses to ship an unsubstituted placeholder to the database.
+  const substituted = [];
+  try {
+    for (const { file, label } of planned) {
+      const raw = migrations.readFile(file);
+      substituted.push({
+        sql: migrationTemplating.applyTemplating(raw, { projectRef }),
+        label
+      });
+    }
+  } catch (err) {
+    fail(err.message);
+    return false;
+  }
+
+  // The shipped migrations use Supabase Vault (`vault.decrypted_secrets`)
+  // to pull the service-role keys (`rumen_service_role_key` for 002 and
+  // `graph_inference_service_role_key` for 003). If a key isn't stored in
+  // Vault the corresponding cron call will fail at runtime. We leave that
+  // as a post-install step and print a reminder below.
 
   let client;
   try {
@@ -457,20 +485,21 @@ async function applySchedule(projectRef, secrets, dryRun) {
     return false;
   }
   try {
-    // Run the substituted SQL directly rather than applying the original file.
-    try {
-      await pgRunner.run(client, substituted);
-      ok();
-      return true;
-    } catch (err) {
-      fail(err.message);
-      process.stderr.write(
-        '\nThe schedule SQL failed — the most common cause is that pg_cron or pg_net\n' +
-        'is not enabled in the Supabase project. Enable them in Dashboard → Database\n' +
-        '→ Extensions, then re-run `termdeck init --rumen --skip-schedule=false`.\n'
-      );
-      return false;
+    for (const { sql, label } of substituted) {
+      try {
+        await pgRunner.run(client, sql);
+      } catch (err) {
+        fail(`${label}: ${err.message}`);
+        process.stderr.write(
+          '\nThe schedule SQL failed — the most common cause is that pg_cron or pg_net\n' +
+          'is not enabled in the Supabase project. Enable them in Dashboard → Database\n' +
+          '→ Extensions, then re-run `termdeck init --rumen --skip-schedule=false`.\n'
+        );
+        return false;
+      }
     }
+    ok();
+    return true;
   } finally {
     try { await client.end(); } catch (_err) { /* ignore */ }
   }

package/packages/client/public/app.js

@@ -91,6 +91,65 @@
       setupGuideRail();
     }
 
+    // ===== Drag/drop reorder of PTY panels (Sprint 42 T4) =====
+    // The grip handle in panel-header-left flips draggable=true on mousedown
+    // so an accidental drag inside the xterm region never fires. Drop
+    // position is determined by cursor x within the target panel — left half
+    // inserts before, right half inserts after — so reordering matches the
+    // intent in any grid layout (1x2, 2x2, 2x4, etc.). DOM reorder only;
+    // session.creation-order remains canonical for Alt+1…9 and panel-index.
+    function setupPanelDragDrop(panel) {
+      const handle = panel.querySelector('.panel-drag-handle');
+      if (!handle) return;
+
+      handle.addEventListener('mousedown', () => { panel.draggable = true; });
+      // Mouse leaves handle without a drag starting → reset
+      handle.addEventListener('mouseleave', () => {
+        if (!panel.classList.contains('dragging')) panel.draggable = false;
+      });
+
+      panel.addEventListener('dragstart', (e) => {
+        if (!panel.draggable) { e.preventDefault(); return; }
+        try { e.dataTransfer.effectAllowed = 'move'; } catch (_e) {}
+        try { e.dataTransfer.setData('text/plain', panel.id); } catch (_e) {}
+        panel.classList.add('dragging');
+      });
+
+      panel.addEventListener('dragend', () => {
+        panel.classList.remove('dragging');
+        panel.draggable = false;
+        document.querySelectorAll('.term-panel.drag-over').forEach((p) => p.classList.remove('drag-over'));
+      });
+
+      panel.addEventListener('dragover', (e) => {
+        const dragging = document.querySelector('.term-panel.dragging');
+        if (!dragging || dragging === panel) return;
+        e.preventDefault();
+        try { e.dataTransfer.dropEffect = 'move'; } catch (_e) {}
+        panel.classList.add('drag-over');
+      });
+
+      panel.addEventListener('dragleave', (e) => {
+        // Only clear when leaving the panel entirely (not entering a child).
+        if (!panel.contains(e.relatedTarget)) panel.classList.remove('drag-over');
+      });
+
+      panel.addEventListener('drop', (e) => {
+        e.preventDefault();
+        panel.classList.remove('drag-over');
+        const draggedId = (() => {
+          try { return e.dataTransfer.getData('text/plain'); } catch (_e) { return ''; }
+        })();
+        const dragged = draggedId
+          ? document.getElementById(draggedId)
+          : document.querySelector('.term-panel.dragging');
+        if (!dragged || dragged === panel) return;
+        const rect = panel.getBoundingClientRect();
+        const dropAfter = (e.clientX - rect.left) > rect.width / 2;
+        panel.parentNode.insertBefore(dragged, dropAfter ? panel.nextSibling : panel);
+      });
+    }
+
     // ===== Create Terminal Panel =====
     function createTerminalPanel(sessionData) {
       const id = sessionData.id;
@@ -128,6 +187,7 @@
       panel.innerHTML = `
         <div class="panel-header">
           <div class="panel-header-left">
+            <span class="panel-drag-handle" title="Drag to reorder">⋮⋮</span>
             <span class="status-dot" id="dot-${id}" style="background:${getStatusColor(meta.status)}"></span>
             <span class="panel-type">${getTypeLabel(meta.type)}</span>
             ${meta.project ? `<span class="panel-project ${projClass}">${meta.project}</span>` : ''}
@@ -193,6 +253,11 @@
 
       document.getElementById('termGrid').appendChild(panel);
 
+      // Sprint 42 T4: drag/drop reorder. Inject identifier is the session
+      // UUID, so DOM reorder is purely visual — Alt+1…9 (creation-order),
+      // /api/sessions/:id/input, and reply-form targets are unaffected.
+      setupPanelDragDrop(panel);
+
       // Create xterm.js instance
       const terminal = new Terminal({
         fontFamily: "'SF Mono', 'Cascadia Code', 'JetBrains Mono', 'Fira Code', Consolas, monospace",
@@ -265,6 +330,15 @@
                 if (typeof updateRagIndicator === 'function') updateRagIndicator();
               }
               break;
+            case 'projects_changed':
+              // Sprint 42 T4: server broadcasts on POST/DELETE /api/projects.
+              // Sync the in-memory projects map and re-render the dropdown so
+              // other open dashboard tabs stay consistent without a refresh.
+              if (msg.projects && state.config) {
+                state.config.projects = msg.projects;
+                if (typeof rebuildProjectDropdown === 'function') rebuildProjectDropdown();
+              }
+              break;
           }
         } catch (err) { console.error('[client] ws message parse failed:', err); }
       };
@@ -1228,6 +1302,17 @@
         state.focusedId = id;
       }
 
+      // Transfer xterm keyboard focus to the focused panel — without this,
+      // the CSS class is the only thing that changed and keystrokes still
+      // go to whichever element had DOM focus before (often the launcher
+      // input, which submits a NEW terminal on Enter, or the previously
+      // focused panel — leading to "easy to put wrong response into a
+      // chat" reports). Mirrors the focus transfer in focusSessionById.
+      const entry = state.sessions.get(id);
+      if (entry && entry.terminal) {
+        try { entry.terminal.focus(); } catch (err) { /* ignore */ }
+      }
+
       // Re-fit all visible terminals
       requestAnimationFrame(() => fitAll());
     }
@@ -1270,6 +1355,14 @@
                 if (typeof updateRagIndicator === 'function') updateRagIndicator();
               }
               break;
+            case 'projects_changed':
+              // Sprint 42 T4: parity with main WS handler. Project add/remove
+              // broadcasts arrive on every ws client; idempotent.
+              if (msg.projects && state.config) {
+                state.config.projects = msg.projects;
+                if (typeof rebuildProjectDropdown === 'function') rebuildProjectDropdown();
+              }
+              break;
           }
         } catch (err) { console.error('[client] reconnect ws message failed:', err); }
       };
@@ -1541,6 +1634,104 @@
       }
     }
 
+    // ===== Remove Project modal (Sprint 42 T4) =====
+    // Removes a project from ~/.termdeck/config.yaml. Files on disk at the
+    // project's `path` are NEVER touched — the modal copy makes that explicit
+    // so users don't fear data loss. 409 from the server (live PTY sessions
+    // for that project) prompts the user with a force-override.
+    function openRemoveProjectModal() {
+      const modal = document.getElementById('removeProjectModal');
+      const sel = document.getElementById('rpmSelect');
+      sel.innerHTML = '<option value="">— pick a project —</option>';
+      for (const name of Object.keys(state.config.projects || {})) {
+        const opt = document.createElement('option');
+        opt.value = name;
+        opt.textContent = name;
+        sel.appendChild(opt);
+      }
+      sel.value = '';
+      document.getElementById('rpmConfirm').disabled = true;
+      document.getElementById('rpmConfirm').dataset.force = '';
+      document.getElementById('rpmConfirm').textContent = 'remove project';
+      const warn = document.getElementById('rpmWarning');
+      warn.hidden = true;
+      warn.textContent = '';
+      setRpmStatus('', null);
+      modal.classList.add('open');
+      setTimeout(() => sel.focus(), 50);
+    }
+
+    function closeRemoveProjectModal() {
+      document.getElementById('removeProjectModal').classList.remove('open');
+    }
+
+    function setRpmStatus(msg, kind) {
+      const el = document.getElementById('rpmStatus');
+      if (!el) return;
+      el.textContent = msg || '';
+      el.classList.remove('error', 'ok');
+      if (kind) el.classList.add(kind);
+    }
+
+    function onRpmSelectChange() {
+      const name = document.getElementById('rpmSelect').value;
+      const btn = document.getElementById('rpmConfirm');
+      btn.disabled = !name;
+      btn.dataset.force = '';
+      btn.textContent = name ? `remove "${name}"` : 'remove project';
+      const warn = document.getElementById('rpmWarning');
+      warn.hidden = true;
+      warn.textContent = '';
+      setRpmStatus('', null);
+    }
+
+    async function submitRemoveProject() {
+      const name = document.getElementById('rpmSelect').value;
+      if (!name) return;
+      const btn = document.getElementById('rpmConfirm');
+      const force = btn.dataset.force === 'true';
+      btn.disabled = true;
+      setRpmStatus(force ? 'Removing (with force)…' : 'Removing…', null);
+
+      try {
+        const url = `${API}/api/projects/${encodeURIComponent(name)}${force ? '?force=true' : ''}`;
+        const res = await fetch(url, { method: 'DELETE' });
+        const text = await res.text();
+        let body = {};
+        try { body = JSON.parse(text); } catch { body = { error: text }; }
+
+        if (res.status === 409) {
+          const live = body.liveSessions || 0;
+          const warn = document.getElementById('rpmWarning');
+          warn.hidden = false;
+          warn.innerHTML =
+            `<strong>"${name}" has ${live} live PTY session${live === 1 ? '' : 's'}.</strong> ` +
+            `Closing those terminals first is recommended. ` +
+            `Or click <em>remove anyway</em> to force removal — terminals stay open but lose their project tag in config.yaml.`;
+          btn.dataset.force = 'true';
+          btn.textContent = 'remove anyway';
+          btn.disabled = false;
+          setRpmStatus('', null);
+          return;
+        }
+
+        if (!res.ok) {
+          setRpmStatus(`Failed: ${body.error || res.statusText}`, 'error');
+          btn.disabled = false;
+          return;
+        }
+
+        // Success — sync in-memory config + dropdown.
+        state.config.projects = body.projects || {};
+        rebuildProjectDropdown();
+        setRpmStatus(`Removed "${name}" ✓ (files on disk untouched)`, 'ok');
+        setTimeout(() => { closeRemoveProjectModal(); }, 900);
+      } catch (err) {
+        setRpmStatus(`Failed: ${err.message || err}`, 'error');
+        btn.disabled = false;
+      }
+    }
+
     // ===== Orchestration preview modal (Sprint 37 T3) =====
     // The preview button next to the project select shows what
     // `termdeck init --project <name>` would create for the currently
@@ -3703,6 +3894,16 @@
       if (e.key === 'Escape') { e.preventDefault(); closeAddProjectModal(); }
     });
 
+    // Remove-project modal wiring (Sprint 42 T4)
+    document.getElementById('btnRemoveProject').addEventListener('click', openRemoveProjectModal);
+    document.getElementById('rpmCancel').addEventListener('click', closeRemoveProjectModal);
+    document.getElementById('rpmConfirm').addEventListener('click', submitRemoveProject);
+    document.getElementById('rpmSelect').addEventListener('change', onRpmSelectChange);
+    document.querySelector('#removeProjectModal .remove-project-backdrop').addEventListener('click', closeRemoveProjectModal);
+    document.getElementById('removeProjectModal').addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') { e.preventDefault(); closeRemoveProjectModal(); }
+    });
+
     // Orchestration preview modal wiring (Sprint 37 T3)
     document.getElementById('btnPreviewProject').addEventListener('click', openPreviewModal);
     document.getElementById('promptProject').addEventListener('change', syncPreviewButton);
@@ -3759,11 +3960,24 @@
 
     // Keyboard shortcuts
     document.addEventListener('keydown', (e) => {
-      // Tour has priority: Esc exits, ArrowRight/Enter advances, ArrowLeft back
+      // Tour has priority: Esc exits, ArrowRight/Enter advances, ArrowLeft back.
+      // BUT: never swallow Enter/Arrow keys when the user is typing into a
+      // terminal panel or any input/textarea — otherwise terminal Enter
+      // (Claude Code / shell submit) gets eaten by the tour and the user
+      // ends up advancing tour steps when they meant to send a message.
+      // Brad's 2026-04-28 panel-UX report: "Hitting enter from full screen
+      // goes to matrix again" matched this pathway when the v0.10.0 tour
+      // re-fired post-upgrade.
       if (tourState.active) {
-        if (e.key === 'Escape') { e.preventDefault(); endTour(); return; }
-        if (e.key === 'ArrowRight' || e.key === 'Enter') { e.preventDefault(); nextTourStep(); return; }
-        if (e.key === 'ArrowLeft') { e.preventDefault(); prevTourStep(); return; }
+        const tgt = e.target;
+        const tag = tgt?.tagName || '';
+        const inEditable = tag === 'INPUT' || tag === 'TEXTAREA' || tgt?.isContentEditable;
+        const inTerminal = tgt?.closest && tgt.closest('.term-panel');
+        if (!inEditable && !inTerminal) {
+          if (e.key === 'Escape') { e.preventDefault(); endTour(); return; }
+          if (e.key === 'ArrowRight' || e.key === 'Enter') { e.preventDefault(); nextTourStep(); return; }
+          if (e.key === 'ArrowLeft') { e.preventDefault(); prevTourStep(); return; }
+        }
       }
       // Ctrl+Shift+N → new terminal
       if (e.ctrlKey && e.shiftKey && e.key === 'N') {

package/packages/client/public/index.html

@@ -135,6 +135,7 @@
       <option value="">no project</option>
     </select>
     <button class="prompt-add-project" id="btnAddProject" title="Add a new project">+</button>
+    <button class="prompt-remove-project" id="btnRemoveProject" title="Remove a project (files on disk are untouched)">−</button>
     <button class="prompt-preview-project" id="btnPreviewProject" title="Preview orchestration scaffolding for the selected project" disabled>preview</button>
     <button class="prompt-launch" id="promptLaunch">launch</button>
   </div>
@@ -169,6 +170,29 @@
     </div>
   </div>
 
+  <!-- Remove-project modal (Sprint 42 T4). Hidden by default. -->
+  <div class="remove-project-modal" id="removeProjectModal" role="dialog" aria-modal="true" aria-labelledby="rpmTitle">
+    <div class="remove-project-backdrop"></div>
+    <div class="remove-project-card">
+      <h3 id="rpmTitle">Remove a project</h3>
+      <p class="rpm-help">
+        This unregisters the project from <code>~/.termdeck/config.yaml</code>.
+        <strong>Files on disk are untouched</strong> — your source code, git history,
+        and everything at the project's path stay exactly where they are.
+      </p>
+      <label>
+        <span>Project to remove</span>
+        <select id="rpmSelect"><option value="">— pick a project —</option></select>
+      </label>
+      <div class="rpm-warning" id="rpmWarning" hidden></div>
+      <div class="rpm-status" id="rpmStatus"></div>
+      <div class="rpm-actions">
+        <button class="rpm-cancel" id="rpmCancel">cancel</button>
+        <button class="rpm-confirm" id="rpmConfirm" disabled>remove project</button>
+      </div>
+    </div>
+  </div>
+
   <!-- Orchestration-preview modal (Sprint 37 T3). Hidden by default. -->
   <div class="preview-project-modal" id="previewProjectModal" role="dialog" aria-modal="true" aria-labelledby="ppmTitle">
     <div class="preview-project-backdrop"></div>

package/packages/client/public/style.css

@@ -297,7 +297,13 @@
     /* ===== MAIN GRID ===== */
     .grid-container {
       flex: 1;
-      padding: 6px;
+      /* Right padding of 38px reserves the 32px guide-rail collapsed strip
+         (position:fixed; right:0) plus 6px breathing. Without this the
+         rightmost panel's close (×) button sits underneath the guide
+         toggle and becomes unclickable. The expanded-guide state keeps
+         its own backdrop/shadow over panels — that's pre-existing
+         behavior and not affected by this padding. */
+      padding: 6px 38px 6px 6px;
       overflow: hidden;
       display: grid;
       gap: 6px;
@@ -383,6 +389,31 @@
       flex: 1;
     }
 
+    /* Sprint 42 T4 — drag handle for PTY panel reordering. Only the handle
+       is grabbable; the rest of the panel header / xterm body are unaffected. */
+    .panel-drag-handle {
+      cursor: grab;
+      color: var(--tg-text-dim);
+      font-size: 12px;
+      letter-spacing: -2px;
+      user-select: none;
+      flex-shrink: 0;
+      padding: 0 2px;
+      opacity: 0.5;
+      transition: opacity 0.15s;
+    }
+    .panel-drag-handle:hover { opacity: 1; color: var(--tg-accent); }
+    .panel-drag-handle:active { cursor: grabbing; }
+    .term-panel.dragging {
+      opacity: 0.5;
+      outline: 2px dashed var(--tg-accent);
+      outline-offset: -2px;
+    }
+    .term-panel.drag-over {
+      outline: 2px solid var(--tg-accent);
+      outline-offset: -2px;
+    }
+
     .status-dot {
       width: 8px; height: 8px;
       border-radius: 50%;
@@ -762,6 +793,156 @@
       filter: none;
     }
 
+    /* ===== REMOVE PROJECT BUTTON + MODAL (Sprint 42 T4) ===== */
+    .prompt-remove-project {
+      background: var(--tg-bg);
+      border: 1px solid var(--tg-border);
+      color: var(--tg-text-dim);
+      font-size: 18px;
+      line-height: 1;
+      padding: 0;
+      width: 26px;
+      height: 26px;
+      border-radius: var(--tg-radius-sm);
+      cursor: pointer;
+      font-family: var(--tg-sans);
+      transition: all 0.15s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-left: 4px;
+    }
+    .prompt-remove-project:hover {
+      border-color: var(--tg-red, #f7768e);
+      color: var(--tg-red, #f7768e);
+    }
+    .remove-project-modal {
+      display: none;
+      position: fixed;
+      inset: 0;
+      z-index: 3000;
+      align-items: center;
+      justify-content: center;
+    }
+    .remove-project-modal.open { display: flex; }
+    .remove-project-backdrop {
+      position: absolute;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.72);
+    }
+    .remove-project-card {
+      position: relative;
+      background: var(--tg-surface);
+      border: 1px solid var(--tg-accent-dim);
+      border-radius: 10px;
+      padding: 22px 24px 18px;
+      width: 460px;
+      max-width: calc(100vw - 40px);
+      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
+      font-family: var(--tg-sans);
+      color: var(--tg-text);
+    }
+    .remove-project-card h3 {
+      margin: 0 0 4px;
+      font-size: 16px;
+      color: var(--tg-accent);
+    }
+    .remove-project-card .rpm-help {
+      margin: 0 0 14px;
+      font-size: 12px;
+      color: var(--tg-text-dim);
+      line-height: 1.5;
+    }
+    .remove-project-card .rpm-help code {
+      background: var(--tg-bg);
+      padding: 1px 5px;
+      border-radius: 3px;
+      font-family: var(--tg-mono);
+      font-size: 11px;
+    }
+    .remove-project-card .rpm-help strong {
+      color: var(--tg-green);
+    }
+    .remove-project-card label {
+      display: block;
+      margin-bottom: 10px;
+    }
+    .remove-project-card label > span {
+      display: block;
+      font-size: 11px;
+      color: var(--tg-text-dim);
+      margin-bottom: 3px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    .remove-project-card select {
+      width: 100%;
+      background: var(--tg-bg);
+      border: 1px solid var(--tg-border);
+      color: var(--tg-text);
+      font-size: 13px;
+      padding: 7px 10px;
+      border-radius: var(--tg-radius-sm);
+      font-family: var(--tg-mono);
+      box-sizing: border-box;
+    }
+    .remove-project-card select:focus {
+      outline: none;
+      border-color: var(--tg-accent-dim);
+    }
+    .remove-project-card .rpm-warning {
+      background: rgba(247, 118, 142, 0.08);
+      border: 1px solid rgba(247, 118, 142, 0.4);
+      color: var(--tg-text);
+      font-size: 12px;
+      padding: 8px 10px;
+      border-radius: 4px;
+      margin: 6px 0 8px;
+      line-height: 1.5;
+    }
+    .remove-project-card .rpm-status {
+      font-size: 12px;
+      min-height: 16px;
+      margin: 4px 0 8px;
+      color: var(--tg-text-dim);
+    }
+    .remove-project-card .rpm-status.error { color: var(--tg-red); }
+    .remove-project-card .rpm-status.ok { color: var(--tg-green); }
+    .remove-project-card .rpm-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+      margin-top: 6px;
+    }
+    .remove-project-card button {
+      font-size: 12px;
+      font-weight: 600;
+      padding: 6px 16px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-family: var(--tg-sans);
+      border: 1px solid var(--tg-border);
+    }
+    .remove-project-card .rpm-cancel {
+      background: transparent;
+      color: var(--tg-text-dim);
+    }
+    .remove-project-card .rpm-cancel:hover {
+      color: var(--tg-text);
+      border-color: var(--tg-border-active);
+    }
+    .remove-project-card .rpm-confirm {
+      background: var(--tg-red, #f7768e);
+      color: var(--tg-bg);
+      border-color: var(--tg-red, #f7768e);
+    }
+    .remove-project-card .rpm-confirm:hover { filter: brightness(1.1); }
+    .remove-project-card .rpm-confirm:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      filter: none;
+    }
+
     /* ===== Orchestration preview button + modal (Sprint 37 T3) ===== */
     .prompt-preview-project {
       background: transparent;
@@ -3439,6 +3620,15 @@
       padding: 24px;
       text-align: center;
     }
+    /* Sprint 41 T3 fixed the JS race but missed the CSS specificity gotcha:
+       `.graph-loading { display: flex }` above wins over the UA default
+       `[hidden] { display: none }` (class > attribute). Result: setting
+       `el.hidden = true` from JS did nothing visually, and "Loading graph…"
+       kept rendering behind "No memories yet". Explicit override below. */
+    .graph-loading[hidden],
+    .graph-empty[hidden] {
+      display: none;
+    }
     .graph-loading-spinner {
       width: 28px;
       height: 28px;