@openparachute/hub 0.5.7 → 0.5.9-rc.6

package/src/hub.ts

@@ -1,18 +1,34 @@
 import { existsSync, mkdirSync, renameSync, writeFileSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { CONFIG_DIR } from "./config.ts";
+import { CSRF_FIELD_NAME } from "./csrf.ts";
 
 /**
  * Hub page served at `/` when the node is exposed.
  *
- * The page is a *module directory*: one tile per module type (vault, scribe,
- * notes, agent), not one row per service instance. Aaron's original shape
- * iterated `services[]` and rendered a card per entry — fine at one vault,
- * but at three vaults plus scribe + notes + agent the page reads as a flat
- * list of instances rather than the modules themselves (#168). The new shape
- * aggregates: "Vault — 3 registered — Manage →" links to the per-vault SPA at
- * `/vault`; "Scribe — 1 registered" links to the running scribe instance;
- * etc. Zero-count types are hidden entirely.
+ * The page is split into two sections, organized by **ownership**:
+ *
+ *   - **Services** — surfaces provided by the modules running on this
+ *     hub. Browse notes (the Notes PWA); transcribe audio (Scribe); run
+ *     agents (Agent). Each entry points at the service's own UI; the
+ *     service owns what's behind the link (use, config, admin —
+ *     whatever it chooses to surface). Entries are dynamic, derived
+ *     from `/.well-known/parachute.json`; only installed services show
+ *     up. Vault deliberately doesn't have its own Services entry — its
+ *     content is browsed via Notes, so a separate "Vault" tile would
+ *     just send the operator to the admin SPA, which is exactly the
+ *     friction Aaron flagged ("clicked Vault, took me to hub management").
+ *
+ *   - **Admin** — hub-owned admin surfaces for cross-cutting host
+ *     concerns. Always visible: even with zero vaults installed, an
+ *     operator may want to provision the first one. Three entries:
+ *     Vaults (provisioning), Permissions (OAuth consent grants), Tokens
+ *     (registry mint/list/revoke).
+ *
+ * The Services-vs-Admin axis is ownership, not function: services-owned
+ * UIs vs hub-owned UIs. The first cut framed it as "Use vs Admin" but
+ * that broke down once you noticed real services have UIs that mix use,
+ * config, and admin together — the cleaner cut is who's hosting the UI.
  *
  * The file stays self-contained (inline CSS + JS, no external assets) so
  * `tailscale serve` can mount it directly from disk with `--set-path=/`.
@@ -21,21 +37,85 @@ import { CONFIG_DIR } from "./config.ts";
 export const HUB_PATH = join(CONFIG_DIR, "well-known", "hub.html");
 export const HUB_MOUNT = "/";
 
-export function renderHub(): string {
-  return HTML;
+export interface RenderHubSession {
+  /** displayName from /api/me semantics — username today, profile field later. */
+  displayName: string;
+  /** Per-session CSRF token; embedded in the inline sign-out form. */
+  csrfToken: string;
 }
 
+export interface RenderHubOpts {
+  /**
+   * When set, renders "Signed in as <displayName>" + an inline sign-out
+   * form. When omitted (or null), renders a "Sign in" link. Pass through
+   * from `findActiveSession` + `ensureCsrfToken` in the hub-server `/`
+   * handler — the static-disk write path (`writeHubFile`) emits the
+   * signed-out shape, since that file gets served only when the
+   * dynamic path can't (`!getDb`).
+   */
+  session?: RenderHubSession | null;
+}
+
+export function renderHub(opts: RenderHubOpts = {}): string {
+  return buildHtml(opts);
+}
+
+/**
+ * Write the static signed-out HTML to disk. Used by `parachute expose` so
+ * `tailscale serve --set-path=/` has a file to back. The dynamic
+ * session-aware path runs through `hub-server.ts`'s `/` handler whenever
+ * a DB is configured; this disk file is the fallback when it isn't.
+ */
 export function writeHubFile(path: string = HUB_PATH): string {
   if (!existsSync(dirname(path))) {
     mkdirSync(dirname(path), { recursive: true });
   }
+  const html = renderHub();
   const tmp = `${path}.tmp-${process.pid}-${Date.now()}`;
-  writeFileSync(tmp, HTML);
+  writeFileSync(tmp, html);
   renameSync(tmp, path);
   return path;
 }
 
