@vellumai/cli 0.8.8 → 0.8.9-dev.202606091853.fbaa2ae

package/src/__tests__/tui-midsession-refresh.test.ts

@@ -18,39 +18,49 @@ import { maybeRefreshAuthHeaders } from "../components/DefaultMainScreen";
 import { saveAssistantEntry } from "../lib/assistant-config";
 import { saveGuardianToken } from "../lib/guardian-token";
 
-const RUNTIME = "http://10.0.0.9:7830";
+const RUNTIME = "https://gw.example.com";
 const future = () => new Date(Date.now() + 60 * 60 * 1000).toISOString();
+const past = () => new Date(Date.now() - 60_000).toISOString();
 
-function seedEntry(cloud: string): void {
+function seedEntry(cloud: string, localUrl?: string): void {
   saveAssistantEntry({
     assistantId: "px",
     name: "Paired",
     runtimeUrl: RUNTIME,
+    ...(localUrl ? { localUrl } : {}),
     cloud,
     paired: cloud === "paired",
     species: "vellum",
   });
 }
 
-function seedToken(accessToken: string, refreshToken: string): void {
+function seedToken(
+  accessToken: string,
+  refreshToken: string,
+  opts?: { due?: boolean },
+): void {
+  const due = opts?.due ?? true;
   saveGuardianToken("px", {
     guardianPrincipalId: "imported",
     accessToken,
-    accessTokenExpiresAt: future(),
+    accessTokenExpiresAt: due ? past() : future(),
     refreshToken,
     refreshTokenExpiresAt: refreshToken ? future() : 0,
-    refreshAfter: "",
+    refreshAfter: due ? past() : future(),
     isNew: false,
     deviceId: "dev",
     leasedAt: new Date().toISOString(),
   });
 }
 
-function stubRefresh(ok: boolean): { hit: () => boolean } {
-  let called = false;
+function stubRefresh(ok: boolean): {
+  hit: () => boolean;
+  url: () => string | undefined;
+} {
+  let calledUrl: string | undefined;
   globalThis.fetch = (async (url: unknown, _init?: RequestInit) => {
     if (String(url).includes("/v1/guardian/refresh")) {
-      called = true;
+      calledUrl = String(url);
       return new Response(
         ok ? JSON.stringify({ accessToken: "new-acc" }) : "x",
         {
@@ -61,7 +71,7 @@ function stubRefresh(ok: boolean): { hit: () => boolean } {
     }
     return new Response("", { status: 200 });
   }) as typeof fetch;
-  return { hit: () => called };
+  return { hit: () => calledUrl !== undefined, url: () => calledUrl };
 }
 
 describe("maybeRefreshAuthHeaders", () => {
@@ -102,6 +112,41 @@ describe("maybeRefreshAuthHeaders", () => {
     expect(refresh.hit()).toBe(true);
   });
 
+  test("does NOT refresh against an overridden/poisoned baseUrl (no credential leak)", async () => {
+    // The CLI lets --url override the runtime URL while still using the stored
+    // paired guardian token. A 401 from that attacker origin must NOT cause us
+    // to POST the refreshToken + deviceId there.
+    seedEntry("paired"); // persisted runtimeUrl = RUNTIME
+    seedToken("old-acc", "ref");
+    const refresh = stubRefresh(true);
+    const auth = { Authorization: "Bearer old-acc" };
+    const attacker = "http://attacker.example:7830";
+
+    const ok = await maybeRefreshAuthHeaders(attacker, "px", auth);
+
+    expect(ok).toBe(false);
+    expect(auth.Authorization).toBe("Bearer old-acc"); // unchanged
+    expect(refresh.hit()).toBe(false); // no refresh POST anywhere
+  });
+
+  test("refreshes against the matched persisted URL, keeping the session's interface", async () => {
+    // When an entry persists both a loopback localUrl and a different
+    // runtimeUrl, a session on the loopback URL must refresh against THAT URL,
+    // not the external runtimeUrl (which may be unreachable / public-facing).
+    const localUrl = "http://127.0.0.1:7830";
+    seedEntry("paired", localUrl); // runtimeUrl = RUNTIME (10.0.0.9), localUrl = loopback
+    seedToken("old-acc", "ref");
+    const refresh = stubRefresh(true);
+    const auth = { Authorization: "Bearer old-acc" };
+
+    const ok = await maybeRefreshAuthHeaders(localUrl, "px", auth);
+
+    expect(ok).toBe(true);
+    expect(refresh.hit()).toBe(true);
+    expect(refresh.url()).toContain("127.0.0.1");
+    expect(refresh.url()).not.toContain("10.0.0.9");
+  });
+
   test("does NOT refresh a local assistant (scoped to paired only)", async () => {
     seedEntry("local");
     seedToken("old-acc", "ref"); // even with a refreshable token
@@ -163,4 +208,18 @@ describe("maybeRefreshAuthHeaders", () => {
     expect(ok).toBe(false);
     expect(auth.Authorization).toBe("Bearer old-acc");
   });
+
+  test("does NOT refresh when the stored token is not due for renewal", async () => {
+    // A forged 401 on a still-valid token must not coax out the refresh token.
+    seedEntry("paired");
+    seedToken("old-acc", "ref", { due: false });
+    const refresh = stubRefresh(true);
+    const auth = { Authorization: "Bearer old-acc" };
+
+    const ok = await maybeRefreshAuthHeaders(RUNTIME, "px", auth);
+
+    expect(ok).toBe(false);
+    expect(auth.Authorization).toBe("Bearer old-acc"); // unchanged
+    expect(refresh.hit()).toBe(false); // refresh not attempted
+  });
 });

package/src/commands/client.ts

@@ -1,6 +1,5 @@
 import { spawn } from "node:child_process";
 import { existsSync } from "node:fs";
-import { hostname } from "node:os";
 import path from "node:path";
 
 import {
@@ -17,8 +16,12 @@ import {
   GATEWAY_PORT,
   type Species,
 } from "../lib/constants";
-import { loadGuardianToken, refreshGuardianToken } from "../lib/guardian-token";
-import { getLocalLanIPv4 } from "../lib/local";
+import {
+  loadGuardianToken,
+  refreshGuardianToken,
+  guardianTokenDueForRenewal,
+} from "../lib/guardian-token";
+import { normalizeRuntimeUrl, trustedRefreshUrl } from "../lib/runtime-url";
 import {
   CLI_INTERFACE_ID,
   WEB_INTERFACE_ID,
@@ -28,6 +31,7 @@ import {
   getLockfileData,
   upsertLockfileAssistant,
   replacePlatformAssistants,
+  isActiveAssistant,
   runHatch,
   runRetire,
   getGuardianAccessToken,
@@ -35,12 +39,15 @@ import {
   resolveGatewayProxyTarget,
   readAllowedGatewayPorts,
   isLoopbackAddr,
+  headerHostIsLoopback,
+  originIsAllowed,
   resolveDevCliInvocation,
   resolveLockfilePaths,
   resolveConfigDir,
   type CliInvocation,
 } from "@vellumai/local-mode";
 import { parseAssistantTargetArg } from "../lib/assistant-target-args.js";
+import { parseFeatureFlagArgs, readAmbientFlagEnvVars } from "../lib/flag-args";
 import {
   fetchOrganizationId,
   fetchPlatformAssistants,
@@ -74,6 +81,10 @@ interface ParsedArgs {
   bearerToken?: string;
   /** Interface identifier sent as X-Vellum-Interface-Id on all requests. */
   interfaceId: SupportedInterface;
+  /** VELLUM_FLAG_* env vars for the gateway (process.env propagation). */
+  flagEnvVars: Record<string, string>;
+  /** Parsed --flag overrides: kebab-case key -> typed value (for web injection). */
+  parsedFlagOverrides: Record<string, boolean | string>;
 }
 
 function readAssistantName(entry: AssistantEntry | null): string | undefined {
@@ -85,7 +96,26 @@ function readAssistantName(entry: AssistantEntry | null): string | undefined {
 
 // Exported for unit testing the arg/auth resolution without launching the TUI.
 export function parseArgs(): ParsedArgs {
-  const args = process.argv.slice(3);
+  const { envVars: cliFlagVars, remaining: argsWithoutFlags } =
+    parseFeatureFlagArgs(process.argv.slice(3));
+  const flagEnvVars = { ...readAmbientFlagEnvVars(), ...cliFlagVars };
+  const args = argsWithoutFlags;
+
+  // Build parsedFlagOverrides from the extracted env vars:
+  // VELLUM_FLAG_UPPER_SNAKE -> kebab-case key with typed value.
+  const parsedFlagOverrides: Record<string, boolean | string> = {};
+  for (const [envName, rawValue] of Object.entries(flagEnvVars)) {
+    const snake = envName.replace(/^VELLUM_FLAG_/, "");
+    const kebab = snake.toLowerCase().replace(/_/g, "-");
+    const lower = rawValue.toLowerCase();
+    if (["true", "1", "yes", "on"].includes(lower)) {
+      parsedFlagOverrides[kebab] = true;
+    } else if (["false", "0", "no", "off"].includes(lower)) {
+      parsedFlagOverrides[kebab] = false;
+    } else {
+      parsedFlagOverrides[kebab] = rawValue;
+    }
+  }
 
   const positionalName = parseAssistantTargetArg(args, [
     "--url",
@@ -212,7 +242,7 @@ export function parseArgs(): ParsedArgs {
   }
 
   return {
-    runtimeUrl: maybeSwapToLocalhost(runtimeUrl.replace(/\/+$/, "")),
+    runtimeUrl: normalizeRuntimeUrl(runtimeUrl),
     assistantId,
     assistantName,
     species,
@@ -220,48 +250,11 @@ export function parseArgs(): ParsedArgs {
     platformToken,
     bearerToken,
     interfaceId,
+    flagEnvVars,
+    parsedFlagOverrides,
   };
 }
 
-/**
- * If the hostname in `url` matches this machine's local DNS name, LAN IP, or
- * raw hostname, replace it with 127.0.0.1 so the client avoids mDNS round-trips
- * when talking to an assistant running on the same machine.
- */
-function maybeSwapToLocalhost(url: string): string {
-  let parsed: URL;
-  try {
-    parsed = new URL(url);
-  } catch {
-    return url;
-  }
-
-  const urlHost = parsed.hostname.toLowerCase();
-
-  const localNames: string[] = [];
-
-  const host = hostname();
-  if (host) {
-    localNames.push(host.toLowerCase());
-    // Also consider the bare name without .local suffix
-    if (host.toLowerCase().endsWith(".local")) {
-      localNames.push(host.toLowerCase().slice(0, -".local".length));
-    }
-  }
-
-  const lanIp = getLocalLanIPv4();
-  if (lanIp) {
-    localNames.push(lanIp);
-  }
-
-  if (localNames.includes(urlHost)) {
-    parsed.hostname = "127.0.0.1";
-    return parsed.toString().replace(/\/+$/, "");
-  }
-
-  return url;
-}
-
 function printUsage(): void {
   console.log(`${ANSI.bold}vellum client${ANSI.reset} - Connect to a hatched assistant
 
@@ -278,6 +271,7 @@ ${ANSI.bold}OPTIONS:${ANSI.reset}
                               not persisted.
     -a, --assistant-id <id>    Assistant ID
     -i, --interface <id>       Interface identifier: cli (default) or web
+    --flag <key=value>         Feature flag override (repeatable, kebab-case key)
     -h, --help                 Show this help message
 
 ${ANSI.bold}DEFAULTS:${ANSI.reset}
@@ -287,12 +281,14 @@ ${ANSI.bold}DEFAULTS:${ANSI.reset}
 ${ANSI.bold}EXAMPLES:${ANSI.reset}
     vellum client
     vellum client vellum-assistant-foo
-    vellum client --url http://34.56.78.90:${GATEWAY_PORT}
+    # Remote assistants must be reached over https (e.g. a tunnel) — the
+    # guardian refresh token is only sent over https or a loopback address:
+    vellum client --url https://your-tunnel.example
     vellum client vellum-assistant-foo --url http://localhost:${GATEWAY_PORT}
 
     # Ephemeral: connect to another machine's assistant with a paired token
     # (no lockfile entry, nothing persisted):
-    vellum client --url http://10.0.0.196:${GATEWAY_PORT} --token <jwt>
+    vellum client --url https://your-tunnel.example --token <jwt>
 `);
 }
 
@@ -424,6 +420,13 @@ async function handleLocalEndpoints(
     return Response.json({ error: "Forbidden" }, { status: 403 });
   }
 
+  if (
+    !headerHostIsLoopback(req.headers.get("host") ?? undefined) ||
+    !originIsAllowed(req.headers.get("origin") ?? undefined)
+  ) {
+    return Response.json({ error: "Forbidden" }, { status: 403 });
+  }
+
   // Lockfile
   if (LOCKFILE_PATTERN.test(pathname)) {
     if (req.method === "GET") {
@@ -530,6 +533,13 @@ async function handleLocalEndpoints(
       );
     }
 
+    if (!isActiveAssistant(lockfilePaths, assistantId)) {
+      return Response.json(
+        { ok: false, error: "Can only retire the active local assistant" },
+        { status: 403 },
+      );
+    }
+
     let invocation: CliInvocation;
     try {
       invocation = resolveDevCliInvocation(_baseDir);
@@ -639,12 +649,18 @@ function getBaseDir(): string {
   return path.resolve(import.meta.dir, "..", "..", "..");
 }
 
-async function runWebInterface(): Promise<void> {
+async function runWebInterface(
+  flagEnvVars: Record<string, string>,
+  parsedFlagOverrides: Record<string, boolean | string>,
+): Promise<void> {
+  // Propagate flag env vars so child processes (e.g. hatch from the web UI) inherit them.
+  Object.assign(process.env, flagEnvVars);
+
   // Prefer Vite dev server in source checkouts for full local-mode support
   // (HMR, __local endpoints, gateway proxy).
   const webSourceDir = findWebSourceDir();
   if (webSourceDir) {
-    return runViteDevServer(webSourceDir);
+    return runViteDevServer(webSourceDir, flagEnvVars);
   }
 
   const distDir = findWebDistDir();
@@ -661,10 +677,16 @@ async function runWebInterface(): Promise<void> {
   const rawIndexHtml = await Bun.file(path.join(distDir, "index.html")).text();
   const platformUrl = getPlatformUrl();
   const webUrl = getWebUrl();
-  const configJson = JSON.stringify({ webUrl, platformUrl });
+  const safeJson = (v: unknown) =>
+    JSON.stringify(v).replace(/</g, "\\u003c").replace(/>/g, "\\u003e");
+  const configJson = safeJson({ webUrl, platformUrl });
+  const hasOverrides = Object.keys(parsedFlagOverrides).length > 0;
+  const flagOverridesSnippet = hasOverrides
+    ? `;window.__VELLUM_FLAG_OVERRIDES__=${safeJson(parsedFlagOverrides)}`
+    : "";
   const indexHtml = rawIndexHtml.replace(
     "</head>",
-    `<script>window.__VELLUM_CONFIG__=${configJson}</script></head>`,
+    `<script>window.__VELLUM_CONFIG__=${configJson}${flagOverridesSnippet}</script></head>`,
   );
 
   const server = Bun.serve({
@@ -789,14 +811,25 @@ async function runWebInterface(): Promise<void> {
   await new Promise(() => {});
 }
 
-async function runViteDevServer(webSourceDir: string): Promise<void> {
+async function runViteDevServer(
+  webSourceDir: string,
+  flagEnvVars: Record<string, string>,
+): Promise<void> {
   const platformUrl = getPlatformUrl();
 
+  // Build VITE_VELLUM_FLAG_* vars so Vite exposes them to the browser bundle.
+  const viteFlagVars: Record<string, string> = {};
+  for (const [envName, value] of Object.entries(flagEnvVars)) {
+    viteFlagVars[`VITE_${envName}`] = value;
+  }
+
   const child = spawn("bun", ["run", "dev"], {
     cwd: webSourceDir,
     stdio: "inherit",
     env: {
       ...process.env,
+      ...flagEnvVars,
+      ...viteFlagVars,
       VITE_PLATFORM_MODE: "false",
       API_PROXY_TARGET: platformUrl,
       VELLUM_WEB_URL: getWebUrl(),
@@ -847,13 +880,20 @@ export async function resolveFreshBearerToken(
     return bearerToken;
   }
 
-  // new Date() handles both ISO strings and epoch-ms numbers; Date.parse of an
-  // epoch-ms string would be NaN.
-  const renewAtRaw = stored.refreshAfter || stored.accessTokenExpiresAt;
-  const renewAt = new Date(renewAtRaw).getTime();
-  if (!Number.isFinite(renewAt) || renewAt > Date.now()) return bearerToken;
+  // Only refresh once the stored token is actually due for renewal.
+  if (!guardianTokenDueForRenewal(stored)) return bearerToken;
+
+  // SECURITY: bind the refresh to the entry's persisted URL. `--url`/`-u` can
+  // override `runtimeUrl` while still reusing this stored guardian token, so a
+  // poisoned/attacker URL must not receive the long-lived refreshToken +
+  // deviceId. Refresh only when the URL is one of the entry's persisted URLs,
+  // and send to the trusted persisted URL — not the caller-supplied one.
+  const lookup = lookupAssistantByIdentifier(assistantId);
+  if (lookup.status !== "found") return bearerToken;
+  const refreshUrl = trustedRefreshUrl(lookup.entry, runtimeUrl);
+  if (!refreshUrl) return bearerToken;
 
-  const refreshed = await refreshGuardianToken(runtimeUrl, assistantId);
+  const refreshed = await refreshGuardianToken(refreshUrl, assistantId);
   return refreshed?.accessToken ?? bearerToken;
 }
 
@@ -867,10 +907,12 @@ export async function client(): Promise<void> {
     platformToken,
     bearerToken,
     interfaceId,
+    flagEnvVars,
+    parsedFlagOverrides,
   } = parseArgs();
 
   if (interfaceId === WEB_INTERFACE_ID) {
-    await runWebInterface();
+    await runWebInterface(flagEnvVars, parsedFlagOverrides);
     return;
   }
 

package/src/commands/hatch.ts

@@ -16,6 +16,7 @@ import {
 import type { RemoteHost, Species } from "../lib/constants";
 import { buildNestedConfig } from "../lib/config-utils";
 import { hatchDocker } from "../lib/docker";
+import { parseFeatureFlagArgs, readAmbientFlagEnvVars } from "../lib/flag-args";
 import type { PollResult, WatchHatchingResult } from "../lib/gcp";
 import { hatchLocal } from "../lib/hatch-local";
 import {
@@ -178,11 +179,15 @@ interface HatchArgs {
   watch: boolean;
   sourcePath: string | null;
   configValues: Record<string, string>;
+  flagEnvVars: Record<string, string>;
   analyze: boolean;
 }
 
 function parseArgs(): HatchArgs {
-  const args = process.argv.slice(3);
+  const { envVars: cliFlagVars, remaining: args } = parseFeatureFlagArgs(
+    process.argv.slice(3),
+  );
+  const flagEnvVars = { ...readAmbientFlagEnvVars(), ...cliFlagVars };
   let species: Species = DEFAULT_SPECIES;
   let detached = false;
   let keepAlive = false;
@@ -222,6 +227,9 @@ function parseArgs(): HatchArgs {
       console.log(
         "  --config <key=value>      Set a workspace config value (repeatable)",
       );
+      console.log(
+        "  --flag <key=value>        Set a feature flag override as VELLUM_FLAG_<KEY> env var (repeatable)",
+      );
       console.log(
         "  --analyze                 Emit a structured hatch-timing log line on stdout",
       );
@@ -289,7 +297,7 @@ function parseArgs(): HatchArgs {
       species = arg as Species;
     } else {
       console.error(
-        `Error: Unknown argument '${arg}'. Valid options: ${VALID_SPECIES.join(", ")}, -d, --watch, --source <path>, --keep-alive, --name <name>, --remote <${VALID_REMOTE_HOSTS.join("|")}>, --config <key=value>, --analyze`,
+        `Error: Unknown argument '${arg}'. Valid options: ${VALID_SPECIES.join(", ")}, -d, --watch, --source <path>, --keep-alive, --name <name>, --remote <${VALID_REMOTE_HOSTS.join("|")}>, --config <key=value>, --flag <key=value>, --analyze`,
       );
       process.exit(1);
     }
@@ -304,6 +312,7 @@ function parseArgs(): HatchArgs {
     watch,
     sourcePath,
     configValues,
+    flagEnvVars,
     analyze,
   };
 }
@@ -538,6 +547,7 @@ export async function hatch(): Promise<void> {
     watch,
     sourcePath,
     configValues,
+    flagEnvVars,
     analyze,
   } = parseArgs();
 
@@ -566,12 +576,12 @@ export async function hatch(): Promise<void> {
   }
 
   if (remote === "local") {
-    await hatchLocal(species, name, watch, keepAlive, configValues);
+    await hatchLocal(species, name, watch, keepAlive, configValues, flagEnvVars);
     return;
   }
 
   if (remote === "docker") {
-    await hatchDocker(species, detached, name, watch, configValues, {
+    await hatchDocker(species, detached, name, watch, configValues, flagEnvVars, {
       sourcePath,
       analyze,
     });

package/src/commands/login.ts

@@ -32,6 +32,131 @@ import { syncCloudAssistants } from "../lib/sync-cloud-assistants";
 
 const LOGIN_TIMEOUT_MS = 120_000; // 2 minutes
 
+function escapeHtml(s: string): string {
+  return s
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+function renderLoginPage(title: string, subtitle: string, success: boolean): string {
+  const checkmarkSvg = `<svg class="icon" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="28" cy="28" r="28" fill="var(--positive-bg)"/>
+      <path class="check" d="M17 28.5L24.5 36L39 21" stroke="var(--positive-fg)" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+    </svg>`;
+
+  const errorSvg = `<svg class="icon" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="28" cy="28" r="28" fill="var(--negative-bg)"/>
+      <path class="cross cross-1" d="M20 20L36 36" stroke="var(--negative-fg)" stroke-width="3.5" stroke-linecap="round" fill="none"/>
+      <path class="cross cross-2" d="M36 20L20 36" stroke="var(--negative-fg)" stroke-width="3.5" stroke-linecap="round" fill="none"/>
+    </svg>`;
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>${escapeHtml(title)}</title>
+  <style>
+    :root {
+      --surface: #F5F3EB;
+      --surface-card: #FFFFFF;
+      --card-border: #E8E6DA;
+      --text-primary: #2A2A28;
+      --text-secondary: #4A4A46;
+      --positive-bg: #D4DFD0;
+      --positive-fg: #516748;
+      --negative-bg: #F7DAC9;
+      --negative-fg: #DA491A;
+      --shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
+      --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
+    }
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --surface: #1A1A18;
+        --surface-card: #2A2A28;
+        --card-border: #3A3A37;
+        --text-primary: #F5F3EB;
+        --text-secondary: #BDB9A9;
+        --positive-bg: #1A2316;
+        --positive-fg: #7A8B6F;
+        --negative-bg: #4E281D;
+        --negative-fg: #E86B40;
+        --shadow: 0 1px 3px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.3);
+      }
+    }
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: var(--font);
+      background: var(--surface);
+      color: var(--text-primary);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+      -webkit-font-smoothing: antialiased;
+    }
+    .card {
+      text-align: center;
+      padding: 48px 40px 40px;
+      background: var(--surface-card);
+      border: 1px solid var(--card-border);
+      border-radius: 16px;
+      box-shadow: var(--shadow);
+      max-width: 380px;
+      width: 100%;
+      opacity: 0;
+      transform: translateY(8px) scale(0.98);
+      animation: cardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
+    }
+    @keyframes cardIn {
+      to { opacity: 1; transform: translateY(0) scale(1); }
+    }
+    .icon {
+      width: 56px;
+      height: 56px;
+      margin-bottom: 20px;
+    }
+    .check {
+      stroke-dasharray: 32;
+      stroke-dashoffset: 32;
+      animation: draw 0.4s ease-out 0.45s forwards;
+    }
+    .cross {
+      stroke-dasharray: 22;
+      stroke-dashoffset: 22;
+    }
+    .cross-1 { animation: draw 0.3s ease-out 0.45s forwards; }
+    .cross-2 { animation: draw 0.3s ease-out 0.55s forwards; }
+    @keyframes draw {
+      to { stroke-dashoffset: 0; }
+    }
+    h1 {
+      font-size: 18px;
+      font-weight: 600;
+      letter-spacing: -0.2px;
+      color: var(--text-primary);
+      margin-bottom: 6px;
+    }
+    p {
+      font-size: 13px;
+      line-height: 1.5;
+      color: var(--text-secondary);
+    }
+  </style>
+</head>
+<body>
+  <div class="card">
+    ${success ? checkmarkSvg : errorSvg}
+    <h1>${escapeHtml(title)}</h1>
+    <p>${escapeHtml(subtitle)}</p>
+  </div>
+</body>
+</html>`;
+}
+
 /**
  * Open a URL in the user's default browser.
  */
@@ -72,26 +197,20 @@ function browserLogin(webUrl: string): Promise<string> {
 
       if (receivedState !== state) {
         res.writeHead(400, { "Content-Type": "text/html" });
-        res.end(
-          "<html><body><h2>Login failed</h2><p>State mismatch. Please try again.</p></body></html>",
-        );
+        res.end(renderLoginPage("Login Failed", "State mismatch. Please try again.", false));
         cleanup("State mismatch — possible CSRF attack.");
         return;
       }
 
       if (!sessionToken) {
         res.writeHead(400, { "Content-Type": "text/html" });
-        res.end(
-          "<html><body><h2>Login failed</h2><p>No session token received. Please try again.</p></body></html>",
-        );
+        res.end(renderLoginPage("Login Failed", "No session token received. Please try again.", false));
         cleanup("No session token received from platform.");
         return;
       }
 
       res.writeHead(200, { "Content-Type": "text/html" });
-      res.end(
-        "<html><body><h2>Login successful!</h2><p>You can close this window and return to your terminal.</p></body></html>",
-      );
+      res.end(renderLoginPage("Login Successful", "You can close this window and return to your terminal.", true));
       cleanup(null, sessionToken);
     });