@openparachute/hub 0.5.13-rc.13 → 0.5.13-rc.21

package/src/setup-wizard.ts

@@ -646,22 +646,41 @@ export interface RenderDoneStepProps {
    * shape.
    */
   installTiles?: readonly ModuleInstallTileState[];
+  /**
+   * Whether parachute-app is installed alongside the vault. Drives the
+   * "Start using your vault" lead tile (hub#342): when true, the tile
+   * links to `/app/notes/` (the canonical user-facing surface — App
+   * auto-bootstraps Notes-as-UI per the 2026-05-21 migration). When
+   * false, it falls back to the vault's own admin UI at
+   * `/vault/<name>/admin/` so the operator still has a single obvious
+   * "start using parachute" target. Omitted = back-compat with tests
+   * that render the done step without dependency-checking; defaults to
+   * false (vault-admin fallback).
+   */
+  appInstalled?: boolean;
 }
 
 export function renderDoneStep(props: RenderDoneStepProps): string {
-  const { vaultName, hubOrigin, exposeMode, mintedToken, installTiles } = props;
+  const { vaultName, hubOrigin, exposeMode, mintedToken, installTiles, appInstalled } = props;
   const reachable = exposeMode ? renderReachableTile(exposeMode, hubOrigin) : "";
   const mcpTile = renderMcpTile(vaultName, hubOrigin, mintedToken);
   const tiles = installTiles && installTiles.length > 0 ? installTiles : [];
   const installSection = tiles.length > 0 ? renderInstallTiles(tiles) : "";
+  const startTile = renderStartUsingTile(vaultName, appInstalled === true);
   // The done-grid hosts the MCP-connect tile + the admin-UI fallback.
-  // The install tiles sit above it as a primary "what's next?" surface —
-  // they're the highest-friction next-step for most operators (operator
-  // just provisioned a vault, the obvious next action is installing the
-  // PWA / transcription module on top of it). Reachable tile leads
-  // everything because it answers "where's my hub?" before anything
-  // else — the question every operator hits before MCP / module
-  // installs even matter.
+  // The install tiles sit above it as a "what's next?" surface (curated
+  // catalog of modules an operator might want next). The "Start using
+  // your vault" tile leads everything user-facing because it answers
+  // Aaron's hub#342 friction directly: there was no clear way from the
+  // wizard's done screen to actually USE Parachute — the wizard
+  // surfaced "install more" + "go to admin" + an MCP command, none of
+  // which is "open the canonical user-facing UI" (Notes via App). With
+  // this tile in pole position, the operator's first click goes to a
+  // surface that says "hello, here's your vault" rather than a hub
+  // admin page. The reachable tile sits above even the start tile
+  // because "where's my hub?" answers the URL question every operator
+  // hits before they can click anything else (especially on tailnet /
+  // public expose where the loopback URL isn't the answer).
   const body = `
     <div class="card">
       <div class="card-header">
@@ -670,6 +689,7 @@ export function renderDoneStep(props: RenderDoneStepProps): string {
         <p class="subtitle">Your hub is ready. Here's what to do next.</p>
       </div>
       ${reachable}
+      ${startTile}
       ${installSection}
       <section class="done-grid">
         ${mcpTile}
@@ -839,6 +859,51 @@ function renderMcpTile(
   </div>`;
 }
 
