@hypit/hypit 0.0.1 → 0.1.0

package/packages/cli/src/oauth.ts

@@ -0,0 +1,228 @@
+import { createHash, randomBytes } from "node:crypto";
+import { createServer } from "node:http";
+import { spawn } from "node:child_process";
+
+import type { CredentialAcquisition } from "@hypit/runtime";
+import { encodeOAuth2Credential } from "@hypit/runtime";
+
+const CALLBACK_MARK_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true"><path d="M7.6 3.8H14.6L12.6 7.2H5.6L7.6 3.8Z" fill="currentColor"/><path d="M4.1 10.4H16.6L18.7 7H30.4L27.9 11.1H16.1L14.1 14.2H1.8L4.1 10.4Z" fill="currentColor"/><path d="M19.1 14.1H23.1L19.3 20.7H15.4L19.1 14.1Z" fill="currentColor"/></svg>`;
+
+type OAuthAcquisitionOptions = {
+  readonly onProgress?: (message: string) => void;
+  readonly fetch?: typeof globalThis.fetch;
+  readonly open?: (url: string) => void;
+};
+
+function base64url(bytes: Uint8Array): string {
+  return Buffer.from(bytes).toString("base64").replaceAll("+", "-").replaceAll("/", "_").replace(/=+$/u, "");
+}
+
+function positiveNumber(value: unknown): number | undefined {
+  return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : undefined;
+}
+
+function tokenExpiry(value: { readonly expires_at?: unknown; readonly expires_in?: unknown }): number | undefined {
+  const absolute = positiveNumber(value.expires_at);
+  if (absolute !== undefined) return absolute > 10_000_000_000 ? absolute : absolute * 1_000;
+  const seconds = positiveNumber(value.expires_in);
+  return seconds === undefined ? undefined : Date.now() + seconds * 1_000;
+}
+
+/** Acquire one OAuth credential from the exact data declared by its Endpoint package. */
+export async function acquireOAuthCredential(
+  acquisition: CredentialAcquisition,
+  options: OAuthAcquisitionOptions = {},
+): Promise<string> {
+  if (!Number.isSafeInteger(acquisition.requestTimeoutMs) || acquisition.requestTimeoutMs <= 0) {
+    throw new Error("OAuth token request timeout must be a positive integer");
+  }
+  const verifier = base64url(randomBytes(32));
+  // S256 is part of OAuth PKCE. It authenticates this browser exchange; it is not content identity.
+  const challenge = base64url(createHash("sha256").update(verifier).digest());
+  const state = base64url(randomBytes(24));
+  const server = createServer();
+  const callback = new Promise<string>((resolveCode, reject) => {
+    let settled = false;
+    const closeAllConnections = (): void => {
+      server.closeAllConnections?.();
+      server.unref();
+    };
+    server.on("request", (request, response) => {
+      if (settled) {
+        response.writeHead(204, { "cache-control": "no-store", connection: "close" });
+        response.end();
+        return;
+      }
+      try {
+        const url = new URL(request.url ?? "/", "http://127.0.0.1");
+        if (url.pathname !== "/callback") throw new Error("unexpected OAuth callback path");
+        if (url.searchParams.get("state") !== state) throw new Error("OAuth state mismatch");
+        const authorizationError = url.searchParams.get("error");
+        if (authorizationError !== null) throw new Error(`OAuth authorization failed: ${authorizationError}`);
+        const code = url.searchParams.get("code");
+        if (code === null || code.length === 0) throw new Error("OAuth callback contained no code");
+        response.writeHead(200, {
+          "cache-control": "no-store",
+          connection: "close",
+          "content-type": "text/html; charset=utf-8",
+        });
+        response.end(callbackPage(true), closeAllConnections);
+        settled = true;
+        resolveCode(code);
+      } catch (error) {
+        response.writeHead(400, {
+          "cache-control": "no-store",
+          connection: "close",
+          "content-type": "text/html; charset=utf-8",
+        });
+        response.end(callbackPage(false), closeAllConnections);
+        settled = true;
+        reject(error);
+      } finally {
+        server.close();
+        server.closeIdleConnections?.();
+        server.unref();
+      }
+    });
+    server.once("error", reject);
+  });
+  await new Promise<void>((resolveListen, rejectListen) => {
+    server.listen(0, "127.0.0.1", () => resolveListen());
+    server.once("error", rejectListen);
+  });
+  const address = server.address();
+  if (address === null || typeof address === "string") throw new Error("could not open a local OAuth callback");
+  const redirectUri = `http://127.0.0.1:${address.port}/callback`;
+  const authorize = new URL(acquisition.authorizationEndpoint);
+  authorize.searchParams.set("response_type", "code");
+  authorize.searchParams.set("client_id", acquisition.clientId);
+  authorize.searchParams.set("redirect_uri", redirectUri);
+  authorize.searchParams.set("scope", acquisition.scopes.join(" "));
+  authorize.searchParams.set("state", state);
+  authorize.searchParams.set("code_challenge", challenge);
+  authorize.searchParams.set("code_challenge_method", "S256");
+  options.onProgress?.(`Opening sign-in: ${authorize}`);
+  if (options.open === undefined) {
+    const opener = process.platform === "darwin" ? "open" : process.platform === "win32" ? "cmd" : "xdg-open";
+    const openerArgs = process.platform === "win32" ? ["/c", "start", "", authorize.toString()] : [authorize.toString()];
+    spawn(opener, openerArgs, { stdio: "ignore", detached: true, windowsHide: true }).unref();
+  } else {
+    options.open(authorize.toString());
+  }
+  const code = await callback;
+  options.onProgress?.("Authorization returned. Exchanging token…");
+  const deadline = AbortSignal.timeout(acquisition.requestTimeoutMs);
+  let tokenResponse: Response;
+  let body: string;
+  try {
+    tokenResponse = await (options.fetch ?? globalThis.fetch)(acquisition.tokenEndpoint, {
+      method: "POST",
+      headers: { "content-type": "application/x-www-form-urlencoded" },
+      body: new URLSearchParams({
+        grant_type: "authorization_code",
+        code,
+        redirect_uri: redirectUri,
+        client_id: acquisition.clientId,
+        code_verifier: verifier,
+      }),
+      signal: deadline,
+    });
+    body = await tokenResponse.text();
+  } catch (error) {
+    if (deadline.aborted) {
+      throw new Error(
+        `OAuth authorization returned, but the token exchange timed out after ${acquisition.requestTimeoutMs} ms; no credential was stored`,
+        { cause: error },
+      );
+    }
+    throw error;
+  }
+  if (!tokenResponse.ok) throw new Error(`OAuth token exchange failed (${tokenResponse.status}): ${body.slice(0, 200)}`);
+  const parsed = JSON.parse(body) as {
+    readonly access_token?: unknown;
+    readonly refresh_token?: unknown;
+    readonly expires_at?: unknown;
+    readonly expires_in?: unknown;
+  };
+  if (typeof parsed.access_token !== "string" || parsed.access_token.length === 0) {
+    throw new Error("OAuth token response contained no access token");
+  }
+  options.onProgress?.("Token received. Saving credential…");
+  const expiresAt = tokenExpiry(parsed);
+  return encodeOAuth2Credential({
+    accessToken: parsed.access_token,
+    ...(typeof parsed.refresh_token === "string" && parsed.refresh_token.length > 0
+      ? { refreshToken: parsed.refresh_token }
+      : {}),
+    ...(expiresAt === undefined ? {} : { expiresAt }),
+  });
+}
+
+function callbackPage(success: boolean): string {
+  const title = success ? "Authorization received" : "Hypit sign-in failed";
+  const heading = success ? "Authorization received" : "Hypit sign-in failed";
+  const message = success
+    ? "Return to the terminal while Hypit finishes the token exchange and stores the credential."
+    : "The sign-in could not be completed. You can close this window and try again.";
+  const tone = success ? "success" : "error";
+  const favicon = `data:image/svg+xml,${encodeURIComponent(CALLBACK_MARK_SVG)}`;
+  return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light dark">
+    <link rel="icon" href="${favicon}">
+    <title>${title}</title>
+    <style>
+      :root {
+        color-scheme: light dark;
+        --accent: #de3b67;
+        --ink: #1b1a18;
+        --muted: #6b6963;
+        --line: #e5e2dd;
+        --paper: #fff;
+        --gutter: 80px;
+        --bad: #b8352a;
+        font-family: "Hanken Grotesk", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+      }
+      * { box-sizing: border-box; }
+      html { min-width: 320px; }
+      body { min-height: 100vh; margin: 0; display: flex; flex-direction: column; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
+      .site-header { height: 64px; flex: 0 0 64px; border-bottom: 1px solid var(--line); }
+      .shell { width: 100%; max-width: 1440px; height: 100%; margin: 0 auto; padding-inline: var(--gutter); display: flex; align-items: center; }
+      .brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 20px; font-weight: 650; letter-spacing: -.04em; }
+      .brand svg { width: 28px; height: 28px; color: var(--accent); }
+      main { flex: 1 1 auto; display: grid; place-items: center; padding: clamp(64px, 11vh, 144px) var(--gutter) clamp(72px, 12vh, 160px); }
+      .hero { width: min(100%, 720px); text-align: center; }
+      .status { display: flex; justify-content: center; margin-bottom: 28px; color: var(--accent); }
+      .status.error { color: var(--bad); }
+      .mark { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 8px; }
+      .mark svg { width: 32px; height: 32px; }
+      h1 { margin: 0; font-size: clamp(38px, 5vw, 62px); font-weight: 600; line-height: 1.18; letter-spacing: -2px; }
+      p { max-width: 540px; margin: 20px auto 0; color: var(--muted); font-size: clamp(17px, 1.6vw, 22px); line-height: 1.5; }
+      @media (prefers-color-scheme: dark) {
+        :root { --paper: #14110f; --ink: #e9e5db; --muted: #e9e5dba8; --line: #e9e5db1c; --accent: #de3c66; --bad: #ef8378; }
+      }
+      @media (max-width: 767px) { :root { --gutter: 20px; } main { padding-top: 64px; padding-bottom: 80px; } }
+      @media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; animation-duration: .01ms !important; } }
+    </style>
+  </head>
+  <body>
+    <header class="site-header">
+      <div class="shell"><div class="brand">${CALLBACK_MARK_SVG}<span>hypit</span></div></div>
+    </header>
+    <main>
+      <section class="hero" aria-labelledby="callback-heading">
+        <div class="status ${tone}">
+          <span class="mark" aria-hidden="true">
+            ${success ? '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg>' : '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M6 6 18 18M18 6 6 18"/></svg>'}
+          </span>
+        </div>
+        <h1 id="callback-heading">${heading}</h1>
+        <p>${message}</p>
+      </section>
+    </main>
+  </body>
+</html>`;
+}

package/packages/cli/src/observation.ts

@@ -0,0 +1,203 @@
+import type { BuildResultManifest } from "@hypit/build-result";
+
+import type { CliBuildSubmission, CliBuildView, CliRuntimeControl, CliRuntimeController } from "./runtime-port.js";
+import { formatOperationProgress } from "./runtime-view.js";
+
+const FIRST_HEARTBEAT_MS = 30_000;
+const LATER_HEARTBEAT_MS = 60_000;
+const MIN_PROGRESS_INTERVAL_MS = 1_000;
+
+export type BuildProgressView = {
+  readonly build: string;
+  readonly state: "submitting" | "working" | "saving-result";
+  readonly requests?: { readonly total: number; readonly completed: number };
+  readonly phases: Readonly<Record<string, number>>;
+  readonly elapsedMs: number;
+  readonly details: readonly string[];
+};
+
+function progressPhases(view: CliBuildView): Readonly<Record<string, number>> {
+  const phases = new Map<string, number>();
+  for (const operation of view.operations.filter((item) => item.status === "pending")) {
+    const phase = operation.progress?.phase ?? "in progress";
+    phases.set(phase, (phases.get(phase) ?? 0) + 1);
+  }
+  return Object.fromEntries([...phases].sort(([left], [right]) => left.localeCompare(right)));
+}
+
+function progressState(view: CliBuildView): BuildProgressView["state"] {
+  if (view.activity === "submitting") return "submitting";
+  if (view.activity === "saving-result") return "saving-result";
+  // `ready`, `running` and `waiting` describe short Worker scheduling turns, not three stages of a
+  // video. They deliberately collapse into one stable product state.
+  return "working";
+}
+
+export function buildProgressView(view: CliBuildView, now = Date.now()): BuildProgressView {
+  return {
+    build: view.id,
+    state: progressState(view),
+    ...(view.requests === undefined ? {} : { requests: view.requests }),
+    phases: progressPhases(view),
+    elapsedMs: Math.max(0, now - view.createdAt),
+    details: [
+      ...(view.stop === undefined ? [] : [view.stop.cause === "execution-failed"
+        ? `Build stopping after failure${view.stop.reason === undefined ? "" : `: ${view.stop.reason}`}`
+        : `Build cancelling${view.stop.reason === undefined ? "" : `: ${view.stop.reason}`}`]),
+      ...view.operations.filter((item) => item.status === "pending")
+      .map((item) => `${item.endpoint}: ${item.progress === undefined
+        ? item.status
+        : formatOperationProgress(item.progress)}`),
+    ],
+  };
+}
+
+/** Stable product-state projection for watch output and polling backoff. */
+export function buildObservationKey(view: CliBuildView): string {
+  return JSON.stringify({
+    state: progressState(view),
+    outcome: view.outcome,
+    issue: view.issue,
+    cancellationRequested: view.cancellationRequested,
+    stop: view.stop,
+    requests: view.requests,
+    phases: progressPhases(view),
+  });
+}
+
+/**
+ * Stable Runtime activity projection. Capacity reservations are intentionally absent: they are
+ * short implementation leases and can appear and disappear while no Build makes progress.
+ */
+export function activityObservationKey(
+  worker: string,
+  builds: readonly CliBuildView[],
+): string {
+  return JSON.stringify({
+    worker,
+    builds: [...builds]
+      .sort((left, right) => left.id.localeCompare(right.id))
+      .map((view) => [view.id, buildObservationKey(view)]),
+  });
+}
+
+export function buildProgressLines(
+  progress: BuildProgressView,
+  options: { readonly verbose: boolean; readonly limit: number },
+): readonly string[] {
+  const state = {
+    submitting: "Submitting",
+    working: "Working",
+    "saving-result": "Saving Result",
+  }[progress.state];
+  const requestProgress = progress.requests === undefined || progress.requests.total === 0
+    ? []
+    : [`${progress.requests.completed}/${progress.requests.total} steps complete`];
+  const phases = Object.entries(progress.phases).map(([phase, count]) => `${count} ${phase}`);
+  const seconds = Math.floor(progress.elapsedMs / 1_000);
+  const elapsed = seconds < 60
+    ? `${seconds}s`
+    : `${Math.floor(seconds / 60)}m ${String(seconds % 60).padStart(2, "0")}s`;
+  return [
+    `  · ${[state, ...requestProgress, ...phases, elapsed].join(" · ")}`,
+    ...(options.verbose ? progress.details.slice(0, options.limit).map((line) => `    ${line}`) : []),
+  ];
+}
+
+/**
+ * Follow one accepted active Build until it finishes, needs attention or reaches the caller's wait
+ * bound. Runtime polling stays responsive; progress callbacks observe only the stable product view.
+ */
+export async function observeBuildView(
+  runtime: Pick<CliRuntimeControl, "inspect">,
+  build: string,
+  initial: CliBuildView,
+  options: {
+    readonly maxWaitMs?: number;
+    readonly controller?: CliRuntimeController;
+    readonly onProgress?: (value: BuildProgressView) => void;
+  } = {},
+): Promise<CliBuildView | undefined> {
+  let view: CliBuildView | undefined = initial;
+  let observedProgress: string | undefined;
+  let pendingProgress = false;
+  let lastProgressAt: number | undefined;
+  let pollDelayMs = 100;
+  let observed = false;
+  const startedAt = Date.now();
+  let nextHeartbeatAt = startedAt + FIRST_HEARTBEAT_MS;
+  while (view !== undefined && view.issue === undefined) {
+    const nextProgress = buildObservationKey(view);
+    const now = Date.now();
+    if (nextProgress !== observedProgress) {
+      observedProgress = nextProgress;
+      pendingProgress = true;
+      pollDelayMs = 100;
+    } else {
+      pollDelayMs = Math.min(1_000, pollDelayMs * 2);
+    }
+    const heartbeatDue = now >= nextHeartbeatAt;
+    const progressDue = pendingProgress
+      && (lastProgressAt === undefined || now - lastProgressAt >= MIN_PROGRESS_INTERVAL_MS);
+    if (progressDue || heartbeatDue) {
+      options.onProgress?.(buildProgressView(view, now));
+      lastProgressAt = now;
+      nextHeartbeatAt = now + (pendingProgress ? FIRST_HEARTBEAT_MS : LATER_HEARTBEAT_MS);
+      pendingProgress = false;
+    }
+    const elapsedMs = Date.now() - startedAt;
+    const remainingMs = options.maxWaitMs === undefined ? undefined : options.maxWaitMs - elapsedMs;
+    if (remainingMs !== undefined && remainingMs <= 0) break;
+    if (options.controller !== undefined) {
+      const worker = await options.controller.worker.status();
+      if (worker.state !== "running") {
+        throw new Error(
+          `Runtime Worker is ${worker.state}; Build ${build} remains durable. `
+          + `Run hypit runtime up, then run hypit status ${build} --watch again`,
+        );
+      }
+    }
+    await new Promise((resolveWait) => setTimeout(resolveWait,
+      remainingMs === undefined ? pollDelayMs : Math.min(pollDelayMs, remainingMs)));
+    view = await runtime.inspect(build);
+    observed = true;
+  }
+  if (observed && view !== undefined && options.maxWaitMs !== undefined
+    && Date.now() - startedAt >= options.maxWaitMs) {
+    view = await runtime.inspect(build);
+  }
+  return view;
+}
+
+/** Observe one submitted Build. This reads accepted state only and never performs execution work. */
+export async function observeBuild(
+  runtime: Pick<CliRuntimeControl, "inspect">,
+  initial: CliBuildSubmission,
+  options: {
+    readonly maxWaitMs?: number;
+    readonly controller?: CliRuntimeController;
+    readonly readResult: () => Promise<BuildResultManifest | undefined>;
+    readonly onProgress?: (value: BuildProgressView) => void;
+  },
+): Promise<CliBuildSubmission> {
+  const finishFromResult = async (): Promise<CliBuildSubmission> => {
+    const result = await options.readResult();
+    if (result?.outcome === undefined) {
+      throw new Error(`Build ${initial.id} left active Runtime state without a finished Result`);
+    }
+    return {
+      id: initial.id,
+      state: initial.state,
+      completion: {
+        build: initial.id,
+        outcome: result.outcome,
+        ...(result.failure === undefined ? {} : { reason: result.failure }),
+      },
+    };
+  };
+  if (!("view" in initial)) return initial;
+  const view = await observeBuildView(runtime, initial.id, initial.view, options);
+  return view === undefined
+    ? await finishFromResult()
+    : { id: initial.id, state: initial.state, view };
+}