From 49bac737671d5a8d22d367c9c5a31a45b88fd0d8 Mon Sep 17 00:00:00 2001
From: John | Elite Encoder <john@eliteencoder.net>
Date: Mon, 24 Aug 2026 17:12:18 -0400
Subject: [PATCH] feat(keys): session-bound PymtHouse API keys off Auth0

Derive ConsoleUser.id from hashed Auth0 sub, resolve the same id on the
BFF from the session, and stop accepting client-supplied externalUserId.
Shared pymthouse HTTP/route helpers land here so later billing PRs do not
reintroduce the four copied env/M2M readers.

Pins @pymthouse/builder-sdk to 0.6.5.
---
 .env.example                             |  10 +
 app/api/pymthouse/keys/exchange/route.ts | 190 ++++++
 app/api/pymthouse/keys/route.ts          |  71 +++
 app/api/pymthouse/route-helpers.ts       |  56 ++
 components/console/AuthContext.tsx       |  34 +-
 components/console/KeysView.tsx          | 736 ++++++++++++-----------
 lib/console/external-user-id.test.ts     |  16 +
 lib/console/external-user-id.ts          |  20 +
 lib/console/pymthouse-bff.ts             |  65 ++
 lib/console/pymthouse-http.ts            | 103 ++++
 lib/console/pymthouse-keys-bff.ts        | 119 ++++
 lib/console/pymthouse-keys.ts            |   9 +
 lib/console/read-response-json.ts        |  11 +
 lib/console/session-user.ts              |  30 +
 lib/console/useApiKeys.ts                | 133 ++++
 package.json                             |   2 +
 pnpm-lock.yaml                           |  19 +
 17 files changed, 1272 insertions(+), 352 deletions(-)
 create mode 100644 app/api/pymthouse/keys/exchange/route.ts
 create mode 100644 app/api/pymthouse/keys/route.ts
 create mode 100644 app/api/pymthouse/route-helpers.ts
 create mode 100644 lib/console/external-user-id.test.ts
 create mode 100644 lib/console/external-user-id.ts
 create mode 100644 lib/console/pymthouse-bff.ts
 create mode 100644 lib/console/pymthouse-http.ts
 create mode 100644 lib/console/pymthouse-keys-bff.ts
 create mode 100644 lib/console/pymthouse-keys.ts
 create mode 100644 lib/console/read-response-json.ts
 create mode 100644 lib/console/session-user.ts
 create mode 100644 lib/console/useApiKeys.ts

diff --git a/.env.example b/.env.example
index 7064314..afec430 100644
--- a/.env.example
+++ b/.env.example
@@ -11,3 +11,13 @@ APP_BASE_URL=http://localhost:3000
 AUTH0_DOMAIN=
 AUTH0_CLIENT_ID=
 AUTH0_CLIENT_SECRET=
