@openparachute/hub 0.5.1 → 0.5.7

package/src/notes-serve.ts

@@ -25,6 +25,7 @@
  */
 
 import { existsSync } from "node:fs";
+import { homedir } from "node:os";
 import { dirname, join, resolve } from "node:path";
 
 interface Args {
@@ -67,16 +68,76 @@ export function normalizeMount(raw: string): string {
   return raw.replace(/\/+$/, "");
 }
 
-function resolveNotesDist(): string {
-  const pkgPath = Bun.resolveSync("@openparachute/notes/package.json", process.cwd());
-  const root = dirname(pkgPath);
-  const dist = join(root, "dist");
-  if (!existsSync(dist)) {
-    throw new Error(
-      `@openparachute/notes is installed but has no dist/ directory at ${dist}. The package may not ship a prebuilt bundle — ask the notes maintainer to add a prepublishOnly build step.`,
-    );
+/**
+ * Candidate base directories that `Bun.resolveSync` walks from when looking
+ * for `@openparachute/notes/package.json`. Order matters:
+ *
+ *   1. `process.cwd()` — works when notes-serve is invoked from inside the
+ *      notes checkout (e.g. via `installDir` cwd in lifecycle.ts) or from
+ *      any project that depends on `@openparachute/notes`.
+ *   2. `~/.bun/install/global/node_modules` — modern Bun's global-install
+ *      layout. This is where `bun add -g @openparachute/notes` lands the
+ *      package, and where `bun link @openparachute/notes` symlinks it.
+ *   3. `~/.bun/install/global` — defensive fallback for older Bun layouts.
+ *
+ * Hub itself does NOT depend on `@openparachute/notes`, so when
+ * `parachute start notes` is run from the hub repo dir, the cwd-relative
+ * resolve walks ancestral node_modules and finds nothing. Bun does not
+ * auto-consult the global install dir, so bun-linked installs fail to
+ * resolve without (2)/(3). hub#194: Aaron hit silent 502 on tailnet
+ * `/notes/` because of this — fixed by trying the global install dirs.
+ *
+ * Exported (and parameterized via `cwd`/`home`) so tests can drive the
+ * resolution order against a real fixture install without monkey-patching
+ * `Bun.resolveSync`.
+ */
+export function notesDistCandidates(cwd: string, home: string): string[] {
+  return [cwd, join(home, ".bun/install/global/node_modules"), join(home, ".bun/install/global")];
+}
+
+export interface ResolveNotesDistDeps {
+  cwd?: string;
+  home?: string;
+  /** Override `Bun.resolveSync` for tests. */
+  resolveSync?: (specifier: string, base: string) => string;
+  existsSync?: (path: string) => boolean;
+}
+
+export function resolveNotesDistFrom(deps: ResolveNotesDistDeps = {}): string {
+  const cwd = deps.cwd ?? process.cwd();
+  const home = deps.home ?? homedir();
+  const resolveSync = deps.resolveSync ?? Bun.resolveSync;
+  const exists = deps.existsSync ?? existsSync;
+  const candidates = notesDistCandidates(cwd, home);
+  const resolveErrors: string[] = [];
+  for (const base of candidates) {
+    let pkgPath: string;
+    try {
+      pkgPath = resolveSync("@openparachute/notes/package.json", base);
+    } catch (err) {
+      resolveErrors.push(`  - ${base}: ${err instanceof Error ? err.message : String(err)}`);
+      continue;
+    }
+    const root = dirname(pkgPath);
+    const dist = join(root, "dist");
+    if (!exists(dist)) {
+      // Found the package but it has no dist/. This is a hard error
+      // (package shipped without a prebuilt bundle); don't fall through to
+      // other candidates — they'd resolve to the same package and report
+      // the same problem.
+      throw new Error(
+        `@openparachute/notes resolved at ${root} has no dist/ directory at ${dist}. The package may not ship a prebuilt bundle — ask the notes maintainer to add a prepublishOnly build step.`,
+      );
+    }
+    return dist;
   }
-  return dist;
+  throw new Error(
+    `Could not resolve @openparachute/notes from any of:\n${resolveErrors.join("\n")}\nIs the package installed? Try \`bun add -g @openparachute/notes\` or \`parachute install notes\`.`,
+  );
+}
+
+function resolveNotesDist(): string {
+  return resolveNotesDistFrom();
 }
 
 function mimeFor(path: string): string | undefined {

package/src/oauth-handlers.ts

@@ -8,6 +8,7 @@
  *   - GET  /.well-known/oauth-authorization-server  (RFC 8414 metadata)
  *   - GET  /oauth/authorize                          (login → consent → code)
  *   - POST /oauth/authorize                          (form posts: login + consent)
+ *   - POST /oauth/authorize/approve                  (operator-driven inline DCR approval, #208)
  *   - POST /oauth/token                              (grant_type=authorization_code | refresh_token)
  *   - POST /oauth/register                           (RFC 7591 DCR)
  *   - POST /oauth/revoke                             (RFC 7009 token revocation)
@@ -35,6 +36,7 @@ import {
   type ClientStatus,
   type OAuthClient,
   type RegisteredClient,
+  approveClient,
   getClient,
   isValidRedirectUri,
   registerClient,
@@ -53,7 +55,13 @@ import {
   signAccessToken,
   signRefreshToken,
 } from "./jwt-sign.ts";
-import { type AuthorizeFormParams, renderConsent, renderError, renderLogin } from "./oauth-ui.ts";
+import {
+  type AuthorizeFormParams,
+  renderApprovePending,
+  renderConsent,
+  renderError,
+  renderLogin,
+} from "./oauth-ui.ts";
 import { isNonRequestableScope, isRequestableScope } from "./scope-explanations.ts";
 import { findUnknownScopes, loadDeclaredScopes } from "./scope-registry.ts";
 import {
@@ -64,6 +72,7 @@ import {
   SESSION_TTL_MS,
   buildSessionCookie,
   createSession,
+  findActiveSession,
   findSession,
   parseSessionCookie,
 } from "./sessions.ts";
@@ -291,12 +300,63 @@ function parseAuthorizeFormParams(url: URL): AuthorizeFormParams | { error: stri
   };
 }
 
-/** HTML response for pending clients hitting /oauth/authorize. */
-function pendingClientHtml(): Response {
-  return htmlError(
-    "App not yet approved",
-    "This client_id is registered but has not been approved by the hub operator. Ask the operator to run `parachute auth approve-client` for this app, then try again.",
+/**
+ * "App not yet approved" page (#74) for /oauth/authorize. When the request
+ * carries a valid operator session AND a same-origin Origin/Referer, render
+ * the inline approve form (#208) so one click flips the client to `approved`
+ * and the OAuth flow re-enters at consent. Otherwise fall back to the
+ * pre-#208 CLI-only message ("ask operator to run `parachute auth
+ * approve-client <id>`").
+ *
+ * The session-bound approve gate mirrors the same-origin DCR auto-approve
+ * gate on `/oauth/register` (#199, #200): valid session cookie + matching
+ * Origin/Referer = trusted operator action. Cross-origin or session-less
+ * GETs see the CLI-fallback message; the button never renders for them, so
+ * the POST handler can't be tricked into approving via a hand-crafted form
+ * either (CSRF token won't match).
+ *
+ * The form's `return_to` carries the original `/oauth/authorize?...` URL so
+ * the post-approve redirect lands the operator back on the same flow with
+ * the now-approved client. The POST handler validates `return_to` is a
+ * hub-relative path before following it (open-redirect defense).
+ */
+function pendingClientResponse(
+  db: Database,
+  req: Request,
+  client: OAuthClient,
+  authorizeUrl: URL,
+  deps: OAuthDeps,
+): Response {
+  const requestedScopes = (authorizeUrl.searchParams.get("scope") ?? "")
+    .split(" ")
+    .filter((s) => s.length > 0);
+  const session = findActiveSession(db, req, deps.now ?? (() => new Date()));
+  const sameOrigin = originMatchesIssuer(req, deps.issuer);
+  const csrf = ensureCsrfToken(req);
+  const extra: Record<string, string> = csrf.setCookie ? { "set-cookie": csrf.setCookie } : {};
+  if (session && sameOrigin) {
+    const returnTo = `${authorizeUrl.pathname}${authorizeUrl.search}`;
+    return htmlResponse(
+      renderApprovePending({
+        clientName: client.clientName ?? client.clientId,
+        clientId: client.clientId,
+        redirectUris: client.redirectUris,
+        requestedScopes,
+        approveForm: { csrfToken: csrf.token, returnTo },
+      }),
+      403,
+      extra,
+    );
+  }
+  return htmlResponse(
+    renderApprovePending({
+      clientName: client.clientName ?? client.clientId,
+      clientId: client.clientId,
+      redirectUris: client.redirectUris,
+      requestedScopes,
+    }),
     403,
+    extra,
   );
 }
 
@@ -345,7 +405,9 @@ export function handleAuthorizeGet(db: Database, req: Request, deps: OAuthDeps):
     // matched it against a registered client. Render an HTML error.
     return htmlError("Unknown application", "This client_id is not registered with this hub.", 400);
   }
-  if (client.status !== "approved") return pendingClientHtml();
+  if (client.status !== "approved") {
+    return pendingClientResponse(db, req, client, url, deps);
+  }
   try {
     requireRegisteredRedirectUri(client, parsed.redirectUri);
   } catch {
@@ -536,7 +598,18 @@ async function handleConsentSubmit(
   if (!client) {
     return htmlError("Unknown application", "This client_id is not registered with this hub.", 400);
   }
-  if (client.status !== "approved") return pendingClientHtml();
+  if (client.status !== "approved") {
+    // Defensive: consent only renders for approved clients, so a non-approved
+    // status here means the row was unapproved between render and submit (or
+    // the form was hand-crafted). The approve UI requires a known authorize
+    // URL to round-trip via `return_to`, which we don't reconstruct here —
+    // surface the static error and let the operator restart from the SPA.
+    return htmlError(
+      "App not yet approved",
+      `This client_id is registered but has not been approved. Run \`parachute auth approve-client ${client.clientId}\` from a terminal, then try again.`,
+      403,
+    );
+  }
   try {
     requireRegisteredRedirectUri(client, params.redirectUri);
   } catch {
@@ -602,6 +675,104 @@ async function handleConsentSubmit(
   return issueAuthCodeRedirect(db, params, scopes, session.userId, deps);
 }
 
+/**
+ * POST /oauth/authorize/approve — operator-driven inline approval of a
+ * pending DCR client (closes #208). The cross-origin SPA case the
+ * same-origin DCR auto-approve (#199, #200) doesn't cover: an SPA on a
+ * different origin can't ride the cookie path during DCR, so its
+ * freshly-registered client_id lands `pending` and the operator hits
+ * "App not yet approved" on /oauth/authorize. This endpoint flips that
+ * client to `approved` in one click and redirects back into the OAuth flow.
+ *
+ * Three-belt security model. All three must pass:
+ *
+ *   1. Valid CSRF token (double-submit cookie). Defends against a malicious
+ *      cross-origin POST that rides the session cookie's SameSite=Lax.
+ *      Token was minted at GET render time and embedded in the form.
+ *   2. Active operator session (`findActiveSession`). The operator must be
+ *      logged into this hub from the browser submitting the form — no
+ *      session means no operator authority to approve anything.
+ *   3. Origin/Referer matches the issuer (`originMatchesIssuer`). Same
+ *      shape as the DCR auto-approve gate (#199, #200): a same-origin POST
+ *      proves the form was rendered by *this hub*, not a forged page.
+ *
+ * `return_to` validation: the form embeds the original authorize URL so
+ * the post-approve redirect lands the operator back on `/oauth/authorize`
+ * with the now-approved client. We refuse anything that doesn't start with
+ * `/oauth/authorize?` — open-redirect defense, plus a hand-crafted form
+ * trying to use this endpoint as a generic redirect-after-approve gadget
+ * shouldn't succeed at smuggling an off-path target.
+ */
+export async function handleApproveClientPost(
+  db: Database,
+  req: Request,
+  deps: OAuthDeps,
+): Promise<Response> {
+  const form = await req.formData();
+  const formCsrf = form.get(CSRF_FIELD_NAME);
+  if (!verifyCsrfToken(req, typeof formCsrf === "string" ? formCsrf : null)) {
+    return htmlError(
+      "Invalid form submission",
+      "The form's CSRF token did not match. Reload the page and try again.",
+      403,
+    );
+  }
+  const session = findActiveSession(db, req, deps.now ?? (() => new Date()));
+  if (!session) {
+    return htmlError(
+      "Sign in required",
+      "You must be signed in to this hub to approve an app. Sign in and try again.",
+      401,
+    );
+  }
+  if (!originMatchesIssuer(req, deps.issuer)) {
+    return htmlError(
+      "Cross-origin request rejected",
+      "The approve form must be submitted from this hub's own origin.",
+      403,
+    );
+  }
+  const clientId = String(form.get("client_id") ?? "");
+  if (!clientId) {
+    return htmlError("Invalid form submission", "Missing client_id.", 400);
+  }
+  const client = getClient(db, clientId);
+  if (!client) {
+    return htmlError("Unknown application", "This client_id is not registered with this hub.", 404);
+  }
+  // Validate return_to BEFORE the DB mutation: if an authenticated operator
+  // submits a hand-crafted form with a bad return_to, we refuse without
+  // committing the client to `approved`. Practical risk is low (all three
+  // belts already passed), but ordering matters — validate, then mutate.
+  const returnTo = String(form.get("return_to") ?? "");
+  if (!isSafeAuthorizeReturnTo(returnTo)) {
+    return htmlError(
+      "Invalid form submission",
+      "The return_to value is not a hub-relative /oauth/authorize URL.",
+      400,
+    );
+  }
+  approveClient(db, clientId);
+  return redirectResponse(returnTo);
+}
+
+/**
+ * Validate a form-submitted `return_to` value. Must be a hub-relative URL
+ * (no scheme, no double-slash) targeting `/oauth/authorize` with a query
+ * string — anything else is either an open-redirect attempt or a misuse of
+ * the endpoint. Empty string is rejected (the form always supplies one).
+ */
+function isSafeAuthorizeReturnTo(value: string): boolean {
+  if (!value) return false;
+  // Reject scheme-relative ("//evil.example/foo") and absolute URLs. Only
+  // single-slash root-relative paths are allowed.
+  if (!value.startsWith("/") || value.startsWith("//")) return false;
+  // Must target the authorize endpoint with a query string. The OAuth flow
+  // re-enters via GET /oauth/authorize?<original-params>; anything off-path
+  // is a misuse.
+  return value.startsWith("/oauth/authorize?");
+}
+
 function paramsFromForm(form: Awaited<ReturnType<Request["formData"]>>): AuthorizeFormParams {
   return {
     clientId: String(form.get("client_id") ?? ""),
@@ -1064,20 +1235,72 @@ interface RegisterRequestBody {
   token_endpoint_auth_method?: string;
 }
 
+/**
+ * CSRF defense for the cookie-based DCR auto-approve path (closes #199).
+ *
+ * Compares the request's `Origin` (or `Referer` as fallback) against the
+ * configured issuer origin. URL.origin compares scheme + host + port —
+ * port-only mismatches reject. A request with neither header is treated as
+ * suspicious and rejected: cookie-bearing POSTs from same-origin browsers
+ * always send Origin (per Fetch standard) and almost always send Referer,
+ * so a header-stripped request is more likely a curl probe or a privacy
+ * extension on a third-party site than a legitimate same-origin caller.
+ *
+ * SameSite=Lax on the session cookie (sessions.ts:buildSessionCookie) is the
+ * browser-side defense layer; this function is the server-side belt.
+ */
+function originMatchesIssuer(req: Request, issuer: string): boolean {
+  const origin = req.headers.get("origin");
+  if (origin) {
+    try {
+      return new URL(origin).origin === new URL(issuer).origin;
+    } catch {
+      return false;
+    }
+  }
+  const referer = req.headers.get("referer");
+  if (referer) {
+    try {
+      return new URL(referer).origin === new URL(issuer).origin;
+    } catch {
+      return false;
+    }
+  }
+  return false;
+}
+
 /**
  * POST /oauth/register — RFC 7591 Dynamic Client Registration.
  *
  * Approval gate (closes #74). New rows land as `pending` by default and
  * cannot participate in OAuth flows until an operator runs
- * `parachute auth approve-client <id>`. The single bypass is presenting an
- * `Authorization: Bearer <operator-token>` whose token carries the
- * `hub:admin` scope — the install-time path used by first-party modules so
- * `parachute install vault` can self-register without a human follow-up.
+ * `parachute auth approve-client <id>`. Two bypass paths:
+ *
+ * 1. **Operator-bearer** (#74). `Authorization: Bearer <operator-token>` whose
+ *    token carries the `hub:admin` scope — the install-time path used by
+ *    first-party modules so `parachute install vault` can self-register
+ *    without a human follow-up.
+ * 2. **Operator-session** (#199). A valid `parachute_hub_session` cookie
+ *    plus a same-origin `Origin`/`Referer` header. The browser path: an
+ *    operator hitting their own SPA from their own browser is by definition
+ *    operator-authenticated, so re-requiring approval is friction without
+ *    benefit. CSRF defense is `originMatchesIssuer` + the cookie's
+ *    `SameSite=Lax` attribute.
  *
  * If a bearer is presented but invalid or insufficient, we reject with the
  * RFC 6750 shape rather than silently downgrading to the public path: a
  * caller who tried to authenticate but failed wants to know why, not get
  * `pending` back and wonder why their module can't OAuth.
+ *
+ * Access-control matrix:
+ *   no auth                       → pending
+ *   bearer (hub:admin)            → approved (#74)
+ *   bearer (other scope)          → 403 insufficient_scope
+ *   bearer (malformed)            → 401 invalid_token
+ *   session cookie + same-origin  → approved (#199)
+ *   session cookie + cross-origin → pending (CSRF defense)
+ *   session cookie + no Origin/Referer → pending
+ *   expired/unknown session       → pending
  */
 export async function handleRegister(
   db: Database,
@@ -1124,6 +1347,20 @@ export async function handleRegister(
       throw err;
     }
   }
+  // Operator-session auto-approve (closes #199). The browser path:
+  // operator-authenticated SPA on the hub's own origin can self-register a
+  // client without dropping to a terminal. Two gates: (1) a live (un-expired)
+  // session row keyed by the cookie, (2) Origin/Referer matches the issuer
+  // origin so a cross-site forgery can't ride the cookie. Quietly stays
+  // `pending` on any failure — unlike the bearer path, we don't surface an
+  // error, because absence of session/origin is the *normal* unauthenticated
+  // public-DCR shape.
+  if (status === "pending") {
+    const session = findActiveSession(db, req, deps.now ?? (() => new Date()));
+    if (session && originMatchesIssuer(req, deps.issuer)) {
+      status = "approved";
+    }
+  }
   const confidential = body.token_endpoint_auth_method === "client_secret_post";
   const scopes = (body.scope ?? "").split(" ").filter((s) => s.length > 0);
   let registered: RegisteredClient;

package/src/oauth-ui.ts

@@ -97,6 +97,33 @@ export interface ErrorViewProps {
   status: number;
 }
 
+/**
+ * Props for the "App not yet approved" view rendered when an unapproved
+ * client lands on `/oauth/authorize`. When `session` is true the operator is
+ * authenticated to this hub from the browser making the request, so we render
+ * an inline approve form (closes #208). When false we fall back to the
+ * pre-#208 CLI-only message.
+ */
+export interface ApprovePendingViewProps {
+  /** Display name to show — falls back to client_id when no name was supplied at DCR. */
+  clientName: string;
+  clientId: string;
+  redirectUris: string[];
+  /** Scopes parsed from the original `/oauth/authorize?scope=` query param. */
+  requestedScopes: string[];
+  /**
+   * When set, render the inline approve form. The form posts to
+   * `/oauth/authorize/approve` with the CSRF token + a `return_to` URL the
+   * server will redirect to after the approve commits — the original
+   * `/oauth/authorize?...` URL so the OAuth flow re-enters with the now-
+   * approved client and lands on the consent screen.
+   */
+  approveForm?: {
+    csrfToken: string;
+    returnTo: string;
+  };
+}
+
 export function renderLogin(props: LoginViewProps): string {
   const { params, errorMessage, csrfToken } = props;
   const error = errorMessage ? `<p class="error-banner">${escapeHtml(errorMessage)}</p>` : "";
@@ -204,6 +231,79 @@ function renderVaultPicker(picker: VaultPicker): string {
         </section>`;
 }
 
+/**
+ * "App not yet approved" page (#74). When the request carries a valid
+ * operator session (#208), render the inline approve form so one click lands
+ * the client as `approved` and re-enters the OAuth flow at consent. Without
+ * a session, fall back to the original CLI-only message — anyone hitting
+ * /oauth/authorize unauthenticated to the hub itself can't be trusted to
+ * approve a DCR client from the browser, so they need to drop to a terminal
+ * and run `parachute auth approve-client <id>`.
+ *
+ * The CLI fallback hint is shown in BOTH branches: a button-equipped operator
+ * may still want the CLI invocation handy (different machine, scriptable
+ * context). The button is the easy path; the CLI is always-available.
+ */
+export function renderApprovePending(props: ApprovePendingViewProps): string {
+  const { clientName, clientId, redirectUris, requestedScopes, approveForm } = props;
+  const redirectList = redirectUris.map((u) => `<li><code>${escapeHtml(u)}</code></li>`).join("");
+  const scopeRows =
+    requestedScopes.length === 0
+      ? `<li class="scope scope-empty">No scopes requested — the app gets a session token only.</li>`
+      : requestedScopes.map(renderScopeRow).join("\n");
+  const formSection = approveForm
+    ? `
+      <form method="POST" action="/oauth/authorize/approve" class="auth-form approve-form">
+        ${renderCsrfHiddenInput(approveForm.csrfToken)}
+        <input type="hidden" name="client_id" value="${escapeHtml(clientId)}" />
+        <input type="hidden" name="return_to" value="${escapeHtml(approveForm.returnTo)}" />
+        <button type="submit" class="btn btn-primary">Approve and continue</button>
+      </form>
+      <p class="approve-cli-hint">
+        Or run <code>parachute auth approve-client ${escapeHtml(clientId)}</code> from a terminal.
+      </p>`
+    : `
+      <p class="approve-cli-hint">
+        Ask the operator to run <code>parachute auth approve-client ${escapeHtml(clientId)}</code>
+        from a terminal, then try again.
+      </p>`;
+  const body = `
+    <div class="card">
+      <div class="card-header">
+        <div class="brand">
+          <span class="brand-mark">⌬</span>
+          <span class="brand-name">Parachute</span>
+        </div>
+        <h1>App not yet approved</h1>
+        <p class="subtitle">
+          ${escapeHtml(clientName)} is registered with this hub but hasn't been approved yet.
+          Review the details below before approving.
+        </p>
+      </div>
+      <section class="approve-meta">
+        <h2 class="scopes-title">Application</h2>
+        <p class="approve-meta-row">
+          <span class="approve-meta-label">name</span>
+          <code class="approve-meta-value">${escapeHtml(clientName)}</code>
+        </p>
+        <p class="approve-meta-row">
+          <span class="approve-meta-label">client_id</span>
+          <code class="approve-meta-value">${escapeHtml(clientId)}</code>
+        </p>
+        <div class="approve-meta-row approve-meta-row-block">
+          <span class="approve-meta-label">redirect_uris</span>
+          <ul class="approve-redirect-list">${redirectList}</ul>
+        </div>
+      </section>
+      <section class="scopes">
+        <h2 class="scopes-title">Permissions requested</h2>
+        <ul class="scope-list">${scopeRows}</ul>
+      </section>
+      ${formSection}
+    </div>`;
+  return baseDocument("App not yet approved", body);
+}
+
 export function renderError(props: ErrorViewProps): string {
   const body = `
     <div class="card">
@@ -542,6 +642,73 @@ const STYLES = `
   .vault-picker-empty .picker-help { color: ${PALETTE.danger}; }
   .vault-picker-empty .picker-help code { color: ${PALETTE.fg}; }
 
+  .approve-meta {
+    margin: 0 0 1.25rem;
+    padding: 0.75rem 0.85rem;
+    border: 1px solid ${PALETTE.borderLight};
+    border-radius: 6px;
+    background: ${PALETTE.bgSoft};
+  }
+  .approve-meta .scopes-title { margin-bottom: 0.5rem; }
+  .approve-meta-row {
+    margin: 0 0 0.4rem;
+    display: flex;
+    gap: 0.5rem;
+    align-items: baseline;
+    flex-wrap: wrap;
+  }
+  .approve-meta-row:last-child { margin-bottom: 0; }
+  .approve-meta-row-block { flex-direction: column; gap: 0.25rem; }
+  .approve-meta-label {
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-size: 0.7rem;
+    color: ${PALETTE.fgDim};
+  }
+  .approve-meta-value {
+    font-family: ${FONT_MONO};
+    font-size: 0.82rem;
+    background: ${PALETTE.cardBg};
+    padding: 0.1rem 0.4rem;
+    border-radius: 4px;
+    color: ${PALETTE.fg};
+    word-break: break-all;
+  }
+  .approve-redirect-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  .approve-redirect-list li code {
+    font-family: ${FONT_MONO};
+    font-size: 0.82rem;
+    background: ${PALETTE.cardBg};
+    padding: 0.1rem 0.4rem;
+    border-radius: 4px;
+    color: ${PALETTE.fg};
+    word-break: break-all;
+  }
+  .approve-form { gap: 0; }
+  .approve-cli-hint {
+    margin-top: 1rem;
+    padding-top: 0.85rem;
+    border-top: 1px solid ${PALETTE.borderLight};
+    color: ${PALETTE.fgMuted};
+    font-size: 0.85rem;
+  }
+  .approve-cli-hint code {
+    font-family: ${FONT_MONO};
+    font-size: 0.8rem;
+    background: ${PALETTE.bgSoft};
+    padding: 0.1rem 0.4rem;
+    border-radius: 4px;
+    color: ${PALETTE.fg};
+    word-break: break-all;
+  }
+
   .badge {
     display: inline-block;
     font-size: 0.7rem;