npm - @openparachute/hub - Versions diffs - 0.5.14-rc.14 → 0.5.14-rc.15 - Mend

@openparachute/hub 0.5.14-rc.14 → 0.5.14-rc.15

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 (5) hide show

package/package.json +1 -1
package/src/__tests__/account-home-ui.test.ts +23 -1
package/src/__tests__/hub.test.ts +74 -6
package/src/account-home-ui.ts +104 -39
package/src/hub.ts +72 -11

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@openparachute/hub",
-  "version": "0.5.14-rc.14",
+  "version": "0.5.14-rc.15",
   "description": "parachute — the local hub for the Parachute ecosystem (discovery, ports, lifecycle, soon OAuth).",
   "license": "AGPL-3.0",
   "publishConfig": {

package/src/__tests__/account-home-ui.test.ts CHANGED Viewed

@@ -57,6 +57,23 @@ describe("renderAccountHome", () => {
     expect(html).not.toContain("Authorization: Bearer");
     // Copy-button progressive-enhancement script is present.
     expect(html).toContain("navigator.clipboard");
+    // Friendlier framing: the block leads with "connect your AI assistant"
+    // rather than MCP jargon up top.
+    expect(html).toContain('data-testid="connect-ai-heading"');
+    expect(html).toContain("Connect your AI");
+    // BOTH connect methods render as distinct, labelled blocks.
+    expect(html).toContain('data-testid="connect-method-claude-code"');
+    expect(html).toContain("Claude Code");
+    expect(html).toContain('data-testid="connect-method-claude-ai"');
+    expect(html).toContain("Claude.ai");
+    // The Claude.ai path mirrors the install.njk canonical phrasing
+    // (Settings → Connectors → Add custom connector, paste the endpoint).
+    expect(html).toContain("Connectors");
+    expect(html).toContain("Add custom connector");
+    // A brief "any other MCP client" line is present (no bloat — just one).
+    expect(html).toContain('data-testid="connect-any-client-hint"');
+    // Notes CTA still present, now framed as the browser-UI option.
+    expect(html).toContain('data-testid="open-notes-cta"');
   });
   test("assigned-vault branch — trailing slash on hubOrigin is normalized", () => {
@@ -112,11 +129,16 @@ describe("renderAccountHome", () => {
       twoFactorEnabled: false,
     });
     expect(html).toContain("Welcome, ghost");
-    expect(html).toContain("Ask the hub operator");
+    // The message explains WHY there's nothing to connect (no vault yet) and
+    // gives a clear next step — not just a bare "ask your admin".
+    expect(html).toContain("Ask the hub operator to assign you a vault");
+    expect(html).toContain("don't have a vault yet");
     // No /admin/ link in this branch — they have no admin role.
     expect(html).not.toContain('href="/admin/"');
     // No Notes CTA.
     expect(html).not.toContain("notes.parachute.computer/add");
+    // No connect block — you can't connect a vault you don't have.
+    expect(html).not.toContain('data-testid="mcp-connect"');
   });
   test("account card — change-password link and sign-out form are present", () => {

package/src/__tests__/hub.test.ts CHANGED Viewed

@@ -5,7 +5,15 @@ import { join } from "node:path";
 import { renderHub, writeHubFile } from "../hub.ts";
 describe("renderHub", () => {
-  const html = renderHub();
+  // The verbose discovery body (Get started / Services / Admin) + its
+  // data-loading script render only for a signed-in visitor (the signed-out
+  // landing is slimmed — see the "signed-out slimming" describe block below).
+  // Assertions about that verbose body therefore run against a signed-in
+  // render; assertions about the page shell (doctype, styles, brand) hold for
+  // both and use whichever render is convenient.
+  const html = renderHub({
+    session: { displayName: "operator", csrfToken: "csrf-shell" },
+  });
   test("is a self-contained HTML document with inline styles and script", () => {
     expect(html).toStartWith("<!doctype html>");
@@ -162,12 +170,72 @@ describe("renderHub", () => {
   });
   test("default render (no session) emits the 'Sign in' affordance", () => {
-    expect(html).toContain('class="auth-indicator"');
-    expect(html).toContain("Sign in");
-    expect(html).toContain('href="/login?next=/"');
+    const out = renderHub();
+    expect(out).toContain('class="auth-indicator"');
+    expect(out).toContain("Sign in");
+    expect(out).toContain('href="/login?next=/"');
     // No POST form, no CSRF input — those only appear when signed in.
-    expect(html).not.toContain('action="/logout"');
-    expect(html).not.toContain("__csrf");
+    expect(out).not.toContain('action="/logout"');
+    expect(out).not.toContain("__csrf");
+  });
+});
+describe("renderHub — signed-out slimming (operator feedback)", () => {
+  // A signed-out visitor should see a clean, minimal landing: brand +
+  // tagline (in the header) + a single clear "Sign in" call. The hub's
+  // internal detail — the service catalog, vault listings, admin surfaces,
+  // and the well-known-driven loading script — must NOT render until the
+  // visitor authenticates. The signed-in render is unchanged.
+  const signedOut = renderHub();
+  const signedIn = renderHub({
+    session: { displayName: "operator", csrfToken: "csrf-xyz" },
+  });
+  test("signed-out: brand wordmark + tagline still render (the slim landing keeps the brand)", () => {
+    expect(signedOut).toContain("<h1>Parachute</h1>");
+    expect(signedOut).toContain("Truly personal computing. Your knowledge belongs with you.");
+  });
+  test("signed-out: a clear 'Sign in' call is the primary affordance", () => {
+    expect(signedOut).toContain('data-testid="signed-out-signin"');
+    expect(signedOut).toContain('href="/login?next=/"');
+    expect(signedOut).toContain("Sign in");
+  });
+  test("signed-out: the verbose Services / Admin / Get started sections are absent", () => {
+    expect(signedOut).not.toContain('id="services-section"');
+    expect(signedOut).not.toContain('id="admin-section"');
+    expect(signedOut).not.toContain('id="get-started-section"');
+    expect(signedOut).not.toContain("<h2>Services</h2>");
+    expect(signedOut).not.toContain("<h2>Admin</h2>");
+    // Admin links / token surface must not be exposed pre-auth.
+    expect(signedOut).not.toContain("/admin/vaults");
+    expect(signedOut).not.toContain("/admin/tokens");
+  });
+  test("signed-out: the well-known service-catalog loading script is not emitted", () => {
+    // No data-driven discovery body to populate when signed out → no script.
+    // (The brand mark is an inline SVG, not a <script>; assert on the IIFE's
+    // load function rather than a blanket "no <script>".) The footer's
+    // public "discovery" anchor → /.well-known/parachute.json stays — it's a
+    // plain link, not the catalog-fetching script — so assert on the fetch
+    // call + the loader function, not the URL string.
+    expect(signedOut).not.toContain("loadServices");
+    expect(signedOut).not.toContain("renderServices");
+    expect(signedOut).not.toContain("fetch('/.well-known/parachute.json'");
+    expect(signedOut).not.toContain("<script>");
+  });
+  test("signed-in: the verbose sections + loading script DO render (signed-in view unchanged)", () => {
+    expect(signedIn).toContain('id="services-section"');
+    expect(signedIn).toContain('id="admin-section"');
+    expect(signedIn).toContain('id="get-started-section"');
+    expect(signedIn).toContain("/admin/vaults");
+    expect(signedIn).toContain("/.well-known/parachute.json");
+    expect(signedIn).toContain("loadServices");
+    // And the signed-out lede / standalone Sign-in CTA is gone (the
+    // auth-indicator carries sign-out instead).
+    expect(signedIn).not.toContain('data-testid="signed-out-signin"');
   });
 });

package/src/account-home-ui.ts CHANGED Viewed

@@ -186,14 +186,20 @@ function renderVaultCard(opts: VaultCardOpts): string {
   if (assignedVaults.length > 0) {
     // One vault tile per assignment (multi-user Phase 2 PR 2). Each tile
-    // carries the Notes "Open" CTA AND a server-rendered MCP connect block
-    // (endpoint + `claude mcp add` command, each with a copy button). The
-    // connect command is the OAuth path — no token, so a non-admin friend
-    // who can't run the SPA's host-admin mint still gets a working
-    // connect affordance (the first `claude mcp add` use opens a browser,
-    // signs them in, and approves the scope). This closes the multi-user
-    // gap where the friend tile only offered the external Notes link + a
-    // bare hub-origin string.
+    // leads with a friendly "connect your AI assistant to this vault" block
+    // that covers BOTH connect paths a non-technical friend is likely to
+    // use — Claude Code (the `claude mcp add` CLI command) and Claude.ai on
+    // the web (Settings → Connectors → Add custom connector, pointed at the
+    // endpoint). Both are the OAuth path — no token to paste, the first
+    // connection opens a browser to sign in + approve. The Notes "Open" CTA
+    // sits alongside as the browser-UI option. Phrasing mirrors
+    // parachute.computer/install.njk's #connect-mcp-clients section so the
+    // operator docs and the friend's account page stay consistent.
+    //
+    // This closes the multi-user gap where the friend tile read as MCP
+    // jargon ("Connect an MCP client") rather than "here's how to connect
+    // this to your AI" — and where the web (Claude.ai) path was entirely
+    // missing, only the Claude Code CLI command was offered.
     const heading = assignedVaults.length === 1 ? "<h2>Your vault</h2>" : "<h2>Your vaults</h2>";
     const tiles = assignedVaults
       .map((vaultName) => {
@@ -206,42 +212,56 @@ function renderVaultCard(opts: VaultCardOpts): string {
         return `
         <div class="vault-tile" data-testid="vault-tile" data-vault-name="${safeVault}">
           <p class="vault-name"><strong>${safeVault}</strong></p>
-          <p>
-            <a class="btn btn-primary" href="https://notes.parachute.computer/add?url=${vaultUrlForAdd}"
-               target="_blank" rel="noopener" data-testid="open-notes-cta">Open Notes ↗</a>
-          </p>
           <div class="mcp-connect" data-testid="mcp-connect">
-            <p class="mcp-connect-label">Connect an MCP client (Claude Code, Claude.ai)</p>
-            <div class="mcp-field">
-              <span class="mcp-field-label">Endpoint</span>
-              <div class="copy-row">
-                <code data-testid="mcp-endpoint">${safeEndpoint}</code>
-                <button type="button" class="btn btn-copy" data-copy="${safeEndpoint}"
-                        data-testid="copy-mcp-endpoint">Copy</button>
-              </div>
-            </div>
-            <div class="mcp-field">
-              <span class="mcp-field-label">Claude Code</span>
+            <p class="mcp-connect-label" data-testid="connect-ai-heading">Connect your AI
+               assistant to this vault</p>
+            <p class="mcp-connect-intro">Two common ways. Both sign you in to this hub over
+               HTTPS and ask you to approve access the first time — no token to copy.</p>
+            <div class="mcp-method" data-testid="connect-method-claude-code">
+              <p class="mcp-method-title">Claude Code (terminal)</p>
+              <p class="mcp-method-sub">Run this in your terminal:</p>
               <div class="copy-row">
                 <code data-testid="mcp-add-command">${safeAddCmd}</code>
                 <button type="button" class="btn btn-copy" data-copy="${safeAddCmd}"
                         data-testid="copy-mcp-add-command">Copy</button>
               </div>
             </div>
-            <p class="mcp-connect-hint">No token needed — the command opens a browser to
-               sign you in to this hub and approve access on first use.</p>
+            <div class="mcp-method" data-testid="connect-method-claude-ai">
+              <p class="mcp-method-title">Claude.ai (web)</p>
+              <p class="mcp-method-sub">In Claude.ai, open <strong>Settings → Connectors</strong>,
+                 choose <strong>Add custom connector</strong>, and paste this endpoint:</p>
+              <div class="copy-row">
+                <code data-testid="mcp-endpoint">${safeEndpoint}</code>
+                <button type="button" class="btn btn-copy" data-copy="${safeEndpoint}"
+                        data-testid="copy-mcp-endpoint">Copy</button>
+              </div>
+              <p class="mcp-method-note">Claude.ai then redirects you here to sign in and
+                 approve. (Your hub must be reachable from the web for this.)</p>
+            </div>
+            <p class="mcp-connect-hint" data-testid="connect-any-client-hint">Any other MCP
+               client (Codex, Goose, Cursor, your own agent): point it at the same endpoint
+               above over HTTP.</p>
           </div>
+          <p class="vault-notes-cta">
+            <a class="btn btn-primary" href="https://notes.parachute.computer/add?url=${vaultUrlForAdd}"
+               target="_blank" rel="noopener" data-testid="open-notes-cta">Open Notes ↗</a>
+            <span class="vault-notes-cta-sub">Prefer a browser UI? Open Notes to browse +
+               capture in this vault.</span>
+          </p>
         </div>`;
       })
       .join("");
     return `
       <section class="section" data-testid="vault-card">
         ${heading}
-        <p>Open Notes — the canonical browser UI for your vault${
+        <p>Connect Claude (or any AI assistant) to your vault${
           assignedVaults.length === 1 ? "" : "s"
-        } — or connect an MCP client
-          (Claude Code, Claude.ai) with the command below. Either way you sign in to your
-          hub over HTTPS and approve access on the first connection.</p>
+        } — pick Claude Code or
+          Claude.ai below — or open Notes for a browser UI. The first connection signs you in
+          to your hub over HTTPS and asks you to approve access.</p>
         <div class="vault-tiles">${tiles}
         </div>
       </section>${COPY_SCRIPT}`;
@@ -262,8 +282,11 @@ function renderVaultCard(opts: VaultCardOpts): string {
   return `
     <section class="section" data-testid="no-vault-card">
       <h2>Your vault</h2>
-      <p>Your account isn't assigned to a vault yet. Ask the hub operator
-         to assign one.</p>
+      <p>You don't have a vault yet, so there's nothing to connect to. A vault
+         is your personal knowledge store on this hub — once the operator
+         assigns you one, this page will show you how to connect Claude (or
+         any AI assistant) to it.</p>
+      <p><strong>Ask the hub operator to assign you a vault.</strong></p>
     </section>`;
 }
@@ -433,15 +456,40 @@ const STYLES = `
   .vault-tile p:last-child { margin-top: 0.5rem; }
   .mcp-connect {
-    margin-top: 0.75rem;
-    padding-top: 0.6rem;
-    border-top: 1px solid ${PALETTE.borderLight};
+    margin-bottom: 0.75rem;
   }
   .mcp-connect-label {
+    font-family: ${FONT_SERIF};
+    font-size: 1.05rem;
+    font-weight: 400;
+    color: ${PALETTE.fg};
+    margin: 0 0 0.3rem;
+  }
+  .mcp-connect-intro {
     font-size: 0.85rem;
-    font-weight: 500;
+    color: ${PALETTE.fgMuted};
+    margin: 0 0 0.75rem;
+  }
+  .mcp-method {
+    margin: 0.75rem 0;
+    padding-top: 0.6rem;
+    border-top: 1px solid ${PALETTE.borderLight};
+  }
+  .mcp-method-title {
+    font-size: 0.9rem;
+    font-weight: 600;
     color: ${PALETTE.fg};
-    margin: 0 0 0.5rem;
+    margin: 0 0 0.15rem;
+  }
+  .mcp-method-sub {
+    font-size: 0.82rem;
+    color: ${PALETTE.fgMuted};
+    margin: 0 0 0.4rem;
+  }
+  .mcp-method-note {
+    font-size: 0.78rem;
+    color: ${PALETTE.fgMuted};
+    margin: 0.35rem 0 0;
   }
   .mcp-field { margin: 0.5rem 0; }
   .mcp-field-label {
@@ -453,6 +501,20 @@ const STYLES = `
     font-family: ${FONT_MONO};
     margin-bottom: 0.2rem;
   }
+  .vault-notes-cta {
+    margin: 0.9rem 0 0;
+    padding-top: 0.6rem;
+    border-top: 1px solid ${PALETTE.borderLight};
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.5rem 0.75rem;
+  }
+  .vault-notes-cta-sub {
+    font-size: 0.82rem;
+    color: ${PALETTE.fgMuted};
+    flex: 1 1 12rem;
+  }
   .copy-row {
     display: flex;
     align-items: center;
@@ -564,11 +626,14 @@ const STYLES = `
     body { background: #1a1815; color: #e8e4dc; }
     .card { background: #25221d; border-color: #3a362f; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
     h1, h2 { color: #f0ece4; }
-    .subtitle, .kv dt, .mcp-field-label, .mcp-connect-hint { color: #a8a29a; }
-    .vault-name strong, .mcp-connect-label { color: #f0ece4; }
+    .subtitle, .kv dt, .mcp-field-label, .mcp-connect-hint,
+    .mcp-connect-intro, .mcp-method-sub, .mcp-method-note,
+    .vault-notes-cta-sub { color: #a8a29a; }
+    .vault-name strong, .mcp-connect-label, .mcp-method-title { color: #f0ece4; }
     code { background: #1f1c18; color: #e8e4dc; }
     .copy-row code { background: transparent; }
-    .section, .mcp-connect { border-top-color: #3a362f; }
+    .section { border-top-color: #3a362f; }
+    .mcp-method, .vault-notes-cta { border-top-color: #3a362f; }
     .brand-tag { border-color: #3a362f; color: #a8a29a; }
     .copy-row { background: #1f1c18; border-color: #3a362f; }
     .btn-secondary, .btn-copy { color: #e8e4dc; border-color: #3a362f; }

package/src/hub.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { existsSync, mkdirSync, renameSync, writeFileSync } from "node:fs";
 import { dirname, join } from "node:path";
-import { brandMarkSvg, CANONICAL_TAGLINE, WORDMARK_TEXT } from "./brand.ts";
+import { CANONICAL_TAGLINE, WORDMARK_TEXT, brandMarkSvg } from "./brand.ts";
 import { CONFIG_DIR } from "./config.ts";
 import { CSRF_FIELD_NAME } from "./csrf.ts";
@@ -84,7 +84,19 @@ function buildHtml({ session }: RenderHubOpts): string {
   const authBlock = session
     ? renderSignedIn(session.displayName, session.csrfToken)
     : renderSignedOut();
-  return HTML_TEMPLATE.replace("<!--AUTH-INDICATOR-->", authBlock);
+  // Gate the verbose discovery sections (Get started / Services / Admin)
+  // and their data-loading script on auth state. A signed-out visitor sees
+  // a clean, minimal landing — brand + tagline + a clear "Sign in" call —
+  // not the hub's service catalog, vault listings, or admin links. The
+  // detail un-gates the moment they sign in (the server already knows auth
+  // state from the session cookie, so this stays a no-JS-required,
+  // session-aware render). Operator feedback from a live multi-user deploy:
+  // the signed-out page exposed too much to anonymous visitors.
+  const body = session ? SIGNED_IN_BODY : SIGNED_OUT_BODY;
+  const script = session ? DISCOVERY_SCRIPT : "";
+  return HTML_TEMPLATE.replace("<!--AUTH-INDICATOR-->", authBlock)
+    .replace("<!--DISCOVERY-BODY-->", body)
+    .replace("<!--DISCOVERY-SCRIPT-->", script);
 }
 function renderSignedIn(displayName: string, csrfToken: string): string {
@@ -269,6 +281,34 @@ const HTML_TEMPLATE = `<!doctype html>
     font-size: 0.92rem;
     margin: 0 0 1.25rem;
   }
+  /* Signed-out landing: a single centered "Sign in" call under the brand.
+     Minimal by design — the service catalog + admin surfaces stay hidden
+     until the visitor authenticates. */
+  .signed-out-cta {
+    text-align: center;
+    margin-bottom: 0;
+  }
+  .signed-out-lede {
+    color: var(--fg-muted);
+    font-size: 1.05rem;
+    margin: 0 0 1.5rem;
+  }
+  .btn-signin {
+    display: inline-block;
+    background: var(--accent);
+    color: var(--card-bg);
+    font-family: var(--sans);
+    font-size: 1rem;
+    font-weight: 500;
+    text-decoration: none;
+    padding: 0.65rem 1.6rem;
+    border-radius: 8px;
+    transition: background 0.15s ease, transform 0.15s ease;
+  }
+  .btn-signin:hover {
+    background: var(--accent-hover);
+    transform: translateY(-1px);
+  }
   .grid {
     display: grid;
     gap: 1.25rem;
@@ -378,7 +418,22 @@ const HTML_TEMPLATE = `<!doctype html>
     <h1>${WORDMARK_TEXT}</h1>
     <p class="tagline">${CANONICAL_TAGLINE}</p>
   </header>
+<!--DISCOVERY-BODY-->
+  <footer>
+    <a href="/.well-known/parachute.json">discovery</a>
+  </footer>
+</main>
+<!--DISCOVERY-SCRIPT-->
+</body>
+</html>
+`;
+// The verbose discovery body — the service catalog, admin surfaces, and the
+// "Get started" CTA. Rendered ONLY for a signed-in visitor (`buildHtml`
+// selects this vs SIGNED_OUT_BODY on `session`). Anonymous visitors get the
+// slim landing below instead, so the hub's internal surface isn't exposed
+// pre-auth.
+const SIGNED_IN_BODY = `
   <section class="section" id="get-started-section" hidden>
     <h2>Get started</h2>
     <p class="section-sub">Jump straight into what you came here for.</p>
@@ -398,12 +453,21 @@ const HTML_TEMPLATE = `<!doctype html>
     <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>
+// The slim signed-out landing. Brand + tagline (in the header above) plus a
+// single clear "Sign in" call — no service catalog, no vault listings, no
+// admin links. Keep it tasteful and minimal; the detail un-gates on sign-in.
+const SIGNED_OUT_BODY = `
+  <section class="section signed-out-cta" id="signed-out-cta">
+    <p class="signed-out-lede">Sign in to reach your vault and the services on this hub.</p>
+    <a href="/login?next=/" class="btn-signin" data-testid="signed-out-signin">Sign in →</a>
+  </section>
+`;
+// The data-loading script for the signed-in discovery body. Emitted only
+// when signed in (the signed-out body has nothing for it to populate).
+const DISCOVERY_SCRIPT = `<script>
 (async () => {
   const servicesGrid = document.getElementById('services-grid');
   const adminGrid = document.getElementById('admin-grid');
@@ -614,7 +678,4 @@ const HTML_TEMPLATE = `<!doctype html>
   void loadServices();
 })();
-</script>
-</body>
-</html>
-`;
+</script>`;