-const HTML = `<!doctype html>
+function buildHtml({ session }: RenderHubOpts): string {
+  const authBlock = session
+    ? renderSignedIn(session.displayName, session.csrfToken)
+    : renderSignedOut();
+  return HTML_TEMPLATE.replace("<!--AUTH-INDICATOR-->", authBlock);
+}
+
+function renderSignedIn(displayName: string, csrfToken: string): string {
+  // Inline POST form so sign-out works without JS. Submit button is
+  // styled as a text link via `.auth-signout` so the visual weight
+  // matches the surrounding "Signed in as <name>" text.
+  return `<div class="auth-indicator">
+      <span class="muted">Signed in as <strong>${escapeHtml(displayName)}</strong></span>
+      <form method="POST" action="/logout" class="auth-signout-form">
+        <input type="hidden" name="${CSRF_FIELD_NAME}" value="${escapeAttr(csrfToken)}" />
+        <button type="submit" class="auth-signout">Sign out</button>
+      </form>
+    </div>`;
+}
+
+function renderSignedOut(): string {
+  return `<div class="auth-indicator">
+      <a href="/login?next=/" class="auth-signin">Sign in</a>
+    </div>`;
+}
+
+function escapeHtml(s: string): string {
+  return s
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function escapeAttr(s: string): string {
+  return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+}
+
+const HTML_TEMPLATE = `<!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8" />
@@ -94,6 +174,50 @@ const HTML = `<!doctype html>
   header {
     text-align: center;
     margin-bottom: 3.5rem;
+    position: relative;
+  }
+  /* Auth indicator: small text + sign-in/out affordance, top-right of the
+     header. Doesn't crowd the centered title; falls below the title on
+     narrow viewports via the media query at the bottom of this stylesheet. */
+  .auth-indicator {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.5rem;
+    font-size: 0.85rem;
+    color: var(--fg-muted);
+  }
+  .auth-indicator .muted {
+    color: var(--fg-muted);
+  }
+  .auth-indicator strong {
+    font-weight: 600;
+    color: var(--fg);
+  }
+  .auth-signout-form {
+    margin: 0;
+    display: inline;
+  }
+  .auth-signout, .auth-signin {
+    background: none;
+    border: none;
+    padding: 0;
+    color: var(--accent);
+    font: inherit;
+    cursor: pointer;
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 2px;
+  }
+  .auth-signout:hover, .auth-signin:hover {
+    color: var(--accent-hover);
+  }
+  a.auth-signin {
+    /* Anchor needs explicit reset since the a element has its own
+       color/decoration. */
+    border-bottom: none;
   }
   h1 {
     font-family: var(--serif);
@@ -108,6 +232,22 @@ const HTML = `<!doctype html>
     font-size: 1.1rem;
     margin: 0;
   }
