From 9dd32ddca2e35da2f35cff2cf4eebbdae6922c45 Mon Sep 17 00:00:00 2001
From: John | Elite Encoder <john@eliteencoder.net>
Date: Mon, 1 Jun 2026 12:27:24 -0400
Subject: [PATCH 1/4] feat(dashboard): add usage capability display and account
 usage hooks

- Implemented `usage-capability-display.ts` for displaying account usage capabilities with color coding and data distribution.
- Created `useAccountUsage.ts` hook to manage account usage state and fetch usage data.
- Added `useApiKeys.ts` for managing API keys with create and revoke functionality.
- Introduced `useDiscoveryModel.ts` and `useExploreModels.ts` for fetching and managing discovery models.
- Developed `useSigningSession.ts` for handling signing sessions and token management.
- Added discovery client functions in `client.ts` for fetching capabilities and models.
- Created configuration and constants files for discovery service.
- Implemented mapping functions for transforming discovery capabilities to models.
- Defined types for discovery service API responses.
- Updated package dependencies and added type definitions for jmuxer and mux.js.
---
 .env.example                                  |  25 +
 app/(app)/layout.tsx                          |   6 +-
 app/(app)/models/[id]/page.tsx                |  54 +-
 app/(app)/page.tsx                            |  53 +-
 app/(app)/usage/page.tsx                      |   2 +-
 app/(auth)/device-approved/page.tsx           |  29 +
 app/(auth)/layout.tsx                         |   6 +-
 app/(auth)/login/page.tsx                     |  22 +-
 app/(auth)/signup/page.tsx                    |  18 +-
 app/api/auth/device/complete/route.ts         |  71 ++
 app/api/auth/initiate-login/route.ts          |  58 ++
 app/api/discovery/explore/route.ts            |  24 +
 app/api/discovery/models/[id]/route.ts        |  48 ++
 .../sessions/[id]/publish/[seq]/route.ts      |   8 +
 app/api/gateway/sessions/[id]/route.ts        |   7 +
 .../gateway/sessions/[id]/subscribe/route.ts  |   7 +
 app/api/gateway/sessions/route.ts             |   7 +
 app/api/pymthouse/account-usage/route.ts      |  41 +
 app/api/pymthouse/keys/exchange/route.ts      |  43 +
 app/api/pymthouse/keys/route.ts               |  92 ++
 .../pymthouse/session/signing-token/route.ts  |  45 +
 app/api/signer/device/exchange/route.ts       |  39 +
 components/dashboard/DashboardProviders.tsx   |  18 +
 components/dashboard/KeysView.tsx             | 478 ++++------
 components/dashboard/LoginPage.tsx            | 102 ++-
 components/dashboard/SidebarUsageCard.tsx     | 128 ++-
 components/dashboard/SignerSessionContext.tsx |   7 +
 components/dashboard/UsageView.tsx            | 813 ++++++++++--------
 components/dashboard/UserSessionContext.tsx   |  77 ++
 .../dashboard/playground/CodeSnippets.tsx     |  26 +-
 .../playground/LiveStreamPlayground.tsx       | 592 +++++++++++++
 lib/dashboard/device-flow.ts                  | 106 +++
 lib/dashboard/fetch-signing-token.ts          |  58 ++
 lib/dashboard/gateway-config.server.ts        |  12 +
 lib/dashboard/gateway-public.ts               |   7 +
 lib/dashboard/model-api-url.ts                |  31 +
 lib/dashboard/playground/stream-capture.ts    |  91 ++
 lib/dashboard/playground/trickle-mpegts.ts    | 504 +++++++++++
 lib/dashboard/pymthouse-bff.ts                | 202 +++++
 lib/dashboard/pymthouse-keys-bff.ts           | 183 ++++
 lib/dashboard/pymthouse-signing-bff.ts        | 119 +++
 lib/dashboard/sdk-streaming-example.ts        | 131 +++
 lib/dashboard/signing-token-storage.ts        |  59 ++
 lib/dashboard/streaming-playground.ts         |  76 ++
 lib/dashboard/types.ts                        |   2 +
 lib/dashboard/usage-capability-display.ts     |  99 +++
 lib/dashboard/useAccountUsage.ts              |  48 ++
 lib/dashboard/useApiKeys.ts                   |  94 ++
 lib/dashboard/useDiscoveryModel.ts            |  63 ++
 lib/dashboard/useExploreModels.ts             |  86 ++
 lib/dashboard/useSigningSession.ts            | 167 ++++
 lib/discovery/client.ts                       | 102 +++
 lib/discovery/config.ts                       |   7 +
 lib/discovery/constants.ts                    |   3 +
 lib/discovery/map-to-model.ts                 | 119 +++
 lib/discovery/types.ts                        |  54 ++
 package.json                                  |   4 +
 pnpm-lock.yaml                                |  64 ++
 types/jmuxer.d.ts                             |   8 +
 types/muxjs.d.ts                              |  18 +
 60 files changed, 4737 insertions(+), 726 deletions(-)
 create mode 100644 app/(auth)/device-approved/page.tsx
 create mode 100644 app/api/auth/device/complete/route.ts
 create mode 100644 app/api/auth/initiate-login/route.ts
 create mode 100644 app/api/discovery/explore/route.ts
 create mode 100644 app/api/discovery/models/[id]/route.ts
 create mode 100644 app/api/gateway/sessions/[id]/publish/[seq]/route.ts
 create mode 100644 app/api/gateway/sessions/[id]/route.ts
 create mode 100644 app/api/gateway/sessions/[id]/subscribe/route.ts
 create mode 100644 app/api/gateway/sessions/route.ts
 create mode 100644 app/api/pymthouse/account-usage/route.ts
 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/session/signing-token/route.ts
 create mode 100644 app/api/signer/device/exchange/route.ts
 create mode 100644 components/dashboard/DashboardProviders.tsx
 create mode 100644 components/dashboard/SignerSessionContext.tsx
 create mode 100644 components/dashboard/UserSessionContext.tsx
 create mode 100644 components/dashboard/playground/LiveStreamPlayground.tsx
 create mode 100644 lib/dashboard/device-flow.ts
 create mode 100644 lib/dashboard/fetch-signing-token.ts
 create mode 100644 lib/dashboard/gateway-config.server.ts
 create mode 100644 lib/dashboard/gateway-public.ts
 create mode 100644 lib/dashboard/model-api-url.ts
 create mode 100644 lib/dashboard/playground/stream-capture.ts
 create mode 100644 lib/dashboard/playground/trickle-mpegts.ts
 create mode 100644 lib/dashboard/pymthouse-bff.ts
 create mode 100644 lib/dashboard/pymthouse-keys-bff.ts
 create mode 100644 lib/dashboard/pymthouse-signing-bff.ts
 create mode 100644 lib/dashboard/sdk-streaming-example.ts
 create mode 100644 lib/dashboard/signing-token-storage.ts
 create mode 100644 lib/dashboard/streaming-playground.ts
 create mode 100644 lib/dashboard/usage-capability-display.ts
 create mode 100644 lib/dashboard/useAccountUsage.ts
 create mode 100644 lib/dashboard/useApiKeys.ts
 create mode 100644 lib/dashboard/useDiscoveryModel.ts
 create mode 100644 lib/dashboard/useExploreModels.ts
 create mode 100644 lib/dashboard/useSigningSession.ts
 create mode 100644 lib/discovery/client.ts
 create mode 100644 lib/discovery/config.ts
 create mode 100644 lib/discovery/constants.ts
 create mode 100644 lib/discovery/map-to-model.ts
 create mode 100644 lib/discovery/types.ts
 create mode 100644 types/jmuxer.d.ts
 create mode 100644 types/muxjs.d.ts

diff --git a/.env.example b/.env.example
index d184751..95de119 100644
--- a/.env.example
+++ b/.env.example
@@ -1,2 +1,27 @@
 # The Graph (optional — falls back to hardcoded values)
 THEGRAPH_API_KEY=
+
+# Discovery Service — Explore capability catalog (legacy pipelines by default).
+DISCOVERY_SERVICE_URL=https://discovery-service-production-8955.up.railway.app
+
+# PymtHouse OIDC (device login + signer JWT exchange facade)
+PYMTHOUSE_ISSUER_URL=http://localhost:3001/api/v1/oidc
+# Public app client id (OAuth client_id) — used for usage/balance Builder API calls
+PYMTHOUSE_PUBLIC_CLIENT_ID=
+PYMTHOUSE_M2M_CLIENT_ID=
+PYMTHOUSE_M2M_CLIENT_SECRET=
+# Initiate login URI for device flow (register on pymthouse app):
+# http://localhost:3002/api/auth/initiate-login
+# Public signer API for clients (pymthouse proxy — records usage). Not raw DMZ :8080.
+PYMTHOUSE_SIGNER_URL=http://localhost:3001/api/signer
+# Set to 1 for local dev when issuer uses http://127.0.0.1
+PYMTHOUSE_ALLOW_INSECURE_HTTP=
+
+# Browser gateway relay (orchestrator LV2V via same-origin HTTP segments)
+GATEWAY_ENABLED=0
+NEXT_PUBLIC_GATEWAY_ENABLED=0
+# Optional overrides (defaults to PYMTHOUSE_SIGNER_URL + LIVEPEER_DISCOVERY_SERVICE_URL)
+# GATEWAY_DISCOVERY_URL=
+# GATEWAY_DISCOVERY_TIMEOUT_MS=60000
+# GATEWAY_USE_TOFU=1
+# GATEWAY_PAYMENT_INTERVAL_MS=2000
diff --git a/app/(app)/layout.tsx b/app/(app)/layout.tsx
index f2c91a1..3fb1a91 100644
--- a/app/(app)/layout.tsx
+++ b/app/(app)/layout.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from "next";
 import type { CSSProperties } from "react";
 import { GeistSans } from "geist/font/sans";
 import { GeistMono } from "geist/font/mono";
-import { AuthProvider } from "@/components/dashboard/AuthContext";
+import { DashboardProviders } from "@/components/dashboard/DashboardProviders";
 import { ThemeProvider } from "@/components/dashboard/ThemeContext";
 import DashboardSidebar from "@/components/dashboard/DashboardSidebar";
 import KeyboardShortcuts from "@/components/dashboard/KeyboardShortcuts";
@@ -58,7 +58,7 @@ export default function DashboardLayout({
           paints. ThemeProvider below takes over post-hydration. */}
       <script dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }} />
       <ThemeProvider>
-        <AuthProvider>
+        <DashboardProviders>
           <div
             className={`flex min-h-screen flex-col bg-dark font-sans md:h-screen md:min-h-0 md:flex-row md:overflow-hidden ${GeistSans.variable} ${GeistMono.variable}`}
             style={dashboardOverrides}
