npm - @ctrl-spc/cs - Versions diffs - 0.1.0 → 0.3.0 - Mend

@ctrl-spc/cs 0.1.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/dist/companion-ui.js ADDED Viewed

@@ -0,0 +1,1058 @@
+import { WEB_APP_URL } from './env.js';
+/**
+ * The Companion single-page app: sign in, sign out, projects list, map a
+ * project's per-machine folder + git remote. Styled to match the web app
+ * (tokens + component CSS copied from web/src/styles). Fully self-contained —
+ * no external fonts/scripts — so it satisfies the served page's strict CSP
+ * (default-src 'none'; connect-src 'self').
+ *
+ * User-controlled text (project names, remotes, paths) is written with DOM
+ * textContent, never innerHTML, so a hostile project name can't inject markup.
+ */
+export function renderCompanionUi(token) {
+    return `<!doctype html>
+<html lang="en" data-theme="system">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>CTRL+SPC — Companion</title>
+<style>
+:root {
+  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
+  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
+  --text-xs: 0.6875rem; --text-sm: 0.8125rem; --text-md: 0.875rem;
+  --text-lg: 1rem; --text-xl: 1.1875rem; --text-2xl: 1.4375rem;
+  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
+  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem;
+  --r-sm: 5px; --r-md: 8px; --r-lg: 12px;
+  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --t-fast: 150ms; --t-med: 220ms;
+  --ctl-h: 2rem; --titlebar-h: 46px;
+  --z-overlay-backdrop: 300; --z-overlay: 310;
+}
+:root, :root[data-theme="light"] {
+  color-scheme: light;
+  --bg: oklch(1 0 0); --surface: oklch(0.972 0 0); --surface-2: oklch(0.942 0 0);
+  --border: oklch(0.898 0 0); --border-strong: oklch(0.78 0 0);
+  --ink: oklch(0.225 0 0); --muted: oklch(0.465 0 0); --faint: oklch(0.60 0 0);
+  --primary: oklch(0.225 0 0); --primary-hover: oklch(0.34 0 0);
+  --primary-soft: oklch(0.225 0 0 / 0.08); --on-primary: oklch(1 0 0);
+  --danger: oklch(0.20 0 0); --danger-soft: oklch(0.20 0 0 / 0.08);
+  --ok: oklch(0.30 0 0);
+  --card-shadow: 0 1px 2px oklch(0 0 0 / 0.06), 0 1px 1px oklch(0 0 0 / 0.04);
+  --overlay-shadow: 0 12px 40px oklch(0 0 0 / 0.18), 0 2px 8px oklch(0 0 0 / 0.10);
+  --backdrop: oklch(0.2 0 0 / 0.35);
+}
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --bg: oklch(0.245 0 0); --surface: oklch(0.285 0 0); --surface-2: oklch(0.33 0 0);
+  --border: oklch(0.38 0 0); --border-strong: oklch(0.47 0 0);
+  --ink: oklch(0.93 0 0); --muted: oklch(0.72 0 0); --faint: oklch(0.58 0 0);
+  --primary: oklch(0.93 0 0); --primary-hover: oklch(0.85 0 0);
+  --primary-soft: oklch(0.93 0 0 / 0.10); --on-primary: oklch(0.20 0 0);
+  --danger: oklch(0.90 0 0); --danger-soft: oklch(0.90 0 0 / 0.12);
+  --ok: oklch(0.85 0 0);
+  --card-shadow: 0 1px 2px oklch(0 0 0 / 0.30), 0 1px 1px oklch(0 0 0 / 0.20);
+  --overlay-shadow: 0 12px 40px oklch(0 0 0 / 0.5), 0 2px 8px oklch(0 0 0 / 0.3);
+  --backdrop: oklch(0.10 0 0 / 0.55);
+}
+@media (prefers-color-scheme: dark) {
+  :root[data-theme="system"] {
+    color-scheme: dark;
+    --bg: oklch(0.245 0 0); --surface: oklch(0.285 0 0); --surface-2: oklch(0.33 0 0);
+    --border: oklch(0.38 0 0); --border-strong: oklch(0.47 0 0);
+    --ink: oklch(0.93 0 0); --muted: oklch(0.72 0 0); --faint: oklch(0.58 0 0);
+    --primary: oklch(0.93 0 0); --primary-hover: oklch(0.85 0 0);
+    --primary-soft: oklch(0.93 0 0 / 0.10); --on-primary: oklch(0.20 0 0);
+    --danger: oklch(0.90 0 0); --danger-soft: oklch(0.90 0 0 / 0.12); --ok: oklch(0.85 0 0);
+    --card-shadow: 0 1px 2px oklch(0 0 0 / 0.30), 0 1px 1px oklch(0 0 0 / 0.20);
+    --overlay-shadow: 0 12px 40px oklch(0 0 0 / 0.5), 0 2px 8px oklch(0 0 0 / 0.3);
+    --backdrop: oklch(0.10 0 0 / 0.55);
+  }
+}
+*, *::before, *::after { box-sizing: border-box; }
+html, body { height: 100%; }
+body {
+  margin: 0; font-family: var(--font-ui); font-size: var(--text-md);
+  line-height: 1.45; color: var(--ink); background: var(--bg);
+  -webkit-font-smoothing: antialiased;
+}
+h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
+p { margin: 0; }
+button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
+input { font: inherit; color: inherit; }
+a { color: var(--primary); text-decoration: none; }
+a:hover { text-decoration: underline; }
+code, .mono { font-family: var(--font-mono); }
+.muted { color: var(--muted); }
+:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; border-radius: var(--r-sm); }
+::placeholder { color: var(--muted); opacity: 1; }
+[hidden] { display: none !important; }
+.btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
+  height: var(--ctl-h); padding: 0 12px; border-radius: var(--r-md);
+  font-size: var(--text-sm); font-weight: 500;
+  border: 1px solid var(--border); background: var(--surface);
+  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
+  white-space: nowrap;
+}
+.btn:hover { background: var(--surface-2); }
+.btn:disabled { opacity: 0.5; cursor: default; }
+.btn-primary { background: var(--primary); border-color: transparent; color: var(--on-primary); }
+.btn-primary:hover { background: var(--primary-hover); }
+.btn-primary:disabled:hover { background: var(--primary); }
+.btn-ghost { border-color: transparent; background: transparent; }
+.btn-ghost:hover { background: var(--surface-2); }
+.input {
+  width: 100%; height: var(--ctl-h); padding: 0 10px; border-radius: var(--r-md);
+  border: 1px solid var(--border); background: var(--bg); font-size: var(--text-md);
+  transition: border-color var(--t-fast) var(--ease-out);
+}
+.input:hover { border-color: var(--border-strong); }
+.input:focus { outline: none; border-color: var(--primary); }
+.field { display: flex; flex-direction: column; gap: var(--sp-1); }
+.field > label { font-size: var(--text-sm); font-weight: 500; color: var(--muted); }
+.form-error { color: var(--danger); font-size: var(--text-sm); min-height: 1.1em; }
+.logo { display: inline-flex; align-items: center; gap: 4px; user-select: none; }
+.logo-key {
+  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em;
+  padding: 2px 7px 3px; border: 1px solid var(--border-strong); border-bottom-width: 2.5px;
+  border-radius: 5px; background: var(--surface); color: var(--ink);
+}
+.logo-space { background: var(--primary); color: var(--on-primary); border-color: transparent; border-bottom-color: oklch(0 0 0 / 0.25); }
+.logo-plus { color: var(--muted); font-size: var(--text-xs); font-weight: 600; }
+/* --- sign in --- */
+.auth { min-height: 100%; display: grid; place-items: center; background: var(--bg); padding: var(--sp-5); }
+.auth-card {
+  width: min(400px, 100%); display: flex; flex-direction: column; gap: var(--sp-3);
+  padding: var(--sp-6); border: 1px solid var(--border); border-radius: var(--r-lg);
+  background: var(--surface); box-shadow: var(--card-shadow);
+}
+.auth-title { font-size: var(--text-2xl); margin-top: var(--sp-2); }
+.auth-sub { color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
+.auth-form { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }
+.auth-submit { justify-content: center; padding: 8px 12px; font-size: var(--text-md); }
+.auth-switch { align-self: flex-start; color: var(--primary); font-size: var(--text-sm); font-weight: 500; }
+/* --- home --- */
+.titlebar {
+  display: flex; align-items: center; gap: var(--sp-4); height: var(--titlebar-h);
+  padding: 0 var(--sp-4); border-bottom: 1px solid var(--border); background: var(--surface);
+}
+.home { max-width: 720px; margin: 0 auto; padding: var(--sp-6) var(--sp-4) var(--sp-7); }
+.home-title { font-size: var(--text-xl); }
+.home-sub { font-size: var(--text-sm); margin-top: var(--sp-1); }
+.projects { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-5); }
+.empty { color: var(--muted); font-size: var(--text-sm); padding: var(--sp-6) 0; text-align: center; }
+.project {
+  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
+  box-shadow: var(--card-shadow); overflow: hidden;
+}
+.project-head { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); }
+.project-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
+.project-name { font-weight: 600; overflow-wrap: anywhere; }
+.project-remote { font-size: var(--text-xs); color: var(--muted); overflow-wrap: anywhere; }
+.project-remote.is-local { font-style: italic; }
+.project-status { font-size: var(--text-xs); color: var(--muted); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.project-status.is-mapped { color: var(--ok); }
+.project-actions { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
+/* --- shared dialog (copied from web Dialog: fixed header + body + footer) --- */
+.overlay-backdrop {
+  position: fixed; inset: 0; background: var(--backdrop);
+  z-index: var(--z-overlay-backdrop); display: flex; align-items: center; justify-content: center;
+  animation: overlay-fade var(--t-fast) var(--ease-out);
+}
+.overlay-center {
+  margin: auto; width: min(560px, 94vw); max-height: 86vh;
+  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg);
+  box-shadow: var(--overlay-shadow); z-index: var(--z-overlay);
+  display: flex; flex-direction: column; animation: overlay-rise var(--t-med) var(--ease-out);
+}
+.overlay-center.is-compact { width: min(420px, calc(100vw - 32px)); }
+.dialog { display: flex; flex: 1; min-height: 0; flex-direction: column; }
+.dialog-header {
+  display: flex; flex: none; align-items: flex-start; justify-content: space-between;
+  gap: var(--sp-4); padding: var(--sp-4) var(--sp-5);
+  border-bottom: 1px solid var(--border); background: var(--surface);
+  border-radius: var(--r-lg) var(--r-lg) 0 0;
+}
+.dialog-heading { display: flex; min-width: 0; flex-direction: column; gap: var(--sp-1); }
+.dialog-heading h2 { margin: 0; font-size: var(--text-lg); overflow-wrap: anywhere; }
+.dialog-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-5); }
+.dialog-body > * + * { margin-top: var(--sp-4); }
+.dialog-footer {
+  display: flex; flex: none; align-items: center; justify-content: flex-end;
+  gap: var(--sp-2); padding: var(--sp-3) var(--sp-5);
+  border-top: 1px solid var(--border); background: var(--surface);
+  border-radius: 0 0 var(--r-lg) var(--r-lg);
+}
+.dialog-close {
+  display: flex; flex: none; align-items: center; justify-content: center;
+  width: 32px; height: 32px; border: 0; border-radius: var(--r-sm);
+  background: transparent; color: var(--muted); cursor: pointer;
+}
+.dialog-close:hover, .dialog-close:focus-visible { color: var(--ink); background: var(--surface-2); }
+@keyframes overlay-fade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes overlay-rise { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
+.folder-choose { display: flex; align-items: center; gap: var(--sp-2); }
+.folder-path { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: var(--text-sm); color: var(--ink); }
+.folder-path.is-empty { color: var(--faint); }
+.folder-path.is-warn { color: var(--danger); }
+/* --- codebases (Phase 1 add + Phase 2 per-machine availability) --- */
+.project-codebases { padding: var(--sp-3) var(--sp-4) var(--sp-4); border-top: 1px solid var(--border); }
+.project-codebases-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
+.project-codebases-title { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
+.codebases { display: flex; flex-direction: column; gap: var(--sp-2); }
+.codebase { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
+.codebase-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.codebase-name { font-weight: 600; overflow-wrap: anywhere; }
+.codebase-remote { font-size: var(--text-xs); color: var(--muted); overflow-wrap: anywhere; }
+/* The local folder for a located codebase — shown ONLY in this local companion
+   UI (localhost), never sent to the cloud. */
+.codebase-path { font-size: var(--text-xs); color: var(--ink); overflow-wrap: anywhere; }
+.codebase-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
+.codebases-empty { font-size: var(--text-sm); color: var(--faint); }
+.form-note { color: var(--ok); font-size: var(--text-sm); min-height: 1.1em; }
+.empty-cta { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); text-align: center; padding: var(--sp-6) var(--sp-4); border: 1px dashed var(--border-strong); border-radius: var(--r-md); }
+.empty-cta.is-compact { padding: var(--sp-5) var(--sp-4); gap: var(--sp-2); }
+.empty-cta-title { font-weight: 600; }
+.empty-cta .muted { font-size: var(--text-sm); max-width: 46ch; }
+.pill {
+  display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap;
+  font-size: var(--text-xs); font-weight: 500; padding: 2px 10px; border-radius: 20px;
+  border: 1px solid var(--border); color: var(--muted);
+}
+.pill-ok { color: var(--ok); border-color: var(--ok); }
+.locate-match { min-height: 1.2em; }
+/* --- agent tools badge (feature 05: passive, read-only) --- */
+.agent-tools {
+  display: flex; align-items: center; gap: var(--sp-3);
+  border: 1px solid var(--border); border-radius: var(--r-md);
+  padding: var(--sp-3) var(--sp-4); background: var(--surface);
+}
+.agent-tools-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--faint); }
+.agent-tools-dot.is-on { background: var(--ok); }
+/* Amber "connecting…" while async registration is in flight (no amber token). */
+.agent-tools-dot.is-wait { background: #e0a020; }
+.agent-tools-title { font-weight: 600; }
+.agent-tools-sub { font-size: var(--text-xs); color: var(--muted); margin-top: 2px; }
+</style>
+</head>
+<body>
+<div id="app"></div>
+<script>
+const TOKEN = ${JSON.stringify(token)};
+const WEB_URL = ${JSON.stringify(WEB_APP_URL)};
+const app = document.getElementById('app');
+function keycap(text, space) {
+  const s = document.createElement('span');
+  s.className = 'logo-key' + (space ? ' logo-space' : '');
+  s.textContent = text;
+  return s;
+}
+function logo() {
+  const l = document.createElement('span');
+  l.className = 'logo';
+  l.setAttribute('aria-label', 'CTRL+SPC');
+  const plus = document.createElement('span');
+  plus.className = 'logo-plus';
+  plus.textContent = '+';
+  l.append(keycap('ctrl'), plus, keycap('spc', true));
+  return l;
+}
+function el(tag, cls, text) {
+  const n = document.createElement(tag);
+  if (cls) n.className = cls;
+  if (text != null) n.textContent = text;
+  return n;
+}
+async function api(path, opts) {
+  opts = opts || {};
+  const headers = Object.assign({ 'x-ctrl-spc-token': TOKEN }, opts.headers || {});
+  if (opts.body) headers['Content-Type'] = 'application/json';
+  const res = await fetch(path, { method: opts.method || 'GET', headers: headers, body: opts.body, cache: 'no-store' });
+  const data = await res.json().catch(function () { return {}; });
+  return { ok: res.ok, status: res.status, data: data };
+}
+async function boot() {
+  const r = await api('/api/session');
+  if (r.data && r.data.signedIn) renderHome(r.data);
+  else renderSignIn(r.data || {});
+}
+/** The passive "Agent tools" badge (feature 05). Read-only: no button, no
+ *  action. Reflects the lifecycle state the server computed in /api/session —
+ *  connecting (amber, async registration in flight) / connected / couldn't-
+ *  connect, plus the signed-out and no-agent off-states. */
+function agentToolsBadge(state) {
+  state = state || { connected: false, reason: 'signed-out', agent: '', server: 'ctrl-spc' };
+  const reason = state.reason;
+  const box = el('div', 'agent-tools');
+  let dotCls = 'agent-tools-dot';
+  if (reason === 'connected') dotCls += ' is-on';
+  else if (reason === 'connecting') dotCls += ' is-wait';
+  const dot = el('span', dotCls);
+  const body = el('div');
+  let title, sub;
+  if (reason === 'connected') {
+    title = 'Agent tools: connected \\u2713';
+    sub = (state.agent || 'Claude') + ' \\u00b7 ' + (state.server || 'ctrl-spc');
+  } else if (reason === 'connecting') {
+    title = 'Agent tools: connecting\\u2026';
+    sub = state.agent || '';
+  } else if (reason === 'failed') {
+    title = 'Agent tools: not connected';
+    sub = "couldn't connect the tools \\u2014 will retry";
+  } else if (reason === 'no-agent') {
+    title = 'Agent tools: not connected';
+    sub = 'No supported agent (Claude or Codex) found on this machine';
+  } else {
+    title = 'Agent tools: not connected';
+    sub = 'sign in to connect';
+  }
+  body.append(el('div', 'agent-tools-title', title));
+  body.append(el('div', 'agent-tools-sub mono', sub));
+  box.append(dot, body);
+  return box;
+}
+// The badge must flip connecting\\u2192connected on its own (Claude registers in
+// ~7s) with no page reload. A light 2s poll of /api/session swaps ONLY the badge
+// element in place — never a full home re-render, which would disrupt the
+// codebases list, open dialogs, and focus. Guards against overlapping fetches and
+// stops itself once the badge leaves the DOM (home torn down).
+let badgePollTimer = null;
+let badgePolling = false;
+function stopBadgePoll() {
+  if (badgePollTimer) { clearInterval(badgePollTimer); badgePollTimer = null; }
+}
+async function pollBadgeOnce() {
+  if (badgePolling) return;
+  const badge = document.getElementById('agent-tools');
+  if (!badge) { stopBadgePoll(); return; }
+  badgePolling = true;
+  try {
+    const r = await api('/api/session');
+    // Home may have been torn down while the fetch was in flight.
+    if (!badge.isConnected) return;
+    if (!(r.data && r.data.signedIn)) { stopBadgePoll(); return; }
+    const fresh = agentToolsBadge(r.data.agentTools);
+    fresh.id = 'agent-tools';
+    fresh.style.marginBottom = 'var(--sp-5)';
+    badge.replaceWith(fresh);
+  } catch (e) {
+    /* transient — try again next tick */
+  } finally {
+    badgePolling = false;
+  }
+}
+function startBadgePoll() {
+  stopBadgePoll();
+  badgePollTimer = setInterval(pollBadgeOnce, 2000);
+}
+function renderSignIn(session) {
+  stopBadgePoll(); // the sign-in badge is static — no lifecycle to poll
+  app.replaceChildren();
+  const wrap = el('div', 'auth');
+  const card = el('div', 'auth-card');
+  card.append(logo());
+  card.append(el('h1', 'auth-title', 'Sign in'));
+  card.append(el('p', 'auth-sub', 'The board your agents report to. Sign in to link this computer to your account.'));
+  const form = el('form', 'auth-form');
+  const emailField = el('div', 'field');
+  const emailLabel = el('label', null, 'Email'); emailLabel.htmlFor = 'email';
+  const email = el('input', 'input'); email.id = 'email'; email.type = 'email'; email.required = true;
+  email.autocomplete = 'email'; email.placeholder = 'you@example.com';
+  emailField.append(emailLabel, email);
+  const pwField = el('div', 'field');
+  const pwLabel = el('label', null, 'Password'); pwLabel.htmlFor = 'password';
+  const pw = el('input', 'input'); pw.id = 'password'; pw.type = 'password'; pw.required = true;
+  pw.autocomplete = 'current-password'; pw.placeholder = '\\u2022\\u2022\\u2022\\u2022\\u2022\\u2022\\u2022\\u2022';
+  pwField.append(pwLabel, pw);
+  const error = el('div', 'form-error');
+  const submit = el('button', 'btn btn-primary auth-submit', 'Sign in'); submit.type = 'submit';
+  form.append(emailField, pwField, error, submit);
+  form.addEventListener('submit', async function (e) {
+    e.preventDefault();
+    error.textContent = '';
+    submit.disabled = true; submit.textContent = 'Signing in';
+    const r = await api('/api/login', { method: 'POST', body: JSON.stringify({ email: email.value, password: pw.value }) });
+    if (r.ok && r.data.ok) { boot(); return; }
+    error.textContent = (r.data && r.data.error) || 'Sign-in failed.';
+    submit.disabled = false; submit.textContent = 'Sign in';
+  });
+  const signup = el('a', 'auth-switch', 'Sign up on the web \\u2197');
+  signup.href = WEB_URL; signup.target = '_blank'; signup.rel = 'noopener noreferrer';
+  card.append(form, signup, agentToolsBadge(session.agentTools));
+  wrap.append(card);
+  app.append(wrap);
+}
+function renderHome(session) {
+  app.replaceChildren();
+  const bar = el('header', 'titlebar');
+  bar.append(logo());
+  const spacer = el('span', null); spacer.style.flex = '1'; bar.append(spacer);
+  const help = el('button', 'btn btn-ghost', 'How it works');
+  help.addEventListener('click', function () { openHowItWorks(help); });
+  bar.append(help);
+  bar.append(el('span', 'mono muted', session.email || ''));
+  const web = el('a', 'btn', 'Open the web app \\u2197');
+  web.href = WEB_URL; web.target = '_blank'; web.rel = 'noopener noreferrer';
+  bar.append(web);
+  const out = el('button', 'btn btn-ghost', 'Sign out');
+  out.addEventListener('click', async function () {
+    out.disabled = true;
+    await api('/api/logout', { method: 'POST' });
+    boot();
+  });
+  bar.append(out);
+  const main = el('main', 'home');
+  const tools = agentToolsBadge(session.agentTools);
+  tools.id = 'agent-tools';
+  tools.style.marginBottom = 'var(--sp-5)';
+  main.append(tools);
+  main.append(el('h1', 'home-title', 'Projects'));
+  const sub = el('p', 'home-sub muted');
+  sub.append(document.createTextNode('Map each project to its folder on '));
+  sub.append(el('strong', null, session.machineName || 'this computer'));
+  sub.append(document.createTextNode('.'));
+  main.append(sub);
+  const list = el('div', 'projects'); list.id = 'projects';
+  main.append(list);
+  app.append(bar, main);
+  loadProjects(list);
+  // Keep the badge honest as async registration settles (connecting \\u2192 connected),
+  // swapping only the badge element — never the whole home view.
+  startBadgePoll();
+}
+async function loadProjects(list) {
+  list.replaceChildren(el('p', 'empty', 'Loading projects\\u2026'));
+  const r = await api('/api/projects');
+  if (!r.ok) { list.replaceChildren(el('p', 'empty', (r.data && r.data.error) || 'Could not load projects.')); return; }
+  const projects = (r.data && r.data.projects) || [];
+  if (projects.length === 0) {
+    const box = el('div', 'empty-cta');
+    box.append(el('div', 'empty-cta-title', 'No projects yet'));
+    box.append(el('p', 'muted', 'A project holds your codebases. Create your first one in the web app, then come back here to attach a codebase.'));
+    const cta = el('a', 'btn btn-primary', 'Create your first project in the web app \\u2197');
+    cta.href = WEB_URL; cta.target = '_blank'; cta.rel = 'noopener noreferrer';
+    box.append(cta);
+    list.replaceChildren(box);
+    return;
+  }
+  list.replaceChildren.apply(list, projects.map(function (p) { return projectRow(p, list); }));
+}
+function xIcon() {
+  const NS = 'http://www.w3.org/2000/svg';
+  const svg = document.createElementNS(NS, 'svg');
+  svg.setAttribute('width', '14'); svg.setAttribute('height', '14');
+  svg.setAttribute('viewBox', '0 0 16 16'); svg.setAttribute('fill', 'none');
+  svg.setAttribute('stroke', 'currentColor'); svg.setAttribute('stroke-width', '1.5');
+  svg.setAttribute('stroke-linecap', 'round'); svg.setAttribute('stroke-linejoin', 'round');
+  svg.setAttribute('aria-hidden', 'true');
+  const path = document.createElementNS(NS, 'path');
+  path.setAttribute('d', 'M4 4l8 8M12 4l-8 8');
+  svg.append(path);
+  return svg;
+}
+function projectRow(p, list) {
+  const row = el('div', 'project');
+  const head = el('div', 'project-head');
+  const meta = el('div', 'project-meta');
+  meta.append(el('strong', 'project-name', p.name));
+  const hasRemote = !!p.gitRemoteUrl && p.gitRemoteUrl.indexOf('local:v1:') !== 0;
+  meta.append(el('code', 'project-remote' + (hasRemote ? '' : ' is-local'), hasRemote ? p.gitRemoteUrl : 'No Git remote'));
+  head.append(meta);
+  const actions = el('div', 'project-actions');
+  const status = el('span', 'project-status' + (p.localPath ? ' is-mapped' : ''), p.localPath ? p.localPath : 'Not mapped');
+  const mapBtn = el('button', 'btn', p.localPath ? 'Edit' : 'Map');
+  mapBtn.addEventListener('click', function () { openMapDialog(p, list, mapBtn); });
+  actions.append(status, mapBtn);
+  head.append(actions);
+  row.append(head);
+  // --- codebases on this project (Phase 1) ---
+  const section = el('div', 'project-codebases');
+  const secHead = el('div', 'project-codebases-head');
+  secHead.append(el('span', 'project-codebases-title', 'Codebases'));
+  const cbList = el('div', 'codebases');
+  const addBtn = el('button', 'btn', 'Add codebase');
+  addBtn.addEventListener('click', function () {
+    openAddCodebaseDialog(p, function () { loadCodebases(p, cbList); }, addBtn);
+  });
+  secHead.append(addBtn);
+  section.append(secHead, cbList);
+  row.append(section);
+  loadCodebases(p, cbList);
+  return row;
+}
+async function loadCodebases(p, container) {
+  container.replaceChildren(el('p', 'codebases-empty', 'Loading\\u2026'));
+  const r = await api('/api/projects/codebases?projectId=' + encodeURIComponent(p.id));
+  if (!r.ok) {
+    container.replaceChildren(el('p', 'codebases-empty', (r.data && r.data.error) || 'Could not load codebases.'));
+    return;
+  }
+  const codebases = (r.data && r.data.codebases) || [];
+  if (codebases.length === 0) {
+    const box = el('div', 'empty-cta is-compact');
+    box.append(el('p', 'muted', 'No codebases yet. Point ' + p.name + ' at a folder on this computer that has a git remote.'));
+    const cta = el('button', 'btn btn-primary', 'Add your first codebase');
+    cta.type = 'button';
+    cta.addEventListener('click', function () {
+      // Route return-focus to a control that SURVIVES the codebase-list refresh
+      // (this cta is inside the container and gets destroyed by loadCodebases),
+      // mirroring the Remove button's focus guard.
+      const section = container.closest('.project-codebases');
+      const survivingAdd = section && section.querySelector('.project-codebases-head button');
+      openAddCodebaseDialog(p, function () { loadCodebases(p, container); }, survivingAdd || cta);
+    });
+    box.append(cta);
+    container.replaceChildren(box);
+    return;
+  }
+  container.replaceChildren.apply(container, codebases.map(function (c) { return codebaseRow(c, p, container); }));
+}
+/** Screen 7: a codebase row shows whether THIS computer has it. Located → the
+ *  local folder (shown only in this local UI, never sent to the cloud) + an
+ *  "On this computer" pill. Not located → the git remote + a "Locate…"
+ *  action that opens the locate dialog for this codebase. Screen 14: every row
+ *  also carries a "Remove" control (parity with the web) alongside that. */
+function codebaseRow(c, p, container) {
+  const row = el('div', 'codebase');
+  const meta = el('div', 'codebase-meta');
+  meta.append(el('strong', 'codebase-name', c.name));
+  if (c.localPath) {
+    // Local path — companion-only. Displaying it here never uploads it.
+    meta.append(el('code', 'codebase-path mono', c.localPath));
+  } else {
+    meta.append(el('code', 'codebase-remote mono', c.gitRemoteUrl));
+  }
+  row.append(meta);
+  const actions = el('div', 'codebase-actions');
+  if (c.localPath) {
+    actions.append(el('span', 'pill pill-ok', 'On this computer'));
+  } else {
+    const locateBtn = el('button', 'btn', 'Locate\\u2026');
+    locateBtn.addEventListener('click', function () {
+      openLocateDialog(p, c, function () { loadCodebases(p, container); }, locateBtn);
+    });
+    actions.append(locateBtn);
+  }
+  const removeBtn = el('button', 'btn', 'Remove');
+  removeBtn.addEventListener('click', function () {
+    openRemoveCodebaseDialog(p, c, function () {
+      loadCodebases(p, container);
+      // The refresh destroys this row's Remove button, so send focus to a
+      // SURVIVING control — the section's "Add codebase" button — instead of a
+      // detached node (which would drop focus to <body>).
+      const section = container.closest('.project-codebases');
+      const addBtn = section && section.querySelector('.project-codebases-head button');
+      if (addBtn && addBtn.focus) addBtn.focus();
+    }, removeBtn);
+  });
+  actions.append(removeBtn);
+  row.append(actions);
+  return row;
+}
+/** Screen 14: confirm removing a codebase from a project. Removal is org-wide —
+ *  it deletes the shared codebase row for everyone in the org — but it does NOT
+ *  un-locate this computer: the local folder mapping stays, so a re-add shows it
+ *  located again. Mirrors the shared dialog shell (openLocateDialog). */
+function openRemoveCodebaseDialog(p, codebase, onRemoved, returnFocus) {
+  const backdrop = el('div', 'overlay-backdrop');
+  const panel = el('div', 'overlay-center is-compact');
+  const form = document.createElement('form');
+  form.className = 'dialog';
+  const header = el('header', 'dialog-header');
+  const heading = el('div', 'dialog-heading');
+  heading.append(el('h2', null, 'Remove \\u201c' + codebase.name + '\\u201d from ' + p.name + '?'));
+  const closeBtn = el('button', 'dialog-close');
+  closeBtn.type = 'button'; closeBtn.setAttribute('aria-label', 'Close');
+  closeBtn.append(xIcon());
+  header.append(heading, closeBtn);
+  const body = el('div', 'dialog-body');
+  body.append(el('p', 'muted', "It'll be removed for everyone in the org. Your local folder mapping stays, and you can re-add it anytime."));
+  const error = el('div', 'form-error');
+  body.append(error);
+  const footer = el('div', 'dialog-footer');
+  const cancelBtn = el('button', 'btn', 'Cancel'); cancelBtn.type = 'button';
+  const confirmBtn = el('button', 'btn btn-primary', 'Remove codebase'); confirmBtn.type = 'submit';
+  footer.append(cancelBtn, confirmBtn);
+  form.append(header, body, footer);
+  panel.append(form);
+  backdrop.append(panel);
+  document.body.append(backdrop);
+  // Focus Cancel, not the destructive Remove — a reflexive Enter/Space must not
+  // delete (matches the web's destructive-confirm behavior).
+  cancelBtn.focus();
+  function close(skipFocus) {
+    backdrop.remove();
+    document.removeEventListener('keydown', onKey);
+    // On a successful remove the caller re-homes focus to a surviving control,
+    // so skip returning focus here — the row's Remove trigger is destroyed by
+    // the refresh and focusing it would drop focus to <body>.
+    if (!skipFocus && returnFocus && returnFocus.focus) returnFocus.focus();
+  }
+  function onKey(e) { if (e.key === 'Escape') { e.preventDefault(); close(); } }
+  document.addEventListener('keydown', onKey);
+  backdrop.addEventListener('mousedown', function (e) { if (e.target === backdrop) close(); });
+  // Wrap so the click event isn't passed as close()'s skipFocus arg — cancel and
+  // the X keep returning focus to the Remove trigger (the row survives).
+  closeBtn.addEventListener('click', function () { close(); });
+  cancelBtn.addEventListener('click', function () { close(); });
+  form.addEventListener('submit', async function (e) {
+    e.preventDefault();
+    error.textContent = '';
+    confirmBtn.disabled = true; confirmBtn.textContent = 'Removing';
+    const r = await api('/api/projects/remove-codebase', { method: 'POST', body: JSON.stringify({ codebaseId: codebase.id }) });
+    confirmBtn.disabled = false; confirmBtn.textContent = 'Remove codebase';
+    if (!r.ok) { error.textContent = (r.data && r.data.error) || 'Could not remove the codebase.'; return; }
+    // Row survives on cancel/error (returnFocus = Remove trigger). On success the
+    // row is destroyed, so re-home focus (onRemoved) THEN tear down without the
+    // stale return-focus.
+    onRemoved();
+    close(true);
+  });
+}
+/** The re-openable "How it works" reference (Phase 3). Static explainer of the
+ *  three surfaces — the CLI, this Companion, and the web app — in the shared
+ *  overlay shell (same header/body/footer + Escape/backdrop close as the other
+ *  dialogs). Content only, no API. */
+function openHowItWorks(returnFocus) {
+  const backdrop = el('div', 'overlay-backdrop');
+  const panel = el('div', 'overlay-center');
+  const dialog = el('div', 'dialog');
+  const header = el('header', 'dialog-header');
+  const heading = el('div', 'dialog-heading');
+  heading.append(el('h2', null, 'How CTRL+SPC works'));
+  const closeBtn = el('button', 'dialog-close');
+  closeBtn.type = 'button'; closeBtn.setAttribute('aria-label', 'Close');
+  closeBtn.append(xIcon());
+  header.append(heading, closeBtn);
+  const body = el('div', 'dialog-body');
+  function section(titleNode, descText, extraNode) {
+    const wrap = el('div');
+    wrap.style.display = 'flex'; wrap.style.flexDirection = 'column'; wrap.style.gap = 'var(--sp-1)';
+    wrap.append(titleNode, el('p', 'muted', descText));
+    if (extraNode) wrap.append(extraNode);
+    return wrap;
+  }
+  // CLI section — inline command names in mono, matching the approved wireframe.
+  const cliWrap = el('div');
+  cliWrap.style.display = 'flex'; cliWrap.style.flexDirection = 'column'; cliWrap.style.gap = 'var(--sp-1)';
+  const cliTitle = el('h3', null, 'The CLI ');
+  cliTitle.append(el('code', 'mono', 'cs'));
+  const cliDesc = el('p', 'muted');
+  cliDesc.append(document.createTextNode('A small program on this computer. It keeps this computer online so your agents can be reached, and it opens this Companion. Run '));
+  cliDesc.append(el('code', 'mono', 'cs'));
+  cliDesc.append(document.createTextNode(' anytime to open it; '));
+  cliDesc.append(el('code', 'mono', 'cs autostart on'));
+  cliDesc.append(document.createTextNode(' keeps it running in the background.'));
+  cliWrap.append(cliTitle, cliDesc);
+  body.append(cliWrap);
+  const compTitle = el('h3', null, 'The Companion ');
+  const compHint = el('span', 'muted', '(this app)'); compHint.style.fontWeight = '400';
+  compTitle.append(compHint);
+  body.append(section(compTitle,
+    'Local setup for this computer. Sign in, and attach your codebases — folders on this computer that have a git remote — to your projects. Paths stay on your computer.'));
+  const webLink = el('a', 'btn btn-primary', 'Open the web app \\u2197');
+  webLink.href = WEB_URL; webLink.target = '_blank'; webLink.rel = 'noopener noreferrer';
+  webLink.style.alignSelf = 'flex-start'; webLink.style.marginTop = 'var(--sp-1)';
+  body.append(section(el('h3', null, 'The web app'),
+    'Where the work happens. See your projects, create work items, hand a work item to an agent, and tell the agent what to do with it: explore the code, write a document or a plan, answer questions, and more.',
+    webLink));
+  const footer = el('div', 'dialog-footer');
+  const doneBtn = el('button', 'btn', 'Close'); doneBtn.type = 'button';
+  footer.append(doneBtn);
+  dialog.append(header, body, footer);
+  panel.append(dialog);
+  backdrop.append(panel);
+  document.body.append(backdrop);
+  doneBtn.focus();
+  function close() {
+    backdrop.remove();
+    document.removeEventListener('keydown', onKey);
+    if (returnFocus && returnFocus.focus) returnFocus.focus();
+  }
+  function onKey(e) { if (e.key === 'Escape') { e.preventDefault(); close(); } }
+  document.addEventListener('keydown', onKey);
+  backdrop.addEventListener('mousedown', function (e) { if (e.target === backdrop) close(); });
+  closeBtn.addEventListener('click', close);
+  doneBtn.addEventListener('click', close);
+}
+/** Screens 8 & 9: locate a not-here codebase on THIS computer. Pick a folder;
+ *  if its git remote canonicalizes to the codebase's identity, its path is saved
+ *  locally and this computer is reported as having the codebase. A non-matching
+ *  or remote-less folder is refused. Mirrors openAddCodebaseDialog. */
+function openLocateDialog(p, codebase, onLocated, returnFocus) {
+  let chosenLocalPath = null; // absolute path of the picked folder (local only)
+  let matches = false;        // does the picked folder's remote == this identity
+  const backdrop = el('div', 'overlay-backdrop');
+  const panel = el('div', 'overlay-center is-compact');
+  const form = document.createElement('form');
+  form.className = 'dialog';
+  const header = el('header', 'dialog-header');
+  const heading = el('div', 'dialog-heading');
+  heading.append(el('h2', null, 'Locate \\u201c' + codebase.name + '\\u201d on this computer'));
+  heading.append(el('p', 'muted', p.name));
+  const closeBtn = el('button', 'dialog-close');
+  closeBtn.type = 'button'; closeBtn.setAttribute('aria-label', 'Close');
+  closeBtn.append(xIcon());
+  header.append(heading, closeBtn);
+  const body = el('div', 'dialog-body');
+  const folderField = el('div', 'field');
+  folderField.append(el('label', null, 'Folder on this computer'));
+  const folderChoose = el('div', 'folder-choose');
+  const folderVal = el('span', 'folder-path mono is-empty', 'Not chosen');
+  const chooseBtn = el('button', 'btn', 'Choose folder\\u2026'); chooseBtn.type = 'button';
+  folderChoose.append(folderVal, chooseBtn);
+  folderField.append(folderChoose);
+  const remoteField = el('div', 'field');
+  remoteField.append(el('label', null, 'Its git remote'));
+  const remoteVal = el('code', 'folder-path mono is-empty', 'Choose a folder to detect its git remote.');
+  remoteField.append(remoteVal);
+  const identityField = el('div', 'field');
+  identityField.append(el('label', null, 'Codebase identity'));
+  identityField.append(el('code', 'folder-path mono', codebase.gitRemoteUrl));
+  const matchRow = el('div', 'locate-match');
+  const matchPill = el('span', 'pill pill-ok', '\\u2713 matches'); matchPill.hidden = true;
+  matchRow.append(matchPill);
+  const error = el('div', 'form-error');
+  body.append(folderField, remoteField, identityField, matchRow, error);
+  const footer = el('div', 'dialog-footer');
+  const cancelBtn = el('button', 'btn', 'Cancel'); cancelBtn.type = 'button';
+  const locateHereBtn = el('button', 'btn btn-primary', 'Locate here'); locateHereBtn.type = 'submit'; locateHereBtn.disabled = true;
+  footer.append(cancelBtn, locateHereBtn);
+  form.append(header, body, footer);
+  panel.append(form);
+  backdrop.append(panel);
+  document.body.append(backdrop);
+  chooseBtn.focus();
+  function close() {
+    backdrop.remove();
+    document.removeEventListener('keydown', onKey);
+    if (returnFocus && returnFocus.focus) returnFocus.focus();
+  }
+  function onKey(e) { if (e.key === 'Escape') { e.preventDefault(); close(); } }
+  document.addEventListener('keydown', onKey);
+  backdrop.addEventListener('mousedown', function (e) { if (e.target === backdrop) close(); });
+  closeBtn.addEventListener('click', close);
+  cancelBtn.addEventListener('click', close);
+  chooseBtn.addEventListener('click', async function () {
+    error.textContent = ''; matchPill.hidden = true; matches = false; locateHereBtn.disabled = true;
+    chooseBtn.disabled = true; chooseBtn.textContent = 'Choosing';
+    const r = await api('/api/projects/choose-folder', { method: 'POST', body: JSON.stringify({ projectId: p.id }) });
+    chooseBtn.disabled = false; chooseBtn.textContent = 'Choose folder\\u2026';
+    if (!r.ok) { error.textContent = (r.data && r.data.error) || 'Could not open the folder picker.'; return; }
+    if (r.data.cancelled) return;
+    // Local path shown here only; never sent to the cloud.
+    chosenLocalPath = r.data.localPath;
+    folderVal.textContent = chosenLocalPath; folderVal.className = 'folder-path mono';
+    // codebaseRemote is the folder's canonical host/path identity (or null when
+    // it has no remote / a non-hosted remote). The match check mirrors the
+    // server's guard exactly — the server re-validates on submit regardless.
+    const detected = r.data.codebaseRemote;
+    remoteVal.textContent = r.data.gitRemoteUrl || 'none';
+    if (!detected) {
+      remoteVal.className = 'folder-path mono is-warn';
+      error.textContent = "This folder has no git remote, so it can't be this codebase.";
+    } else if (detected !== codebase.gitRemoteUrl) {
+      remoteVal.className = 'folder-path mono is-warn';
+      error.textContent = 'This folder is a different repo (' + detected + '), not ' + codebase.gitRemoteUrl + '.';
+    } else {
+      remoteVal.className = 'folder-path mono';
+      matches = true; matchPill.hidden = false; locateHereBtn.disabled = false;
+    }
+  });
+  form.addEventListener('submit', async function (e) {
+    e.preventDefault();
+    if (!matches || !chosenLocalPath) return;
+    error.textContent = '';
+    locateHereBtn.disabled = true; locateHereBtn.textContent = 'Locating';
+    // Only the codebase identity + this machine's id reach the cloud — never the
+    // path. The server re-detects the folder's remote and refuses a mismatch.
+    const r = await api('/api/projects/locate-codebase', { method: 'POST', body: JSON.stringify({ codebaseRemote: codebase.gitRemoteUrl, localPath: chosenLocalPath }) });
+    locateHereBtn.disabled = false; locateHereBtn.textContent = 'Locate here';
+    if (!r.ok) { error.textContent = (r.data && r.data.error) || 'Could not locate the codebase.'; return; }
+    close();
+    onLocated();
+  });
+}
+/** Add-codebase flow: choose a folder, detect its git remote, and register the
+ *  remote's canonical host/path identity (never the local path) as a codebase on
+ *  the project. A folder with no git remote — or whose remote isn't a hosted
+ *  repository URL (a local/file path) — is refused. Reuses the shared dialog. */
+function openAddCodebaseDialog(p, onAdded, returnFocus) {
+  let chosenRemote = null; // the canonical host/path identity, or null when not addable
+  let chosenLocalPath = null; // the picked folder (local only) — used to auto-locate after add
+  const backdrop = el('div', 'overlay-backdrop');
+  const panel = el('div', 'overlay-center is-compact');
+  const form = document.createElement('form');
+  form.className = 'dialog';
+  const header = el('header', 'dialog-header');
+  const heading = el('div', 'dialog-heading');
+  heading.append(el('h2', null, 'Add codebase'));
+  heading.append(el('p', 'muted', p.name));
+  const closeBtn = el('button', 'dialog-close');
+  closeBtn.type = 'button'; closeBtn.setAttribute('aria-label', 'Close');
+  closeBtn.append(xIcon());
+  header.append(heading, closeBtn);
+  const body = el('div', 'dialog-body');
+  const folderField = el('div', 'field');
+  folderField.append(el('label', null, 'Folder on this computer'));
+  const folderChoose = el('div', 'folder-choose');
+  const folderVal = el('span', 'folder-path mono is-empty', 'Not chosen');
+  const chooseBtn = el('button', 'btn', 'Choose folder'); chooseBtn.type = 'button';
+  folderChoose.append(folderVal, chooseBtn);
+  folderField.append(folderChoose);
+  const remoteField = el('div', 'field');
+  remoteField.append(el('label', null, 'Git remote'));
+  const remoteVal = el('code', 'folder-path mono is-empty', 'Choose a folder to detect its git remote.');
+  remoteField.append(remoteVal);
+  const error = el('div', 'form-error');
+  const note = el('div', 'form-note');
+  body.append(folderField, remoteField, error, note);
+  const footer = el('div', 'dialog-footer');
+  const cancelBtn = el('button', 'btn', 'Cancel'); cancelBtn.type = 'button';
+  const addBtn = el('button', 'btn btn-primary', 'Add as codebase'); addBtn.type = 'submit'; addBtn.disabled = true;
+  footer.append(cancelBtn, addBtn);
+  form.append(header, body, footer);
+  panel.append(form);
+  backdrop.append(panel);
+  document.body.append(backdrop);
+  chooseBtn.focus();
+  function close() {
+    backdrop.remove();
+    document.removeEventListener('keydown', onKey);
+    if (returnFocus && returnFocus.focus) returnFocus.focus();
+  }
+  function onKey(e) { if (e.key === 'Escape') { e.preventDefault(); close(); } }
+  document.addEventListener('keydown', onKey);
+  backdrop.addEventListener('mousedown', function (e) { if (e.target === backdrop) close(); });
+  closeBtn.addEventListener('click', close);
+  cancelBtn.addEventListener('click', close);
+  chooseBtn.addEventListener('click', async function () {
+    error.textContent = ''; note.textContent = '';
+    chooseBtn.disabled = true; chooseBtn.textContent = 'Choosing';
+    const r = await api('/api/projects/choose-folder', { method: 'POST', body: JSON.stringify({ projectId: p.id }) });
+    chooseBtn.disabled = false; chooseBtn.textContent = 'Choose folder';
+    if (!r.ok) { error.textContent = (r.data && r.data.error) || 'Could not open the folder picker.'; return; }
+    if (r.data.cancelled) return;
+    // Show the chosen folder locally only — it is never sent to the cloud.
+    chosenLocalPath = r.data.localPath;
+    folderVal.textContent = r.data.localPath; folderVal.className = 'folder-path mono';
+    // codebaseRemote is the canonical host/path identity (or null when the
+    // folder's remote isn't a hosted repo). It is what gets stored, never the
+    // raw remote or the local path.
+    const identity = r.data.codebaseRemote;
+    if (!r.data.gitRemoteUrl) {
+      chosenRemote = null;
+      remoteVal.textContent = 'none'; remoteVal.className = 'folder-path mono is-warn';
+      error.textContent = "This folder has no git remote \\u2014 it can't become a codebase.";
+      addBtn.disabled = true;
+    } else if (!identity) {
+      // Has a remote, but it's a local/file path, not a hosted repository URL.
+      chosenRemote = null;
+      remoteVal.textContent = r.data.gitRemoteUrl; remoteVal.className = 'folder-path mono is-warn';
+      error.textContent = "This folder's git remote isn't a hosted repository URL, so it can't become a codebase.";
+      addBtn.disabled = true;
+    } else {
+      chosenRemote = identity;
+      remoteVal.textContent = identity; remoteVal.className = 'folder-path mono';
+      addBtn.disabled = false;
+    }
+  });
+  form.addEventListener('submit', async function (e) {
+    e.preventDefault();
+    if (!chosenRemote) return;
+    error.textContent = ''; note.textContent = '';
+    addBtn.disabled = true; addBtn.textContent = 'Adding';
+    // Only the canonical git-remote identity goes to the cloud — never the local path.
+    const r = await api('/api/projects/add-codebase', { method: 'POST', body: JSON.stringify({ projectId: p.id, gitRemoteUrl: chosenRemote }) });
+    if (!r.ok) { addBtn.disabled = false; addBtn.textContent = 'Add as codebase'; error.textContent = (r.data && r.data.error) || 'Could not add the codebase.'; return; }
+    // Auto-locate: the computer that adds a codebase inherently HAS the folder,
+    // so record this machine's availability now — it shows "On this computer"
+    // immediately. Separate call from add; the server re-validates the folder's
+    // remote (already this identity, so it passes) and only the identity + this
+    // machine's id reach the cloud, never the path. Best-effort: the add already
+    // succeeded, so a failed availability write must never block the success UX
+    // or surface an error (the user can Locate explicitly later). Swallow any
+    // rejection so the button reset + refresh below always run.
+    if (chosenLocalPath) {
+      await api('/api/projects/locate-codebase', { method: 'POST', body: JSON.stringify({ codebaseRemote: chosenRemote, localPath: chosenLocalPath }) }).catch(function () {});
+    }
+    addBtn.disabled = false; addBtn.textContent = 'Add as codebase';
+    if (r.data && r.data.added === false) {
+      // Dedupe: the project already had this remote. Say so rather than closing
+      // as if a new codebase were just created.
+      note.textContent = 'Already on this project \\u2014 no duplicate created.';
+      onAdded();
+      return;
+    }
+    close();
+    onAdded();
+  });
+}
+/** Opens the shared dialog shell (fixed header + body + footer, footer-right
+ *  actions) — same structure/classes as the web app's Dialog primitive. */
+function openMapDialog(p, list, returnFocus) {
+  const hasRemote = !!p.gitRemoteUrl && p.gitRemoteUrl.indexOf('local:v1:') !== 0;
+  let chosenPath = p.localPath || null;
+  const backdrop = el('div', 'overlay-backdrop');
+  const panel = el('div', 'overlay-center is-compact');
+  const form = document.createElement('form');
+  form.className = 'dialog';
+  const header = el('header', 'dialog-header');
+  const heading = el('div', 'dialog-heading');
+  heading.append(el('h2', null, p.name));
+  const closeBtn = el('button', 'dialog-close');
+  closeBtn.type = 'button'; closeBtn.setAttribute('aria-label', 'Close');
+  closeBtn.append(xIcon());
+  header.append(heading, closeBtn);
+  const body = el('div', 'dialog-body');
+  const folderField = el('div', 'field');
+  folderField.append(el('label', null, 'Local folder'));
+  const folderChoose = el('div', 'folder-choose');
+  const folderVal = el('span', chosenPath ? 'folder-path mono' : 'folder-path mono is-empty', chosenPath || 'Not chosen');
+  const chooseBtn = el('button', 'btn', 'Choose'); chooseBtn.type = 'button';
+  folderChoose.append(folderVal, chooseBtn);
+  folderField.append(folderChoose);
+  const remoteField = el('div', 'field');
+  const remoteLabel = el('label', null, 'Git remote URL'); remoteLabel.htmlFor = 'map-remote';
+  const remoteInput = el('input', 'input'); remoteInput.id = 'map-remote';
+  remoteInput.placeholder = 'git@github.com:org/repo.git';
+  if (hasRemote) remoteInput.value = p.gitRemoteUrl;
+  remoteField.append(remoteLabel, remoteInput);
+  const error = el('div', 'form-error');
+  body.append(folderField, remoteField, error);
+  const footer = el('div', 'dialog-footer');
+  const cancelBtn = el('button', 'btn', 'Cancel'); cancelBtn.type = 'button';
+  const saveBtn = el('button', 'btn btn-primary', 'Save'); saveBtn.type = 'submit';
+  footer.append(cancelBtn, saveBtn);
+  form.append(header, body, footer);
+  panel.append(form);
+  backdrop.append(panel);
+  document.body.append(backdrop);
+  remoteInput.focus();
+  function close() {
+    backdrop.remove();
+    document.removeEventListener('keydown', onKey);
+    if (returnFocus && returnFocus.focus) returnFocus.focus();
+  }
+  function onKey(e) { if (e.key === 'Escape') { e.preventDefault(); close(); } }
+  document.addEventListener('keydown', onKey);
+  backdrop.addEventListener('mousedown', function (e) { if (e.target === backdrop) close(); });
+  closeBtn.addEventListener('click', close);
+  cancelBtn.addEventListener('click', close);
+  chooseBtn.addEventListener('click', async function () {
+    error.textContent = '';
+    chooseBtn.disabled = true; chooseBtn.textContent = 'Choosing';
+    const r = await api('/api/projects/choose-folder', { method: 'POST', body: JSON.stringify({ projectId: p.id }) });
+    chooseBtn.disabled = false; chooseBtn.textContent = 'Choose';
+    if (!r.ok) { error.textContent = (r.data && r.data.error) || 'Could not open the folder picker.'; return; }
+    if (r.data.cancelled) return;
+    chosenPath = r.data.localPath;
+    folderVal.textContent = chosenPath; folderVal.className = 'folder-path mono';
+    if (r.data.gitRemoteUrl && !remoteInput.value) remoteInput.value = r.data.gitRemoteUrl;
+  });
+  form.addEventListener('submit', async function (e) {
+    e.preventDefault();
+    error.textContent = '';
+    saveBtn.disabled = true; saveBtn.textContent = 'Saving';
+    const r = await api('/api/projects/map', { method: 'POST', body: JSON.stringify({ projectId: p.id, localPath: chosenPath, gitRemoteUrl: remoteInput.value }) });
+    saveBtn.disabled = false; saveBtn.textContent = 'Save';
+    if (!r.ok) { error.textContent = (r.data && r.data.error) || 'Could not save.'; return; }
+    close();
+    loadProjects(list);
+  });
+}
+boot();
+</script>
+</body>
+</html>`;
+}