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

@ctrl-spc/cs 0.1.0 → 0.2.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 (13) hide show

package/dist/companion-ui.js ADDED Viewed

@@ -0,0 +1,856 @@
+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; }
+.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; }
+</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 || {});
+}
+function renderSignIn(session) {
+  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);
+  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);
+  bar.append(el('span', 'mono muted', session.email || ''));
+  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');
+  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);
+}
+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) { list.replaceChildren(el('p', 'empty', 'No projects yet. Create one in the web app.')); 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) {
+    container.replaceChildren(el('p', 'codebases-empty', 'No codebases yet. Add one from a folder that has a git remote.'));
+    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);
+  });
+}
+/** 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>`;
+}