@@ -69,7 +69,7 @@ export default function DashboardLayout({
             </div>
             <KeyboardShortcuts />
           </div>
-        </AuthProvider>
+        </DashboardProviders>
       </ThemeProvider>
     </>
   );
diff --git a/app/(app)/models/[id]/page.tsx b/app/(app)/models/[id]/page.tsx
index f577dc3..4c323a9 100644
--- a/app/(app)/models/[id]/page.tsx
+++ b/app/(app)/models/[id]/page.tsx
@@ -28,11 +28,9 @@ import JobsTable from "@/components/dashboard/JobsTable";
 import StatusDot from "@/components/dashboard/StatusDot";
 import Tooltip from "@/components/design-system/Tooltip";
 import { useStarredModels } from "@/lib/dashboard/useStarredModels";
-import {
-  getModelById,
-  SETTINGS_API_KEYS,
-  MOCK_RECENT_REQUESTS,
-} from "@/lib/dashboard/mock-data";
+import { SETTINGS_API_KEYS, MOCK_RECENT_REQUESTS } from "@/lib/dashboard/mock-data";
+import { useDiscoveryModel } from "@/lib/dashboard/useDiscoveryModel";
+import DashboardPageSkeleton from "@/components/dashboard/DashboardPageSkeleton";
 import { getModelIcon, formatRuns, formatPrice } from "@/lib/dashboard/utils";
 import PlaygroundForm from "@/components/dashboard/playground/PlaygroundForm";
 import JsonInput from "@/components/dashboard/playground/JsonInput";
@@ -40,6 +38,12 @@ import PlaygroundOutput from "@/components/dashboard/playground/PlaygroundOutput
 import TranscodingOutput from "@/components/dashboard/playground/TranscodingOutput";
 import CodeSnippets from "@/components/dashboard/playground/CodeSnippets";
 import WebcamPlayground from "@/components/dashboard/playground/WebcamPlayground";
+import LiveStreamPlayground from "@/components/dashboard/playground/LiveStreamPlayground";
+import { isGatewayEnabledPublic } from "@/lib/dashboard/gateway-public";
+import {
+  getStreamingFacadeEndpointLabel,
+  isStreamingCapabilityModel,
+} from "@/lib/dashboard/sdk-streaming-example";
 import ModelAnalytics from "@/components/dashboard/stats/ModelAnalytics";
 import type { Model } from "@/lib/dashboard/types";
 
@@ -156,6 +160,9 @@ function PlaygroundTab({ model }: { model: Model }) {
   }
 
   if (model.playgroundConfig.playgroundVariant === "webcam") {
+    if (isGatewayEnabledPublic()) {
+      return <LiveStreamPlayground model={model} />;
+    }
     return <WebcamPlayground model={model} />;
   }
 
@@ -289,8 +296,11 @@ function PlaygroundTab({ model }: { model: Model }) {
 
 function ApiTab({ model }: { model: Model }) {
   const baseUrl = model.apiEndpoint ?? "https://gateway.livepeer.org/v1";
-  const endpoint =
-    model.category === "Language"
+  const gatewayStreaming =
+    isGatewayEnabledPublic() && isStreamingCapabilityModel(model);
+  const endpoint = gatewayStreaming
+    ? getStreamingFacadeEndpointLabel(model)
+    : model.category === "Language"
       ? `${baseUrl}/chat/completions`
       : `${baseUrl}/${model.id}`;
   const defaultKey =
@@ -684,7 +694,8 @@ function ModelIdChip({ modelId }: { modelId: string }) {
 export default function ModelDetailPage() {
   const { id } = useParams<{ id: string }>();
   const [activeTab, setActiveTab] = useState<Tab>("playground");
-  const model = getModelById(id);
+  const discovery = useDiscoveryModel(id);
+  const model = discovery.status === "ready" ? discovery.model : undefined;
 
   // Jobs filtered to this model — drives both the Jobs panel and the count
   // chip on the Jobs tab. `model` may be undefined here (404 path below); we
@@ -705,11 +716,36 @@ export default function ModelDetailPage() {
     [filteredRuns.length],
   );
 
+  if (discovery.status === "loading") {
+    return (
+      <main id="main-content" className="flex flex-1 flex-col bg-dark">
+        <DashboardPageSkeleton maxWidth="5xl" withTabs kpiCount={0} withChart={false} />
+      </main>
+    );
+  }
+
+  if (discovery.status === "error") {
+    return (
+      <main id="main-content" className="flex flex-1 flex-col bg-dark">
+        <div className="flex flex-1 flex-col items-center justify-center px-5 text-center">
+          <p className="text-sm text-fg-muted">Could not load capability from Discovery Service.</p>
+          <p className="mt-2 max-w-md font-mono text-xs text-fg-faint">{discovery.message}</p>
+          <Link
+            href="/"
+            className="mt-6 text-xs text-green-bright hover:underline focus:outline-none rounded"
+          >
+            Back to Explore
+          </Link>
+        </div>
+      </main>
+    );
+  }
+
   if (!model) {
     return (
       <main id="main-content" className="flex flex-1 flex-col bg-dark">
         <div className="flex flex-1 flex-col items-center justify-center text-center">
-          <p className="text-sm text-fg-label">Model not found</p>
+          <p className="text-sm text-fg-label">Capability not found</p>
           <Link
             href="/"
             className="mt-3 text-xs text-green-bright hover:underline focus:outline-none rounded"
diff --git a/app/(app)/page.tsx b/app/(app)/page.tsx
index e99a3c2..d54f0a0 100644
--- a/app/(app)/page.tsx
+++ b/app/(app)/page.tsx
@@ -15,8 +15,8 @@ import {
   Star,
   Search,
 } from "lucide-react";
-import { MODELS } from "@/lib/dashboard/mock-data";
 import Button from "@/components/design-system/Button";
+import { useExploreModels } from "@/lib/dashboard/useExploreModels";
 import Drawer from "@/components/design-system/Drawer";
 import { getModelIcon, formatRuns } from "@/lib/dashboard/utils";
 import { useStarredModels } from "@/lib/dashboard/useStarredModels";
@@ -391,7 +391,27 @@ export default function ExplorePage() {
   );
 }
 
+function ExploreLoadError({
+  message,
+  onRetry,
+}: {
+  message: string;
+  onRetry: () => void;
+}) {
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center px-5 py-24 text-center">
+      <p className="text-sm text-fg-muted">Could not load capabilities from Discovery Service.</p>
+      <p className="mt-2 max-w-md font-mono text-xs text-fg-faint">{message}</p>
+      <Button className="mt-6" variant="secondary" size="sm" onClick={onRetry}>
+        Retry
+      </Button>
+    </div>
+  );
+}
+
 function ExplorePageInner() {
+  const exploreState = useExploreModels();
+  const { status, models, reload } = exploreState;
   const searchParams = useSearchParams();
   const initialCategory = (() => {
     const qp = searchParams.get("category");
@@ -412,12 +432,12 @@ function ExplorePageInner() {
   const [priceMin, setPriceMin] = useState(0);
   const [priceMax, setPriceMax] = useState(100);
   const dataMaxPrice = useMemo(
-    () => Math.max(...MODELS.map((m) => m.pricing.amount), 0.01),
-    [],
+    () => Math.max(...models.map((m) => m.pricing.amount), 0.01),
+    [models],
   );
 
   const filtered = useMemo(() => {
-    const result = MODELS.filter((m) => {
+    const result = models.filter((m) => {
       if (availabilityFilter === "warm" && m.status !== "hot") return false;
       if (availabilityFilter === "cold" && m.status !== "cold") return false;
       if (favoritesOnly && !isStarred(m.id)) return false;
@@ -443,7 +463,28 @@ function ExplorePageInner() {
     });
 
     return result;
-  }, [search, category, availabilityFilter, favoritesOnly, isStarred, priceMin, priceMax, dataMaxPrice]);
+  }, [models, search, category, availabilityFilter, favoritesOnly, isStarred, priceMin, priceMax, dataMaxPrice]);
+
+  if (status === "loading" && models.length === 0) {
+    return (
+      <main id="main-content" className="flex flex-1 flex-col bg-dark">
+        <DashboardPageHeader title="Explore" icon={LayoutGrid} />
+        <DashboardPageSkeleton maxWidth="7xl" withTabs kpiCount={0} withChart={false} />
+      </main>
+    );
+  }
+
+  if (status === "error") {
+    return (
+      <main id="main-content" className="flex flex-1 flex-col bg-dark">
+        <DashboardPageHeader title="Explore" icon={LayoutGrid} />
+        <ExploreLoadError
+          message={exploreState.status === "error" ? exploreState.error : "Unknown error"}
+          onRetry={reload}
+        />
+      </main>
+    );
+  }
 
   const activeFilters = [
     ...(category
@@ -717,7 +758,7 @@ function ExplorePageInner() {
             min={priceMin}
             max={priceMax}
             onChange={(min, max) => { setPriceMin(min); setPriceMax(max); }}
-            models={MODELS}
+            models={models}
           />
         </div>
 
diff --git a/app/(app)/usage/page.tsx b/app/(app)/usage/page.tsx
index 1eb87a0..1c17602 100644
--- a/app/(app)/usage/page.tsx
+++ b/app/(app)/usage/page.tsx
@@ -36,7 +36,7 @@ function UsageContent() {
       <DashboardPageHeader
         title="Usage"
         icon={BarChart3}
-        description="Requests, latency, errors, and spend across your API tokens."
+        description="Signed requests, network cost, and Starter allowance from PymtHouse OpenMeter."
         actions={
           <>
             <button
diff --git a/app/(auth)/device-approved/page.tsx b/app/(auth)/device-approved/page.tsx
new file mode 100644
index 0000000..58aec18
--- /dev/null
+++ b/app/(auth)/device-approved/page.tsx
@@ -0,0 +1,29 @@
+import Link from "next/link";
+import { LivepeerSymbol } from "@/components/design-system/LivepeerLogo";
+
+export default function DeviceApprovedPage() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center bg-dark px-6">
+      <div className="w-full max-w-md rounded-xl border border-hairline bg-dark-card p-8 text-center">
+        <div className="mb-5 flex justify-center">
+          <LivepeerSymbol className="h-9 w-9" />
+        </div>
+        <h1 className="text-2xl font-semibold tracking-tight text-fg">
+          Device login approved
+        </h1>
+        <p className="mt-3 text-sm leading-relaxed text-fg-muted">
+          You can return to your terminal. The python-gateway device flow should
+          finish automatically in a few seconds.
+        </p>
+        <div className="mt-6">
+          <Link
+            href="/home"
+            className="inline-flex rounded-full bg-green-bright px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-green-light"
+          >
+            Open dashboard
+          </Link>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/app/(auth)/layout.tsx b/app/(auth)/layout.tsx
index 4a4dbef..2656f18 100644
--- a/app/(auth)/layout.tsx
+++ b/app/(auth)/layout.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from "next";
 import type { CSSProperties } from "react";
 import { GeistSans } from "geist/font/sans";
 import { GeistMono } from "geist/font/mono";
-import { AuthProvider } from "@/components/dashboard/AuthContext";
+import { DashboardProviders } from "@/components/dashboard/DashboardProviders";
 
 export const metadata: Metadata = {
   title: "Sign in — Livepeer Developer Dashboard",
@@ -23,13 +23,13 @@ export default function DashboardAuthLayout({
   children: React.ReactNode;
 }) {
   return (
-    <AuthProvider>
+    <DashboardProviders>
       <div
         className={`min-h-screen bg-dark font-sans ${GeistSans.variable} ${GeistMono.variable}`}
         style={geistOverride}
       >
         {children}
       </div>
-    </AuthProvider>
+    </DashboardProviders>
   );
 }
diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx
index 2b1807c..7035388 100644
--- a/app/(auth)/login/page.tsx
+++ b/app/(auth)/login/page.tsx
@@ -1,21 +1,31 @@
 "use client";
 
-import { useEffect } from "react";
-import { useRouter } from "next/navigation";
+import { Suspense, useEffect } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import { useAuth } from "@/components/dashboard/AuthContext";
 import LoginPage from "@/components/dashboard/LoginPage";
 
-export default function LoginRoute() {
+function LoginRouteInner() {
   const { isConnected } = useAuth();
   const router = useRouter();
+  const searchParams = useSearchParams();
+  const deviceFlow = searchParams.get("flow") === "device";
 
   useEffect(() => {
-    if (isConnected) {
+    if (isConnected && !deviceFlow) {
       router.replace("/home");
     }
-  }, [isConnected, router]);
+  }, [isConnected, deviceFlow, router]);
 
-  if (isConnected) return null;
+  if (isConnected && !deviceFlow) return null;
 
   return <LoginPage />;
 }
+
+export default function LoginRoute() {
+  return (
+    <Suspense fallback={null}>
+      <LoginRouteInner />
+    </Suspense>
+  );
+}
diff --git a/app/(auth)/signup/page.tsx b/app/(auth)/signup/page.tsx
index a211dc6..4fe8030 100644
--- a/app/(auth)/signup/page.tsx
+++ b/app/(auth)/signup/page.tsx
@@ -1,17 +1,11 @@
 "use client";
 
-import { useEffect } from "react";
+import { Suspense, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { useAuth } from "@/components/dashboard/AuthContext";
 import LoginPage from "@/components/dashboard/LoginPage";
 
-/**
- * Signup route — sibling of `/login`. Renders the same
- * `LoginPage` component but seeds it with `initialMode="signup"`. The
- * footer toggle inside the page is a `<Link>` to `/login`, so
- * URL and visible mode stay in sync without query-param trickery.
- */
-export default function SignupRoute() {
+function SignupRouteInner() {
   const { isConnected } = useAuth();
   const router = useRouter();
 
@@ -25,3 +19,11 @@ export default function SignupRoute() {
 
   return <LoginPage initialMode="signup" />;
 }
+
+export default function SignupRoute() {
+  return (
+    <Suspense fallback={null}>
+      <SignupRouteInner />
+    </Suspense>
+  );
+}
diff --git a/app/api/auth/device/complete/route.ts b/app/api/auth/device/complete/route.ts
new file mode 100644
index 0000000..6ec3d80
--- /dev/null
+++ b/app/api/auth/device/complete/route.ts
@@ -0,0 +1,71 @@
+import { NextRequest, NextResponse } from "next/server";
+import { PmtHouseError } from "@pymthouse/builder-sdk";
+import {
+  clearDeviceFlowCookie,
+  completeDashboardDeviceApproval,
+  readDeviceFlowCookie,
+} from "@/lib/dashboard/device-flow";
+
+export const runtime = "nodejs";
+
+export async function POST(request: NextRequest) {
+  const deviceFlow = await readDeviceFlowCookie();
+  if (!deviceFlow) {
+    return NextResponse.json(
+      { error: "no_pending_device_flow" },
+      { status: 400 },
+    );
+  }
+
+  let body: { externalUserId?: string; email?: string; name?: string };
+  try {
+    body = (await request.json()) as typeof body;
+  } catch {
+    return NextResponse.json({ error: "invalid_json" }, { status: 400 });
+  }
+
+  const email = body.email?.trim() ?? "";
+  const externalUserId = body.externalUserId?.trim() || email;
+  if (!externalUserId) {
+    return NextResponse.json(
+      { error: "invalid_request", error_description: "email is required" },
+      { status: 400 },
+    );
+  }
+
+  try {
+    await completeDashboardDeviceApproval({
+      userCode: deviceFlow.userCode,
+      publicClientId: deviceFlow.clientId,
+      externalUserId,
+      email: email || externalUserId,
+    });
+
+    await clearDeviceFlowCookie();
+
+    return NextResponse.json({
+      success: true,
+      redirectTo: "/device-approved",
+    });
+  } catch (error) {
+    console.error("Device approval completion failed", error);
+    if (error instanceof PmtHouseError) {
+      return NextResponse.json(
+        {
+          error: error.code,
+          error_description: error.message,
+        },
+        { status: error.status },
+      );
+    }
+
+    return NextResponse.json(
+      {
+        error: "device_approval_failed",
+        error_description:
+          error instanceof Error ? error.message : "Unknown device approval error",
+      },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/api/auth/initiate-login/route.ts b/app/api/auth/initiate-login/route.ts
new file mode 100644
index 0000000..6757aa7
--- /dev/null
+++ b/app/api/auth/initiate-login/route.ts
@@ -0,0 +1,58 @@
+import { NextRequest, NextResponse } from "next/server";
+import {
+  extractDeviceApprovalFromTargetLink,
+  validateDeviceInitiateLogin,
+} from "@pymthouse/builder-sdk/device-initiate";
+import { setDeviceFlowCookie } from "@/lib/dashboard/device-flow";
+
+export const runtime = "nodejs";
+
+export async function GET(request: NextRequest) {
+  const issuerUrl = process.env.PYMTHOUSE_ISSUER_URL?.trim();
+  if (!issuerUrl) {
+    return NextResponse.json(
+      {
+        error: "server_misconfigured",
+        error_description: "PYMTHOUSE_ISSUER_URL is required",
+      },
+      { status: 503 },
+    );
+  }
+
+  const iss = request.nextUrl.searchParams.get("iss")?.trim() ?? "";
+  const targetLinkUri =
+    request.nextUrl.searchParams.get("target_link_uri")?.trim() ?? "";
+
+  const validation = validateDeviceInitiateLogin({
+    expectedIssuerUrl: issuerUrl,
+    iss,
+    targetLinkUri,
+  });
+  if (!validation.ok) {
+    return NextResponse.json(
+      { error: "invalid_request", error_description: validation.reason },
+      { status: 400 },
+    );
+  }
+
+  const extracted = extractDeviceApprovalFromTargetLink(targetLinkUri, {
+    expectedIssuerUrl: issuerUrl,
+  });
+  if ("error" in extracted) {
+    return NextResponse.json(
+      { error: "invalid_request", error_description: extracted.error },
+      { status: 400 },
+    );
+  }
+
+  await setDeviceFlowCookie({
+    iss,
+    targetLinkUri,
+    userCode: extracted.userCode,
+    clientId: extracted.publicClientId,
+  });
+
+  const loginUrl = new URL("/login", request.url);
+  loginUrl.searchParams.set("flow", "device");
+  return NextResponse.redirect(loginUrl);
+}
diff --git a/app/api/discovery/explore/route.ts b/app/api/discovery/explore/route.ts
new file mode 100644
index 0000000..fae5bd3
--- /dev/null
+++ b/app/api/discovery/explore/route.ts
@@ -0,0 +1,24 @@
+import { NextResponse } from "next/server";
+import {
+  DEFAULT_DISCOVERY_SERVICE_TYPE,
+  fetchExploreModels,
+  type DiscoveryServiceType,
+} from "@/lib/discovery/client";
+
+function parseServiceType(value: string | null): DiscoveryServiceType {
+  if (value === "registry") return "registry";
+  return DEFAULT_DISCOVERY_SERVICE_TYPE;
+}
+
+export async function GET(request: Request): Promise<Response> {
+  const { searchParams } = new URL(request.url);
+  const serviceType = parseServiceType(searchParams.get("serviceType"));
+
+  try {
+    const payload = await fetchExploreModels(serviceType);
+    return NextResponse.json(payload);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Discovery Service request failed";
+    return NextResponse.json({ error: message }, { status: 502 });
+  }
+}
diff --git a/app/api/discovery/models/[id]/route.ts b/app/api/discovery/models/[id]/route.ts
new file mode 100644
index 0000000..97cfb1e
--- /dev/null
+++ b/app/api/discovery/models/[id]/route.ts
@@ -0,0 +1,48 @@
+import { NextResponse } from "next/server";
+import {
+  DEFAULT_DISCOVERY_SERVICE_TYPE,
+  fetchDiscoveryCapabilities,
+  queryDiscoveryCapabilities,
+  type DiscoveryServiceType,
+} from "@/lib/discovery/client";
+import { mapCapabilityToModel } from "@/lib/discovery/map-to-model";
+
+function parseServiceType(value: string | null): DiscoveryServiceType {
+  if (value === "registry") return "registry";
+  return DEFAULT_DISCOVERY_SERVICE_TYPE;
+}
+
+export async function GET(
+  request: Request,
+  context: { params: Promise<{ id: string }> },
+): Promise<Response> {
+  const { id } = await context.params;
+  const capability = decodeURIComponent(id);
+  const { searchParams } = new URL(request.url);
+  const serviceType = parseServiceType(searchParams.get("serviceType"));
+
+  try {
+    const capabilitiesResponse = await fetchDiscoveryCapabilities(serviceType);
+    const entries = capabilitiesResponse.entries ?? [];
+    const known =
+      capabilitiesResponse.capabilities.includes(capability) ||
+      entries.some((entry) => entry.capability === capability);
+
+    if (!known) {
+      return NextResponse.json({ error: "Capability not found" }, { status: 404 });
+    }
+
+    const entry = entries.find((item) => item.capability === capability);
+    const queryResponse = await queryDiscoveryCapabilities([capability], serviceType);
+    const model = mapCapabilityToModel(
+      capability,
+      entry,
+      queryResponse.results[capability] ?? [],
+    );
+
+    return NextResponse.json({ model, serviceType });
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Discovery Service request failed";
+    return NextResponse.json({ error: message }, { status: 502 });
+  }
+}
diff --git a/app/api/gateway/sessions/[id]/publish/[seq]/route.ts b/app/api/gateway/sessions/[id]/publish/[seq]/route.ts
new file mode 100644
index 0000000..ac39404
--- /dev/null
+++ b/app/api/gateway/sessions/[id]/publish/[seq]/route.ts
@@ -0,0 +1,8 @@
+import { createGatewayPublishSegmentHandler } from "@pymthouse/builder-sdk/gateway/server";
+import { readDashboardGatewayConfig } from "@/lib/dashboard/gateway-config.server";
+
+const config = readDashboardGatewayConfig();
+const handler = createGatewayPublishSegmentHandler(config);
+
+export const PUT = handler;
+export const POST = handler;
diff --git a/app/api/gateway/sessions/[id]/route.ts b/app/api/gateway/sessions/[id]/route.ts
new file mode 100644
index 0000000..3c1c2a3
--- /dev/null
+++ b/app/api/gateway/sessions/[id]/route.ts
@@ -0,0 +1,7 @@
+import { createGatewayStopSessionHandler } from "@pymthouse/builder-sdk/gateway/server";
+import { readDashboardGatewayConfig } from "@/lib/dashboard/gateway-config.server";
+
+const config = readDashboardGatewayConfig();
+const handler = createGatewayStopSessionHandler(config);
+
+export const DELETE = handler;
diff --git a/app/api/gateway/sessions/[id]/subscribe/route.ts b/app/api/gateway/sessions/[id]/subscribe/route.ts
new file mode 100644
index 0000000..328c44b
--- /dev/null
+++ b/app/api/gateway/sessions/[id]/subscribe/route.ts
@@ -0,0 +1,7 @@
+import { createGatewaySubscribeSegmentHandler } from "@pymthouse/builder-sdk/gateway/server";
+import { readDashboardGatewayConfig } from "@/lib/dashboard/gateway-config.server";
+
+const config = readDashboardGatewayConfig();
+const handler = createGatewaySubscribeSegmentHandler(config);
+
+export const GET = handler;
diff --git a/app/api/gateway/sessions/route.ts b/app/api/gateway/sessions/route.ts
new file mode 100644
index 0000000..59e49cc
--- /dev/null
+++ b/app/api/gateway/sessions/route.ts
@@ -0,0 +1,7 @@
+import { createGatewayStartSessionHandler } from "@pymthouse/builder-sdk/gateway/server";
+import { readDashboardGatewayConfig } from "@/lib/dashboard/gateway-config.server";
+
+const config = readDashboardGatewayConfig();
+const handler = createGatewayStartSessionHandler(config);
+
+export const POST = handler;
diff --git a/app/api/pymthouse/account-usage/route.ts b/app/api/pymthouse/account-usage/route.ts
new file mode 100644
index 0000000..342bb36
--- /dev/null
+++ b/app/api/pymthouse/account-usage/route.ts
@@ -0,0 +1,41 @@
+import { NextRequest, NextResponse } from "next/server";
+import { PmtHouseError } from "@pymthouse/builder-sdk";
+import { fetchAccountUsageForExternalUser } from "@/lib/dashboard/pymthouse-bff";
+
+export const runtime = "nodejs";
+
+export async function GET(request: NextRequest) {
+  const externalUserId = request.nextUrl.searchParams.get("externalUserId")?.trim();
+  if (!externalUserId) {
+    return NextResponse.json(
+      { error: "externalUserId is required" },
+      { status: 400 },
+    );
+  }
+
+  const rawDays = request.nextUrl.searchParams.get("days");
+  const periodDays = rawDays ? Number.parseInt(rawDays, 10) : 30;
+  if (!Number.isFinite(periodDays) || periodDays < 1 || periodDays > 90) {
+    return NextResponse.json(
+      { error: "days must be between 1 and 90" },
+      { status: 400 },
+    );
+  }
+
+  try {
+    const payload = await fetchAccountUsageForExternalUser({
+      externalUserId,
+      periodDays,
+    });
+    return NextResponse.json(payload);
+  } catch (error) {
+    if (error instanceof PmtHouseError) {
+      return NextResponse.json(
+        { error: error.message, code: error.code },
+        { status: error.status },
+      );
+    }
+    const message = error instanceof Error ? error.message : "Usage fetch failed";
+    return NextResponse.json({ error: message }, { status: 502 });
+  }
+}
diff --git a/app/api/pymthouse/keys/exchange/route.ts b/app/api/pymthouse/keys/exchange/route.ts
new file mode 100644
index 0000000..e68196b
--- /dev/null
+++ b/app/api/pymthouse/keys/exchange/route.ts
@@ -0,0 +1,43 @@
+import { createApiKeyExchangeHandler } from "@pymthouse/builder-sdk/signer/server";
+
+function readApiKeyExchangeConfig() {
+  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();
+  const publicClientId =
+    process.env.PYMTHOUSE_PUBLIC_CLIENT_ID?.trim() ||
+    process.env.DASHBOARD_DEVICE_PUBLIC_CLIENT_ID?.trim();
+  if (!issuerUrl || !m2mClientId || !m2mClientSecret || !publicClientId) {
+    return null;
+  }
+  const issuerOrigin = issuerUrl.replace(/\/api\/v1\/oidc\/?$/, "");
+  const signerUrl =
+    process.env.PYMTHOUSE_SIGNER_URL?.trim() ||
+    process.env.SIGNER_PUBLIC_URL?.trim() ||
+    `${issuerOrigin.replace(/\/+$/, "")}/api/signer`;
+  return {
+    issuerUrl,
+    m2mClientId,
+    m2mClientSecret,
+    publicClientId,
+    allowInsecureHttp: process.env.PYMTHOUSE_ALLOW_INSECURE_HTTP === "1",
+    signerUrl,
+  };
+}
+
+export async function POST(request: Request) {
+  const config = readApiKeyExchangeConfig();
+  if (!config) {
+    return Response.json(
+      {
+        error: "server_misconfigured",
+        error_description:
+          "PYMTHOUSE_ISSUER_URL, PYMTHOUSE_PUBLIC_CLIENT_ID, PYMTHOUSE_M2M_CLIENT_ID, and PYMTHOUSE_M2M_CLIENT_SECRET are required",
+      },
+      { status: 503 },
+    );
+  }
+
+  const handler = createApiKeyExchangeHandler(config);
+  return handler(request);
+}
diff --git a/app/api/pymthouse/keys/route.ts b/app/api/pymthouse/keys/route.ts
new file mode 100644
index 0000000..aec5a3b
--- /dev/null
+++ b/app/api/pymthouse/keys/route.ts
@@ -0,0 +1,92 @@
+import { NextRequest, NextResponse } from "next/server";
+import { PmtHouseError } from "@pymthouse/builder-sdk";
+import {
+  createDashboardApiKey,
+  listDashboardApiKeys,
+  revokeDashboardApiKey,
+} from "@/lib/dashboard/pymthouse-keys-bff";
+
+export const runtime = "nodejs";
+
+export async function GET(request: NextRequest) {
+  const externalUserId = request.nextUrl.searchParams.get("externalUserId")?.trim();
+  if (!externalUserId) {
+    return NextResponse.json(
+      { error: "externalUserId is required" },
+      { status: 400 },
+    );
+  }
+
+  try {
+    const keys = await listDashboardApiKeys(externalUserId);
+    return NextResponse.json({ keys });
+  } catch (error) {
+    if (error instanceof PmtHouseError) {
+      return NextResponse.json(
+        { error: error.message, code: error.code },
+        { status: error.status },
+      );
+    }
+    const message = error instanceof Error ? error.message : "Failed to list API keys";
+    return NextResponse.json({ error: message }, { status: 502 });
+  }
+}
+
+export async function POST(request: NextRequest) {
+  let body: { externalUserId?: string; label?: string };
+  try {
+    body = (await request.json()) as typeof body;
+  } catch {
+    return NextResponse.json({ error: "invalid_json" }, { status: 400 });
+  }
+
+  const externalUserId = body.externalUserId?.trim();
+  if (!externalUserId) {
+    return NextResponse.json(
+      { error: "externalUserId is required" },
+      { status: 400 },
+    );
+  }
+
+  try {
+    const created = await createDashboardApiKey({
+      externalUserId,
+      label: body.label,
+    });
+    return NextResponse.json(created, { status: 201 });
+  } catch (error) {
+    if (error instanceof PmtHouseError) {
+      return NextResponse.json(
+        { error: error.message, code: error.code },
+        { status: error.status },
+      );
+    }
+    const message = error instanceof Error ? error.message : "Failed to create API key";
+    return NextResponse.json({ error: message }, { status: 502 });
+  }
+}
+
+export async function DELETE(request: NextRequest) {
+  const externalUserId = request.nextUrl.searchParams.get("externalUserId")?.trim();
+  const keyId = request.nextUrl.searchParams.get("keyId")?.trim();
+  if (!externalUserId || !keyId) {
+    return NextResponse.json(
+      { error: "externalUserId and keyId are required" },
+      { status: 400 },
+    );
+  }
+
+  try {
+    await revokeDashboardApiKey({ externalUserId, keyId });
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    if (error instanceof PmtHouseError) {
+      return NextResponse.json(
+        { error: error.message, code: error.code },
+        { status: error.status },
+      );
+    }
+    const message = error instanceof Error ? error.message : "Failed to revoke API key";
+    return NextResponse.json({ error: message }, { status: 502 });
+  }
+}
diff --git a/app/api/pymthouse/session/signing-token/route.ts b/app/api/pymthouse/session/signing-token/route.ts
new file mode 100644
index 0000000..a187631
--- /dev/null
+++ b/app/api/pymthouse/session/signing-token/route.ts
@@ -0,0 +1,45 @@
+import { NextRequest, NextResponse } from "next/server";
+import { PmtHouseError } from "@pymthouse/builder-sdk";
+import { mintDashboardUserSigningToken } from "@/lib/dashboard/pymthouse-signing-bff";
+
+export const runtime = "nodejs";
+
+export async function POST(request: NextRequest) {
+  let body: { externalUserId?: string; scope?: string };
+  try {
+    body = (await request.json()) as typeof body;
+  } catch {
+    return NextResponse.json({ error: "invalid_json" }, { status: 400 });
+  }
+
+  const externalUserId = body.externalUserId?.trim();
+  if (!externalUserId) {
+    return NextResponse.json(
+      { error: "externalUserId is required" },
+      { status: 400 },
+    );
+  }
+
+  try {
+    const minted = await mintDashboardUserSigningToken({
+      externalUserId,
+      scope: body.scope,
+    });
+    return NextResponse.json(minted, {
+      status: 200,
+      headers: { "Cache-Control": "no-store" },
+    });
+  } catch (error) {
+    if (error instanceof PmtHouseError) {
+      return NextResponse.json(
+        { error: error.code, error_description: error.message },
+        { status: error.status },
+      );
+    }
+    const message = error instanceof Error ? error.message : "Signing token mint failed";
+    return NextResponse.json(
+      { error: "signing_token_mint_failed", error_description: message },
+      { status: 502 },
+    );
+  }
+}
diff --git a/app/api/signer/device/exchange/route.ts b/app/api/signer/device/exchange/route.ts
new file mode 100644
index 0000000..995cb84
--- /dev/null
+++ b/app/api/signer/device/exchange/route.ts
@@ -0,0 +1,39 @@
+import { createDeviceExchangeHandler } from "@pymthouse/builder-sdk/signer/server";
+
+function readDeviceExchangeConfig() {
+  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;
+  }
+  const issuerOrigin = issuerUrl.replace(/\/api\/v1\/oidc\/?$/, "");
+  const signerUrl =
+    process.env.PYMTHOUSE_SIGNER_URL?.trim() ||
+    process.env.SIGNER_PUBLIC_URL?.trim() ||
+    `${issuerOrigin.replace(/\/+$/, "")}/api/signer`;
+  return {
+    issuerUrl,
+    m2mClientId,
+    m2mClientSecret,
+    allowInsecureHttp: process.env.PYMTHOUSE_ALLOW_INSECURE_HTTP === "1",
+    signerUrl,
+  };
+}
+
+export async function POST(request: Request) {
+  const config = readDeviceExchangeConfig();
+  if (!config) {
+    return Response.json(
+      {
+        error: "server_misconfigured",
+        error_description:
+          "PYMTHOUSE_ISSUER_URL, PYMTHOUSE_M2M_CLIENT_ID, and PYMTHOUSE_M2M_CLIENT_SECRET are required",
+      },
+      { status: 503 },
+    );
+  }
+
+  const handler = createDeviceExchangeHandler(config);
+  return handler(request);
+}
diff --git a/components/dashboard/DashboardProviders.tsx b/components/dashboard/DashboardProviders.tsx
new file mode 100644
index 0000000..741f272
--- /dev/null
+++ b/components/dashboard/DashboardProviders.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { AuthProvider } from "@/components/dashboard/AuthContext";
+import { UserSessionProvider } from "@/components/dashboard/UserSessionContext";
+
+/**
+ * Shared client providers for auth + PymtHouse user signing session.
+ * Used by both `(app)` and `(auth)` layouts so a short-lived signing token
+ * is minted as soon as the user session is restored or created.
+ */
+export function DashboardProviders({ children }: { children: ReactNode }) {
+  return (
+    <AuthProvider>
+      <UserSessionProvider>{children}</UserSessionProvider>
+    </AuthProvider>
+  );
+}
diff --git a/components/dashboard/KeysView.tsx b/components/dashboard/KeysView.tsx
index c5152b9..ef2c5b4 100644
--- a/components/dashboard/KeysView.tsx
+++ b/components/dashboard/KeysView.tsx
@@ -7,123 +7,17 @@ import {
   Check,
   ChevronDown,
   Copy,
-  Edit2,
   Key as KeyIcon,
   Lock,
+  Loader2,
   MoreVertical,
   Plus,
-  RotateCw,
-  Settings as SettingsIcon,
   X,
 } from "lucide-react";
 import DashboardPageHeader from "@/components/dashboard/DashboardPageHeader";
-
-// ── Types ───────────────────────────────────────────────────────────────────
-
-type Scope = "restricted" | "admin";
-
-interface KeyRow {
-  id: 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 capabilities, read jobs 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",
-    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",
-    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",
-    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,
-  },
-];
-
-// ── 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>
-  );
-}
+import { useAuth } from "@/components/dashboard/AuthContext";
+import { useApiKeys } from "@/lib/dashboard/useApiKeys";
+import type { DashboardApiKeyRow } from "@/lib/dashboard/pymthouse-keys-bff";
 
 function CopyField({ value }: { value: string }) {
   const [copied, setCopied] = useState(false);
@@ -162,15 +56,44 @@ function CopyField({ value }: { value: string }) {
   );
 }
 
-// ── Main view ───────────────────────────────────────────────────────────────
+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 { user } = useAuth();
+  const externalUserId = user?.email?.trim();
+  const { state, createKey, revokeKey, reload } = useApiKeys(externalUserId);
+
   const [revealedKey, setRevealedKey] = useState<string | 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 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;
     const onClick = (e: MouseEvent) => {
@@ -189,16 +112,35 @@ 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 apiKey = await createKey("Dashboard SDK");
+      setRevealedKey(apiKey);
+    } catch (error) {
+      setActionError(
+        error instanceof Error ? error.message : "Could not create API key",
+      );
+    } finally {
+      setCreating(false);
+    }
   };
 
-  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 (
     <>
@@ -218,10 +160,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>
           </>
@@ -229,25 +176,35 @@ export default function KeysView() {
       />
 
       <div className="mx-auto w-full max-w-[1200px] px-7 pb-20 pt-7">
-        {/* Title */}
         <div className="mb-6">
           <p className="font-mono text-[10.5px] font-medium uppercase tracking-[0.08em] text-fg-disabled">
-            Workspace · Flipbook · Authentication
+            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 jobs against{" "}
-            <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 can be scoped and revoked independently.
+            Long-lived <span className="font-mono text-[12.5px] text-fg-strong">pmth_*</span>{" "}
+            bearer tokens for the SDK and CLI. 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 */}
+        {(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>
+        )}
+
         {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]">
             <div
@@ -297,7 +254,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"
@@ -316,8 +272,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
@@ -331,157 +286,104 @@ 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">Jobs · 7d</div>
             <div>Created</div>
             <div />
           </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="text-[13.5px] font-medium text-fg">
-                    {k.name}
-                    {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>
+          {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>
+          )}
 
-                {/* 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 && (
+            <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>
+          )}
 
-                {/* Jobs · 7d */}
-                <div className="text-right">
-                  <a
-                    href={`/jobs?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 &&
+            keys.map((k) => {
+              const stale = daysSince(k.createdAt) >= ROTATE_DAYS_THRESHOLD;
+              const isOpen = openMenu === 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 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>
+                    <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>
 
-                {/* Created */}
-                <div>
-                  <div className="text-[12.5px] text-fg-strong">{k.created}</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"
-                      >
-                        <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"
+                      <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"
                       >
-                        <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)}
@@ -494,31 +396,25 @@ 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">
+                exchangeApiKeyForSignerSession
+              </span>{" "}
+              with your dashboard origin as{" "}
+              <span className="font-mono text-fg-strong">facadeUrl</span>, or call{" "}
+              <span className="font-mono text-fg-strong">
+                POST /api/pymthouse/keys/exchange
+              </span>{" "}
+              directly. 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/components/dashboard/LoginPage.tsx b/components/dashboard/LoginPage.tsx
index 3ddd7f6..0f4081d 100644
--- a/components/dashboard/LoginPage.tsx
+++ b/components/dashboard/LoginPage.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import { useState } from "react";
+import { Suspense, useState, useEffect, useCallback } from "react";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { motion, AnimatePresence } from "framer-motion";
-import { useAuth, type AuthProvider } from "@/components/dashboard/AuthContext";
+import { useAuth, type AuthProvider, type MockUser } from "@/components/dashboard/AuthContext";
 import { LivepeerWordmark } from "@/components/design-system/LivepeerLogo";
 
 function getInitials(name: string): string {
@@ -65,7 +65,7 @@ interface LoginPageProps {
   initialMode?: "signin" | "signup";
 }
 
-export default function LoginPage({ initialMode = "signin" }: LoginPageProps = {}) {
+function LoginPageContent({ initialMode = "signin" }: LoginPageProps = {}) {
   // Mode is owned by the route, not by local state — sibling pages
   // `/login` and `/signup` re-mount this component
   // with the appropriate `initialMode`. The footer toggle is a `<Link>`
@@ -75,19 +75,78 @@ export default function LoginPage({ initialMode = "signin" }: LoginPageProps = {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [name, setName] = useState("");
-  const { connect } = useAuth();
+  const { connect, isConnected, user } = useAuth();
   const router = useRouter();
+  const searchParams = useSearchParams();
+  const deviceFlow = searchParams.get("flow") === "device";
+  const [deviceError, setDeviceError] = useState<string | null>(null);
+  const [deviceSubmitting, setDeviceSubmitting] = useState(false);
+
+  const finishDeviceFlow = useCallback(
+    async (profile: MockUser) => {
+      setDeviceSubmitting(true);
+      setDeviceError(null);
+      try {
+        const res = await fetch("/api/auth/device/complete", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            externalUserId: profile.email,
+            email: profile.email,
+            name: profile.name,
+          }),
+        });
+        const json = (await res.json().catch(() => ({}))) as {
+          success?: boolean;
+          redirectTo?: string;
+          error_description?: string;
+          error?: string;
+        };
+        if (!res.ok || !json.success) {
+          throw new Error(
+            json.error_description ||
+              json.error ||
+              "Could not complete device approval with Pymthouse.",
+          );
+        }
+        router.push(json.redirectTo || "/device-approved");
+      } catch (err) {
+        setDeviceError(
+          err instanceof Error ? err.message : "Device approval failed.",
+        );
+        setDeviceSubmitting(false);
+      }
+    },
+    [router],
+  );
+
+  useEffect(() => {
+    if (deviceFlow && isConnected && user && !deviceSubmitting) {
+      void finishDeviceFlow(user);
+    }
+  }, [deviceFlow, isConnected, user, deviceSubmitting, finishDeviceFlow]);
+
+  async function afterAuth(profile: MockUser) {
+    if (deviceFlow) {
+      setDeviceSubmitting(true);
+    }
+    connect(profile);
+    if (deviceFlow) {
+      await finishDeviceFlow(profile);
+      return;
+    }
+    router.push("/home");
+  }
 
   function handleEmailSubmit(e?: React.FormEvent) {
     e?.preventDefault();
     const displayName = name || email.split("@")[0] || "Demo User";
-    connect({
+    void afterAuth({
       name: displayName,
       email: email || "demo@livepeer.org",
       initials: getInitials(displayName),
       provider: "email",
     });
-    router.push("/home");
   }
 
   function handleOAuthSubmit(provider: AuthProvider) {
@@ -97,13 +156,20 @@ export default function LoginPage({ initialMode = "signin" }: LoginPageProps = {
       google: { name: "Rick Staa", email: "rick.staa@gmail.com" },
     };
     const profile = mockProfiles[provider as "github" | "google"];
-    connect({
+    void afterAuth({
       name: profile.name,
       email: profile.email,
       initials: getInitials(profile.name),
       provider,
     });
-    router.push("/home");
+  }
+
+  if (deviceFlow && deviceSubmitting) {
+    return (
+      <div className="flex min-h-screen flex-col items-center justify-center bg-dark px-6">
+        <p className="text-sm text-fg-muted">Approving device login…</p>
+      </div>
+    );
   }
 
   // Each surface is built from a tight 3-weight hierarchy:
@@ -154,6 +220,16 @@ export default function LoginPage({ initialMode = "signin" }: LoginPageProps = {
             </motion.h1>
           </AnimatePresence>
 
+          {deviceFlow && (
+            <p className="mt-3 text-center text-sm text-fg-muted">
+              Complete sign-in to approve your pending device login.
+            </p>
+          )}
+
+          {deviceError && (
+            <p className="mt-3 text-center text-sm text-red">{deviceError}</p>
+          )}
+
           {/* OAuth — restrained pills, equal hierarchy, no Popular badge clutter */}
           <div className="mt-8 space-y-2">
             <button
@@ -345,3 +421,11 @@ export default function LoginPage({ initialMode = "signin" }: LoginPageProps = {
     </div>
   );
 }
+
+export default function LoginPage(props: LoginPageProps) {
+  return (
+    <Suspense fallback={null}>
+      <LoginPageContent {...props} />
+    </Suspense>
+  );
+}
diff --git a/components/dashboard/SidebarUsageCard.tsx b/components/dashboard/SidebarUsageCard.tsx
index 5a03665..6742be5 100644
--- a/components/dashboard/SidebarUsageCard.tsx
+++ b/components/dashboard/SidebarUsageCard.tsx
@@ -1,76 +1,126 @@
 "use client";
 
+import type { ReactNode } from "react";
 import Link from "next/link";
-import { ACCOUNT_USAGE_SUMMARY } from "@/lib/dashboard/mock-data";
+import { useAuth } from "@/components/dashboard/AuthContext";
+import { useAccountUsage } from "@/lib/dashboard/useAccountUsage";
+import {
+  formatPeriodResetLabel,
+  microsToUsdDisplay,
+} from "@/lib/dashboard/usage-capability-display";
+
+function fmtCompact(n: number): string {
+  if (n >= 1000) return `${(n / 1000).toFixed(n >= 10000 ? 0 : 1)}K`;
+  return n.toString();
+}
 
 /**
  * SidebarUsageCard — bottom-of-sidebar plan + usage indicator.
  *
- * Per the Livepeer Console design v2 (Apr 2026, `.side-usage` in styles.css):
- * compact bordered card placed between the sidebar's flex spacer and the
- * footer (Network / Docs / Settings + status row). Clicking it routes to the
- * Usage page. Active state when on that route.
- *
- * Visual spec (exact):
- *   - margin 8px 4px 0; padding 9px 10px 8px; border-radius var(--r-md)
- *   - 1px hairline border, bg dark-lighter; hover: border-2 + bg dark-card
- *   - Active: border-green + green-soft tint
- *   - Top row: mono uppercase "Free tier" label · mono 12px "8.7K / 10K"
- *   - 4px gradient bar (lp → lp-bright) at exact pct fill
- *   - Bottom row: "{pct}% used" left · mono "resets {window}" right
+ * Data comes from PymtHouse (OpenMeter) via `/api/pymthouse/account-usage`.
  */
 export default function SidebarUsageCard() {
-  const used = ACCOUNT_USAGE_SUMMARY.freeTierUsed;
-  const limit = ACCOUNT_USAGE_SUMMARY.freeTierLimit;
-  const pct = Math.min(100, (used / limit) * 100);
-  const pctDisplay = pct >= 10 ? pct.toFixed(0) : pct.toFixed(2);
+  const { user } = useAuth();
+  const usage = useAccountUsage(user?.email?.trim(), 30);
+
+  if (usage.status === "loading" || usage.status === "idle") {
+    return (
+      <div
+        className="mx-1 mt-2 block animate-pulse rounded-md border border-subtle bg-sidebar-card-bg px-2.5 py-2"
+        aria-hidden="true"
+      >
+        <div className="h-3 w-24 rounded bg-tint" />
+        <div className="my-1.5 h-1 rounded bg-tint" />
+        <div className="h-2.5 w-full rounded bg-tint" />
+      </div>
+    );
+  }
 
-  function fmt(n: number): string {
-    if (n >= 1000) return `${(n / 1000).toFixed(n >= 10000 ? 0 : 1)}K`;
-    return n.toString();
+  if (usage.status === "error") {
+    return (
+      <Link
+        href="/usage"
+        title="Open usage details"
+        className="mx-1 mt-2 block rounded-md border border-subtle bg-sidebar-card-bg px-2.5 py-2 transition-colors hover:bg-sidebar-card-bg-hover"
+      >
+        <span className="font-mono text-[10.5px] text-fg-faint">Usage unavailable</span>
+      </Link>
+    );
   }
 
-  const baseClass =
-    "block mt-2 mx-1 rounded-md border px-2.5 py-2 transition-colors";
-  // The card stays visually stable across routes. The original design
-  // prototype had an active-state (green tint) when on /usage,
-  // but in practice the green competes with the in-card progress bar
-  // and duplicates the main-nav active highlight. Cleaner to keep this
-  // a stable usage widget; route-active feedback lives on the Usage nav
-  // item in the primary rail.
-  const stateClass =
-    "border-subtle bg-sidebar-card-bg hover:bg-sidebar-card-bg-hover";
+  const { data } = usage;
+  const balance = data.balance;
+  const showUsdAllowance =
+    balance && BigInt(balance.lifetimeGrantedUsdMicros || "0") > BigInt(0);
+
+  const resetsAt = formatPeriodResetLabel(data.period.end);
+  const planLabel = showUsdAllowance ? "Starter" : "Usage";
+
+  let primaryUsed: number;
+  let primaryLimit: number | null;
+  let primaryDisplay: ReactNode;
+
+  if (showUsdAllowance && balance) {
+    const granted = BigInt(balance.lifetimeGrantedUsdMicros || "1");
+    const consumed = BigInt(balance.consumedUsdMicros || "0");
+    primaryUsed = Number((consumed * BigInt(10000)) / granted) / 100;
+    primaryLimit = 100;
+    primaryDisplay = (
+      <>
+        <b className="font-medium text-fg">${microsToUsdDisplay(balance.balanceUsdMicros)}</b>
+        <span className="text-fg-faint"> / ${microsToUsdDisplay(balance.lifetimeGrantedUsdMicros)}</span>
+      </>
+    );
+  } else {
+    const used = data.current.requestCount;
+    const limit = 10_000;
+    primaryUsed = used;
+    primaryLimit = limit;
+    primaryDisplay = (
+      <>
+        <b className="font-medium text-fg">{fmtCompact(used)}</b>
+        <span className="text-fg-faint"> / {fmtCompact(limit)}</span>
+      </>
+    );
+  }
+
+  const pct =
+    primaryLimit && primaryLimit > 0
+      ? Math.min(100, (primaryUsed / primaryLimit) * 100)
+      : 0;
+  const pctDisplay = pct >= 10 ? pct.toFixed(0) : pct.toFixed(2);
 
   return (
     <Link
       href="/usage"
       title="Open usage details"
-      className={`${baseClass} ${stateClass}`}
+      className="mx-1 mt-2 block rounded-md border border-subtle bg-sidebar-card-bg px-2.5 py-2 transition-colors hover:bg-sidebar-card-bg-hover"
     >
       <div className="flex items-baseline justify-between gap-2">
         <span className="font-mono text-[10.5px] uppercase tracking-[0.06em] text-fg-faint">
-          Free tier
-        </span>
-        <span className="font-mono text-[12px] tabular-nums text-fg-strong">
-          <b className="font-medium text-fg">{fmt(used)}</b>
-          <span className="text-fg-faint"> / {fmt(limit)}</span>
+          {planLabel}
         </span>
+        <span className="font-mono text-[12px] tabular-nums text-fg-strong">{primaryDisplay}</span>
       </div>
       <div
         className="my-1.5 h-1 overflow-hidden rounded-[2px] bg-tint"
         aria-hidden="true"
       >
         <div
-          className="h-full rounded-[2px] bg-gradient-to-r from-green to-green-bright"
+          className={`h-full rounded-[2px] ${
+            balance && !balance.hasAccess
+              ? "bg-warm"
+              : "bg-gradient-to-r from-green to-green-bright"
+          }`}
           style={{ width: `${pct}%` }}
         />
       </div>
       <div className="flex items-baseline justify-between gap-2">
         <span className="font-mono text-[10.5px] tracking-[0.02em] text-fg-faint">
-          {pctDisplay}% used
+          {showUsdAllowance ? "remaining" : `${pctDisplay}% used`}
         </span>
         <span className="font-mono text-[10.5px] tracking-[0.02em] text-fg-faint">
-          resets {ACCOUNT_USAGE_SUMMARY.freeTierResetIn}
+          resets {resetsAt}
         </span>
       </div>
     </Link>
diff --git a/components/dashboard/SignerSessionContext.tsx b/components/dashboard/SignerSessionContext.tsx
new file mode 100644
index 0000000..0def9fb
--- /dev/null
+++ b/components/dashboard/SignerSessionContext.tsx
@@ -0,0 +1,7 @@
+/** @deprecated Import from `@/components/dashboard/UserSessionContext` */
+export {
+  SignerSessionProvider,
+  useSignerSession,
+  UserSessionProvider,
+  useUserSession,
+} from "@/components/dashboard/UserSessionContext";
diff --git a/components/dashboard/UsageView.tsx b/components/dashboard/UsageView.tsx
index a99a513..1d5c31d 100644
--- a/components/dashboard/UsageView.tsx
+++ b/components/dashboard/UsageView.tsx
@@ -1,138 +1,161 @@
 "use client";
 
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import Link from "next/link";
-import StackedAreaChart, {
-  MiniSpark,
-  genCapSeries,
-} from "@/components/dashboard/StackedAreaChart";
-
-/**
- * UsageView — full Usage page body per the Livepeer Dashboard design v3
- * (Apr 2026, `usage-view.jsx`). Single horizontal free-tier strip + a stacked
- * "Jobs by capability" chart + a per-capability breakdown table (with delta vs
- * prior period and inline sparklines) + a Limits panel.
- *
- * Mocks 60 days of per-capability data so we can compute "this period vs prior
- * period" without flicker. The forecast tick on the bar projects from the
- * trailing 7-day average over the days remaining in the current period.
- */
-
-const FREE_LIMIT = 10_000;
-const FREE_USED = 8_796;
-const DAYS_LEFT_IN_PERIOD = 6;
-const PERIOD_LABEL = "30 days";
+import StackedAreaChart, { MiniSpark } from "@/components/dashboard/StackedAreaChart";
+import Button from "@/components/design-system/Button";
+import { useAuth } from "@/components/dashboard/AuthContext";
+import { useAccountUsage } from "@/lib/dashboard/useAccountUsage";
+import {
+  buildUsageCapabilityRows,
+  formatPeriodResetLabel,
+  microsToUsdDisplay,
+  type UsageCapabilityRow,
+} from "@/lib/dashboard/usage-capability-display";
+import DashboardPageSkeleton from "@/components/dashboard/DashboardPageSkeleton";
+
 const PERIOD_DAYS = 30;
-const RESETS_AT = "May 1";
-
-type Capability = {
-  id: string;
-  name: string;
-  unit: string;
-  price: number;
-  color: string;
-  base: number;
-  drift: number;
-  noise: number;
-};
-
-// Per-capability colors picked at matched lightness/chroma so no one swatch
-// dominates the legend (per Linear dashboard best practices §2).
-const CAPABILITIES: Capability[] = [
-  { id: "daydream",  name: "Daydream Video",      unit: "sec",  price: 0.012,   color: "#4ade80", base: 180, drift: 1.8, noise: 0.3 },
-  { id: "transcode", name: "Livepeer Transcode",  unit: "min",  price: 0.0006,  color: "#38bdf8", base: 120, drift: 1.4, noise: 0.3 },
-  { id: "flux",      name: "FLUX [schnell]",      unit: "img",  price: 0.003,   color: "#a78bfa", base: 80,  drift: 1.6, noise: 0.4 },
-  { id: "whisper",   name: "Whisper v3",          unit: "min",  price: 0.001,   color: "#fb923c", base: 40,  drift: 1.2, noise: 0.5 },
-  { id: "sdxl",      name: "SDXL Turbo",          unit: "img",  price: 0.002,   color: "#f472b6", base: 22,  drift: 1.1, noise: 0.6 },
-];
 
 function fmt(n: number): string {
   return Math.round(n).toLocaleString("en-US");
 }
+
 function fmtSpend(n: number): string {
   return `$${n.toFixed(2)}`;
 }
 
-// ── Free-tier strip ─────────────────────────────────────────────────────────
+function UsageLoadError({ message, onRetry }: { message: string; onRetry: () => void }) {
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center px-5 py-24 text-center">
+      <p className="text-sm text-fg-muted">Could not load usage from PymtHouse.</p>
+      <p className="mt-2 max-w-md font-mono text-xs text-fg-faint">{message}</p>
+      <Button className="mt-6" variant="secondary" size="sm" onClick={onRetry}>
+        Retry
+      </Button>
+    </div>
+  );
+}
 
-function UsageStrip({
+function AllowanceStrip({
+  requestCount,
+  requestLimit,
+  balanceUsdMicros,
+  grantedUsdMicros,
+  consumedUsdMicros,
+  hasAccess,
   forecast,
   willExceed,
   daysToLimit,
-  priorPeriodTotal,
+  priorRequestCount,
   periodDelta,
+  resetsAt,
 }: {
+  requestCount: number;
+  requestLimit: number | null;
+  balanceUsdMicros: string | null;
+  grantedUsdMicros: string | null;
+  consumedUsdMicros: string | null;
+  hasAccess: boolean;
   forecast: number;
   willExceed: boolean;
   daysToLimit: number;
-  priorPeriodTotal: number;
+  priorRequestCount: number;
   periodDelta: number;
+  resetsAt: string;
 }) {
-  const left = FREE_LIMIT - FREE_USED;
-  const pct = Math.min(100, (FREE_USED / FREE_LIMIT) * 100);
-  const forecastPct = Math.min(100, (forecast / FREE_LIMIT) * 100);
+  const showUsdAllowance = grantedUsdMicros && BigInt(grantedUsdMicros) > BigInt(0);
+  const usedUsd = consumedUsdMicros ?? "0";
+  const granted = grantedUsdMicros ?? "0";
+  const remaining = balanceUsdMicros ?? "0";
+
+  const usedForBar = showUsdAllowance
+    ? Number((BigInt(usedUsd) * BigInt(10000)) / BigInt(granted || "1"))
+    : requestLimit
+      ? (requestCount / requestLimit) * 100
+      : 0;
+  const pct = Math.min(100, usedForBar);
+  const forecastPct = requestLimit
+    ? Math.min(100, (forecast / requestLimit) * 100)
+    : pct;
 
   return (
     <div className="flex flex-col gap-3 rounded-md border border-hairline bg-dark-lighter shadow-card px-5 py-4">
-      <p className="font-mono text-[10.5px] font-medium uppercase tracking-[0.06em] text-fg-faint">
-        Free tier
-      </p>
+      <div className="flex flex-wrap items-center gap-2">
+        <p className="font-mono text-[10.5px] font-medium uppercase tracking-[0.06em] text-fg-faint">
+          {showUsdAllowance ? "Starter allowance" : "Usage this period"}
+        </p>
+        {showUsdAllowance && !hasAccess && (
+          <span className="rounded-[3px] border border-warm/30 bg-warm/10 px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-wide text-warm">
+            Exhausted
+          </span>
+        )}
+      </div>
       <div className="flex flex-wrap items-baseline gap-3">
-        <span className="font-mono text-[15px] tabular-nums leading-none text-fg-muted">
-          <b className="mr-0.5 text-[24px] font-medium tracking-[-0.01em] text-fg">
-            {fmt(FREE_USED)}
-          </b>
-          <span className="text-fg-faint"> / {fmt(FREE_LIMIT)} jobs</span>
-        </span>
+        {showUsdAllowance ? (
+          <span className="font-mono text-[15px] tabular-nums leading-none text-fg-muted">
+            <b className="mr-0.5 text-[24px] font-medium tracking-[-0.01em] text-fg">
+              ${microsToUsdDisplay(remaining)}
+            </b>
+            <span className="text-fg-faint"> / ${microsToUsdDisplay(granted)} remaining</span>
+          </span>
+        ) : requestLimit ? (
+          <span className="font-mono text-[15px] tabular-nums leading-none text-fg-muted">
+            <b className="mr-0.5 text-[24px] font-medium tracking-[-0.01em] text-fg">
+              {fmt(requestCount)}
+            </b>
+            <span className="text-fg-faint"> / {fmt(requestLimit)} jobs</span>
+          </span>
+        ) : (
+          <span className="font-mono text-[24px] font-medium tabular-nums text-fg">
+            {fmt(requestCount)}
+          </span>
+        )}
         <span className="ml-auto font-mono text-[11.5px] text-fg-faint">
-          resets {RESETS_AT}
+          resets {resetsAt}
         </span>
       </div>
 
-      {/* Bar with forecast tick */}
-      <div className="relative h-1.5 rounded-[3px] bg-dark-card">
-        <div
-          className="h-full rounded-[3px] bg-gradient-to-r from-green to-green-bright"
-          style={{ width: `${pct}%` }}
-        />
-        <div
-          className="absolute -top-0.5 -bottom-0.5 w-px"
-          style={{
-            left: `${forecastPct}%`,
-            background: "rgba(251,191,36,0.55)",
-            transform: "translateX(-0.5px)",
-          }}
-          title={`Forecast ${fmt(forecast)} by ${RESETS_AT}`}
-          aria-hidden="true"
-        >
-          <span
-            className="absolute -top-1 h-1 w-1 rounded-full"
-            style={{
-              left: -1.5,
-              right: -1.5,
-              background: "rgba(251,191,36,0.7)",
-            }}
+      {(showUsdAllowance || requestLimit) && (
+        <div className="relative h-1.5 rounded-[3px] bg-dark-card">
+          <div
+            className={`h-full rounded-[3px] ${
+              hasAccess ? "bg-gradient-to-r from-green to-green-bright" : "bg-warm"
+            }`}
+            style={{ width: `${pct}%` }}
           />
+          {requestLimit && (
+            <div
+              className="absolute -top-0.5 -bottom-0.5 w-px"
+              style={{
+                left: `${forecastPct}%`,
+                background: "rgba(251,191,36,0.55)",
+                transform: "translateX(-0.5px)",
+              }}
+              aria-hidden="true"
+            />
+          )}
         </div>
-      </div>
+      )}
 
       <div className="flex flex-wrap items-baseline justify-between gap-4 text-[12px] text-fg-muted">
-        {willExceed ? (
+        {requestLimit && willExceed ? (
           <span className="font-mono">
-            Forecast{" "}
-            <b className="font-medium text-fg">{fmt(forecast)}</b>
-            {" "}by {RESETS_AT} · over limit in{" "}
-            <b className="font-medium text-warm">~{daysToLimit}d</b>
+            Forecast <b className="font-medium text-fg">{fmt(forecast)}</b> jobs by {resetsAt} ·
+            over limit in <b className="font-medium text-warm">~{daysToLimit}d</b>
           </span>
         ) : (
           <span className="font-mono">
-            <b className="font-medium text-fg">{fmt(left)}</b> jobs left ·
-            pace looks fine.
+            <b className="font-medium text-fg">{fmt(requestCount)}</b> signed requests this period
+            {showUsdAllowance && (
+              <>
+                {" "}
+                · <b className="font-medium text-fg">${microsToUsdDisplay(usedUsd)}</b> consumed
+              </>
+            )}
           </span>
         )}
         <span className="font-mono text-[11.5px] text-fg-faint">
-          Last period {fmt(priorPeriodTotal)} ·{" "}
-          {periodDelta >= 0 ? "+" : ""}
+          Last period {fmt(priorRequestCount)} · {periodDelta >= 0 ? "+" : ""}
           {periodDelta.toFixed(0)}%
         </span>
       </div>
@@ -140,131 +163,133 @@ function UsageStrip({
   );
 }
 
-// ── Main view ───────────────────────────────────────────────────────────────
-
 export default function UsageView() {
-  // 60-day series so we can split into "this period" + "prior period". Stable
-  // per mount via useMemo — random noise mustn't flicker between renders.
-  const caps = useMemo(
-    () =>
-      CAPABILITIES.map((c) => ({
-        ...c,
-        data60: genCapSeries(c.base, c.drift, c.noise, 60),
-      })),
-    [],
+  const { user } = useAuth();
+  const externalUserId = user?.email?.trim();
+  const usageState = useAccountUsage(externalUserId, PERIOD_DAYS);
+  const [priceMin, setPriceMin] = useState(0);
+  const [priceMax, setPriceMax] = useState(100);
+
+  const capabilityRows = useMemo(() => {
+    if (usageState.status !== "ready") return [];
+    return buildUsageCapabilityRows({
+      current: usageState.data.current.pipelineModels,
+      prior: usageState.data.prior.pipelineModels,
+      periodDays: PERIOD_DAYS,
+    });
+  }, [usageState]);
+
+  const dataMaxSpend = useMemo(
+    () => Math.max(...capabilityRows.map((c) => c.spendUsd), 0.01),
+    [capabilityRows],
   );
 
-  const sliced = caps.map((c) => ({
-    ...c,
-    data: c.data60.slice(-PERIOD_DAYS),
-    prior: c.data60.slice(-PERIOD_DAYS * 2, -PERIOD_DAYS),
-  }));
-
-  const totals = sliced.map((c) => {
-    const sum = c.data.reduce((a, b) => a + b, 0);
-    const priorSum = c.prior.reduce((a, b) => a + b, 0);
-    const delta = priorSum > 0 ? ((sum - priorSum) / priorSum) * 100 : 0;
-    return { ...c, sum, priorSum, delta, spend: sum * c.price };
-  });
-  const grandReq = totals.reduce((a, c) => a + c.sum, 0);
-  const grandSpend = totals.reduce((a, c) => a + c.spend, 0);
-  const totalsByDay = sliced[0].data.map((_, i) =>
-    sliced.reduce((a, c) => a + c.data[i], 0),
-  );
-  const priorTotalsByDay = sliced[0].prior.map((_, i) =>
-    sliced.reduce((a, c) => a + c.prior[i], 0),
-  );
-  const priorPeriodTotal = Math.round(
-    priorTotalsByDay.reduce((a, b) => a + b, 0),
-  );
-  const periodDelta =
-    priorPeriodTotal > 0
-      ? ((FREE_USED - priorPeriodTotal) / priorPeriodTotal) * 100
-      : 0;
+  const filteredRows = useMemo(() => {
+    return capabilityRows.filter((c) => {
+      const matchesPrice =
+        c.spendUsd >= (priceMin / 100) * dataMaxSpend &&
+        c.spendUsd <= (priceMax / 100) * dataMaxSpend;
+      return matchesPrice;
+    });
+  }, [capabilityRows, priceMin, priceMax, dataMaxSpend]);
+
+  const forecastStats = useMemo(() => {
+    if (usageState.status !== "ready") {
+      return {
+        forecast: 0,
+        willExceed: false,
+        daysToLimit: 0,
+        priorRequestCount: 0,
+        periodDelta: 0,
+        requestCount: 0,
+      };
+    }
+    const { current, prior } = usageState.data;
+    const totalsByDay = Array.from({ length: PERIOD_DAYS }, (_, dayIndex) =>
+      capabilityRows.reduce((sum, row) => sum + (row.data[dayIndex] ?? 0), 0),
+    );
+    const last7Avg =
+      totalsByDay.slice(-7).reduce((a, b) => a + b, 0) / Math.max(1, Math.min(7, totalsByDay.length));
+    const daysLeft = 6;
+    const forecast = Math.round(current.requestCount + last7Avg * daysLeft);
+    const grantedJobs = usageState.data.balance?.lifetimeGrantedUsdMicros
+      ? null
+      : 10_000;
+    const limit = grantedJobs ?? 10_000;
+    const willExceed = forecast > limit;
+    const left = limit - current.requestCount;
+    const daysToLimit =
+      left > 0 && last7Avg > 0 ? Math.max(0, Math.floor(left / last7Avg)) : 0;
+    const priorRequestCount = prior.requestCount;
+    const periodDelta =
+      priorRequestCount > 0
+        ? ((current.requestCount - priorRequestCount) / priorRequestCount) * 100
+        : 0;
+
+    return {
+      forecast,
+      willExceed,
+      daysToLimit,
+      priorRequestCount,
+      periodDelta,
+      requestCount: current.requestCount,
+    };
+  }, [usageState, capabilityRows]);
+
+  if (usageState.status === "loading" || usageState.status === "idle") {
+    return (
+      <div className="mx-auto w-full max-w-[1200px] px-7 pb-20 pt-7">
+        <DashboardPageSkeleton maxWidth="6xl" withTabs={false} kpiCount={0} withChart />
+      </div>
+    );
+  }
 
-  // Forecast: trailing 7-day average × days remaining in period
-  const last7Avg =
-    totalsByDay.slice(-7).reduce((a, b) => a + b, 0) / 7;
-  const forecast = Math.round(FREE_USED + last7Avg * DAYS_LEFT_IN_PERIOD);
-  const willExceed = forecast > FREE_LIMIT;
-  const left = FREE_LIMIT - FREE_USED;
-  const daysToLimit =
-    left > 0 && last7Avg > 0 ? Math.max(0, Math.floor(left / last7Avg)) : 0;
-
-  // Breakdown table — sorted descending by total runs
-  const sortedTotals = [...totals].sort((a, b) => b.sum - a.sum);
-
-  // Limits — same shape as design
-  const limits: {
-    label: string;
-    used: number;
-    max: number;
-    fmt: (v: number) => string;
-  }[] = [
-    {
-      label: "Jobs / month",
-      used: FREE_USED,
-      max: FREE_LIMIT,
-      fmt: (v) => v.toLocaleString("en-US"),
-    },
-    {
-      label: "Concurrent streams",
-      used: 2,
-      max: 3,
-      fmt: (v) => String(v),
-    },
-    {
-      label: "Max video duration",
-      used: 4,
-      max: 5,
-      fmt: (v) => `${v} min`,
-    },
-    {
-      label: "Storage retained",
-      used: 1.2,
-      max: 5,
-      fmt: (v) => `${v} GB`,
-    },
-  ];
+  if (usageState.status === "error") {
+    return (
+      <div className="mx-auto w-full max-w-[1200px] px-7 pb-20 pt-7">
+        <UsageLoadError message={usageState.message} onRetry={usageState.reload} />
+      </div>
+    );
+  }
+
+  const { data } = usageState;
+  const grandReq = filteredRows.reduce((a, c) => a + c.requestCount, 0);
+  const grandSpend = filteredRows.reduce((a, c) => a + c.spendUsd, 0);
+  const resetsAt = formatPeriodResetLabel(data.period.end);
+  const grantedMicros = data.balance?.lifetimeGrantedUsdMicros ?? null;
 
   return (
     <div className="mx-auto w-full max-w-[1200px] px-7 pb-20 pt-7">
-      {/* Title */}
-      <div className="mb-6">
-        <p className="font-mono text-[10.5px] font-medium uppercase tracking-[0.08em] text-fg-disabled">
-          Workspace · Flipbook
-        </p>
-        <h1 className="mt-1 text-[22px] font-semibold tracking-[-0.02em] text-fg">
-          Usage
-        </h1>
-      </div>
+      <p className="mb-6 font-mono text-[10.5px] font-medium uppercase tracking-[0.08em] text-fg-disabled">
+        Account · {externalUserId}
+      </p>
 
-      {/* Free-tier strip */}
-      <UsageStrip
-        forecast={forecast}
-        willExceed={willExceed}
-        daysToLimit={daysToLimit}
-        priorPeriodTotal={priorPeriodTotal}
-        periodDelta={periodDelta}
+      <AllowanceStrip
+        requestCount={forecastStats.requestCount}
+        requestLimit={grantedMicros ? null : 10_000}
+        balanceUsdMicros={data.balance?.balanceUsdMicros ?? null}
+        grantedUsdMicros={grantedMicros}
+        consumedUsdMicros={data.balance?.consumedUsdMicros ?? null}
+        hasAccess={data.balance?.hasAccess ?? true}
+        forecast={forecastStats.forecast}
+        willExceed={forecastStats.willExceed}
+        daysToLimit={forecastStats.daysToLimit}
+        priorRequestCount={forecastStats.priorRequestCount}
+        periodDelta={forecastStats.periodDelta}
+        resetsAt={resetsAt}
       />
 
-      {/* Jobs by capability — stacked area */}
       <div className="mt-4 overflow-hidden rounded-md border border-hairline bg-dark-lighter shadow-card">
         <div className="flex flex-wrap items-start justify-between gap-3 border-b border-hairline px-4 py-3.5">
           <div>
-            <p className="text-[17px] font-bold text-fg">
-              Jobs by capability
-            </p>
+            <p className="text-[17px] font-bold text-fg">Jobs by capability</p>
             <p className="mt-0.5 text-[12px] text-fg-muted">
-              Last {PERIOD_LABEL.toLowerCase()} · {fmt(grandReq)} jobs
+              Last {PERIOD_DAYS} days · {fmt(data.current.requestCount)} jobs · OpenMeter
             </p>
           </div>
           <div className="flex flex-wrap gap-3.5 justify-end text-[11.5px] text-fg-muted">
-            {sortedTotals.map((c) => (
-              <span
-                key={c.id}
-                className="inline-flex items-center gap-1.5"
-              >
+            {filteredRows.map((c) => (
+              <span key={c.id} className="inline-flex items-center gap-1.5">
                 <span
                   className="h-2 w-2 rounded-[2px]"
                   style={{ background: c.color }}
@@ -276,95 +301,98 @@ export default function UsageView() {
           </div>
         </div>
         <div className="px-3 pt-2 pb-1">
-          <StackedAreaChart
-            series={sliced.map((c) => ({ name: c.name, data: c.data }))}
-            colors={sliced.map((c) => c.color)}
-          />
+          {filteredRows.length > 0 ? (
+            <StackedAreaChart
+              series={filteredRows.map((c) => ({ name: c.name, data: c.data }))}
+              colors={filteredRows.map((c) => c.color)}
+            />
+          ) : (
+            <p className="py-12 text-center text-sm text-fg-faint">No usage in this period.</p>
+          )}
         </div>
       </div>
 
-      {/* Breakdown table */}
+      <BreakdownSection
+        rows={filteredRows}
+        grandReq={grandReq}
+        grandSpend={grandSpend}
+        priceMin={priceMin}
+        priceMax={priceMax}
+        dataMaxSpend={dataMaxSpend}
+        onPriceChange={(min, max) => {
+          setPriceMin(min);
+          setPriceMax(max);
+        }}
+        allRows={capabilityRows}
+      />
+
+      <LimitsPanel
+        balance={data.balance}
+        networkFeeUsdMicros={data.current.networkFeeUsdMicros}
+        endUserBillableUsdMicros={data.current.endUserBillableUsdMicros}
+        requestCount={data.current.requestCount}
+      />
+    </div>
+  );
+}
+
+function BreakdownSection({
+  rows,
+  grandReq,
+  grandSpend,
+  priceMin,
+  priceMax,
+  dataMaxSpend,
+  onPriceChange,
+  allRows,
+}: {
+  rows: UsageCapabilityRow[];
+  grandReq: number;
+  grandSpend: number;
+  priceMin: number;
+  priceMax: number;
+  dataMaxSpend: number;
+  onPriceChange: (min: number, max: number) => void;
+  allRows: UsageCapabilityRow[];
+}) {
+  return (
+    <>
       <div className="mt-7 mb-2.5 flex items-center gap-2">
         <span className="font-mono text-[11px] font-medium uppercase tracking-[0.08em] text-fg-faint">
           Breakdown
         </span>
         <span className="rounded-full border border-hairline bg-dark-card px-1.5 py-px font-mono text-[10.5px] text-fg-faint">
-          {totals.length}
+          {rows.length}
         </span>
       </div>
-      <BreakdownTable
-        rows={sortedTotals}
-        grandReq={grandReq}
-        grandSpend={grandSpend}
-      />
-
-      {/* Limits */}
-      <div className="mt-4 overflow-hidden rounded-md border border-hairline bg-dark-lighter shadow-card">
-        <div className="flex flex-wrap items-start justify-between gap-3 border-b border-hairline px-4 py-3.5">
-          <div>
-            <p className="text-[17px] font-bold text-fg">Limits</p>
-            <p className="mt-0.5 text-[12px] text-fg-muted">
-              Free tier defaults · raise after adding payment
-            </p>
-          </div>
-          <Link
-            href="/settings?tab=billing"
-            className="inline-flex h-[26px] items-center gap-1.5 rounded-[4px] border border-hairline bg-dark-card px-2.5 text-[12px] text-fg-strong transition-colors hover:border-subtle hover:text-fg"
+      <BreakdownTable rows={rows} grandReq={grandReq} grandSpend={grandSpend} />
+      {allRows.length > 0 && (
+        <p className="mt-2 text-[10px] text-fg-disabled">
+          Spend filter: ${((priceMin / 100) * dataMaxSpend).toFixed(3)} – $
+          {((priceMax / 100) * dataMaxSpend).toFixed(3)} (
+          <button
+            type="button"
+            className="underline hover:text-fg-muted"
+            onClick={() => onPriceChange(0, 100)}
           >
-            Compare plans
-          </Link>
-        </div>
-        <div className="py-1">
-          {limits.map((l) => {
-            const pct = Math.min(100, (l.used / l.max) * 100);
-            const overWarn = pct > 80;
-            return (
-              <div
-                key={l.label}
-                className="border-b border-hairline px-4 py-2.5 last:border-b-0"
-              >
-                <div className="mb-1.5 flex items-baseline justify-between gap-2">
-                  <span className="text-[13px] text-fg-strong">{l.label}</span>
-                  <span className="font-mono text-[12px] tabular-nums text-fg-faint">
-                    <b className="font-medium text-fg">{l.fmt(l.used)}</b>
-                    <span className="text-fg-disabled"> / {l.fmt(l.max)}</span>
-                  </span>
-                </div>
-                <div className="h-1 overflow-hidden rounded-[2px] bg-dark-card">
-                  <div
-                    className="h-full rounded-[2px]"
-                    style={{
-                      width: `${pct}%`,
-                      background: overWarn ? "#fbbf24" : "#40bf86",
-                    }}
-                  />
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    </div>
+            reset
+          </button>
+          )
+        </p>
+      )}
+    </>
   );
 }
 
-// ── Breakdown table ─────────────────────────────────────────────────────────
-
 function BreakdownTable({
   rows,
   grandReq,
   grandSpend,
 }: {
-  rows: (Capability & {
-    sum: number;
-    delta: number;
-    spend: number;
-    data: number[];
-  })[];
+  rows: UsageCapabilityRow[];
   grandReq: number;
   grandSpend: number;
 }) {
-  // grid: Capability | Jobs · trend (sparkline) | Δ vs prior | Share | Unit price | Spend
   const cols =
     "grid grid-cols-[1.7fr_1.5fr_0.7fr_0.7fr_1fr_0.9fr] items-center gap-2 px-4";
 
@@ -377,7 +405,6 @@ function BreakdownTable({
 
   return (
     <div className="overflow-hidden rounded-md border border-hairline bg-dark-lighter shadow-card">
-      {/* Head */}
       <div
         className={`${cols} border-b border-hairline bg-dark py-2.5 font-mono text-[10.5px] uppercase tracking-[0.06em] text-fg-disabled`}
       >
@@ -385,96 +412,188 @@ function BreakdownTable({
         <div className="justify-self-end">Jobs · trend</div>
         <div className="justify-self-end">Δ vs prior</div>
         <div className="justify-self-end">Share</div>
-        <div className="justify-self-end">Unit price</div>
-        <div className="justify-self-end">Spend</div>
+        <div className="justify-self-end">Network cost</div>
+        <div className="justify-self-end">Billable</div>
       </div>
 
-      {/* Rows */}
-      {rows.map((c) => {
-        const share = (c.sum / grandReq) * 100;
-        const dUp = c.delta > 0;
-        return (
-          <div
-            key={c.id}
-            className={`${cols} border-b border-hairline py-2.5 text-[13px] text-fg-strong transition-colors last:border-b-0 hover:bg-zebra`}
-          >
-            {/* Capability */}
-            <div className="flex min-w-0 items-center gap-2">
-              <span
-                className="h-2 w-2 shrink-0 rounded-[2px]"
-                style={{ background: c.color }}
-                aria-hidden="true"
-              />
-              <Link
-                href={`/jobs?capability=${c.id}`}
-                className="truncate text-fg underline decoration-transparent decoration-1 underline-offset-[3px] transition-colors hover:text-green-bright hover:decoration-current"
-              >
-                {c.name}
-              </Link>
-            </div>
-
-            {/* Jobs · trend (number + inline sparkline) */}
-            <div className="flex items-center justify-end gap-2.5">
-              <span className="font-mono tabular-nums text-fg-strong">
-                {fmt(c.sum)}
-              </span>
-              <span className="opacity-85">
-                <MiniSpark
-                  data={c.data}
-                  color={c.color}
-                  height={18}
-                  width={70}
-                />
-              </span>
-            </div>
-
-            {/* Δ vs prior */}
+      {rows.length === 0 ? (
+        <p className="px-4 py-8 text-center text-sm text-fg-faint">No matching capabilities.</p>
+      ) : (
+        rows.map((c) => {
+          const share = grandReq > 0 ? (c.requestCount / grandReq) * 100 : 0;
+          const unitCost =
+            c.requestCount > 0 ? c.spendUsd / c.requestCount : 0;
+          return (
             <div
-              className="justify-self-end font-mono tabular-nums"
-              style={{ color: deltaColor(c.delta) }}
+              key={c.id}
+              className={`${cols} border-b border-hairline py-2.5 text-[13px] text-fg-strong transition-colors last:border-b-0 hover:bg-zebra`}
             >
-              {dUp ? "+" : ""}
-              {c.delta.toFixed(0)}%
-            </div>
-
-            {/* Share */}
-            <div className="justify-self-end font-mono tabular-nums text-fg-faint">
-              {share.toFixed(1)}%
-            </div>
-
-            {/* Unit price */}
-            <div className="justify-self-end font-mono tabular-nums text-fg-faint">
-              ${c.price.toFixed(4)}
-              <span className="text-fg-disabled"> /{c.unit}</span>
-            </div>
-
-            {/* Spend */}
-            <div className="justify-self-end font-mono tabular-nums text-fg">
-              {fmtSpend(c.spend)}
+              <div className="flex min-w-0 items-center gap-2">
+                <span
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{ background: c.color }}
+                  aria-hidden="true"
+                />
+                <Link
+                  href={`/jobs?capability=${encodeURIComponent(c.id)}`}
+                  className="truncate font-mono text-xs text-fg underline decoration-transparent underline-offset-[3px] transition-colors hover:text-green-bright hover:decoration-current"
+                  title={c.id}
+                >
+                  {c.name}
+                </Link>
+              </div>
+              <div className="flex items-center justify-end gap-2.5">
+                <span className="font-mono tabular-nums text-fg-strong">{fmt(c.requestCount)}</span>
+                <span className="opacity-85">
+                  <MiniSpark data={c.data} color={c.color} height={18} width={70} />
+                </span>
+              </div>
+              <div
+                className="justify-self-end font-mono tabular-nums"
+                style={{ color: deltaColor(c.delta) }}
+              >
+                {c.delta > 0 ? "+" : ""}
+                {c.delta.toFixed(0)}%
+              </div>
+              <div className="justify-self-end font-mono tabular-nums text-fg-faint">
+                {share.toFixed(1)}%
+              </div>
+              <div className="justify-self-end font-mono tabular-nums text-fg-faint">
+                ${microsToUsdDisplay(c.networkFeeUsdMicros)}
+              </div>
+              <div className="justify-self-end font-mono tabular-nums text-fg">
+                {fmtSpend(c.spendUsd)}
+                {unitCost > 0 && (
+                  <span className="text-fg-disabled"> · ${unitCost.toFixed(4)}/req</span>
+                )}
+              </div>
             </div>
-          </div>
-        );
-      })}
+          );
+        })
+      )}
 
-      {/* Total */}
-      <div
-        className={`${cols} bg-dark py-2.5 text-[13px] font-medium text-fg-strong`}
-      >
-        <div className="text-fg-strong">
+      <div className={`${cols} bg-dark py-2.5 text-[13px] font-medium text-fg-strong`}>
+        <div>
           Total
-          <span className="ml-1.5 text-[11px] text-fg-faint">
-            · this period
-          </span>
-        </div>
-        <div className="justify-self-end font-mono tabular-nums text-fg">
-          {fmt(grandReq)}
+          <span className="ml-1.5 text-[11px] text-fg-faint">· this period</span>
         </div>
+        <div className="justify-self-end font-mono tabular-nums text-fg">{fmt(grandReq)}</div>
         <div />
         <div />
         <div />
-        <div className="justify-self-end font-mono tabular-nums text-fg">
-          {fmtSpend(grandSpend)}
+        <div className="justify-self-end font-mono tabular-nums text-fg">{fmtSpend(grandSpend)}</div>
+      </div>
+    </div>
+  );
+}
+
+function LimitsPanel({
+  balance,
+  networkFeeUsdMicros,
+  endUserBillableUsdMicros,
+  requestCount,
+}: {
+  balance: {
+    balanceUsdMicros: string;
+    consumedUsdMicros: string;
+    lifetimeGrantedUsdMicros: string;
+    hasAccess: boolean;
+  } | null;
+  networkFeeUsdMicros: string;
+  endUserBillableUsdMicros: string;
+  requestCount: number;
+}) {
+  const limits = balance
+    ? [
+        {
+          label: "Included allowance",
+          used: microsToUsdDisplay(balance.consumedUsdMicros),
+          max: `$${microsToUsdDisplay(balance.lifetimeGrantedUsdMicros)}`,
+          pct:
+            BigInt(balance.lifetimeGrantedUsdMicros || "0") > BigInt(0)
+              ? Math.min(
+                  100,
+                  Number(
+                    (BigInt(balance.consumedUsdMicros || "0") * BigInt(10000)) /
+                      BigInt(balance.lifetimeGrantedUsdMicros || "1"),
+                  ) / 100,
+                )
+              : 0,
+        },
+        {
+          label: "Remaining balance",
+          used: `$${microsToUsdDisplay(balance.balanceUsdMicros)}`,
+          max: "—",
+          pct: balance.hasAccess ? 40 : 100,
+        },
+      ]
+    : [
+        {
+          label: "Signed requests",
+          used: fmt(requestCount),
+          max: "—",
+          pct: 50,
+        },
+      ];
+
+  const extra = [
+    {
+      label: "Network cost (metered)",
+      used: `$${microsToUsdDisplay(networkFeeUsdMicros)}`,
+      max: "pass-through",
+      pct: 30,
+    },
+    {
+      label: "Billable (retail estimate)",
+      used: `$${microsToUsdDisplay(endUserBillableUsdMicros)}`,
+      max: "—",
+      pct: 45,
+    },
+  ];
+
+  return (
+    <div className="mt-4 overflow-hidden rounded-md border border-hairline bg-dark-lighter shadow-card">
+      <div className="flex flex-wrap items-start justify-between gap-3 border-b border-hairline px-4 py-3.5">
+        <div>
+          <p className="text-[17px] font-bold text-fg">Limits & metering</p>
+          <p className="mt-0.5 text-[12px] text-fg-muted">
+            OpenMeter subscription allowance · network_spend meter
+          </p>
         </div>
+        <Link
+          href="/settings?tab=billing"
+          className="inline-flex h-[26px] items-center gap-1.5 rounded-[4px] border border-hairline bg-dark-card px-2.5 text-[12px] text-fg-strong transition-colors hover:border-subtle hover:text-fg"
+        >
+          Manage plan
+        </Link>
+      </div>
+      <div className="py-1">
+        {[...limits, ...extra].map((l) => {
+          const overWarn = l.pct > 80;
+          return (
+            <div
+              key={l.label}
+              className="border-b border-hairline px-4 py-2.5 last:border-b-0"
+            >
+              <div className="mb-1.5 flex items-baseline justify-between gap-2">
+                <span className="text-[13px] text-fg-strong">{l.label}</span>
+                <span className="font-mono text-[12px] tabular-nums text-fg-faint">
+                  <b className="font-medium text-fg">{l.used}</b>
+                  <span className="text-fg-disabled"> / {l.max}</span>
+                </span>
+              </div>
+              <div className="h-1 overflow-hidden rounded-[2px] bg-dark-card">
+                <div
+                  className="h-full rounded-[2px]"
+                  style={{
+                    width: `${Math.min(100, l.pct)}%`,
+                    background: overWarn ? "#fbbf24" : "#40bf86",
+                  }}
+                />
+              </div>
+            </div>
+          );
+        })}
       </div>
     </div>
   );
diff --git a/components/dashboard/UserSessionContext.tsx b/components/dashboard/UserSessionContext.tsx
new file mode 100644
index 0000000..67abc4e
--- /dev/null
+++ b/components/dashboard/UserSessionContext.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  type ReactNode,
+} from "react";
+import { useAuth } from "@/components/dashboard/AuthContext";
+import {
+  useSigningSession,
+  type SigningSessionState,
+} from "@/lib/dashboard/useSigningSession";
+
+export type UserSessionContextValue = {
+  /** PymtHouse short-lived signing JWT for the signed-in user. */
+  signing: SigningSessionState;
+  refreshSigningToken: () => Promise<void>;
+  ensureSigningAccessToken: () => Promise<string>;
+  clearSigningSession: () => void;
+};
+
+const UserSessionContext = createContext<UserSessionContextValue>({
+  signing: { status: "idle" },
+  refreshSigningToken: async () => {},
+  ensureSigningAccessToken: async () => "",
+  clearSigningSession: () => {},
+});
+
+export function useUserSession() {
+  return useContext(UserSessionContext);
+}
+
+/** @deprecated Use `useUserSession` */
+export function useSignerSession() {
+  const session = useUserSession();
+  return {
+    enabled: session.signing.status !== "idle",
+    state: session.signing,
+    refresh: session.refreshSigningToken,
+    ensureAccessToken: session.ensureSigningAccessToken,
+    clearSession: session.clearSigningSession,
+  };
+}
+
+export function UserSessionProvider({ children }: { children: ReactNode }) {
+  const { user, isConnected } = useAuth();
+  const externalUserId = user?.email?.trim();
+  const mintEnabled = isConnected && Boolean(externalUserId);
+
+  const { state, refresh, ensureAccessToken, clearSession } = useSigningSession(
+    mintEnabled,
+    externalUserId,
+  );
+
+  useEffect(() => {
+    if (!mintEnabled) {
+      clearSession();
+    }
+  }, [mintEnabled, clearSession]);
+
+  return (
+    <UserSessionContext.Provider
+      value={{
+        signing: state,
+        refreshSigningToken: refresh,
+        ensureSigningAccessToken: ensureAccessToken,
+        clearSigningSession: clearSession,
+      }}
+    >
+      {children}
+    </UserSessionContext.Provider>
+  );
+}
+
+/** @deprecated Use `UserSessionProvider` */
+export const SignerSessionProvider = UserSessionProvider;
diff --git a/components/dashboard/playground/CodeSnippets.tsx b/components/dashboard/playground/CodeSnippets.tsx
index d05ca1d..939f701 100644
--- a/components/dashboard/playground/CodeSnippets.tsx
+++ b/components/dashboard/playground/CodeSnippets.tsx
@@ -4,6 +4,12 @@ import { useEffect, useMemo, useState } from "react";
 import CopyButton from "@/components/dashboard/CopyButton";
 import { useAuth } from "@/components/dashboard/AuthContext";
 import { STARTER_API_KEY } from "@/lib/dashboard/mock-data";
+import { isGatewayEnabledPublic } from "@/lib/dashboard/gateway-public";
+import {
+  buildGatewayStreamingSnippet,
+  buildPythonSdkStreamingSnippet,
+  isStreamingCapabilityModel,
+} from "@/lib/dashboard/sdk-streaming-example";
 import type { Model } from "@/lib/dashboard/types";
 
 type Lang = "curl" | "python" | "node" | "http";
@@ -196,10 +202,22 @@ export default function CodeSnippets({
     ? mockToken
     : PLACEHOLDER_TOKEN;
 
-  const snippets = useMemo(
-    () => generateSnippets(model, token, runValues),
-    [model, token, runValues],
-  );
+  const useGatewayStreaming =
+    isGatewayEnabledPublic() && isStreamingCapabilityModel(model);
+
+  const snippets = useMemo(() => {
+    if (useGatewayStreaming) {
+      const gateway = buildGatewayStreamingSnippet(model);
+      const python = buildPythonSdkStreamingSnippet(model);
+      return {
+        curl: gateway,
+        python,
+        node: gateway,
+        http: gateway,
+      };
+    }
+    return generateSnippets(model, token, runValues);
+  }, [model, token, runValues, useGatewayStreaming]);
   const activeLang = fixedLang ?? lang;
 
   return (
diff --git a/components/dashboard/playground/LiveStreamPlayground.tsx b/components/dashboard/playground/LiveStreamPlayground.tsx
new file mode 100644
index 0000000..791c404
--- /dev/null
+++ b/components/dashboard/playground/LiveStreamPlayground.tsx
@@ -0,0 +1,592 @@
+"use client";
+
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Play, Square, Video } from "lucide-react";
+import { BrowserGatewayClient } from "@pymthouse/builder-sdk/gateway/client";
+import { useUserSession } from "@/components/dashboard/UserSessionContext";
+import type { Model } from "@/lib/dashboard/types";
+import StatusDot from "@/components/dashboard/StatusDot";
+import {
+  DEFAULT_TRICKLE_MIME_TYPE,
+  MpegTsPlayer,
+  MpegTsPublisher,
+} from "@/lib/dashboard/playground/trickle-mpegts";
+import {
+  AsyncSemaphore,
+  InputFrameCapture,
+} from "@/lib/dashboard/playground/stream-capture";
+
+type StreamStatus = "idle" | "connecting" | "live" | "error";
+
+type ConnectPhase =
+  | "signing"
+  | "discovery"
+  | "session"
+  | "starting_loops";
+
+const TEST_PATTERN_FPS = 15;
+const TEST_WIDTH = 320;
+const TEST_HEIGHT = 180;
+const PUBLISH_UPLOAD_CONCURRENCY = 1;
+const FRAMES_PUBLISHED_UI_INTERVAL_MS = 1000;
+
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => window.setTimeout(resolve, ms));
+}
+
+/** Yield until React has committed the latest state (refs populated). */
+function afterReactCommit(): Promise<void> {
+  return new Promise((resolve) => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => resolve());
+    });
+  });
+}
+
+function phaseLabel(phase: ConnectPhase | null): string {
+  switch (phase) {
+    case "signing":
+      return "Minting signing credentials…";
+    case "discovery":
+      return "Discovering orchestrators and negotiating job…";
+    case "session":
+      return "Opening gateway session…";
+    case "starting_loops":
+      return "Starting frame relay…";
+    default:
+      return "Connecting…";
+  }
+}
+
+export default function LiveStreamPlayground({ model }: { model: Model }) {
+  const {
+    signing: signerState,
+    ensureSigningAccessToken: ensureAccessToken,
+    refreshSigningToken: refresh,
+  } = useUserSession();
+  const [status, setStatus] = useState<StreamStatus>("idle");
+  const [connectPhase, setConnectPhase] = useState<ConnectPhase | null>(null);
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+  const [sessionLabel, setSessionLabel] = useState<string | null>(null);
+  const [framesPublished, setFramesPublished] = useState(0);
+  const [outputSegmentSeq, setOutputSegmentSeq] = useState<number | null>(null);
+
+  const sourceVideoRef = useRef<HTMLVideoElement>(null);
+  const outputVideoRef = useRef<HTMLVideoElement>(null);
+  const inputCanvasRef = useRef<HTMLCanvasElement>(null);
+  const publishCanvasRef = useRef<HTMLCanvasElement>(null);
+  const streamRef = useRef<MediaStream | null>(null);
+  const clientRef = useRef<InstanceType<typeof BrowserGatewayClient> | null>(null);
+  const mpegTsPublisherRef = useRef<MpegTsPublisher | null>(null);
+  const mpegTsPlayerRef = useRef<MpegTsPlayer | null>(null);
+  const inputCaptureRef = useRef<InputFrameCapture | null>(null);
+  const publishUploadRef = useRef(new AsyncSemaphore(PUBLISH_UPLOAD_CONCURRENCY));
+  const publishSeqRef = useRef(-1);
+  const framesPublishedCountRef = useRef(0);
+  const lastPublishUiMsRef = useRef(0);
+  const lastOutputSegmentSeqRef = useRef<number | null>(null);
+  const lastOutputSegmentBytesRef = useRef(0);
+  const publishActiveRef = useRef(false);
+  const subscribeActiveRef = useRef(false);
+  const segmentContentTypeRef = useRef(DEFAULT_TRICKLE_MIME_TYPE);
+  const streamGenerationRef = useRef(0);
+  const pendingOutputAttachRef = useRef(false);
+  const resetStreamResourcesRef = useRef<() => Promise<void>>(async () => undefined);
+  const [outputSurfaceKey, setOutputSurfaceKey] = useState(0);
+
+  const stopLoops = useCallback(() => {
+    publishActiveRef.current = false;
+    subscribeActiveRef.current = false;
+  }, []);
+
+  const stopCamera = useCallback(() => {
+    streamRef.current?.getTracks().forEach((t) => t.stop());
+    streamRef.current = null;
+    if (sourceVideoRef.current) {
+      sourceVideoRef.current.srcObject = null;
+    }
+  }, []);
+
+  /** Tear down gateway + encode/play pipeline; optionally keep the camera open. */
+  const resetGatewaySession = useCallback(
+    async (preserveCamera: boolean) => {
+      streamGenerationRef.current += 1;
+      pendingOutputAttachRef.current = false;
+      stopLoops();
+      if (!preserveCamera) {
+        stopCamera();
+      }
+      await mpegTsPublisherRef.current?.stop().catch(() => undefined);
+      mpegTsPublisherRef.current = null;
+      mpegTsPlayerRef.current?.destroy();
+      mpegTsPlayerRef.current = null;
+      await clientRef.current?.stop().catch(() => undefined);
+      clientRef.current = null;
+      setSessionLabel(null);
+      framesPublishedCountRef.current = 0;
+      lastPublishUiMsRef.current = 0;
+      lastOutputSegmentSeqRef.current = null;
+      lastOutputSegmentBytesRef.current = 0;
+      publishSeqRef.current = -1;
+      setOutputSegmentSeq(null);
+      setFramesPublished(0);
+      setConnectPhase(null);
+    },
+    [stopCamera, stopLoops],
+  );
+
+  const resetStreamResources = useCallback(async () => {
+    inputCaptureRef.current?.stop();
+    await resetGatewaySession(false);
+  }, [resetGatewaySession]);
+
+  resetStreamResourcesRef.current = resetStreamResources;
+
+  const tryAttachOutputPlayer = useCallback(() => {
+    if (!pendingOutputAttachRef.current) {
+      return false;
+    }
+    const video = outputVideoRef.current;
+    const player = mpegTsPlayerRef.current;
+    if (!video || !player) {
+      return false;
+    }
+    pendingOutputAttachRef.current = false;
+    return player.attach(video);
+  }, []);
+
+  const bindOutputVideo = useCallback(
+    (node: HTMLVideoElement | null) => {
+      outputVideoRef.current = node;
+      if (node) {
+        tryAttachOutputPlayer();
+      }
+    },
+    [tryAttachOutputPlayer],
+  );
+
+  const publishFrame = useCallback(() => {
+    const client = clientRef.current;
+    const publisher = mpegTsPublisherRef.current;
+    const publishCanvas = publishCanvasRef.current;
+    const inputCanvas = inputCanvasRef.current;
+    if (!client || !publisher || !publishCanvas || !inputCanvas) {
+      return;
+    }
+
+    const ctx = publishCanvas.getContext("2d", { alpha: false });
+    if (!ctx) {
+      return;
+    }
+
+    ctx.drawImage(inputCanvas, 0, 0, publishCanvas.width, publishCanvas.height);
+    publisher.encode(publishCanvas);
+
+    framesPublishedCountRef.current += 1;
+    const now = performance.now();
+    if (now - lastPublishUiMsRef.current >= FRAMES_PUBLISHED_UI_INTERVAL_MS) {
+      lastPublishUiMsRef.current = now;
+      setFramesPublished(framesPublishedCountRef.current);
+    }
+  }, []);
+
+  const startInputCapture = useCallback(() => {
+    const canvas = inputCanvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    inputCaptureRef.current?.stop();
+    const capture = new InputFrameCapture();
+    inputCaptureRef.current = capture;
+    capture.start({
+      canvas,
+      sourceVideo: sourceVideoRef.current,
+      getMediaStream: () => streamRef.current,
+      fps: TEST_PATTERN_FPS,
+      onSample: () => {
+        if (publishActiveRef.current) {
+          publishFrame();
+        }
+      },
+    });
+  }, [publishFrame]);
+
+  const stopAll = useCallback(async () => {
+    await resetStreamResources();
+    setErrorMsg(null);
+    setStatus("idle");
+    startInputCapture();
+  }, [resetStreamResources, startInputCapture]);
+
+  const failStream = useCallback(
+    async (err: unknown) => {
+      await resetGatewaySession(true);
+      setStatus("error");
+      setErrorMsg(err instanceof Error ? err.message : "Failed to start stream");
+      startInputCapture();
+    },
+    [resetGatewaySession, startInputCapture],
+  );
+
+  useEffect(() => {
+    startInputCapture();
+    return () => {
+      inputCaptureRef.current?.stop();
+      void resetStreamResourcesRef.current();
+    };
+  }, [startInputCapture]);
+
+  useLayoutEffect(() => {
+    if (status === "live") {
+      tryAttachOutputPlayer();
+    }
+  }, [status, outputSurfaceKey, tryAttachOutputPlayer]);
+
+  const gatewayModelId = model.gatewayModelId ?? model.id;
+
+  const startCamera = useCallback(async () => {
+    if (!navigator.mediaDevices) {
+      setErrorMsg("Camera API not available");
+      setStatus("error");
+      return;
+    }
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: { width: { ideal: TEST_WIDTH }, height: { ideal: TEST_HEIGHT } },
+        audio: false,
+      });
+      streamRef.current = stream;
+      if (sourceVideoRef.current) {
+        sourceVideoRef.current.srcObject = stream;
+        await sourceVideoRef.current.play().catch(() => undefined);
+      }
+      startInputCapture();
+      if (status === "error") {
+        setStatus("idle");
+        setErrorMsg(null);
+      }
+    } catch (err) {
+      setStatus("error");
+      setErrorMsg(err instanceof Error ? err.message : "Camera denied");
+    }
+  }, [startInputCapture, status]);
+
+  const subscribeLoop = useCallback(async () => {
+    const client = clientRef.current;
+    const player = mpegTsPlayerRef.current;
+    if (!client || !player || !subscribeActiveRef.current) {
+      return;
+    }
+
+    try {
+      const segment = await client.subscribeOutputSegmentStream((chunk: Uint8Array) => {
+        player.pushChunk(chunk);
+      });
+      if (!segment || !subscribeActiveRef.current) {
+        await sleep(200);
+        if (subscribeActiveRef.current) {
+          void subscribeLoop();
+        }
+        return;
+      }
+
+      const lastSeq = lastOutputSegmentSeqRef.current;
+      const lastBytes = lastOutputSegmentBytesRef.current;
+      const segmentBytes = segment.byteCount;
+      const isOlderSegment = segment.segmentSeq < (lastSeq ?? -1);
+      const isExactDuplicate = segment.segmentSeq === lastSeq && segmentBytes <= lastBytes;
+
+      if (isOlderSegment || isExactDuplicate) {
+        await sleep(80);
+        if (subscribeActiveRef.current) {
+          void subscribeLoop();
+        }
+        return;
+      }
+      lastOutputSegmentSeqRef.current = segment.segmentSeq;
+      lastOutputSegmentBytesRef.current = segmentBytes;
+      setOutputSegmentSeq(segment.segmentSeq);
+      player.flushSegment();
+      if (subscribeActiveRef.current) {
+        void subscribeLoop();
+      }
+    } catch {
+      if (subscribeActiveRef.current) {
+        await sleep(500);
+        if (subscribeActiveRef.current) {
+          void subscribeLoop();
+        }
+      }
+    }
+  }, []);
+
+  const startStream = useCallback(async () => {
+    setStatus("connecting");
+    setErrorMsg(null);
+    framesPublishedCountRef.current = 0;
+    lastPublishUiMsRef.current = 0;
+    lastOutputSegmentSeqRef.current = null;
+    lastOutputSegmentBytesRef.current = 0;
+    publishSeqRef.current = -1;
+    setOutputSegmentSeq(null);
+    setFramesPublished(0);
+    stopLoops();
+    await resetGatewaySession(true);
+
+    const generation = streamGenerationRef.current;
+
+    try {
+      setConnectPhase("signing");
+      const bearer = await ensureAccessToken();
+      if (streamGenerationRef.current !== generation) {
+        return;
+      }
+
+      setConnectPhase("discovery");
+      const origin = window.location.origin;
+      const client = new BrowserGatewayClient({ baseUrl: origin });
+      client.setSignerToken(bearer);
+
+      setConnectPhase("session");
+      const session = await client.startSession({ modelId: gatewayModelId });
+      if (streamGenerationRef.current !== generation) {
+        await client.stop().catch(() => undefined);
+        return;
+      }
+
+      clientRef.current = client;
+      setSessionLabel(`${session.sessionId.slice(0, 8)}…`);
+      segmentContentTypeRef.current = session.mimeType ?? DEFAULT_TRICKLE_MIME_TYPE;
+      publishSeqRef.current = Math.max(-1, (session.publishSeq ?? 0) - 1);
+
+      const uploadGate = publishUploadRef.current;
+      const publisher = new MpegTsPublisher((chunk) => {
+        if (streamGenerationRef.current !== generation) {
+          return;
+        }
+        const nextPublishSeq = publishSeqRef.current + 1;
+        publishSeqRef.current = nextPublishSeq;
+        void uploadGate
+          .run(() =>
+            client.publishSegment(chunk, {
+              seq: nextPublishSeq,
+              contentType: segmentContentTypeRef.current,
+            }),
+          )
+          .catch(() => undefined);
+      }, TEST_PATTERN_FPS);
+      await publisher.start(TEST_WIDTH, TEST_HEIGHT);
+      if (streamGenerationRef.current !== generation) {
+        await publisher.stop().catch(() => undefined);
+        await client.stop().catch(() => undefined);
+        return;
+      }
+      mpegTsPublisherRef.current = publisher;
+
+      const player = new MpegTsPlayer();
+      mpegTsPlayerRef.current = player;
+      pendingOutputAttachRef.current = true;
+
+      setConnectPhase("starting_loops");
+      setOutputSurfaceKey((key) => key + 1);
+      setStatus("live");
+
+      await afterReactCommit();
+      if (streamGenerationRef.current !== generation) {
+        return;
+      }
+      tryAttachOutputPlayer();
+      await player.waitUntilReady(12_000);
+      if (streamGenerationRef.current !== generation) {
+        return;
+      }
+
+      setConnectPhase(null);
+      publishActiveRef.current = true;
+      subscribeActiveRef.current = true;
+      startInputCapture();
+      void subscribeLoop();
+    } catch (err) {
+      if (streamGenerationRef.current === generation) {
+        await failStream(err);
+      }
+    }
+  }, [
+    ensureAccessToken,
+    failStream,
+    gatewayModelId,
+    resetGatewaySession,
+    startInputCapture,
+    stopLoops,
+    subscribeLoop,
+    tryAttachOutputPlayer,
+  ]);
+
+  const signingReady = signerState.status === "ready";
+  const signingLoading = signerState.status === "loading";
+  const canStart = signingReady && status !== "connecting";
+
+  return (
+    <div className="space-y-6">
+      <p className="text-sm text-fg-muted">
+        Stream to an orchestrator through the dashboard gateway relay. Frames are muxed to
+        MPEG-TS (<span className="font-mono">video/mp2t</span>) like{" "}
+        <span className="font-mono">write_frames.py</span>. A short-lived signing token is
+        minted automatically for your account.
+      </p>
+
+      <div className="rounded-lg border border-subtle bg-zebra px-3 py-2.5 text-sm">
+        {signingLoading && <p className="text-fg-muted">Preparing signing token…</p>}
+        {signingReady && status !== "connecting" && status !== "live" && (
+          <p className="flex flex-wrap items-center gap-2 text-fg-muted">
+            <StatusDot tone="green" />
+            <span>
+              Signing token ready
+              <span className="font-mono text-[11px] text-fg-faint">
+                {" "}
+                · refreshes before expiry
+              </span>
+            </span>
+          </p>
+        )}
+        {status === "connecting" && (
+          <p className="text-fg-muted">{phaseLabel(connectPhase)}</p>
+        )}
+        {signerState.status === "missing_user" && (
+          <p className="text-fg-muted">Sign in to mint a signing token for streaming.</p>
+        )}
+        {signerState.status === "error" && status !== "live" && (
+          <p className="text-red">
+            {signerState.message}{" "}
+            <button
+              type="button"
+              className="underline decoration-dotted underline-offset-2"
+              onClick={() => void refresh()}
+            >
+              Retry
+            </button>
+          </p>
+        )}
+      </div>
+
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+        <div>
+          <div className="mb-2 flex items-center justify-between">
+            <h3 className="text-sm font-medium text-fg-faint">Input</h3>
+            {status === "live" && (
+              <span className="inline-flex items-center gap-1.5 rounded-full bg-warm-subtle px-2 py-0.5 text-[11px] font-medium text-warm">
+                <StatusDot tone="warm" />
+                Streaming
+                {framesPublished > 0 && (
+                  <span className="font-mono text-fg-faint">· {framesPublished} encoded</span>
+                )}
+              </span>
+            )}
+          </div>
+          <div className="relative aspect-video overflow-hidden rounded-lg border border-hairline bg-black">
+            <canvas
+              ref={inputCanvasRef}
+              width={TEST_WIDTH}
+              height={TEST_HEIGHT}
+              className="h-full w-full object-contain"
+            />
+            <video
+              ref={sourceVideoRef}
+              autoPlay
+              playsInline
+              muted
+              className="pointer-events-none absolute h-0 w-0 opacity-0"
+              aria-hidden
+            />
+            <canvas ref={publishCanvasRef} width={TEST_WIDTH} height={TEST_HEIGHT} className="hidden" />
+          </div>
+          <p className="mt-2 text-[11px] text-fg-faint">
+            Test pattern frames cycle automatically. Optional camera overrides the pattern
+            when streaming.
+          </p>
+          <div className="mt-3 flex flex-wrap gap-2">
+            <button
+              type="button"
+              onClick={() => void startCamera()}
+              disabled={status === "connecting"}
+              className="btn-secondary flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium disabled:opacity-50"
+            >
+              <Video className="h-3.5 w-3.5" />
+              Camera
+            </button>
+            {status === "live" ? (
+              <button
+                type="button"
+                onClick={() => void stopAll()}
+                className="btn-secondary flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium"
+              >
+                <Square className="h-3.5 w-3.5" />
+                Stop
+              </button>
+            ) : (
+              <button
+                type="button"
+                onClick={() => void startStream()}
+                disabled={!canStart}
+                className="btn-primary flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium disabled:opacity-50"
+              >
+                {status === "connecting" ? (
+                  <>
+                    <span className="h-3 w-3 animate-spin rounded-full border-2 border-strong border-t-white" />
+                    Connecting…
+                  </>
+                ) : (
+                  <>
+                    <Play className="h-3.5 w-3.5" />
+                    Start stream
+                  </>
+                )}
+              </button>
+            )}
+          </div>
+        </div>
+
+        <div>
+          <div className="mb-2 flex items-center justify-between">
+            <h3 className="text-sm font-medium text-fg-faint">Output</h3>
+            <div className="flex flex-wrap items-center gap-2">
+              {sessionLabel && (
+                <span className="font-mono text-[11px] text-fg-faint">session {sessionLabel}</span>
+              )}
+              {outputSegmentSeq !== null && (
+                <span className="font-mono text-[11px] text-fg-faint">
+                  out seg {outputSegmentSeq}
+                </span>
+              )}
+            </div>
+          </div>
+          <div className="relative aspect-video overflow-hidden rounded-lg border border-hairline bg-black">
+            <video
+              key={outputSurfaceKey}
+              ref={bindOutputVideo}
+              autoPlay
+              playsInline
+              muted
+              className="h-full w-full object-contain"
+            />
+            {status !== "live" && (
+              <div className="absolute inset-0 flex items-center justify-center px-4 text-center text-xs text-fg-label">
+                {status === "error" && errorMsg
+                  ? errorMsg
+                  : status === "connecting"
+                    ? phaseLabel(connectPhase)
+                    : "Orchestrator output (MPEG-TS demuxed) appears here when the stream is live."}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {status === "error" && errorMsg && (
+        <p className="text-sm text-red" role="alert">
+          {errorMsg}
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/lib/dashboard/device-flow.ts b/lib/dashboard/device-flow.ts
new file mode 100644
index 0000000..037058f
--- /dev/null
+++ b/lib/dashboard/device-flow.ts
@@ -0,0 +1,106 @@
+import { cookies } from "next/headers";
+import { PmtHouseClient, PmtHouseError } from "@pymthouse/builder-sdk";
+
+export const DEVICE_FLOW_COOKIE_NAME = "dashboard_device_flow";
+
+export interface DeviceFlowState {
+  iss: string;
+  targetLinkUri: string;
+  userCode: string;
+  clientId: string;
+}
+
+export async function setDeviceFlowCookie(state: DeviceFlowState): Promise<void> {
+  const jar = await cookies();
+  jar.set(DEVICE_FLOW_COOKIE_NAME, JSON.stringify(state), {
+    httpOnly: true,
+    sameSite: "lax",
+    path: "/",
+    maxAge: 60 * 10,
+    secure: process.env.NODE_ENV === "production",
+  });
+}
+
+export async function readDeviceFlowCookie(): Promise<DeviceFlowState | null> {
+  const jar = await cookies();
+  const raw = jar.get(DEVICE_FLOW_COOKIE_NAME)?.value;
+  if (!raw) {
+    return null;
+  }
+  try {
+    const parsed = JSON.parse(raw) as DeviceFlowState;
+    if (
+      !parsed.userCode ||
+      !parsed.clientId ||
+      !parsed.iss ||
+      !parsed.targetLinkUri
+    ) {
+      return null;
+    }
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+
+export async function clearDeviceFlowCookie(): Promise<void> {
+  const jar = await cookies();
+  jar.delete(DEVICE_FLOW_COOKIE_NAME);
+}
+
+function readPymthouseM2mConfig() {
+  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 createPmtHouseClientForPublicApp(publicClientId: string): PmtHouseClient {
+  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 new PmtHouseClient({
+    issuerUrl: config.issuerUrl,
+    publicClientId,
+    m2mClientId: config.m2mClientId,
+    m2mClientSecret: config.m2mClientSecret,
+    allowInsecureHttp: config.allowInsecureHttp,
+  });
+}
+
+export async function completeDashboardDeviceApproval(params: {
+  userCode: string;
+  publicClientId: string;
+  externalUserId: string;
+  email: string;
+}): Promise<void> {
+  const client = createPmtHouseClientForPublicApp(params.publicClientId);
+
+  await client.upsertAppUser({
+    externalUserId: params.externalUserId,
+    email: params.email,
+    status: "active",
+  });
+
+  const userToken = await client.mintUserAccessToken({
+    externalUserId: params.externalUserId,
+    scope: "sign:job",
+  });
+
+  await client.completeDeviceApproval({
+    userJwt: userToken.access_token,
+    userCode: params.userCode,
+  });
+}
diff --git a/lib/dashboard/fetch-signing-token.ts b/lib/dashboard/fetch-signing-token.ts
new file mode 100644
index 0000000..3727d53
--- /dev/null
+++ b/lib/dashboard/fetch-signing-token.ts
@@ -0,0 +1,58 @@
+export type SigningTokenResponse = {
+  access_token: string;
+  expires_in: number;
+  scope: string;
+  token_type: string;
+};
+
+export async function fetchSigningToken(
+  externalUserId: string,
+): Promise<SigningTokenResponse> {
+  const response = await fetch("/api/pymthouse/session/signing-token", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    },
+    body: JSON.stringify({
+      externalUserId: externalUserId.trim(),
+      scope: "sign:job",
+    }),
+    cache: "no-store",
+  });
+
+  const body = (await response.json().catch(() => ({}))) as Record<string, unknown>;
+  if (!response.ok) {
+    const message =
+      typeof body.error_description === "string"
+        ? body.error_description
+        : typeof body.error === "string"
+          ? body.error
+          : `Signing token request failed (${response.status})`;
+    throw new Error(message);
+  }
+
+  const accessToken =
+    typeof body.access_token === "string" ? body.access_token.trim() : "";
+  if (!accessToken) {
+    throw new Error("Signing token response did not include access_token");
+  }
+
+  const expiresIn =
+    typeof body.expires_in === "number" && Number.isFinite(body.expires_in)
+      ? body.expires_in
+      : 900;
+
+  const scope =
+    typeof body.scope === "string" && body.scope.trim() ? body.scope.trim() : "sign:job";
+
+  return {
+    access_token: accessToken,
+    expires_in: expiresIn,
+    scope,
+    token_type:
+      typeof body.token_type === "string" && body.token_type.trim()
+        ? body.token_type.trim()
+        : "Bearer",
+  };
+}
diff --git a/lib/dashboard/gateway-config.server.ts b/lib/dashboard/gateway-config.server.ts
new file mode 100644
index 0000000..fd613ef
--- /dev/null
+++ b/lib/dashboard/gateway-config.server.ts
@@ -0,0 +1,12 @@
+import "server-only";
+
+import {
+  readGatewayConfigFromEnv,
+  type GatewayServerConfig,
+} from "@pymthouse/builder-sdk/gateway/server";
+
+export type { GatewayServerConfig };
+
+export function readDashboardGatewayConfig(): GatewayServerConfig | null {
+  return readGatewayConfigFromEnv(process.env);
+}
diff --git a/lib/dashboard/gateway-public.ts b/lib/dashboard/gateway-public.ts
new file mode 100644
index 0000000..8b0f9a4
--- /dev/null
+++ b/lib/dashboard/gateway-public.ts
@@ -0,0 +1,7 @@
+/**
+ * Client-safe gateway flags. Do not import gateway/server here — it uses Node gRPC.
+ */
+
+export function isGatewayEnabledPublic(): boolean {
+  return process.env.NEXT_PUBLIC_GATEWAY_ENABLED === "1";
+}
diff --git a/lib/dashboard/model-api-url.ts b/lib/dashboard/model-api-url.ts
new file mode 100644
index 0000000..dc40a7c
--- /dev/null
+++ b/lib/dashboard/model-api-url.ts
@@ -0,0 +1,31 @@
+import type { Model } from "@/lib/dashboard/types";
+
+const DEFAULT_GATEWAY_BASE = "https://gateway.livepeer.org/v1";
+
+function isHttpUrl(value: string): boolean {
+  return /^https?:\/\//i.test(value);
+}
+
+/** Gateway base URL for snippets and docs (never a bare capability id). */
+export function getModelApiBaseUrl(model: Model): string {
+  const candidate = model.apiEndpoint?.trim();
+  if (candidate && isHttpUrl(candidate)) {
+    return candidate.replace(/\/$/, "");
+  }
+  return DEFAULT_GATEWAY_BASE;
+}
+
+/** POST target for the model's inference API. */
+export function getModelApiPostUrl(model: Model): string {
+  const base = getModelApiBaseUrl(model);
+  if (model.category === "Language") {
+    return `${base}/chat/completions`;
+  }
+  const pipeline = encodeURIComponent(model.id);
+  return `${base}/${pipeline}`;
+}
+
+/** Host header value for raw HTTP examples. */
+export function getModelApiHost(model: Model): string {
+  return new URL(getModelApiBaseUrl(model)).host;
+}
diff --git a/lib/dashboard/playground/stream-capture.ts b/lib/dashboard/playground/stream-capture.ts
new file mode 100644
index 0000000..8b6692e
--- /dev/null
+++ b/lib/dashboard/playground/stream-capture.ts
@@ -0,0 +1,91 @@
+/** rAF-driven input preview + snapshot source (keeps camera off the React render path). */
+
+export type InputFrameCaptureOptions = {
+  canvas: HTMLCanvasElement;
+  sourceVideo: HTMLVideoElement | null;
+  getMediaStream: () => MediaStream | null;
+  fps: number;
+  /** Called after each painted preview frame (e.g. to drive publish sampling). */
+  onSample?: () => void;
+};
+
+export class InputFrameCapture {
+  private running = false;
+  private rafId = 0;
+  private lastSampleMs = 0;
+  private testFrameIndex = 0;
+  private options: InputFrameCaptureOptions | null = null;
+
+  start(options: InputFrameCaptureOptions): void {
+    this.stop();
+    this.options = options;
+    this.running = true;
+    this.lastSampleMs = 0;
+    this.testFrameIndex = 0;
+    this.rafId = requestAnimationFrame(() => this.tick());
+  }
+
+  stop(): void {
+    this.running = false;
+    if (this.rafId) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = 0;
+    }
+    this.options = null;
+  }
+
+  private tick(): void {
+    if (!this.running || !this.options) {
+      return;
+    }
+
+    const { canvas, sourceVideo, getMediaStream, fps, onSample } = this.options;
+    const ctx = canvas.getContext("2d", { alpha: false });
+    if (ctx) {
+      const stream = getMediaStream();
+      if (stream && sourceVideo && sourceVideo.readyState >= 2) {
+        ctx.drawImage(sourceVideo, 0, 0, canvas.width, canvas.height);
+      } else {
+        const color = (this.testFrameIndex * 5) % 255;
+        ctx.fillStyle = `rgb(${color}, 0, ${255 - color})`;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        this.testFrameIndex += 1;
+      }
+    }
+
+    const intervalMs = 1000 / fps;
+    const now = performance.now();
+    if (onSample && now - this.lastSampleMs >= intervalMs) {
+      this.lastSampleMs = now;
+      onSample();
+    }
+
+    this.rafId = requestAnimationFrame(() => this.tick());
+  }
+}
+
+/** Limits concurrent async work (e.g. trickle PUTs) so encoding is not blocked. */
+export class AsyncSemaphore {
+  private inFlight = 0;
+  private readonly queue: Array<() => void> = [];
+
+  constructor(private readonly maxConcurrent: number) {}
+
+  async run<T>(task: () => Promise<T>): Promise<T> {
+    if (this.inFlight >= this.maxConcurrent) {
+      await new Promise<void>((resolve) => {
+        this.queue.push(resolve);
+      });
+    }
+    this.inFlight += 1;
+    try {
+      return await task();
+    } finally {
+      this.inFlight -= 1;
+      const next = this.queue.shift();
+      if (next) {
+        next();
+      }
+    }
+  }
+}
diff --git a/lib/dashboard/playground/trickle-mpegts.ts b/lib/dashboard/playground/trickle-mpegts.ts
new file mode 100644
index 0000000..c61a787
--- /dev/null
+++ b/lib/dashboard/playground/trickle-mpegts.ts
@@ -0,0 +1,504 @@
+/** Browser MPEG-TS mux (publish) and demux-to-MSE (subscribe) for LV2V trickle. */
+
+import { DEFAULT_TRICKLE_MIME_TYPE } from "@pymthouse/builder-sdk/gateway";
+
+export { DEFAULT_TRICKLE_MIME_TYPE };
+
+type JmuxerInstance = {
+  feed: (payload: { video: Uint8Array; duration?: number }) => void;
+  destroy: () => void;
+};
+
+type MuxSegment = {
+  initSegment?: Uint8Array;
+  data: Uint8Array;
+};
+
+type Mp4Transmuxer = {
+  on: (event: "data", handler: (segment: MuxSegment) => void) => void;
+  push: (chunk: Uint8Array) => void;
+  flush: () => void;
+};
+
+type MuxJsModule = {
+  mp4: { Transmuxer: new () => Mp4Transmuxer };
+};
+
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => window.setTimeout(resolve, ms));
+}
+
+const MSE_AVC_CODEC_CANDIDATES = [
+  'video/mp4; codecs="avc1.42E01E"',
+  'video/mp4; codecs="avc1.4d401e"',
+  'video/mp4; codecs="avc1.64001E"',
+] as const;
+
+const PROGRESSIVE_FLUSH_INTERVAL_MS = 250;
+const PROGRESSIVE_FLUSH_MIN_BYTES = 64 * 1024;
+const LIVE_EDGE_LAG_SECONDS = 0.75;
+const DEFAULT_LIVE_PLAYBACK_RATE = 1;
+const MIN_LIVE_PLAYBACK_RATE = 0.25;
+const MAX_LIVE_PLAYBACK_RATE = 1;
+const LOW_BUFFER_LAG_SECONDS = 0.5;
+const TARGET_BUFFER_LAG_SECONDS = 1.6;
+
+function pickMseAvcMimeType(): string {
+  if (typeof MediaSource === "undefined") {
+    return MSE_AVC_CODEC_CANDIDATES[0];
+  }
+  for (const mime of MSE_AVC_CODEC_CANDIDATES) {
+    if (MediaSource.isTypeSupported(mime)) {
+      return mime;
+    }
+  }
+  return MSE_AVC_CODEC_CANDIDATES[0];
+}
+
+/** Encode canvas frames to MPEG-TS trickle segments (PyAV / write_frames.py equivalent). */
+export class MpegTsPublisher {
+  private jmuxer: JmuxerInstance | null = null;
+  /** jmuxer requires a video node in the browser even when only using onData. */
+  private jmuxerSink: HTMLVideoElement | null = null;
+  private encoder: VideoEncoder | null = null;
+  private frameCount = 0;
+  private timestampUs = 0;
+  private segmentChain: Promise<void> = Promise.resolve();
+
+  constructor(
+    private readonly onSegment: (chunk: Uint8Array) => void,
+    private readonly fps: number,
+  ) {}
+
+  async start(
+    width: number,
+    height: number,
+  ): Promise<void> {
+    if (typeof VideoEncoder === "undefined") {
+      throw new Error("WebCodecs VideoEncoder is not available in this browser");
+    }
+
+    const jmuxerModule = await import("jmuxer");
+    const JMuxer = jmuxerModule.default as new (options: Record<string, unknown>) => JmuxerInstance;
+
+    const sink = document.createElement("video");
+    sink.muted = true;
+    sink.playsInline = true;
+    sink.setAttribute("aria-hidden", "true");
+    sink.style.cssText =
+      "position:fixed;width:0;height:0;opacity:0;pointer-events:none;overflow:hidden";
+    document.body.appendChild(sink);
+    this.jmuxerSink = sink;
+
+    this.jmuxer = new JMuxer({
+      node: sink,
+      mode: "video",
+      flushingTime: 500,
+      fps: this.fps,
+      clearBuffer: true,
+      onData: (data: ArrayBuffer) => {
+        const bytes = new Uint8Array(data);
+        // Do not await on the hot path — caller should bound network uploads separately.
+        void this.onSegment(bytes);
+      },
+    });
+
+    this.encoder = new VideoEncoder({
+      output: (chunk) => {
+        const buffer = new Uint8Array(chunk.byteLength);
+        chunk.copyTo(buffer);
+        const duration = Math.round(1000 / this.fps);
+        this.jmuxer?.feed({ video: buffer, duration });
+      },
+      error: (err) => {
+        throw err;
+      },
+    });
+
+    this.encoder.configure({
+      codec: "avc1.42E01E",
+      width,
+      height,
+      bitrate: 1_000_000,
+      framerate: this.fps,
+      latencyMode: "realtime",
+      avc: { format: "annexb" },
+    });
+  }
+
+  encode(canvas: HTMLCanvasElement): void {
+    if (!this.encoder) {
+      return;
+    }
+    const frame = new VideoFrame(canvas, { timestamp: this.timestampUs });
+    this.timestampUs += Math.round(1_000_000 / this.fps);
+    const keyFrame = this.frameCount % Math.max(1, Math.round(this.fps * 2)) === 0;
+    this.encoder.encode(frame, { keyFrame });
+    frame.close();
+    this.frameCount += 1;
+  }
+
+  async stop(): Promise<void> {
+    if (this.encoder) {
+      await this.encoder.flush().catch(() => undefined);
+      this.encoder.close();
+      this.encoder = null;
+    }
+    this.jmuxer?.destroy();
+    this.jmuxer = null;
+    this.jmuxerSink?.remove();
+    this.jmuxerSink = null;
+    await this.segmentChain;
+  }
+}
+
+/** Play MPEG-TS trickle segments on a video element via MSE + mux.js. */
+export class MpegTsPlayer {
+  private mseMimeType: string = MSE_AVC_CODEC_CANDIDATES[0];
+  private video: HTMLVideoElement | null = null;
+  private mediaSource: MediaSource | null = null;
+  private sourceBuffer: SourceBuffer | null = null;
+  private transmuxer: Mp4Transmuxer | null = null;
+  private appendedInit = false;
+  private objectUrl: string | null = null;
+  private appendQueue: Array<{ data: Uint8Array; seekToLive: boolean }> = [];
+  private pendingSegments: Uint8Array[] = [];
+  private appending = false;
+  private pendingSeekToLive = false;
+  private playbackStarted = false;
+  private playbackRateTimer: number | null = null;
+  private bytesSinceFlush = 0;
+  private lastFlushMs = 0;
+  private ready = false;
+  private destroyed = false;
+  private attached = false;
+  private readyResolve: (() => void) | null = null;
+  private readyReject: ((err: Error) => void) | null = null;
+  private readonly readyPromise: Promise<void>;
+
+  constructor() {
+    this.readyPromise = new Promise<void>((resolve, reject) => {
+      this.readyResolve = resolve;
+      this.readyReject = reject;
+    });
+  }
+
+  /** Resolves when MSE source buffer is ready to accept trickle segments. */
+  waitUntilReady(timeoutMs = 12_000): Promise<void> {
+    if (this.ready) {
+      return Promise.resolve();
+    }
+    return Promise.race([
+      this.readyPromise,
+      sleep(timeoutMs).then(() => {
+        throw new Error("Output video player did not become ready in time");
+      }),
+    ]);
+  }
+
+  attach(video: HTMLVideoElement | null): boolean {
+    if (!video || this.destroyed || this.attached) {
+      return false;
+    }
+
+    const mseMime = pickMseAvcMimeType();
+    if (typeof MediaSource === "undefined" || !MediaSource.isTypeSupported(mseMime)) {
+      this.failReady(new Error("MediaSource API is not available for MPEG-TS playback"));
+      return false;
+    }
+    this.mseMimeType = mseMime;
+
+    this.video = video;
+    this.attached = true;
+    this.mediaSource = new MediaSource();
+    this.objectUrl = URL.createObjectURL(this.mediaSource);
+
+    try {
+      video.muted = true;
+      video.playsInline = true;
+      video.src = this.objectUrl;
+      this.playbackRateTimer = window.setInterval(() => {
+        this.updateLivePlaybackRate();
+      }, 250);
+    } catch (err) {
+      this.attached = false;
+      this.failReady(err instanceof Error ? err : new Error("Failed to bind output video"));
+      return false;
+    }
+
+    const onSourceOpen = () => {
+      void this.onSourceOpen();
+    };
+
+    if (this.mediaSource.readyState === "open") {
+      onSourceOpen();
+    } else {
+      this.mediaSource.addEventListener("sourceopen", onSourceOpen, { once: true });
+    }
+
+    return true;
+  }
+
+  private failReady(err: Error): void {
+    this.readyReject?.(err);
+    this.readyResolve = null;
+    this.readyReject = null;
+  }
+
+  private markReady(): void {
+    if (this.ready) {
+      return;
+    }
+    this.ready = true;
+    this.readyResolve?.();
+    this.readyResolve = null;
+    this.readyReject = null;
+    for (const segment of this.pendingSegments) {
+      this.pushSegment(segment);
+    }
+    this.pendingSegments = [];
+  }
+
+  private async onSourceOpen(): Promise<void> {
+    if (this.destroyed || !this.mediaSource) {
+      return;
+    }
+
+    try {
+      const muxjsModule = await import("mux.js");
+      if (this.destroyed || !this.mediaSource) {
+        return;
+      }
+
+      const muxjs = muxjsModule.default as MuxJsModule;
+      this.transmuxer = new muxjs.mp4.Transmuxer();
+      this.transmuxer.on("data", (segment) => {
+        this.enqueueTransmuxedSegment(segment);
+      });
+
+      this.sourceBuffer = this.mediaSource.addSourceBuffer(this.mseMimeType);
+      this.sourceBuffer.mode = "sequence";
+      this.sourceBuffer.addEventListener("updateend", () => {
+        this.appending = false;
+        this.updateLivePlaybackRate();
+        if (this.pendingSeekToLive) {
+          this.pendingSeekToLive = false;
+          this.seekVideoToLiveEdge();
+        }
+        void this.drainAppendQueue();
+      });
+      this.markReady();
+      void this.drainAppendQueue();
+    } catch (err) {
+      this.failReady(err instanceof Error ? err : new Error("MPEG-TS demux setup failed"));
+    }
+  }
+
+  pushSegment(tsBytes: Uint8Array): void {
+    if (this.destroyed) {
+      return;
+    }
+    if (!this.pushChunk(tsBytes)) {
+      return;
+    }
+    this.flushSegment();
+  }
+
+  /** Feed bytes from an in-flight trickle segment. Call flushSegment() at EOF. */
+  pushChunk(tsBytes: Uint8Array): boolean {
+    if (this.destroyed) {
+      return false;
+    }
+    if (!this.ready || !this.transmuxer) {
+      this.pendingSegments.push(tsBytes);
+      if (this.pendingSegments.length > 8) {
+        this.pendingSegments.shift();
+      }
+      return false;
+    }
+    this.transmuxer.push(tsBytes);
+    this.bytesSinceFlush += tsBytes.byteLength;
+    this.flushSegmentIfNeeded();
+    return true;
+  }
+
+  /** Flush mux.js once the current trickle segment response has closed. */
+  flushSegment(): void {
+    if (this.destroyed || !this.ready || !this.transmuxer) {
+      return;
+    }
+    this.transmuxer.flush();
+    this.bytesSinceFlush = 0;
+    this.lastFlushMs = Date.now();
+  }
+
+  private enqueueTransmuxedSegment(segment: MuxSegment): void {
+    let payload: Uint8Array;
+    if (segment.initSegment) {
+      if (!this.appendedInit) {
+        payload = new Uint8Array(segment.initSegment.byteLength + segment.data.byteLength);
+        payload.set(segment.initSegment, 0);
+        payload.set(segment.data, segment.initSegment.byteLength);
+        this.appendedInit = true;
+      } else {
+        payload = segment.data;
+      }
+    } else {
+      payload = segment.data;
+    }
+    this.enqueueAppend(payload, this.shouldSeekToLiveEdge());
+  }
+
+  private flushSegmentIfNeeded(): void {
+    const now = Date.now();
+    if (
+      this.bytesSinceFlush >= PROGRESSIVE_FLUSH_MIN_BYTES ||
+      now - this.lastFlushMs >= PROGRESSIVE_FLUSH_INTERVAL_MS
+    ) {
+      this.flushSegment();
+    }
+  }
+
+  private shouldSeekToLiveEdge(): boolean {
+    const video = this.video;
+    if (!video) {
+      return false;
+    }
+    if (!this.playbackStarted || video.paused) {
+      this.playbackStarted = true;
+      return true;
+    }
+    if (video.buffered.length === 0) {
+      return false;
+    }
+
+    const end = video.buffered.end(video.buffered.length - 1);
+    if (end - video.currentTime > LIVE_EDGE_LAG_SECONDS) {
+      return true;
+    }
+    return false;
+  }
+
+  private seekVideoToLiveEdge(): void {
+    const video = this.video;
+    if (!video || video.buffered.length === 0) {
+      return;
+    }
+    try {
+      const end = video.buffered.end(video.buffered.length - 1);
+      if (end > 0.1) {
+        video.currentTime = Math.max(0, end - LIVE_EDGE_LAG_SECONDS);
+      }
+      void video.play().catch(() => undefined);
+    } catch {
+      // ignore seek failures while buffer is updating
+    }
+  }
+
+  private enqueueAppend(data: Uint8Array, seekToLive = false): void {
+    this.appendQueue.push({ data, seekToLive });
+    void this.drainAppendQueue();
+  }
+
+  private async drainAppendQueue(): Promise<void> {
+    if (this.destroyed || this.appending || !this.sourceBuffer || this.appendQueue.length === 0) {
+      return;
+    }
+    if (this.sourceBuffer.updating) {
+      return;
+    }
+
+    const next = this.appendQueue.shift();
+    if (!next) {
+      return;
+    }
+
+    this.appending = true;
+    try {
+      const chunk = new Uint8Array(next.data);
+      const buffer = chunk.buffer.slice(
+        chunk.byteOffset,
+        chunk.byteOffset + chunk.byteLength,
+      );
+      if (next.seekToLive) {
+        this.pendingSeekToLive = true;
+      }
+      this.sourceBuffer.appendBuffer(buffer);
+    } catch {
+      this.appending = false;
+    }
+  }
+
+  private updateLivePlaybackRate(): void {
+    const video = this.video;
+    if (!video || video.buffered.length === 0) {
+      return;
+    }
+
+    const bufferedEnd = video.buffered.end(video.buffered.length - 1);
+    const bufferedLag = bufferedEnd - video.currentTime;
+
+    let playbackRate = DEFAULT_LIVE_PLAYBACK_RATE;
+    if (bufferedLag < LOW_BUFFER_LAG_SECONDS) {
+      playbackRate = MIN_LIVE_PLAYBACK_RATE;
+    } else if (bufferedLag < TARGET_BUFFER_LAG_SECONDS) {
+      const lagScale =
+        (bufferedLag - LOW_BUFFER_LAG_SECONDS) /
+        (TARGET_BUFFER_LAG_SECONDS - LOW_BUFFER_LAG_SECONDS);
+      playbackRate =
+        MIN_LIVE_PLAYBACK_RATE +
+        (MAX_LIVE_PLAYBACK_RATE - MIN_LIVE_PLAYBACK_RATE) * lagScale;
+    }
+    video.playbackRate = playbackRate;
+  }
+
+  destroy(): void {
+    this.destroyed = true;
+    this.attached = false;
+    this.appendQueue = [];
+    this.pendingSegments = [];
+    this.transmuxer = null;
+    this.appendedInit = false;
+    this.playbackStarted = false;
+    if (this.playbackRateTimer !== null) {
+      window.clearInterval(this.playbackRateTimer);
+      this.playbackRateTimer = null;
+    }
+    this.bytesSinceFlush = 0;
+    this.lastFlushMs = 0;
+    this.sourceBuffer = null;
+
+    const mediaSource = this.mediaSource;
+    this.mediaSource = null;
+    if (mediaSource && mediaSource.readyState === "open") {
+      try {
+        mediaSource.endOfStream();
+      } catch {
+        // ignore
+      }
+    }
+
+    const video = this.video;
+    this.video = null;
+    const objectUrl = this.objectUrl;
+    this.objectUrl = null;
+    if (objectUrl) {
+      URL.revokeObjectURL(objectUrl);
+    }
+    if (video) {
+      try {
+        video.removeAttribute("src");
+        video.load();
+      } catch {
+        // ignore
+      }
+    }
+
+    this.ready = false;
+    this.appending = false;
+    const reject = this.readyReject;
+    this.readyResolve = null;
+    this.readyReject = null;
+    reject?.(new Error("Output player destroyed"));
+  }
+}
diff --git a/lib/dashboard/pymthouse-bff.ts b/lib/dashboard/pymthouse-bff.ts
new file mode 100644
index 0000000..b7593e5
--- /dev/null
+++ b/lib/dashboard/pymthouse-bff.ts
@@ -0,0 +1,202 @@
+import { PmtHouseError, getUtcCalendarMonthIsoBounds } from "@pymthouse/builder-sdk";
+import { createPmtHouseClientForPublicApp } from "@/lib/dashboard/device-flow";
+
+export type AccountUsageBalance = {
+  externalUserId: string;
+  balanceUsdMicros: string;
+  consumedUsdMicros: string;
+  lifetimeGrantedUsdMicros: string;
+  hasAccess: boolean;
+};
+
+export type AccountUsagePipelineRow = {
+  pipeline: string;
+  modelId: string;
+  requestCount: number;
+  networkFeeUsdMicros: string;
+  endUserBillableUsdMicros: string;
+};
+
+export type AccountUsagePayload = {
+  clientId: string;
+  period: { start: string; end: string };
+  priorPeriod: { start: string; end: string };
+  balance: AccountUsageBalance | null;
+  current: {
+    requestCount: number;
+    networkFeeUsdMicros: string;
+    endUserBillableUsdMicros: string;
+    pipelineModels: AccountUsagePipelineRow[];
+  };
+  prior: {
+    requestCount: number;
+    pipelineModels: AccountUsagePipelineRow[];
+  };
+};
+
+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;
+}
+
+function rollingPeriodDays(days: number, now = new Date()): {
+  startDate: string;
+  endDate: string;
+  priorStartDate: string;
+  priorEndDate: string;
+} {
+  const end = new Date(now);
+  end.setUTCHours(23, 59, 59, 999);
+  const start = new Date(end);
+  start.setUTCDate(start.getUTCDate() - (days - 1));
+  start.setUTCHours(0, 0, 0, 0);
+
+  const priorEnd = new Date(start);
+  priorEnd.setUTCMilliseconds(priorEnd.getUTCMilliseconds() - 1);
+  const priorStart = new Date(priorEnd);
+  priorStart.setUTCDate(priorStart.getUTCDate() - (days - 1));
+  priorStart.setUTCHours(0, 0, 0, 0);
+
+  return {
+    startDate: start.toISOString(),
+    endDate: end.toISOString(),
+    priorStartDate: priorStart.toISOString(),
+    priorEndDate: priorEnd.toISOString(),
+  };
+}
+
+async function fetchUsageBalance(
+  publicClientId: string,
+  externalUserId: string,
+): Promise<AccountUsageBalance | null> {
+  const issuerUrl = process.env.PYMTHOUSE_ISSUER_URL?.trim();
+  if (!issuerUrl) {
+    return null;
+  }
+  const appsOrigin = issuerUrl.replace(/\/api\/v1\/oidc\/?$/i, "");
+  const url = new URL(
+    `${appsOrigin}/api/v1/apps/${encodeURIComponent(publicClientId)}/usage/balance`,
+  );
+  url.searchParams.set("externalUserId", externalUserId);
+
+  const m2mId = process.env.PYMTHOUSE_M2M_CLIENT_ID?.trim();
+  const m2mSecret = process.env.PYMTHOUSE_M2M_CLIENT_SECRET?.trim();
+  if (!m2mId || !m2mSecret) {
+    return null;
+  }
+
+  const basic = Buffer.from(`${m2mId}:${m2mSecret}`).toString("base64");
+  const response = await fetch(url.toString(), {
+    method: "GET",
+    headers: {
+      Authorization: `Basic ${basic}`,
+      Accept: "application/json",
+    },
+    cache: "no-store",
+  });
+
+  if (!response.ok) {
+    return null;
+  }
+
+  const body = (await response.json()) as {
+    externalUserId?: string;
+    balanceUsdMicros?: string;
+    consumedUsdMicros?: string;
+    lifetimeGrantedUsdMicros?: string;
+    hasAccess?: boolean;
+  };
+
+  return {
+    externalUserId: body.externalUserId ?? externalUserId,
+    balanceUsdMicros: body.balanceUsdMicros ?? "0",
+    consumedUsdMicros: body.consumedUsdMicros ?? "0",
+    lifetimeGrantedUsdMicros: body.lifetimeGrantedUsdMicros ?? "0",
+    hasAccess: Boolean(body.hasAccess),
+  };
+}
+
+export async function fetchAccountUsageForExternalUser(input: {
+  externalUserId: string;
+  periodDays?: number;
+}): Promise<AccountUsagePayload> {
+  const publicClientId = readPublicClientId();
+  const days = input.periodDays ?? 30;
+  const period =
+    days === 30
+      ? (() => {
+          const month = getUtcCalendarMonthIsoBounds();
+          const priorMonthEnd = new Date(month.startDate);
+          priorMonthEnd.setUTCMilliseconds(priorMonthEnd.getUTCMilliseconds() - 1);
+          const priorMonthStart = new Date(
+            Date.UTC(
+              priorMonthEnd.getUTCFullYear(),
+              priorMonthEnd.getUTCMonth(),
+              1,
+              0,
+              0,
+              0,
+              0,
+            ),
+          );
+          return {
+            startDate: month.startDate,
+            endDate: month.endDate,
+            priorStartDate: priorMonthStart.toISOString(),
+            priorEndDate: priorMonthEnd.toISOString(),
+          };
+        })()
+      : rollingPeriodDays(days);
+
+  const client = createPmtHouseClientForPublicApp(publicClientId);
+
+  const [balance, currentScope, priorScope] = await Promise.all([
+    fetchUsageBalance(publicClientId, input.externalUserId),
+    client.fetchUsageForExternalUser({
+      externalUserId: input.externalUserId,
+      startDate: period.startDate,
+      endDate: period.endDate,
+    }),
+    client.fetchUsageForExternalUser({
+      externalUserId: input.externalUserId,
+      startDate: period.priorStartDate,
+      endDate: period.priorEndDate,
+    }),
+  ]);
+
+  const mapPipeline = (
+    rows: typeof currentScope.currentUser.pipelineModels,
+  ): AccountUsagePipelineRow[] =>
+    rows.map((row) => ({
+      pipeline: row.pipeline,
+      modelId: row.modelId,
+      requestCount: row.requestCount,
+      networkFeeUsdMicros: row.networkFeeUsdMicros,
+      endUserBillableUsdMicros: row.endUserBillableUsdMicros,
+    }));
+
+  return {
+    clientId: currentScope.clientId,
+    period: { start: period.startDate, end: period.endDate },
+    priorPeriod: { start: period.priorStartDate, end: period.priorEndDate },
+    balance,
+    current: {
+      requestCount: currentScope.currentUser.requestCount,
+      networkFeeUsdMicros: currentScope.currentUser.networkFeeUsdMicros,
+      endUserBillableUsdMicros: currentScope.currentUser.endUserBillableUsdMicros,
+      pipelineModels: mapPipeline(currentScope.currentUser.pipelineModels),
+    },
+    prior: {
+      requestCount: priorScope.currentUser.requestCount,
+      pipelineModels: mapPipeline(priorScope.currentUser.pipelineModels),
+    },
+  };
+}
diff --git a/lib/dashboard/pymthouse-keys-bff.ts b/lib/dashboard/pymthouse-keys-bff.ts
new file mode 100644
index 0000000..2ebf8d4
--- /dev/null
+++ b/lib/dashboard/pymthouse-keys-bff.ts
@@ -0,0 +1,183 @@
+import { PmtHouseError } from "@pymthouse/builder-sdk";
+
+export type DashboardApiKeyRow = {
+  id: string;
+  label: string | null;
+  prefix: string;
+  suffix: string;
+  status: string;
+  createdAt: string;
+  revokedAt: string | null;
+};
+
+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;
+}
+
+function readM2mAuthHeader(): string {
+  const m2mId = process.env.PYMTHOUSE_M2M_CLIENT_ID?.trim();
+  const m2mSecret = process.env.PYMTHOUSE_M2M_CLIENT_SECRET?.trim();
+  if (!m2mId || !m2mSecret) {
+    throw new PmtHouseError(
+      "PYMTHOUSE_M2M_CLIENT_ID and PYMTHOUSE_M2M_CLIENT_SECRET are required",
+      { status: 503, code: "pymthouse_required" },
+    );
+  }
+  return `Basic ${Buffer.from(`${m2mId}:${m2mSecret}`).toString("base64")}`;
+}
+
+function appsOrigin(): string {
+  const issuerUrl = process.env.PYMTHOUSE_ISSUER_URL?.trim();
+  if (!issuerUrl) {
+    throw new PmtHouseError("PYMTHOUSE_ISSUER_URL is required", {
+      status: 503,
+      code: "pymthouse_required",
+    });
+  }
+  return issuerUrl.replace(/\/api\/v1\/oidc\/?$/i, "");
+}
+
+function userKeysUrl(publicClientId: string, externalUserId: string): string {
+  return `${appsOrigin()}/api/v1/apps/${encodeURIComponent(publicClientId)}/users/${encodeURIComponent(externalUserId)}/keys`;
+}
+
+async function readErrorMessage(response: Response): Promise<string> {
+  try {
+    const body = (await response.json()) as { error?: string; error_description?: string };
+    return body.error_description ?? body.error ?? `Request failed (${response.status})`;
+  } catch {
+    return `Request failed (${response.status})`;
+  }
+}
+
+export async function listDashboardApiKeys(
+  externalUserId: string,
+): Promise<DashboardApiKeyRow[]> {
+  const publicClientId = readPublicClientId();
+  const response = await fetch(userKeysUrl(publicClientId, externalUserId), {
+    method: "GET",
+    headers: {
+      Authorization: readM2mAuthHeader(),
+      Accept: "application/json",
+    },
+    cache: "no-store",
+  });
+
+  if (!response.ok) {
+    throw new PmtHouseError(await readErrorMessage(response), {
+      status: response.status,
+      code: "api_keys_list_failed",
+    });
+  }
+
+  const body = (await response.json()) as { keys?: DashboardApiKeyRow[] };
+  return (body.keys ?? []).filter((row) => row.status === "active");
+}
+
+export async function ensureAppUserProvisioned(
+  publicClientId: string,
+  externalUserId: string,
+) {
+  const response = await fetch(`${appsOrigin()}/api/v1/apps/${encodeURIComponent(publicClientId)}/users`, {
+    method: "POST",
+    headers: {
+      Authorization: readM2mAuthHeader(),
+      Accept: "application/json",
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      externalUserId,
+      email: externalUserId,
+      status: "active",
+    }),
+    cache: "no-store",
+  });
+  if (!response.ok && response.status !== 409) {
+    throw new PmtHouseError(await readErrorMessage(response), {
+      status: response.status,
+      code: "app_user_provision_failed",
+    });
+  }
+}
+
+export async function createDashboardApiKey(input: {
+  externalUserId: string;
+  label?: string;
+}): Promise<{ apiKey: string; row: DashboardApiKeyRow }> {
+  const publicClientId = readPublicClientId();
+  await ensureAppUserProvisioned(publicClientId, input.externalUserId);
+
+  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",
+  });
+
+  if (!response.ok) {
+    throw new PmtHouseError(await readErrorMessage(response), {
+      status: response.status,
+      code: "api_key_create_failed",
+    });
+  }
+
+  const body = (await response.json()) as {
+    apiKey: string;
+    id: string;
+    prefix: string;
+    suffix: string;
+    label: string | null;
+    createdAt: string;
+  };
+
+  return {
+    apiKey: body.apiKey,
+    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",
+  });
+
+  if (!response.ok) {
+    throw new PmtHouseError(await readErrorMessage(response), {
+      status: response.status,
+      code: "api_key_revoke_failed",
+    });
+  }
+}
diff --git a/lib/dashboard/pymthouse-signing-bff.ts b/lib/dashboard/pymthouse-signing-bff.ts
new file mode 100644
index 0000000..7bb9c6c
--- /dev/null
+++ b/lib/dashboard/pymthouse-signing-bff.ts
@@ -0,0 +1,119 @@
+import { PmtHouseError } from "@pymthouse/builder-sdk";
+import { ensureAppUserProvisioned } from "@/lib/dashboard/pymthouse-keys-bff";
+
+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;
+}
+
+function readM2mAuthHeader(): string {
+  const m2mId = process.env.PYMTHOUSE_M2M_CLIENT_ID?.trim();
+  const m2mSecret = process.env.PYMTHOUSE_M2M_CLIENT_SECRET?.trim();
+  if (!m2mId || !m2mSecret) {
+    throw new PmtHouseError(
+      "PYMTHOUSE_M2M_CLIENT_ID and PYMTHOUSE_M2M_CLIENT_SECRET are required",
+      { status: 503, code: "pymthouse_required" },
+    );
+  }
+  return `Basic ${Buffer.from(`${m2mId}:${m2mSecret}`).toString("base64")}`;
+}
+
+function appsOrigin(): string {
+  const issuerUrl = process.env.PYMTHOUSE_ISSUER_URL?.trim();
+  if (!issuerUrl) {
+    throw new PmtHouseError("PYMTHOUSE_ISSUER_URL is required", {
+      status: 503,
+      code: "pymthouse_required",
+    });
+  }
+  return issuerUrl.replace(/\/api\/v1\/oidc\/?$/i, "");
+}
+
+async function readErrorMessage(response: Response): Promise<string> {
+  try {
+    const body = (await response.json()) as { error?: string; error_description?: string };
+    return body.error_description ?? body.error ?? `Request failed (${response.status})`;
+  } catch {
+    return `Request failed (${response.status})`;
+  }
+}
+
+export type MintedSigningToken = {
+  access_token: string;
+  expires_in: number;
+  scope: string;
+  token_type: string;
+};
+
+export async function mintDashboardUserSigningToken(input: {
+  externalUserId: string;
+  scope?: string;
+}): Promise<MintedSigningToken> {
+  const externalUserId = input.externalUserId.trim();
+  if (!externalUserId) {
+    throw new PmtHouseError("externalUserId is required", {
+      status: 400,
+      code: "invalid_request",
+    });
+  }
+
+  const publicClientId = readPublicClientId();
+  await ensureAppUserProvisioned(publicClientId, externalUserId);
+
+  const scope = input.scope?.trim() || "sign:job";
+  const url = `${appsOrigin()}/api/v1/apps/${encodeURIComponent(publicClientId)}/users/${encodeURIComponent(externalUserId)}/token`;
+
+  const response = await fetch(url, {
+    method: "POST",
+    headers: {
+      Authorization: readM2mAuthHeader(),
+      Accept: "application/json",
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ scope }),
+    cache: "no-store",
+  });
+
+  if (!response.ok) {
+    throw new PmtHouseError(await readErrorMessage(response), {
+      status: response.status,
+      code: "signing_token_mint_failed",
+    });
+  }
+
+  const body = (await response.json()) as Record<string, unknown>;
+  const accessToken =
+    typeof body.access_token === "string" ? body.access_token.trim() : "";
+  if (!accessToken) {
+    throw new PmtHouseError("Token response missing access_token", {
+      status: 502,
+      code: "invalid_token_response",
+    });
+  }
+
+  const expiresIn =
+    typeof body.expires_in === "number" && Number.isFinite(body.expires_in)
+      ? body.expires_in
+      : 900;
+
+  const scopeOut =
+    typeof body.scope === "string" && body.scope.trim() ? body.scope.trim() : scope;
+
+  return {
+    access_token: accessToken,
+    expires_in: expiresIn,
+    scope: scopeOut,
+    token_type:
+      typeof body.token_type === "string" && body.token_type.trim()
+        ? body.token_type.trim()
+        : "Bearer",
+  };
+}
diff --git a/lib/dashboard/sdk-streaming-example.ts b/lib/dashboard/sdk-streaming-example.ts
new file mode 100644
index 0000000..9b7dbad
--- /dev/null
+++ b/lib/dashboard/sdk-streaming-example.ts
@@ -0,0 +1,131 @@
+import type { Model } from "@/lib/dashboard/types";
+
+/** Public Dashboard origin used in SDK examples (device exchange facade). */
+export function getDashboardFacadeOrigin(): string {
+  const fromEnv = process.env.NEXT_PUBLIC_DASHBOARD_ORIGIN?.trim();
+  if (fromEnv) return fromEnv.replace(/\/$/, "");
+  if (typeof window !== "undefined" && window.location?.origin) {
+    return window.location.origin;
+  }
+  return "http://localhost:3001";
+}
+
+/** OIDC issuer for RFC 8628 device login (Keycloak clearinghouse realm). */
+export function getClearinghouseOidcIssuerUrl(): string {
+  return (
+    process.env.NEXT_PUBLIC_CLEARINGHOUSE_OIDC_ISSUER_URL?.trim() ||
+    process.env.NEXT_PUBLIC_SIGNER_OIDC_ISSUER_URL?.trim() ||
+    "http://127.0.0.1:8080/realms/clearinghouse"
+  ).replace(/\/$/, "");
+}
+
+/** Public app client id for device authorization (app_*). */
+export function getClearinghousePublicClientId(): string {
+  return (
+    process.env.NEXT_PUBLIC_CLEARINGHOUSE_PUBLIC_CLIENT_ID?.trim() || "app_demo"
+  );
+}
+
+/** Apache DMZ / remote signer base for discovery and payment hot path. */
+export function getClearinghouseSignerBaseUrl(): string {
+  return (
+    process.env.NEXT_PUBLIC_CLEARINGHOUSE_API_URL?.trim() ||
+    "http://127.0.0.1:8080"
+  ).replace(/\/$/, "");
+}
+
+export function isStreamingCapabilityModel(model: Model): boolean {
+  const id = model.id.toLowerCase();
+  return (
+    model.realtime === true ||
+    id.includes("streamdiffusion") ||
+    id.includes("live-video") ||
+    model.category === "Live Transcoding"
+  );
+}
+
+export function buildPythonSdkStreamingSnippet(model: Model): string {
+  const dashboardOrigin = getDashboardFacadeOrigin();
+  const issuerUrl = getClearinghouseOidcIssuerUrl();
+  const publicClientId = getClearinghousePublicClientId();
+  const signerBase = getClearinghouseSignerBaseUrl();
+  const discoveryUrl = `${signerBase}/discover-orchestrators?cap=${encodeURIComponent(model.id)}`;
+  const modelId = model.id.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+
+  return `import asyncio
+
+from livepeer_gateway.lv2v import StartJobRequest, start_lv2v
+from livepeer_gateway.media_publish import MediaPublishConfig, VideoOutputConfig
+
+# 1) Device login at the clearinghouse OIDC issuer (RFC 8628).
+# 2) Exchange the user access token for a long-lived signer JWT via the Dashboard facade.
+# 3) Stream with signer/discovery headers on the clearinghouse hot path.
+
+DASHBOARD_ORIGIN = "${dashboardOrigin}"
+OIDC_ISSUER_URL = "${issuerUrl}"
+PUBLIC_CLIENT_ID = "${publicClientId}"
+SIGNER_BASE_URL = "${signerBase}"
+DISCOVERY_URL = "${discoveryUrl}"
+MODEL_ID = "${modelId}"
+
+
+async def main() -> None:
+    job = start_lv2v(
+        orch_url=None,
+        req=StartJobRequest(model_id=MODEL_ID),
+        billing_url=DASHBOARD_ORIGIN,
+        issuer_url=OIDC_ISSUER_URL,
+        signer_url=SIGNER_BASE_URL,
+        discovery_url=DISCOVERY_URL,
+        oidc_client_id=PUBLIC_CLIENT_ID,
+        scope="sign:job openid profile",
+        headless=True,
+    )
+
+    print("publish_url:", job.publish_url)
+    print("subscribe_url:", job.subscribe_url)
+
+    media = job.start_media(MediaPublishConfig(tracks=[VideoOutputConfig(fps=30.0)]))
+    # await media.write_frame(frame)  # your frames here
+    await job.close()
+
+
+if __name__ == "__main__":
+    asyncio.run(main())`;
+}
+
+export function getStreamingFacadeEndpointLabel(_model: Model): string {
+  const origin = getDashboardFacadeOrigin();
+  return `POST ${origin}/api/pymthouse/keys/exchange → POST ${origin}/api/gateway/sessions`;
+}
+
+export function buildGatewayStreamingSnippet(model: Model): string {
+  const dashboardOrigin = getDashboardFacadeOrigin();
+  const modelId = model.id.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+
+  return `import { BrowserGatewayClient } from "@pymthouse/builder-sdk/gateway/client";
+
+const DASHBOARD_ORIGIN = "${dashboardOrigin}";
+const API_KEY = process.env.PMTH_API_KEY!; // pmth_* from Settings → API keys
+const MODEL_ID = "${modelId}";
+
+const client = new BrowserGatewayClient({ baseUrl: DASHBOARD_ORIGIN });
+
+await client.connect({
+  type: "apiKey",
+  apiKey: API_KEY,
+  facadeUrl: DASHBOARD_ORIGIN,
+  scope: "sign:job",
+});
+
+const { sessionId, manifestId } = await client.startSession({ modelId: MODEL_ID });
+console.log("session:", sessionId, "manifest:", manifestId);
+
+// Publish JPEG segments (e.g. from canvas.toBlob) via same-origin relay:
+// await client.publishSegment(bytes, { contentType: "image/jpeg" });
+
+// Poll orchestrator output segments:
+// const out = await client.subscribeSegment();
+
+await client.stop();`;
+}
diff --git a/lib/dashboard/signing-token-storage.ts b/lib/dashboard/signing-token-storage.ts
new file mode 100644
index 0000000..d559e9d
--- /dev/null
+++ b/lib/dashboard/signing-token-storage.ts
@@ -0,0 +1,59 @@
+const STORAGE_KEY = "livepeer.dashboard.signingToken";
+
+export type StoredSigningToken = {
+  externalUserId: string;
+  accessToken: string;
+  expiresAtMs: number;
+  scope: string;
+};
+
+export function getStoredSigningToken(
+  externalUserId: string,
+): StoredSigningToken | null {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) {
+      return null;
+    }
+    const parsed = JSON.parse(raw) as StoredSigningToken;
+    if (
+      parsed.externalUserId !== externalUserId.trim() ||
+      typeof parsed.accessToken !== "string" ||
+      !parsed.accessToken.trim() ||
+      typeof parsed.expiresAtMs !== "number"
+    ) {
+      return null;
+    }
+    if (parsed.expiresAtMs <= Date.now() + 5_000) {
+      return null;
+    }
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+
+export function setStoredSigningToken(entry: StoredSigningToken): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(entry));
+  } catch {
+    // ignore quota / private mode
+  }
+}
+
+export function clearStoredSigningToken(): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+  try {
+    localStorage.removeItem(STORAGE_KEY);
+  } catch {
+    // ignore
+  }
+}
diff --git a/lib/dashboard/streaming-playground.ts b/lib/dashboard/streaming-playground.ts
new file mode 100644
index 0000000..1b5f938
--- /dev/null
+++ b/lib/dashboard/streaming-playground.ts
@@ -0,0 +1,76 @@
+import type { Model, PlaygroundConfig } from "@/lib/dashboard/types";
+
+/** Discovery capability ids that get the LV2V webcam / gateway playground. */
+export function isLv2vPlaygroundCapability(capability: string): boolean {
+  const id = capability.toLowerCase();
+  return (
+    id.includes("streamdiffusion") ||
+    id === "live-video-to-video" ||
+    id.startsWith("live-video")
+  );
+}
+
+/**
+ * model_id for POST /api/gateway/sessions and signer discovery caps.
+ * Discovery page id may differ from orchestrator pipeline model name.
+ */
+export function resolveGatewayModelId(capability: string): string {
+  const id = capability.trim();
+  const lower = id.toLowerCase();
+  if (lower === "streamdiffusion") {
+    return "streamdiffusion";
+  }
+  if (lower === "live-video-to-video") {
+    return "streamdiffusion-sdxl";
+  }
+  return id;
+}
+
+export function buildLv2vPlaygroundConfig(capability: string): PlaygroundConfig {
+  return {
+    fields: [
+      {
+        name: "prompt",
+        label: "Prompt",
+        type: "textarea",
+        placeholder: "Describe the look or style for the stream…",
+        description: "Optional pipeline prompt (passed when starting the LV2V job).",
+      },
+      {
+        name: "style",
+        label: "Style preset",
+        type: "select",
+        options: ["none", "cinematic", "anime", "watercolor", "neon", "sketch"],
+        defaultValue: "none",
+        description: "Local preview label only until full pipeline params are wired.",
+      },
+      {
+        name: "strength",
+        label: "Strength",
+        type: "range",
+        min: 0,
+        max: 1,
+        step: 0.05,
+        defaultValue: 0.6,
+      },
+    ],
+    outputType: "video",
+    playgroundVariant: "webcam",
+    mockOutputUrl: "https://picsum.photos/seed/streamdiffusion/640/360",
+  };
+}
+
+export function enrichDiscoveryModelForStreaming(model: Model): Model {
+  if (!isLv2vPlaygroundCapability(model.id)) {
+    return model;
+  }
+
+  return {
+    ...model,
+    realtime: true,
+    category:
+      model.category === "Language" ? "Video Generation" : model.category,
+    gatewayModelId: resolveGatewayModelId(model.id),
+    playgroundConfig: model.playgroundConfig ?? buildLv2vPlaygroundConfig(model.id),
+  };
+}
diff --git a/lib/dashboard/types.ts b/lib/dashboard/types.ts
index eca492e..8e23bd7 100644
--- a/lib/dashboard/types.ts
+++ b/lib/dashboard/types.ts
@@ -85,6 +85,8 @@ export interface Model {
   featured?: boolean;
   /** Supports streaming (WebRTC) inference in addition to request/response. The differentiator on the network — flagged as a capability pill and filterable on Explore. */
   realtime?: boolean;
+  /** LV2V model_id for gateway sessions when different from discovery capability `id`. */
+  gatewayModelId?: string;
   /** ISO-8601 date the model was published on the network. Drives the "NEW" badge and Recently-added sort. */
   releasedAt?: string;
   tags?: string[];
diff --git a/lib/dashboard/usage-capability-display.ts b/lib/dashboard/usage-capability-display.ts
new file mode 100644
index 0000000..9bd2524
--- /dev/null
+++ b/lib/dashboard/usage-capability-display.ts
@@ -0,0 +1,99 @@
+import type { AccountUsagePipelineRow } from "@/lib/dashboard/pymthouse-bff";
+
+const CAPABILITY_COLORS = [
+  "#4ade80",
+  "#38bdf8",
+  "#a78bfa",
+  "#fb923c",
+  "#f472b6",
+  "#facc15",
+  "#2dd4bf",
+  "#818cf8",
+];
+
+export type UsageCapabilityRow = AccountUsagePipelineRow & {
+  id: string;
+  name: string;
+  color: string;
+  spendUsd: number;
+  data: number[];
+  priorSum: number;
+  delta: number;
+};
+
+function humanizePipelineModel(pipeline: string, modelId: string): string {
+  const segment = modelId && modelId !== "*" ? modelId : pipeline;
+  const raw = segment.includes(":") ? segment.split(":").slice(-1)[0]! : segment;
+  return raw
+    .split(/[-_./|:]+/)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
+}
+
+function microsToUsd(micros: string): number {
+  try {
+    return Number(BigInt(micros)) / 1_000_000;
+  } catch {
+    return 0;
+  }
+}
+
+function distributeDaily(total: number, days: number): number[] {
+  if (days <= 0) return [];
+  if (total <= 0) return Array.from({ length: days }, () => 0);
+  const base = Math.floor(total / days);
+  const remainder = total % days;
+  return Array.from({ length: days }, (_, index) => base + (index < remainder ? 1 : 0));
+}
+
+export function buildUsageCapabilityRows(input: {
+  current: AccountUsagePipelineRow[];
+  prior: AccountUsagePipelineRow[];
+  periodDays: number;
+}): UsageCapabilityRow[] {
+  const priorByKey = new Map(
+    input.prior.map((row) => [`${row.pipeline}|${row.modelId}`, row]),
+  );
+
+  return input.current
+    .map((row, index) => {
+      const key = `${row.pipeline}|${row.modelId}`;
+      const priorRow = priorByKey.get(key);
+      const priorSum = priorRow?.requestCount ?? 0;
+      const delta =
+        priorSum > 0 ? ((row.requestCount - priorSum) / priorSum) * 100 : row.requestCount > 0 ? 100 : 0;
+      const spendUsd = microsToUsd(row.endUserBillableUsdMicros || row.networkFeeUsdMicros);
+      return {
+        ...row,
+        id: key,
+        name: humanizePipelineModel(row.pipeline, row.modelId),
+        color: CAPABILITY_COLORS[index % CAPABILITY_COLORS.length]!,
+        spendUsd,
+        data: distributeDaily(row.requestCount, input.periodDays),
+        priorSum,
+        delta,
+      };
+    })
+    .sort((a, b) => b.requestCount - a.requestCount);
+}
+
+export function microsToUsdDisplay(micros: string): string {
+  const usd = microsToUsd(micros);
+  if (usd >= 100) return usd.toFixed(2);
+  if (usd >= 1) return usd.toFixed(2);
+  if (usd >= 0.01) return usd.toFixed(3);
+  return usd.toFixed(4);
+}
+
+export function formatPeriodResetLabel(periodEndIso: string): string {
+  try {
+    const end = new Date(periodEndIso);
+    const next = new Date(
+      Date.UTC(end.getUTCFullYear(), end.getUTCMonth() + 1, 1, 0, 0, 0, 0),
+    );
+    return next.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+  } catch {
+    return "next period";
+  }
+}
diff --git a/lib/dashboard/useAccountUsage.ts b/lib/dashboard/useAccountUsage.ts
new file mode 100644
index 0000000..41c1dba
--- /dev/null
+++ b/lib/dashboard/useAccountUsage.ts
@@ -0,0 +1,48 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import type { AccountUsagePayload } from "@/lib/dashboard/pymthouse-bff";
+
+export type AccountUsageState =
+  | { status: "idle" }
+  | { status: "loading" }
+  | { status: "ready"; data: AccountUsagePayload }
+  | { status: "error"; message: string };
+
+export function useAccountUsage(externalUserId: string | undefined, periodDays = 30) {
+  const [state, setState] = useState<AccountUsageState>({ status: "idle" });
+
+  const load = useCallback(async () => {
+    if (!externalUserId?.trim()) {
+      setState({ status: "error", message: "Sign in to load usage for your account." });
+      return;
+    }
+
+    setState({ status: "loading" });
+    try {
+      const params = new URLSearchParams({
+        externalUserId: externalUserId.trim(),
+        days: String(periodDays),
+      });
+      const response = await fetch(`/api/pymthouse/account-usage?${params}`);
+      const body = (await response.json()) as AccountUsagePayload & {
+        error?: string;
+      };
+      if (!response.ok) {
+        throw new Error(body.error ?? `Usage fetch failed (${response.status})`);
+      }
+      setState({ status: "ready", data: body });
+    } catch (error) {
+      setState({
+        status: "error",
+        message: error instanceof Error ? error.message : "Failed to load usage",
+      });
+    }
+  }, [externalUserId, periodDays]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  return { ...state, reload: load };
+}
diff --git a/lib/dashboard/useApiKeys.ts b/lib/dashboard/useApiKeys.ts
new file mode 100644
index 0000000..115be2e
--- /dev/null
+++ b/lib/dashboard/useApiKeys.ts
@@ -0,0 +1,94 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import type { DashboardApiKeyRow } from "@/lib/dashboard/pymthouse-keys-bff";
+
+export type ApiKeysState =
+  | { status: "idle" }
+  | { status: "loading" }
+  | { status: "ready"; keys: DashboardApiKeyRow[] }
+  | { status: "error"; message: string };
+
+export function useApiKeys(externalUserId: string | undefined) {
+  const [state, setState] = useState<ApiKeysState>({ status: "idle" });
+
+  const load = useCallback(async () => {
+    if (!externalUserId?.trim()) {
+      setState({
+        status: "error",
+        message: "Sign in to manage API keys for your account.",
+      });
+      return;
+    }
+
+    setState({ status: "loading" });
+    try {
+      const params = new URLSearchParams({ externalUserId: externalUserId.trim() });
+      const response = await fetch(`/api/pymthouse/keys?${params}`);
+      const body = (await response.json()) as { keys?: DashboardApiKeyRow[]; error?: string };
+      if (!response.ok) {
+        throw new Error(body.error ?? `API keys fetch failed (${response.status})`);
+      }
+      setState({ status: "ready", keys: body.keys ?? [] });
+    } catch (error) {
+      setState({
+        status: "error",
+        message: error instanceof Error ? error.message : "Failed to load API keys",
+      });
+    }
+  }, [externalUserId]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const createKey = useCallback(
+    async (label?: string) => {
+      if (!externalUserId?.trim()) {
+        throw new Error("Sign in required");
+      }
+      const response = await fetch("/api/pymthouse/keys", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          externalUserId: externalUserId.trim(),
+          label,
+        }),
+      });
+      const body = (await response.json()) as {
+        apiKey?: string;
+        row?: DashboardApiKeyRow;
+        error?: string;
+      };
+      if (!response.ok || !body.apiKey) {
+        throw new Error(body.error ?? `Create failed (${response.status})`);
+      }
+      await load();
+      return body.apiKey;
+    },
+    [externalUserId, load],
+  );
+
+  const revokeKey = useCallback(
+    async (keyId: string) => {
+      if (!externalUserId?.trim()) {
+        throw new Error("Sign in required");
+      }
+      const params = new URLSearchParams({
+        externalUserId: externalUserId.trim(),
+        keyId,
+      });
+      const response = await fetch(`/api/pymthouse/keys?${params}`, {
+        method: "DELETE",
+      });
+      const body = (await response.json()) as { error?: string };
+      if (!response.ok) {
+        throw new Error(body.error ?? `Revoke failed (${response.status})`);
+      }
+      await load();
+    },
+    [externalUserId, load],
+  );
+
+  return { state, reload: load, createKey, revokeKey };
+}
diff --git a/lib/dashboard/useDiscoveryModel.ts b/lib/dashboard/useDiscoveryModel.ts
new file mode 100644
index 0000000..03dcfa4
--- /dev/null
+++ b/lib/dashboard/useDiscoveryModel.ts
@@ -0,0 +1,63 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { Model } from "@/lib/dashboard/types";
+import { DEFAULT_DISCOVERY_SERVICE_TYPE } from "@/lib/discovery/constants";
+
+type ModelState =
+  | { status: "loading" }
+  | { status: "ready"; model: Model }
+  | { status: "not_found" }
+  | { status: "error"; message: string };
+
+export function useDiscoveryModel(capabilityId: string | undefined): ModelState {
+  const [state, setState] = useState<ModelState>({ status: "loading" });
+
+  useEffect(() => {
+    if (!capabilityId) {
+      setState({ status: "not_found" });
+      return;
+    }
+
+    let cancelled = false;
+    setState({ status: "loading" });
+
+    const params = new URLSearchParams({ serviceType: DEFAULT_DISCOVERY_SERVICE_TYPE });
+    const path = `/api/discovery/models/${encodeURIComponent(capabilityId)}?${params}`;
+
+    void (async () => {
+      try {
+        const response = await fetch(path);
+        const body = (await response.json()) as { model?: Model; error?: string };
+
+        if (cancelled) return;
+
+        if (response.status === 404) {
+          setState({ status: "not_found" });
+          return;
+        }
+        if (!response.ok || !body.model) {
+          setState({
+            status: "error",
+            message: body.error ?? `Failed to load capability (${response.status})`,
+          });
+          return;
+        }
+
+        setState({ status: "ready", model: body.model });
+      } catch (error) {
+        if (cancelled) return;
+        setState({
+          status: "error",
+          message: error instanceof Error ? error.message : "Failed to load capability",
+        });
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [capabilityId]);
+
+  return state;
+}
diff --git a/lib/dashboard/useExploreModels.ts b/lib/dashboard/useExploreModels.ts
new file mode 100644
index 0000000..eb52ab7
--- /dev/null
+++ b/lib/dashboard/useExploreModels.ts
@@ -0,0 +1,86 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import type { ExploreApiResponse } from "@/lib/discovery/types";
+import type { Model } from "@/lib/dashboard/types";
+import {
+  DEFAULT_DISCOVERY_SERVICE_TYPE,
+  type DiscoveryServiceType,
+} from "@/lib/discovery/constants";
+
+export type { DiscoveryServiceType } from "@/lib/discovery/constants";
+
+type ExploreState =
+  | { status: "loading"; models: Model[] }
+  | { status: "ready"; models: Model[]; capabilityCount: number; serviceType: string }
+  | { status: "error"; models: Model[]; error: string };
+
+let exploreCache: {
+  key: string;
+  payload: ExploreApiResponse;
+  fetchedAt: number;
+} | null = null;
+
+const CACHE_TTL_MS = 60_000;
+
+export function useExploreModels(
+  serviceType: DiscoveryServiceType = DEFAULT_DISCOVERY_SERVICE_TYPE,
+): ExploreState & { reload: () => void } {
+  const [state, setState] = useState<ExploreState>({ status: "loading", models: [] });
+  const cacheKey = serviceType;
+
+  const load = useCallback(async () => {
+    const cached =
+      exploreCache &&
+      exploreCache.key === cacheKey &&
+      Date.now() - exploreCache.fetchedAt < CACHE_TTL_MS
+        ? exploreCache.payload
+        : null;
+
+    if (cached) {
+      setState({
+        status: "ready",
+        models: cached.models,
+        capabilityCount: cached.capabilityCount,
+        serviceType: cached.serviceType,
+      });
+      return;
+    }
+
+    setState((prev) => ({ ...prev, status: "loading" }));
+
+    try {
+      const params = new URLSearchParams({ serviceType });
+      const response = await fetch(`/api/discovery/explore?${params}`);
+      const body = (await response.json()) as ExploreApiResponse & { error?: string };
+
+      if (!response.ok) {
+        throw new Error(body.error ?? `Explore fetch failed (${response.status})`);
+      }
+
+      exploreCache = { key: cacheKey, payload: body, fetchedAt: Date.now() };
+      setState({
+        status: "ready",
+        models: body.models,
+        capabilityCount: body.capabilityCount,
+        serviceType: body.serviceType,
+      });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Failed to load capabilities";
+      setState({ status: "error", models: [], error: message });
+    }
+  }, [cacheKey, serviceType]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const reload = useCallback(() => {
+    if (exploreCache?.key === cacheKey) {
+      exploreCache = null;
+    }
+    void load();
+  }, [cacheKey, load]);
+
+  return { ...state, reload };
+}
diff --git a/lib/dashboard/useSigningSession.ts b/lib/dashboard/useSigningSession.ts
new file mode 100644
index 0000000..7888bc7
--- /dev/null
+++ b/lib/dashboard/useSigningSession.ts
@@ -0,0 +1,167 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { fetchSigningToken } from "@/lib/dashboard/fetch-signing-token";
+import {
+  clearStoredSigningToken,
+  getStoredSigningToken,
+  setStoredSigningToken,
+} from "@/lib/dashboard/signing-token-storage";
+
+export type SigningSessionState =
+  | { status: "idle" }
+  | { status: "loading" }
+  | {
+      status: "ready";
+      accessToken: string;
+      expiresAtMs: number;
+      scope: string;
+    }
+  | { status: "missing_user" }
+  | { status: "error"; message: string };
+
+const REFRESH_RATIO = 0.8;
+const MIN_REFRESH_LEAD_MS = 30_000;
+
+function refreshDelayMs(expiresInSec: number): number {
+  const ttlMs = expiresInSec * 1000;
+  return Math.max(MIN_REFRESH_LEAD_MS, Math.floor(ttlMs * REFRESH_RATIO));
+}
+
+export function useSigningSession(enabled: boolean, externalUserId: string | undefined) {
+  const [state, setState] = useState<SigningSessionState>({ status: "idle" });
+  const refreshTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const userIdRef = useRef<string | null>(null);
+
+  const clearRefreshTimer = useCallback(() => {
+    if (refreshTimerRef.current) {
+      clearTimeout(refreshTimerRef.current);
+      refreshTimerRef.current = null;
+    }
+  }, []);
+
+  const mintToken = useCallback(
+    async (userId: string, options?: { skipCache?: boolean }): Promise<string> => {
+      const trimmed = userId.trim();
+      userIdRef.current = trimmed;
+
+      if (!options?.skipCache) {
+        const cached = getStoredSigningToken(trimmed);
+        if (cached) {
+          setState({
+            status: "ready",
+            accessToken: cached.accessToken,
+            expiresAtMs: cached.expiresAtMs,
+            scope: cached.scope,
+          });
+          const remainingMs = cached.expiresAtMs - Date.now();
+          clearRefreshTimer();
+          refreshTimerRef.current = setTimeout(() => {
+            if (userIdRef.current === trimmed) {
+              void mintToken(trimmed, { skipCache: true });
+            }
+          }, Math.max(MIN_REFRESH_LEAD_MS, Math.floor(remainingMs * REFRESH_RATIO)));
+          return cached.accessToken;
+        }
+      }
+
+      setState({ status: "loading" });
+      try {
+        const minted = await fetchSigningToken(trimmed);
+        const expiresAtMs = Date.now() + minted.expires_in * 1000;
+        setStoredSigningToken({
+          externalUserId: trimmed,
+          accessToken: minted.access_token,
+          expiresAtMs,
+          scope: minted.scope,
+        });
+        setState({
+          status: "ready",
+          accessToken: minted.access_token,
+          expiresAtMs,
+          scope: minted.scope,
+        });
+
+        clearRefreshTimer();
+        refreshTimerRef.current = setTimeout(() => {
+          if (userIdRef.current === trimmed) {
+            void mintToken(trimmed, { skipCache: true });
+          }
+        }, refreshDelayMs(minted.expires_in));
+
+        return minted.access_token;
+      } catch (error) {
+        const message =
+          error instanceof Error ? error.message : "Signing token mint failed";
+        setState({ status: "error", message });
+        throw error instanceof Error ? error : new Error(message);
+      }
+    },
+    [clearRefreshTimer],
+  );
+
+  const bootstrap = useCallback(async () => {
+    const userId = externalUserId?.trim();
+    if (!userId) {
+      setState({ status: "missing_user" });
+      return;
+    }
+    await mintToken(userId);
+  }, [externalUserId, mintToken]);
+
+  const ensureAccessToken = useCallback(async () => {
+    if (
+      state.status === "ready" &&
+      state.expiresAtMs > Date.now() + 5_000 &&
+      userIdRef.current === externalUserId?.trim()
+    ) {
+      return state.accessToken;
+    }
+    const userId = externalUserId?.trim();
+    if (!userId) {
+      throw new Error("Sign in to stream");
+    }
+    return mintToken(userId);
+  }, [externalUserId, mintToken, state]);
+
+  const clearSession = useCallback(() => {
+    userIdRef.current = null;
+    clearStoredSigningToken();
+    clearRefreshTimer();
+    setState({ status: "missing_user" });
+  }, [clearRefreshTimer]);
+
+  useEffect(() => {
+    if (!enabled) {
+      clearRefreshTimer();
+      setState({ status: "idle" });
+      return;
+    }
+    void bootstrap();
+    return () => {
+      clearRefreshTimer();
+    };
+  }, [enabled, bootstrap, clearRefreshTimer]);
+
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const userId = externalUserId?.trim();
+    if (!userId) {
+      setState({ status: "missing_user" });
+      return;
+    }
+    if (userIdRef.current && userIdRef.current !== userId) {
+      clearStoredSigningToken();
+      void mintToken(userId);
+    }
+  }, [enabled, externalUserId, mintToken]);
+
+  return {
+    state,
+    refresh: bootstrap,
+    ensureAccessToken,
+    clearSession,
+  };
+}
diff --git a/lib/discovery/client.ts b/lib/discovery/client.ts
new file mode 100644
index 0000000..96871a6
--- /dev/null
+++ b/lib/discovery/client.ts
@@ -0,0 +1,102 @@
+import { readDiscoveryServiceUrl } from "./config";
+import { DEFAULT_DISCOVERY_SERVICE_TYPE, type DiscoveryServiceType } from "./constants";
+import { mapCapabilityToModel } from "./map-to-model";
+import type {
+  DiscoveryCapabilitiesResponse,
+  DiscoveryFreshnessResponse,
+  DiscoveryQueryResponse,
+  ExploreApiResponse,
+} from "./types";
+
+export { DEFAULT_DISCOVERY_SERVICE_TYPE, type DiscoveryServiceType } from "./constants";
+
+async function discoveryFetch<T>(path: string, init?: RequestInit): Promise<T> {
+  const baseUrl = readDiscoveryServiceUrl();
+  const response = await fetch(`${baseUrl}${path}`, {
+    ...init,
+    headers: {
+      Accept: "application/json",
+      ...(init?.headers ?? {}),
+    },
+    next: { revalidate: 60 },
+  });
+
+  if (!response.ok) {
+    const body = await response.text();
+    throw new Error(`Discovery Service ${response.status}: ${body || response.statusText}`);
+  }
+
+  return response.json() as Promise<T>;
+}
+
+export async function fetchDiscoveryCapabilities(
+  serviceType: DiscoveryServiceType = DEFAULT_DISCOVERY_SERVICE_TYPE,
+): Promise<DiscoveryCapabilitiesResponse> {
+  const params = new URLSearchParams({ serviceType });
+  return discoveryFetch<DiscoveryCapabilitiesResponse>(
+    `/v1/discovery/capabilities?${params}`,
+  );
+}
+
+export async function fetchDiscoveryFreshness(): Promise<DiscoveryFreshnessResponse> {
+  return discoveryFetch<DiscoveryFreshnessResponse>("/v1/discovery/freshness");
+}
+
+export async function queryDiscoveryCapabilities(
+  capabilities: string[],
+  serviceType: DiscoveryServiceType = DEFAULT_DISCOVERY_SERVICE_TYPE,
+): Promise<DiscoveryQueryResponse> {
+  if (capabilities.length === 0) {
+    return { results: {} };
+  }
+
+  return discoveryFetch<DiscoveryQueryResponse>("/v1/discovery/query", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      capabilities,
+      serviceTypes: [serviceType],
+      topN: 50,
+      sortBy: "avail",
+    }),
+  });
+}
+
+export async function fetchExploreModels(
+  serviceType: DiscoveryServiceType = DEFAULT_DISCOVERY_SERVICE_TYPE,
+): Promise<ExploreApiResponse> {
+  const [capabilitiesResponse, freshness] = await Promise.all([
+    fetchDiscoveryCapabilities(serviceType),
+    fetchDiscoveryFreshness().catch(() => undefined),
+  ]);
+
+  const entries = capabilitiesResponse.entries ?? [];
+  const capabilityNames =
+    capabilitiesResponse.capabilities.length > 0
+      ? capabilitiesResponse.capabilities
+      : entries.map((entry) => entry.capability);
+
+  const entryByCapability = new Map(entries.map((entry) => [entry.capability, entry]));
+
+  const queryResponse = await queryDiscoveryCapabilities(capabilityNames, serviceType);
+
+  const models = capabilityNames.map((capability) =>
+    mapCapabilityToModel(
+      capability,
+      entryByCapability.get(capability),
+      queryResponse.results[capability] ?? [],
+    ),
+  );
+
+  models.sort((a, b) => {
+    if (a.status !== b.status) return a.status === "hot" ? -1 : 1;
+    return b.orchestrators - a.orchestrators;
+  });
+
+  return {
+    models,
+    capabilityCount: capabilityNames.length,
+    serviceType,
+    freshness,
+  };
+}
diff --git a/lib/discovery/config.ts b/lib/discovery/config.ts
new file mode 100644
index 0000000..d3911d5
--- /dev/null
+++ b/lib/discovery/config.ts
@@ -0,0 +1,7 @@
+export function readDiscoveryServiceUrl(): string {
+  const url = process.env.DISCOVERY_SERVICE_URL?.trim();
+  if (!url) {
+    throw new Error("DISCOVERY_SERVICE_URL is not configured");
+  }
+  return url.replace(/\/$/, "");
+}
diff --git a/lib/discovery/constants.ts b/lib/discovery/constants.ts
new file mode 100644
index 0000000..b0abb0e
--- /dev/null
+++ b/lib/discovery/constants.ts
@@ -0,0 +1,3 @@
+export const DEFAULT_DISCOVERY_SERVICE_TYPE = "legacy" as const;
+
+export type DiscoveryServiceType = "legacy" | "registry";
diff --git a/lib/discovery/map-to-model.ts b/lib/discovery/map-to-model.ts
new file mode 100644
index 0000000..a04ad50
--- /dev/null
+++ b/lib/discovery/map-to-model.ts
@@ -0,0 +1,119 @@
+import type { Model, ModelCategory, ModelStatus, PricingUnit } from "@/lib/dashboard/types";
+import { enrichDiscoveryModelForStreaming } from "@/lib/dashboard/streaming-playground";
+import type { DiscoveryCapabilityEntry, DiscoveryDatasetRow } from "./types";
+
+function inferCategory(capability: string): ModelCategory {
+  const c = capability.toLowerCase();
+
+  if (c.startsWith("video:transcode") || c === "video:live.rtmp") {
+    return "Live Transcoding";
+  }
+  if (
+    c.includes("streamdiffusion") ||
+    c.includes("stable-video") ||
+    c.includes("img2vid") ||
+    c.startsWith("video:")
+  ) {
+    return "Video Generation";
+  }
+  if (
+    c.includes("whisper") ||
+    c.startsWith("openai:audio") ||
+    c.includes("tts") ||
+    c.includes("parler")
+  ) {
+    return "Speech";
+  }
+  if (
+    c.startsWith("openai:images") ||
+    c.includes("flux") ||
+    c.includes("sdxl") ||
+    c.includes("diffusion") ||
+    c.includes("pix2pix") ||
+    c.includes("upscaler") ||
+    c.includes("realvis") ||
+    c.includes("instruct-pix")
+  ) {
+    return "Image Generation";
+  }
+  if (c.includes("sam2") || c.includes("vision")) {
+    return "Video Understanding";
+  }
+  return "Language";
+}
+
+function inferPricingUnit(workUnit: string | undefined, capability: string): PricingUnit {
+  if (workUnit === "tokens") return "M Tokens";
+  if (workUnit?.includes("second")) return "Second";
+  if (capability.startsWith("video:")) return "Minute";
+  return "Request";
+}
+
+function humanizeCapabilityName(capability: string): string {
+  const segment = capability.includes(":")
+    ? capability.split(":").slice(-1)[0]!
+    : capability;
+  return segment
+    .split(/[-_./]+/)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
+}
+
+function aggregateRows(rows: DiscoveryDatasetRow[]): {
+  orchestrators: number;
+  status: ModelStatus;
+  latency: number;
+  price: number;
+  realtime: boolean;
+} {
+  const orchUris = new Set(rows.map((row) => row.orchUri).filter(Boolean));
+  const warm = rows.some((row) => row.avail > 0 || row.totalCap > 0);
+  const latencies = rows
+    .map((row) => row.avgLatMs ?? row.bestLatMs)
+    .filter((value): value is number => value != null && value > 0);
+  const prices = rows.map((row) => row.pricePerUnit).filter((value) => value > 0);
+
+  return {
+    orchestrators: orchUris.size,
+    status: warm ? "hot" : "cold",
+    latency:
+      latencies.length > 0
+        ? latencies.reduce((sum, value) => sum + value, 0) / latencies.length
+        : 0,
+    price: prices.length > 0 ? Math.min(...prices) : 0,
+    realtime: rows.some((row) => row.interactionMode?.includes("stream") ?? false),
+  };
+}
+
+export function mapCapabilityToModel(
+  capability: string,
+  entry: DiscoveryCapabilityEntry | undefined,
+  rows: DiscoveryDatasetRow[],
+): Model {
+  const stats = aggregateRows(rows);
+  const sample = rows[0];
+  const provider =
+    entry?.offeringIds?.[0] ??
+    (entry?.serviceType === "registry" ? "Registry" : "Livepeer network");
+
+  return enrichDiscoveryModelForStreaming({
+    id: capability,
+    name: humanizeCapabilityName(capability),
+    provider,
+    category: inferCategory(capability),
+    description: `${humanizeCapabilityName(capability)} on the Livepeer open GPU network (${stats.orchestrators} orchestrator${stats.orchestrators === 1 ? "" : "s"}).`,
+    status: stats.status,
+    pricing: {
+      amount: stats.price > 0 ? stats.price : 0.001,
+      unit: inferPricingUnit(sample?.workUnit, capability),
+    },
+    latency: stats.latency,
+    orchestrators: stats.orchestrators,
+    runs7d: Math.max(stats.orchestrators * 8, stats.orchestrators > 0 ? 1 : 0),
+    uptime: stats.status === "hot" ? 99.2 : 0,
+    realtime: stats.realtime,
+    featured: stats.realtime && stats.status === "hot",
+    tags: entry?.serviceType ? [entry.serviceType] : undefined,
+  });
+}
diff --git a/lib/discovery/types.ts b/lib/discovery/types.ts
new file mode 100644
index 0000000..75ea409
--- /dev/null
+++ b/lib/discovery/types.ts
@@ -0,0 +1,54 @@
+/** Discovery Service API shapes (see discovery-service openapi). */
+
+export interface DiscoveryCapabilityEntry {
+  serviceType: string;
+  capability: string;
+  offeringIds?: string[];
+}
+
+export interface DiscoveryCapabilitiesResponse {
+  capabilities: string[];
+  entries?: DiscoveryCapabilityEntry[];
+}
+
+export interface DiscoveryDatasetRow {
+  serviceType?: string;
+  ethAddress?: string;
+  offeringId?: string;
+  interactionMode?: string;
+  workUnit?: string;
+  pricePerUnitWei?: string;
+  orchUri: string;
+  gpuName?: string;
+  gpuGb?: number;
+  avail: number;
+  totalCap: number;
+  pricePerUnit: number;
+  bestLatMs?: number | null;
+  avgLatMs?: number | null;
+  swapRatio?: number | null;
+  avgAvail?: number | null;
+  score?: number;
+  slaScore?: number | null;
+}
+
+export interface DiscoveryQueryResponse {
+  results: Record<string, DiscoveryDatasetRow[]>;
+  datasetVersion?: number;
+  queryTimeMs?: number;
+}
+
+export interface DiscoveryFreshnessResponse {
+  populated?: boolean;
+  refreshedAt?: number;
+  ageMs?: number;
+  capabilityCount?: number;
+  totalRows?: number;
+}
+
+export interface ExploreApiResponse {
+  models: import("@/lib/dashboard/types").Model[];
+  capabilityCount: number;
+  serviceType: string;
+  freshness?: DiscoveryFreshnessResponse;
+}
diff --git a/package.json b/package.json
index b56e308..712f330 100644
--- a/package.json
+++ b/package.json
@@ -13,13 +13,17 @@
     "format:check": "prettier . --check"
   },
   "dependencies": {
+    "@pymthouse/builder-sdk": "link:../builder-sdk",
     "framer-motion": "^11.15.0",
     "geist": "^1.7.0",
+    "jmuxer": "^2.1.0",
     "lucide-react": "^1.6.0",
+    "mux.js": "^6.3.0",
     "next": "^15.1.0",
     "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 de56b7d..b1d3a1a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,15 +8,24 @@ importers:
 
   .:
     dependencies:
+      '@pymthouse/builder-sdk':
+        specifier: link:../builder-sdk
+        version: link:../builder-sdk
       framer-motion:
         specifier: ^11.15.0
         version: 11.18.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       geist:
         specifier: ^1.7.0
         version: 1.7.0(next@15.5.14(react-dom@19.2.4(react@19.2.4))(react@19.2.4))
+      jmuxer:
+        specifier: ^2.1.0
+        version: 2.1.0
       lucide-react:
         specifier: ^1.6.0
         version: 1.7.0(react@19.2.4)
+      mux.js:
+        specifier: ^6.3.0
+        version: 6.3.0
       next:
         specifier: ^15.1.0
         version: 15.5.14(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -29,6 +38,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
@@ -76,6 +88,10 @@ packages:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
 
+  '@babel/runtime@7.29.7':
+    resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
+    engines: {node: '>=6.9.0'}
+
   '@emnapi/core@1.9.2':
     resolution: {integrity: sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==}
 
@@ -956,6 +972,9 @@ packages:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
     engines: {node: '>=0.10.0'}
 
+  dom-walk@0.1.2:
+    resolution: {integrity: sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==}
+
   dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
@@ -1239,6 +1258,9 @@ packages:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
 
+  global@4.4.0:
+    resolution: {integrity: sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==}
+
   globals@14.0.0:
     resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
     engines: {node: '>=18'}
@@ -1428,6 +1450,9 @@ packages:
     resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
     hasBin: true
 
+  jmuxer@2.1.0:
+    resolution: {integrity: sha512-iizwBTIV11RFKrOp0s/SKrb00yz2epwSOdWxdphSfV7gWlAi9ZXpDdNk/m67Dp0M3+4uGL0AcBQmhB2THxABpQ==}
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -1571,6 +1596,9 @@ packages:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
 
+  min-document@2.19.2:
+    resolution: {integrity: sha512-8S5I8db/uZN8r9HSLFVWPdJCvYOejMcEC82VIzNUc6Zkklf/d1gg2psfE79/vyhWOj4+J8MtwmoOz3TmvaGu5A==}
+
   minimatch@10.2.5:
     resolution: {integrity: sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==}
     engines: {node: 18 || 20 || >=22}
@@ -1590,6 +1618,11 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
+  mux.js@6.3.0:
+    resolution: {integrity: sha512-/QTkbSAP2+w1nxV+qTcumSDN5PA98P0tjrADijIzQHe85oBK3Akhy9AHlH0ne/GombLMz1rLyvVsmrgRxoPDrQ==}
+    engines: {node: '>=8', npm: '>=5'}
+    hasBin: true
+
   nanoid@3.3.11:
     resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -1723,6 +1756,10 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
+  process@0.11.10:
+    resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
+    engines: {node: '>= 0.6.0'}
+
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
@@ -1827,6 +1864,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'}
@@ -2042,6 +2082,8 @@ snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
 
+  '@babel/runtime@7.29.7': {}
+
   '@emnapi/core@1.9.2':
     dependencies:
       '@emnapi/wasi-threads': 1.2.1
@@ -2825,6 +2867,8 @@ snapshots:
     dependencies:
       esutils: 2.0.3
 
+  dom-walk@0.1.2: {}
+
   dunder-proto@1.0.1:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -3258,6 +3302,11 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
+  global@4.4.0:
+    dependencies:
+      min-document: 2.19.2
+      process: 0.11.10
+
   globals@14.0.0: {}
 
   globalthis@1.0.4:
@@ -3441,6 +3490,8 @@ snapshots:
 
   jiti@2.6.1: {}
 
+  jmuxer@2.1.0: {}
+
   js-tokens@4.0.0: {}
 
   js-yaml@4.1.1:
@@ -3555,6 +3606,10 @@ snapshots:
       braces: 3.0.3
       picomatch: 2.3.2
 
+  min-document@2.19.2:
+    dependencies:
+      dom-walk: 0.1.2
+
   minimatch@10.2.5:
     dependencies:
       brace-expansion: 5.0.5
@@ -3573,6 +3628,11 @@ snapshots:
 
   ms@2.1.3: {}
 
+  mux.js@6.3.0:
+    dependencies:
+      '@babel/runtime': 7.29.7
+      global: 4.4.0
+
   nanoid@3.3.11: {}
 
   napi-postinstall@0.3.4: {}
@@ -3708,6 +3768,8 @@ snapshots:
 
   prettier@3.8.1: {}
 
+  process@0.11.10: {}
+
   prop-types@15.8.1:
     dependencies:
       loose-envify: 1.4.0
@@ -3828,6 +3890,8 @@ snapshots:
 
   semver@7.7.4: {}
 
+  server-only@0.0.1: {}
+
   set-function-length@1.2.2:
     dependencies:
       define-data-property: 1.1.4
diff --git a/types/jmuxer.d.ts b/types/jmuxer.d.ts
new file mode 100644
index 0000000..c2e50fc
--- /dev/null
+++ b/types/jmuxer.d.ts
@@ -0,0 +1,8 @@
+declare module "jmuxer" {
+  export default class JMuxer {
+    constructor(options: Record<string, unknown>);
+    feed(payload: { video?: Uint8Array; audio?: Uint8Array; duration?: number }): void;
+    destroy(): void;
+    reset(): void;
+  }
+}
diff --git a/types/muxjs.d.ts b/types/muxjs.d.ts
new file mode 100644
index 0000000..ab82480
--- /dev/null
+++ b/types/muxjs.d.ts
@@ -0,0 +1,18 @@
+declare module "mux.js" {
+  type MuxSegment = {
+    initSegment?: Uint8Array;
+    data: Uint8Array;
+  };
+
+  const muxjs: {
+    mp4: {
+      Transmuxer: new () => {
+        on: (event: "data", handler: (segment: MuxSegment) => void) => void;
+        push: (chunk: Uint8Array) => void;
+        flush: () => void;
+      };
+    };
+  };
+
+  export default muxjs;
+}

From 15560f6545fe5a2457ca1e6fe74fa07da14c74a2 Mon Sep 17 00:00:00 2001
From: John | Elite Encoder <john@eliteencoder.net>
Date: Mon, 1 Jun 2026 22:21:21 -0400
Subject: [PATCH 2/4] feat(dashboard): enhance StackedAreaChart and UsageView
 for daily data visualization

- Updated StackedAreaChart to support Y-axis ticks, horizontal grid lines, and per-day hover tooltips.
- Integrated dayKeys prop for better date handling in the chart.
- Modified UsageView to utilize new daily data structure, including dynamic period day count and improved data fetching.
- Added utility functions for generating UTC date keys and aligning daily request series with OpenMeter data.
- Introduced tests for new utility functions to ensure correctness in date handling and data alignment.
---
 components/dashboard/StackedAreaChart.tsx     | 381 ++++++++++++++----
 components/dashboard/UsageView.tsx            |  20 +-
 lib/dashboard/pymthouse-bff.ts                |  78 ++--
 .../usage-capability-display.test.ts          |  61 +++
 lib/dashboard/usage-capability-display.ts     |  68 +++-
 5 files changed, 498 insertions(+), 110 deletions(-)
 create mode 100644 lib/dashboard/usage-capability-display.test.ts

diff --git a/components/dashboard/StackedAreaChart.tsx b/components/dashboard/StackedAreaChart.tsx
index 503af9d..1c61b5f 100644
--- a/components/dashboard/StackedAreaChart.tsx
+++ b/components/dashboard/StackedAreaChart.tsx
@@ -1,110 +1,353 @@
+"use client";
+
+import { useCallback, useMemo, useRef, useState } from "react";
+
 /**
- * Stacked-area chart — direct port of the Livepeer Dashboard design's
- * `StackedArea` (Apr 2026, `views.jsx` lines 7-69). Each layer is filled at
- * 0.45 opacity in its own color; the top stroke is green-bright to anchor the
- * silhouette. X-axis labels render at 5 evenly-spaced positions
- * (0, 25, 50, 75, 100% → days ago + "Today").
+ * Stacked-area chart for usage (OpenMeter daily jobs). Supports Y-axis ticks,
+ * horizontal grid lines, and per-day hover tooltips with series breakdown.
  */
+function utcTodayKey(): string {
+  return new Date().toISOString().slice(0, 10);
+}
+
+function formatDayTick(dayKey: string, todayKey: string): string {
+  if (dayKey === todayKey) {
+    return "Today";
+  }
+  const todayMs = Date.parse(`${todayKey}T00:00:00.000Z`);
+  const dayMs = Date.parse(`${dayKey}T00:00:00.000Z`);
+  const daysAgo = Math.round((todayMs - dayMs) / 86_400_000);
+  return `${daysAgo}d`;
+}
+
+function formatDayTooltipTitle(dayKey: string, todayKey: string): string {
+  if (dayKey === todayKey) {
+    return "Today";
+  }
+  const d = new Date(`${dayKey}T12:00:00.000Z`);
+  return d.toLocaleDateString(undefined, {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+    timeZone: "UTC",
+  });
+}
+
+/** Integer Y-axis ticks from 0 through a padded max. */
+function buildYTicks(maxValue: number, tickCount = 4): number[] {
+  if (maxValue <= 0) {
+    return [0];
+  }
+  const padded = Math.ceil(maxValue * 1.1);
+  const step = Math.max(1, Math.ceil(padded / tickCount));
+  const top = Math.ceil(padded / step) * step;
+  const ticks: number[] = [];
+  for (let v = 0; v <= top; v += step) {
+    ticks.push(v);
+  }
+  return ticks;
+}
+
 export default function StackedAreaChart({
   series,
   colors,
-  height = 180,
+  dayKeys,
+  height = 200,
 }: {
   series: { name: string; data: number[] }[];
   colors: string[];
+  dayKeys?: string[];
   height?: number;
 }) {
   const w = 720;
   const h = height;
-  const padX = 8;
-  const padTop = 8;
-  const padBot = 22;
-
-  const days = series[0].data.length;
-  const stacks = series.map((s) => s.data);
-  const totals = stacks[0].map((_, i) => stacks.reduce((a, s) => a + s[i], 0));
-  const max = Math.max(...totals) * 1.1;
-
-  const xAt = (i: number) => padX + (i / (days - 1)) * (w - padX * 2);
-  const yAt = (v: number) => padTop + (1 - v / max) * (h - padTop - padBot);
-
-  const layers: { d: string; color: string }[] = [];
-  let prev = new Array(days).fill(0);
-  for (let li = 0; li < stacks.length; li++) {
-    const cum = stacks[li].map((v, i) => prev[i] + v);
-    let top = "";
-    let bot = "";
-    for (let i = 0; i < days; i++) {
-      top += `${i === 0 ? "M" : "L"}${xAt(i).toFixed(1)},${yAt(cum[i]).toFixed(1)} `;
+  const padLeft = 44;
+  const padRight = 10;
+  const padTop = 10;
+  const padBot = 24;
+  const plotW = w - padLeft - padRight;
+
+  const days = series[0]?.data.length ?? 0;
+  const stacks = useMemo(() => series.map((s) => s.data), [series]);
+  const totals = useMemo(() => {
+    if (days <= 0) {
+      return [] as number[];
     }
-    for (let i = days - 1; i >= 0; i--) {
-      bot += `L${xAt(i).toFixed(1)},${yAt(prev[i]).toFixed(1)} `;
+    return stacks[0].map((_, i) => stacks.reduce((a, s) => a + (s[i] ?? 0), 0));
+  }, [stacks, days]);
+  const maxValue = Math.max(...totals, 0);
+  const yTicks = useMemo(() => buildYTicks(maxValue), [maxValue]);
+  const yMax = yTicks[yTicks.length - 1] ?? 1;
+
+  const xAt = useCallback(
+    (i: number) => (days <= 1 ? padLeft + plotW / 2 : padLeft + (i / (days - 1)) * plotW),
+    [days, plotW],
+  );
+  const yAt = useCallback(
+    (v: number) => padTop + (1 - v / yMax) * (h - padTop - padBot),
+    [yMax, h],
+  );
+
+  const todayKey = utcTodayKey();
+  const labelKeys = useMemo(() => {
+    if (dayKeys && dayKeys.length === days) {
+      return dayKeys;
     }
-    layers.push({ d: top + bot + "Z", color: colors[li] });
-    prev = cum;
-  }
+    return Array.from({ length: days }, (_, i) => {
+      const daysAgo = days - 1 - i;
+      if (daysAgo === 0) {
+        return todayKey;
+      }
+      const d = new Date(`${todayKey}T00:00:00.000Z`);
+      d.setUTCDate(d.getUTCDate() - daysAgo);
+      return d.toISOString().slice(0, 10);
+    });
+  }, [dayKeys, days, todayKey]);
 
-  const topStroke = totals
-    .map((v, i) => `${i === 0 ? "M" : "L"}${xAt(i).toFixed(1)},${yAt(v).toFixed(1)}`)
-    .join(" ");
+  const layers = useMemo(() => {
+    const result: { d: string; color: string }[] = [];
+    let prev = new Array(days).fill(0);
+    for (let li = 0; li < stacks.length; li++) {
+      const cum = stacks[li].map((v, i) => prev[i] + v);
+      let top = "";
+      let bot = "";
+      for (let i = 0; i < days; i++) {
+        top += `${i === 0 ? "M" : "L"}${xAt(i).toFixed(1)},${yAt(cum[i]).toFixed(1)} `;
+      }
+      for (let i = days - 1; i >= 0; i--) {
+        bot += `L${xAt(i).toFixed(1)},${yAt(prev[i]).toFixed(1)} `;
+      }
+      result.push({ d: top + bot + "Z", color: colors[li] });
+      prev = cum;
+    }
+    return result;
+  }, [stacks, colors, days, xAt, yAt]);
+
+  const topStroke = useMemo(
+    () =>
+      totals
+        .map((v, i) => `${i === 0 ? "M" : "L"}${xAt(i).toFixed(1)},${yAt(v).toFixed(1)}`)
+        .join(" "),
+    [totals, xAt, yAt],
+  );
 
-  const ticks = [
-    0,
-    Math.floor(days / 4),
-    Math.floor(days / 2),
-    Math.floor((days * 3) / 4),
-    days - 1,
-  ];
+  const xLabelTicks = useMemo(
+    () => [0, Math.floor(days / 4), Math.floor(days / 2), Math.floor((days * 3) / 4), days - 1],
+    [days],
+  );
+
+  const [hoverIndex, setHoverIndex] = useState<number | null>(null);
+  const plotRef = useRef<HTMLDivElement>(null);
+
+  const resolveIndexFromClientX = useCallback(
+    (clientX: number) => {
+      const el = plotRef.current;
+      if (!el || days <= 0) {
+        return null;
+      }
+      const rect = el.getBoundingClientRect();
+      const x = clientX - rect.left;
+      const ratio = Math.max(0, Math.min(1, x / rect.width));
+      if (days === 1) {
+        return 0;
+      }
+      return Math.round(ratio * (days - 1));
+    },
+    [days],
+  );
+
+  const activeIndex = hoverIndex;
+
+  if (days === 0) {
+    return (
+      <p className="py-12 text-center text-sm text-fg-faint" style={{ height: h }}>
+        No daily data for this period.
+      </p>
+    );
+  }
+
+  const tooltipLeftPct =
+    activeIndex !== null && days > 1
+      ? ((xAt(activeIndex) - padLeft) / plotW) * 100
+      : activeIndex === 0
+        ? 0
+        : 50;
 
   return (
-    // Two-layer composition: the bottom SVG stretches to fill the container
-    // (preserveAspectRatio="none") so the area paths span the full width,
-    // and an HTML label overlay sits on top with no stretch — `<text>`
-    // glyphs inside the stretched SVG were getting horizontally skewed
-    // whenever the container exceeded the 720px viewBox width.
-    <div className="relative" style={{ height: h }}>
+    <div className="relative select-none" style={{ height: h }}>
+      {/* Y-axis labels (no horizontal stretch) */}
+      <div
+        className="pointer-events-none absolute inset-y-0 left-0 flex flex-col justify-between font-mono text-[9px] tabular-nums text-fg-faint"
+        style={{ width: padLeft - 4, paddingTop: padTop, paddingBottom: padBot }}
+        aria-hidden="true"
+      >
+        {[...yTicks].reverse().map((tick) => (
+          <span key={tick} className="text-right leading-none">
+            {tick.toLocaleString("en-US")}
+          </span>
+        ))}
+      </div>
+
       <svg
         viewBox={`0 0 ${w} ${h}`}
         width="100%"
         height={h}
         preserveAspectRatio="none"
-        aria-hidden="true"
         className="block"
+        aria-hidden="true"
       >
-        <line
-          x1={padX}
-          x2={w - padX}
-          y1={h - padBot}
-          y2={h - padBot}
-          stroke="var(--color-tint)"
-        />
+        {yTicks.map((tick) => (
+          <line
+            key={tick}
+            x1={padLeft}
+            x2={w - padRight}
+            y1={yAt(tick)}
+            y2={yAt(tick)}
+            stroke="var(--color-tint)"
+            strokeDasharray={tick === 0 ? undefined : "3 4"}
+            strokeOpacity={tick === 0 ? 1 : 0.65}
+          />
+        ))}
         {layers.map((l, i) => (
           <path key={i} d={l.d} fill={l.color} fillOpacity={0.45} />
         ))}
         <path d={topStroke} fill="none" stroke="#40BF86" strokeWidth="1.25" />
+        {activeIndex !== null && (
+          <>
+            <line
+              x1={xAt(activeIndex)}
+              x2={xAt(activeIndex)}
+              y1={padTop}
+              y2={h - padBot}
+              stroke="var(--color-fg-faint)"
+              strokeWidth="1"
+              strokeDasharray="4 3"
+              opacity={0.85}
+            />
+            {stacks.map((stack, si) => {
+              let cum = 0;
+              for (let j = 0; j <= si; j++) {
+                cum += stack[activeIndex] ?? 0;
+              }
+              if (cum <= 0) {
+                return null;
+              }
+              return (
+                <circle
+                  key={si}
+                  cx={xAt(activeIndex)}
+                  cy={yAt(cum)}
+                  r={3.5}
+                  fill={colors[si]}
+                  stroke="var(--color-dark-lighter)"
+                  strokeWidth={1.25}
+                />
+              );
+            })}
+          </>
+        )}
       </svg>
-      {/* Tick labels — HTML overlay so they don't inherit the SVG's
-          horizontal stretch. Each label centers on its tick's x position
-          expressed as a percentage of the viewBox width. */}
+
+      {/* X-axis tick labels */}
       <div
-        className="pointer-events-none absolute inset-x-0 font-mono text-[9px] text-fg-faint"
-        style={{ bottom: 4 }}
+        className="pointer-events-none absolute font-mono text-[9px] text-fg-faint"
+        style={{
+          left: padLeft,
+          right: padRight,
+          bottom: 4,
+          height: 16,
+        }}
         aria-hidden="true"
       >
-        {ticks.map((i) => (
+        {xLabelTicks.map((i) => (
           <span
             key={i}
             className="absolute"
             style={{
-              left: `${(xAt(i) / w) * 100}%`,
+              left: `${days <= 1 ? 50 : (i / (days - 1)) * 100}%`,
               transform: "translateX(-50%)",
               whiteSpace: "nowrap",
             }}
           >
-            {i === days - 1 ? "Today" : `${days - 1 - i}d`}
+            {formatDayTick(labelKeys[i]!, todayKey)}
           </span>
         ))}
       </div>
+
+      {/* Per-day hit targets + tooltip */}
+      <div
+        ref={plotRef}
+        className="absolute"
+        style={{
+          left: `${(padLeft / w) * 100}%`,
+          right: `${(padRight / w) * 100}%`,
+          top: padTop,
+          bottom: padBot,
+        }}
+        onMouseLeave={() => setHoverIndex(null)}
+        onMouseMove={(e) => {
+          const idx = resolveIndexFromClientX(e.clientX);
+          setHoverIndex(idx);
+        }}
+      >
+        <div className="flex h-full w-full">
+          {Array.from({ length: days }, (_, i) => (
+            <div
+              key={i}
+              className="h-full min-w-0 flex-1"
+              aria-label={`${formatDayTooltipTitle(labelKeys[i]!, todayKey)}: ${totals[i]} jobs`}
+            />
+          ))}
+        </div>
+
+        {activeIndex !== null && (
+          <div
+            className="pointer-events-none absolute z-10 min-w-[148px] rounded-md border border-hairline bg-dark-card px-2.5 py-2 shadow-card"
+            style={{
+              left: `${Math.min(92, Math.max(8, tooltipLeftPct))}%`,
+              bottom: "100%",
+              marginBottom: 8,
+              transform: "translateX(-50%)",
+            }}
+            role="tooltip"
+          >
+            <p className="font-mono text-[10px] font-medium text-fg">
+              {formatDayTooltipTitle(labelKeys[activeIndex]!, todayKey)}
+            </p>
+            <p className="mt-0.5 font-mono text-[10px] tabular-nums text-fg-muted">
+              <span className="text-fg-strong">{totals[activeIndex]!.toLocaleString("en-US")}</span>
+              {" "}
+              {totals[activeIndex] === 1 ? "job" : "jobs"}
+            </p>
+            {series.length > 0 && (
+              <ul className="mt-1.5 space-y-1 border-t border-hairline pt-1.5">
+                {series.map((s, si) => {
+                  const count = s.data[activeIndex] ?? 0;
+                  if (count <= 0) {
+                    return null;
+                  }
+                  return (
+                    <li
+                      key={s.name}
+                      className="flex items-center justify-between gap-3 font-mono text-[10px] tabular-nums"
+                    >
+                      <span className="flex min-w-0 items-center gap-1.5 text-fg-muted">
+                        <span
+                          className="h-1.5 w-1.5 shrink-0 rounded-[2px]"
+                          style={{ background: colors[si] }}
+                          aria-hidden="true"
+                        />
+                        <span className="truncate">{s.name}</span>
+                      </span>
+                      <span className="text-fg-strong">{count.toLocaleString("en-US")}</span>
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+          </div>
+        )}
+      </div>
     </div>
   );
 }
@@ -148,22 +391,22 @@ export function MiniSpark({
   width?: number;
 }) {
   const w = 100;
-  const h = height;
-  const max = Math.max(...data);
-  const min = Math.min(...data);
+  const chartH = height;
+  const max = Math.max(...data, 0);
+  const min = Math.min(...data, 0);
   const r = max - min || 1;
   const pts = data
     .map((v, i) => {
       const x = (i / (data.length - 1)) * w;
-      const y = h - ((v - min) / r) * (h - 2) - 1;
+      const y = chartH - ((v - min) / r) * (chartH - 2) - 1;
       return `${x.toFixed(1)},${y.toFixed(1)}`;
     })
     .join(" ");
-  const area = `M0,${h} L${pts.replace(/ /g, " L")} L${w},${h} Z`;
+  const area = `M0,${chartH} L${pts.replace(/ /g, " L")} L${w},${chartH} Z`;
   const gradId = `mini-spark-${color.replace(/[^a-z0-9]/gi, "")}`;
   return (
     <svg
-      viewBox={`0 0 ${w} ${h}`}
+      viewBox={`0 0 ${w} ${chartH}`}
       preserveAspectRatio="none"
       aria-hidden="true"
       style={{ display: "block", width, height }}
diff --git a/components/dashboard/UsageView.tsx b/components/dashboard/UsageView.tsx
index 1d5c31d..5d69ce1 100644
--- a/components/dashboard/UsageView.tsx
+++ b/components/dashboard/UsageView.tsx
@@ -6,6 +6,7 @@ import StackedAreaChart, { MiniSpark } from "@/components/dashboard/StackedAreaC
 import Button from "@/components/design-system/Button";
 import { useAuth } from "@/components/dashboard/AuthContext";
 import { useAccountUsage } from "@/lib/dashboard/useAccountUsage";
+import { getUtcCalendarMonthIsoBounds } from "@pymthouse/builder-sdk";
 import {
   buildUsageCapabilityRows,
   formatPeriodResetLabel,
@@ -175,7 +176,8 @@ export default function UsageView() {
     return buildUsageCapabilityRows({
       current: usageState.data.current.pipelineModels,
       prior: usageState.data.prior.pipelineModels,
-      periodDays: PERIOD_DAYS,
+      period: usageState.data.period,
+      dailyByPipeline: usageState.data.current.dailyByPipeline,
     });
   }, [usageState]);
 
@@ -193,6 +195,12 @@ export default function UsageView() {
     });
   }, [capabilityRows, priceMin, priceMax, dataMaxSpend]);
 
+  const periodDayCount = useMemo(() => {
+    if (usageState.status !== "ready") return PERIOD_DAYS;
+    const first = capabilityRows[0]?.data.length;
+    return first && first > 0 ? first : PERIOD_DAYS;
+  }, [usageState, capabilityRows]);
+
   const forecastStats = useMemo(() => {
     if (usageState.status !== "ready") {
       return {
@@ -205,7 +213,8 @@ export default function UsageView() {
       };
     }
     const { current, prior } = usageState.data;
-    const totalsByDay = Array.from({ length: PERIOD_DAYS }, (_, dayIndex) =>
+    const dayCount = capabilityRows[0]?.data.length ?? PERIOD_DAYS;
+    const totalsByDay = Array.from({ length: dayCount }, (_, dayIndex) =>
       capabilityRows.reduce((sum, row) => sum + (row.data[dayIndex] ?? 0), 0),
     );
     const last7Avg =
@@ -255,7 +264,7 @@ export default function UsageView() {
   const { data } = usageState;
   const grandReq = filteredRows.reduce((a, c) => a + c.requestCount, 0);
   const grandSpend = filteredRows.reduce((a, c) => a + c.spendUsd, 0);
-  const resetsAt = formatPeriodResetLabel(data.period.end);
+  const resetsAt = formatPeriodResetLabel(getUtcCalendarMonthIsoBounds().endDate);
   const grantedMicros = data.balance?.lifetimeGrantedUsdMicros ?? null;
 
   return (
@@ -284,7 +293,7 @@ export default function UsageView() {
           <div>
             <p className="text-[17px] font-bold text-fg">Jobs by capability</p>
             <p className="mt-0.5 text-[12px] text-fg-muted">
-              Last {PERIOD_DAYS} days · {fmt(data.current.requestCount)} jobs · OpenMeter
+              {periodDayCount} days · {fmt(data.current.requestCount)} jobs · OpenMeter
             </p>
           </div>
           <div className="flex flex-wrap gap-3.5 justify-end text-[11.5px] text-fg-muted">
@@ -300,11 +309,12 @@ export default function UsageView() {
             ))}
           </div>
         </div>
-        <div className="px-3 pt-2 pb-1">
+        <div className="px-3 pt-2 pb-2">
           {filteredRows.length > 0 ? (
             <StackedAreaChart
               series={filteredRows.map((c) => ({ name: c.name, data: c.data }))}
               colors={filteredRows.map((c) => c.color)}
+              dayKeys={data.periodDayKeys}
             />
           ) : (
             <p className="py-12 text-center text-sm text-fg-faint">No usage in this period.</p>
diff --git a/lib/dashboard/pymthouse-bff.ts b/lib/dashboard/pymthouse-bff.ts
index b7593e5..c6ae92c 100644
--- a/lib/dashboard/pymthouse-bff.ts
+++ b/lib/dashboard/pymthouse-bff.ts
@@ -1,5 +1,9 @@
-import { PmtHouseError, getUtcCalendarMonthIsoBounds } from "@pymthouse/builder-sdk";
+import { PmtHouseError } from "@pymthouse/builder-sdk";
 import { createPmtHouseClientForPublicApp } from "@/lib/dashboard/device-flow";
+import {
+  dailyRequestSeriesForPipeline,
+  utcDateKeysForPeriod,
+} from "@/lib/dashboard/usage-capability-display";
 
 export type AccountUsageBalance = {
   externalUserId: string;
@@ -9,17 +13,29 @@ export type AccountUsageBalance = {
   hasAccess: boolean;
 };
 
+export type AccountUsageDailyPipelineRow = {
+  pipeline: string;
+  modelId: string;
+  date: string;
+  requestCount: number;
+  networkFeeUsdMicros: string;
+};
+
 export type AccountUsagePipelineRow = {
   pipeline: string;
   modelId: string;
   requestCount: number;
   networkFeeUsdMicros: string;
   endUserBillableUsdMicros: string;
+  /** OpenMeter daily buckets aligned to `period` (oldest → newest). */
+  dailyRequests: number[];
 };
 
 export type AccountUsagePayload = {
   clientId: string;
   period: { start: string; end: string };
+  /** UTC YYYY-MM-DD keys aligned with `pipelineModels[].dailyRequests` (oldest → newest). */
+  periodDayKeys: string[];
   priorPeriod: { start: string; end: string };
   balance: AccountUsageBalance | null;
   current: {
@@ -27,6 +43,7 @@ export type AccountUsagePayload = {
     networkFeeUsdMicros: string;
     endUserBillableUsdMicros: string;
     pipelineModels: AccountUsagePipelineRow[];
+    dailyByPipeline: AccountUsageDailyPipelineRow[];
   };
   prior: {
     requestCount: number;
@@ -130,31 +147,8 @@ export async function fetchAccountUsageForExternalUser(input: {
 }): Promise<AccountUsagePayload> {
   const publicClientId = readPublicClientId();
   const days = input.periodDays ?? 30;
-  const period =
-    days === 30
-      ? (() => {
-          const month = getUtcCalendarMonthIsoBounds();
-          const priorMonthEnd = new Date(month.startDate);
-          priorMonthEnd.setUTCMilliseconds(priorMonthEnd.getUTCMilliseconds() - 1);
-          const priorMonthStart = new Date(
-            Date.UTC(
-              priorMonthEnd.getUTCFullYear(),
-              priorMonthEnd.getUTCMonth(),
-              1,
-              0,
-              0,
-              0,
-              0,
-            ),
-          );
-          return {
-            startDate: month.startDate,
-            endDate: month.endDate,
-            priorStartDate: priorMonthStart.toISOString(),
-            priorEndDate: priorMonthEnd.toISOString(),
-          };
-        })()
-      : rollingPeriodDays(days);
+  // Rolling window so the chart's last bucket is always UTC today (not month-end).
+  const period = rollingPeriodDays(days);
 
   const client = createPmtHouseClientForPublicApp(publicClientId);
 
@@ -172,6 +166,16 @@ export async function fetchAccountUsageForExternalUser(input: {
     }),
   ]);
 
+  const periodBounds = { start: period.startDate, end: period.endDate };
+  const dayKeys = utcDateKeysForPeriod(periodBounds.start, periodBounds.end);
+  const dailyByPipeline = (currentScope.currentUser.dailyByPipeline ?? []).map((row) => ({
+    pipeline: row.pipeline,
+    modelId: row.modelId,
+    date: row.date,
+    requestCount: row.requestCount,
+    networkFeeUsdMicros: row.networkFeeUsdMicros,
+  }));
+
   const mapPipeline = (
     rows: typeof currentScope.currentUser.pipelineModels,
   ): AccountUsagePipelineRow[] =>
@@ -181,11 +185,18 @@ export async function fetchAccountUsageForExternalUser(input: {
       requestCount: row.requestCount,
       networkFeeUsdMicros: row.networkFeeUsdMicros,
       endUserBillableUsdMicros: row.endUserBillableUsdMicros,
+      dailyRequests: dailyRequestSeriesForPipeline({
+        pipeline: row.pipeline,
+        modelId: row.modelId,
+        dayKeys,
+        dailyByPipeline,
+      }),
     }));
 
   return {
     clientId: currentScope.clientId,
-    period: { start: period.startDate, end: period.endDate },
+    period: periodBounds,
+    periodDayKeys: dayKeys,
     priorPeriod: { start: period.priorStartDate, end: period.priorEndDate },
     balance,
     current: {
@@ -193,10 +204,21 @@ export async function fetchAccountUsageForExternalUser(input: {
       networkFeeUsdMicros: currentScope.currentUser.networkFeeUsdMicros,
       endUserBillableUsdMicros: currentScope.currentUser.endUserBillableUsdMicros,
       pipelineModels: mapPipeline(currentScope.currentUser.pipelineModels),
+      dailyByPipeline,
     },
     prior: {
       requestCount: priorScope.currentUser.requestCount,
-      pipelineModels: mapPipeline(priorScope.currentUser.pipelineModels),
+      pipelineModels: mapPipeline(
+        priorScope.currentUser.pipelineModels,
+      ).map((row) => ({
+        ...row,
+        dailyRequests: dailyRequestSeriesForPipeline({
+          pipeline: row.pipeline,
+          modelId: row.modelId,
+          dayKeys: utcDateKeysForPeriod(period.priorStartDate, period.priorEndDate),
+          dailyByPipeline: [],
+        }),
+      })),
     },
   };
 }
diff --git a/lib/dashboard/usage-capability-display.test.ts b/lib/dashboard/usage-capability-display.test.ts
new file mode 100644
index 0000000..12630be
--- /dev/null
+++ b/lib/dashboard/usage-capability-display.test.ts
@@ -0,0 +1,61 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+  buildUsageCapabilityRows,
+  dailyRequestSeriesForPipeline,
+  utcDateKeysForPeriod,
+} from "./usage-capability-display";
+
+describe("usage-capability-display", () => {
+  it("utcDateKeysForPeriod returns inclusive UTC days", () => {
+    const keys = utcDateKeysForPeriod(
+      "2026-06-01T00:00:00.000Z",
+      "2026-06-03T23:59:59.999Z",
+    );
+    assert.deepEqual(keys, ["2026-06-01", "2026-06-02", "2026-06-03"]);
+  });
+
+  it("dailyRequestSeriesForPipeline aligns OpenMeter day buckets", () => {
+    const dayKeys = ["2026-06-01", "2026-06-02", "2026-06-03"];
+    const series = dailyRequestSeriesForPipeline({
+      pipeline: "live-video-to-video",
+      modelId: "streamdiffusion",
+      dayKeys,
+      dailyByPipeline: [
+        {
+          pipeline: "live-video-to-video",
+          modelId: "streamdiffusion",
+          date: "2026-06-02",
+          requestCount: 5,
+        },
+        {
+          pipeline: "live-video-to-video",
+          modelId: "streamdiffusion",
+          date: "2026-06-03",
+          requestCount: 14,
+        },
+      ],
+    });
+    assert.deepEqual(series, [0, 5, 14]);
+    assert.equal(series.reduce((a, b) => a + b, 0), 19);
+  });
+
+  it("buildUsageCapabilityRows uses dailyRequests from API", () => {
+    const rows = buildUsageCapabilityRows({
+      period: { start: "2026-06-01T00:00:00.000Z", end: "2026-06-03T23:59:59.999Z" },
+      current: [
+        {
+          pipeline: "live-video-to-video",
+          modelId: "streamdiffusion",
+          requestCount: 19,
+          networkFeeUsdMicros: "113277",
+          endUserBillableUsdMicros: "0",
+          dailyRequests: [0, 5, 14],
+        },
+      ],
+      prior: [],
+    });
+    assert.equal(rows.length, 1);
+    assert.deepEqual(rows[0]!.data, [0, 5, 14]);
+  });
+});
diff --git a/lib/dashboard/usage-capability-display.ts b/lib/dashboard/usage-capability-display.ts
index 9bd2524..8e6ab5c 100644
--- a/lib/dashboard/usage-capability-display.ts
+++ b/lib/dashboard/usage-capability-display.ts
@@ -39,22 +39,62 @@ function microsToUsd(micros: string): number {
   }
 }
 
-function distributeDaily(total: number, days: number): number[] {
-  if (days <= 0) return [];
-  if (total <= 0) return Array.from({ length: days }, () => 0);
-  const base = Math.floor(total / days);
-  const remainder = total % days;
-  return Array.from({ length: days }, (_, index) => base + (index < remainder ? 1 : 0));
+/** UTC calendar dates (YYYY-MM-DD) from period start through end inclusive. */
+export function utcDateKeysForPeriod(startIso: string, endIso: string): string[] {
+  const start = new Date(startIso);
+  const end = new Date(endIso);
+  if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) {
+    return [];
+  }
+  const keys: string[] = [];
+  const cursor = new Date(
+    Date.UTC(start.getUTCFullYear(), start.getUTCMonth(), start.getUTCDate()),
+  );
+  const endDay = new Date(
+    Date.UTC(end.getUTCFullYear(), end.getUTCMonth(), end.getUTCDate()),
+  );
+  while (cursor <= endDay) {
+    keys.push(cursor.toISOString().slice(0, 10));
+    cursor.setUTCDate(cursor.getUTCDate() + 1);
+  }
+  return keys;
+}
+
+export function dailyRequestSeriesForPipeline(input: {
+  pipeline: string;
+  modelId: string;
+  dayKeys: string[];
+  dailyByPipeline: Array<{
+    pipeline: string;
+    modelId: string;
+    date: string;
+    requestCount: number;
+  }>;
+}): number[] {
+  const countsByDay = new Map<string, number>();
+  const key = `${input.pipeline}|${input.modelId}`;
+  for (const row of input.dailyByPipeline) {
+    if (`${row.pipeline}|${row.modelId}` !== key) continue;
+    countsByDay.set(row.date, (countsByDay.get(row.date) ?? 0) + row.requestCount);
+  }
+  return input.dayKeys.map((day) => countsByDay.get(day) ?? 0);
 }
 
 export function buildUsageCapabilityRows(input: {
   current: AccountUsagePipelineRow[];
   prior: AccountUsagePipelineRow[];
-  periodDays: number;
+  period: { start: string; end: string };
+  dailyByPipeline?: Array<{
+    pipeline: string;
+    modelId: string;
+    date: string;
+    requestCount: number;
+  }>;
 }): UsageCapabilityRow[] {
   const priorByKey = new Map(
     input.prior.map((row) => [`${row.pipeline}|${row.modelId}`, row]),
   );
+  const dayKeys = utcDateKeysForPeriod(input.period.start, input.period.end);
 
   return input.current
     .map((row, index) => {
@@ -64,13 +104,25 @@ export function buildUsageCapabilityRows(input: {
       const delta =
         priorSum > 0 ? ((row.requestCount - priorSum) / priorSum) * 100 : row.requestCount > 0 ? 100 : 0;
       const spendUsd = microsToUsd(row.endUserBillableUsdMicros || row.networkFeeUsdMicros);
+      const seriesSum = row.dailyRequests.reduce((a, b) => a + b, 0);
+      const data =
+        row.dailyRequests.length > 0 && seriesSum > 0
+          ? row.dailyRequests
+          : input.dailyByPipeline?.length && dayKeys.length > 0
+            ? dailyRequestSeriesForPipeline({
+                pipeline: row.pipeline,
+                modelId: row.modelId,
+                dayKeys,
+                dailyByPipeline: input.dailyByPipeline,
+              })
+            : row.dailyRequests;
       return {
         ...row,
         id: key,
         name: humanizePipelineModel(row.pipeline, row.modelId),
         color: CAPABILITY_COLORS[index % CAPABILITY_COLORS.length]!,
         spendUsd,
-        data: distributeDaily(row.requestCount, input.periodDays),
+        data,
         priorSum,
         delta,
       };

From bcc5f5aede9820a6280323daf7367031296fb020 Mon Sep 17 00:00:00 2001
From: John | Elite Encoder <john@eliteencoder.net>
Date: Tue, 2 Jun 2026 10:27:31 -0400
Subject: [PATCH 3/4] chore(deps): update @pymthouse/builder-sdk to version
 0.3.0

- Changed dependency from local link to versioned package for @pymthouse/builder-sdk in package.json and pnpm-lock.yaml.
- Updated lock file to reflect the new version and its peer dependencies.
---
 package.json   |  2 +-
 pnpm-lock.yaml | 25 +++++++++++++++++++++++--
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 712f330..f88a7b0 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "format:check": "prettier . --check"
   },
   "dependencies": {
-    "@pymthouse/builder-sdk": "link:../builder-sdk",
+    "@pymthouse/builder-sdk": "0.3.0",
     "framer-motion": "^11.15.0",
     "geist": "^1.7.0",
     "jmuxer": "^2.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b1d3a1a..952c115 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       '@pymthouse/builder-sdk':
-        specifier: link:../builder-sdk
-        version: link:../builder-sdk
+        specifier: 0.3.0
+        version: 0.3.0
       framer-motion:
         specifier: ^11.15.0
         version: 11.18.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -401,6 +401,18 @@ packages:
     resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
     engines: {node: '>=12.4.0'}
 
+  '@pymthouse/builder-sdk@0.3.0':
+    resolution: {integrity: sha512-HHq46W7PvRJkoFFBkDOcKkkFR9UvrNp2cfGgMqY98+QaobzD1xh11yC0ZCPZZzU6CQjNOB6qW5mriDGtLE6aCg==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      '@grpc/grpc-js': ^1.12.0
+      '@grpc/proto-loader': ^0.7.0
+    peerDependenciesMeta:
+      '@grpc/grpc-js':
+        optional: true
+      '@grpc/proto-loader':
+        optional: true
+
   '@reduxjs/toolkit@2.11.2':
     resolution: {integrity: sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==}
     peerDependencies:
@@ -1661,6 +1673,9 @@ packages:
     resolution: {integrity: sha512-pyFS63ptit/P5WqUkt+UUfe+4oevH+bFeIiPPdfb0pFeYEu/1ELnJu5l+5EcTKYL5M7zaAa7S8ddywgXypqKCw==}
     engines: {node: '>= 0.4'}
 
+  oauth4webapi@3.8.6:
+    resolution: {integrity: sha512-iwemM91xz8nryHti2yTmg5fhyEMVOkOXwHNqbvcATjyajb5oQxCQzrNOA6uElRHuMhQQTKUyFKV9y/CNyg25BQ==}
+
   object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -2324,6 +2339,10 @@ snapshots:
 
   '@nolyfill/is-core-module@1.0.39': {}
 
+  '@pymthouse/builder-sdk@0.3.0':
+    dependencies:
+      oauth4webapi: 3.8.6
+
   '@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
@@ -3669,6 +3688,8 @@ snapshots:
       object.entries: 1.1.9
       semver: 6.3.1
 
+  oauth4webapi@3.8.6: {}
+
   object-assign@4.1.1: {}
 
   object-inspect@1.13.4: {}

From 14a1c43bc4e575bb026cbb3b609f3c3e54dc6376 Mon Sep 17 00:00:00 2001
From: John | Elite Encoder <john@eliteencoder.net>
Date: Mon, 8 Jun 2026 18:15:15 -0400
Subject: [PATCH 4/4] feat(gateway): enhance API routing and signer proxy
 functionality

- Added new environment variable `GATEWAY_SIGNER_FROM_REQUEST_ORIGIN` to control signer URL behavior.
- Implemented API route rewrites for orchestrator info, discovery, and payment generation to use the dashboard's signer proxy.
- Refactored session handling in the API to read configuration from the request context.
- Introduced a new signer proxy handler to forward requests based on allowed paths.
- Updated the LiveStreamPlayground component to optimize sleep intervals for better performance.
- Adjusted gateway configuration functions to support request-based signer URL resolution.
---
 .env.example                                  |  2 +
 .../sessions/[id]/publish/[seq]/route.ts      | 13 +++-
 app/api/gateway/sessions/[id]/route.ts        | 11 ++-
 .../gateway/sessions/[id]/subscribe/route.ts  | 11 ++-
 app/api/gateway/sessions/route.ts             |  8 +-
 app/api/signer/[...path]/route.ts             | 11 +++
 .../playground/LiveStreamPlayground.tsx       |  7 +-
 lib/dashboard/gateway-config.server.ts        | 63 +++++++++++++++-
 lib/dashboard/playground/trickle-mpegts.ts    | 33 ++++----
 lib/dashboard/signer-proxy.server.ts          | 75 +++++++++++++++++++
 next.config.ts                                | 20 +++++
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 25 +------
 13 files changed, 220 insertions(+), 61 deletions(-)
 create mode 100644 app/api/signer/[...path]/route.ts
 create mode 100644 lib/dashboard/signer-proxy.server.ts

diff --git a/.env.example b/.env.example
index 95de119..723c491 100644
--- a/.env.example
+++ b/.env.example
@@ -20,6 +20,8 @@ PYMTHOUSE_ALLOW_INSECURE_HTTP=
 # Browser gateway relay (orchestrator LV2V via same-origin HTTP segments)
 GATEWAY_ENABLED=0
 NEXT_PUBLIC_GATEWAY_ENABLED=0
+# Gateway server calls signer on the same host:port as the dashboard (proxied to PYMTHOUSE_SIGNER_URL upstream)
+GATEWAY_SIGNER_FROM_REQUEST_ORIGIN=1
 # Optional overrides (defaults to PYMTHOUSE_SIGNER_URL + LIVEPEER_DISCOVERY_SERVICE_URL)
 # GATEWAY_DISCOVERY_URL=
 # GATEWAY_DISCOVERY_TIMEOUT_MS=60000
diff --git a/app/api/gateway/sessions/[id]/publish/[seq]/route.ts b/app/api/gateway/sessions/[id]/publish/[seq]/route.ts
index ac39404..79e8e17 100644
--- a/app/api/gateway/sessions/[id]/publish/[seq]/route.ts
+++ b/app/api/gateway/sessions/[id]/publish/[seq]/route.ts
@@ -1,8 +1,13 @@
 import { createGatewayPublishSegmentHandler } from "@pymthouse/builder-sdk/gateway/server";
 import { readDashboardGatewayConfig } from "@/lib/dashboard/gateway-config.server";
 
-const config = readDashboardGatewayConfig();
-const handler = createGatewayPublishSegmentHandler(config);
+async function handle(
+  request: Request,
+  context: { params: Promise<{ id: string; seq: string }> },
+) {
+  const config = readDashboardGatewayConfig(request);
+  return createGatewayPublishSegmentHandler(config)(request, context);
+}
 
-export const PUT = handler;
-export const POST = handler;
+export const PUT = handle;
+export const POST = handle;
diff --git a/app/api/gateway/sessions/[id]/route.ts b/app/api/gateway/sessions/[id]/route.ts
index 3c1c2a3..14384b0 100644
--- a/app/api/gateway/sessions/[id]/route.ts
+++ b/app/api/gateway/sessions/[id]/route.ts
@@ -1,7 +1,10 @@
 import { createGatewayStopSessionHandler } from "@pymthouse/builder-sdk/gateway/server";
 import { readDashboardGatewayConfig } from "@/lib/dashboard/gateway-config.server";
 
-const config = readDashboardGatewayConfig();
-const handler = createGatewayStopSessionHandler(config);
-
-export const DELETE = handler;
+export async function DELETE(
+  request: Request,
+  context: { params: Promise<{ id: string }> },
+) {
+  const config = readDashboardGatewayConfig(request);
+  return createGatewayStopSessionHandler(config)(request, context);
+}
diff --git a/app/api/gateway/sessions/[id]/subscribe/route.ts b/app/api/gateway/sessions/[id]/subscribe/route.ts
index 328c44b..03beaa6 100644
--- a/app/api/gateway/sessions/[id]/subscribe/route.ts
+++ b/app/api/gateway/sessions/[id]/subscribe/route.ts
@@ -1,7 +1,10 @@
 import { createGatewaySubscribeSegmentHandler } from "@pymthouse/builder-sdk/gateway/server";
 import { readDashboardGatewayConfig } from "@/lib/dashboard/gateway-config.server";
 
-const config = readDashboardGatewayConfig();
-const handler = createGatewaySubscribeSegmentHandler(config);
-
-export const GET = handler;
+export async function GET(
+  request: Request,
+  context: { params: Promise<{ id: string }> },
+) {
+  const config = readDashboardGatewayConfig(request);
+  return createGatewaySubscribeSegmentHandler(config)(request, context);
+}
diff --git a/app/api/gateway/sessions/route.ts b/app/api/gateway/sessions/route.ts
index 59e49cc..84893c9 100644
--- a/app/api/gateway/sessions/route.ts
+++ b/app/api/gateway/sessions/route.ts
@@ -1,7 +1,7 @@
 import { createGatewayStartSessionHandler } from "@pymthouse/builder-sdk/gateway/server";
 import { readDashboardGatewayConfig } from "@/lib/dashboard/gateway-config.server";
 
-const config = readDashboardGatewayConfig();
-const handler = createGatewayStartSessionHandler(config);
-
-export const POST = handler;
+export async function POST(request: Request) {
+  const config = readDashboardGatewayConfig(request);
+  return createGatewayStartSessionHandler(config)(request);
+}
diff --git a/app/api/signer/[...path]/route.ts b/app/api/signer/[...path]/route.ts
new file mode 100644
index 0000000..92b87fb
--- /dev/null
+++ b/app/api/signer/[...path]/route.ts
@@ -0,0 +1,11 @@
+import { forwardSignerProxyRequest } from "@/lib/dashboard/signer-proxy.server";
+
+type RouteContext = { params: Promise<{ path: string[] }> };
+
+async function handle(request: Request, context: RouteContext): Promise<Response> {
+  const { path } = await context.params;
+  return forwardSignerProxyRequest(request, path);
+}
+
+export const GET = handle;
+export const POST = handle;
diff --git a/components/dashboard/playground/LiveStreamPlayground.tsx b/components/dashboard/playground/LiveStreamPlayground.tsx
index 791c404..8f49e84 100644
--- a/components/dashboard/playground/LiveStreamPlayground.tsx
+++ b/components/dashboard/playground/LiveStreamPlayground.tsx
@@ -283,7 +283,7 @@ export default function LiveStreamPlayground({ model }: { model: Model }) {
         player.pushChunk(chunk);
       });
       if (!segment || !subscribeActiveRef.current) {
-        await sleep(200);
+        await sleep(50);
         if (subscribeActiveRef.current) {
           void subscribeLoop();
         }
@@ -297,7 +297,7 @@ export default function LiveStreamPlayground({ model }: { model: Model }) {
       const isExactDuplicate = segment.segmentSeq === lastSeq && segmentBytes <= lastBytes;
 
       if (isOlderSegment || isExactDuplicate) {
-        await sleep(80);
+        await sleep(20);
         if (subscribeActiveRef.current) {
           void subscribeLoop();
         }
@@ -307,12 +307,13 @@ export default function LiveStreamPlayground({ model }: { model: Model }) {
       lastOutputSegmentBytesRef.current = segmentBytes;
       setOutputSegmentSeq(segment.segmentSeq);
       player.flushSegment();
+
       if (subscribeActiveRef.current) {
         void subscribeLoop();
       }
     } catch {
       if (subscribeActiveRef.current) {
-        await sleep(500);
+        await sleep(300);
         if (subscribeActiveRef.current) {
           void subscribeLoop();
         }
diff --git a/lib/dashboard/gateway-config.server.ts b/lib/dashboard/gateway-config.server.ts
index fd613ef..049c1ae 100644
--- a/lib/dashboard/gateway-config.server.ts
+++ b/lib/dashboard/gateway-config.server.ts
@@ -7,6 +7,65 @@ import {
 
 export type { GatewayServerConfig };
 
-export function readDashboardGatewayConfig(): GatewayServerConfig | null {
-  return readGatewayConfigFromEnv(process.env);
+function issuerOriginFromIssuerUrl(issuerUrl: string): string {
+  let base = issuerUrl.trim().replace(/\/+$/, "");
+  if (base.endsWith("/api/v1/oidc")) {
+    base = base.slice(0, -"/api/v1/oidc".length);
+  } else if (base.endsWith("/oidc")) {
+    base = base.slice(0, -"/oidc".length);
+  }
+  return base.replace(/\/+$/, "");
+}
+
+function stripTrailingSlashes(value: string): string {
+  let end = value.length;
+  while (end > 0 && value.codePointAt(end - 1) === 47) {
+    end -= 1;
+  }
+  return value.slice(0, end);
+}
+
+function requestOriginFromRequest(request: Request): string {
+  const forwardedHost = request.headers.get("x-forwarded-host")?.split(",")[0]?.trim();
+  const host = forwardedHost || request.headers.get("host")?.trim();
+  if (host) {
+    const forwardedProto = request.headers.get("x-forwarded-proto")?.split(",")[0]?.trim();
+    const protocol =
+      forwardedProto === "http" || forwardedProto === "https"
+        ? forwardedProto
+        : new URL(request.url).protocol.replace(":", "");
+    return `${protocol}://${host}`;
+  }
+  return new URL(request.url).origin;
+}
+
+export function resolveDashboardSignerUpstreamUrl(): string | null {
+  const env = process.env;
+  const issuerUrl = env.PYMTHOUSE_ISSUER_URL?.trim();
+  const signerUrl =
+    env.PYMTHOUSE_SIGNER_URL?.trim() ||
+    env.SIGNER_PUBLIC_URL?.trim() ||
+    env.GATEWAY_SIGNER_UPSTREAM_URL?.trim() ||
+    (issuerUrl ? `${issuerOriginFromIssuerUrl(issuerUrl)}/api/signer` : "");
+  return signerUrl || null;
+}
+
+function resolveDashboardGatewaySignerUrl(request?: Request): string | null {
+  if (process.env.GATEWAY_SIGNER_FROM_REQUEST_ORIGIN === "1" && request) {
+    return `${stripTrailingSlashes(requestOriginFromRequest(request))}/api/signer`;
+  }
+  return resolveDashboardSignerUpstreamUrl();
+}
+
+/** Per-request gateway config (signer URL matches dashboard host:port when enabled). */
+export function readDashboardGatewayConfig(request?: Request): GatewayServerConfig | null {
+  const base = readGatewayConfigFromEnv(process.env);
+  if (!base) {
+    return null;
+  }
+  const signerUrl = resolveDashboardGatewaySignerUrl(request);
+  if (!signerUrl) {
+    return null;
+  }
+  return { ...base, signerUrl };
 }
diff --git a/lib/dashboard/playground/trickle-mpegts.ts b/lib/dashboard/playground/trickle-mpegts.ts
index c61a787..ad6ef7a 100644
--- a/lib/dashboard/playground/trickle-mpegts.ts
+++ b/lib/dashboard/playground/trickle-mpegts.ts
@@ -34,14 +34,14 @@ const MSE_AVC_CODEC_CANDIDATES = [
   'video/mp4; codecs="avc1.64001E"',
 ] as const;
 
-const PROGRESSIVE_FLUSH_INTERVAL_MS = 250;
-const PROGRESSIVE_FLUSH_MIN_BYTES = 64 * 1024;
-const LIVE_EDGE_LAG_SECONDS = 0.75;
-const DEFAULT_LIVE_PLAYBACK_RATE = 1;
-const MIN_LIVE_PLAYBACK_RATE = 0.25;
-const MAX_LIVE_PLAYBACK_RATE = 1;
-const LOW_BUFFER_LAG_SECONDS = 0.5;
-const TARGET_BUFFER_LAG_SECONDS = 1.6;
+const PROGRESSIVE_FLUSH_INTERVAL_MS = 80;
+const PROGRESSIVE_FLUSH_MIN_BYTES = 8 * 1024;
+const LIVE_EDGE_LAG_SECONDS = 0.3;
+const DEFAULT_LIVE_PLAYBACK_RATE = 1.04;
+const MIN_LIVE_PLAYBACK_RATE = 0.85;
+const MAX_LIVE_PLAYBACK_RATE = 1.08;
+const LOW_BUFFER_LAG_SECONDS = 0.15;
+const TARGET_BUFFER_LAG_SECONDS = 0.6;
 
 function pickMseAvcMimeType(): string {
   if (typeof MediaSource === "undefined") {
@@ -93,12 +93,11 @@ export class MpegTsPublisher {
     this.jmuxer = new JMuxer({
       node: sink,
       mode: "video",
-      flushingTime: 500,
+      flushingTime: 100,
       fps: this.fps,
       clearBuffer: true,
       onData: (data: ArrayBuffer) => {
         const bytes = new Uint8Array(data);
-        // Do not await on the hot path — caller should bound network uploads separately.
         void this.onSegment(bytes);
       },
     });
@@ -386,8 +385,8 @@ export class MpegTsPlayer {
     }
     try {
       const end = video.buffered.end(video.buffered.length - 1);
-      if (end > 0.1) {
-        video.currentTime = Math.max(0, end - LIVE_EDGE_LAG_SECONDS);
+      if (end > 0.05) {
+        video.currentTime = Math.max(0, end - 0.05);
       }
       void video.play().catch(() => undefined);
     } catch {
@@ -438,16 +437,18 @@ export class MpegTsPlayer {
     const bufferedEnd = video.buffered.end(video.buffered.length - 1);
     const bufferedLag = bufferedEnd - video.currentTime;
 
-    let playbackRate = DEFAULT_LIVE_PLAYBACK_RATE;
+    let playbackRate: number;
     if (bufferedLag < LOW_BUFFER_LAG_SECONDS) {
       playbackRate = MIN_LIVE_PLAYBACK_RATE;
-    } else if (bufferedLag < TARGET_BUFFER_LAG_SECONDS) {
+    } else if (bufferedLag > TARGET_BUFFER_LAG_SECONDS) {
+      playbackRate = MAX_LIVE_PLAYBACK_RATE;
+    } else {
       const lagScale =
         (bufferedLag - LOW_BUFFER_LAG_SECONDS) /
         (TARGET_BUFFER_LAG_SECONDS - LOW_BUFFER_LAG_SECONDS);
       playbackRate =
-        MIN_LIVE_PLAYBACK_RATE +
-        (MAX_LIVE_PLAYBACK_RATE - MIN_LIVE_PLAYBACK_RATE) * lagScale;
+        DEFAULT_LIVE_PLAYBACK_RATE +
+        (MAX_LIVE_PLAYBACK_RATE - DEFAULT_LIVE_PLAYBACK_RATE) * lagScale;
     }
     video.playbackRate = playbackRate;
   }
diff --git a/lib/dashboard/signer-proxy.server.ts b/lib/dashboard/signer-proxy.server.ts
new file mode 100644
index 0000000..aee98c9
--- /dev/null
+++ b/lib/dashboard/signer-proxy.server.ts
@@ -0,0 +1,75 @@
+import "server-only";
+
+import { resolveDashboardSignerUpstreamUrl } from "@/lib/dashboard/gateway-config.server";
+
+const ALLOWED_SIGNER_PROXY_SUFFIXES = new Set([
+  "sign-orchestrator-info",
+  "generate-live-payment",
+  "discover-orchestrators",
+]);
+
+export function isAllowedSignerProxyPath(pathSegments: string[]): boolean {
+  if (pathSegments.length !== 1) {
+    return false;
+  }
+  return ALLOWED_SIGNER_PROXY_SUFFIXES.has(pathSegments[0]);
+}
+
+export async function forwardSignerProxyRequest(
+  request: Request,
+  pathSegments: string[],
+): Promise<Response> {
+  const upstreamBase = resolveDashboardSignerUpstreamUrl();
+  if (!upstreamBase) {
+    return Response.json(
+      {
+        error: "server_misconfigured",
+        error_description:
+          "PYMTHOUSE_SIGNER_URL or PYMTHOUSE_ISSUER_URL is required for signer proxy",
+      },
+      { status: 503 },
+    );
+  }
+
+  if (!isAllowedSignerProxyPath(pathSegments)) {
+    return Response.json({ error: "not_found" }, { status: 404 });
+  }
+
+  const suffix = pathSegments[0];
+  const target = `${upstreamBase.replace(/\/+$/, "")}/${suffix}`;
+  const headers = new Headers();
+  const authorization = request.headers.get("authorization");
+  if (authorization) {
+    headers.set("Authorization", authorization);
+  }
+  const contentType = request.headers.get("content-type");
+  if (contentType) {
+    headers.set("Content-Type", contentType);
+  }
+  headers.set("Accept", request.headers.get("accept") ?? "application/json");
+
+  const method = request.method.toUpperCase();
+  const body =
+    method === "GET" || method === "HEAD" ? undefined : await request.arrayBuffer();
+
+  const upstream = await fetch(target, {
+    method,
+    headers,
+    body,
+  });
+
+  const responseHeaders = new Headers();
+  const upstreamContentType = upstream.headers.get("content-type");
+  if (upstreamContentType) {
+    responseHeaders.set("Content-Type", upstreamContentType);
+  }
+  const livepeerOrch = upstream.headers.get("Livepeer-Orchestrator-URL");
+  if (livepeerOrch) {
+    responseHeaders.set("Livepeer-Orchestrator-URL", livepeerOrch);
+  }
+
+  return new Response(upstream.body, {
+    status: upstream.status,
+    headers: responseHeaders,
+  });
+}
diff --git a/next.config.ts b/next.config.ts
index 16313bf..721cca7 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -18,6 +18,26 @@ const nextConfig: NextConfig = {
     };
     return config;
   },
+  /**
+   * @pymthouse/builder-sdk gateway calls `/sign-orchestrator-info` at the origin root
+   * (httpOrigin strips `/api/signer`). Map those paths to the dashboard signer proxy.
+   */
+  async rewrites() {
+    return [
+      {
+        source: "/sign-orchestrator-info",
+        destination: "/api/signer/sign-orchestrator-info",
+      },
+      {
+        source: "/discover-orchestrators",
+        destination: "/api/signer/discover-orchestrators",
+      },
+      {
+        source: "/generate-live-payment",
+        destination: "/api/signer/generate-live-payment",
+      },
+    ];
+  },
   async redirects() {
     return [
       // Old livepeer.org routes → new site equivalents
diff --git a/package.json b/package.json
index f88a7b0..712f330 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "format:check": "prettier . --check"
   },
   "dependencies": {
-    "@pymthouse/builder-sdk": "0.3.0",
+    "@pymthouse/builder-sdk": "link:../builder-sdk",
     "framer-motion": "^11.15.0",
     "geist": "^1.7.0",
     "jmuxer": "^2.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 952c115..b1d3a1a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       '@pymthouse/builder-sdk':
-        specifier: 0.3.0
-        version: 0.3.0
+        specifier: link:../builder-sdk
+        version: link:../builder-sdk
       framer-motion:
         specifier: ^11.15.0
         version: 11.18.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -401,18 +401,6 @@ packages:
     resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
     engines: {node: '>=12.4.0'}
 
-  '@pymthouse/builder-sdk@0.3.0':
-    resolution: {integrity: sha512-HHq46W7PvRJkoFFBkDOcKkkFR9UvrNp2cfGgMqY98+QaobzD1xh11yC0ZCPZZzU6CQjNOB6qW5mriDGtLE6aCg==}
-    engines: {node: '>=20'}
-    peerDependencies:
-      '@grpc/grpc-js': ^1.12.0
-      '@grpc/proto-loader': ^0.7.0
-    peerDependenciesMeta:
-      '@grpc/grpc-js':
-        optional: true
-      '@grpc/proto-loader':
-        optional: true
-
   '@reduxjs/toolkit@2.11.2':
     resolution: {integrity: sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==}
     peerDependencies:
@@ -1673,9 +1661,6 @@ packages:
     resolution: {integrity: sha512-pyFS63ptit/P5WqUkt+UUfe+4oevH+bFeIiPPdfb0pFeYEu/1ELnJu5l+5EcTKYL5M7zaAa7S8ddywgXypqKCw==}
     engines: {node: '>= 0.4'}
 
-  oauth4webapi@3.8.6:
-    resolution: {integrity: sha512-iwemM91xz8nryHti2yTmg5fhyEMVOkOXwHNqbvcATjyajb5oQxCQzrNOA6uElRHuMhQQTKUyFKV9y/CNyg25BQ==}
-
   object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -2339,10 +2324,6 @@ snapshots:
 
   '@nolyfill/is-core-module@1.0.39': {}
 
-  '@pymthouse/builder-sdk@0.3.0':
-    dependencies:
-      oauth4webapi: 3.8.6
-
   '@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
@@ -3688,8 +3669,6 @@ snapshots:
       object.entries: 1.1.9
       semver: 6.3.1
 
-  oauth4webapi@3.8.6: {}
-
   object-assign@4.1.1: {}
 
   object-inspect@1.13.4: {}