+
+# PymtHouse (usage + API keys + signer sessions + plans/subscribe)
+# Production:
+PYMTHOUSE_ISSUER_URL=https://pymthouse.com/api/v1/oidc
+# Local pymthouse (`npm run dev` HTTPS): https://localhost:3001/api/v1/oidc
+PYMTHOUSE_PUBLIC_CLIENT_ID=
+PYMTHOUSE_M2M_CLIENT_ID=
+PYMTHOUSE_M2M_CLIENT_SECRET=
+# Set to 1 for local http issuer only (not needed for https://localhost with mkcert)
+PYMTHOUSE_ALLOW_INSECURE_HTTP=
diff --git a/app/api/pymthouse/keys/exchange/route.ts b/app/api/pymthouse/keys/exchange/route.ts
new file mode 100644
index 0000000..25a24bb
--- /dev/null
+++ b/app/api/pymthouse/keys/exchange/route.ts
@@ -0,0 +1,190 @@
+import { PmtHouseError } from "@pymthouse/builder-sdk";
+import {
+  normalizeDeviceExchangeResponse,
+  parseApiKeyExchangeRequestBody,
+} from "@pymthouse/builder-sdk/signer/server";
+import {
+  pymthouseAppsOrigin,
+  readPymthouseM2mConfig,
+  readPublicClientId,
+} from "@/lib/console/pymthouse-http";
+
+const TOKEN_EXCHANGE_GRANT = "urn:ietf:params:oauth:grant-type:token-exchange";
+const ACCESS_TOKEN_TYPE = "urn:ietf:params:oauth:token-type:access_token";
+
+type ExchangeConfig = {
+  issuerUrl: string;
+  publicClientId: string;
+  m2mClientId: string;
+  m2mClientSecret: string;
+};
+
+/** Thin BFF; canonical issuer route is POST …/apps/{clientId}/oidc/token (RFC 8693). */
+function readApiKeyExchangeConfig(): ExchangeConfig | null {
+  const m2m = readPymthouseM2mConfig();
+  try {
+    const publicClientId = readPublicClientId();
+    const issuerUrl =
+      m2m?.issuerUrl ?? process.env.PYMTHOUSE_ISSUER_URL?.trim();
+    if (!issuerUrl) return null;
+    return {
+      issuerUrl,
+      publicClientId,
+      m2mClientId: m2m?.m2mClientId ?? "",
+      m2mClientSecret: m2m?.m2mClientSecret ?? "",
+    };
+  } catch {
+    return null;
+  }
+}
+
+function readStringField(
+  body: Record<string, unknown>,
+  key: string
+): string | undefined {
+  const value = body[key];
+  return typeof value === "string" && value.trim() ? value.trim() : undefined;
+}
+
+async function exchangeApiKeyViaOidcToken(input: {
+  config: ExchangeConfig;
+  apiKey: string;
+  scope?: string;
+}): Promise<Response> {
+  const { config, apiKey, scope } = input;
+  const url = `${pymthouseAppsOrigin(config.issuerUrl)}/api/v1/apps/${encodeURIComponent(config.publicClientId)}/oidc/token`;
+
+  const form = new URLSearchParams({
+    grant_type: TOKEN_EXCHANGE_GRANT,
+    subject_token: apiKey,
+    subject_token_type: ACCESS_TOKEN_TYPE,
+  });
+  if (scope) {
+    form.set("scope", scope);
+  }
+
+  const headers: Record<string, string> = {
+    "Content-Type": "application/x-www-form-urlencoded",
+    Accept: "application/json",
+  };
+  if (config.m2mClientId && config.m2mClientSecret) {
+    const basic = Buffer.from(
+      [config.m2mClientId, config.m2mClientSecret].join(":")
+    ).toString("base64");
+    headers.Authorization = `Basic ${basic}`;
+  }
+
+  const response = await fetch(url, {
+    method: "POST",
+    headers,
+    body: form.toString(),
+    cache: "no-store",
+  });
+
+  let parsed: Record<string, unknown>;
+  try {
+    parsed = (await response.json()) as Record<string, unknown>;
+  } catch {
+    throw new PmtHouseError("Token exchange returned invalid JSON", {
+      status: 502,
+      code: "invalid_exchange_response",
+    });
+  }
+
+  if (!response.ok) {
+    const description =
+      readStringField(parsed, "error_description") ||
+      readStringField(parsed, "error") ||
+      `Token exchange failed (${response.status})`;
+    throw new PmtHouseError(description, {
+      status: response.status,
+      code: readStringField(parsed, "error") ?? "api_key_exchange_failed",
+    });
+  }
+
+  const accessToken = readStringField(parsed, "access_token");
+  if (!accessToken) {
+    throw new PmtHouseError("Token exchange response missing access_token", {
+      status: 502,
+      code: "invalid_exchange_response",
+    });
+  }
+
+  // signer_url comes from the issuer exchange response (app signer routing).
+  const signerUrl = readStringField(parsed, "signer_url");
+
+  const expiresIn =
+    typeof parsed.expires_in === "number" && Number.isFinite(parsed.expires_in)
+      ? parsed.expires_in
+      : 3600;
+
+  const body = normalizeDeviceExchangeResponse(
+    {
+      access_token: accessToken,
+      expires_in: expiresIn,
+      scope: readStringField(parsed, "scope") || scope || "sign:job",
+      balanceUsdMicros: readStringField(parsed, "balanceUsdMicros") ?? "0",
+      lifetimeGrantedUsdMicros:
+        readStringField(parsed, "lifetimeGrantedUsdMicros") ?? "0",
+    },
+    { signer_url: signerUrl }
+  );
+
+  return Response.json(body, {
+    status: 200,
+    headers: { "Cache-Control": "no-store" },
+  });
+}
+
+function errorResponse(error: unknown): Response {
+  if (error instanceof PmtHouseError) {
+    return Response.json(
+      {
+        error: error.code ?? "api_key_exchange_failed",
+        error_description: error.message,
+      },
+      { status: error.status ?? 500 }
+    );
+  }
+  const message =
+    error instanceof Error ? error.message : "API key exchange failed";
+  return Response.json(
+    { error: "api_key_exchange_failed", error_description: message },
+    { status: 500 }
+  );
+}
+
+export async function POST(request: Request) {
+  const config = readApiKeyExchangeConfig();
+  if (!config) {
+    return Response.json(
+      {
+        error: "server_misconfigured",
+        error_description:
+          "PYMTHOUSE_ISSUER_URL and PYMTHOUSE_PUBLIC_CLIENT_ID are required",
+      },
+      { status: 503 }
+    );
+  }
+
+  try {
+    const parsed = await parseApiKeyExchangeRequestBody(request);
+    const effectiveClientId = parsed.clientId?.trim() || config.publicClientId;
+    if (effectiveClientId !== config.publicClientId) {
+      throw new PmtHouseError(
+        "clientId does not match configured public client",
+        {
+          status: 400,
+          code: "invalid_request",
+        }
+      );
+    }
+    return await exchangeApiKeyViaOidcToken({
+      config,
+      apiKey: parsed.apiKey,
+      scope: parsed.scope,
+    });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
diff --git a/app/api/pymthouse/keys/route.ts b/app/api/pymthouse/keys/route.ts
new file mode 100644
index 0000000..43c4d14
--- /dev/null
+++ b/app/api/pymthouse/keys/route.ts
@@ -0,0 +1,71 @@
+import { NextRequest, NextResponse } from "next/server";
+import {
+  createDashboardApiKey,
+  listDashboardApiKeys,
+  revokeDashboardApiKey,
+} from "@/lib/console/pymthouse-keys-bff";
+import { requireConsoleSession } from "@/lib/console/session-user";
+import {
+  PYMTHOUSE_NO_STORE_HEADERS,
+  pymthouseErrorResponse,
+} from "@/app/api/pymthouse/route-helpers";
+
+export const runtime = "nodejs";
+
+export async function GET() {
+  try {
+    const session = await requireConsoleSession();
+    const keys = await listDashboardApiKeys(
+      session.externalUserId,
+      session.email
+    );
+    return NextResponse.json({ keys }, { headers: PYMTHOUSE_NO_STORE_HEADERS });
+  } catch (error) {
+    return pymthouseErrorResponse(error, "Failed to list API keys");
+  }
+}
+
+export async function POST(request: NextRequest) {
+  let body: { label?: string };
+  try {
+    body = (await request.json()) as typeof body;
+  } catch {
+    return NextResponse.json({ error: "invalid_json" }, { status: 400 });
+  }
+
+  try {
+    const session = await requireConsoleSession();
+    const created = await createDashboardApiKey({
+      externalUserId: session.externalUserId,
+      email: session.email,
+      label: body.label,
+    });
+    return NextResponse.json(created, {
+      status: 201,
+      headers: PYMTHOUSE_NO_STORE_HEADERS,
+    });
+  } catch (error) {
+    return pymthouseErrorResponse(error, "Failed to create API key");
+  }
+}
+
+export async function DELETE(request: NextRequest) {
+  const keyId = request.nextUrl.searchParams.get("keyId")?.trim();
+  if (!keyId) {
+    return NextResponse.json({ error: "keyId is required" }, { status: 400 });
+  }
+
+  try {
+    const session = await requireConsoleSession();
+    await revokeDashboardApiKey({
+      externalUserId: session.externalUserId,
+      keyId,
+    });
+    return NextResponse.json(
+      { success: true },
+      { headers: PYMTHOUSE_NO_STORE_HEADERS }
+    );
+  } catch (error) {
+    return pymthouseErrorResponse(error, "Failed to revoke API key");
+  }
+}
diff --git a/app/api/pymthouse/route-helpers.ts b/app/api/pymthouse/route-helpers.ts
new file mode 100644
index 0000000..c001888
--- /dev/null
+++ b/app/api/pymthouse/route-helpers.ts
@@ -0,0 +1,56 @@
+import { NextRequest, NextResponse } from "next/server";
+import { PmtHouseError } from "@pymthouse/builder-sdk";
+import { SessionRequiredError } from "@/lib/console/session-user";
+
+export const PYMTHOUSE_NO_STORE_HEADERS = {
+  "Cache-Control": "no-store, max-age=0",
+} as const;
+
+export function pymthouseErrorResponse(
+  error: unknown,
+  fallback: string
+): NextResponse {
+  if (error instanceof SessionRequiredError) {
+    return NextResponse.json(
+      { error: error.message, code: error.code },
+      { status: error.status, headers: PYMTHOUSE_NO_STORE_HEADERS }
+    );
+  }
+  if (error instanceof PmtHouseError) {
+    return NextResponse.json(
+      { error: error.message, code: error.code },
+      { status: error.status, headers: PYMTHOUSE_NO_STORE_HEADERS }
+    );
+  }
+  return NextResponse.json(
+    { error: error instanceof Error ? error.message : fallback },
+    { status: 502, headers: PYMTHOUSE_NO_STORE_HEADERS }
+  );
+}
+
+/** Https-preferring public origin for Stripe Checkout return URLs. */
+export function checkoutReturnOrigin(request: NextRequest): string {
+  const configuredOrigin = (
+    process.env.DASHBOARD_PUBLIC_URL ||
+    process.env.NEXT_PUBLIC_APP_URL ||
+    process.env.APP_BASE_URL ||
+    ""
+  )
+    .trim()
+    .replace(/\/$/, "");
+  let origin = configuredOrigin || request.nextUrl.origin;
+  try {
+    const parsed = new URL(origin);
+    if (
+      parsed.protocol === "http:" &&
+      parsed.hostname !== "localhost" &&
+      parsed.hostname !== "127.0.0.1"
+    ) {
+      parsed.protocol = "https:";
+    }
+    origin = parsed.origin;
+  } catch {
+    origin = request.nextUrl.origin;
+  }
+  return origin;
+}
diff --git a/components/console/AuthContext.tsx b/components/console/AuthContext.tsx
index f1e86d5..059f845 100644
--- a/components/console/AuthContext.tsx
+++ b/components/console/AuthContext.tsx
@@ -4,14 +4,19 @@ import {
   createContext,
   useCallback,
   useContext,
+  useEffect,
   useMemo,
+  useState,
   type ReactNode,
 } from "react";
 import { useUser } from "@auth0/nextjs-auth0/client";
+import { externalUserIdFromSub } from "@/lib/console/external-user-id";
 
 export type AuthProvider = "github" | "google" | "email";
 
 export interface ConsoleUser {
+  /** PymtHouse externalUserId — `eu_<sha256(Auth0 sub)>`. */
+  id: string;
   name: string;
   email: string;
   initials: string;
@@ -59,23 +64,40 @@ function providerFromSub(sub?: string): AuthProvider {
 }
 
 export function AuthProvider({ children }: { children: ReactNode }) {
-  const { user: auth0User, isLoading } = useUser();
+  const { user: auth0User, isLoading: auth0Loading } = useUser();
+  const [externalUserId, setExternalUserId] = useState<string | null>(null);
+
+  useEffect(() => {
+    const sub = auth0User?.sub;
+    if (!sub) {
+      setExternalUserId(null);
+      return;
+    }
+    let cancelled = false;
+    void externalUserIdFromSub(sub).then((id) => {
+      if (!cancelled) setExternalUserId(id);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [auth0User?.sub]);
 
   const user = useMemo<ConsoleUser | null>(() => {
-    if (!auth0User) return null;
+    if (!auth0User || !externalUserId) return null;
     const email = auth0User.email?.trim() || "";
     const name = displayNameFrom(
       email,
-      auth0User.name?.trim() || auth0User.nickname?.trim(),
+      auth0User.name?.trim() || auth0User.nickname?.trim()
     );
     return {
+      id: externalUserId,
       name,
       email,
       initials: getInitials(name) || "U",
       provider: providerFromSub(auth0User.sub),
       avatarUrl: auth0User.picture,
     };
-  }, [auth0User]);
+  }, [auth0User, externalUserId]);
 
   const disconnect = useCallback(() => {
     window.location.assign("/auth/logout");
@@ -84,8 +106,8 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   return (
     <AuthContext.Provider
       value={{
-        isConnected: !!auth0User,
-        isLoading,
+        isConnected: !!user,
+        isLoading: auth0Loading || (!!auth0User && !externalUserId),
         user,
         disconnect,
       }}
diff --git a/components/console/KeysView.tsx b/components/console/KeysView.tsx
index 3d2658a..e3ddc25 100644
--- a/components/console/KeysView.tsx
+++ b/components/console/KeysView.tsx
@@ -7,150 +7,28 @@ import {
   Check,
   ChevronDown,
   Copy,
-  Edit2,
   Key as KeyIcon,
   Lock,
+  Loader2,
   MoreVertical,
   Plus,
-  RotateCw,
-  Settings as SettingsIcon,
   X,
 } from "lucide-react";
 import ConsolePageHeader from "@/components/console/ConsolePageHeader";
-import EnvTag from "@/components/console/EnvTag";
-import EnvironmentFilter, {
-  ALL_ENVIRONMENTS,
-} from "@/components/console/EnvironmentFilter";
-import { getEnvironmentById } from "@/lib/console/mock-data";
+import { useAuth } from "@/components/console/AuthContext";
+import { useApiKeys } from "@/lib/console/useApiKeys";
+import type { DashboardApiKeyRow } from "@/lib/console/pymthouse-keys";
 
-// ── Types ───────────────────────────────────────────────────────────────────
+type CredentialFormat = "bearer" | "token";
 
-type Scope = "restricted" | "admin";
-
-interface KeyRow {
-  id: string;
-  /** Environment this key belongs to. Keys are scoped per environment. */
-  environmentId: string;
-  name: string;
-  prefix: string;
-  suffix: string;
-  scope: Scope;
-  lastUsed: string;
-  lastUsedHost: string;
-  lastUsedIp: string;
-  runs7d: number;
-  created: string;
-  createdBy: { name: string; initials: string; color: string };
-  daysSinceRotation: number;
-}
-
-const SCOPES: Record<
-  Scope,
-  { label: string; desc: string; scopes: string; color: string }
-> = {
-  restricted: {
-    label: "Restricted",
-    desc: "Run apps, read activity and usage",
-    scopes: "/v1/inference, /v1/runs, /v1/usage",
-    color: "#25ABD0",
-  },
-  admin: {
-    label: "Admin",
-    desc: "Everything Restricted can do, plus manage keys, billing, and members",
-    scopes: "/v1/*",
-    color: "#f59e0b",
-  },
-};
-
-const ROTATE_DAYS_THRESHOLD = 90;
-
-// Mock data — mirrors the design's seed; keep it close so visual review tracks.
-const KEYS: KeyRow[] = [
-  {
-    id: "k_01",
-    environmentId: "env-production",
-    name: "Production · web",
-    prefix: "lp_live_x8k2",
-    suffix: "m9p3",
-    scope: "restricted",
-    lastUsed: "12s ago",
-    lastUsedHost: "us-west-2 · AWS",
-    lastUsedIp: "54.218.31.4",
-    runs7d: 14_820,
-    created: "Mar 14, 2025",
-    createdBy: { name: "Zain", initials: "ZM", color: "var(--color-green)" },
-    daysSinceRotation: 49,
-  },
-  {
-    id: "k_02",
-    environmentId: "env-production",
-    name: "iOS app · TestFlight",
-    prefix: "lp_live_q4n7",
-    suffix: "b1y8",
-    scope: "restricted",
-    lastUsed: "3m ago",
-    lastUsedHost: "iOS device",
-    lastUsedIp: "17.110.40.221",
-    runs7d: 2_418,
-    created: "Mar 30, 2025",
-    createdBy: { name: "Zain", initials: "ZM", color: "var(--color-green)" },
-    daysSinceRotation: 33,
-  },
-  {
-    id: "k_03",
-    environmentId: "env-development",
-    name: "CI · GitHub Actions",
-    prefix: "lp_test_a3f1",
-    suffix: "d7c2",
-    scope: "admin",
-    lastUsed: "4 days ago",
-    lastUsedHost: "GitHub Actions",
-    lastUsedIp: "140.82.115.10",
-    runs7d: 136,
-    created: "Feb 02, 2025",
-    createdBy: { name: "Maya", initials: "MK", color: "#7c3aed" },
-    daysSinceRotation: 91,
-  },
-  {
-    id: "k_04",
-    environmentId: "env-development",
-    name: "Local dev · laptop",
-    prefix: "lp_test_k2v9",
-    suffix: "p4r1",
-    scope: "restricted",
-    lastUsed: "1h ago",
-    lastUsedHost: "localhost",
-    lastUsedIp: "127.0.0.1",
-    runs7d: 482,
-    created: "Apr 18, 2025",
-    createdBy: { name: "Maya", initials: "MK", color: "#7c3aed" },
-    daysSinceRotation: 11,
-  },
-];
-
-// ── Sub-components ──────────────────────────────────────────────────────────
-
-function ScopeBadge({ scope }: { scope: Scope }) {
-  const s = SCOPES[scope];
-  return (
-    <span
-      className="inline-flex items-center gap-1.5 rounded-full border px-2 py-px text-[11.5px] text-fg-strong"
-      style={{
-        background: `color-mix(in oklab, ${s.color} 12%, transparent)`,
-        borderColor: `color-mix(in oklab, ${s.color} 28%, transparent)`,
-      }}
-    >
-      <span
-        className="h-[5px] w-[5px] rounded-full"
-        style={{ background: s.color }}
-        aria-hidden="true"
-      />
-      {s.label}
-    </span>
-  );
-}
-
-function CopyField({ value }: { value: string }) {
+function CopyField({
+  value,
+  wrap = false,
+}: {
+  value: string;
+  /** Multi-line wrap for long base64 python-gateway tokens. */
+  wrap?: boolean;
+}) {
   const [copied, setCopied] = useState(false);
   const onCopy = (e: React.MouseEvent) => {
     e.stopPropagation();
@@ -163,20 +41,24 @@ function CopyField({ value }: { value: string }) {
       type="button"
       onClick={onCopy}
       title="Copy"
-      className={`flex w-full items-center gap-2.5 rounded-[4px] border bg-dark px-3 py-2.5 text-left transition-colors ${
+      className={`flex w-full items-start gap-2.5 rounded-[4px] border bg-dark px-3 py-2.5 text-left transition-colors ${
         copied
           ? "border-green-bright bg-green/15"
           : "border-subtle hover:border-green hover:bg-dark-card"
       }`}
     >
       <span
-        className="flex-1 overflow-x-auto whitespace-nowrap font-mono text-[13px] text-fg select-all"
-        style={{ scrollbarWidth: "none" }}
+        className={`flex-1 font-mono text-[13px] text-fg select-all ${
+          wrap
+            ? "max-h-28 overflow-y-auto break-all whitespace-pre-wrap leading-relaxed"
+            : "overflow-x-auto whitespace-nowrap"
+        }`}
+        style={wrap ? undefined : { scrollbarWidth: "none" }}
       >
         {value}
       </span>
       <span
-        className={`grid h-[22px] w-[22px] place-items-center rounded ${
+        className={`grid h-[22px] w-[22px] shrink-0 place-items-center rounded ${
           copied ? "text-green-bright" : "text-fg-faint"
         }`}
         aria-hidden="true"
@@ -191,24 +73,171 @@ function CopyField({ value }: { value: string }) {
   );
 }
 
-// ── Main view ───────────────────────────────────────────────────────────────
+function FormatSlider({
+  value,
+  onChange,
+}: {
+  value: CredentialFormat;
+  onChange: (next: CredentialFormat) => void;
+}) {
+  return (
+    <fieldset
+      aria-label="Credential format"
+      className="relative m-0 inline-grid w-[8.5rem] min-w-0 grid-cols-2 rounded-[4px] border border-green/40 bg-dark p-px"
+    >
+      <div
+        className={`pointer-events-none absolute top-px bottom-px w-[calc(50%-1px)] rounded-[3px] bg-green shadow-sm transition-[left] duration-200 ease-out motion-reduce:transition-none ${
+          value === "bearer" ? "left-px" : "left-[calc(50%)]"
+        }`}
+        aria-hidden
+      />
+      {(["bearer", "token"] as const).map((option) => {
+        const selected = value === option;
+        return (
+          <button
+            key={option}
+            type="button"
+            role="radio"
+            aria-checked={selected}
+            onClick={() => onChange(option)}
+            className={`relative z-10 py-0.5 font-mono text-[10px] font-medium uppercase tracking-wide transition-colors duration-200 motion-reduce:transition-none ${
+              selected ? "text-white" : "text-fg-faint hover:text-fg-strong"
+            }`}
+          >
+            {option === "bearer" ? "Bearer" : "Token"}
+          </button>
+        );
+      })}
+    </fieldset>
+  );
+}
+
+function RevealedCredential({
+  apiKey,
+  sdkToken,
+}: {
+  apiKey: string;
+  sdkToken: string | null;
+}) {
+  const [format, setFormat] = useState<CredentialFormat>(
+    sdkToken ? "token" : "bearer"
+  );
+  const hasToken = Boolean(sdkToken?.trim());
+  const showToken = hasToken && format === "token";
+  const value = showToken ? sdkToken!.trim() : apiKey;
+
+  return (
+    <div className="space-y-2.5">
+      {hasToken ? (
+        <div className="flex items-center justify-between gap-2">
+          <p className="text-[11.5px] text-fg-muted">
+            {showToken ? (
+              <>
+                <a
+                  href="https://github.com/livepeer/livepeer-python-gateway"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="font-medium text-green-bright underline decoration-green/40 underline-offset-2 transition-colors hover:text-fg hover:decoration-green"
+                >
+                  Python gateway
+                </a>{" "}
+                <code className="rounded bg-dark px-1 py-0.5 font-mono text-[10.5px] text-fg-strong">
+                  --token
+                </code>{" "}
+                (base64)
+              </>
+            ) : (
+              <>
+                Authorization: Bearer{" "}
+                <span className="font-mono text-[11px] text-fg-strong">
+                  pmth_*
+                </span>
+              </>
+            )}
+          </p>
+          <FormatSlider value={format} onChange={setFormat} />
+        </div>
+      ) : null}
+      <CopyField value={value} wrap={showToken} />
+    </div>
+  );
+}
+
+/** Masked table token — single mono string so prefix/ellipsis/suffix never drift. */
+function MaskedToken({ prefix, suffix }: { prefix: string; suffix: string }) {
+  const masked = `${prefix}…${suffix}`;
+  return (
+    <div
+      className="mt-1 truncate font-mono text-[11.5px] tracking-tight text-fg-faint"
+      title={masked}
+    >
+      {masked}
+    </div>
+  );
+}
+
+function KeysTableSkeletonRow() {
+  return (
+    <div
+      className="grid grid-cols-[2.4fr_1.1fr_1.2fr_36px] items-center gap-3 border-b border-hairline px-4 py-3.5"
+      aria-busy="true"
+      aria-label="Creating API key"
+    >
+      <div className="min-w-0 space-y-1.5">
+        <div className="h-3.5 w-[7.5rem] animate-pulse rounded bg-hover" />
+        <div className="h-3 w-[11rem] animate-pulse rounded bg-hover/70 font-mono" />
+      </div>
+      <div className="h-5 w-[4.25rem] animate-pulse rounded-full bg-hover" />
+      <div className="h-3.5 w-[5.5rem] animate-pulse rounded bg-hover" />
+      <div />
+    </div>
+  );
+}
+
+function formatCreatedAt(iso: string): string {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) {
+    return iso;
+  }
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+function daysSince(iso: string): number {
+  const created = new Date(iso).getTime();
+  if (Number.isNaN(created)) {
+    return 0;
+  }
+  return Math.floor((Date.now() - created) / (24 * 60 * 60 * 1000));
+}
 
 export default function KeysView() {
-  const [revealedKey, setRevealedKey] = useState<string | null>(null);
+  const { isConnected } = useAuth();
+  const { state, createKey, insertKey, revokeKey, reload } =
+    useApiKeys(isConnected);
+
+  const [revealed, setRevealed] = useState<{
+    apiKey: string;
+    id: string;
+    sdkToken: string | null;
+  } | null>(null);
   const [openMenu, setOpenMenu] = useState<string | null>(null);
   const [scopesOpen, setScopesOpen] = useState(false);
   const [alertDismissed, setAlertDismissed] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [actionError, setActionError] = useState<string | null>(null);
   const menuRef = useRef<HTMLDivElement>(null);
-  const [envFilter, setEnvFilter] = useState(ALL_ENVIRONMENTS);
+  const revealRef = useRef<HTMLDivElement>(null);
 
-  // Each key belongs to one environment; show all by default, narrow on demand.
-  const allEnvs = envFilter === ALL_ENVIRONMENTS;
-  const keys = allEnvs
-    ? KEYS
-    : KEYS.filter((k) => k.environmentId === envFilter);
-  const scopeLabel = allEnvs
-    ? "all environments"
-    : (getEnvironmentById(envFilter)?.name ?? "all environments");
+  const keys: DashboardApiKeyRow[] = state.status === "ready" ? state.keys : [];
+  const ROTATE_DAYS_THRESHOLD = 90;
+  const staleKeys = keys.filter(
+    (k) => daysSince(k.createdAt) >= ROTATE_DAYS_THRESHOLD
+  );
+  const showAlert = staleKeys.length > 0 && !alertDismissed;
 
   useEffect(() => {
     if (!openMenu) return;
@@ -228,16 +257,48 @@ export default function KeysView() {
     };
   }, [openMenu]);
 
-  const onCreate = () => {
-    // Generate a mock full key. Stable while the banner is open.
-    const random = () => Math.random().toString(36).slice(2, 10);
-    setRevealedKey(`lp_live_${random()}${random()}a9k2m9p3`);
+  const onCreate = async () => {
+    setActionError(null);
+    setCreating(true);
+    try {
+      const created = await createKey("Dashboard SDK");
+      // Same paint: drop skeleton, insert row, show full-key banner.
+      insertKey(created.row);
+      setRevealed({
+        apiKey: created.apiKey,
+        id: created.id,
+        sdkToken: created.sdkToken,
+      });
+      setCreating(false);
+      void reload({ soft: true });
+      queueMicrotask(() => {
+        revealRef.current?.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest",
+        });
+      });
+    } catch (error) {
+      setCreating(false);
+      setActionError(
+        error instanceof Error ? error.message : "Could not create API key"
+      );
+    }
   };
 
-  const staleKeys = keys.filter(
-    (k) => k.daysSinceRotation >= ROTATE_DAYS_THRESHOLD
-  );
-  const showAlert = staleKeys.length > 0 && !alertDismissed;
+  const onRevoke = async (keyId: string) => {
+    setActionError(null);
+    try {
+      await revokeKey(keyId);
+      setOpenMenu(null);
+    } catch (error) {
+      setActionError(
+        error instanceof Error ? error.message : "Could not revoke API key"
+      );
+    }
+  };
+
+  const loading = state.status === "loading" || state.status === "idle";
+  const loadError = state.status === "error" ? state.message : null;
 
   return (
     <>
@@ -246,7 +307,6 @@ export default function KeysView() {
         icon={KeyIcon}
         actions={
           <>
-            <EnvironmentFilter value={envFilter} onChange={setEnvFilter} />
             <a
               href="https://docs.livepeer.org"
               target="_blank"
@@ -258,10 +318,15 @@ export default function KeysView() {
             </a>
             <button
               type="button"
-              onClick={onCreate}
-              className="btn-primary inline-flex h-[26px] items-center gap-1.5 rounded-[4px] px-2.5 text-[12.5px] font-medium transition-colors"
+              onClick={() => void onCreate()}
+              disabled={creating || loading}
+              className="btn-primary inline-flex h-[26px] items-center gap-1.5 rounded-[4px] px-2.5 text-[12.5px] font-medium transition-colors disabled:opacity-60"
             >
-              <Plus className="h-3 w-3" aria-hidden="true" />
+              {creating ? (
+                <Loader2 className="h-3 w-3 animate-spin" aria-hidden="true" />
+              ) : (
+                <Plus className="h-3 w-3" aria-hidden="true" />
+              )}
               Create key
             </button>
           </>
@@ -269,26 +334,58 @@ export default function KeysView() {
       />
 
       <div className="mx-auto w-full max-w-[1200px] px-7 pb-20 pt-7">
-        {/* Title — scope (Production) is shown by the header chip; the
-            organization lives in the sidebar switcher, so no redundant crumb. */}
         <div className="mb-6">
-          <h1 className="text-[22px] font-semibold tracking-[-0.02em] text-fg">
+          <p className="font-mono text-[10.5px] font-medium uppercase tracking-[0.08em] text-fg-disabled">
+            Workspace · Authentication
+          </p>
+          <h1 className="mt-1 text-[22px] font-semibold tracking-[-0.02em] text-fg">
             API keys
           </h1>
           <p className="mt-2.5 max-w-[640px] text-[13.5px] leading-[1.55] text-fg-muted">
-            Authenticate inference calls against{" "}
+            Long-lived{" "}
             <span className="font-mono text-[12.5px] text-fg-strong">
-              api.livepeer.org
-            </span>
-            . Pass your key as a Bearer token in the Authorization header. Each
-            key is scoped to one environment — showing{" "}
-            <span className="font-medium text-fg-strong">{scopeLabel}</span>.
+              pmth_*
+            </span>{" "}
+            bearer tokens for the SDK and CLI, plus a base64{" "}
+            <span className="font-mono text-[12.5px] text-fg-strong">
+              --token
+            </span>{" "}
+            for the{" "}
+            <a
+              href="https://github.com/livepeer/livepeer-python-gateway"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-fg-strong underline decoration-hairline underline-offset-2 transition-colors hover:text-green-bright"
+            >
+              Python gateway
+            </a>
+            . The SDK exchanges your key for a short-lived signer session before
+            streaming — no device login required on every run.
           </p>
         </div>
 
-        {/* Reveal banner — shown once after creation */}
-        {revealedKey && (
-          <div className="relative mb-4 flex overflow-hidden rounded-md border border-green bg-gradient-to-b from-green/[0.08] to-green/[0.02]">
+        {(loadError || actionError) && (
+          <div className="mb-4 rounded-md border border-red-500/30 bg-red-500/10 px-3.5 py-3 text-[13px] text-red-300">
+            {actionError ?? loadError}
+            {loadError && (
+              <button
+                type="button"
+                onClick={() => void reload()}
+                className="ml-3 underline decoration-dotted underline-offset-2"
+              >
+                Retry
+              </button>
+            )}
+          </div>
+        )}
+
+        {revealed && (
+          <div
+            ref={revealRef}
+            role="status"
+            aria-live="polite"
+            className="relative mb-4 flex overflow-hidden rounded-md border border-green bg-gradient-to-b from-green/[0.08] to-green/[0.02]"
+          >
             <div
               className="pointer-events-none absolute inset-0"
               style={{
@@ -318,14 +415,17 @@ export default function KeysView() {
                 </div>
                 <button
                   type="button"
-                  onClick={() => setRevealedKey(null)}
+                  onClick={() => setRevealed(null)}
                   aria-label="Dismiss"
                   className="grid h-6 w-6 place-items-center rounded text-fg-faint transition-colors hover:bg-hover hover:text-fg"
                 >
                   <X className="h-3.5 w-3.5" />
                 </button>
               </div>
-              <CopyField value={revealedKey} />
+              <RevealedCredential
+                apiKey={revealed.apiKey}
+                sdkToken={revealed.sdkToken}
+              />
               <div className="mt-2.5 flex items-center gap-3 text-[11.5px] text-fg-faint">
                 <span className="inline-flex items-center gap-1.5">
                   <Lock className="h-3 w-3" aria-hidden="true" />
@@ -336,7 +436,6 @@ export default function KeysView() {
           </div>
         )}
 
-        {/* Rotation alert — only when there are stale keys */}
         {showAlert && (
           <div
             className="mb-4 flex items-start gap-3 rounded-md border px-3.5 py-3"
@@ -355,8 +454,7 @@ export default function KeysView() {
                   : `${staleKeys.length} keys haven't been rotated in over 90 days.`}
               </p>
               <p className="mt-0.5 text-[12px] leading-[1.5] text-fg-muted">
-                {staleKeys.map((k) => k.name).join(" · ")} · rotate keys
-                regularly to limit blast radius if leaked.
+                Rotate keys regularly to limit blast radius if leaked.
               </p>
             </div>
             <button
@@ -370,169 +468,113 @@ export default function KeysView() {
           </div>
         )}
 
-        {/* Keys table */}
         <div className="overflow-hidden rounded-md border border-hairline bg-dark-lighter shadow-card">
-          <div className="grid grid-cols-[2.4fr_1.1fr_1.1fr_1.1fr_1.2fr_36px] items-center gap-3 border-b border-hairline bg-dark px-4 py-2.5 font-mono text-[10.5px] uppercase tracking-[0.06em] text-fg-disabled">
+          <div className="grid grid-cols-[2.4fr_1.1fr_1.2fr_36px] items-center gap-3 border-b border-hairline bg-dark px-4 py-2.5 font-mono text-[10.5px] uppercase tracking-[0.06em] text-fg-disabled">
             <div>Key</div>
             <div>Scope</div>
-            <div className="text-right">Last used</div>
-            <div className="text-right">Calls · 7d</div>
             <div>Created</div>
             <div />
           </div>
-          {keys.length === 0 && (
-            <div className="px-4 py-12 text-center text-[13px] text-fg-faint">
-              No keys in <span className="text-fg-strong">{scopeLabel}</span>{" "}
-              yet. Create one to start making calls.
+
+          {loading && (
+            <div className="flex items-center justify-center gap-2 px-4 py-12 text-[13px] text-fg-muted">
+              <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />
+              Loading keys…
             </div>
           )}
-          {keys.map((k) => {
-            const stale = k.daysSinceRotation >= ROTATE_DAYS_THRESHOLD;
-            const isOpen = openMenu === k.id;
-            return (
-              <div
-                key={k.id}
-                className="relative grid grid-cols-[2.4fr_1.1fr_1.1fr_1.1fr_1.2fr_36px] items-center gap-3 border-b border-hairline px-4 py-3.5 last:border-b-0 hover:bg-zebra"
-              >
-                {/* Key (name + masked token) */}
-                <div className="min-w-0">
-                  <div className="flex items-center gap-2 text-[13.5px] font-medium text-fg">
-                    <span className="truncate">{k.name}</span>
-                    {allEnvs && <EnvTag environmentId={k.environmentId} />}
-                    {stale && (
-                      <span
-                        // `tone-amber` is theme-aware: amber-300 in dark,
-                        // amber-700 in light. Same hue, contrast-tuned per
-                        // theme. See globals.css `--token-tone-amber-*`.
-                        className="tone-amber ml-2 inline-flex items-center gap-1 rounded-full border px-1.5 py-px font-mono text-[10.5px] font-medium align-[2px]"
-                        title={`Last rotated ${k.daysSinceRotation} days ago`}
-                      >
-                        <AlertTriangle
-                          className="h-[9px] w-[9px]"
-                          aria-hidden="true"
-                        />
-                        {k.daysSinceRotation}d
-                      </span>
-                    )}
-                  </div>
-                  <div className="mt-1 font-mono text-[11.5px] text-fg-faint">
-                    {k.prefix}
-                    <span className="px-0.5 text-fg-disabled">…</span>
-                    {k.suffix}
-                  </div>
-                </div>
 
-                {/* Scope */}
-                <div>
-                  <ScopeBadge scope={k.scope} />
-                </div>
-
-                {/* Last used */}
-                <div className="text-right">
-                  <div className="text-[12.5px] tabular-nums text-fg-strong">
-                    {k.lastUsed}
-                  </div>
-                  <div
-                    className="mt-0.5 text-[10.5px] text-fg-disabled"
-                    title={k.lastUsedIp}
-                  >
-                    {k.lastUsedHost}
-                  </div>
-                </div>
+          {!loading && keys.length === 0 && !creating && (
+            <div className="px-4 py-12 text-center text-[13px] text-fg-muted">
+              No API keys yet. Create one to use with the SDK.
+            </div>
+          )}
 
-                {/* Calls · 7d */}
-                <div className="text-right">
-                  <a
-                    href={`/calls?key=${k.id}`}
-                    className="font-mono text-[13px] text-fg underline decoration-transparent decoration-1 underline-offset-[3px] transition-colors hover:text-green-bright hover:decoration-current"
-                  >
-                    {k.runs7d.toLocaleString()}
-                  </a>
-                </div>
+          {!loading && creating && <KeysTableSkeletonRow />}
 
-                {/* Created */}
-                <div>
-                  <div className="text-[12.5px] text-fg-strong">
-                    {k.created}
+          {!loading &&
+            keys.map((k) => {
+              const stale = daysSince(k.createdAt) >= ROTATE_DAYS_THRESHOLD;
+              const isOpen = openMenu === k.id;
+              const isJustCreated = revealed?.id === k.id;
+              const displayName = k.label?.trim() || "SDK key";
+              return (
+                <div
+                  key={k.id}
+                  className={`relative grid grid-cols-[2.4fr_1.1fr_1.2fr_36px] items-center gap-3 border-b border-hairline px-4 py-3.5 last:border-b-0 ${
+                    isJustCreated
+                      ? "bg-green/[0.06] ring-1 ring-inset ring-green/25"
+                      : "hover:bg-zebra"
+                  }`}
+                >
+                  <div className="min-w-0">
+                    <div className="text-[13.5px] font-medium text-fg">
+                      {displayName}
+                      {stale && (
+                        <span
+                          className="tone-amber ml-2 inline-flex items-center gap-1 rounded-full border px-1.5 py-px font-mono text-[10.5px] font-medium align-[2px]"
+                          title={`Created ${daysSince(k.createdAt)} days ago`}
+                        >
+                          <AlertTriangle
+                            className="h-[9px] w-[9px]"
+                            aria-hidden="true"
+                          />
+                          {daysSince(k.createdAt)}d
+                        </span>
+                      )}
+                    </div>
+                    <MaskedToken prefix={k.prefix} suffix={k.suffix} />
                   </div>
-                  <div className="mt-0.5 flex items-center gap-1.5 text-[11.5px] text-fg-faint">
-                    <span
-                      // `text-white` constant — these monogram tiles sit on
-                      // a saturated brand fill (green / purple / etc.) and
-                      // need white initials in BOTH themes; `text-fg` would
-                      // render near-black on the colored bg in light mode.
-                      className="grid h-4 w-4 place-items-center rounded text-[8.5px] font-semibold tracking-[0.02em] text-white"
-                      style={{ background: k.createdBy.color }}
-                      aria-hidden="true"
-                    >
-                      {k.createdBy.initials}
+
+                  <div>
+                    <span className="inline-flex items-center gap-1.5 rounded-full border border-hairline bg-dark px-2 py-px font-mono text-[10.5px] text-fg-strong">
+                      sign:job
                     </span>
-                    {k.createdBy.name}
                   </div>
-                </div>
 
-                {/* Row actions */}
-                <div className="relative flex justify-end">
-                  <button
-                    type="button"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setOpenMenu(isOpen ? null : k.id);
-                    }}
-                    aria-label="More actions"
-                    title="More"
-                    className="grid h-[26px] w-7 place-items-center rounded text-fg-faint transition-colors hover:bg-hover hover:text-fg"
-                  >
-                    <MoreVertical className="h-3.5 w-3.5" aria-hidden="true" />
-                  </button>
-                  {isOpen && (
-                    <div
-                      ref={menuRef}
-                      onClick={(e) => e.stopPropagation()}
-                      className="absolute right-0 top-full z-30 mt-1 min-w-[168px] rounded-md border border-subtle bg-dark p-1 shadow-popover"
+                  <div>
+                    <div className="text-[12.5px] text-fg-strong">
+                      {formatCreatedAt(k.createdAt)}
+                    </div>
+                  </div>
+
+                  <div className="relative flex justify-end">
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setOpenMenu(isOpen ? null : k.id);
+                      }}
+                      aria-label="More actions"
+                      title="More"
+                      className="grid h-[26px] w-7 place-items-center rounded text-fg-faint transition-colors hover:bg-hover hover:text-fg"
                     >
-                      <button
-                        type="button"
-                        onClick={() => setOpenMenu(null)}
-                        className="flex w-full items-center gap-2.5 rounded-[4px] px-2.5 py-1.5 text-left text-[12.5px] text-fg-strong transition-colors hover:bg-hover hover:text-fg"
+                      <MoreVertical
+                        className="h-3.5 w-3.5"
+                        aria-hidden="true"
+                      />
+                    </button>
+                    {isOpen && (
+                      <div
+                        ref={menuRef}
+                        onClick={(e) => e.stopPropagation()}
+                        className="absolute right-0 top-full z-30 mt-1 min-w-[168px] rounded-md border border-subtle bg-dark p-1 shadow-popover"
                       >
-                        <Edit2 className="h-3 w-3 text-fg-faint" />
-                        Rename
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => setOpenMenu(null)}
-                        className="flex w-full items-center gap-2.5 rounded-[4px] px-2.5 py-1.5 text-left text-[12.5px] text-fg-strong transition-colors hover:bg-hover hover:text-fg"
-                      >
-                        <SettingsIcon className="h-3 w-3 text-fg-faint" />
-                        Edit scope
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => setOpenMenu(null)}
-                        className="flex w-full items-center gap-2.5 rounded-[4px] px-2.5 py-1.5 text-left text-[12.5px] text-fg-strong transition-colors hover:bg-hover hover:text-fg"
-                      >
-                        <RotateCw className="h-3 w-3 text-fg-faint" />
-                        Rotate key
-                      </button>
-                      <div className="my-1 h-px bg-hairline" />
-                      <button
-                        type="button"
-                        onClick={() => setOpenMenu(null)}
-                        className="flex w-full items-center gap-2.5 rounded-[4px] px-2.5 py-1.5 text-left text-[12.5px] text-red-400 transition-colors hover:bg-red-500/10"
-                      >
-                        <X className="h-3 w-3" />
-                        Revoke
-                      </button>
-                    </div>
-                  )}
+                        <button
+                          type="button"
+                          onClick={() => void onRevoke(k.id)}
+                          className="flex w-full items-center gap-2.5 rounded-[4px] px-2.5 py-1.5 text-left text-[12.5px] text-red-400 transition-colors hover:bg-red-500/10"
+                        >
+                          <X className="h-3 w-3" />
+                          Revoke
+                        </button>
+                      </div>
+                    )}
+                  </div>
                 </div>
-              </div>
-            );
-          })}
+              );
+            })}
         </div>
 
-        {/* Scope reference — collapsible */}
         <details
           open={scopesOpen}
           onToggle={(e) => setScopesOpen(e.currentTarget.open)}
@@ -545,31 +587,33 @@ export default function KeysView() {
               }`}
               aria-hidden="true"
             />
-            <span>Scope reference</span>
-            <span className="rounded-full border border-hairline bg-dark px-1.5 py-px text-[10.5px] text-fg-faint">
-              {Object.keys(SCOPES).length}
-            </span>
+            <span>SDK usage</span>
           </summary>
-          <div className="border-t border-hairline">
-            {Object.entries(SCOPES).map(([id, s]) => (
-              <div
-                key={id}
-                className="grid grid-cols-[12px_1fr_auto] items-center gap-3 border-b border-hairline px-4 py-3 last:border-b-0"
-              >
-                <span
-                  className="h-2 w-2 rounded-full"
-                  style={{ background: s.color }}
-                  aria-hidden="true"
-                />
-                <div>
-                  <p className="text-[13px] font-medium text-fg">{s.label}</p>
-                  <p className="mt-0.5 text-[11.5px] text-fg-faint">{s.desc}</p>
-                </div>
-                <p className="text-right font-mono text-[10.5px] text-fg-disabled">
-                  {s.scopes}
-                </p>
-              </div>
-            ))}
+          <div className="border-t border-hairline px-4 py-3.5">
+            <p className="text-[12.5px] leading-relaxed text-fg-muted">
+              Pass the key to{" "}
+              <span className="font-mono text-fg-strong">
+                exchangeApiKeyForSigner
+              </span>{" "}
+              with your dashboard origin as{" "}
+              <span className="font-mono text-fg-strong">facadeUrl</span>, call{" "}
+              <span className="font-mono text-fg-strong">
+                POST /api/pymthouse/keys/exchange
+              </span>{" "}
+              on the dashboard, or exchange directly on the issuer at{" "}
+              <span className="font-mono text-fg-strong">
+                POST …/apps/{"{clientId}"}/oidc/token
+              </span>{" "}
+              (RFC 8693,{" "}
+              <span className="font-mono text-fg-strong">subject_token</span> =
+              API key). The response includes{" "}
+              <span className="font-mono text-fg-strong">signer_url</span> for
+              direct remote-signer calls. See{" "}
+              <span className="font-mono text-fg-strong">
+                @pymthouse/builder-sdk/examples/stream-with-api-key.mjs
+              </span>
+              .
+            </p>
           </div>
         </details>
       </div>
diff --git a/lib/console/external-user-id.test.ts b/lib/console/external-user-id.test.ts
new file mode 100644
index 0000000..1e2dd5d
--- /dev/null
+++ b/lib/console/external-user-id.test.ts
@@ -0,0 +1,16 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { externalUserIdFromSub } from "./external-user-id";
+
+test("hashes Auth0 sub into the pymthouse charset", async () => {
+  const id = await externalUserIdFromSub("github|12345");
+  assert.match(id, /^eu_[0-9a-f]{64}$/);
+});
+
+test("is deterministic and case-sensitive on sub", async () => {
+  const a = await externalUserIdFromSub("auth0|abc");
+  const b = await externalUserIdFromSub("auth0|abc");
+  const c = await externalUserIdFromSub("auth0|Abc");
+  assert.equal(a, b);
+  assert.notEqual(a, c);
+});
diff --git a/lib/console/external-user-id.ts b/lib/console/external-user-id.ts
new file mode 100644
index 0000000..4690fca
--- /dev/null
+++ b/lib/console/external-user-id.ts
@@ -0,0 +1,20 @@
+/**
+ * Deterministic PymtHouse externalUserId from an Auth0 `sub`.
+ * `sub` contains `|`, which the builder-sdk charset forbids ([A-Za-z0-9._:-]).
+ */
+const HASH_NAMESPACE = "livepeer-console:externalUserId:";
+
+export async function externalUserIdFromSub(sub: string): Promise<string> {
+  const normalized = sub.trim();
+  if (!normalized) {
+    throw new Error("Auth0 sub is required");
+  }
+  const digest = await crypto.subtle.digest(
+    "SHA-256",
+    new TextEncoder().encode(`${HASH_NAMESPACE}${normalized}`)
+  );
+  const hex = Array.from(new Uint8Array(digest))
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("");
+  return `eu_${hex}`;
+}
diff --git a/lib/console/pymthouse-bff.ts b/lib/console/pymthouse-bff.ts
new file mode 100644
index 0000000..9d5ea83
--- /dev/null
+++ b/lib/console/pymthouse-bff.ts
@@ -0,0 +1,65 @@
+import "server-only";
+
+import { PmtHouseClient, PmtHouseError } from "@pymthouse/builder-sdk";
+import {
+  readPublicClientId,
+  requirePymthouseM2mConfig,
+} from "@/lib/console/pymthouse-http";
+
+export function createPmtHouseClientForPublicApp(
+  publicClientId: string
+): PmtHouseClient {
+  const config = requirePymthouseM2mConfig();
+  return new PmtHouseClient({
+    issuerUrl: config.issuerUrl,
+    publicClientId,
+    m2mClientId: config.m2mClientId,
+    m2mClientSecret: config.m2mClientSecret,
+    allowInsecureHttp: config.allowInsecureHttp,
+  });
+}
+
+/**
+ * Pymthouse signals user-not-found with two envelopes: the REST shape
+ * (`{ error: <prose>, code: "not_found" }`) and the OAuth shape used by the
+ * mint-token route (`{ error: "not_found" }`, no `code`).
+ */
+export function isUserNotFoundError(error: unknown): boolean {
+  if (!(error instanceof PmtHouseError) || error.status !== 404) {
+    return false;
+  }
+  if (error.code === "not_found") {
+    return true;
+  }
+  const details = error.details as { error?: unknown } | null | undefined;
+  return details?.error === "not_found";
+}
+
+export async function ensureDashboardAppUser(
+  externalUserId: string,
+  email?: string
+): Promise<void> {
+  const client = createPmtHouseClientForPublicApp(readPublicClientId());
+  await client.upsertAppUser({
+    externalUserId,
+    ...(email ? { email } : {}),
+  });
+}
+
+export async function mintEndUserAccessToken(
+  externalUserId: string,
+  email?: string
+): Promise<string> {
+  const client = createPmtHouseClientForPublicApp(readPublicClientId());
+  try {
+    const minted = await client.mintUserAccessToken({ externalUserId });
+    return minted.access_token;
+  } catch (error) {
+    if (isUserNotFoundError(error)) {
+      await ensureDashboardAppUser(externalUserId, email);
+      const minted = await client.mintUserAccessToken({ externalUserId });
+      return minted.access_token;
+    }
+    throw error;
+  }
+}
diff --git a/lib/console/pymthouse-http.ts b/lib/console/pymthouse-http.ts
new file mode 100644
index 0000000..a18e838
--- /dev/null
+++ b/lib/console/pymthouse-http.ts
@@ -0,0 +1,103 @@
+import "server-only";
+
+import { PmtHouseError } from "@pymthouse/builder-sdk";
+
+export type PymthouseM2mConfig = {
+  issuerUrl: string;
+  m2mClientId: string;
+  m2mClientSecret: string;
+  allowInsecureHttp: boolean;
+};
+
+export function readPymthouseM2mConfig(): PymthouseM2mConfig | null {
+  const issuerUrl = process.env.PYMTHOUSE_ISSUER_URL?.trim();
+  const m2mClientId = process.env.PYMTHOUSE_M2M_CLIENT_ID?.trim();
+  const m2mClientSecret = process.env.PYMTHOUSE_M2M_CLIENT_SECRET?.trim();
+  if (!issuerUrl || !m2mClientId || !m2mClientSecret) {
+    return null;
+  }
+  return {
+    issuerUrl,
+    m2mClientId,
+    m2mClientSecret,
+    allowInsecureHttp: process.env.PYMTHOUSE_ALLOW_INSECURE_HTTP === "1",
+  };
+}
+
+export function requirePymthouseM2mConfig(): PymthouseM2mConfig {
+  const config = readPymthouseM2mConfig();
+  if (!config) {
+    throw new PmtHouseError(
+      "Pymthouse is not configured. Set PYMTHOUSE_ISSUER_URL, PYMTHOUSE_M2M_CLIENT_ID, and PYMTHOUSE_M2M_CLIENT_SECRET.",
+      { status: 503, code: "pymthouse_required" }
+    );
+  }
+  return config;
+}
+
+export function readPublicClientId(): string {
+  const id =
+    process.env.PYMTHOUSE_PUBLIC_CLIENT_ID?.trim() ||
+    process.env.DASHBOARD_DEVICE_PUBLIC_CLIENT_ID?.trim();
+  if (!id) {
+    throw new PmtHouseError(
+      "PYMTHOUSE_PUBLIC_CLIENT_ID (or DASHBOARD_DEVICE_PUBLIC_CLIENT_ID) is required",
+      { status: 503, code: "pymthouse_required" }
+    );
+  }
+  return id;
+}
+
+export function readM2mAuthHeader(): string {
+  const config = requirePymthouseM2mConfig();
+  return `Basic ${Buffer.from(`${config.m2mClientId}:${config.m2mClientSecret}`).toString("base64")}`;
+}
+
+export function pymthouseAppsOrigin(issuerUrl?: string): string {
+  const url = issuerUrl?.trim() || requirePymthouseM2mConfig().issuerUrl;
+  return url.replace(/\/api\/v1\/oidc\/?$/i, "");
+}
+
+export function issuerOriginFromConfig(): string {
+  return new URL(requirePymthouseM2mConfig().issuerUrl).origin;
+}
+
+export async function readPymthouseResponse<T>(
+  response: Response,
+  options?: { errorCode?: string }
+): Promise<T> {
+  const text = await response.text();
+  let body: (T & { error?: string; error_description?: string }) | null = null;
+  try {
+    body = text
+      ? (JSON.parse(text) as T & { error?: string; error_description?: string })
+      : null;
+  } catch {
+    throw new PmtHouseError(
+      `PymtHouse returned non-JSON (${response.status})`,
+      {
+        status: 502,
+        code: "invalid_json",
+      }
+    );
+  }
+  if (!response.ok) {
+    throw new PmtHouseError(
+      body?.error_description ??
+        body?.error ??
+        `Request failed (${response.status})`,
+      {
+        status: response.status,
+        code: options?.errorCode ?? "pymthouse_http_error",
+        details: body ?? undefined,
+      }
+    );
+  }
+  if (!body) {
+    throw new PmtHouseError("PymtHouse returned an empty response", {
+      status: 502,
+      code: "invalid_response",
+    });
+  }
+  return body;
+}
diff --git a/lib/console/pymthouse-keys-bff.ts b/lib/console/pymthouse-keys-bff.ts
new file mode 100644
index 0000000..b745961
--- /dev/null
+++ b/lib/console/pymthouse-keys-bff.ts
@@ -0,0 +1,119 @@
+import "server-only";
+
+import { PmtHouseError } from "@pymthouse/builder-sdk";
+import { ensureDashboardAppUser } from "@/lib/console/pymthouse-bff";
+import type { DashboardApiKeyRow } from "@/lib/console/pymthouse-keys";
+import {
+  pymthouseAppsOrigin,
+  readM2mAuthHeader,
+  readPublicClientId,
+  readPymthouseResponse,
+} from "@/lib/console/pymthouse-http";
+
+export type { DashboardApiKeyRow };
+
+function userKeysUrl(publicClientId: string, externalUserId: string): string {
+  return `${pymthouseAppsOrigin()}/api/v1/apps/${encodeURIComponent(publicClientId)}/users/${encodeURIComponent(externalUserId)}/keys`;
+}
+
+export async function listDashboardApiKeys(
+  externalUserId: string,
+  email?: string
+): Promise<DashboardApiKeyRow[]> {
+  const publicClientId = readPublicClientId();
+  await ensureDashboardAppUser(externalUserId, email);
+
+  const response = await fetch(userKeysUrl(publicClientId, externalUserId), {
+    method: "GET",
+    headers: {
+      Authorization: readM2mAuthHeader(),
+      Accept: "application/json",
+    },
+    cache: "no-store",
+  });
+  const body = await readPymthouseResponse<{ keys?: DashboardApiKeyRow[] }>(
+    response,
+    { errorCode: "api_keys_list_failed" }
+  );
+  return (body.keys ?? []).filter((row) => row.status === "active");
+}
+
+export async function createDashboardApiKey(input: {
+  externalUserId: string;
+  email?: string;
+  label?: string;
+}): Promise<{
+  apiKey: string;
+  sdkToken: string | null;
+  row: DashboardApiKeyRow;
+}> {
+  const publicClientId = readPublicClientId();
+  await ensureDashboardAppUser(input.externalUserId, input.email);
+
+  const response = await fetch(
+    userKeysUrl(publicClientId, input.externalUserId),
+    {
+      method: "POST",
+      headers: {
+        Authorization: readM2mAuthHeader(),
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(input.label ? { label: input.label } : {}),
+      cache: "no-store",
+    }
+  );
+  const body = await readPymthouseResponse<{
+    apiKey: string;
+    sdkToken?: string;
+    id: string;
+    prefix: string;
+    suffix: string;
+    label: string | null;
+    createdAt: string;
+  }>(response, { errorCode: "api_key_create_failed" });
+
+  const sdkToken =
+    typeof body.sdkToken === "string" && body.sdkToken.trim()
+      ? body.sdkToken.trim()
+      : null;
+
+  return {
+    apiKey: body.apiKey,
+    sdkToken,
+    row: {
+      id: body.id,
+      label: body.label,
+      prefix: body.prefix,
+      suffix: body.suffix,
+      status: "active",
+      createdAt: body.createdAt,
+      revokedAt: null,
+    },
+  };
+}
+
+export async function revokeDashboardApiKey(input: {
+  externalUserId: string;
+  keyId: string;
+}): Promise<void> {
+  const publicClientId = readPublicClientId();
+  const url = new URL(userKeysUrl(publicClientId, input.externalUserId));
+  url.searchParams.set("keyId", input.keyId);
+
+  const response = await fetch(url.toString(), {
+    method: "DELETE",
+    headers: {
+      Authorization: readM2mAuthHeader(),
+      Accept: "application/json",
+    },
+    cache: "no-store",
+  });
+  await response.text().catch(() => undefined);
+  if (!response.ok) {
+    throw new PmtHouseError(`API key revoke failed (${response.status})`, {
+      status: response.status,
+      code: "api_key_revoke_failed",
+    });
+  }
+}
diff --git a/lib/console/pymthouse-keys.ts b/lib/console/pymthouse-keys.ts
new file mode 100644
index 0000000..d7582e4
--- /dev/null
+++ b/lib/console/pymthouse-keys.ts
@@ -0,0 +1,9 @@
+export type DashboardApiKeyRow = {
+  id: string;
+  label: string | null;
+  prefix: string;
+  suffix: string;
+  status: string;
+  createdAt: string;
+  revokedAt: string | null;
+};
diff --git a/lib/console/read-response-json.ts b/lib/console/read-response-json.ts
new file mode 100644
index 0000000..ba5e410
--- /dev/null
+++ b/lib/console/read-response-json.ts
@@ -0,0 +1,11 @@
+export async function readResponseJson<T>(response: Response): Promise<T> {
+  const text = await response.text();
+  if (!text.trim()) {
+    throw new Error(`Empty response (${response.status})`);
+  }
+  try {
+    return JSON.parse(text) as T;
+  } catch {
+    throw new Error(`Invalid JSON (${response.status})`);
+  }
+}
diff --git a/lib/console/session-user.ts b/lib/console/session-user.ts
new file mode 100644
index 0000000..cba918a
--- /dev/null
+++ b/lib/console/session-user.ts
@@ -0,0 +1,30 @@
+import "server-only";
+
+import { auth0 } from "@/lib/auth0";
+import { externalUserIdFromSub } from "@/lib/console/external-user-id";
+
+export class SessionRequiredError extends Error {
+  readonly status = 401;
+  readonly code = "unauthorized";
+
+  constructor(message = "Sign in required") {
+    super(message);
+    this.name = "SessionRequiredError";
+  }
+}
+
+export async function requireConsoleSession(): Promise<{
+  externalUserId: string;
+  email?: string;
+}> {
+  const session = await auth0.getSession();
+  const sub = session?.user?.sub?.trim();
+  if (!session || !sub) {
+    throw new SessionRequiredError();
+  }
+  const email = session.user.email?.trim();
+  return {
+    externalUserId: await externalUserIdFromSub(sub),
+    email: email || undefined,
+  };
+}
diff --git a/lib/console/useApiKeys.ts b/lib/console/useApiKeys.ts
new file mode 100644
index 0000000..3320035
--- /dev/null
+++ b/lib/console/useApiKeys.ts
@@ -0,0 +1,133 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import type { DashboardApiKeyRow } from "@/lib/console/pymthouse-keys";
+import { readResponseJson } from "@/lib/console/read-response-json";
+
+type ApiKeysState =
+  | { status: "idle" }
+  | { status: "loading" }
+  | { status: "ready"; keys: DashboardApiKeyRow[] }
+  | { status: "error"; message: string };
+
+export function useApiKeys(enabled: boolean) {
+  const [state, setState] = useState<ApiKeysState>({ status: "idle" });
+
+  const load = useCallback(
+    async (options?: { soft?: boolean }) => {
+      if (!enabled) {
+        setState({
+          status: "error",
+          message: "Sign in to manage API keys for your account.",
+        });
+        return;
+      }
+
+      const soft = options?.soft === true;
+      if (!soft) {
+        setState({ status: "loading" });
+      }
+      try {
+        const response = await fetch("/api/pymthouse/keys");
+        const body = await readResponseJson<{
+          keys?: DashboardApiKeyRow[];
+          error?: string;
+        }>(response);
+        if (!response.ok) {
+          throw new Error(
+            body.error ?? `API keys fetch failed (${response.status})`
+          );
+        }
+        setState({ status: "ready", keys: body.keys ?? [] });
+      } catch (error) {
+        const message =
+          error instanceof Error ? error.message : "Failed to load API keys";
+        setState((prev) => {
+          if (soft && prev.status === "ready") {
+            return prev;
+          }
+          return { status: "error", message };
+        });
+      }
+    },
+    [enabled]
+  );
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const createKey = useCallback(
+    async (label?: string) => {
+      if (!enabled) {
+        throw new Error("Sign in required");
+      }
+      const response = await fetch("/api/pymthouse/keys", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ label }),
+      });
+      const body = await readResponseJson<{
+        apiKey?: string;
+        sdkToken?: string | null;
+        row?: DashboardApiKeyRow;
+        error?: string;
+      }>(response);
+      if (!response.ok || !body.apiKey || !body.row) {
+        throw new Error(body.error ?? `Create failed (${response.status})`);
+      }
+      return {
+        apiKey: body.apiKey,
+        id: body.row.id,
+        row: body.row,
+        sdkToken:
+          typeof body.sdkToken === "string" && body.sdkToken.trim()
+            ? body.sdkToken.trim()
+            : null,
+      };
+    },
+    [enabled]
+  );
+
+  const insertKey = useCallback((row: DashboardApiKeyRow) => {
+    setState((prev) => {
+      const existing = prev.status === "ready" ? prev.keys : [];
+      return {
+        status: "ready",
+        keys: [
+          row,
+          ...existing.filter((existingRow) => existingRow.id !== row.id),
+        ],
+      };
+    });
+  }, []);
+
+  const revokeKey = useCallback(
+    async (keyId: string) => {
+      if (!enabled) {
+        throw new Error("Sign in required");
+      }
+      const params = new URLSearchParams({ keyId });
+      const response = await fetch(`/api/pymthouse/keys?${params}`, {
+        method: "DELETE",
+      });
+      const body = await readResponseJson<{ error?: string }>(response);
+      if (!response.ok) {
+        throw new Error(body.error ?? `Revoke failed (${response.status})`);
+      }
+      setState((prev) => {
+        if (prev.status !== "ready") {
+          return prev;
+        }
+        return {
+          status: "ready",
+          keys: prev.keys.filter((row) => row.id !== keyId),
+        };
+      });
+      await load({ soft: true });
+    },
+    [enabled, load]
+  );
+
+  return { state, reload: load, createKey, insertKey, revokeKey };
+}
diff --git a/package.json b/package.json
index 8791e68..c61a55e 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@auth0/nextjs-auth0": "^4.27.0",
+    "@pymthouse/builder-sdk": "^0.6.5",
     "framer-motion": "^11.15.0",
     "geist": "^1.7.0",
     "lucide-react": "^1.6.0",
@@ -21,6 +22,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "recharts": "^3.8.1",
+    "server-only": "^0.0.1",
     "wavesurfer.js": "^7.12.6"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c6b5d5f..fb66ebe 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       '@auth0/nextjs-auth0':
         specifier: ^4.27.0
         version: 4.27.0(next@15.5.14(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@pymthouse/builder-sdk':
+        specifier: ^0.6.5
+        version: 0.6.5
       framer-motion:
         specifier: ^11.15.0
         version: 11.18.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -32,6 +35,9 @@ importers:
       recharts:
         specifier: ^3.8.1
         version: 3.8.1(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react-is@16.13.1)(react@19.2.4)(redux@5.0.1)
+      server-only:
+        specifier: ^0.0.1
+        version: 0.0.1
       wavesurfer.js:
         specifier: ^7.12.6
         version: 7.12.7
@@ -402,6 +408,10 @@ packages:
   '@panva/hkdf@1.2.1':
     resolution: {integrity: sha512-6oclG6Y3PiDFcoyk8srjLfVKyMfVCKJ27JwNPViuXziFpmdz+MZnZN/aKY0JGXgYuO/VghU0jcOAZgWXZ1Dmrw==}
 
+  '@pymthouse/builder-sdk@0.6.5':
+    resolution: {integrity: sha512-oWQC3y7vTqOKG+fEaZRc7TtbIMJaLZZoS6kCqBzF5M4489wGS31LlE2gwhYDEuVNAeyoJwaK/Uu+mfEe8TwGFw==}
+    engines: {node: '>=20'}
+
   '@reduxjs/toolkit@2.11.2':
     resolution: {integrity: sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==}
     peerDependencies:
@@ -1857,6 +1867,9 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  server-only@0.0.1:
+    resolution: {integrity: sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==}
+
   set-function-length@1.2.2:
     resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
     engines: {node: '>= 0.4'}
@@ -2333,6 +2346,10 @@ snapshots:
 
   '@panva/hkdf@1.2.1': {}
 
+  '@pymthouse/builder-sdk@0.6.5':
+    dependencies:
+      oauth4webapi: 3.8.7
+
   '@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.2.4)(redux@5.0.1))(react@19.2.4)':
     dependencies:
       '@standard-schema/spec': 1.1.0
@@ -3890,6 +3907,8 @@ snapshots:
 
   semver@7.7.4: {}
 
+  server-only@0.0.1: {}
+
   set-function-length@1.2.2:
     dependencies:
       define-data-property: 1.1.4