+/**
+ * The "Start using your vault" lead tile on the done step (hub#342).
+ *
+ * Closes Aaron's "no clear way to go from setting up parachute to
+ * actually using parachute" friction. Sits above the MCP / install
+ * tiles because it's the canonical user-facing entry point —
+ * everything else on the done screen is operator-flavored (MCP
+ * command, admin UI, additional module installs).
+ *
+ * Two shapes:
+ *   - **App installed** → primary tile targets `/app/notes/` (the
+ *     Notes app reading the just-created vault). This is the
+ *     canonical surface post-Notes-as-app migration (parachute-app §17).
+ *   - **App NOT installed** → primary tile targets the vault's own
+ *     admin UI at `/vault/<name>/admin/`. The copy explains that
+ *     installing App + Notes is the recommended next step for a
+ *     content-browsing surface, and points at the install tile below.
+ *
+ * Either way, the operator has ONE obvious click target that says
+ * "start using parachute" — not three competing tiles where the
+ * "real" entry point is buried under the MCP command pre-hub#342.
+ */
+function renderStartUsingTile(vaultName: string, appInstalled: boolean): string {
+  const safeVault = escapeHtml(vaultName);
+  // Vault names pass `/^[a-z0-9][a-z0-9-]*$/i` so URL-encoding is mostly
+  // a no-op today, but use encodeURIComponent defensively to match hub.ts:505.
+  const urlVault = encodeURIComponent(vaultName);
+  if (appInstalled) {
+    return `<section class="start-using" data-testid="start-using-tile">
+      <h2>Start using your vault</h2>
+      <p>Notes is installed and ready. Capture your first note in the
+        Notes app — it reads from <code>${safeVault}</code> directly.</p>
+      <p><a class="btn btn-primary" href="/app/notes/">Open Notes</a></p>
+    </section>`;
+  }
+  return `<section class="start-using" data-testid="start-using-tile">
+    <h2>Start using your vault</h2>
+    <p>Your vault <code>${safeVault}</code> is provisioned. Install
+      <strong>App</strong> below (it bundles the Notes UI) to start
+      capturing — or open the vault's admin UI now to see what's
+      inside.</p>
+    <p><a class="btn btn-primary" href="/vault/${urlVault}/admin/">Open vault admin</a></p>
+  </section>`;
+}
+
 /**
  * The "What's next?" install-tiles row (hub#272 Item B). One tile per
  * curated module the operator might want next (Notes, Scribe). Each
@@ -859,6 +924,15 @@ function renderInstallTile(tile: ModuleInstallTileState): string {
   const safeShort = escapeHtml(tile.short);
   const safeName = escapeHtml(tile.displayName);
   const safeTagline = escapeHtml(tile.tagline);
+  const useItNowUrl = USE_IT_NOW_URLS[tile.short];
+  // "Use it now" → the canonical user-facing URL per
+  // module-ui-declaration.md, rendered as the PRIMARY action on a
+  // succeeded / already-installed install tile (hub#342). "Manage
+  // modules" stays as the secondary affordance so the admin SPA is
+  // one click away too. The URL table is keyed by the wizard's
+  // curated shorts (app, scribe today; vault excluded since the
+  // wizard owns its step); modules with no known surface fall
+  // through to a single "Manage modules" link, same as pre-#342.
   if (tile.operation) {
     const op = tile.operation;
     const logLines = op.log.map((l) => `<li>${escapeHtml(l)}</li>`).join("");
@@ -870,7 +944,13 @@ function renderInstallTile(tile: ModuleInstallTileState): string {
     // catches every in-flight op at once).
     let actions = "";
     if (op.status === "succeeded") {
-      actions = `<p><a class="btn btn-secondary" href="/admin/modules">Manage modules</a></p>`;
+      const useItNowLink = useItNowUrl
+        ? `<a class="btn btn-primary" href="${escapeAttr(useItNowUrl)}">Use it now</a>`
+        : "";
+      actions = `<p class="install-tile-actions">
+        ${useItNowLink}
+        <a class="btn btn-secondary" href="/admin/modules">Manage modules</a>
+      </p>`;
     } else if (op.status === "failed") {
       actions = `<form method="POST" action="/admin/setup/install/${safeShort}" class="install-retry">
         ${renderInstallTileCsrfPlaceholder()}
@@ -889,11 +969,17 @@ function renderInstallTile(tile: ModuleInstallTileState): string {
     </div>`;
   }
   if (tile.alreadyInstalled) {
+    const useItNowLink = useItNowUrl
+      ? `<a class="btn btn-primary" href="${escapeAttr(useItNowUrl)}">Use it now</a>`
+      : "";
     return `<div class="install-tile install-tile-installed">
       <h3>${safeName}</h3>
       <p class="install-tile-tagline">${safeTagline}</p>
       <p class="install-tile-status">Already installed.</p>
-      <p><a class="btn btn-secondary" href="/admin/modules">Manage in admin</a></p>
+      <p class="install-tile-actions">
+        ${useItNowLink}
+        <a class="btn btn-secondary" href="/admin/modules">Manage in admin</a>
+      </p>
     </div>`;
   }
   return `<div class="install-tile">
@@ -906,6 +992,30 @@ function renderInstallTile(tile: ModuleInstallTileState): string {
   </div>`;
 }
 
+/**
+ * Canonical "Use it now" target per curated module short (hub#342).
+ * Each value is the canonical user-facing URL the module ships its UI
+ * at — per `module-ui-declaration.md` (`uiUrl` / `managementUrl` rules).
+ * App's surface is the bundled Notes-as-UI auto-bootstrap mount;
+ * Scribe is the operator-facing admin UI (per `module-surfaces.md`,
+ * scribe's admin surface is at `/scribe/admin` once an admin SPA ships
+ * — scribe#53 tracks). Missing entries here fall through to "Manage
+ * modules" only — i.e. modules without a declared first-party UI
+ * surface. Vault is intentionally omitted: the wizard's own vault
+ * step owns the post-vault-install flow and the lead "Start using
+ * your vault" tile (above the install row) handles the vault-side
+ * surface decision.
+ */
+const USE_IT_NOW_URLS: Partial<Record<CuratedModuleShort, string>> = {
+  app: "/app/notes/",
+  notes: "/notes/",
+  // Omitted: scribe + runner. They don't ship an admin SPA yet
+  // (scribe#53, runner#8 track). Pointing "Use it now" at /scribe/admin
+  // or /runner/admin today would 404 — better to fall through to the
+  // "Manage modules" link than to send the operator into a dead end.
+  // Add the entry here once those modules ship their admin UI.
+};
+
 /**
  * CSRF token placeholder for install-tile forms. The token comes from
  * the wizard's per-request CSRF cookie; rendered by the parent step's
@@ -1045,10 +1155,16 @@ export function handleSetupGet(req: Request, deps: SetupWizardDeps): Response {
       // Module install tiles (hub#272 Item B). One per curated module
       // other than vault (which the wizard already provisioned).
       const installTiles = buildInstallTiles(url, deps);
+      // hub#342: drive the lead "Start using your vault" tile's target.
+      // When parachute-app is installed alongside vault, the tile links
+      // to `/app/notes/` (auto-bootstrapped Notes-as-UI per parachute-app
+      // §17). Otherwise it falls back to the vault's own admin UI.
+      const appInstalled = isModuleInstalled("app", deps.manifestPath);
       const doneProps: RenderDoneStepProps = {
         vaultName,
         hubOrigin: deps.issuer,
         installTiles,
+        appInstalled,
       };
       if (exposeMode !== undefined) doneProps.exposeMode = exposeMode;
       if (mintedToken) doneProps.mintedToken = mintedToken;
@@ -1690,6 +1806,20 @@ function validateAccountFields(input: {
   return undefined;
 }
 
+/**
+ * Whether a given curated module is currently installed (has a row in
+ * services.json keyed by its canonical `manifestName`). Used by the
+ * done-step renderer (hub#342) to decide whether to point the "Start
+ * using your vault" tile at `/app/notes/` (App installed → Notes UI
+ * auto-bootstrapped) vs the vault's own admin UI. Cheap manifest read
+ * shared with `buildInstallTiles`.
+ */
+function isModuleInstalled(short: CuratedModuleShort, manifestPath: string): boolean {
+  const manifest = readManifest(manifestPath);
+  const spec = specFor(short);
+  return manifest.services.some((s) => s.name === spec.manifestName);
+}
+
 /**
  * Read the first vault's display name from services.json for the
  * step-4 success page. Falls back to "default" if for any reason the
@@ -2046,6 +2176,18 @@ const STYLES = `
     display: flex;
     flex-direction: column;
     gap: 0.4rem;
+    /* min-width: 0 lets the grid track shrink below the tile's intrinsic
+       content width — without it a long log line in .install-tile-log
+       forces the tile (and its parent grid track) wider than the card,
+       which is what stretched the wizard when Aaron clicked Install App. */
+    min-width: 0;
+  }
+  /* "Use it now" action row on a successful install-tile (hub#342 item 3). */
+  .install-tile-actions {
+    margin: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
   }
   .install-tile h3 {
     margin: 0;
@@ -2131,6 +2273,23 @@ const STYLES = `
     margin: 1rem 0;
     font-family: ${FONT_MONO};
     font-size: 0.85rem;
+    /* Install logs spit long lines (npm package names with paths, JSON
+       dumps, stack traces). Without these constraints the <li> contents
+       overflow the card horizontally — caught Aaron mid-install (hub#342):
+       clicking Install App / Install Scribe blew up the entire wizard
+       layout, font size jumped, the page stretched off-screen. The
+       triple of overflow-x:auto + white-space:pre-wrap + min-width:0
+       keeps the log inside its container regardless of line length:
+       overflow-x:auto on .op-log gives a horizontal scrollbar as a
+       last-resort affordance; pre-wrap on .log-lines li wraps cleanly
+       at whitespace so the common case never even needs to scroll;
+       min-width:0 on the outer log-lines list is the magic-flex bit
+       that lets the list itself shrink below its content's intrinsic
+       width inside the card's flex/grid layout. break-word (rather
+       than break-all) keeps URLs / paths legible when they DO have to
+       break. */
+    overflow-x: auto;
+    max-width: 100%;
   }
   .op-status {
     margin: 0 0 0.5rem;
@@ -2139,8 +2298,18 @@ const STYLES = `
   }
   .op-succeeded { color: ${PALETTE.success}; }
   .op-failed { color: ${PALETTE.danger}; }