+  .section {
+    margin-bottom: 3rem;
+  }
+  .section h2 {
+    font-family: var(--serif);
+    font-weight: 400;
+    font-size: 1.5rem;
+    color: var(--fg);
+    margin: 0 0 0.4rem;
+    letter-spacing: -0.005em;
+  }
+  .section .section-sub {
+    color: var(--fg-muted);
+    font-size: 0.92rem;
+    margin: 0 0 1.25rem;
+  }
   .grid {
     display: grid;
     gap: 1.25rem;
@@ -117,12 +257,12 @@ const HTML = `<!doctype html>
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: 12px;
-    padding: 1.75rem;
+    padding: 1.5rem;
     text-decoration: none;
     color: inherit;
     display: flex;
     flex-direction: column;
-    gap: 0.75rem;
+    gap: 0.5rem;
     transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
     opacity: 0;
     animation: fadeUp 0.4s ease forwards;
@@ -131,46 +271,22 @@ const HTML = `<!doctype html>
   .card:nth-child(2) { animation-delay: 0.06s; }
   .card:nth-child(3) { animation-delay: 0.1s; }
   .card:nth-child(4) { animation-delay: 0.14s; }
-  .card:nth-child(5) { animation-delay: 0.18s; }
-  .card:nth-child(n+6) { animation-delay: 0.22s; }
   .card:hover {
     border-color: var(--accent-light);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
     transform: translateY(-2px);
   }
-  .card-head {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-  }
-  .icon {
-    width: 2.25rem;
-    height: 2.25rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--accent-soft);
-    border-radius: 8px;
-    color: var(--accent);
-    font-size: 1.25rem;
-    flex-shrink: 0;
-    overflow: hidden;
-  }
-  .icon img, .icon svg {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
   .card-title {
     font-family: var(--serif);
-    font-size: 1.5rem;
+    font-size: 1.4rem;
     font-weight: 400;
     margin: 0;
     line-height: 1.1;
+    color: var(--fg);
   }
-  .card-count {
+  .card-desc {
     color: var(--fg-muted);
-    font-size: 0.95rem;
+    font-size: 0.92rem;
     margin: 0;
     flex-grow: 1;
   }
@@ -178,7 +294,7 @@ const HTML = `<!doctype html>
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-top: 0.25rem;
+    margin-top: 0.5rem;
     font-size: 0.8rem;
     color: var(--fg-dim);
   }
@@ -186,14 +302,14 @@ const HTML = `<!doctype html>
     font-family: ui-monospace, 'SF Mono', Monaco, monospace;
     color: var(--fg-muted);
   }
-  .manage {
+  .arrow {
     color: var(--accent);
     font-weight: 500;
   }
   .empty, .error {
     text-align: center;
     color: var(--fg-muted);
-    padding: 3rem 1rem;
+    padding: 1.5rem 1rem;
     border: 1px dashed var(--border);
     border-radius: 12px;
   }
@@ -225,154 +341,161 @@ const HTML = `<!doctype html>
   }
   @media (max-width: 640px) {
     main { padding: 2.5rem 1rem 4rem; }
-    .card { padding: 1.5rem; }
+    .card { padding: 1.25rem; }
+    /* Auth indicator drops below the title on narrow viewports so the
+       header doesn't crowd. */
+    header { padding-top: 1.75rem; }
+    .auth-indicator { font-size: 0.8rem; }
   }
 </style>
 </head>
 <body>
 <main>
   <header>
+    <!--AUTH-INDICATOR-->
     <h1>Parachute</h1>
     <p class="tagline">Your personal-computing modules.</p>
   </header>
-  <section id="modules" class="grid" aria-live="polite">
-    <div class="empty" id="loading">Loading modules\u2026</div>
+
+  <section class="section" id="services-section">
+    <h2>Services</h2>
+    <p class="section-sub">Surfaces provided by services running on this hub.</p>
+    <div class="grid" id="services-grid" aria-live="polite">
+      <div class="empty" id="services-loading">Loading…</div>
+    </div>
   </section>
+
+  <section class="section" id="admin-section">
+    <h2>Admin</h2>
+    <p class="section-sub">Manage this hub — vaults, permissions, tokens.</p>
+    <div class="grid" id="admin-grid"></div>
+  </section>
+
   <footer>
     <a href="/.well-known/parachute.json">discovery</a>
   </footer>
 </main>
 <script>
 (async () => {
-  const root = document.getElementById('modules');
-  const fallbackIcon = \`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="9"/></svg>\`;
+  const servicesGrid = document.getElementById('services-grid');
+  const adminGrid = document.getElementById('admin-grid');
 
-  // Display order for known module types. Unknown short-names append after,
-  // so a third-party module mounted at /foo still gets a tile.
-  const MODULE_ORDER = ['vault', 'scribe', 'notes', 'agent'];
-  const MODULE_LABELS = {
-    vault: 'Vault',
-    scribe: 'Scribe',
-    notes: 'Notes',
-    agent: 'Agent',
-  };
+  // Services entries are now data-driven from /.well-known/parachute.json.
+  // Each services[] row carries (since hub#... — Phase D consumer side):
+  //   - displayName: human label (sourced from module.json:displayName).
+  //   - uiUrl: where the user-facing UI lives (sourced from module.json:uiUrl).
+  //     A row WITHOUT uiUrl declines to render a tile — the module is
+  //     either API-only (vault, scribe-without-UI) or surfaces its UI
+  //     through a sibling (vault → Notes).
+  // The previous SERVICE_LABELS / SERVICE_ORDER / isVaultName hardcoding
+  // is retired: vault has no uiUrl, so the "skip vault" rule emerges
+  // from data rather than a name check; ordering is alphabetical-by-
+  // displayName per the module-json-extensibility pattern doc.
 
-  function isVaultName(name) {
-    return name === 'parachute-vault' || name.startsWith('parachute-vault-');
-  }
+  // Admin entries: always visible. Even a fresh hub with zero vaults wants
+  // the operator to find /admin/vaults. Hardcoded — they live in the
+  // hub-served SPA, not in services.json.
+  const ADMIN_ENTRIES = [
+    { title: 'Vaults', desc: 'Create and manage vaults on this hub.', href: '/admin/vaults' },
+    { title: 'Permissions', desc: 'OAuth consent grants per app.', href: '/admin/permissions' },
+    { title: 'Tokens', desc: 'Mint and revoke access tokens.', href: '/admin/tokens' },
+  ];
 
   function shortName(manifestName) {
     return manifestName.replace(/^parachute-/, '');
   }
 
-  function labelFor(type) {
-    if (MODULE_LABELS[type]) return MODULE_LABELS[type];
-    return type.charAt(0).toUpperCase() + type.slice(1);
-  }
-
-  // Aggregate services + vaults into one entry per module type. Vault is
-  // special-cased because its count comes from doc.vaults[] (one entry per
-  // vault instance / mount path) and its manage link goes to the hub's
-  // per-vault SPA at /vault — not to any single vault backend.
-  function aggregate(services, vaults) {
-    const groups = new Map();
-    if (vaults.length > 0) {
-      groups.set('vault', {
-        type: 'vault',
-        label: 'Vault',
-        count: vaults.length,
-        manageUrl: '/vault',
-      });
-    }
-    for (const svc of services) {
-      if (isVaultName(svc.name)) continue;
-      const t = shortName(svc.name);
-      const existing = groups.get(t);
-      if (existing) {
-        existing.count += 1;
-      } else {
-        groups.set(t, {
-          type: t,
-          label: labelFor(t),
-          count: 1,
-          manageUrl: svc.path,
-        });
-      }
-    }
-    return groups;
-  }
-
-  function tilesInOrder(groups) {
-    const out = [];
-    for (const t of MODULE_ORDER) {
-      const g = groups.get(t);
-      if (g) out.push(g);
-    }
-    const known = new Set(MODULE_ORDER);
-    const extras = [...groups.values()]
-      .filter((g) => !known.has(g.type))
-      .sort((a, b) => a.type.localeCompare(b.type));
-    return out.concat(extras);
-  }
-
-  function renderTile(group) {
+  function renderTile({ title, desc, href }) {
     const a = document.createElement('a');
     a.className = 'card';
-    a.href = group.manageUrl;
-
-    const head = document.createElement('div');
-    head.className = 'card-head';
+    a.href = href;
 
-    const icon = document.createElement('div');
-    icon.className = 'icon';
-    icon.innerHTML = fallbackIcon;
+    const t = document.createElement('h3');
+    t.className = 'card-title';
+    t.textContent = title;
+    a.appendChild(t);
 
-    const title = document.createElement('h2');
-    title.className = 'card-title';
-    title.textContent = group.label;
-
-    head.appendChild(icon);
-    head.appendChild(title);
-    a.appendChild(head);
-
-    const count = document.createElement('p');
-    count.className = 'card-count';
-    count.textContent = group.count === 1 ? '1 registered' : group.count + ' registered';
-    a.appendChild(count);
+    if (desc) {
+      const d = document.createElement('p');
+      d.className = 'card-desc';
+      d.textContent = desc;
+      a.appendChild(d);
+    }
 
     const meta = document.createElement('div');
     meta.className = 'card-meta';
     const path = document.createElement('span');
     path.className = 'path';
-    path.textContent = group.manageUrl;
-    const manage = document.createElement('span');
-    manage.className = 'manage';
-    manage.textContent = 'Manage \u2192';
+    path.textContent = href;
+    const arrow = document.createElement('span');
+    arrow.className = 'arrow';
+    arrow.textContent = '→';
     meta.appendChild(path);
-    meta.appendChild(manage);
+    meta.appendChild(arrow);
     a.appendChild(meta);
 
     return a;
   }
 
-  try {
-    const wk = await fetch('/.well-known/parachute.json', { credentials: 'omit' });
-    if (!wk.ok) throw new Error('well-known fetch failed: ' + wk.status);
-    const doc = await wk.json();
-    const services = Array.isArray(doc.services) ? doc.services : [];
-    const vaults = Array.isArray(doc.vaults) ? doc.vaults : [];
+  function renderAdmin() {
+    adminGrid.innerHTML = '';
+    for (const entry of ADMIN_ENTRIES) {
+      adminGrid.appendChild(renderTile(entry));
+    }
+  }
+
+  function renderServices(services) {
+    // Render one tile per service that declares a uiUrl. Entries without
+    // uiUrl are intentionally omitted — vault is the canonical example
+    // (its content is browsed via Notes, which has its own uiUrl row).
+    // Multiple entries with the same shortName collapse into one tile;
+    // operators with two scribe instances pick the first arbitrarily,
+    // and they'd know which they meant.
+    const byShort = new Map();
+    for (const svc of services) {
+      if (!svc || !svc.uiUrl) continue;
+      const key = shortName(svc.name);
+      if (byShort.has(key)) continue;
+      byShort.set(key, {
+        title: svc.displayName || key,
+        desc: svc.tagline || '',
+        href: svc.uiUrl,
+      });
+    }
 
-    const groups = aggregate(services, vaults);
-    const tiles = tilesInOrder(groups);
+    // Alphabetical-by-displayName per the module-json-extensibility pattern.
+    // Stable for shared-prefix labels (Notes, Notes-Lite would sort that way).
+    const tiles = Array.from(byShort.values()).sort((a, b) =>
+      a.title.localeCompare(b.title),
+    );
 
+    servicesGrid.innerHTML = '';
     if (tiles.length === 0) {
-      root.innerHTML = '<div class="empty">No modules installed yet. Try <code>parachute install vault</code>.</div>';
+      const empty = document.createElement('div');
+      empty.className = 'empty';
+      empty.innerHTML =
+        'No services with a UI declared yet. Modules surface their UIs by ' +
+        'declaring <code>uiUrl</code> in <code>module.json</code> ' +
+        '(see the module-json-extensibility pattern).';
+      servicesGrid.appendChild(empty);
       return;
     }
-    root.innerHTML = '';
-    for (const g of tiles) root.appendChild(renderTile(g));
+    for (const tile of tiles) servicesGrid.appendChild(renderTile(tile));
+  }
+
+  // Admin section is static — render synchronously so the operator sees it
+  // even if the well-known fetch is slow or fails.
+  renderAdmin();
+
+  try {
+    const wk = await fetch('/.well-known/parachute.json', { credentials: 'omit' });
+    if (!wk.ok) throw new Error('well-known fetch failed: ' + wk.status);
+    const doc = await wk.json();
+    const services = Array.isArray(doc.services) ? doc.services : [];
+    renderServices(services);
   } catch (err) {
-    root.innerHTML = '<div class="error">Could not load modules: ' + (err && err.message ? err.message : String(err)) + '</div>';
+    servicesGrid.innerHTML = '<div class="error">Could not load services: ' +
+      (err && err.message ? err.message : String(err)) + '</div>';
   }
 })();
 </script>