-  .log-lines { margin: 0; padding-left: 1.25rem; color: ${PALETTE.fgMuted}; }
-  .log-lines li { margin: 0.15rem 0; }
+  .log-lines {
+    margin: 0;
+    padding-left: 1.25rem;
+    color: ${PALETTE.fgMuted};
+    min-width: 0;
+  }
+  .log-lines li {
+    margin: 0.15rem 0;
+    white-space: pre-wrap;
+    word-break: break-word;
+    overflow-wrap: anywhere;
+  }
 
   .done-grid {
     display: grid;
@@ -2258,6 +2427,30 @@ const STYLES = `
   }
   .reachable .fine { font-size: 0.85rem; color: ${PALETTE.fgMuted}; margin: 0.4rem 0 0; }
 
+  /* "Start using your vault" lead tile on the done step (hub#342).
+     Same visual weight as .reachable so the operator's eye lands here
+     as the primary user-facing entry — slightly more prominent
+     padding + a stronger heading to telegraph "this is the click
+     you're looking for." */
+  .start-using {
+    background: ${PALETTE.cardBg};
+    border: 1px solid ${PALETTE.accent};
+    border-radius: 8px;
+    padding: 1rem 1.1rem;
+    margin: 0 0 1rem;
+  }
+  .start-using h2 {
+    margin: 0 0 0.5rem;
+    text-transform: none;
+    letter-spacing: 0;
+    font-size: 1.1rem;
+    color: ${PALETTE.fg};
+    font-family: ${FONT_SERIF};
+    font-weight: 400;
+  }
+  .start-using p { margin: 0.4rem 0; }
+  .start-using p:last-child { margin-bottom: 0; }
+
   code {
     background: ${PALETTE.borderLight};
     padding: 0.05rem 0.3rem;

package/web/ui/dist/assets/index-5Mj6FqPg.css

@@ -0,0 +1 @@
+:root{--bg: #faf8f4;--bg-soft: #f3f0ea;--fg: #2c2a26;--fg-muted: #6b6860;--fg-dim: #9a9690;--accent: #4a7c59;--accent-soft: rgba(74, 124, 89, .08);--accent-hover: #3d6849;--border: #e4e0d8;--border-light: #ece9e2;--card-bg: #ffffff;--error: #a3392b;--error-soft: rgba(163, 57, 43, .08);--warn: #b08023;--warn-soft: rgba(176, 128, 35, .08);--success: #3d6849;--success-soft: rgba(61, 104, 73, .08);--font-serif: Georgia, "Times New Roman", serif;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-mono: ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", monospace;font-family:var(--font-sans)}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--fg)}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button{font:inherit;background:var(--accent);color:#fff;border:0;border-radius:6px;padding:.55rem 1.1rem;cursor:pointer;transition:background .15s ease}button:hover{background:var(--accent-hover)}button:disabled{opacity:.5;cursor:not-allowed}button.secondary{background:#fff;color:var(--fg);border:1px solid var(--border)}button.secondary:hover{background:var(--bg-soft)}input,select,textarea{font:inherit;background:#fff;border:1px solid var(--border);border-radius:6px;padding:.55rem .75rem;color:var(--fg)}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}code{font-family:var(--font-mono);font-size:.85em;background:var(--bg-soft);padding:.1em .3em;border-radius:3px}.page{max-width:880px;margin:0 auto;padding:1.5rem 1.5rem 6rem}.nav{display:flex;gap:1rem;align-items:center;padding-bottom:1rem;border-bottom:1px solid var(--border);margin-bottom:2rem}.nav .brand{font-weight:600;font-family:var(--font-serif);font-size:1.15rem;margin-right:auto}.nav .brand .sub{color:var(--fg-dim);font-size:.78rem;font-weight:400;margin-left:.4rem;font-family:var(--font-sans)}.nav a{color:var(--fg-muted);font-size:.95rem}.nav a:hover{text-decoration:none;color:var(--fg)}.nav .nav-divider{display:inline-block;width:1px;height:1.1em;background:var(--border);align-self:center}.nav .nav-dropdown{position:relative}.nav .nav-dropdown-summary{list-style:none;cursor:pointer;color:var(--fg-muted);font-size:.95rem;-webkit-user-select:none;user-select:none}.nav .nav-dropdown-summary::-webkit-details-marker{display:none}.nav .nav-dropdown-summary:hover{color:var(--fg)}.nav .nav-dropdown[open]>.nav-dropdown-summary{color:var(--fg)}.nav .nav-dropdown-summary:after{content:" ▾";font-size:.7em;color:var(--fg-dim)}.nav .nav-dropdown-panel{position:absolute;top:calc(100% + .4rem);left:0;z-index:10;min-width:12rem;background:var(--card-bg);border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 12px #00000014;padding:.4rem 0;display:flex;flex-direction:column}.nav .nav-dropdown-item{padding:.4rem .85rem;color:var(--fg);font-size:.9rem;text-decoration:none}.nav .nav-dropdown-item:hover{background:var(--bg-soft);color:var(--fg);text-decoration:none}.nav .nav-dropdown-item-disabled{color:var(--fg-dim);cursor:not-allowed}.nav .nav-dropdown-item-disabled:hover{background:transparent;color:var(--fg-dim)}.nav .auth-spa{font-size:.85rem;color:var(--fg-muted)}.nav .auth-spa strong{font-weight:600;color:var(--fg)}.nav .auth-spa-signout{background:none;border:none;padding:0;color:var(--accent);font:inherit;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}.nav .auth-spa-signout:hover:not(:disabled){color:var(--accent-hover)}.nav .auth-spa-signout:disabled{color:var(--fg-dim);cursor:not-allowed}h2{margin:0 0 1rem;font-size:1.4rem;font-weight:500}.muted{color:var(--fg-muted);font-size:.92rem}.dim{color:var(--fg-dim);font-size:.85rem}.error-banner{background:var(--error-soft);border:1px solid var(--error);color:var(--error);padding:.75rem 1rem;border-radius:8px;margin-bottom:1rem;font-size:.9rem}.warn-banner{background:var(--warn-soft);border:1px solid var(--warn);color:var(--warn);padding:.75rem 1rem;border-radius:8px;margin-bottom:1rem;font-size:.9rem}.empty{padding:3rem 1.5rem;text-align:center;color:var(--fg-muted);background:var(--bg-soft);border-radius:10px}.empty-rich{text-align:left;padding:2rem 1.75rem;background:#fff;border:1px solid var(--border)}.empty-rich .empty-headline{font-size:1.05rem;color:var(--fg);margin:0 0 .5rem;font-weight:500}.list-header{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1rem}.list-header h2{margin:0}.tag{display:inline-block;padding:.1em .55em;background:var(--accent-soft);color:var(--accent);border-radius:4px;font-size:.78rem;font-weight:500}.tag.muted{background:var(--bg-soft);color:var(--fg-muted)}.tag.source-oauth{background:#4a7cc61f;color:#3b6aa6}.tag.source-operator{background:#c6984a24;color:#8a5e1f}.tag.source-cli{background:#4a7c5924;color:#2f5a3f}.tag.source-unknown{background:var(--bg-soft);color:var(--fg-muted)}@media(prefers-color-scheme:dark){.tag.source-oauth{background:#7a9cdc24;color:#9bb6d8}.tag.source-operator{background:#dcb46e24;color:#d4b27a}.tag.source-cli{background:#7ab08a24;color:#8fc49e}.tag.source-unknown{background:#e8e4dc0f;color:#a8a49a}}.vault-row{display:flex;align-items:center;gap:1rem;padding:.85rem 1rem;background:#fff;border:1px solid var(--border);border-radius:8px;margin-bottom:.5rem;text-decoration:none;color:inherit;transition:border-color .15s ease}.vault-row:hover{border-color:var(--accent);text-decoration:none}.vault-row .body{flex:1;min-width:0}.vault-row .name{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.vault-row .name code{font-size:.95em}.vault-row .url{margin-top:.25rem;word-break:break-all}.vault-row .chev{color:var(--fg-dim);font-size:1.2rem}form .row{margin-bottom:1rem}form label{display:block;font-size:.9rem;color:var(--fg-muted);margin-bottom:.3rem;font-weight:500}form input[type=text]{width:100%}form .actions{display:flex;gap:.6rem;align-items:center;margin-top:1rem}form .field-hint{margin-top:.35rem;font-size:.82rem;color:var(--fg-dim)}form .field-error{margin-top:.35rem;font-size:.85rem;color:var(--error)}.section{background:#fff;border:1px solid var(--border);border-radius:10px;padding:1.25rem 1.5rem;margin-bottom:1.5rem}.mint-banner{background:var(--success-soft);border:1px solid var(--success);border-radius:10px;padding:1.25rem 1.5rem;margin-bottom:1.5rem}.mint-banner h3{margin:0 0 .5rem;font-size:1rem;color:var(--success)}.mint-banner .token-box{display:flex;align-items:center;gap:.5rem;margin:.85rem 0 .5rem}.mint-banner code{flex:1;font-size:.9rem;padding:.6rem .75rem;background:#fff;border:1px solid var(--border);word-break:break-all;-webkit-user-select:all;user-select:all}.mint-banner .warn{margin:.75rem 0 0;font-size:.85rem;color:var(--warn)}.mint-banner .actions{margin-top:1rem;display:flex;gap:.5rem}.kv{display:grid;grid-template-columns:8.5rem 1fr;gap:.5rem 1rem;font-size:.92rem}.kv>div:nth-child(odd){color:var(--fg-muted)}.kv code{word-break:break-all}.channel-toggle{margin:1.25rem 0 1.5rem;padding:.75rem 1rem;border:1px solid var(--border, #ddd);border-radius:6px;background:var(--bg-soft, #fafafa)}.channel-toggle legend{padding:0 .25rem;font-weight:600;font-size:.95rem}.channel-toggle label{display:inline-flex;align-items:center;gap:.4rem;margin-right:1.5rem;cursor:pointer;font-size:.95rem}.channel-toggle label input[type=radio]:disabled+*{opacity:.5}.channel-toggle code{font-size:.85em}.channel-toggle p.muted{margin:.4rem 0 0;font-size:.85rem}.module-config{display:flex;flex-direction:column;gap:1.25rem}.module-config-header h1{margin-bottom:.35rem}.module-config-form fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:1rem}.module-config-form .field{display:flex;flex-direction:column;gap:.25rem}.module-config-form .field input,.module-config-form .field select,.module-config-form .field textarea{width:100%}.module-config-form .field-inline{flex-direction:row;align-items:center;flex-wrap:wrap;gap:.5rem}.module-config-form .field-inline label{display:inline-flex;align-items:center;gap:.5rem}.module-config-form .field-inline .field-hint{flex-basis:100%;margin-left:1.6rem}.module-config-form .field-invalid input,.module-config-form .field-invalid select,.module-config-form .field-invalid textarea{border-color:var(--error)}.module-config-form .actions{display:flex;gap:.6rem;align-items:center;margin-top:.5rem}.module-config-form .actions button.destructive{background:#fff;color:var(--fg);border:1px solid var(--border)}.module-config-form .actions button.destructive:hover{background:var(--bg-soft)}.module-config-form .banner{margin:0;padding:.75rem 1rem;border-radius:6px;border:1px solid transparent;font-size:.9rem}.module-config-form .banner-success{background:var(--success-soft);border-color:var(--success);color:var(--success)}.module-config-form .banner-success p,.module-config-form .banner-success ul{margin:.4rem 0 0}.module-config-form .banner-error{background:var(--error-soft, rgba(163, 57, 43, .08));border-color:var(--error);color:var(--error)}.modules-installed,.modules-installable{margin-top:1.75rem}.modules-installed>h2,.modules-installable>h2{font-size:1.15rem;font-weight:600;margin:0 0 .75rem;color:var(--fg)}.modules-installed>p.muted,.modules-installable>p.muted{margin:0 0 .5rem}.install-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.6rem}.install-card{display:flex;flex-direction:row;align-items:center;gap:1rem;flex-wrap:wrap;padding:.85rem 1rem;background:#fff;border:1px solid var(--border);border-radius:8px;transition:border-color .15s ease}.install-card:hover{border-color:var(--accent)}.install-card-body{flex:1 1 0;min-width:0}.install-card-body h3{margin:0 0 .2rem;font-size:1rem;font-weight:600;color:var(--fg)}.install-card-body .tagline{margin:0 0 .35rem;color:var(--fg-muted);font-size:.92rem}.install-card-meta{margin:0;font-size:.82rem}.install-card-actions{flex:0 0 auto}.install-card .error{flex-basis:100%;margin-top:.5rem;color:var(--error);font-size:.85rem}.module-row .actions .btn,a.btn{display:inline-block;font:inherit;background:var(--accent);color:#fff;border:0;border-radius:6px;padding:.55rem 1.1rem;cursor:pointer;transition:background .15s ease;text-decoration:none}.module-row .actions .btn:hover,a.btn:hover{background:var(--accent-hover);text-decoration:none}.module-uis{margin:.5rem 0 0;padding:.5rem 0 0;border-top:1px solid var(--border-light)}.module-uis>summary{cursor:pointer;font-size:.88rem;color:var(--fg-muted);font-weight:500;padding:.15rem 0;list-style:revert}.module-uis>summary:hover{color:var(--fg)}.ui-sub-units{list-style:none;padding:0;margin:.5rem 0 0 1.1rem;display:flex;flex-direction:column;gap:.35rem}.ui-sub-unit{display:flex;flex-direction:row;align-items:center;gap:.65rem;padding:.5rem .75rem;background:var(--bg-soft);border:1px solid var(--border-light);border-radius:6px;transition:border-color .15s ease,background .15s ease}.ui-sub-unit:hover{border-color:var(--accent);background:#fff}.ui-icon{flex:0 0 auto;width:20px;height:20px;border-radius:4px;object-fit:contain}.ui-sub-unit-body{flex:1 1 0;min-width:0}.ui-sub-unit-link{color:var(--fg);font-size:.95rem;text-decoration:none}.ui-sub-unit-link:hover{color:var(--accent);text-decoration:underline}.ui-sub-unit-link strong{font-weight:600}.ui-sub-unit .tagline{margin:.2rem 0 0;font-size:.82rem;color:var(--fg-muted)}.status{flex:0 0 auto;display:inline-block;padding:.1em .55em;background:var(--bg-soft);color:var(--fg-muted);border-radius:4px;font-size:.78rem;font-weight:500;white-space:nowrap}.status-active{background:var(--success-soft);color:var(--success)}.status-pending-oauth{background:var(--warn-soft);color:var(--warn)}.status-disabled{background:var(--bg-soft);color:var(--fg-dim)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}