From 6d65f89f89999ccd0f7d7014ec0a29daa5c4c530 Mon Sep 17 00:00:00 2001
From: peace node <peacenode@aol.com>
Date: Thu, 3 Sep 2026 18:35:41 -0400
Subject: [PATCH 1/5] feat(console): rebrand early access shell

---
 app/globals.css                     | 424 ++++++++++++++++++++--------
 app/icon.svg                        |  12 +
 app/layout.tsx                      |  78 ++++-
 app/opengraph-image.tsx             |  44 +++
 app/robots.ts                       |   4 +-
 app/sitemap.ts                      |   2 +-
 components.json                     |  24 ++
 components/console/CopyButton.tsx   |  16 +-
 components/console/TabStrip.tsx     |   1 -
 components/console/ThemeContext.tsx |  94 ++----
 components/design-system/Button.tsx |   2 +-
 package.json                        |   2 +
 pnpm-lock.yaml                      |  74 +++++
 13 files changed, 568 insertions(+), 209 deletions(-)
 create mode 100644 app/icon.svg
 create mode 100644 app/opengraph-image.tsx
 create mode 100644 components.json

diff --git a/app/globals.css b/app/globals.css
index 554199e..bda6a79 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -18,49 +18,126 @@
   --color-blue-dark: #145571;
   --color-blue-subtle: rgba(20, 106, 143, 0.15);
 
-  /* Legacy literal-dark tokens — used as the console's primary surface
-     vocabulary (`bg-dark` / `bg-dark-lighter` / `bg-dark-card` /
-     `bg-dark-border`, 78+ usages). Flip to light values via the
-     html[data-theme="light"] block below. */
-  --color-dark: #121212;
-  --color-dark-lighter: #181818;
-  --color-dark-card: #1e1e1e;
-  --color-dark-border: #2a2a2a;
-
-  /* Semantic tokens — values overridden directly on :root and
-     html[data-theme="light"]. (Initial values here are dark-theme defaults.) */
-  --color-background: #121212;
-  --color-foreground: #ffffff;
-  --color-surface: #181818;
-  --color-card: #1e1e1e;
-  --color-border: rgba(255, 255, 255, 0.08);
-  --color-muted-foreground: rgba(255, 255, 255, 0.7);
-  --color-subtle-foreground: rgba(255, 255, 255, 0.5);
-
-  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
-  --font-mono: var(--font-geist-mono), ui-monospace, monospace;
-}
-
-/* ── Dark theme (default) ──────────────────────────────────────── */
+  /* Legacy console utilities retained as aliases over the registry theme. */
+  --color-dark: var(--background);
+  --color-dark-lighter: var(--muted);
+  --color-dark-card: var(--card);
+  --color-dark-border: var(--border);
+
+  /* Semantic aliases consumed by existing components. */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-surface: var(--muted);
+  --color-card: var(--card);
+  --color-border: var(--border);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-subtle-foreground: color-mix(
+    in oklch,
+    var(--foreground) 50%,
+    transparent
+  );
+
+  --font-inter: InterVariable, Inter, ui-sans-serif, system-ui, sans-serif;
+  --font-display: "Favorit", "Favorit Pro", var(--font-inter), sans-serif;
+  --font-heading: var(--font-inter), Inter, sans-serif;
+  --font-sans: var(--font-inter), Inter, ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "Favorit Mono", ui-monospace, monospace;
+  --font-weight-book: 350;
+}
+
+/* ── Registry dark theme (default) ──────────────────────────────── */
 :root {
-  --color-background: #121212;
-  --color-foreground: #ffffff;
-  --color-surface: #181818;
-  --color-card: #1e1e1e;
-  --color-border: rgba(255, 255, 255, 0.08);
-  --color-muted-foreground: rgba(255, 255, 255, 0.7);
-  --color-subtle-foreground: rgba(255, 255, 255, 0.5);
+  --background: oklch(0 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.16 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-surface: var(--muted);
+  --color-card: var(--card);
+  --color-border: var(--border);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-subtle-foreground: color-mix(
+    in oklch,
+    var(--foreground) 50%,
+    transparent
+  );
 }
 
-/* ── Light theme override ──────────────────────────────────────── */
+/* ── Registry light theme override ──────────────────────────────── */
 html[data-theme="light"] {
-  --color-background: #ffffff;
-  --color-foreground: #121212;
-  --color-surface: #f6f7f5;
-  --color-card: #fafbfa;
-  --color-border: rgba(18, 18, 18, 0.1);
-  --color-muted-foreground: rgba(18, 18, 18, 0.65);
-  --color-subtle-foreground: rgba(18, 18, 18, 0.45);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-surface: var(--muted);
+  --color-card: var(--card);
+  --color-border: var(--border);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-subtle-foreground: color-mix(
+    in oklch,
+    var(--foreground) 45%,
+    transparent
+  );
 
   color-scheme: light;
 }
@@ -68,11 +145,17 @@ html[data-theme="light"] {
 html {
   scroll-behavior: smooth;
   color-scheme: dark;
+  max-width: 100%;
+  overflow-x: clip;
+  overscroll-behavior: none;
 }
 
 body {
   background-color: var(--color-background);
   color: var(--color-foreground);
+  max-width: 100%;
+  overflow-x: clip;
+  overscroll-behavior: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   transition:
@@ -80,6 +163,46 @@ body {
     color 0.25s ease;
 }
 
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--muted-foreground) transparent;
+}
+
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--muted-foreground);
+  border-radius: 999px;
+}
+
+.console-toaster[data-x-position="center"] {
+  left: 50vw !important;
+  right: auto !important;
+  width: max-content !important;
+  max-width: calc(100vw - 24px) !important;
+  transform: translateX(-50%) !important;
+}
+
+@supports not (overflow: clip) {
+  html,
+  body {
+    overflow-x: hidden;
+  }
+}
+
+.overflow-auto,
+.overflow-x-auto,
+.overflow-y-auto {
+  overscroll-behavior: none;
+}
+
 /* Text wrap utilities */
 .text-balance {
   text-wrap: balance;
@@ -111,29 +234,29 @@ body {
   --color-fg-muted: var(--color-muted-foreground);
   --color-fg-faint: var(--color-subtle-foreground);
   --color-fg-label: var(--color-subtle-foreground);
-  --color-fg-disabled: rgba(255, 255, 255, 0.25);
+  --color-fg-disabled: color-mix(in oklch, var(--foreground) 25%, transparent);
 
   /* Border ramp */
-  --color-border-hairline: rgba(255, 255, 255, 0.06);
-  --color-border-subtle: var(--color-border);
-  --color-border-strong: rgba(255, 255, 255, 0.15);
+  --color-border-hairline: color-mix(in oklch, var(--border) 60%, transparent);
+  --color-border-subtle: var(--border);
+  --color-border-strong: var(--input);
 
   /* Surface ramp */
-  --color-shell: #070707;
-  --color-dark-surface: #1a1a1a;
-  --color-surface-raised: #242424;
+  --color-shell: var(--background);
+  --color-dark-surface: var(--muted);
+  --color-surface-raised: var(--popover);
 
   /* State tints */
-  --color-zebra: rgba(255, 255, 255, 0.025);
-  --color-hover: rgba(255, 255, 255, 0.04);
-  --color-tint: rgba(255, 255, 255, 0.06);
-  --color-active: rgba(255, 255, 255, 0.07);
-  --color-pop: rgba(255, 255, 255, 0.1);
+  --color-zebra: color-mix(in oklch, var(--foreground) 2.5%, transparent);
+  --color-hover: color-mix(in oklch, var(--foreground) 4%, transparent);
+  --color-tint: color-mix(in oklch, var(--foreground) 6%, transparent);
+  --color-active: color-mix(in oklch, var(--foreground) 7%, transparent);
+  --color-pop: color-mix(in oklch, var(--foreground) 10%, transparent);
   --color-overlay: rgba(0, 0, 0, 0.5);
 
   /* Sidebar card */
-  --color-sidebar-card-bg: #181818;
-  --color-sidebar-card-bg-hover: #1e1e1e;
+  --color-sidebar-card-bg: var(--card);
+  --color-sidebar-card-bg-hover: var(--accent);
 
   /* Chart series — categorical identity for capabilities (table dots,
      sparklines, tooltips). Seven slots in a FIXED order; never cycled — an
@@ -151,11 +274,15 @@ body {
   --color-series-other: rgba(255, 255, 255, 0.28);
 
   /* CTA */
-  --color-cta: var(--color-green);
-  --color-cta-hover: var(--color-green-light);
-  --color-cta-active: var(--color-green-dark);
-  --color-cta-border: var(--color-green-light);
-  --color-cta-fg: #ffffff;
+  --color-cta: var(--primary);
+  --color-cta-hover: color-mix(in oklch, var(--primary) 86%, var(--background));
+  --color-cta-active: color-mix(
+    in oklch,
+    var(--primary) 76%,
+    var(--background)
+  );
+  --color-cta-border: transparent;
+  --color-cta-fg: var(--primary-foreground);
 
   /* Accents */
   --color-warm: #f59e0b;
@@ -185,12 +312,7 @@ body {
   --motion-easing-spring: cubic-bezier(0.32, 0.72, 0, 1);
 
   /* Chart palette */
-  --chart-revenue: #40bf86;
-  --chart-1: #40bf86;
-  --chart-2: #25abd0;
-  --chart-3: #e5a536;
-  --chart-4: #d94f70;
-  --chart-5: #8b5cf6;
+  --chart-revenue: var(--chart-2);
   --chart-6: #06b6d4;
   --chart-7: #f59e0b;
   --chart-8: #ec4899;
@@ -208,29 +330,28 @@ body {
 
 /* Light-mode console token overrides */
 html[data-theme="light"] {
-  --color-fg-disabled: rgba(24, 24, 27, 0.25);
-  --color-border-hairline: rgba(24, 24, 27, 0.1);
-  --color-border-strong: rgba(24, 24, 27, 0.2);
-
-  /* Flip the literal-dark surface vocabulary in light mode */
-  --color-dark: #fafafa;
-  --color-dark-lighter: #ffffff;
-  --color-dark-card: #f4f4f5;
-  --color-dark-border: #e4e4e7;
-
-  --color-shell: #f4f4f5;
-  --color-dark-surface: #f4f4f5;
-  --color-surface-raised: #ffffff;
-
-  --color-zebra: rgba(24, 24, 27, 0.025);
-  --color-hover: rgba(24, 24, 27, 0.05);
-  --color-tint: rgba(24, 24, 27, 0.06);
-  --color-active: rgba(24, 24, 27, 0.08);
-  --color-pop: rgba(24, 24, 27, 0.1);
+  --color-fg-disabled: color-mix(in oklch, var(--foreground) 25%, transparent);
+  --color-border-hairline: color-mix(in oklch, var(--border) 80%, transparent);
+  --color-border-strong: var(--input);
+
+  --color-dark: var(--background);
+  --color-dark-lighter: var(--muted);
+  --color-dark-card: var(--card);
+  --color-dark-border: var(--border);
+
+  --color-shell: var(--background);
+  --color-dark-surface: var(--muted);
+  --color-surface-raised: var(--popover);
+
+  --color-zebra: color-mix(in oklch, var(--foreground) 2.5%, transparent);
+  --color-hover: color-mix(in oklch, var(--foreground) 5%, transparent);
+  --color-tint: color-mix(in oklch, var(--foreground) 6%, transparent);
+  --color-active: color-mix(in oklch, var(--foreground) 8%, transparent);
+  --color-pop: color-mix(in oklch, var(--foreground) 10%, transparent);
   --color-overlay: rgba(24, 24, 27, 0.32);
 
   --color-sidebar-card-bg: transparent;
-  --color-sidebar-card-bg-hover: rgba(24, 24, 27, 0.05);
+  --color-sidebar-card-bg-hover: var(--accent);
 
   /* Chart series — the light-surface steps of the same seven slots. Three
      (aqua, yellow, magenta) sit under 3:1 on white; the breakdown table is
@@ -244,11 +365,14 @@ html[data-theme="light"] {
   --color-series-7: #4a3aa7;
   --color-series-other: rgba(24, 24, 27, 0.3);
 
-  /* Light-mode CTA flips to zinc-900 (Vercel/Linear/Stripe convention) */
-  --color-cta: #18181b;
-  --color-cta-hover: #27272a;
-  --color-cta-active: #09090b;
-  --color-cta-border: #27272a;
+  --color-cta: var(--primary);
+  --color-cta-hover: color-mix(in oklch, var(--primary) 86%, var(--background));
+  --color-cta-active: color-mix(
+    in oklch,
+    var(--primary) 76%,
+    var(--background)
+  );
+  --color-cta-border: transparent;
 
   /* Legibility steps for accents on light surfaces */
   --color-green-bright: #1e9960;
@@ -315,23 +439,15 @@ textarea:-webkit-autofill {
    of button fills — a page with six green buttons has no accent left.
    Both fills key off foreground/background, so light mode inverts for free. */
 .btn-primary {
-  background-color: var(--color-foreground);
-  color: var(--color-background);
+  background-color: var(--primary);
+  color: var(--primary-foreground);
   border: 1px solid transparent;
 }
 .btn-primary:hover:not(:disabled) {
-  background-color: color-mix(
-    in srgb,
-    var(--color-foreground) 86%,
-    var(--color-background)
-  );
+  background-color: color-mix(in oklch, var(--primary) 86%, var(--background));
 }
 .btn-primary:active:not(:disabled) {
-  background-color: color-mix(
-    in srgb,
-    var(--color-foreground) 76%,
-    var(--color-background)
-  );
+  background-color: color-mix(in oklch, var(--primary) 76%, var(--background));
 }
 
 /* The outline recipe. Console chrome comes in several heights (26/30/36px), so
@@ -339,27 +455,30 @@ textarea:-webkit-autofill {
    it with a Button size is preferred; hand-rolled sizing is fine, a hand-rolled
    *palette* is not, which is how two different outline looks shipped. */
 .btn-outline {
-  border: 1px solid var(--color-border-hairline);
-  background-color: var(--color-dark-card);
-  color: var(--color-fg-strong);
+  border: 1px solid var(--border);
+  background-color: var(--secondary);
+  color: var(--secondary-foreground);
 }
 .btn-outline:hover:not(:disabled) {
-  border-color: var(--color-border-subtle);
-  color: var(--color-fg);
+  background-color: var(--accent);
+  color: var(--accent-foreground);
 }
 
-/* Reserved for the rare action that should read as Livepeer-green rather than
-   neutral. Deliberately not the default — see the accent rule in CLAUDE.md. */
+/* Legacy `accent` callers now use the registry accent role. */
 .btn-accent {
-  background-color: var(--color-cta);
-  color: var(--color-cta-fg);
-  border: 1px solid var(--color-cta-border);
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+  border: 1px solid var(--border);
 }
 .btn-accent:hover:not(:disabled) {
-  background-color: var(--color-cta-hover);
+  background-color: var(--secondary);
 }
 .btn-accent:active:not(:disabled) {
-  background-color: var(--color-cta-active);
+  background-color: color-mix(
+    in oklch,
+    var(--secondary) 85%,
+    var(--foreground)
+  );
 }
 
 /* ─── Tone palette utilities ─── */
@@ -450,3 +569,82 @@ textarea:-webkit-autofill {
 .animate-status-halo {
   animation: statusHalo 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
+
+@theme inline {
+  --font-inter: InterVariable, Inter, ui-sans-serif, system-ui, sans-serif;
+  --font-display: "Favorit", "Favorit Pro", var(--font-inter), sans-serif;
+  --font-heading: var(--font-inter), Inter, sans-serif;
+  --font-sans: var(--font-inter), Inter, ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "Favorit Mono", ui-monospace, monospace;
+  --font-weight-book: 350;
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+  --text-ui-caption: 12px;
+  --text-ui-caption--line-height: 16px;
+  --text-ui-caption--font-weight: 500;
+  --text-ui-caption--letter-spacing: 0;
+  --text-ui-body: 14px;
+  --text-ui-body--line-height: 20px;
+  --text-ui-body--font-weight: 400;
+  --text-ui-body--letter-spacing: 0;
+  --text-reading-body: 16px;
+  --text-reading-body--line-height: 28px;
+  --text-reading-body--font-weight: 400;
+  --text-reading-body--letter-spacing: 0;
+  --text-page-title: 32px;
+  --text-page-title--line-height: 0.98;
+  --text-page-title--font-weight: 300;
+  --text-page-title--letter-spacing: 0;
+  --text-display-sm: 36px;
+  --text-display-sm--line-height: 0.98;
+  --text-display-sm--font-weight: 300;
+  --text-display-sm--letter-spacing: 0;
+  --text-display-md: 48px;
+  --text-display-md--line-height: 0.98;
+  --text-display-md--font-weight: 300;
+  --text-display-md--letter-spacing: 0;
+  --text-display-lg: 60px;
+  --text-display-lg--line-height: 0.98;
+  --text-display-lg--font-weight: 300;
+  --text-display-lg--letter-spacing: 0;
+  --text-display-fluid: 64px;
+  --text-display-fluid--line-height: 0.98;
+  --text-display-fluid--font-weight: 300;
+  --text-display-fluid--letter-spacing: 0;
+}
diff --git a/app/icon.svg b/app/icon.svg
new file mode 100644
index 0000000..f7b5b96
--- /dev/null
+++ b/app/icon.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-8 -4 89 97">
+  <style>
+    path { fill: #000000; }
+    @media (prefers-color-scheme: dark) { path { fill: #ffffff; } }
+  </style>
+  <path d="M0 16.4436V0.944092H15.4995V16.4436H0Z"/>
+  <path d="M28.4692 34.504V19.0045H43.9687V34.504H28.4692Z"/>
+  <path d="M56.8936 52.5661V37.0667H72.393V52.5661H56.8936Z"/>
+  <path d="M28.4692 70.5814V55.0819H43.9687V70.5814H28.4692Z"/>
+  <path d="M0 88.6207V73.1212H15.4995V88.6207H0Z"/>
+  <path d="M0 52.5661V37.0667H15.4995V52.5661H0Z"/>
+</svg>
diff --git a/app/layout.tsx b/app/layout.tsx
index 76679d7..b4db325 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,26 +1,53 @@
 import type { Metadata } from "next";
-import { GeistSans } from "geist/font/sans";
-import { GeistMono } from "geist/font/mono";
+import type { CSSProperties } from "react";
+import { Toaster } from "sonner";
 import "./globals.css";
 
+const SITE_TITLE = "Livepeer Early Access";
+const SITE_DESCRIPTION =
+  "Explore Livepeer AI apps, manage API access, and track usage during early access.";
+
 export const metadata: Metadata = {
   metadataBase: new URL(
     process.env.VERCEL_PROJECT_PRODUCTION_URL
       ? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`
       : process.env.VERCEL_URL
         ? `https://${process.env.VERCEL_URL}`
-        : "https://dashboard.livepeer.org"
+        : "https://earlyaccess.livepeer.org"
   ),
-  title: "Livepeer Console",
-  description:
-    "Browse AI apps, manage API keys, and monitor usage on the Livepeer network.",
+  title: SITE_TITLE,
+  description: SITE_DESCRIPTION,
+  applicationName: SITE_TITLE,
+  icons: {
+    icon: "/icon.svg",
+  },
+  openGraph: {
+    title: SITE_TITLE,
+    description: SITE_DESCRIPTION,
+    siteName: SITE_TITLE,
+    type: "website",
+    images: [
+      {
+        url: "/opengraph-image",
+        width: 1200,
+        height: 630,
+        alt: SITE_TITLE,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: SITE_TITLE,
+    description: SITE_DESCRIPTION,
+    images: ["/opengraph-image"],
+  },
 };
 
 // FOUT prevention — runs synchronously before paint so dual-source CSS
-// variables resolve to the stored theme on first render. With no stored
-// preference we fall back to "system", i.e. the OS `prefers-color-scheme`.
-// ThemeProvider in the (app) layout takes over after hydration.
-const THEME_INIT_SCRIPT = `(function(){try{var s=localStorage.getItem('theme')||'system';var d=s==='dark'||(s!=='light'&&matchMedia('(prefers-color-scheme: dark)').matches);document.documentElement.dataset.theme=d?'dark':'light';}catch(e){document.documentElement.dataset.theme='dark';}})();`;
+// variables resolve from the OS theme immediately. ThemeProvider in the
+// console layout keeps this in sync after hydration.
+const THEME_INIT_SCRIPT = `(function(){try{document.documentElement.dataset.theme=matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';}catch(e){document.documentElement.dataset.theme='dark';}})();`;
+const TOASTER_STYLE = { "--width": "max-content" } as CSSProperties;
 
 export default function RootLayout({
   children,
@@ -28,16 +55,37 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html
-      lang="en"
-      suppressHydrationWarning
-      className={`${GeistSans.variable} ${GeistMono.variable}`}
-    >
+    <html lang="en" suppressHydrationWarning>
       <head>
+        <link rel="preconnect" href="https://rsms.me" crossOrigin="anonymous" />
+        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
         <script dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }} />
       </head>
       <body className="min-h-screen bg-background font-sans text-foreground antialiased">
         {children}
+        <Toaster
+          position="bottom-center"
+          theme="system"
+          className="console-toaster"
+          style={TOASTER_STYLE}
+          closeButton={false}
+          visibleToasts={3}
+          toastOptions={{
+            duration: 1800,
+            className: "font-sans text-sm whitespace-nowrap",
+            style: {
+              background: "var(--popover)",
+              border: "1px solid var(--border)",
+              color: "var(--popover-foreground)",
+              boxShadow:
+                "0 14px 40px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08)",
+              maxWidth: "calc(100vw - 24px)",
+              minWidth: "max-content",
+              width: "max-content",
+              whiteSpace: "nowrap",
+            },
+          }}
+        />
       </body>
     </html>
   );
diff --git a/app/opengraph-image.tsx b/app/opengraph-image.tsx
new file mode 100644
index 0000000..5d524c4
--- /dev/null
+++ b/app/opengraph-image.tsx
@@ -0,0 +1,44 @@
+import { ImageResponse } from "next/og";
+
+export const size = { width: 1200, height: 630 };
+export const contentType = "image/png";
+export const alt = "Livepeer Early Access";
+
+export default function OpengraphImage() {
+  return new ImageResponse(
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "#000000",
+      }}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 711 89"
+        width={640}
+        height={80}
+        fill="#ffffff"
+      >
+        <path d="M0 16.4436V0.944092H15.4995V16.4436H0Z" />
+        <path d="M28.4692 34.504V19.0045H43.9687V34.504H28.4692Z" />
+        <path d="M56.8936 52.5661V37.0667H72.393V52.5661H56.8936Z" />
+        <path d="M28.4692 70.5814V55.0819H43.9687V70.5814H28.4692Z" />
+        <path d="M0 88.6207V73.1212H15.4995V88.6207H0Z" />
+        <path d="M0 52.5661V37.0667H15.4995V52.5661H0Z" />
+        <path d="M118.899 88.6863V0.97998H135.921V73.6405H185.815V88.6863H118.899Z" />
+        <path d="M195.932 88.6863V0.97998H212.954V88.6863H195.932Z" />
+        <path d="M291.653 0.97998H310.34L277.221 88.6863H255.142L221.283 0.97998H240.34L266.551 70.9493L291.653 0.97998Z" />
+        <path d="M319.038 88.6863V52.5316H336.06V37.121H319.038V0.97998H385.955V16.0258H336.06V37.121H378.369V52.5316H336.06V73.6405H387.25V88.6863H319.038Z" />
+        <path d="M400.019 88.6863V0.97998H439.798C457.005 0.97998 468.23 9.63853 468.23 26.9229C468.23 42.2786 457.005 52.6235 439.798 52.6235H417.041V88.6863H400.019ZM417.041 37.0306H437.886C446.521 37.0306 451.146 32.8877 451.146 26.7406C451.146 20.1235 446.521 16.0258 437.886 16.0258H417.041V37.0306Z" />
+        <path d="M479.889 88.6863V52.5316H496.911V37.121H479.889V0.97998H546.805V16.0258H496.911V37.121H539.219V52.5316H496.911V73.6405H548.1V88.6863H479.889Z" />
+        <path d="M560.869 88.6863V52.5316H577.891V37.121H560.869V0.97998H627.785V16.0258H577.891V37.121H620.2V52.5316H577.891V73.6405H629.081V88.6863H560.869Z" />
+        <path d="M641.85 88.6863V0.97998H682.925C698.488 0.983166 710.061 8.54418 710.061 22.8274C710.061 33.708 705.127 40.3254 695.013 44.0563C704.202 44.0563 708.766 48.2153 708.766 56.4722V88.6863H691.744V60.6923C691.744 54.3927 689.894 52.5578 683.541 52.5578H658.872V88.6863H641.85ZM658.872 37.0884H677.867C687.797 37.0884 692.977 33.7995 692.977 26.616C692.977 19.4325 687.982 16.0258 677.867 16.0258H658.872V37.0884Z" />
+      </svg>
+    </div>,
+    size
+  );
+}
diff --git a/app/robots.ts b/app/robots.ts
index 3cd027f..b2ce5f2 100644
--- a/app/robots.ts
+++ b/app/robots.ts
@@ -5,8 +5,8 @@ export default function robots(): MetadataRoute.Robots {
     rules: {
       userAgent: "*",
       allow: ["/", "/explore", "/network", "/models", "/login", "/signup"],
-      disallow: ["/home", "/calls", "/usage", "/keys", "/settings"],
+      disallow: ["/home", "/install", "/calls", "/usage", "/keys"],
     },
-    sitemap: "https://dashboard.livepeer.org/sitemap.xml",
+    sitemap: "https://earlyaccess.livepeer.org/sitemap.xml",
   };
 }
diff --git a/app/sitemap.ts b/app/sitemap.ts
index a23f5fa..19e2660 100644
--- a/app/sitemap.ts
+++ b/app/sitemap.ts
@@ -1,6 +1,6 @@
 import type { MetadataRoute } from "next";
 
-const BASE_URL = "https://dashboard.livepeer.org";
+const BASE_URL = "https://earlyaccess.livepeer.org";
 
 export default function sitemap(): MetadataRoute.Sitemap {
   return [
diff --git a/components.json b/components.json
new file mode 100644
index 0000000..fa5ac76
--- /dev/null
+++ b/components.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide",
+  "registries": {
+    "@livepeer-ui": "https://livepeer.peaceno.de/r/{name}.json"
+  }
+}
diff --git a/components/console/CopyButton.tsx b/components/console/CopyButton.tsx
index 2cc613f..d37b584 100644
--- a/components/console/CopyButton.tsx
+++ b/components/console/CopyButton.tsx
@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { Check, Copy } from "lucide-react";
 import type { ReactNode } from "react";
+import { toast } from "sonner";
 
 interface CopyButtonProps {
   /** The string copied to the clipboard. */
@@ -22,6 +23,9 @@ interface CopyButtonProps {
   ariaLabel?: string;
   /** Override the timeout before reverting from "Copied" state. Default 1600ms. */
   timeoutMs?: number;
+  /** Feedback style after copying. Default `inline` changes the button; `toast` keeps the button stable. */
+  feedback?: "inline" | "toast";
+  toastMessage?: string;
   /** Optional className applied to the button (alignment, ml-auto, etc.). */
   className?: string;
   /** Optional callback after a successful copy (e.g. tracking). */
@@ -51,6 +55,8 @@ export default function CopyButton({
   size = "sm",
   ariaLabel,
   timeoutMs = 1600,
+  feedback = "inline",
+  toastMessage = "copied to clipboard",
   className = "",
   onCopy,
   children,
@@ -60,9 +66,13 @@ export default function CopyButton({
 
   const handleCopy = () => {
     navigator.clipboard.writeText(value).then(() => {
-      setCopied(true);
+      if (feedback === "toast") {
+        toast(toastMessage);
+      } else {
+        setCopied(true);
+        window.setTimeout(() => setCopied(false), timeoutMs);
+      }
       onCopy?.();
-      window.setTimeout(() => setCopied(false), timeoutMs);
     });
   };
 
@@ -81,7 +91,7 @@ export default function CopyButton({
         : "border border-subtle text-fg-strong hover:border-strong hover:bg-hover hover:text-fg"
       : copied
         ? "bg-green-bright/15 text-green-bright"
-        : "text-fg-muted hover:bg-tint hover:text-fg";
+        : "text-fg-muted hover:text-fg";
 
   const finalLabel = copied ? "Copied" : label;
   const showLabel = !iconOnly;
diff --git a/components/console/TabStrip.tsx b/components/console/TabStrip.tsx
index c66ea03..1066b13 100644
--- a/components/console/TabStrip.tsx
+++ b/components/console/TabStrip.tsx
@@ -33,7 +33,6 @@ interface TabStripProps<T extends string = string> {
  * TabStrip — horizontal pill tab strip with a sliding active indicator.
  *
  * Used across:
- *  - `/settings` (Account / API Tokens / Billing)
  *  - `/network` (Overview / Utilization / Payments / GPUs)
  *  - `/` (the Tasks/category row)
  *
diff --git a/components/console/ThemeContext.tsx b/components/console/ThemeContext.tsx
index 2dc985e..ffc1250 100644
--- a/components/console/ThemeContext.tsx
+++ b/components/console/ThemeContext.tsx
@@ -1,7 +1,5 @@
 "use client";
 
-import { Monitor, Moon, Sun, type LucideIcon } from "lucide-react";
-
 import {
   createContext,
   useCallback,
@@ -21,35 +19,17 @@ export type ThemePreference = "light" | "dark" | "system";
 /** What's actually applied to `<html data-theme="...">`. Always concrete. */
 export type ResolvedTheme = "light" | "dark";
 
-/**
- * The three choices, in the order every theme control shows them. Shared by
- * the Appearance settings view and the account menu so they can't drift.
- */
-export const THEME_OPTIONS: {
-  value: ThemePreference;
-  label: string;
-  icon: LucideIcon;
-}[] = [
-  { value: "light", label: "Light", icon: Sun },
-  { value: "dark", label: "Dark", icon: Moon },
-  { value: "system", label: "System", icon: Monitor },
-];
-
 interface ThemeContextValue {
-  /** The user's stored preference. */
+  /** The console is system-only; this always reports "system". */
   preference: ThemePreference;
   /** The concrete theme currently applied (resolved through `system`). */
   resolved: ResolvedTheme;
-  /** True until we've read localStorage on the client; consumers can avoid
-   *  flashing UI driven by `preference` during this window. */
+  /** True until the first OS theme read has completed on the client. */
   isLoading: boolean;
-  /** Persist a new preference and re-apply `data-theme`. */
+  /** Kept for API compatibility; resets back to system. */
   setPreference: (p: ThemePreference) => void;
 }
 
-// Shared with the marketing site's ThemeToggle (components/layout/ThemeToggle.tsx)
-// and the root layout's inline init script (app/layout.tsx). Same key on both
-// sides means flipping the toggle in either context propagates to the other.
 const THEME_STORAGE_KEY = "theme";
 
 const ThemeContext = createContext<ThemeContextValue>({
@@ -69,33 +49,20 @@ function prefersDarkOS(): boolean {
   return window.matchMedia("(prefers-color-scheme: dark)").matches;
 }
 
-/** Combine a user preference with the live OS pref to get a concrete theme. */
-function resolvePreference(p: ThemePreference): ResolvedTheme {
-  if (p === "light") return "light";
-  if (p === "dark") return "dark";
+/** Resolve the live OS preference to a concrete theme. */
+function resolveSystemPreference(): ResolvedTheme {
   return prefersDarkOS() ? "dark" : "light";
 }
 
 /**
- * ThemeProvider — owns the user's theme preference for the console.
- *
- * Source of truth: `localStorage["theme"]`. Same key the marketing site's
- * ThemeToggle uses — flipping the toggle on either surface propagates to the
- * other. Default is "system" for first-time visitors: we follow
- * `prefers-color-scheme` via a matchMedia listener so OS theme changes flip
- * the console in real time. Users can pin "light" or "dark" via
- * Settings → Appearance, which tears the listener down.
+ * ThemeProvider — keeps the console on the system theme.
  *
  * The `<html data-theme="...">` attribute is set both by an inline script in
  * the console layout (`app/(app)/layout.tsx` — runs before
  * paint, prevents FOUT) and by this provider (keeps the attribute in sync
- * after hydration). The provider is the canonical writer post-mount; the
- * inline script just gets us through the first frame.
+ * after hydration).
  */
 export function ThemeProvider({ children }: { children: ReactNode }) {
-  // Default to "system" — concrete value gets re-read from localStorage in
-  // useEffect below. Server render uses this fallback.
-  const [preference, setPreferenceState] = useState<ThemePreference>("system");
   const [resolved, setResolved] = useState<ResolvedTheme>("dark");
   const [isLoading, setIsLoading] = useState(true);
 
@@ -109,59 +76,40 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     }
   }, []);
 
-  // Hydration: read stored preference from localStorage and resolve it.
+  // Hydration: ignore old stored light/dark values and resolve from the OS.
   useEffect(() => {
     if (typeof window === "undefined") return;
-    let stored: ThemePreference = "system";
+
     try {
-      const raw = window.localStorage.getItem(THEME_STORAGE_KEY);
-      if (raw === "light" || raw === "dark" || raw === "system") {
-        stored = raw;
-      }
+      window.localStorage.removeItem(THEME_STORAGE_KEY);
     } catch {
-      // localStorage may throw in iframes / private mode — fall through.
+      // localStorage may throw in iframes / private mode.
     }
-    setPreferenceState(stored);
-    applyResolved(resolvePreference(stored));
+
+    applyResolved(resolveSystemPreference());
     setIsLoading(false);
-  }, [applyResolved]);
 
-  // Subscribe to OS preference changes ONLY while in "system" mode. The
-  // listener is torn down whenever the user pins a theme.
-  //
-  // We deliberately do NOT fire the listener immediately on attach: the
-  // hydration effect above has already called `applyResolved(resolvePreference
-  // (stored))` with the correct preference. Firing onChange() here would race
-  // it — during the first render `preference` is still the initial "system"
-  // default (closure-captured), so this effect would re-resolve to OS-pref
-  // and clobber the user's persisted choice during the brief two-render
-  // hydration window. Listener fires only on future OS changes.
-  useEffect(() => {
-    if (preference !== "system") return;
-    if (typeof window === "undefined") return;
-    if (isLoading) return; // wait until hydration committed
     const mql = window.matchMedia("(prefers-color-scheme: dark)");
-    const onChange = () => applyResolved(prefersDarkOS() ? "dark" : "light");
+    const onChange = () => applyResolved(resolveSystemPreference());
     mql.addEventListener("change", onChange);
     return () => mql.removeEventListener("change", onChange);
-  }, [preference, isLoading, applyResolved]);
+  }, [applyResolved]);
 
-  const setPreference = useCallback(
-    (p: ThemePreference) => {
-      setPreferenceState(p);
-      applyResolved(resolvePreference(p));
+  const setPreference: ThemeContextValue["setPreference"] = useCallback(
+    () => {
       try {
-        window.localStorage.setItem(THEME_STORAGE_KEY, p);
+        window.localStorage.removeItem(THEME_STORAGE_KEY);
       } catch {
-        // ignore — preference still applies for the session.
+        // ignore
       }
+      applyResolved(resolveSystemPreference());
     },
     [applyResolved]
   );
 
   return (
     <ThemeContext.Provider
-      value={{ preference, resolved, isLoading, setPreference }}
+      value={{ preference: "system", resolved, isLoading, setPreference }}
     >
       {children}
     </ThemeContext.Provider>
diff --git a/components/design-system/Button.tsx b/components/design-system/Button.tsx
index d004734..3ac0c89 100644
--- a/components/design-system/Button.tsx
+++ b/components/design-system/Button.tsx
@@ -40,7 +40,7 @@ export default function Button(props: AsLink | AsButton) {
     className = "",
     ...rest
   } = props;
-  const base = `inline-flex items-center justify-center gap-2 select-none font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green ${sizeStyles[size]} ${variantStyles[variant]} ${className}`;
+  const base = `inline-flex items-center justify-center gap-2 select-none font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring ${sizeStyles[size]} ${variantStyles[variant]} ${className}`;
 
   if ("href" in rest) {
     return (
diff --git a/package.json b/package.json
index 0d21b62..afaa002 100644
--- a/package.json
+++ b/package.json
@@ -21,11 +21,13 @@
     "geist": "^1.7.0",
     "jose": "^6.2.10",
     "lucide-react": "^1.6.0",
+    "motion": "^13.2.0",
     "next": "^15.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "recharts": "^3.8.1",
     "server-only": "^0.0.1",
+    "sonner": "^2.0.8",
     "wavesurfer.js": "^7.12.6",
     "zod": "^3.25.76"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4d7099e..fbfcd1c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,6 +32,9 @@ importers:
       lucide-react:
         specifier: ^1.6.0
         version: 1.7.0(react@19.2.4)
+      motion:
+        specifier: ^13.2.0
+        version: 13.2.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       next:
         specifier: ^15.1.0
         version: 15.5.14(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -47,6 +50,9 @@ importers:
       server-only:
         specifier: ^0.0.1
         version: 0.0.1
+      sonner:
+        specifier: ^2.0.8
+        version: 2.0.8(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       wavesurfer.js:
         specifier: ^7.12.6
         version: 7.12.7
@@ -1354,6 +1360,17 @@ packages:
       react-dom:
         optional: true
 
+  framer-motion@13.2.0:
+    resolution: {integrity: sha512-9E33ebgMaO33w1nN/jEdW8z3/GO483fMi4rqbMG9rt83XgW9QLKRe4NcmJ8s+fQ3O34++UHrIQwlIWGIWTITjA==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   fresh@2.0.0:
     resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
     engines: {node: '>= 0.8'}
@@ -1796,9 +1813,26 @@ packages:
   motion-dom@11.18.1:
     resolution: {integrity: sha512-g76KvA001z+atjfxczdRtw/RXOM3OMSdd1f4DL77qCTF/+avrRJiawSG4yDibEQ215sr9kpinSlX2pCTJ9zbhw==}
 
+  motion-dom@13.2.0:
+    resolution: {integrity: sha512-N6gdSoWRDk0Rh/fVtlqUtLs+fEN3ELFZI3cn3IQE9Mnf3E+Mh8wjO6MstzCOPFh4Yf0L1as5m2eUyYWj8ylVSQ==}
+
   motion-utils@11.18.1:
     resolution: {integrity: sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==}
 
+  motion-utils@13.0.0:
+    resolution: {integrity: sha512-7DnN7TmbLcYXcG4RVadXIihWlyuM9afoUww8Y5Agg431kGKiuL2/OMyP4mJ5wLz+pvN3t5ySClLOaVXJ+wekRQ==}
+
+  motion@13.2.0:
+    resolution: {integrity: sha512-4Hrb5vD6HhjFstLUiCmWvtpsw+WTpP4R+QXfSDYZBz7+uxE/LrRg3aV0ReJxHrTRffHhbIE6svEqnotngXvesQ==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -2156,6 +2190,16 @@ packages:
     resolution: {integrity: sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==}
     engines: {node: '>= 0.4'}
 
+  sonner@2.0.8:
+    resolution: {integrity: sha512-UM/ByIoFra8yzV75n1o0Puu0bw5U/9UNnDacrJNspekBewIfsQ3D6ez1nvlWpt7aTsO6rujQtifBpycwIivqlg==}
+    peerDependencies:
+      '@types/react': ^18.0.0 || ^19.0.0
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -3703,6 +3747,15 @@ snapshots:
       react: 19.2.4
       react-dom: 19.2.4(react@19.2.4)
 
+  framer-motion@13.2.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      motion-dom: 13.2.0
+      motion-utils: 13.0.0
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
   fresh@2.0.0: {}
 
   function-bind@1.1.2: {}
@@ -4109,8 +4162,22 @@ snapshots:
     dependencies:
       motion-utils: 11.18.1
 
+  motion-dom@13.2.0:
+    dependencies:
+      motion-utils: 13.0.0
+
   motion-utils@11.18.1: {}
 
+  motion-utils@13.0.0: {}
+
+  motion@13.2.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      framer-motion: 13.2.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
   ms@2.1.3: {}
 
   nanoid@3.3.11: {}
@@ -4556,6 +4623,13 @@ snapshots:
       side-channel-map: 1.0.1
       side-channel-weakmap: 1.0.2
 
+  sonner@2.0.8(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+
   source-map-js@1.2.1: {}
 
   stable-hash@0.0.5: {}

From db2ff74d6f97aa1eed63478e1e10aeef142993d8 Mon Sep 17 00:00:00 2001
From: peace node <peacenode@aol.com>
Date: Thu, 3 Sep 2026 18:36:12 -0400
Subject: [PATCH 2/5] feat(console): simplify navigation and account chrome

---
 app/(app)/apps/[id]/page.tsx                  |   13 +-
 app/(app)/calls/page.tsx                      |    8 +-
 app/(app)/device/DeviceApproveForm.tsx        |    3 +-
 app/(app)/layout.tsx                          |   42 +-
 app/(app)/network/page.tsx                    |    4 +-
 app/(app)/settings/page.tsx                   |  151 +--
 app/(app)/usage/page.tsx                      |   48 +-
 app/(app)/waitlist/page.tsx                   |    3 +-
 app/(auth)/layout.tsx                         |   19 +-
 app/api/pymthouse/payment-methods/route.ts    |    5 +-
 app/api/pymthouse/subscribe/route.ts          |    4 +-
 .../pymthouse/wallet/payment-methods/route.ts |    4 +-
 app/api/pymthouse/wallet/top-up/route.ts      |    4 +-
 components/console/ConsolePageHeader.tsx      |   21 +-
 components/console/ConsoleSearch.tsx          |   25 +-
 components/console/ConsoleSidebar.tsx         | 1142 +++++++----------
 components/console/ExploreView.tsx            |    1 -
 components/console/HomeNudge.tsx              |    6 +-
 components/console/KeyboardShortcuts.tsx      |   12 +-
 components/console/KeysView.tsx               |    1 -
 components/console/LoginPage.tsx              |    2 +-
 components/console/NavLink.tsx                |  155 +--
 components/console/OrganizationMenu.tsx       |  260 ----
 components/console/PlansPanel.tsx             |   16 +-
 components/console/SidebarUsageCard.tsx       |  123 +-
 components/console/SignInWall.tsx             |   11 +-
 .../console/settings/AccountSection.tsx       |   93 --
 .../console/settings/AppearanceSection.tsx    |   98 --
 .../console/settings/BillingSection.tsx       |    7 +-
 components/design-system/Drawer.tsx           |   30 +-
 lib/console/email-allowlist.ts                |    4 +-
 lib/console/useOwnerWallet.ts                 |    6 +-
 lib/constants.ts                              |   36 +-
 middleware.ts                                 |    8 +-
 next.config.ts                                |   11 +
 35 files changed, 612 insertions(+), 1764 deletions(-)
 delete mode 100644 components/console/OrganizationMenu.tsx
 delete mode 100644 components/console/settings/AccountSection.tsx
 delete mode 100644 components/console/settings/AppearanceSection.tsx

diff --git a/app/(app)/apps/[id]/page.tsx b/app/(app)/apps/[id]/page.tsx
index 808d5fc..a6f0310 100644
--- a/app/(app)/apps/[id]/page.tsx
+++ b/app/(app)/apps/[id]/page.tsx
@@ -331,14 +331,7 @@ function ApiTab({ model }: { model: App }) {
         <KeyBadge prefix={defaultKey.prefix} />
         <p className="mt-2 text-[11px] text-fg-faint">
           Drop this into the{" "}
-          <code className="text-fg-muted">Authorization</code> header below, or{" "}
-          <Link
-            href="/settings?tab=tokens"
-            className="text-fg-strong underline-offset-2 hover:text-fg hover:underline"
-          >
-            manage your keys
-          </Link>
-          .
+          <code className="text-fg-muted">Authorization</code> header below.
         </p>
       </div>
 
@@ -371,10 +364,10 @@ function ApiTab({ model }: { model: App }) {
           Billed per request. Free tier covers your first 10,000 each month.
         </span>
         <Link
-          href="/settings?tab=billing"
+          href="/home"
           className="text-fg-strong underline-offset-2 hover:text-fg hover:underline"
         >
-          Add a payment provider →
+          View usage →
         </Link>
       </div>
     </div>
diff --git a/app/(app)/calls/page.tsx b/app/(app)/calls/page.tsx
index 59c6079..de668fb 100644
--- a/app/(app)/calls/page.tsx
+++ b/app/(app)/calls/page.tsx
@@ -1,13 +1,13 @@
 import { redirect } from "next/navigation";
 
 /**
- * `/calls` folded into `/usage` for the creator pilot — the call log now
- * renders underneath Spend by capability rather than as its own destination.
+ * `/calls` folded into `/home` for the creator pilot — the call log now
+ * renders on Home rather than as its own destination.
  *
  * The route stays as a redirect because `?request=<id>` links to a single call
  * are already in the wild (the app-detail log table, the Home activity panel
  * before it was removed, anything anyone bookmarked). The param carries over
- * so those still open the call drawer, just on Usage.
+ * so those still open the call drawer, just on Home.
  */
 export default async function CallsPage({
   searchParams,
@@ -17,5 +17,5 @@ export default async function CallsPage({
   const params = await searchParams;
   const request = params.request;
   const id = Array.isArray(request) ? request[0] : request;
-  redirect(id ? `/usage?request=${encodeURIComponent(id)}` : "/usage");
+  redirect(id ? `/home?request=${encodeURIComponent(id)}` : "/home");
 }
diff --git a/app/(app)/device/DeviceApproveForm.tsx b/app/(app)/device/DeviceApproveForm.tsx
index d06f257..1249ef3 100644
--- a/app/(app)/device/DeviceApproveForm.tsx
+++ b/app/(app)/device/DeviceApproveForm.tsx
@@ -1,14 +1,13 @@
 "use client";
 
 import { useState, type ReactNode } from "react";
-import { Smartphone } from "lucide-react";
 import Button from "@/components/design-system/Button";
 import ConsolePageHeader from "@/components/console/ConsolePageHeader";
 
 export function DevicePageChrome({ children }: { children: ReactNode }) {
   return (
     <>
-      <ConsolePageHeader title="Device sign-in" icon={Smartphone} />
+      <ConsolePageHeader title="Device sign-in" />
       <div className="mx-auto w-full max-w-5xl px-6 py-8">{children}</div>
     </>
   );
diff --git a/app/(app)/layout.tsx b/app/(app)/layout.tsx
index caa6d88..db42801 100644
--- a/app/(app)/layout.tsx
+++ b/app/(app)/layout.tsx
@@ -1,7 +1,5 @@
 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/console/AuthContext";
 import { EnvironmentProvider } from "@/components/console/EnvironmentContext";
 import { ThemeProvider } from "@/components/console/ThemeContext";
@@ -9,40 +7,24 @@ import ConsoleSidebar from "@/components/console/ConsoleSidebar";
 import KeyboardShortcuts from "@/components/console/KeyboardShortcuts";
 
 // FOUT prevention — runs synchronously in the document, before the console
-// subtree paints. Reads the stored theme preference from localStorage and
-// applies `<html data-theme="...">` so dual-source CSS variables resolve to
-// the right theme on first paint. The ThemeProvider takes over after
-// hydration; this is just the bootstrap.
-//
-// Reads the same `localStorage["theme"]` key the marketing site uses (see
-// `app/layout.tsx`'s inline script and `components/layout/ThemeToggle.tsx`),
-// so flipping the theme on either surface propagates to the other. Default
-// is "system" for first-time visitors — we follow the OS `prefers-color-scheme`
-// until the user pins light or dark via Settings → Appearance.
-const THEME_INIT_SCRIPT = `(function(){try{var s=localStorage.getItem('theme')||'system';var d=s==='dark'||(s!=='light'&&matchMedia('(prefers-color-scheme: dark)').matches);document.documentElement.dataset.theme=d?'dark':'light';}catch(e){document.documentElement.dataset.theme='dark';}})();`;
+// subtree paints. Theme is system-only, so first paint follows the OS
+// `prefers-color-scheme` result directly; ThemeProvider keeps it in sync after
+// hydration.
+const THEME_INIT_SCRIPT = `(function(){try{document.documentElement.dataset.theme=matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';}catch(e){document.documentElement.dataset.theme='dark';}})();`;
 
 export const metadata: Metadata = {
-  title: "Console — Livepeer",
+  title: "Livepeer Early Access",
   description:
-    "Browse AI apps, manage API keys, and monitor usage on the Livepeer network.",
+    "Explore Livepeer AI apps, manage API access, and track usage during early access.",
 };
 
-// The console runs on Geist (Vercel's open-source font) instead of Favorit Pro —
-// the console is a *tool*, the marketing site is the brand. We attach the Geist
-// CSS variables to this subtree and override `--font-sans` / `--font-mono` so
-// every Tailwind `font-sans` / `font-mono` consumer below this point picks Geist.
-//
-// Density: per the Livepeer Console design (Claude Design handoff, Apr 2026),
-// the console subtree uses a 13.5px body with a slightly tighter letter-spacing
-// to land in the same density bracket as Linear. Sidebar width and chrome head
-// height are exposed as custom properties so components can reference them.
+// Product surfaces use the registry theme's Inter-backed `font-sans`.
+// Sidebar width and chrome head height are exposed as custom properties so
+// components can reference them.
 const consoleOverrides = {
-  "--font-sans": "var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif",
-  "--font-mono": "var(--font-geist-mono), ui-monospace, monospace",
-  "--side-w": "232px",
+  "--side-w": "256px",
   "--head-h": "44px",
   fontSize: "13.5px",
-  letterSpacing: "-0.005em",
 } as CSSProperties;
 
 export default function ConsoleLayout({
@@ -62,11 +44,11 @@ export default function ConsoleLayout({
         <AuthProvider>
           <EnvironmentProvider>
             <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}`}
+              className="flex min-h-screen flex-col overflow-x-clip overscroll-none bg-dark font-sans md:h-screen md:min-h-0 md:flex-row md:overflow-hidden"
               style={consoleOverrides}
             >
               <ConsoleSidebar />
-              <div className="flex min-w-0 flex-1 flex-col bg-dark border-l border-hairline md:overflow-y-auto">
+              <div className="flex min-w-0 flex-1 flex-col overflow-x-clip overscroll-none bg-dark border-l border-hairline md:overflow-y-auto">
                 {children}
               </div>
               <KeyboardShortcuts />
diff --git a/app/(app)/network/page.tsx b/app/(app)/network/page.tsx
index ba6c7d8..e768439 100644
--- a/app/(app)/network/page.tsx
+++ b/app/(app)/network/page.tsx
@@ -5,7 +5,6 @@ import { useSearchParams, useRouter, usePathname } from "next/navigation";
 import {
   BarChart3,
   Activity,
-  Globe,
   Wallet,
   Cpu,
   ArrowUpRight,
@@ -106,8 +105,7 @@ function NetworkContent() {
   return (
     <main id="main-content" className="flex flex-1 flex-col bg-dark">
       <ConsolePageHeader
-        title="Network"
-        icon={Globe}
+        title="Stats"
         description="Live state of the open GPU network — orchestrators, payments, hardware."
         actions={
           <>
diff --git a/app/(app)/settings/page.tsx b/app/(app)/settings/page.tsx
index f98551f..7fb4b3a 100644
--- a/app/(app)/settings/page.tsx
+++ b/app/(app)/settings/page.tsx
@@ -1,150 +1,5 @@
-"use client";
+import { redirect } from "next/navigation";
 
-import { Suspense, useEffect } from "react";
-import Link from "next/link";
-import { useSearchParams, useRouter, usePathname } from "next/navigation";
-import { Settings as SettingsIcon } from "lucide-react";
-import { useAuth } from "@/components/console/AuthContext";
-import ConsolePageSkeleton from "@/components/console/ConsolePageSkeleton";
-import SignInWall from "@/components/console/SignInWall";
-import AccountSection from "@/components/console/settings/AccountSection";
-import AppearanceSection from "@/components/console/settings/AppearanceSection";
-
-// Settings is two tabs for the creator pilot:
-//   - `account`    — the merged former General + Profile (see AccountSection)
-//   - `appearance` — the local-only theme picker (light/dark/system)
-//
-// Four tabs are hidden rather than deleted; their sections still exist under
-// components/console/settings/ and come back by re-adding them here and to
-// SETTINGS_RAIL_ITEMS in ConsoleSidebar:
-//   - `members`       — team workspaces are backlogged; nothing behind the UI.
-//   - `billing`       — blocked on an unresolved question about which entity
-//                       bills (PymtHouse vs. Foundation vs. Inc). Shipping a
-//                       billing page before that is settled reads as "billing
-//                       is done" when the dependency is still open.
-//   - `notifications` — no notification delivery exists.
-//   - `security`      — session/2FA controls are owned by Auth0, not by us.
-//
-// No "usage-limits" tab: concurrent streams, per-key rate limits and allowed
-// regions were dropped (Aug 2026), and the one limit worth keeping — the hard
-// spend cap — belongs on the Usage meter, not in a settings form. See the
-// Spend cap note in CLAUDE.md.
-type SettingsTab = "account" | "appearance";
-
-const VALID_TABS: SettingsTab[] = ["account", "appearance"];
-
-const TAB_LABELS: Record<SettingsTab, string> = {
-  account: "Account",
-  appearance: "Appearance",
-};
-
-/**
- * Old tab ids that still resolve. `organization` and `profile` are the two
- * pages that merged into `account`; the rest are hidden sections whose links
- * are still in the wild (bookmarks, the org menu's old Billing entry). All of
- * them land on Account rather than 404-ing or rendering a hidden section.
- */
-const RETIRED_TABS = new Set([
-  "organization",
-  "profile",
-  "members",
-  "billing",
-  "notifications",
-  "security",
-]);
-
-export default function SettingsPage() {
-  return (
-    <Suspense
-      fallback={
-        <ConsolePageSkeleton
-          maxWidth="5xl"
-          withTabs={false}
-          kpiCount={0}
-          withChart={false}
-        />
-      }
-    >
-      <SettingsContent />
-    </Suspense>
-  );
-}
-
-function SettingsContent() {
-  const { isConnected, isLoading } = useAuth();
-  const searchParams = useSearchParams();
-  const router = useRouter();
-  const pathname = usePathname();
-
-  const rawTab = searchParams.get("tab");
-
-  // Back-compat redirects for old tab ids.
-  // - `tab=tokens` → /keys (kept so the URL still resolves even though API
-  //   keys is out of the nav for the pilot)
-  // - `tab=usage` → /usage (top-level route)
-  // - retired/merged tabs → drop the param entirely, landing on Account
-  useEffect(() => {
-    if (rawTab === "tokens") {
-      router.replace("/keys");
-    } else if (rawTab === "usage") {
-      router.replace("/usage");
-    } else if (rawTab === "account" || rawTab === null) {
-      // Already canonical — nothing to do.
-    } else if (
-      RETIRED_TABS.has(rawTab) ||
-      !VALID_TABS.includes(rawTab as SettingsTab)
-    ) {
-      const params = new URLSearchParams(searchParams.toString());
-      params.delete("tab");
-      const qs = params.toString();
-      router.replace(`${pathname}${qs ? `?${qs}` : ""}`, { scroll: false });
-    }
-  }, [rawTab, router, pathname, searchParams]);
-
-  // Default to "account" when no tab param is set.
-  const tab: SettingsTab = VALID_TABS.includes(rawTab as SettingsTab)
-    ? (rawTab as SettingsTab)
-    : "account";
-
-  // Wait for auth to hydrate so we don't flash the wrong state.
-  if (isLoading) return null;
-
-  // Organization-only — logged-out users see the sign-in wall.
-  if (!isConnected) return <SignInWall route="settings" />;
-
-  return (
-    <main id="main-content" className="flex flex-1 flex-col bg-dark">
-      {/* Breadcrumb chrome bar — Settings / {sub-tab label}. Mirrors the v7
-          prototype's `<PageHead crumbs={...} />` which uses the cog icon on
-          the first crumb and the active tab label on the second. */}
-      <div className="flex h-[44px] shrink-0 items-center gap-1 border-b border-hairline bg-dark px-5">
-        <Link
-          href="/home"
-          className="inline-flex items-center gap-1.5 rounded-[4px] px-1.5 py-1 text-[13px] text-fg-muted transition-colors hover:bg-hover hover:text-fg"
-        >
-          <SettingsIcon
-            className="h-3.5 w-3.5 shrink-0 text-fg-faint"
-            strokeWidth={1.75}
-            aria-hidden="true"
-          />
-          <span>Settings</span>
-        </Link>
-        <span className="px-1 text-fg-disabled" aria-hidden="true">
-          /
-        </span>
-        <span className="px-1.5 py-1 text-[13px] font-medium text-fg">
-          {TAB_LABELS[tab]}
-        </span>
-      </div>
-
-      {/* Body — single-column "settings shell" matching the prototype's
-          `.settings-shell-solo` (max-width 880px, padding 4px 28px 80px). */}
-      <div className="flex-1">
-        <div className="mx-auto w-full max-w-[880px] px-7 pt-6 pb-20">
-          {tab === "account" && <AccountSection />}
-          {tab === "appearance" && <AppearanceSection />}
-        </div>
-      </div>
-    </main>
-  );
+export default function LegacySettingsPage() {
+  redirect("/home");
 }
diff --git a/app/(app)/usage/page.tsx b/app/(app)/usage/page.tsx
index 7a25299..49a2852 100644
--- a/app/(app)/usage/page.tsx
+++ b/app/(app)/usage/page.tsx
@@ -1,47 +1,5 @@
-"use client";
+import { redirect } from "next/navigation";
 
-import { Suspense } from "react";
-import { BarChart3 } from "lucide-react";
-import { useAuth } from "@/components/console/AuthContext";
-import ConsolePageHeader from "@/components/console/ConsolePageHeader";
-import ConsolePageSkeleton from "@/components/console/ConsolePageSkeleton";
-import SignInWall from "@/components/console/SignInWall";
-import UsageView from "@/components/console/UsageView";
-
-export default function UsagePage() {
-  return (
-    <Suspense fallback={<ConsolePageSkeleton kpiCount={4} withChart />}>
-      <UsageContent />
-    </Suspense>
-  );
-}
-
-function UsageContent() {
-  const { isConnected, isLoading } = useAuth();
-
-  // Avoid flashing the wall while auth hydrates.
-  if (isLoading) return null;
-
-  // Workspace-only route — logged-out users see "Usage is workspace-only"
-  // wall in place of the console. The previous behavior (a hard redirect
-  // to /login) was wrong per the v4 prototype: it dropped the
-  // user out of context. The wall keeps them inside the app shell, leaves
-  // the sidebar in its logged-out variant, and offers an explicit
-  // "Explore capabilities" escape hatch.
-  if (!isConnected) return <SignInWall route="usage" />;
-
-  // No header action. "Manage plan" linked to /settings?tab=billing, which is
-  // hidden for the pilot — see the tab notes in app/(app)/settings/page.tsx.
-  return (
-    <main id="main-content" className="flex flex-1 flex-col bg-dark">
-      <ConsolePageHeader
-        title="Usage"
-        icon={BarChart3}
-        description="What this period cost, and the calls behind it."
-      />
-      <div className="flex flex-1 flex-col overflow-y-auto">
-        <UsageView />
-      </div>
-    </main>
-  );
+export default function LegacyUsagePage() {
+  redirect("/home");
 }
diff --git a/app/(app)/waitlist/page.tsx b/app/(app)/waitlist/page.tsx
index e72eb49..969e838 100644
--- a/app/(app)/waitlist/page.tsx
+++ b/app/(app)/waitlist/page.tsx
@@ -1,4 +1,3 @@
-import { Mail } from "lucide-react";
 import { auth0 } from "@/lib/auth0";
 import ConsolePageHeader from "@/components/console/ConsolePageHeader";
 import SectionHeader from "@/components/console/SectionHeader";
@@ -13,7 +12,7 @@ export default async function WaitlistPage() {
 
   return (
     <>
-      <ConsolePageHeader title="Waitlist" icon={Mail} />
+      <ConsolePageHeader title="Waitlist" />
       <main className="mx-auto w-full max-w-5xl px-5 py-8">
         <SectionHeader
           variant="default"
diff --git a/app/(auth)/layout.tsx b/app/(auth)/layout.tsx
index b1bb364..7834ef9 100644
--- a/app/(auth)/layout.tsx
+++ b/app/(auth)/layout.tsx
@@ -1,21 +1,11 @@
 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/console/AuthContext";
 
 export const metadata: Metadata = {
-  title: "Sign in — Livepeer Console",
-  description: "Sign in or create an account to access the Livepeer Console.",
+  title: "Sign in — Livepeer Early Access",
+  description: "Sign in or create an account to access Livepeer Early Access.",
 };
 
-// Auth pages share the console's Geist typography rather than the marketing
-// site's Favorit Pro — the "you've crossed into the tool" cliff starts here.
-const geistOverride = {
-  "--font-sans": "var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif",
-  "--font-mono": "var(--font-geist-mono), ui-monospace, monospace",
-} as CSSProperties;
-
 export default function ConsoleAuthLayout({
   children,
 }: {
@@ -23,10 +13,7 @@ export default function ConsoleAuthLayout({
 }) {
   return (
     <AuthProvider>
-      <div
-        className={`min-h-screen bg-dark font-sans ${GeistSans.variable} ${GeistMono.variable}`}
-        style={geistOverride}
-      >
+      <div className="min-h-screen overflow-x-clip overscroll-none bg-dark font-sans">
         {children}
       </div>
     </AuthProvider>
diff --git a/app/api/pymthouse/payment-methods/route.ts b/app/api/pymthouse/payment-methods/route.ts
index 7d44725..fa6b7c2 100644
--- a/app/api/pymthouse/payment-methods/route.ts
+++ b/app/api/pymthouse/payment-methods/route.ts
@@ -43,10 +43,9 @@ export async function POST(request: NextRequest) {
 
   const origin = checkoutReturnOrigin(request);
   const successUrl =
-    body.successUrl?.trim() ||
-    `${origin}/settings?tab=billing&checkout=success`;
+    body.successUrl?.trim() || `${origin}/home?checkout=success`;
   const cancelUrl =
-    body.cancelUrl?.trim() || `${origin}/settings?tab=billing&checkout=cancel`;
+    body.cancelUrl?.trim() || `${origin}/home?checkout=cancel`;
 
   try {
     const session = await requireConsoleSession();
diff --git a/app/api/pymthouse/subscribe/route.ts b/app/api/pymthouse/subscribe/route.ts
index 9637a2e..201e2e2 100644
--- a/app/api/pymthouse/subscribe/route.ts
+++ b/app/api/pymthouse/subscribe/route.ts
@@ -24,8 +24,8 @@ export async function POST(request: NextRequest) {
 
   const origin = checkoutReturnOrigin(request);
   const successUrl =
-    body.successUrl?.trim() || `${origin}/usage?checkout=success`;
-  const cancelUrl = body.cancelUrl?.trim() || `${origin}/usage?checkout=cancel`;
+    body.successUrl?.trim() || `${origin}/home?checkout=success`;
+  const cancelUrl = body.cancelUrl?.trim() || `${origin}/home?checkout=cancel`;
 
   try {
     const session = await requireConsoleSession();
diff --git a/app/api/pymthouse/wallet/payment-methods/route.ts b/app/api/pymthouse/wallet/payment-methods/route.ts
index dd11820..3f5140b 100644
--- a/app/api/pymthouse/wallet/payment-methods/route.ts
+++ b/app/api/pymthouse/wallet/payment-methods/route.ts
@@ -42,8 +42,8 @@ export async function POST(request: NextRequest) {
 
   const origin = checkoutReturnOrigin(request);
   const successUrl =
-    body.successUrl?.trim() || `${origin}/usage?topup=pm-saved`;
-  const cancelUrl = body.cancelUrl?.trim() || `${origin}/usage?topup=canceled`;
+    body.successUrl?.trim() || `${origin}/home?topup=pm-saved`;
+  const cancelUrl = body.cancelUrl?.trim() || `${origin}/home?topup=canceled`;
 
   try {
     const session = await requireConsoleSession();
diff --git a/app/api/pymthouse/wallet/top-up/route.ts b/app/api/pymthouse/wallet/top-up/route.ts
index 76a1d4f..a7f4436 100644
--- a/app/api/pymthouse/wallet/top-up/route.ts
+++ b/app/api/pymthouse/wallet/top-up/route.ts
@@ -34,8 +34,8 @@ export async function POST(request: NextRequest) {
 
   const origin = checkoutReturnOrigin(request);
   const successUrl =
-    body.successUrl?.trim() || `${origin}/usage?topup=succeeded`;
-  const cancelUrl = body.cancelUrl?.trim() || `${origin}/usage?topup=canceled`;
+    body.successUrl?.trim() || `${origin}/home?topup=succeeded`;
+  const cancelUrl = body.cancelUrl?.trim() || `${origin}/home?topup=canceled`;
 
   try {
     const session = await requireConsoleSession();
diff --git a/components/console/ConsolePageHeader.tsx b/components/console/ConsolePageHeader.tsx
index d5519e3..1ba5583 100644
--- a/components/console/ConsolePageHeader.tsx
+++ b/components/console/ConsolePageHeader.tsx
@@ -3,16 +3,12 @@
 import type { ReactNode } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import type { LucideIcon } from "lucide-react";
 import { useAuth } from "@/components/console/AuthContext";
 import ScopeChip, { type PageScope } from "@/components/console/ScopeChip";
 
 interface ConsolePageHeaderProps {
   /** Primary page title — renders as the last (current) breadcrumb. */
   title: string;
-  /** Optional leading icon (lucide). Rendered to the left of the title at the
-   *  same size as the breadcrumb glyph in the design. */
-  icon?: LucideIcon;
   /** Optional one-line description rendered ABOVE the chrome bar in the page
    *  body when caller wants additional context. The chrome bar itself stays
    *  pure breadcrumb + actions. */
@@ -34,10 +30,9 @@ interface ConsolePageHeaderProps {
 /**
  * ConsolePageHeader — 44px chrome bar at the top of every console route.
  *
- * Linear / Livepeer Console pattern: a slim breadcrumb bar with left-aligned
- * crumbs and right-aligned actions. The page title lives in the breadcrumb,
- * not as a hero. Information density comes from the *content*; this bar is
- * pure chrome and stays out of the way.
+ * Linear / Livepeer Console pattern: a slim title bar with left-aligned text
+ * and right-aligned actions. Information density comes from the content; this
+ * bar is pure chrome and stays out of the way.
  *
  * When the user is signed out (and not already on the `/login`
  * auth route), a `Sign in` / `Sign up` pair is appended to the right
@@ -47,7 +42,6 @@ interface ConsolePageHeaderProps {
  */
 export default function ConsolePageHeader({
   title,
-  icon: Icon,
   description,
   actions,
   scope,
@@ -68,14 +62,7 @@ export default function ConsolePageHeader({
         "flex h-[44px] shrink-0 items-center gap-3 border-b border-hairline bg-dark px-5"
       }
     >
-      <div className="flex min-w-0 flex-1 items-center gap-1.5 rounded-[4px] px-1.5 py-1 text-[13px] font-medium text-fg">
-        {Icon && (
-          <Icon
-            className="h-3.5 w-3.5 shrink-0"
-            strokeWidth={1.75}
-            aria-hidden="true"
-          />
-        )}
+      <div className="flex min-w-0 flex-1 items-center gap-1.5 rounded-[4px] px-1.5 py-1 text-sm font-extrabold text-fg">
         <span className="truncate" title={description}>
           {title}
         </span>
diff --git a/components/console/ConsoleSearch.tsx b/components/console/ConsoleSearch.tsx
index 65d45b5..b537222 100644
--- a/components/console/ConsoleSearch.tsx
+++ b/components/console/ConsoleSearch.tsx
@@ -27,11 +27,6 @@ const SUGGESTIONS: SearchResult[] = [
     subtitle: "Browse apps available on the network",
     href: "/explore",
   },
-  {
-    title: "Get your API key",
-    subtitle: "Authenticate and start sending requests",
-    href: "/settings?tab=tokens",
-  },
   {
     title: "Transcode a stream",
     subtitle: "Live transcoding on GPU infrastructure",
@@ -93,24 +88,8 @@ const ALL_RESULTS: SearchResult[] = [
     subtitle: "Text-to-speech synthesis",
     href: "/apps/kokoro-tts",
   },
-  { title: "Home", subtitle: "Console overview", href: "/home" },
-  {
-    title: "API Tokens",
-    subtitle: "Manage your API keys",
-    href: "/settings?tab=tokens",
-  },
-  {
-    title: "Billing",
-    subtitle: "Manage billing and payments",
-    href: "/settings?tab=billing",
-  },
-  { title: "Usage", subtitle: "Request volume and spend", href: "/usage" },
-  {
-    title: "Account",
-    subtitle: "Profile and security",
-    href: "/settings?tab=account",
-  },
-  { title: "Settings", subtitle: "Account settings", href: "/settings" },
+  { title: "Install", subtitle: "Agent setup", href: "/install" },
+  { title: "Home", subtitle: "Request volume and spend", href: "/home" },
 ];
 
 // ─── Component ───────────────────────────────────────────────────────────────
diff --git a/components/console/ConsoleSidebar.tsx b/components/console/ConsoleSidebar.tsx
index 6dc46c5..ab5839c 100644
--- a/components/console/ConsoleSidebar.tsx
+++ b/components/console/ConsoleSidebar.tsx
@@ -1,51 +1,20 @@
 "use client";
 
-import { Suspense, useEffect, useState } from "react";
+import { useState } from "react";
 import Link from "next/link";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import {
-  ArrowUpRight,
-  House,
-  LayoutGrid,
-  BarChart3,
-  ChevronLeft,
-  Globe,
-  Menu,
-  Palette,
-  PanelLeftClose,
-  PanelLeftOpen,
-  Settings as SettingsIcon,
-  User as UserIcon,
-  type LucideIcon,
-} from "lucide-react";
-import {
-  LivepeerWordmark,
-  LivepeerSymbol,
-} from "@/components/design-system/LivepeerLogo";
-import { EXTERNAL_LINKS, PORTAL_NAV_ITEMS } from "@/lib/constants";
-import { useAuth } from "@/components/console/AuthContext";
+import { usePathname, useRouter } from "next/navigation";
+import { EllipsisVertical } from "lucide-react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { LivepeerLockup } from "@/components/design-system/LivepeerLogo";
+import { PORTAL_NAV_ITEMS } from "@/lib/constants";
+import { useAuth, type ConsoleUser } from "@/components/console/AuthContext";
 import Drawer from "@/components/design-system/Drawer";
-import Tooltip from "@/components/design-system/Tooltip";
 import NavLink from "@/components/console/NavLink";
-import SidebarUsageCard from "@/components/console/SidebarUsageCard";
-import OrganizationMenu from "@/components/console/OrganizationMenu";
-import { APPS } from "@/lib/console/mock-data";
-import { formatRuns } from "@/lib/console/utils";
 
-const NAV_ICONS = {
-  House,
-  LayoutGrid,
-  BarChart3,
-  Globe,
-  Settings: SettingsIcon,
-} as const;
-
-const COLLAPSED_KEY = "console.sidebar.collapsed";
+type PortalNavItem = (typeof PORTAL_NAV_ITEMS)[number];
 
 function getNavActive(itemHref: string, pathname: string): boolean {
   if (itemHref === "/home") return pathname === "/home";
-  // Tab-deep links inherit active state from path only — Settings page tabs
-  // already mark the current sub-tab visually inside their own TabStrip.
   if (itemHref.includes("?")) {
     const path = itemHref.split("?")[0];
     return pathname.startsWith(path);
@@ -53,754 +22,515 @@ function getNavActive(itemHref: string, pathname: string): boolean {
   return pathname.startsWith(itemHref);
 }
 
-// ─── Site link ──────────────────────────────────────────────────────────────
-//
-// The one footer row the rail keeps: a way back to livepeer.org. It sits
-// below the usage card in every rail state (expanded, collapsed, settings,
-// signed out) and opens in a new tab — leaving for the marketing site is a
-// detour, not a sign-out, so the console stays where it was. Deliberately a
-// single row: the Docs / status strip this replaces grew because footers
-// accrete, and this one should not.
-
-function SiteLink({ collapsed, padX }: { collapsed: boolean; padX: string }) {
-  const label = "livepeer.org";
-  const link = (
-    <a
-      href={EXTERNAL_LINKS.site}
-      target="_blank"
-      rel="noopener noreferrer"
-      aria-label={`${label} (opens in a new tab)`}
-      className={`flex h-[26px] items-center rounded-[4px] text-[12px] text-fg-faint transition-colors hover:bg-hover hover:text-fg ${
-        collapsed ? "w-[26px] justify-center" : "w-full gap-2 px-2.5"
-      }`}
+function MobileMenuIcon({ open = false }: { open?: boolean }) {
+  return (
+    <span aria-hidden="true" className="relative block h-4 w-8">
+      <span
+        className="absolute right-0.5 h-1 w-[30px] transition-[top,transform] duration-[250ms] ease-[cubic-bezier(0.4,0,0.2,1)] motion-reduce:transition-none"
+        style={{
+          top: open ? 6 : 2,
+          transform: open ? "rotate(135deg)" : "rotate(0deg)",
+          transformOrigin: "19px 50%",
+        }}
+      >
+        <span
+          className="block h-full w-full origin-right bg-current transition-transform duration-[250ms] ease-[cubic-bezier(0.4,0,0.2,1)] motion-reduce:transition-none"
+          style={{ transform: open ? "scaleX(0.733333)" : "scaleX(1)" }}
+        />
+      </span>
+      <span
+        className="absolute right-0.5 h-1 w-[22px] origin-center bg-current transition-[top,transform] duration-[250ms] ease-[cubic-bezier(0.4,0,0.2,1)] motion-reduce:transition-none"
+        style={{
+          top: open ? 6 : 10,
+          transform: open ? "rotate(45deg)" : "rotate(0deg)",
+        }}
+      />
+    </span>
+  );
+}
+
+function MobileMenuButton({
+  open,
+  label,
+  controls,
+  onClick,
+}: {
+  open: boolean;
+  label: string;
+  controls?: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      aria-expanded={open}
+      aria-controls={controls}
+      onClick={onClick}
+      className="-mr-2 flex h-10 w-10 items-center justify-center rounded-sm text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
     >
-      <Globe className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
-      {!collapsed && (
-        <>
-          <span className="min-w-0 flex-1 truncate">{label}</span>
-          <ArrowUpRight
-            className="h-3 w-3 shrink-0 text-fg-disabled"
-            aria-hidden="true"
-          />
-        </>
-      )}
-    </a>
+      <MobileMenuIcon open={open} />
+    </button>
   );
+}
 
+function MobileBrandLink({
+  href,
+  label,
+  onNavigate,
+}: {
+  href: string;
+  label: string;
+  onNavigate?: () => void;
+}) {
   return (
-    <div className={`shrink-0 border-t border-hairline py-1.5 ${padX}`}>
-      {collapsed ? (
-        <div className="flex justify-center">
-          <Tooltip content={label} side="right">
-            {link}
-          </Tooltip>
-        </div>
-      ) : (
-        link
-      )}
-    </div>
+    <Link
+      href={href}
+      aria-label={label}
+      className="inline-flex h-10 items-center rounded-sm p-1.5 text-foreground"
+      onClick={onNavigate}
+    >
+      <LivepeerLockup
+        className="h-4 w-auto"
+        aria-hidden="true"
+      />
+    </Link>
   );
 }
 
-// ─── Sidebar content (shared between desktop + mobile drawer) ───────────────
+function UserAvatar({
+  user,
+  className,
+}: {
+  user: ConsoleUser;
+  className: string;
+}) {
+  if (user.avatarUrl) {
+    return (
+      <img
+        src={user.avatarUrl}
+        alt=""
+        referrerPolicy="no-referrer"
+        className={`${className} object-cover`}
+        aria-hidden="true"
+      />
+    );
+  }
 
-interface SidebarContentProps {
-  collapsed: boolean;
-  onToggleCollapsed?: () => void;
-  /** Called when a nav item is clicked — used to close mobile drawer. */
-  onNavigate?: () => void;
-  /** Hides the collapse toggle (used inside the mobile drawer). */
-  hideToggle?: boolean;
+  return (
+    <span
+      className={`${className} grid place-items-center bg-green text-[10.5px] font-semibold tracking-[0.02em] text-white`}
+      aria-hidden="true"
+    >
+      {user.initials}
+    </span>
+  );
 }
 
-// ─── Logged-out sidebar variant ─────────────────────────────────────────────
-//
-// Mirrors the Livepeer Dashboard v4 prototype's `loggedOut` Sidebar (see
-// `components.jsx`, the `if (loggedOut)` branch). Order top → bottom:
-//
-//   1. Brand row — wordmark links to / (no organization switcher)
-//   2. Search button (Cmd-K, same as signed-in variant)
-//   3. Public nav — Explore (count), Docs (external)
-//   4. ORGANIZATION eyebrow + locked nav: Home, Runs, Usage, API keys
-//   5. Spacer
-//   6. Free-tier promo card — "Get an API key" + "Sign in"
-//   7. Footer — Network nav, status row
-//
-// Locked items still navigate to their real routes; those routes render a
-// `SignInWall` instead of their content so the sidebar stays put. The promo
-// card replaces the SidebarUsageCard since there's no organization usage to
-// show; per the prototype the eyebrow is "Free tier" and the body sells the
-// 5-demo-runs hook with a single primary CTA.
-
-function SignedOutSidebarContent({
-  collapsed,
-  padX,
-  onToggleCollapsed,
-  hideToggle,
-  onNavigate,
+function UserFooter({
+  user,
+  onSignOut,
 }: {
-  collapsed: boolean;
-  padX: string;
-  onToggleCollapsed?: () => void;
-  hideToggle: boolean;
-  onNavigate?: () => void;
+  user: ConsoleUser | null;
+  onSignOut: () => void;
 }) {
-  const pathname = usePathname();
-  const router = useRouter();
-  // Explore is canonically /explore, but signed-out visitors also see it as the
-  // landing at /, so both count as "on Explore".
-  const exploreActive = pathname === "/" || pathname.startsWith("/explore");
+  const [open, setOpen] = useState(false);
+  const reduceMotion = useReducedMotion();
+  const transition = reduceMotion
+    ? { duration: 0 }
+    : { duration: 0.2, ease: [0.22, 1, 0.36, 1] as const };
+
+  if (!user) return null;
+
+  const signOut = () => {
+    setOpen(false);
+    onSignOut();
+  };
 
   return (
-    <div className="flex h-full flex-col bg-shell">
-      {/* Brand row — wordmark links to / (the public landing) */}
-      <div
-        className={`flex shrink-0 items-center pt-2 pb-2 ${padX} ${collapsed ? "flex-col gap-2.5" : "gap-1"}`}
+    <>
+      <motion.div
+        layout="position"
+        className={`group relative shrink-0 border-t border-border transition-colors ${
+          open ? "bg-foreground/3" : "hover:bg-foreground/3"
+        }`}
+        transition={transition}
       >
-        <Link
-          href="/"
-          aria-label="Livepeer Console — explore apps"
-          className={
-            collapsed
-              ? "flex h-[26px] w-[26px] items-center justify-center"
-              : "flex min-w-0 flex-1 items-center px-1.5"
-          }
-          onClick={onNavigate}
+        <button
+          type="button"
+          aria-label="Account settings"
+          aria-expanded={open}
+          aria-controls="account-settings"
+          onClick={() => setOpen((next) => !next)}
+          className="flex w-full min-w-0 items-center gap-2 p-3 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
         >
-          {collapsed ? (
-            <LivepeerSymbol className="h-5 w-5 text-fg" aria-hidden="true" />
-          ) : (
-            <LivepeerWordmark
-              className="h-3.5 w-auto text-fg"
-              aria-hidden="true"
-            />
-          )}
-        </Link>
-
-        {!hideToggle && onToggleCollapsed && (
-          <button
-            type="button"
-            onClick={onToggleCollapsed}
-            aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
-            className="flex h-[26px] w-[26px] shrink-0 items-center justify-center rounded-[4px] text-fg-faint transition-colors hover:bg-hover hover:text-fg"
-          >
-            {collapsed ? (
-              <PanelLeftOpen className="h-4 w-4" aria-hidden="true" />
-            ) : (
-              <PanelLeftClose className="h-4 w-4" aria-hidden="true" />
-            )}
-          </button>
-        )}
-      </div>
-
-      {/* Search button — same Cmd-K dispatch as the signed-in variant; copy
-          tweaked to "Search apps…" since there's no organization to jump
-          across. */}
-      <div className={`shrink-0 pb-2 ${padX}`}>
-        {collapsed ? (
-          <button
-            type="button"
-            aria-label="Search"
-            onClick={() => {
-              const isMac =
-                typeof navigator !== "undefined" &&
-                navigator.platform.toUpperCase().includes("MAC");
-              document.dispatchEvent(
-                new KeyboardEvent("keydown", {
-                  key: "k",
-                  [isMac ? "metaKey" : "ctrlKey"]: true,
-                })
-              );
-            }}
-            className="mx-auto flex h-[26px] w-[26px] items-center justify-center rounded-[4px] text-fg-muted transition-colors hover:bg-hover hover:text-fg"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="h-3.5 w-3.5"
-              aria-hidden="true"
-            >
-              <circle cx="11" cy="11" r="8" />
-              <path d="m21 21-4.3-4.3" />
-            </svg>
-          </button>
-        ) : (
-          <button
-            type="button"
-            onClick={() => {
-              const isMac =
-                typeof navigator !== "undefined" &&
-                navigator.platform.toUpperCase().includes("MAC");
-              document.dispatchEvent(
-                new KeyboardEvent("keydown", {
-                  key: "k",
-                  [isMac ? "metaKey" : "ctrlKey"]: true,
-                })
-              );
-            }}
-            className="flex w-full items-center gap-2 rounded-[8px] border border-hairline bg-dark-lighter px-2.5 py-1.5 text-[12.5px] text-fg-faint transition-colors hover:border-subtle hover:text-fg-strong"
+          <UserAvatar
+            user={user}
+            className="h-7 w-7 shrink-0 rounded-full"
+          />
+          <span className="min-w-0 flex-1 truncate text-ui-caption text-muted-foreground">
+            {user.email}
+          </span>
+          <motion.span
+            animate={{ rotate: open ? 90 : 0 }}
+            transition={transition}
+            className="-mr-1 flex h-7 w-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors group-hover:text-foreground"
+            aria-hidden="true"
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="h-3.5 w-3.5"
-              aria-hidden="true"
+            <EllipsisVertical className="h-4 w-4" />
+          </motion.span>
+        </button>
+        <AnimatePresence initial={false}>
+          {open && (
+            <motion.div
+              id="account-settings"
+              key="account-settings"
+              initial={{ height: 0, opacity: 0 }}
+              animate={{ height: "auto", opacity: 1 }}
+              exit={{ height: 0, opacity: 0 }}
+              transition={transition}
+              className="overflow-hidden"
             >
-              <circle cx="11" cy="11" r="8" />
-              <path d="m21 21-4.3-4.3" />
-            </svg>
-            <span className="flex-1 text-left">Search</span>
-            <kbd className="font-mono text-[10.5px] tracking-wider text-fg-faint">
-              ⌘K
-            </kbd>
-          </button>
-        )}
-      </div>
-
-      {/* Public nav — Explore + Stats. (Docs is not linked: docs.livepeer.org
-          is orchestrator-only today and documents none of the agent surface.
-          Restore the entry once the agent docs land.) */}
-      <nav aria-label="Public navigation" className={`pb-2 ${padX}`}>
-        <ul className="space-y-px">
-          <li>
-            <NavLink
-              href="/explore"
-              icon={LayoutGrid}
-              label="Explore"
-              active={exploreActive}
-              collapsed={collapsed}
-              meta={collapsed ? undefined : formatRuns(APPS.length)}
-              onNavigate={onNavigate}
-            />
-          </li>
-          <li>
-            <NavLink
-              href="/network"
-              icon={Globe}
-              label="Stats"
-              active={pathname.startsWith("/network")}
-              collapsed={collapsed}
-              onNavigate={onNavigate}
-            />
-          </li>
-        </ul>
-      </nav>
-
-      {/* (The locked-Organization nav block previously rendered here — Home /
-          Jobs / Usage / API keys with lock icons — has been removed. Logged-
-          out users now go straight from public nav to the Free-tier promo.
-          Discovery of those routes happens through the promo's "Get an API
-          key" CTA + the sign-in walls that gate the routes themselves, not
-          through teaser entries in the rail.) */}
-
-      {/* Spacer pushes promo + footer to the bottom */}
-      <div className="flex-1" />
-
-      {/* Free-tier promo card — design spec `.side-promo` (yLXs… export).
-       *  - 14/14/12 asymmetric padding (a touch more breathing room at top)
-       *  - Radial glow anchored TOP-RIGHT using `--lp-soft` (green at 18%
-       *    alpha) at 70% opacity — gives the card a soft brand tint that
-       *    reads as "you can light this up by signing up"
-       *  - Eyebrow uses `--lp-bright` (green-bright) for accent identity
-       *  - Sub text is `--fg-4` (50% in dark) — dimmer than helper text
-       *  - Sign-in link is `--fg-3` (65%), font-medium with hover tint
-       *  Hidden when sidebar is collapsed (no useful 26px representation). */}
-      {!collapsed && (
-        <div className={`shrink-0 ${padX} pb-2`}>
-          <div className="relative overflow-hidden rounded-md border border-subtle bg-sidebar-card-bg pt-[14px] pr-[14px] pb-[12px] pl-[14px]">
-            <div
-              className="pointer-events-none absolute inset-0 opacity-70"
-              style={{
-                background:
-                  "radial-gradient(120% 80% at 100% 0%, var(--color-green-subtle), transparent 60%)",
-              }}
-              aria-hidden="true"
-            />
-            <div className="relative">
-              <p className="mb-1.5 font-mono text-[10.5px] font-medium uppercase tracking-[0.06em] text-green-bright">
-                Free tier
-              </p>
-              <p className="mb-1.5 text-[14.5px] font-semibold leading-[1.25] tracking-[-0.01em] text-fg">
-                5 demo calls
-                <br />
-                per app
-              </p>
-              <p className="mb-2.5 text-[11.5px] leading-[1.45] text-fg-faint">
-                No credit card. Spin up in 30 seconds with an API key.
-              </p>
-              <div className="flex flex-col gap-1">
-                <button
-                  type="button"
-                  onClick={() => {
-                    router.push("/signup");
-                    onNavigate?.();
-                  }}
-                  className="btn-primary flex h-7 w-full items-center justify-center rounded-[4px] px-2.5 text-[12.5px] font-medium tracking-[-0.005em] transition-colors"
-                >
-                  Get an API key
-                </button>
-                <button
-                  type="button"
-                  onClick={() => {
-                    router.push("/login");
-                    onNavigate?.();
-                  }}
-                  className="flex h-[26px] w-full items-center justify-center rounded-[4px] text-[12px] font-medium tracking-[-0.005em] text-fg-muted transition-colors hover:bg-hover hover:text-fg"
-                >
-                  Sign in
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-
-      <SiteLink collapsed={collapsed} padX={padX} />
-    </div>
+              <motion.div
+                initial={{ y: reduceMotion ? 0 : -4 }}
+                animate={{ y: 0 }}
+                exit={{ y: reduceMotion ? 0 : -4 }}
+                transition={transition}
+                className="px-3 pb-5"
+              >
+                <div className="min-h-8" aria-hidden="true" />
+                <div className="mt-4 flex justify-end">
+                  <button
+                    type="button"
+                    onClick={signOut}
+                    className="text-right text-ui-caption text-muted-foreground transition-colors hover:text-foreground focus:outline-none focus-visible:text-foreground"
+                  >
+                    Sign out
+                  </button>
+                </div>
+              </motion.div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </motion.div>
+    </>
   );
 }
 
-// ─── Settings rail ──────────────────────────────────────────────────────────
-//
-// Renders inline inside the signed-in `SidebarContent` when the user is on a
-// `/settings*` route: a back-arrow header that returns to `/home`, then the
-// settings destinations. The organization switcher and search above stay put;
-// the usage strip below stays put — only the main nav block swaps to this
-// rail.
-//
-// The pilot rail is FLAT — two entries, no group eyebrows. It used to carry an
-// `Organization` group (General / Members / Billing) and an `Account` group
-// (Profile / Notifications / Security). Members, Billing, Notifications and
-// Security are all hidden for the pilot, and General and Profile merged into
-// one page, which leaves two items: keeping two group headers over a
-// one-item-each split would be labelling for its own sake.
-//
-// Active item is determined by `?tab=<id>` on the current path. Items whose
-// content isn't built yet still navigate (the route renders the closest
-// existing tab) so the rail's behavior is correct end-to-end.
-//
-// The tab is read with `useSearchParams`, which forces its caller into a
-// Suspense boundary: layouts never receive `searchParams`, so the value is
-// client-only during static prerender. The boundary is what keeps the server
-// and client renders in agreement — reading `window.location.search` behind a
-// `typeof window` check instead makes the server pick the default tab while
-// the client picks the real one, which is a hydration mismatch.
-
-const SETTINGS_RAIL_ITEMS: {
-  id: string;
-  label: string;
-  icon: LucideIcon;
-  meta?: string;
-}[] = [
-  { id: "account", label: "Account", icon: UserIcon },
-  { id: "appearance", label: "Appearance", icon: Palette },
-];
-
-function SettingsRailView({
-  activeTab,
-  padX,
+function SidebarBrand({
+  href,
+  label,
   onNavigate,
 }: {
-  activeTab: string | null;
-  padX: string;
+  href: string;
+  label: string;
   onNavigate?: () => void;
 }) {
-  const router = useRouter();
-
   return (
-    <div className={`flex flex-col ${padX}`}>
-      {/* Back arrow + "Settings" header — returns to /home, mirroring
-          the prototype's `setRoute('home')` on the back button. */}
-      <button
-        type="button"
-        onClick={() => {
-          router.push("/home");
-          onNavigate?.();
-        }}
-        className="mb-1 flex h-[26px] items-center gap-1.5 rounded-[4px] px-2 text-[13px] text-fg-strong transition-colors hover:bg-hover hover:text-fg"
+    <div className="flex h-16 shrink-0 items-center px-3">
+      <Link
+        href={href}
+        aria-label={label}
+        className="inline-flex h-10 min-w-0 items-center rounded-sm p-1.5"
+        onClick={onNavigate}
       >
-        <ChevronLeft className="h-3.5 w-3.5 text-fg-faint" aria-hidden="true" />
-        <span className="font-medium">Settings</span>
-      </button>
-
-      <ul className="mt-2.5 space-y-px">
-        {SETTINGS_RAIL_ITEMS.map((it) => (
-          <li key={it.id}>
-            <NavLink
-              href={`/settings?tab=${it.id}`}
-              icon={it.icon}
-              label={it.label}
-              active={activeTab === it.id}
-              collapsed={false}
-              meta={it.meta}
-              onNavigate={onNavigate}
-            />
-          </li>
-        ))}
-      </ul>
+        <LivepeerLockup
+          className="h-4 w-auto text-foreground"
+          aria-hidden="true"
+        />
+      </Link>
     </div>
   );
 }
 
-function SettingsRailNav({
-  padX,
+function SidebarNav({
+  items,
+  label,
   onNavigate,
 }: {
-  padX: string;
+  items: readonly PortalNavItem[];
+  label: string;
   onNavigate?: () => void;
 }) {
-  // Default to "account" when on `/settings` with no tab param — Account is
-  // the page /settings renders with no tab.
-  const activeTab = useSearchParams().get("tab") ?? "account";
+  const pathname = usePathname();
 
   return (
-    <SettingsRailView
-      activeTab={activeTab}
-      padX={padX}
-      onNavigate={onNavigate}
-    />
+    <nav aria-label={label} className="px-3 pb-2">
+      <ul className="flex flex-col items-start gap-1">
+        {items.map((item) => (
+          <li key={item.href} className="flex w-auto items-center gap-1.5">
+            <NavLink
+              href={item.href}
+              label={item.label}
+              active={getNavActive(item.href, pathname)}
+              onNavigate={onNavigate}
+            />
+            {item.href === "/home" && (
+              <span className="rounded-full border border-hairline bg-background px-2 py-1 text-[10px] leading-none text-muted-foreground">
+                early access
+              </span>
+            )}
+          </li>
+        ))}
+      </ul>
+    </nav>
   );
 }
 
-function SettingsRail({
-  padX,
-  onNavigate,
-}: {
-  padX: string;
-  onNavigate?: () => void;
-}) {
-  // The fallback renders the rail with nothing marked active rather than
-  // guessing "account": a brief un-highlighted rail is honest, whereas a
-  // defaulted one flashes the wrong tab before the real one resolves.
+function SignedOutSidebarContent({ onNavigate }: { onNavigate?: () => void }) {
+  const router = useRouter();
+  const publicItems = PORTAL_NAV_ITEMS.filter((i) => i.zone === "network");
+
   return (
-    <Suspense
-      fallback={
-        <SettingsRailView
-          activeTab={null}
-          padX={padX}
-          onNavigate={onNavigate}
-        />
-      }
-    >
-      <SettingsRailNav padX={padX} onNavigate={onNavigate} />
-    </Suspense>
+    <div className="flex h-full flex-col bg-muted">
+      <SidebarBrand
+        href="/"
+        label="Livepeer Early Access - explore apps"
+        onNavigate={onNavigate}
+      />
+      <SidebarNav
+        items={publicItems}
+        label="Public navigation"
+        onNavigate={onNavigate}
+      />
+
+      <div className="flex-1" />
+
+      <div className="shrink-0 px-3 pb-2">
+        <div className="relative overflow-hidden rounded-sm border border-border bg-card pt-[14px] pr-[14px] pb-[12px] pl-[14px]">
+          <div
+            className="pointer-events-none absolute inset-0 opacity-70"
+            style={{
+              background:
+                "radial-gradient(120% 80% at 100% 0%, var(--color-green-subtle), transparent 60%)",
+            }}
+            aria-hidden="true"
+          />
+          <div className="relative">
+            <p className="mb-1.5 font-mono text-[10.5px] font-medium uppercase tracking-[0.06em] text-green-bright">
+              Free tier
+            </p>
+            <p className="mb-1.5 text-[14.5px] font-semibold leading-[1.25] text-foreground">
+              5 demo calls
+              <br />
+              per app
+            </p>
+            <p className="mb-2.5 text-ui-caption text-muted-foreground">
+              No credit card. Spin up in 30 seconds with an API key.
+            </p>
+            <div className="flex flex-col gap-1">
+              <button
+                type="button"
+                onClick={() => {
+                  router.push("/signup");
+                  onNavigate?.();
+                }}
+                className="btn-primary flex h-7 w-full items-center justify-center rounded-sm px-2.5 text-[12.5px] font-medium transition-colors"
+              >
+                Get an API key
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  router.push("/login");
+                  onNavigate?.();
+                }}
+                className="flex h-[26px] w-full items-center justify-center rounded-sm text-ui-caption font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+              >
+                Sign in
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   );
 }
 
-function SidebarContent({
-  collapsed,
-  onToggleCollapsed,
-  onNavigate,
-  hideToggle = false,
-}: SidebarContentProps) {
-  const pathname = usePathname();
+function SidebarContent({ onNavigate }: { onNavigate?: () => void }) {
   const { isConnected, isLoading, user, disconnect } = useAuth();
-  const padX = collapsed ? "px-2.5" : "px-3";
-
-  // Nav — no global environment switcher. Environment is a per-page facet
-  // (a filter on Apps / API keys, defaulting to "All environments"), not a
-  // persistent global mode, so the sidebar is a flat task list:
-  //   • Primary — your organization resources (Home, Apps, API keys, Usage,
-  //     Settings — Settings sits last, under Usage).
-  //   • Footer — Docs.
-  // The NETWORK group (Explore, Stats) is not rendered in the signed-in rail:
-  // those routes still exist and stay linkable, they just aren't console
-  // destinations. Their entries remain in PORTAL_NAV_ITEMS, filtered out here.
   const primaryItems = PORTAL_NAV_ITEMS.filter((i) => i.zone !== "network");
 
-  const renderNavItem = (item: (typeof PORTAL_NAV_ITEMS)[number]) => {
-    const Icon = NAV_ICONS[item.icon];
-    const active = getNavActive(item.href, pathname);
-    // No nav item carries a right-aligned count any more — the one that did
-    // was API keys, which the pilot doesn't provision.
-    const meta: string | undefined = undefined;
-    const itemKbd = "kbd" in item ? (item.kbd as string) : undefined;
-    const itemSubmenu = "submenu" in item ? Boolean(item.submenu) : false;
-    return (
-      <li key={item.href}>
-        <NavLink
-          href={item.href}
-          icon={Icon}
-          label={item.label}
-          active={active}
-          collapsed={collapsed}
-          meta={meta}
-          kbd={!collapsed ? itemKbd : undefined}
-          submenu={itemSubmenu}
-          onNavigate={onNavigate}
-        />
-      </li>
-    );
-  };
-
-  // Logged-out sidebar variant — per the v4 prototype's `loggedOut` Sidebar
-  // (components.jsx:43). Brand wordmark in place of the organization switcher,
-  // Explore + Docs as the only enabled routes, the organization block (Home /
-  // Jobs / Usage / API keys) shown but locked, and a Free-tier promo block
-  // replacing the organization usage card. We intentionally render this only
-  // once auth state has hydrated to avoid a one-frame flash of the signed-in
-  // chrome on cold load.
   if (!isLoading && !isConnected) {
-    return (
-      <SignedOutSidebarContent
-        collapsed={collapsed}
-        padX={padX}
-        onToggleCollapsed={onToggleCollapsed}
-        hideToggle={hideToggle}
+    return <SignedOutSidebarContent onNavigate={onNavigate} />;
+  }
+
+  return (
+    <div className="flex h-full flex-col bg-muted">
+      <SidebarBrand
+        href="/home"
+        label="Livepeer Early Access"
         onNavigate={onNavigate}
       />
-    );
-  }
+      <SidebarNav
+        items={primaryItems}
+        label="Primary"
+        onNavigate={onNavigate}
+      />
+
+      <div className="flex-1" />
+
+      <UserFooter user={user} onSignOut={disconnect} />
+    </div>
+  );
+}
+
+function MobileSidebarContent({ onNavigate }: { onNavigate: () => void }) {
+  const { isConnected, isLoading, user, disconnect } = useAuth();
+  const router = useRouter();
+  const pathname = usePathname();
+  const isSignedOut = !isLoading && !isConnected;
+  const items = PORTAL_NAV_ITEMS.filter((i) =>
+    isSignedOut ? i.zone === "network" : i.zone !== "network"
+  );
+
+  const navigateTo = (href: string) => {
+    router.push(href);
+    onNavigate();
+  };
 
   return (
-    <div className="flex h-full flex-col bg-shell">
-      {/* Top: organization switcher (FB Flipbook ▾). Per the v6 prototype, the
-          row is *just* the switcher — no "+ New" button, no collapse toggle.
-          Organization-scoped actions live inside the dropdown instead. */}
-      <div
-        className={`flex shrink-0 items-center pt-2 pb-1 ${padX} ${collapsed ? "flex-col gap-2.5" : "gap-1"}`}
+    <div className="flex min-h-0 flex-1 flex-col overflow-y-auto px-4 sm:px-6">
+      <nav
+        aria-label={isSignedOut ? "Public navigation" : "Primary"}
+        className="flex flex-col pt-6"
       >
-        <div className={collapsed ? "" : "min-w-0 flex-1"}>
-          {isConnected && user ? (
-            <OrganizationMenu
-              user={user}
-              disconnect={disconnect}
-              collapsed={collapsed}
-            />
-          ) : (
-            <Link
-              href="/home"
-              aria-label="Livepeer Console"
-              className="flex items-center"
-              onClick={onNavigate}
-            >
-              {collapsed ? (
-                <LivepeerSymbol
-                  className="h-5 w-5 text-fg"
-                  aria-hidden="true"
-                />
-              ) : (
-                <LivepeerWordmark
-                  className="h-3.5 w-auto text-fg"
-                  aria-hidden="true"
-                />
-              )}
-            </Link>
-          )}
-        </div>
-      </div>
+        <ul className="flex flex-col items-start gap-1">
+          {items.map((item) => (
+            <li key={item.href} className="w-auto">
+              <NavLink
+                href={item.href}
+                label={item.label}
+                active={getNavActive(item.href, pathname)}
+                onNavigate={onNavigate}
+                variant="mobile"
+              />
+            </li>
+          ))}
+        </ul>
+      </nav>
 
-      {/* Search */}
-      <div className={`shrink-0 pb-2 ${padX}`}>
-        {collapsed ? (
-          <button
-            type="button"
-            aria-label="Search"
-            onClick={() => {
-              const isMac =
-                typeof navigator !== "undefined" &&
-                navigator.platform.toUpperCase().includes("MAC");
-              document.dispatchEvent(
-                new KeyboardEvent("keydown", {
-                  key: "k",
-                  [isMac ? "metaKey" : "ctrlKey"]: true,
-                })
-              );
-            }}
-            className="mx-auto flex h-[26px] w-[26px] items-center justify-center rounded-[4px] text-fg-muted transition-colors hover:bg-hover hover:text-fg"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="h-3.5 w-3.5"
-              aria-hidden="true"
+      <div className="min-h-8 flex-1" />
+
+      {isSignedOut ? (
+        <div className="-mx-4 border-t border-border px-4 py-4 sm:-mx-6 sm:px-6">
+          <div className="flex flex-col items-start gap-1">
+            <button
+              type="button"
+              onClick={() => navigateTo("/signup")}
+              className="inline-flex w-auto items-center rounded-sm px-1 py-1.5 text-4xl font-light leading-none tracking-tight text-foreground transition-colors hover:bg-foreground/3 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
             >
-              <circle cx="11" cy="11" r="8" />
-              <path d="m21 21-4.3-4.3" />
-            </svg>
-          </button>
-        ) : (
-          <button
-            type="button"
-            onClick={() => {
-              const isMac =
-                typeof navigator !== "undefined" &&
-                navigator.platform.toUpperCase().includes("MAC");
-              document.dispatchEvent(
-                new KeyboardEvent("keydown", {
-                  key: "k",
-                  [isMac ? "metaKey" : "ctrlKey"]: true,
-                })
-              );
-            }}
-            className="flex w-full items-center gap-2 rounded-[8px] border border-hairline bg-dark-lighter px-2.5 py-1.5 text-[12.5px] text-fg-faint transition-colors hover:border-subtle hover:text-fg-strong"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="h-3.5 w-3.5"
-              aria-hidden="true"
+              Get an API key
+            </button>
+            <button
+              type="button"
+              onClick={() => navigateTo("/login")}
+              className="inline-flex w-auto items-center rounded-sm px-1 py-1.5 text-4xl font-light leading-none tracking-tight text-muted-foreground transition-colors hover:bg-foreground/3 hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
             >
-              <circle cx="11" cy="11" r="8" />
-              <path d="m21 21-4.3-4.3" />
-            </svg>
-            <span className="flex-1 text-left">Search</span>
-            <kbd className="font-mono text-[10.5px] tracking-wider text-fg-faint">
-              ⌘K
-            </kbd>
-          </button>
-        )}
-      </div>
-
-      {/* Destinations. Home + your organization resources are the unlabeled
-          primary list (scope shown per-page via the header chip). On /settings
-          the whole list is replaced by the SettingsRail. */}
-      {pathname.startsWith("/settings") ? (
-        <SettingsRail padX={padX} onNavigate={onNavigate} />
+              Sign in
+            </button>
+          </div>
+        </div>
       ) : (
-        <>
-          {/* Primary — your organization resources. Environment is a per-page
-              facet (a filter on Apps / Runs / API keys), not a global mode, so
-              there's no environment switcher heading these. */}
-          <nav aria-label="Primary" className={`pb-1 ${padX}`}>
-            <ul className="space-y-px">{primaryItems.map(renderNavItem)}</ul>
-          </nav>
-        </>
-      )}
-
-      {/* Spacer pushes footer to the bottom */}
-      <div className="flex-1" />
-
-      {/* Plan + usage card — between flex spacer and footer per the
-          Livepeer Console design v2 (Apr 2026, `.side-usage`). The 8px
-          bottom margin (pb-2) clears the footer's border-t hairline so the
-          card doesn't visually sit on the divider. Hidden when collapsed
-          (no useful 26px representation) AND when the user is inside the
-          settings sub-experience — the organization usage strip would compete
-          with the settings rail's own context. */}
-      {isConnected && !collapsed && !pathname.startsWith("/settings") && (
-        <div className={`shrink-0 ${padX} pb-2`}>
-          <SidebarUsageCard />
+        <div className="-mx-4 sm:-mx-6">
+          <UserFooter user={user} onSignOut={disconnect} />
         </div>
       )}
+    </div>
+  );
+}
 
-      {/* Footer — the single livepeer.org row. Docs was removed from here
-          because docs.livepeer.org is orchestrator-only and says nothing
-          about the agent; restore it beside this row once agent docs land. */}
-      <SiteLink collapsed={collapsed} padX={padX} />
+function MobileHeader({
+  drawerOpen,
+  onOpen,
+}: {
+  drawerOpen: boolean;
+  onOpen: () => void;
+}) {
+  const { isConnected, isLoading } = useAuth();
+  const homeHref = !isLoading && !isConnected ? "/" : "/home";
+
+  return (
+    <div className="sticky top-0 z-40 flex h-16 shrink-0 items-center justify-between border-b border-background/70 bg-background/10 px-3 backdrop-blur-sm md:hidden">
+      <MobileBrandLink
+        href={homeHref}
+        label="Livepeer Early Access"
+      />
+      <MobileMenuButton
+        open={drawerOpen}
+        label="Open navigation"
+        controls="console-sidebar-drawer"
+        onClick={onOpen}
+      />
     </div>
   );
 }
 
-// ─── Public component ──────────────────────────────────────────────────────
+function MobileNavigationDrawer({
+  open,
+  onClose,
+}: {
+  open: boolean;
+  onClose: () => void;
+}) {
+  const { isConnected, isLoading } = useAuth();
+  const homeHref = !isLoading && !isConnected ? "/" : "/home";
+
+  return (
+    <Drawer
+      id="console-sidebar-drawer"
+      open={open}
+      onClose={onClose}
+      ariaLabel="Navigation"
+      side="top"
+      backdropClassName="bg-transparent backdrop-blur-none transition-none"
+      panelClassName="bg-background text-foreground"
+    >
+      <div className="flex h-[100dvh] flex-col bg-background">
+        <div className="flex h-16 shrink-0 items-center justify-between px-3">
+          <MobileBrandLink
+            href={homeHref}
+            label="Livepeer Early Access"
+            onNavigate={onClose}
+          />
+          <MobileMenuButton
+            open
+            label="Close navigation"
+            controls="console-sidebar-drawer"
+            onClick={onClose}
+          />
+        </div>
+        <MobileSidebarContent onNavigate={onClose} />
+      </div>
+    </Drawer>
+  );
+}
 
 export default function ConsoleSidebar() {
-  const [collapsed, setCollapsed] = useState(false);
-  const [hydrated, setHydrated] = useState(false);
   const [drawerOpen, setDrawerOpen] = useState(false);
 
-  useEffect(() => {
-    try {
-      const stored = window.localStorage.getItem(COLLAPSED_KEY);
-      if (stored === "1") setCollapsed(true);
-    } catch {
-      // ignore
-    }
-    // Defer transition enablement one frame so the initial width doesn't animate.
-    const id = requestAnimationFrame(() => setHydrated(true));
-    return () => cancelAnimationFrame(id);
-  }, []);
-
-  const toggleCollapsed = () => {
-    setCollapsed((prev) => {
-      const next = !prev;
-      try {
-        window.localStorage.setItem(COLLAPSED_KEY, next ? "1" : "0");
-      } catch {
-        // ignore
-      }
-      return next;
-    });
-  };
-
-  // Avoid flashing the wrong width before localStorage read completes.
-  // Width matches the Livepeer Console design (--side-w 232px).
-  const desktopWidth = collapsed ? "md:w-14" : "md:w-[232px]";
-  const transition = hydrated ? "transition-[width] duration-200 ease-out" : "";
-
   return (
     <>
-      {/* Skip to content */}
       <a
         href="#main-content"
-        className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[100] focus:rounded-lg focus:bg-green focus:px-4 focus:py-2 focus:text-white"
+        className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[100] focus:rounded-sm focus:bg-primary focus:px-4 focus:py-2 focus:text-primary-foreground"
       >
         Skip to main content
       </a>
 
-      {/* Desktop sidebar
-       *  z-30 establishes a stacking context above the main content area
-       *  (which has its own implicit context via `overflow-y-auto`). Without
-       *  this, absolutely-positioned children that escape the sidebar's
-       *  bounds — e.g. the OrganizationMenu dropdown — paint *under* main-area
-       *  content (model thumbnails) because main comes later in DOM order. */}
-      <aside
-        className={`hidden md:flex sticky top-0 z-30 h-screen shrink-0 flex-col ${desktopWidth} ${transition}`}
-      >
-        <SidebarContent
-          collapsed={collapsed}
-          onToggleCollapsed={toggleCollapsed}
-        />
+      <aside className="sticky top-0 z-30 hidden h-screen w-[256px] shrink-0 flex-col bg-muted md:flex">
+        <SidebarContent />
       </aside>
 
-      {/* Mobile top bar with hamburger */}
-      <div className="sticky top-0 z-40 flex md:hidden h-14 items-center gap-2 border-b border-hairline bg-shell px-4">
-        <button
-          type="button"
-          aria-label="Open navigation"
-          aria-expanded={drawerOpen}
-          aria-controls="console-sidebar-drawer"
-          onClick={() => setDrawerOpen(true)}
-          className="flex h-10 w-10 items-center justify-center rounded-md text-fg-strong transition-colors hover:bg-tint hover:text-fg"
-        >
-          <Menu className="h-5 w-5" aria-hidden="true" />
-        </button>
-      </div>
+      <MobileHeader
+        drawerOpen={drawerOpen}
+        onOpen={() => setDrawerOpen(true)}
+      />
 
-      {/* Mobile overlay drawer */}
-      <Drawer
-        id="console-sidebar-drawer"
+      <MobileNavigationDrawer
         open={drawerOpen}
         onClose={() => setDrawerOpen(false)}
-        ariaLabel="Navigation"
-        side="left"
-      >
-        <SidebarContent
-          collapsed={false}
-          hideToggle
-          onNavigate={() => setDrawerOpen(false)}
-        />
-      </Drawer>
+      />
     </>
   );
 }
diff --git a/components/console/ExploreView.tsx b/components/console/ExploreView.tsx
index 6d21d72..e7ea961 100644
--- a/components/console/ExploreView.tsx
+++ b/components/console/ExploreView.tsx
@@ -551,7 +551,6 @@ function ExplorePageInner() {
     <main id="main-content" className="flex flex-1 flex-col bg-dark">
       <ConsolePageHeader
         title="Explore"
-        icon={LayoutGrid}
         actions={
           <>
             {/* Grid / list view toggle — segmented control per v3 `.view-toggle` */}
diff --git a/components/console/HomeNudge.tsx b/components/console/HomeNudge.tsx
index aeb2577..3a48552 100644
--- a/components/console/HomeNudge.tsx
+++ b/components/console/HomeNudge.tsx
@@ -33,9 +33,9 @@ export default function HomeNudge() {
       return {
         eyebrow: "Heads up",
         title: `You're at ${Math.round(freePct)}% of your free tier this month.`,
-        body: "Connect a payment provider to keep scaling without limits.",
-        cta: "Set up billing",
-        href: "/settings?tab=billing",
+        body: "Keep an eye on your balance before the period resets.",
+        cta: "View usage",
+        href: "/home",
       };
     }
 
diff --git a/components/console/KeyboardShortcuts.tsx b/components/console/KeyboardShortcuts.tsx
index fdc05d3..0d4dd08 100644
--- a/components/console/KeyboardShortcuts.tsx
+++ b/components/console/KeyboardShortcuts.tsx
@@ -12,7 +12,7 @@ import Dialog from "@/components/design-system/Dialog";
  * shortcut, grouped Global / Navigation. The overlay reuses the same Dialog
  * chrome as the Cmd-K palette so the two surfaces feel like one vocabulary.
  *
- * `G` followed within ~700ms by `H | E | U | K | S` jumps to the matching route.
+ * `G` followed within ~700ms by `H | I | E` jumps to the matching route.
  * Both handlers ignore inputs / textareas / contentEditable so typing in the
  * playground doesn't accidentally navigate.
  */
@@ -35,20 +35,18 @@ const GROUPS: Group[] = [
     title: "Navigation",
     items: [
       { keys: ["G", "H"], label: "Go to Home" },
+      { keys: ["G", "I"], label: "Go to Install" },
       { keys: ["G", "E"], label: "Go to Explore" },
-      { keys: ["G", "U"], label: "Go to Usage" },
-      { keys: ["G", "S"], label: "Go to Settings" },
     ],
   },
 ];
 
-// G-C (Calls) and G-K (API keys) are gone with their destinations: calls are
-// a section of /usage now, and the pilot provisions no API keys.
+// G-C (Calls), G-U (Usage), and G-K (API keys) are gone with their destinations:
+// calls are a section of /home now, and the pilot provisions no API keys.
 const NAV_TARGETS: Record<string, string> = {
   h: "/home",
+  i: "/install",
   e: "/explore",
-  u: "/usage",
-  s: "/settings",
 };
 
 function isFieldElement(el: EventTarget | null): boolean {
diff --git a/components/console/KeysView.tsx b/components/console/KeysView.tsx
index 0ce8836..4285c74 100644
--- a/components/console/KeysView.tsx
+++ b/components/console/KeysView.tsx
@@ -304,7 +304,6 @@ export default function KeysView() {
     <>
       <ConsolePageHeader
         title="API keys"
-        icon={KeyIcon}
         actions={
           <>
             <a
diff --git a/components/console/LoginPage.tsx b/components/console/LoginPage.tsx
index 2cdd77d..10aaa50 100644
--- a/components/console/LoginPage.tsx
+++ b/components/console/LoginPage.tsx
@@ -86,7 +86,7 @@ export default function LoginPage({
               className="text-balance text-center text-base font-normal leading-[1.4] tracking-tight text-fg-muted sm:text-lg"
             >
               {mode === "signin"
-                ? "Log in to the Livepeer Console"
+                ? "Log in to Livepeer Early Access"
                 : "Get started with Livepeer"}
             </motion.h1>
           </AnimatePresence>
diff --git a/components/console/NavLink.tsx b/components/console/NavLink.tsx
index f607d8b..39d8062 100644
--- a/components/console/NavLink.tsx
+++ b/components/console/NavLink.tsx
@@ -1,156 +1,59 @@
 "use client";
 
 import Link from "next/link";
-import {
-  ChevronRight,
-  ExternalLink,
-  Lock,
-  type LucideIcon,
-} from "lucide-react";
-import Tooltip from "@/components/design-system/Tooltip";
 
 interface NavLinkProps {
   href: string;
-  icon: LucideIcon;
   label: string;
   active?: boolean;
-  collapsed?: boolean;
   external?: boolean;
-  /** Locked = organization-only route shown to a logged-out user. Renders dimmer
-   *  icon/label + a small lock icon on the right (replacing `meta`). The link
-   *  still navigates — the destination route is expected to render a sign-in
-   *  wall instead of its content, so the lock is purely a visual signal. */
-  locked?: boolean;
-  /** Right-aligned mono count badge (e.g. `47`, `1.2K`, `3`). Hidden when
-   *  collapsed. Mutually exclusive with `kbd` and `submenu`. */
-  meta?: string;
-  /** Right-aligned keyboard hint, dimmer than `meta` (e.g. `G H`). Per the v6
-   *  prototype's `nav-kbd`. Hidden when collapsed. Mutually exclusive with
-   *  `meta`. */
-  kbd?: string;
-  /** Renders a chev-right at the end, signaling that this row leads into a
-   *  sub-experience (the v6 prototype uses this on the Settings nav item to
-   *  hint that clicking swaps the sidebar to a settings rail). Suppresses
-   *  `meta`/`kbd`/`external` rendering. */
-  submenu?: boolean;
   onNavigate?: () => void;
+  variant?: "default" | "mobile";
 }
 
-/**
- * NavLink — sidebar nav row.
- *
- * Density per the Livepeer Console design (Apr 2026): 26px tall, 13px text,
- * gap-2, px-2.5. Active = `bg-active` (white at 7%) + white label + white icon.
- * The right-aligned `meta` slot (mono, 11px, fg-label) carries counts/badges
- * inline so the row stays scannable.
- */
 export default function NavLink({
   href,
-  icon: Icon,
   label,
   active = false,
-  collapsed = false,
   external = false,
-  locked = false,
-  meta,
-  kbd,
-  submenu = false,
   onNavigate,
+  variant = "default",
 }: NavLinkProps) {
-  const base =
-    "group relative flex h-[26px] items-center rounded-[4px] text-[13px] font-medium transition-colors";
-  const state = active
-    ? "bg-active text-fg"
-    : locked
-      ? "text-fg-faint hover:bg-hover hover:text-fg-strong"
-      : "text-fg-strong hover:bg-hover hover:text-fg";
-  const layout = collapsed
-    ? "mx-auto w-[26px] justify-center"
-    : "w-full gap-2 px-2.5";
-  const className = `${base} ${state} ${layout}`;
+  const mobile = variant === "mobile";
+  const base = mobile
+    ? "inline-flex w-auto items-center rounded-sm px-1 py-1.5 text-4xl font-light leading-none tracking-tight transition-colors"
+    : "inline-flex h-7 w-auto items-center rounded-sm px-2 text-ui-body transition-colors";
+  const state = mobile
+    ? active
+      ? "text-foreground"
+      : "text-muted-foreground"
+    : active
+      ? "bg-foreground/3 text-foreground"
+      : "text-muted-foreground hover:bg-foreground/3 hover:text-foreground";
+  const className = `${base} ${state}`;
 
-  const content = (
-    <>
-      <Icon
-        className={`h-3.5 w-3.5 shrink-0 ${
-          active ? "text-fg" : locked ? "text-fg-disabled" : "text-fg-label"
-        }`}
-        aria-hidden="true"
-      />
-      {!collapsed && (
-        <>
-          <span className="min-w-0 flex-1 truncate">{label}</span>
-          {locked ? (
-            <Lock
-              className="h-3 w-3 shrink-0 text-fg-disabled"
-              aria-hidden="true"
-            />
-          ) : submenu ? (
-            <ChevronRight
-              className="-mr-0.5 h-3.5 w-3.5 shrink-0 text-fg-faint"
-              aria-hidden="true"
-            />
-          ) : (
-            <>
-              {meta && (
-                <span className="shrink-0 font-mono text-[11px] text-fg-label tabular-nums">
-                  {meta}
-                </span>
-              )}
-              {kbd && (
-                <span className="shrink-0 font-mono text-[10.5px] tracking-[0.04em] text-fg-disabled">
-                  {kbd}
-                </span>
-              )}
-              {external && (
-                <ExternalLink
-                  className="h-3 w-3 shrink-0 text-fg-disabled"
-                  aria-hidden="true"
-                />
-              )}
-            </>
-          )}
-        </>
-      )}
-    </>
-  );
+  if (external) {
+    return (
+      <a
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={className}
+        onClick={onNavigate}
+      >
+        {label}
+      </a>
+    );
+  }
 
-  const linkEl = external ? (
-    <a
-      href={href}
-      target="_blank"
-      rel="noopener noreferrer"
-      aria-label={collapsed ? label : undefined}
-      className={className}
-      onClick={onNavigate}
-    >
-      {content}
-    </a>
-  ) : (
+  return (
     <Link
       href={href}
       aria-current={active ? "page" : undefined}
-      aria-label={collapsed ? label : undefined}
       className={className}
       onClick={onNavigate}
     >
-      {content}
+      {label}
     </Link>
   );
-
-  if (collapsed) {
-    // Tooltip wraps its trigger in an inline-flex span that sizes to the
-    // child — `mx-auto` on the link has no slack to consume inside it. Wrap
-    // the whole tooltip in a flex container so the 26px button centers
-    // within the sidebar's padded inner width.
-    return (
-      <div className="flex justify-center">
-        <Tooltip content={label} side="right">
-          {linkEl}
-        </Tooltip>
-      </div>
-    );
-  }
-
-  return linkEl;
 }
diff --git a/components/console/OrganizationMenu.tsx b/components/console/OrganizationMenu.tsx
deleted file mode 100644
index e43f5d2..0000000
--- a/components/console/OrganizationMenu.tsx
+++ /dev/null
@@ -1,260 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-import Link from "next/link";
-import {
-  Check,
-  ChevronDown,
-  LogOut,
-  Palette,
-  Settings,
-  User,
-} from "lucide-react";
-import { motion, AnimatePresence } from "framer-motion";
-import { THEME_OPTIONS, useTheme } from "@/components/console/ThemeContext";
-
-interface MenuUser {
-  name: string;
-  email: string;
-  initials: string;
-}
-
-interface OrganizationMenuProps {
-  user: MenuUser;
-  disconnect: () => void;
-  collapsed: boolean;
-}
-
-/**
- * The sidebar account menu.
- *
- * Trigger is the workspace: the user's initials and their first name. The
- * workspace was labelled "Personal", which is a tautology while everyone has
- * exactly one — it named the category instead of the thing. The first name
- * answers the question the label is actually there for, which is whose
- * console this is; a creator with a personal and a work Google login can tell
- * them apart at a glance. It is also the shape the switcher wants when
- * organizations land, with team names sitting alongside the personal one.
- *
- * The full name and email stay inside the menu — the rail is 232px and an
- * email truncates to noise on the trigger.
- *
- * Order inside, top to bottom: who you are, which workspace you're in, then
- * what you can do. Actions last because they're the only part you scan for
- * after the first week.
- *
- * This used to be an organization switcher over a hardcoded list containing
- * "Flipbook" — a made-up company that read as live customer data in every
- * demo — plus Create organization, Invite members and Billing. None of it was
- * real; the console has no multi-tenancy. WORKSPACES keeps a one-row list
- * because that is the honest shape of it today and the place a second entry
- * goes when organizations arrive.
- */
-export default function OrganizationMenu({
-  user,
-  disconnect,
-  collapsed,
-}: OrganizationMenuProps) {
-  const [open, setOpen] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
-  const { preference, setPreference } = useTheme();
-
-  useEffect(() => {
-    if (!open) return;
-    const onMouseDown = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
-        setOpen(false);
-      }
-    };
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") setOpen(false);
-    };
-    document.addEventListener("mousedown", onMouseDown);
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("mousedown", onMouseDown);
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [open]);
-
-  // AuthContext guarantees a non-empty name (it falls back to the email's
-  // local part, then "User"), so this is never blank.
-  const firstName = user.name.split(" ")[0] || user.name;
-
-  const workspaceTile = (
-    <span
-      // `text-white` constant — the tile background is a saturated accent, so
-      // the monogram wants a constant white in both themes.
-      className="grid h-[22px] w-[22px] shrink-0 place-items-center rounded-[5px] border border-green-light text-[10.5px] font-semibold tracking-[0.02em] text-white"
-      style={{ background: "var(--color-green)" }}
-      aria-hidden="true"
-    >
-      {user.initials}
-    </span>
-  );
-
-  const itemClass =
-    "flex w-full items-center gap-2.5 rounded-[4px] px-2 py-1.5 text-left text-[13px] text-fg-strong transition-colors hover:bg-hover hover:text-fg";
-
-  return (
-    <div className="relative" ref={ref}>
-      <button
-        type="button"
-        aria-label={`Account menu for ${user.name}`}
-        aria-haspopup="menu"
-        aria-expanded={open}
-        onClick={() => setOpen((v) => !v)}
-        title={collapsed ? firstName : undefined}
-        className={
-          collapsed
-            ? `flex h-9 w-9 items-center justify-center rounded-md transition-colors ${
-                open ? "bg-tint" : "hover:bg-hover"
-              }`
-            : `flex w-full items-center gap-2 rounded-md px-1.5 py-1 transition-colors ${
-                open ? "bg-tint" : "hover:bg-hover"
-              }`
-        }
-      >
-        {workspaceTile}
-        {!collapsed && (
-          <>
-            <span className="min-w-0 flex-1 truncate text-left text-[13.5px] font-medium text-fg">
-              {firstName}
-            </span>
-            <ChevronDown
-              className={`h-3.5 w-3.5 shrink-0 text-fg-faint transition-transform duration-150 ${
-                open ? "rotate-180 text-fg-strong" : ""
-              }`}
-              aria-hidden="true"
-            />
-          </>
-        )}
-      </button>
-
-      <AnimatePresence>
-        {open && (
-          <motion.div
-            role="menu"
-            aria-orientation="vertical"
-            initial={{ opacity: 0, scale: 0.95, y: -4 }}
-            animate={{ opacity: 1, scale: 1, y: 0 }}
-            exit={{ opacity: 0, scale: 0.95, y: -4 }}
-            transition={{ duration: 0.15, ease: [0.16, 1, 0.3, 1] }}
-            className={`absolute z-[100] min-w-[248px] overflow-hidden rounded-xl border border-subtle bg-[var(--color-surface-raised)] shadow-[var(--shadow-popover)] ${
-              collapsed
-                ? "left-full top-0 ml-2 origin-top-left"
-                : "left-0 top-full mt-1 origin-top-left"
-            }`}
-          >
-            {/* Identity */}
-            <div className="px-3 pt-3 pb-2.5 leading-tight">
-              <p className="truncate text-[13px] font-medium text-fg">
-                {user.name}
-              </p>
-              <p className="mt-1 truncate text-[11.5px] text-fg-faint">
-                {user.email}
-              </p>
-            </div>
-
-            <div className="h-px bg-hairline" />
-
-            {/* Workspaces */}
-            <div className="flex flex-col gap-px p-1.5">
-              <p className="px-2 pt-1 pb-1 font-mono text-[10.5px] font-medium uppercase tracking-[0.06em] text-fg-disabled">
-                Workspaces
-              </p>
-              <button
-                type="button"
-                role="menuitemradio"
-                aria-checked="true"
-                onClick={() => setOpen(false)}
-                className={`${itemClass} bg-hover`}
-              >
-                <User
-                  className="h-3.5 w-3.5 shrink-0 text-fg-faint"
-                  aria-hidden="true"
-                />
-                <span className="min-w-0 flex-1 truncate">{firstName}</span>
-                <Check
-                  className="h-3.5 w-3.5 shrink-0 text-green-bright"
-                  aria-hidden="true"
-                />
-              </button>
-            </div>
-
-            <div className="h-px bg-hairline" />
-
-            {/* Actions */}
-            <div className="flex flex-col gap-px p-1.5">
-              <Link
-                href="/settings"
-                role="menuitem"
-                onClick={() => setOpen(false)}
-                className={itemClass}
-              >
-                <Settings
-                  className="h-3.5 w-3.5 shrink-0 text-fg-faint"
-                  aria-hidden="true"
-                />
-                Settings
-              </Link>
-              {/* Theme, as the same three choices the Appearance view offers,
-                  at menu scale: the house segmented control with the same
-                  icons. Selection is the stored preference, so "System" is
-                  its own state rather than whichever theme it resolves to. */}
-              <div className="flex items-center justify-between gap-3 rounded-[4px] px-2 py-1.5">
-                <span className="flex items-center gap-2.5 text-[13px] text-fg-strong">
-                  <Palette
-                    className="h-3.5 w-3.5 shrink-0 text-fg-faint"
-                    aria-hidden="true"
-                  />
-                  Theme
-                </span>
-                <div
-                  role="radiogroup"
-                  aria-label="Theme"
-                  className="inline-flex items-center gap-px rounded-[5px] border border-hairline bg-dark p-px"
-                >
-                  {THEME_OPTIONS.map((opt) => {
-                    const Icon = opt.icon;
-                    const selected = preference === opt.value;
-                    return (
-                      <button
-                        key={opt.value}
-                        type="button"
-                        role="radio"
-                        aria-checked={selected}
-                        aria-label={opt.label}
-                        title={opt.label}
-                        onClick={() => setPreference(opt.value)}
-                        className={`grid h-6 w-7 place-items-center rounded-[4px] transition-colors duration-[var(--motion-duration-fast)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-green-bright/30 ${
-                          selected
-                            ? "bg-dark-card text-fg"
-                            : "text-fg-faint hover:bg-hover hover:text-fg-strong"
-                        }`}
-                      >
-                        <Icon className="h-3.5 w-3.5" strokeWidth={1.75} />
-                      </button>
-                    );
-                  })}
-                </div>
-              </div>
-              <button
-                type="button"
-                role="menuitem"
-                onClick={() => {
-                  disconnect();
-                  setOpen(false);
-                }}
-                className="flex w-full items-center gap-2.5 rounded-[4px] px-2 py-1.5 text-left text-[13px] text-fg-faint transition-colors hover:bg-red-500/10 hover:text-red-400"
-              >
-                <LogOut className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
-                Sign out
-              </button>
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-}
diff --git a/components/console/PlansPanel.tsx b/components/console/PlansPanel.tsx
index 3153913..8445a27 100644
--- a/components/console/PlansPanel.tsx
+++ b/components/console/PlansPanel.tsx
@@ -115,8 +115,8 @@ export default function PlansPanel() {
         try {
           const result = await changePlan({
             planId: resumePlanId,
-            successUrl: `${window.location.origin}/usage?checkout=success&changePlan=${encodeURIComponent(resumePlanId)}`,
-            cancelUrl: `${window.location.origin}/usage?checkout=cancel`,
+            successUrl: `${window.location.origin}/home?checkout=success&changePlan=${encodeURIComponent(resumePlanId)}`,
+            cancelUrl: `${window.location.origin}/home?checkout=cancel`,
           });
           if (result.checkoutUrl) {
             redirectToCheckout(result.checkoutUrl);
@@ -166,8 +166,8 @@ export default function PlansPanel() {
     if (!isConnected) return;
     const result = await changePlan({
       planId,
-      successUrl: `${window.location.origin}/usage?checkout=success&changePlan=${encodeURIComponent(planId)}`,
-      cancelUrl: `${window.location.origin}/usage?checkout=cancel`,
+      successUrl: `${window.location.origin}/home?checkout=success&changePlan=${encodeURIComponent(planId)}`,
+      cancelUrl: `${window.location.origin}/home?checkout=cancel`,
       ...timing,
     });
     if (result.checkoutUrl) {
@@ -179,7 +179,7 @@ export default function PlansPanel() {
     const targetPlan = plans.find((p) => p.id === planId);
     setError(
       targetPlan && isUsagePlan(targetPlan)
-        ? "Plan updated. Add a payment method in Settings → Billing for pay-per-use auto-debit."
+        ? "Plan updated. Pay-per-use auto-debit is ready once a payment method is on file."
         : "Plan updated."
     );
   }
@@ -221,8 +221,8 @@ export default function PlansPanel() {
         } else {
           const result = await subscribe({
             planId,
-            successUrl: `${window.location.origin}/usage?checkout=success&changePlan=${encodeURIComponent(planId)}`,
-            cancelUrl: `${window.location.origin}/usage?checkout=cancel`,
+            successUrl: `${window.location.origin}/home?checkout=success&changePlan=${encodeURIComponent(planId)}`,
+            cancelUrl: `${window.location.origin}/home?checkout=cancel`,
           });
           if (result.checkoutUrl) {
             redirectToCheckout(result.checkoutUrl);
@@ -231,7 +231,7 @@ export default function PlansPanel() {
           await reload();
           setError(
             targetPlan && isUsagePlan(targetPlan)
-              ? "Plan updated. Add a payment method in Settings → Billing for pay-per-use auto-debit."
+              ? "Plan updated. Pay-per-use auto-debit is ready once a payment method is on file."
               : "Plan updated."
           );
         }
diff --git a/components/console/SidebarUsageCard.tsx b/components/console/SidebarUsageCard.tsx
index 89d9f76..c9aad3e 100644
--- a/components/console/SidebarUsageCard.tsx
+++ b/components/console/SidebarUsageCard.tsx
@@ -1,28 +1,17 @@
 "use client";
 
-import type { ReactNode } from "react";
 import Link from "next/link";
 import { useAuth } from "@/components/console/AuthContext";
-import { useAccountUsage } from "@/lib/console/useAccountUsage";
 import { useWalletBillingState } from "@/lib/console/useOwnerWallet";
-import {
-  formatPeriodResetLabel,
-  microsToUsd,
-} from "@/lib/console/usage-capability-display";
+import { microsToUsd } from "@/lib/console/usage-capability-display";
 import { includedUsageSummary } from "@/lib/console/wallet-settlement-display";
 
 /**
- * Sidebar usage meter. Remaining included usage comes from the wallet
- * billing state when the live plan has an allowance; otherwise period spend.
- *
- * The eyebrow names the *kind* of figure, never the plan. It used to fall back
- * to the live plan's name, which spent the card's most prominent slot on a
- * label nobody can act on — and on a pilot balance the plan name says nothing
- * the figure underneath doesn't say better.
+ * Sidebar balance meter. It shows the remaining balance against the amount
+ * issued for the current plan period.
  */
 export default function SidebarUsageCard() {
   const { isConnected } = useAuth();
-  const usage = useAccountUsage(isConnected, 30);
   const wallet = useWalletBillingState(isConnected);
   const included =
     wallet.state.status === "ready"
@@ -30,10 +19,8 @@ export default function SidebarUsageCard() {
       : null;
 
   if (
-    usage.status === "loading" ||
-    usage.status === "idle" ||
-    (isConnected &&
-      (wallet.state.status === "loading" || wallet.state.status === "idle"))
+    isConnected &&
+    (wallet.state.status === "loading" || wallet.state.status === "idle")
   ) {
     return (
       <div
@@ -41,116 +28,70 @@ export default function SidebarUsageCard() {
         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 className="mt-2 h-3 w-28 rounded bg-tint" />
+        <div className="mt-2 h-1 rounded bg-tint" />
       </div>
     );
   }
 
-  if (usage.status === "error") {
+  if (wallet.state.status === "error") {
     return (
       <Link
-        href="/usage"
+        href="/home"
         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
+          Balance unavailable
         </span>
       </Link>
     );
   }
 
-  const { data } = usage;
-  const showUsdAllowance = Boolean(included);
+  if (wallet.state.status !== "ready") return null;
 
-  const resetsAt = included?.resetsAt
-    ? new Date(included.resetsAt).toLocaleDateString(undefined, {
-        month: "short",
-        day: "numeric",
-      })
-    : formatPeriodResetLabel(data.period.end);
-  // One word. The rail card is ~150px wide, so a two-word eyebrow wraps.
-  const meterLabel = showUsdAllowance ? "Included" : "Usage";
+  let remainingUsd: number;
+  let issuedUsd: number;
 
-  let primaryUsed: number;
-  let primaryLimit: number | null;
-  let primaryDisplay: ReactNode;
-  let footerLeft: string;
-
-  if (showUsdAllowance && included) {
-    const granted = BigInt(included.totalUsdMicros || "1");
-    const consumed = BigInt(included.consumedUsdMicros || "0");
-    primaryUsed = Number((consumed * BigInt(10000)) / granted) / 100;
-    primaryLimit = 100;
-    // Consumed leads on the top row; the allowance it came out of moves to
-    // the footer. Carrying "$475.78 / $500.00" beside the eyebrow overran the
-    // 150px rail and wrapped the figure onto two lines.
-    primaryDisplay = (
-      <b className="font-medium text-fg">
-        ${microsToUsd(included.consumedUsdMicros).toFixed(2)}
-      </b>
-    );
-    footerLeft = `of $${microsToUsd(included.totalUsdMicros).toFixed(2)}`;
+  if (included) {
+    remainingUsd = microsToUsd(included.remainingUsdMicros);
+    issuedUsd = microsToUsd(included.totalUsdMicros);
   } else {
-    const spendUsd =
-      Number(
-        BigInt(
-          data.current.endUserBillableUsdMicros ||
-            data.current.networkFeeUsdMicros ||
-            "0"
-        )
-      ) / 1_000_000;
-    primaryUsed = 0;
-    primaryLimit = null;
-    primaryDisplay = (
-      <b className="font-medium text-fg">${spendUsd.toFixed(2)}</b>
+    remainingUsd = microsToUsd(wallet.state.wallet.balance?.usdMicros ?? "0");
+    issuedUsd = Math.max(
+      remainingUsd,
+      microsToUsd(wallet.state.wallet.balance?.lifetimeGrantedUsdMicros ?? "0")
     );
-    footerLeft = "spent";
   }
 
   const pct =
-    primaryLimit && primaryLimit > 0
-      ? Math.min(100, (primaryUsed / primaryLimit) * 100)
-      : 0;
+    issuedUsd > 0 ? Math.min(100, (remainingUsd / issuedUsd) * 100) : 0;
+  const canSpend = wallet.state.wallet.billingState.canSpend;
 
   return (
     <Link
-      href="/usage"
+      href="/home"
       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"
+      aria-label={`Balance: $${remainingUsd.toFixed(2)} remaining of $${issuedUsd.toFixed(2)} issued`}
+      className="mx-1 mt-2 block rounded-md border border-subtle bg-sidebar-card-bg px-2.5 py-2.5 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">
-          {meterLabel}
+      <p className="text-[16px] font-medium leading-none text-fg">
+        ${issuedUsd.toFixed(2)}{" "}
+        <span className="text-[12.5px] font-normal text-fg-faint">
+          / ${remainingUsd.toFixed(2)} remaining
         </span>
-        <span className="font-mono text-[12px] tabular-nums text-fg-strong">
-          {primaryDisplay}
-        </span>
-      </div>
+      </p>
       <div
-        className="my-1.5 h-1 overflow-hidden rounded-[2px] bg-tint"
+        className="mt-2.5 h-1 overflow-hidden rounded-[2px] bg-tint"
         aria-hidden="true"
       >
         <div
           className={`h-full rounded-[2px] ${
-            usage.status === "ready" &&
-            usage.data.balance &&
-            !usage.data.balance.hasAccess
-              ? "bg-warm"
-              : "bg-gradient-to-r from-green to-green-bright"
+            canSpend ? "bg-gradient-to-r from-green to-green-bright" : "bg-warm"
           }`}
           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">
-          {footerLeft}
-        </span>
-        <span className="font-mono text-[10.5px] tracking-[0.02em] text-fg-faint">
-          resets {resetsAt}
-        </span>
-      </div>
     </Link>
   );
 }
diff --git a/components/console/SignInWall.tsx b/components/console/SignInWall.tsx
index 4a069d0..0443ab6 100644
--- a/components/console/SignInWall.tsx
+++ b/components/console/SignInWall.tsx
@@ -9,13 +9,12 @@ import {
   Box,
   Globe,
   Key,
-  Settings,
   type LucideIcon,
 } from "lucide-react";
 
 /**
  * SignInWall — what a logged-out user sees when they hit a private organization
- * route (Home / Jobs / Usage / API keys / Settings / Network). Mirrors the
+ * route (Home / Jobs / Usage / API keys / Network). Mirrors the
  * Livepeer Dashboard v4 prototype's `wall-shell` block: route-aware icon +
  * eyebrow + title + description, "Sign in" / "Create organization" CTAs, and an
  * `→ Explore apps` escape hatch. The sidebar around it stays in its
@@ -35,8 +34,7 @@ export type SignInWallRoute =
   | "calls"
   | "usage"
   | "keys"
-  | "network"
-  | "settings";
+  | "network";
 
 interface RouteCopy {
   icon: LucideIcon;
@@ -81,11 +79,6 @@ const ROUTE_COPY: Record<SignInWallRoute, RouteCopy> = {
     description:
       "Your network performance view is per-organization. Sign in to see GPU pool health and routing.",
   },
-  settings: {
-    icon: Settings,
-    title: "Settings — sign in",
-    description: "Organization and account settings live behind sign-in.",
-  },
 };
 
 export default function SignInWall({ route }: { route: SignInWallRoute }) {
diff --git a/components/console/settings/AccountSection.tsx b/components/console/settings/AccountSection.tsx
deleted file mode 100644
index e86c1c2..0000000
--- a/components/console/settings/AccountSection.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-"use client";
-
-import { useAuth } from "@/components/console/AuthContext";
-import Button from "@/components/design-system/Button";
-import {
-  SettingsAvatar,
-  SettingsCard,
-  SettingsField,
-  SettingsHeader,
-} from "./SettingsPrimitives";
-
-/**
- * Account — `?tab=account`, the page `/settings` renders by default.
- *
- * Replaces the old `Organization · General` + `Account · Profile` pair. They
- * were split because the console assumed multi-tenancy: an organization you
- * shared with members, and a personal profile inside it. The pilot has one
- * signed-in person and no organizations, so the split described a structure
- * that isn't there — two pages, each one card, both filled with the same
- * person's details.
- *
- * Every value here is read-only and comes from the Auth0 session. That is a
- * deliberate downgrade from what the two sections used to render: organization
- * name, URL slug, default region, username and time zone were editable-looking
- * inputs seeded with mock data (`Flipbook`, `Zain Mehta`) that saved nowhere.
- * Name and email are owned by the identity provider you signed in with, and
- * there is no profile-write endpoint behind them — so they are shown as
- * values, not as fields that imply a save.
- */
-export default function AccountSection() {
-  const { user, disconnect } = useAuth();
-
-  if (!user) return null;
-
-  const providerLabel =
-    user.provider === "github"
-      ? "GitHub"
-      : user.provider === "google"
-        ? "Google"
-        : "Email";
-
-  return (
-    <>
-      <SettingsHeader
-        title="Account"
-        sub="Signed in with your identity provider · only visible to you"
-      />
-      <SettingsCard>
-        <SettingsField label="Avatar">
-          {user.avatarUrl ? (
-            // Raw <img> per CLAUDE.md — next/image is not used in this app.
-            <img
-              src={user.avatarUrl}
-              alt=""
-              className="h-8 w-8 shrink-0 rounded-full object-cover"
-            />
-          ) : (
-            <SettingsAvatar initials={user.initials} variant="lp" />
-          )}
-        </SettingsField>
-
-        <SettingsField label="Name" hint={`Provided by ${providerLabel}.`}>
-          <span className="text-[13px] text-fg">{user.name}</span>
-        </SettingsField>
-
-        <SettingsField
-          label="Email"
-          hint="The address your agent runtimes sign in with."
-        >
-          <span className="text-[13px] text-fg">{user.email}</span>
-        </SettingsField>
-
-        <SettingsField
-          label="Account ID"
-          hint="Quote this when reporting a failed generation."
-        >
-          <span className="break-all font-mono text-[12px] text-fg-strong">
-            {user.id}
-          </span>
-        </SettingsField>
-
-        <SettingsField
-          label="Sign out"
-          hint="Ends this session in the console. Agent runtimes stay connected."
-        >
-          <Button variant="secondary" size="xs" onClick={disconnect}>
-            Sign out
-          </Button>
-        </SettingsField>
-      </SettingsCard>
-    </>
-  );
-}
diff --git a/components/console/settings/AppearanceSection.tsx b/components/console/settings/AppearanceSection.tsx
deleted file mode 100644
index 9d86064..0000000
--- a/components/console/settings/AppearanceSection.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-"use client";
-
-import {
-  THEME_OPTIONS,
-  useTheme,
-  type ThemePreference,
-} from "@/components/console/ThemeContext";
-import {
-  SettingsCard,
-  SettingsField,
-  SettingsHeader,
-} from "./SettingsPrimitives";
-
-const DESCRIPTIONS: Record<ThemePreference, string> = {
-  light: "Always use the light theme.",
-  dark: "Always use the dark theme.",
-  system: "Follow your OS preference.",
-};
-
-/**
- * Account · Appearance — `?tab=appearance`.
- *
- * Single field: theme preference (Light / Dark / System). System follows
- * the OS-level `prefers-color-scheme` and re-resolves in real time when
- * the user toggles their OS setting. Stored locally in
- * `localStorage["theme"]` — shared with the marketing site's ThemeToggle so
- * the two surfaces stay in sync. See `ThemeContext.tsx`.
- *
- * Each option is rendered as a tile-style radio so the icon and label
- * read at a glance
- * but with more breathing room since theme is a single-shot choice.
- */
-export default function AppearanceSection() {
-  const { preference, setPreference } = useTheme();
-
-  return (
-    <>
-      <SettingsHeader
-        title="Appearance"
-        sub="How the console looks · this device only"
-      />
-      <SettingsCard>
-        <SettingsField
-          label="Theme"
-          hint="Choose how the console looks. System follows your OS preference."
-        >
-          <div
-            role="radiogroup"
-            aria-label="Theme preference"
-            className="flex w-full flex-wrap gap-2"
-          >
-            {THEME_OPTIONS.map((opt) => {
-              const Icon = opt.icon;
-              const selected = preference === opt.value;
-              return (
-                <button
-                  key={opt.value}
-                  type="button"
-                  role="radio"
-                  aria-checked={selected}
-                  onClick={() => setPreference(opt.value)}
-                  className={`group flex min-w-[140px] flex-1 items-center gap-3 rounded-md border px-3.5 py-3 text-left transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-green-bright/40 ${
-                    selected
-                      ? "border-green/40 bg-green/15"
-                      : "border-hairline bg-dark-card hover:border-subtle hover:bg-hover"
-                  }`}
-                >
-                  <div
-                    className={`grid h-8 w-8 shrink-0 place-items-center rounded-[6px] border ${
-                      selected
-                        ? "border-green/40 bg-green/15 text-green-bright"
-                        : "border-hairline bg-dark text-fg-faint"
-                    }`}
-                    aria-hidden="true"
-                  >
-                    <Icon className="h-4 w-4" strokeWidth={1.75} />
-                  </div>
-                  <div className="min-w-0 flex-1">
-                    <p
-                      className={`text-[13px] font-medium ${
-                        selected ? "text-green-bright" : "text-fg-strong"
-                      }`}
-                    >
-                      {opt.label}
-                    </p>
-                    <p className="mt-0.5 text-[11.5px] text-fg-faint">
-                      {DESCRIPTIONS[opt.value]}
-                    </p>
-                  </div>
-                </button>
-              );
-            })}
-          </div>
-        </SettingsField>
-      </SettingsCard>
-    </>
-  );
-}
diff --git a/components/console/settings/BillingSection.tsx b/components/console/settings/BillingSection.tsx
index d4d5d1c..e05c738 100644
--- a/components/console/settings/BillingSection.tsx
+++ b/components/console/settings/BillingSection.tsx
@@ -161,15 +161,14 @@ function clearCheckoutQueryParam(): void {
 }
 
 function billingChangePlanSuccessUrl(planId: string): string {
-  const url = new URL("/settings", window.location.origin);
-  url.searchParams.set("tab", "billing");
+  const url = new URL("/home", window.location.origin);
   url.searchParams.set("checkout", "success");
   url.searchParams.set("changePlan", planId);
   return url.toString();
 }
 
 function billingChangePlanCancelUrl(): string {
-  return `${window.location.origin}/settings?tab=billing&checkout=cancel`;
+  return `${window.location.origin}/home?checkout=cancel`;
 }
 
 /**
@@ -244,7 +243,7 @@ export default function BillingSection() {
     try {
       const { checkoutUrl } = await startWalletTopUp({
         amountUsd: topUpAmount.trim(),
-        returnPath: "/settings?tab=billing",
+        returnPath: "/home",
       });
       redirectToCheckout(checkoutUrl);
     } catch (err) {
diff --git a/components/design-system/Drawer.tsx b/components/design-system/Drawer.tsx
index 7f8e754..0a23d58 100644
--- a/components/design-system/Drawer.tsx
+++ b/components/design-system/Drawer.tsx
@@ -14,7 +14,10 @@ interface DrawerProps {
   /** aria-label when no title is provided. */
   ariaLabel?: string;
   /** Which edge the drawer slides in from. Defaults to "bottom". */
-  side?: "bottom" | "left" | "right";
+  side?: "bottom" | "left" | "right" | "top";
+  backdropClassName?: string;
+  panelClassName?: string;
+  contentClassName?: string;
   children: ReactNode;
 }
 
@@ -35,6 +38,9 @@ export default function Drawer({
   title,
   ariaLabel,
   side = "bottom",
+  backdropClassName = "",
+  panelClassName = "",
+  contentClassName = "",
   children,
 }: DrawerProps) {
   const [mounted, setMounted] = useState(false);
@@ -94,7 +100,7 @@ export default function Drawer({
         onClick={onClose}
         className={`absolute inset-0 h-full w-full cursor-default bg-black/60 backdrop-blur-sm transition-opacity duration-300 ${
           open ? "opacity-100" : "opacity-0"
-        }`}
+        } ${backdropClassName}`}
       />
 
       {/* Panel */}
@@ -109,14 +115,18 @@ export default function Drawer({
           side === "left"
             ? `absolute bottom-0 left-0 top-0 flex w-[min(280px,80vw)] flex-col overflow-hidden rounded-r-2xl border-r border-white/10 bg-dark shadow-2xl shadow-black/60 outline-none transition-transform duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none ${
                 open ? "translate-x-0" : "-translate-x-full"
-              }`
+              } ${panelClassName}`
             : side === "right"
               ? `absolute bottom-0 right-0 top-0 flex w-[min(480px,92vw)] flex-col overflow-hidden rounded-l-2xl border-l border-white/10 bg-dark shadow-2xl shadow-black/60 outline-none transition-transform duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none ${
                   open ? "translate-x-0" : "translate-x-full"
-                }`
-              : `absolute bottom-0 left-0 right-0 flex max-h-[85vh] flex-col overflow-hidden rounded-t-2xl border-t border-white/10 bg-dark shadow-2xl shadow-black/60 outline-none transition-transform duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none ${
-                  open ? "translate-y-0" : "translate-y-full"
-                }`
+                } ${panelClassName}`
+              : side === "top"
+                ? `absolute inset-0 flex h-[100dvh] w-screen flex-col overflow-hidden border-0 bg-background text-foreground shadow-none outline-none transition-opacity duration-200 ease-out motion-reduce:transition-none ${
+                    open ? "opacity-100" : "opacity-0"
+                  } ${panelClassName}`
+                : `absolute bottom-0 left-0 right-0 flex max-h-[85vh] flex-col overflow-hidden rounded-t-2xl border-t border-white/10 bg-dark shadow-2xl shadow-black/60 outline-none transition-transform duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none ${
+                    open ? "translate-y-0" : "translate-y-full"
+                  } ${panelClassName}`
         }
       >
         {/* Drag handle — bottom sheet only */}
@@ -145,8 +155,10 @@ export default function Drawer({
         <div
           className={
             side === "bottom"
-              ? "flex-1 overflow-y-auto pb-[max(env(safe-area-inset-bottom),1rem)]"
-              : "flex-1 overflow-y-auto"
+              ? `flex-1 overflow-y-auto pb-[max(env(safe-area-inset-bottom),1rem)] ${contentClassName}`
+              : side === "top"
+                ? `flex-1 overflow-hidden ${contentClassName}`
+                : `flex-1 overflow-y-auto ${contentClassName}`
           }
         >
           {children}
diff --git a/lib/console/email-allowlist.ts b/lib/console/email-allowlist.ts
index 793986b..e9f3015 100644
--- a/lib/console/email-allowlist.ts
+++ b/lib/console/email-allowlist.ts
@@ -43,9 +43,9 @@ export function isAllowlistGatedPath(pathname: string): boolean {
   return (
     pathname === "/" ||
     pathname === "/home" ||
+    pathname === "/install" ||
     pathname.startsWith("/usage") ||
     pathname.startsWith("/keys") ||
-    pathname.startsWith("/calls") ||
-    pathname.startsWith("/settings")
+    pathname.startsWith("/calls")
   );
 }
diff --git a/lib/console/useOwnerWallet.ts b/lib/console/useOwnerWallet.ts
index 5dfacae..3be5e4f 100644
--- a/lib/console/useOwnerWallet.ts
+++ b/lib/console/useOwnerWallet.ts
@@ -47,7 +47,7 @@ export async function startWalletTopUp(input: {
   amountUsd: string;
   returnPath?: string;
 }): Promise<{ checkoutUrl: string }> {
-  const path = input.returnPath ?? "/usage";
+  const path = input.returnPath ?? "/home";
   const join = path.includes("?") ? "&" : "?";
   const response = await fetch("/api/pymthouse/wallet/top-up", {
     method: "POST",
@@ -221,8 +221,8 @@ export function useOwnerWallet(enabled: boolean) {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
-        successUrl: `${window.location.origin}/usage?topup=pm-saved`,
-        cancelUrl: `${window.location.origin}/usage?topup=canceled`,
+        successUrl: `${window.location.origin}/home?topup=pm-saved`,
+        cancelUrl: `${window.location.origin}/home?topup=canceled`,
       }),
     });
     const body = await readResponseJson<{
diff --git a/lib/constants.ts b/lib/constants.ts
index 3acd8bc..37746c0 100644
--- a/lib/constants.ts
+++ b/lib/constants.ts
@@ -1,12 +1,9 @@
 // Primary nav for the console sidebar. During the creator pilot (Sep 2026)
 // this is deliberately three destinations:
 //
-//   - "home"         → Home — MCP install instructions and harness connection
-//                      state. The only onboarding surface.
-//   - "organization" → Usage (spend, plus the calls log folded in underneath)
-//                      and Settings.
+//   - "organization" → Home (balance and the calls log).
 //
-// Two zones are defined but not rendered in the signed-in rail:
+// One zone is defined but not rendered in the signed-in rail:
 //   - "network"      → Explore and Stats. Still real routes, still linkable,
 //                      and still the signed-out landing — they just aren't
 //                      console destinations. Filtered out in ConsoleSidebar.
@@ -16,42 +13,23 @@
 //     connector, so there is no key to provision. `/keys` still exists but is
 //     unreachable from the nav; bring the entry back with the route when
 //     developer-issued keys return.
-//   - Calls — the per-request log now renders underneath Spend by capability
-//     on /usage rather than as its own destination.
+//   - Calls — the per-request log now renders on /home rather than as its own
+//     destination.
 //
-// Settings carries a chev-right (rendered by NavLink via `submenu: true`)
-// instead of a count, signaling that it leads into a sub-experience.
 export const PORTAL_NAV_ITEMS = [
-  {
-    label: "Home",
-    href: "/home",
-    icon: "House" as const,
-    kbd: "G H",
-    zone: "home" as const,
-  },
   {
     label: "Explore",
     href: "/explore",
-    icon: "LayoutGrid" as const,
     zone: "network" as const,
   },
   {
     label: "Stats",
     href: "/network",
-    icon: "Globe" as const,
     zone: "network" as const,
   },
   {
-    label: "Usage",
-    href: "/usage",
-    icon: "BarChart3" as const,
-    zone: "organization" as const,
-  },
-  {
-    label: "Settings",
-    href: "/settings",
-    icon: "Settings" as const,
-    submenu: true,
+    label: "Home",
+    href: "/home",
     zone: "organization" as const,
   },
 ] as const;
@@ -67,4 +45,4 @@ export const EXTERNAL_LINKS = {
  * The MCP endpoint a harness connects to. Adding it kicks off an OAuth
  * round-trip back to this console, which is why the pilot ships no API keys.
  */
-export const MCP_SERVER_URL = "https://agent.livepeer.org/api/mcp";
+export const MCP_SERVER_URL = "https://earlyaccess.livepeer.org/api/mcp";
diff --git a/middleware.ts b/middleware.ts
index 31092c4..2aece06 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -18,10 +18,9 @@ function copyAuthCookies(from: NextResponse, to: NextResponse): NextResponse {
 // redirected here, in middleware, rather than by the page: a client-side
 // redirect runs after the console chrome has already painted, so a cold
 // signed-out load flashed the sidebar for a frame before landing on /login.
-// Usage and Settings are deliberately not listed — they keep the in-shell
-// sign-in wall (see the comment in app/(app)/usage/page.tsx).
+// Home keeps the in-shell sign-in wall; Install redirects before the shell.
 function isSessionOnlyPath(pathname: string): boolean {
-  return pathname === "/" || pathname === "/home";
+  return pathname === "/" || pathname === "/install";
 }
 
 export async function middleware(request: NextRequest) {
@@ -33,7 +32,8 @@ export async function middleware(request: NextRequest) {
   if (devMock) {
     const mocked = devMockResponse(
       request.nextUrl.pathname,
-      request.nextUrl.searchParams
+      request.nextUrl.searchParams,
+      request.url
     );
     if (mocked) return mocked;
   }
diff --git a/next.config.ts b/next.config.ts
index 4f79207..92c1f23 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,6 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
+  allowedDevOrigins: ["studio.tail0de21e.ts.net"],
   // Bundler-agnostic polling interval for file watching — works with both
   // Turbopack (default in Next 15) and Webpack. Needed because the native
   // file watcher doesn't pick up changes reliably in git worktrees.
@@ -36,6 +37,16 @@ const nextConfig: NextConfig = {
         destination: "/apps/:id?tab=overview",
         permanent: true,
       },
+      {
+        source: "/settings/:path*",
+        destination: "/home",
+        permanent: false,
+      },
+      {
+        source: "/usage",
+        destination: "/home",
+        permanent: false,
+      },
       // Old livepeer.org routes → new site equivalents
       {
         source: "/lpt",

From 0a6c2aabb924be527ab3bab18a734c03ffeccfcb Mon Sep 17 00:00:00 2001
From: peace node <peacenode@aol.com>
Date: Thu, 3 Sep 2026 18:36:47 -0400
Subject: [PATCH 3/5] feat(home): redesign balance and history

---
 app/(app)/home/page.tsx                       |  91 +--
 components/console/CallsSection.tsx           | 345 ++++-----
 components/console/CallsTable.tsx             | 169 +++--
 .../console/CapabilityLeaderboardPanel.tsx    |   2 +-
 components/console/UsageView.tsx              | 653 ++++--------------
 lib/console/dev-mock.ts                       |  32 +-
 lib/console/mock-data.ts                      |  11 +-
 lib/console/signed-ticket-activity.ts         |   2 +-
 lib/console/usage-capability-display.ts       |   6 +-
 lib/console/utils.ts                          |   8 +-
 10 files changed, 437 insertions(+), 882 deletions(-)

diff --git a/app/(app)/home/page.tsx b/app/(app)/home/page.tsx
index f82cb05..7e4f899 100644
--- a/app/(app)/home/page.tsx
+++ b/app/(app)/home/page.tsx
@@ -1,86 +1,33 @@
 "use client";
 
-import { useEffect } from "react";
-import { useRouter } from "next/navigation";
-import { House } from "lucide-react";
+import { Suspense } from "react";
 import { useAuth } from "@/components/console/AuthContext";
-import ConsolePageHeader from "@/components/console/ConsolePageHeader";
-import HomeCommandBar from "@/components/console/HomeCommandBar";
-import McpConnectPanel from "@/components/console/McpConnectPanel";
-
-function HomePageHeader() {
-  return <ConsolePageHeader title="Home" icon={House} />;
-}
-
-// ─── Home Page ───
-//
-// One job: get the MCP endpoint into the user's agent.
-//
-// Home used to be an operations dashboard — a first-run checklist, a spend
-// panel and a recent-activity preview. All three came out for the creator
-// pilot:
-//
-//   • the checklist walked through provisioning an API key, and the pilot
-//     provisions none — connecting a harness is the whole of onboarding now
-//   • the spend panel and activity preview restated /usage, which is one
-//     click away in the rail and carries the real versions
-//
-// What's left is deliberately sparse. A creator arriving here should be a
-// couple of copies away from having Livepeer inside their agent, and the page
-// should read as early — because it is.
-//
-// The running balance is not repeated here: it sits in the sidebar card, which
-// is on screen for every route rather than only this one.
+import ConsolePageSkeleton from "@/components/console/ConsolePageSkeleton";
+import SignInWall from "@/components/console/SignInWall";
+import UsageView from "@/components/console/UsageView";
 
 export default function HomePage() {
-  const { isConnected, isLoading, user } = useAuth();
-  const router = useRouter();
+  return (
+    <Suspense fallback={<ConsolePageSkeleton kpiCount={4} withChart />}>
+      <HomeContent />
+    </Suspense>
+  );
+}
 
-  // Middleware already sends signed-out requests to /login before this page
-  // is served (see middleware.ts). This client-side fallback only fires if
-  // the session lapses while the console is open.
-  useEffect(() => {
-    if (!isLoading && (!isConnected || !user)) {
-      router.replace("/login");
-    }
-  }, [isLoading, isConnected, user, router]);
+function HomeContent() {
+  const { isConnected, isLoading } = useAuth();
 
+  // Avoid flashing the wall while auth hydrates.
   if (isLoading) return null;
 
-  // Redirect is in flight; render nothing while it takes effect.
-  if (!isConnected || !user) return null;
-
-  const firstName = user.name.split(" ")[0] || "there";
+  // Organization-only route — logged-out users see the in-shell sign-in wall
+  // instead of a hard redirect.
+  if (!isConnected) return <SignInWall route="home" />;
 
   return (
-    <main id="main-content" className="relative flex flex-1 flex-col bg-dark">
-      {/* Atmosphere — a faint brand-green aura bleeding from the top edge, so
-          the console reads as a lit panel rather than a flat page. */}
-      <div
-        className="pointer-events-none absolute inset-x-0 top-0 h-72"
-        style={{
-          background:
-            "radial-gradient(70% 100% at 50% 0%, color-mix(in oklab, var(--color-green-bright) 7%, transparent) 0%, transparent 72%)",
-        }}
-        aria-hidden="true"
-      />
-
-      <HomePageHeader />
-      <div className="relative flex-1 overflow-y-auto">
-        <div className="mx-auto w-full max-w-5xl px-7 pb-20 pt-8">
-          <div className="home-rise">
-            <HomeCommandBar firstName={firstName} />
-            <p className="mt-2.5 max-w-xl text-[13.5px] leading-[1.55] text-fg-muted">
-              Livepeer Agent runs as an MCP server your agent runtime calls
-              directly. Connect one below and every capability on the network —
-              video, image, audio, 3D — becomes something you can just ask for.
-            </p>
-          </div>
-
-          <div className="home-rise mt-7" style={{ animationDelay: "60ms" }}>
-            <McpConnectPanel />
-          </div>
-        </div>
+    <main id="main-content" className="flex flex-1 flex-col bg-dark">
+      <div className="flex flex-1 flex-col">
+        <UsageView />
       </div>
     </main>
   );
diff --git a/components/console/CallsSection.tsx b/components/console/CallsSection.tsx
index 8b528d7..f82f942 100644
--- a/components/console/CallsSection.tsx
+++ b/components/console/CallsSection.tsx
@@ -4,46 +4,30 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Loader2, Search, X } from "lucide-react";
 import SectionHeader from "@/components/console/SectionHeader";
-import CallsTable from "@/components/console/CallsTable";
+import CallsTable, { modalityTag } from "@/components/console/CallsTable";
 import CallDetailDrawer from "@/components/console/CallDetailDrawer";
 import { useAuth } from "@/components/console/AuthContext";
 import { useAccountRequests } from "@/lib/console/useAccountRequests";
 import type { AccountActivityRow } from "@/lib/console/types";
-import { CAPABILITY_COLOR_OTHER } from "@/lib/console/usage-capability-display";
 
 const EMPTY_ROWS: AccountActivityRow[] = [];
 
-/**
- * The call log is a *window*, not a page section that grows without limit.
- * The viewport is fixed and scrolls internally, with the column header
- * pinned, so the page stays a known length however many calls load.
- * The height is the same in every state — loading, empty, error, full — so
- * nothing below it jumps as data arrives.
- */
-const VIEWPORT = "h-[420px]";
+const PLACEHOLDER_CLASS =
+  "flex min-h-[180px] flex-col items-center justify-center gap-2 px-5 py-10 text-center";
 
 /**
- * The per-call log, rendered underneath Spend by capability on /usage.
+ * The per-call log on /home. Its only control is search; a Live/Batch split
+ * was here once and came out: it's a pipeline-implementation distinction, not
+ * something a creator sorts their work by.
  *
- * It shares the breakdown table's vocabulary — header, row rhythm, footer —
- * so the two read as one system. Its only control is search; a Live/Batch
- * split was here once and came out: it's a pipeline-implementation
- * distinction, not something a creator sorts their work by.
- *
- * Search is lifted to the caller so a capability row in the spend table can
- * drive it: clicking a capability filters this list instead of navigating.
  * `/calls` still resolves — it redirects here, preserving `?request=`.
  */
 export default function CallsSection({
   query,
   onQueryChange,
-  colorByCapability,
 }: {
   query: string;
   onQueryChange: (next: string) => void;
-  /** Capability display name → series colour, from the breakdown table, so
-   *  each call's dot matches the capability row it rolls up into. */
-  colorByCapability: ReadonlyMap<string, string>;
 }) {
   const { isConnected } = useAuth();
   const requests = useAccountRequests(isConnected);
@@ -74,7 +58,8 @@ export default function CallsSection({
           (r) =>
             r.id.toLowerCase().includes(q) ||
             r.model.toLowerCase().includes(q) ||
-            r.pipeline.toLowerCase().includes(q)
+            r.pipeline.toLowerCase().includes(q) ||
+            modalityTag(r.pipeline).includes(q)
         )
       : allRows;
     return [...scoped].sort(
@@ -83,21 +68,15 @@ export default function CallsSection({
     );
   }, [allRows, query]);
 
-  // The drawer closes back to /usage — the page it now lives on.
-  const closeDrawer = () => router.push("/usage", { scroll: false });
+  // The drawer closes back to /home — the page it now lives on.
+  const closeDrawer = () => router.push("/home", { scroll: false });
+  const selectDrawerRow = (next: AccountActivityRow) => {
+    router.push(`/home?request=${next.id}`, { scroll: false });
+  };
 
-  // Further pages load as the window is scrolled: a sentinel row sits under
-  // the last loaded call and, when it scrolls into view, fetches the next
-  // page in place. The window is a fixed-height frame with its own footer
-  // outside the scroll, so there is no page footer for auto-loading to push
-  // away — the usual reason to prefer a button — and the scrollbar already
-  // expresses "there is more".
-  //
-  // While a search is active the sentinel becomes an explicit "Search older
-  // calls" action instead. Search only covers loaded rows, so auto-loading
-  // under a filter would page through the whole history looking for matches
-  // the moment the few it found left the sentinel on screen.
-  const windowRef = useRef<HTMLDivElement>(null);
+  // Further pages load as the page is scrolled. While a search is active the
+  // sentinel becomes an explicit action instead, because search only covers
+  // loaded rows.
   const sentinelRef = useRef<HTMLDivElement>(null);
   const [loadingMore, setLoadingMore] = useState(false);
   const loadMore = async () => {
@@ -118,16 +97,13 @@ export default function CallsSection({
 
   useEffect(() => {
     if (!autoLoad) return;
-    const root = windowRef.current;
     const target = sentinelRef.current;
-    if (!root || !target) return;
+    if (!target) return;
     const observer = new IntersectionObserver(
       (entries) => {
         if (entries.some((e) => e.isIntersecting)) void loadMore();
       },
-      // Start the fetch a little before the sentinel is actually reached so
-      // the next page is usually there by the time the scroll gets to it.
-      { root, rootMargin: "0px 0px 120px 0px" }
+      { rootMargin: "0px 0px 360px 0px" }
     );
     observer.observe(target);
     return () => observer.disconnect();
@@ -138,22 +114,16 @@ export default function CallsSection({
 
   const loading = requests.status === "loading" || requests.status === "idle";
 
-  /** Every non-table state fills the same window, so nothing below shifts. */
   const Placeholder = ({ children }: { children: React.ReactNode }) => (
-    <div
-      className={`flex ${VIEWPORT} flex-col items-center justify-center gap-2 px-5 text-center`}
-    >
-      {children}
-    </div>
+    <div className={PLACEHOLDER_CLASS}>{children}</div>
   );
 
   return (
     <>
       <SectionHeader
         variant="default"
-        className="mt-7 mb-3 flex flex-wrap items-end justify-between gap-3"
-        title="Calls"
-        description="Every signed request this billing cycle"
+        className="mb-3 flex flex-wrap items-end justify-between gap-3 px-3 md:px-7"
+        title="History"
         action={
           <div className="flex h-[26px] w-[240px] items-center gap-1.5 rounded-[4px] border border-hairline bg-dark px-2.5 focus-within:ring-1 focus-within:ring-green-bright/30">
             <Search
@@ -164,8 +134,8 @@ export default function CallsSection({
               type="text"
               value={query}
               onChange={(e) => onQueryChange(e.target.value)}
-              placeholder="Search id, model, capability…"
-              aria-label="Search calls"
+              placeholder="Search model or modality…"
+              aria-label="Search history"
               className="min-w-0 flex-1 bg-transparent text-[11.5px] text-fg-strong placeholder:text-fg-faint outline-none"
             />
             {query && (
@@ -182,178 +152,127 @@ export default function CallsSection({
         }
       />
 
-      <div className="overflow-hidden rounded-md border border-hairline bg-dark-lighter shadow-card">
-        {loading ? (
-          <div className={`${VIEWPORT} overflow-hidden`} aria-busy="true">
-            {Array.from({ length: 10 }).map((_, i) => (
-              <div
-                key={i}
-                className="flex animate-pulse items-center justify-between border-b border-hairline px-5 py-3 last:border-b-0 motion-reduce:animate-none"
-              >
-                <div className="h-3.5 w-48 rounded bg-dark-card" />
-                <div className="h-3 w-16 rounded bg-dark-card" />
-              </div>
-            ))}
-          </div>
-        ) : requests.status === "error" ? (
-          <Placeholder>
-            <p className="text-[13px] text-fg-muted">
-              Could not load signed requests.
-            </p>
-            <p className="max-w-md font-mono text-[11px] text-fg-faint">
-              {requests.message}
-            </p>
-            <button
-              type="button"
-              onClick={() => void requests.reload()}
-              className="mt-2 text-[12px] text-fg-faint transition-colors hover:text-fg"
+      {loading ? (
+        <div aria-busy="true">
+          {Array.from({ length: 10 }).map((_, i) => (
+            <div
+              key={i}
+              className="flex animate-pulse items-center justify-between px-3 py-3 motion-reduce:animate-none md:px-7"
             >
-              Retry
-            </button>
-          </Placeholder>
-        ) : !requests.openMeterConfigured ? (
-          <Placeholder>
-            <p className="text-[13px] text-fg-faint">
-              Per-request history isn&apos;t available for this account yet.
-            </p>
-          </Placeholder>
-        ) : rows.length === 0 ? (
-          <Placeholder>
-            {/* Search only covers loaded rows — the API filters by cursor and
-                limit, nothing else — so an empty result must not read as
-                "this call doesn't exist" while more pages remain. */}
-            <p className="text-[13px] text-fg-muted">
-              {query
-                ? requests.nextCursor
-                  ? `No loaded calls match “${query}”`
-                  : `No calls match “${query}”`
-                : "No signed requests this billing cycle"}
-            </p>
-            {!query && (
-              // The timing hint lives here, not on the spend table above:
-              // a new call lands in this log first and rolls up into spend
-              // afterwards.
-              <p className="max-w-sm text-[12.5px] text-fg-faint">
-                Your first call shows up here within about a minute.
-              </p>
-            )}
-            {query && (
-              <div className="flex items-center gap-2">
-                {requests.nextCursor && (
-                  <button
-                    type="button"
-                    onClick={() => void loadMore()}
-                    disabled={loadingMore}
-                    aria-busy={loadingMore || undefined}
-                    className="btn-outline inline-flex h-[26px] items-center rounded-[4px] px-2.5 text-[12px] font-medium transition-colors disabled:opacity-60"
-                  >
-                    {loadingMore ? "Searching…" : "Search older calls"}
-                  </button>
-                )}
+              <div className="h-3.5 w-48 rounded bg-dark-card" />
+              <div className="h-3 w-16 rounded bg-dark-card" />
+            </div>
+          ))}
+        </div>
+      ) : requests.status === "error" ? (
+        <Placeholder>
+          <p className="text-[13px] text-fg-muted">Could not load history.</p>
+          <p className="max-w-md font-mono text-[11px] text-fg-faint">
+            {requests.message}
+          </p>
+          <button
+            type="button"
+            onClick={() => void requests.reload()}
+            className="mt-2 text-[12px] text-fg-faint transition-colors hover:text-fg"
+          >
+            Retry
+          </button>
+        </Placeholder>
+      ) : !requests.openMeterConfigured ? (
+        <Placeholder>
+          <p className="text-[13px] text-fg-faint">
+            Per-request history isn&apos;t available for this account yet.
+          </p>
+        </Placeholder>
+      ) : rows.length === 0 ? (
+        <Placeholder>
+          <p className="text-[13px] text-fg-muted">
+            {query
+              ? requests.nextCursor
+                ? `No loaded history matches “${query}”`
+                : `No history matches “${query}”`
+              : "No history yet"}
+          </p>
+          {query && (
+            <div className="flex items-center gap-2">
+              {requests.nextCursor && (
                 <button
                   type="button"
-                  onClick={() => onQueryChange("")}
-                  className="inline-flex h-[26px] items-center rounded-[4px] px-2.5 text-[12px] text-fg-faint transition-colors hover:text-fg"
+                  onClick={() => void loadMore()}
+                  disabled={loadingMore}
+                  aria-busy={loadingMore || undefined}
+                  className="btn-outline inline-flex h-[26px] items-center rounded-[4px] px-2.5 text-[12px] font-medium transition-colors disabled:opacity-60"
                 >
-                  Clear search
+                  {loadingMore ? "Searching…" : "Search older history"}
                 </button>
-              </div>
-            )}
-          </Placeholder>
-        ) : (
-          <div ref={windowRef} className={`${VIEWPORT} overflow-y-auto`}>
-            <CallsTable
-              rows={rows}
-              showHeader
-              stickyHeader
-              bordered={false}
-              density="cozy"
-              variant="requests"
-              rowColor={(row) =>
-                colorByCapability.get(row.model) ?? CAPABILITY_COLOR_OTHER
-              }
-            />
-            {nextCursor && (
-              <div
-                ref={sentinelRef}
-                className="flex h-[40px] items-center justify-center border-t border-hairline text-[12px] text-fg-faint"
-                aria-live="polite"
-              >
-                {loadMoreError ? (
-                  <button
-                    type="button"
-                    onClick={() => void loadMore()}
-                    className="inline-flex h-[26px] items-center rounded-[4px] px-2.5 transition-colors hover:text-fg"
-                  >
-                    Couldn&apos;t load more · Retry
-                  </button>
-                ) : searching ? (
-                  <button
-                    type="button"
-                    onClick={() => void loadMore()}
-                    disabled={loadingMore}
-                    aria-busy={loadingMore || undefined}
-                    className="inline-flex h-[26px] items-center rounded-[4px] px-2.5 transition-colors hover:text-fg disabled:opacity-60"
-                  >
-                    {loadingMore ? "Searching…" : "Search older calls"}
-                  </button>
-                ) : loadingMore ? (
-                  <span className="inline-flex items-center gap-1.5">
-                    <Loader2
-                      className="h-3 w-3 animate-spin motion-reduce:animate-none"
-                      aria-hidden="true"
-                    />
-                    Loading more…
-                  </span>
-                ) : null}
-              </div>
-            )}
-          </div>
-        )}
-
-        {/* Footer sits outside the scroll window, in the same 40px band the
-            breakdown's Total row uses (border-t, bg-dark, 12.5px). It only
-            reports — loading happens in the window above. */}
-        {!loading && requests.status === "ready" && allRows.length > 0 && (
-          <div className="flex min-h-[40px] items-center justify-between gap-3 border-t border-hairline bg-dark px-5 py-1.5 text-[12.5px] text-fg-faint">
-            <p>
-              {query ? (
-                <>
-                  <span className="font-mono text-[11.5px] tabular-nums text-fg-strong">
-                    {fmtCount(rows.length)}
-                  </span>{" "}
-                  of {fmtCount(allRows.length)} loaded match
-                </>
-              ) : requests.nextCursor ? (
-                <>
-                  <span className="font-mono text-[11.5px] tabular-nums text-fg-strong">
-                    {fmtCount(allRows.length)}
-                  </span>{" "}
-                  loaded
-                </>
-              ) : (
-                <>
-                  All{" "}
-                  <span className="font-mono text-[11.5px] tabular-nums text-fg-strong">
-                    {fmtCount(allRows.length)}
-                  </span>{" "}
-                  loaded
-                </>
               )}
-            </p>
-          </div>
-        )}
-      </div>
+              <button
+                type="button"
+                onClick={() => onQueryChange("")}
+                className="inline-flex h-[26px] items-center rounded-[4px] px-2.5 text-[12px] text-fg-faint transition-colors hover:text-fg"
+              >
+                Clear search
+              </button>
+            </div>
+          )}
+        </Placeholder>
+      ) : (
+        <>
+          <CallsTable
+            rows={rows}
+            bordered={false}
+            density="cozy"
+            variant="requests"
+          />
+          {nextCursor && (
+            <div
+              ref={sentinelRef}
+              className="flex h-[40px] items-center justify-center text-[12px] text-fg-faint"
+              aria-live="polite"
+            >
+              {loadMoreError ? (
+                <button
+                  type="button"
+                  onClick={() => void loadMore()}
+                  className="inline-flex h-[26px] items-center rounded-[4px] px-2.5 transition-colors hover:text-fg"
+                >
+                  Couldn&apos;t load more · Retry
+                </button>
+              ) : searching ? (
+                <button
+                  type="button"
+                  onClick={() => void loadMore()}
+                  disabled={loadingMore}
+                  aria-busy={loadingMore || undefined}
+                  className="inline-flex h-[26px] items-center rounded-[4px] px-2.5 transition-colors hover:text-fg disabled:opacity-60"
+                >
+                  {loadingMore ? "Searching…" : "Search older history"}
+                </button>
+              ) : loadingMore ? (
+                <span className="inline-flex items-center gap-1.5">
+                  <Loader2
+                    className="h-3 w-3 animate-spin motion-reduce:animate-none"
+                    aria-hidden="true"
+                  />
+                  Loading more…
+                </span>
+              ) : null}
+            </div>
+          )}
+        </>
+      )}
 
       <CallDetailDrawer
         row={shownRow}
+        rows={
+          openCall && !rows.some((candidate) => candidate.id === openCall.id)
+            ? allRows
+            : rows
+        }
         open={!!openCall}
         onClose={closeDrawer}
+        onSelectRow={selectDrawerRow}
       />
     </>
   );
 }
-
-function fmtCount(n: number): string {
-  return n.toLocaleString("en-US");
-}
diff --git a/components/console/CallsTable.tsx b/components/console/CallsTable.tsx
index 59ce0d2..99f6d49 100644
--- a/components/console/CallsTable.tsx
+++ b/components/console/CallsTable.tsx
@@ -9,15 +9,17 @@ import type { AccountActivityRow } from "@/lib/console/types";
 
 /**
  * CallsTable — the single Linear-style call list, used by:
- *   1. the Calls section on /usage (formerly the standalone /calls view)
+ *   1. the History section on /home (formerly the standalone /calls view)
  *   2. the app-detail Logs tab (filtered to one app)
  *
- * Rows open the call inspector at `/usage?request=<id>`, which is where the
+ * Rows open the call inspector at `/home?request=<id>`, which is where the
  * drawer now lives.
  *
- * Row vocabulary (left → right):
+ * Full row vocabulary (left → right):
  *   8px status dot · mono short id · model · pipeline pill · latency|duration ·
- *   cost · via (signer) · relative time
+ *   cost · via (signer) · relative time.
+ *
+ * History rows are quieter: relative time · model · modality pill · cost.
  *
  * The metric column adapts to the call's kind: a batch call reports **latency**
  * (one request/response), a live call reports **duration** (a streaming
@@ -37,23 +39,80 @@ export interface CallsTableProps {
   stickyHeader?: boolean;
   /**
    * `full` — dot · call · metric · cost · via · time (the app Logs tab).
-   * `requests` — dot · call · cost · time. Signed-ticket rows carry neither a
-   * latency nor a distinct signer, so on /usage those two columns rendered
-   * "—" and a truncated "Livepeer A…" on every row: two of six columns
-   * saying nothing.
+   * `requests` — call · cost · time. Signed-ticket rows carry neither a
+   * latency nor a distinct signer, so on /home those columns rendered "—"
+   * and a truncated "Livepeer A…" on every row.
    */
   variant?: "full" | "requests";
   /**
    * Colour for the row's leading dot, keyed off the row. When given, the dot
-   * encodes *which capability* the call hit — the same colour the Spend by
-   * capability table uses — instead of the call's status. On /usage every
-   * row is a signed ticket, which only exists for a completed, paid call,
-   * so a status dot there could only ever be green and said nothing.
+   * encodes *which capability* the call hit instead of the call's status. On
+   * /home every row is a signed ticket, which only exists for a completed,
+   * paid call, so a status dot there could only ever be green and said
+   * nothing.
    */
   rowColor?: (row: AccountActivityRow) => string;
   className?: string;
 }
 
+export function modalityTag(pipeline: string): string {
+  const normalized = pipeline.toLowerCase();
+  const exact: Record<string, string> = {
+    "audio-to-text": "a2t",
+    "image-to-image": "i2i",
+    "image-to-video": "i2v",
+    language: "t2t",
+    llm: "t2t",
+    "live-transcoding": "v2v",
+    "live-video-to-video": "v2v",
+    "speech-to-text": "s2t",
+    "text-generation": "t2t",
+    "text-to-audio": "t2a",
+    "text-to-image": "t2i",
+    "text-to-speech": "t2s",
+    "text-to-video": "t2v",
+    transcoding: "v2v",
+    "video-understanding": "v2t",
+    "video-to-video": "v2v",
+  };
+  const mapped = exact[normalized];
+  if (mapped) return mapped;
+
+  const match = normalized.match(
+    /^(text|image|video|audio|speech|live)-to-(text|image|video|audio|speech)$/
+  );
+  if (match) {
+    const token = (part: string) =>
+      part === "text"
+        ? "t"
+        : part === "image"
+          ? "i"
+          : part === "video"
+            ? "v"
+            : part === "audio"
+              ? "a"
+              : "s";
+    return `${token(match[1]!)}2${token(match[2]!)}`;
+  }
+
+  return normalized
+    .split(/[-_./|:]+/)
+    .filter(Boolean)
+    .map((part) => part[0])
+    .join("")
+    .slice(0, 8);
+}
+
+function formatHistoryRelativeTime(iso: string): string {
+  const then = new Date(iso).getTime();
+  if (Number.isFinite(then)) {
+    const seconds = Math.round((Date.now() - then) / 1000);
+    if (seconds < 60) return "30s";
+  }
+
+  return formatRunRelativeTime(iso).replace(/ ago$/, "");
+}
+
 export default function CallsTable({
   rows,
   showHeader = false,
@@ -70,8 +129,8 @@ export default function CallsTable({
   // values, so each density preset is spelled out in full.
   const cols = compact
     ? density === "cozy"
-      ? "grid items-center gap-3 px-5 grid-cols-[minmax(0,1fr)_88px_88px]"
-      : "grid items-center gap-3 px-4 grid-cols-[minmax(0,1fr)_76px_76px]"
+      ? "grid items-center gap-3 px-3 md:px-7 grid-cols-[minmax(0,1fr)_88px]"
+      : "grid items-center gap-3 px-4 grid-cols-[minmax(0,1fr)_76px]"
     : density === "cozy"
       ? "grid items-center gap-3 px-5 grid-cols-[minmax(0,1fr)_80px_80px_80px_80px]"
       : "grid items-center gap-3 px-4 grid-cols-[minmax(0,1fr)_70px_70px_70px_70px]";
@@ -107,11 +166,17 @@ export default function CallsTable({
           {!compact && <span className="text-right">{metricLabel}</span>}
           <span className="text-right">Cost</span>
           {!compact && <span className="text-right">Via</span>}
-          <span className="text-right">Time</span>
+          {!compact && <span className="text-right">Time</span>}
         </div>
       )}
       {rows.map((row, i) => {
         const active = row.status === "active";
+        const pipelineLabel = compact
+          ? modalityTag(row.pipeline)
+          : row.pipeline;
+        const timeLabel = compact
+          ? formatHistoryRelativeTime(row.timestamp)
+          : formatRunRelativeTime(row.timestamp);
         const tone =
           row.status === "success"
             ? "bg-green-bright"
@@ -125,41 +190,53 @@ export default function CallsTable({
         return (
           <Link
             key={row.id}
-            href={`/usage?request=${row.id}`}
+            href={`/home?request=${row.id}`}
+            scroll={false}
             className={`${cols} ${rowPadY} text-[12.5px] transition-colors hover:bg-hover ${
               // The header already draws its own bottom hairline; giving the
               // first row a top one too stacked them into a 2px divider.
-              i > 0 ? "border-t border-hairline" : ""
+              !compact && i > 0 ? "border-t border-hairline" : ""
             }`}
           >
             {/* Status dot sits inside the first cell, not in a column of its
-                own, so the header label lines up with the breakdown table's
-                on /usage (both start at the padding edge). */}
+                own, so the header label starts at the padding edge. */}
             <div className="flex min-w-0 items-center gap-2.5">
-              {rowColor ? (
-                <span
-                  className="h-2 w-2 shrink-0 rounded-full"
-                  style={{ background: rowColor(row) }}
-                  aria-hidden="true"
-                />
-              ) : active ? (
-                // Liveness pulse for an in-progress session (warm per the
-                // liveness color convention).
-                <StatusDot tone="warm" size="md" />
-              ) : (
-                <span
-                  className={`h-2 w-2 shrink-0 rounded-full ${tone} ${shadowRing}`}
-                  aria-hidden="true"
-                />
+              {compact && (
+                <span className="w-16 shrink-0 text-left text-[12.5px] text-fg-faint">
+                  {timeLabel}
+                </span>
+              )}
+              {!compact &&
+                (rowColor ? (
+                  <span
+                    className="h-2 w-2 shrink-0 rounded-full"
+                    style={{ background: rowColor(row) }}
+                    aria-hidden="true"
+                  />
+                ) : active ? (
+                  // Liveness pulse for an in-progress session (warm per the
+                  // liveness color convention).
+                  <StatusDot tone="warm" size="md" />
+                ) : (
+                  <span
+                    className={`h-2 w-2 shrink-0 rounded-full ${tone} ${shadowRing}`}
+                    aria-hidden="true"
+                  />
+                ))}
+              {!compact && (
+                <span className="shrink-0 font-mono text-[11.5px] text-fg-faint tabular-nums">
+                  {row.id.slice(-7)}
+                </span>
               )}
-              <span className="shrink-0 font-mono text-[11.5px] text-fg-faint tabular-nums">
-                {row.id.slice(-7)}
-              </span>
               <span className="min-w-0 truncate font-medium text-fg-strong">
                 {row.model}
               </span>
-              <span className="inline-flex h-[18px] shrink-0 items-center rounded-[3px] border border-hairline px-1.5 font-mono text-[10.5px] text-fg-faint">
-                {row.pipeline}
+              <span
+                className={`inline-flex h-[18px] shrink-0 items-center rounded-[3px] px-1.5 font-mono text-[10.5px] text-fg-faint ${
+                  compact ? "bg-foreground/3" : "border border-hairline"
+                }`}
+              >
+                {pipelineLabel}
               </span>
               {showEnvironment && <EnvTag environmentId={row.environmentId} />}
             </div>
@@ -172,7 +249,11 @@ export default function CallsTable({
                 {formatCallMetric(row, nowMs)}
               </span>
             )}
-            <span className="text-right font-mono text-[11.5px] tabular-nums text-fg">
+            <span
+              className={`text-right text-fg ${
+                compact ? "text-[12.5px]" : "font-mono text-[11.5px]"
+              }`}
+            >
               {row.costDisplay}
             </span>
             {!compact && (
@@ -180,9 +261,11 @@ export default function CallsTable({
                 {row.signerLabel}
               </span>
             )}
-            <span className="text-right font-mono text-[11.5px] tabular-nums text-fg-faint">
-              {formatRunRelativeTime(row.timestamp)}
-            </span>
+            {!compact && (
+              <span className="text-right font-mono text-[11.5px] tabular-nums text-fg-faint">
+                {timeLabel}
+              </span>
+            )}
           </Link>
         );
       })}
diff --git a/components/console/CapabilityLeaderboardPanel.tsx b/components/console/CapabilityLeaderboardPanel.tsx
index 863312c..77e9f8d 100644
--- a/components/console/CapabilityLeaderboardPanel.tsx
+++ b/components/console/CapabilityLeaderboardPanel.tsx
@@ -339,7 +339,7 @@ export default function CapabilityLeaderboardPanel() {
           </p>
         </div>
         <Link
-          href="/usage"
+          href="/home"
           className="inline-flex items-center gap-1 text-[12px] text-fg-faint transition-colors hover:text-fg"
         >
           View usage <ArrowRight className="h-3 w-3" aria-hidden="true" />
diff --git a/components/console/UsageView.tsx b/components/console/UsageView.tsx
index 6a5d77b..133f50e 100644
--- a/components/console/UsageView.tsx
+++ b/components/console/UsageView.tsx
@@ -1,18 +1,15 @@
 "use client";
 
-import { useCallback, useMemo, useRef, useState } from "react";
-import SectionHeader from "@/components/console/SectionHeader";
+import { useMemo, useState } from "react";
+import Link from "next/link";
+import { Copy } from "lucide-react";
+import { toast } from "sonner";
 import CallsSection from "@/components/console/CallsSection";
-import { MiniSpark } from "@/components/console/StackedAreaChart";
+import SectionHeader from "@/components/console/SectionHeader";
 import Button from "@/components/design-system/Button";
-import { useAuth } from "@/components/console/AuthContext";
-import { useAccountUsage } from "@/lib/console/useAccountUsage";
-import {
-  buildUsageCapabilityRows,
-  formatPeriodResetLabel,
-  microsToUsd,
-  type UsageCapabilityRow,
-} from "@/lib/console/usage-capability-display";
+import { useAuth, type ConsoleUser } from "@/components/console/AuthContext";
+import { MCP_SERVER_URL } from "@/lib/constants";
+import { microsToUsd } from "@/lib/console/usage-capability-display";
 import { useWalletBillingState } from "@/lib/console/useOwnerWallet";
 import {
   includedUsageSummary,
@@ -20,61 +17,16 @@ import {
 } from "@/lib/console/wallet-settlement-display";
 
 /**
- * Usage answers three questions, in order: what this period cost, whether it
- * runs out before it resets, and what drove it — then lists the calls.
- *
- * Three blocks, and no more. The page briefly carried a spend-per-day chart
- * and a Jobs / Per job / Projected KPI strip underneath the meter. Both came
- * out: the projection line already says whether the money runs out, which
- * is the only thing a creator decides on; a daily curve restated it at
- * 180px, and the strip counted API calls for someone who made forty videos.
- * On a page whose brief is "hide everything that isn't essential", they were
- * furniture.
- *
- * There is exactly one hero figure (spend). "Remaining" is the meter's
- * right-hand label, not a second hero — the sidebar already carries it on
- * every route.
- *
- * The breakdown and the call log share one table vocabulary: the same header
- * recipe, the same row rhythm, the same footer. Clicking a capability filters
- * the calls instead of navigating; `/calls` redirects here.
+ * Usage is balance first, then history. The user-facing controls stay out of
+ * the page so the account state and request log can be read directly.
  */
 
-type PeriodId = "7d" | "30d" | "90d";
-
-const PERIODS: Array<{
-  id: PeriodId;
-  label: string;
-  noun: string;
-  days: number;
-}> = [
-  { id: "7d", label: "7d", noun: "7 days", days: 7 },
-  { id: "30d", label: "30d", noun: "30 days", days: 30 },
-  { id: "90d", label: "90d", noun: "90 days", days: 90 },
-];
-
-function fmt(n: number): string {
-  return Math.round(n).toLocaleString("en-US");
-}
-
-function fmtSpend(n: number): string {
-  return `$${n.toFixed(2)}`;
-}
-
 function fmtUsd(n: number): string {
   return n >= 1000
     ? `$${Math.round(n).toLocaleString("en-US")}`
     : `$${n.toFixed(2)}`;
 }
 
-/** Cost-descending, so the ranking matches the column the eye lands on. */
-function orderByCost(rows: UsageCapabilityRow[]): UsageCapabilityRow[] {
-  return [...rows].sort(
-    (a, b) =>
-      microsToUsd(b.networkFeeUsdMicros) - microsToUsd(a.networkFeeUsdMicros)
-  );
-}
-
 function SkeletonBar({ className }: { className: string }) {
   return (
     <div
@@ -102,41 +54,80 @@ function UsageLoadError({
   );
 }
 
-function PeriodTabs({
-  value,
-  onChange,
-  disabled,
+function referralUrlFor(user: ConsoleUser): string {
+  return `${new URL(MCP_SERVER_URL).origin}?ref=${encodeURIComponent(user.id)}`;
+}
+
+function copyReferralUrl(referralUrl: string) {
+  void navigator.clipboard.writeText(referralUrl).then(() => {
+    toast("copied to clipboard");
+  });
+}
+
+function HomePromoCards({
+  user,
+  className = "px-3 pt-3 md:px-7 md:pt-7",
+  gridClassName = "grid w-full max-w-[760px] grid-cols-2 gap-3",
 }: {
-  value: PeriodId;
-  onChange: (id: PeriodId) => void;
-  disabled: boolean;
+  user: ConsoleUser | null;
+  className?: string;
+  gridClassName?: string;
 }) {
+  const referralUrl = user ? referralUrlFor(user) : "";
+
   return (
-    <div
-      role="group"
-      aria-label="Reporting period"
-      className="inline-flex items-center gap-px rounded-[5px] border border-hairline bg-dark p-px"
-    >
-      {PERIODS.map((p) => {
-        const active = p.id === value;
-        return (
+    <section className={className} aria-label="Quick actions">
+      <div className={gridClassName}>
+        <Link
+          href="/install"
+          className="group relative flex aspect-video overflow-hidden rounded-sm border border-foreground/10 p-3 text-left transition-colors hover:border-foreground/16 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+          aria-label="Install Livepeer"
+        >
+          <img
+            src="/images/console/explore/img2img-sdxl.webp"
+            alt=""
+            aria-hidden="true"
+            className="absolute inset-0 h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
+          />
+          <span
+            className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_left,rgba(35,156,215,0.82)_0%,rgba(35,156,215,0.42)_30%,rgba(35,156,215,0.16)_52%,rgba(35,156,215,0)_74%)]"
+            aria-hidden="true"
+          />
+          <span className="relative text-ui-caption font-medium text-white">
+            Install Livepeer
+          </span>
+        </Link>
+
+        {user && (
           <button
-            key={p.id}
             type="button"
-            aria-pressed={active}
-            disabled={disabled}
-            onClick={() => onChange(p.id)}
-            className={`rounded-[4px] px-2 py-1 font-mono text-[11px] transition-colors duration-[var(--motion-duration-fast)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-green-bright/30 disabled:opacity-50 ${
-              active
-                ? "bg-dark-card text-fg"
-                : "text-fg-faint hover:bg-hover hover:text-fg-strong"
-            }`}
+            onClick={() => copyReferralUrl(referralUrl)}
+            aria-label="Copy referral link"
+            className="flex aspect-video flex-col rounded-sm border p-3 text-left shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+            style={{
+              borderColor:
+                "color-mix(in oklch, var(--background) 86%, var(--foreground) 14%)",
+              background:
+                "linear-gradient(135deg, color-mix(in oklch, var(--background) 96%, var(--foreground) 4%) 0%, color-mix(in oklch, var(--background) 94%, var(--foreground) 6%) 42%, color-mix(in oklch, var(--background) 90%, var(--foreground) 10%) 100%)",
+            }}
           >
-            {p.label}
+            <p className="text-ui-caption font-medium text-foreground">
+              Refer a friend
+            </p>
+            <div className="mt-auto flex min-w-0 items-center gap-2">
+              <code
+                title={referralUrl}
+                dir="rtl"
+                className="min-w-0 flex-1 truncate text-left font-sans text-[11.5px] leading-4 text-muted-foreground"
+              >
+                {referralUrl}
+              </code>
+              <Copy className="h-3 w-3 shrink-0 text-fg-muted" aria-hidden="true" />
+            </div>
           </button>
-        );
-      })}
-    </div>
+        )}
+      </div>
+    </section>
   );
 }
 
@@ -154,156 +145,63 @@ type Runway = {
 };
 
 /**
- * The figure and the rule it sits on. The rule spans the whole runway —
- * included, then credits, then metered overage — because that is the
- * sequence spending actually follows. Its unfilled track is a lighter step
- * of the same green, so the state reads across the whole bar rather than
- * stopping where the fill does.
+ * Balance figure for the account runway: included balance, prepaid credits,
+ * then metered overage.
  */
 function Instrument({
   loading,
-  spendUsd,
   runway,
-  projectedUsd,
-  resetsAt,
+  className = "px-3 py-16 md:px-7",
 }: {
   loading: boolean;
-  spendUsd: number;
   runway: Runway | null;
-  projectedUsd: number | null;
-  resetsAt: string;
+  className?: string;
 }) {
   const includedLeft = runway
     ? Math.max(0, runway.includedTotal - runway.consumed)
     : 0;
-  // Everything still spendable before the account is blocked.
   const remaining = runway
     ? includedLeft + runway.credits + (runway.overage ?? 0)
     : 0;
-  const ceiling = runway ? runway.consumed + remaining : 0;
-  const overCeiling =
-    runway && projectedUsd && projectedUsd > ceiling
-      ? projectedUsd - ceiling
-      : 0;
-  const willBlock = overCeiling > 0;
-  const intoOverage =
-    runway && projectedUsd && projectedUsd > runway.includedTotal
-      ? Math.min(projectedUsd, ceiling) - runway.includedTotal
-      : 0;
+  const issuedTotal = runway ? runway.consumed + remaining : 0;
 
-  const scaleMax = Math.max(ceiling, willBlock ? projectedUsd! : 0);
-  const pct = (v: number) =>
-    scaleMax > 0 ? Math.min(100, (v / scaleMax) * 100) : 0;
-  const consumedPct = pct(runway?.consumed ?? 0);
-  const projectedPct = projectedUsd ? pct(projectedUsd) : consumedPct;
-  const includedPct = runway ? pct(runway.includedTotal) : 100;
+  const heading = (
+    <SectionHeader
+      variant="default"
+      className="mb-3 flex flex-wrap items-end justify-between gap-3"
+      title="Balance"
+    />
+  );
 
   if (loading) {
     return (
-      <section
-        className="rounded-md border border-hairline bg-dark-lighter px-6 pt-5 pb-5 shadow-card"
-        aria-busy="true"
-      >
-        <SkeletonBar className="h-3 w-24" />
-        <SkeletonBar className="mt-3 h-10 w-44" />
-        <SkeletonBar className="mt-5 h-[3px] w-full" />
-        <SkeletonBar className="mt-3 h-3 w-72" />
+      <section className={className} aria-busy="true">
+        {heading}
+        <SkeletonBar className="h-12 w-56" />
       </section>
     );
   }
 
   return (
-    <section className="rounded-md border border-hairline bg-dark-lighter px-6 pt-5 pb-5 shadow-card">
-      <p className="text-[11px] font-medium uppercase tracking-[0.08em] text-fg-faint">
-        Spend this period
-      </p>
-      {/* The one hero. Mono because it is a figure (house rule); no
-          tabular-nums because it stands alone — equal-width digits make a
-          display-size number read loose. */}
-      <p className="mt-1.5 font-mono text-[40px] font-medium leading-none tracking-[-0.03em] text-fg">
-        {fmtUsd(spendUsd)}
-      </p>
-
-      {runway && (
-        <>
-          <div
-            className="relative mt-5 h-[3px] rounded-full bg-green-subtle"
-            role="img"
-            aria-label={`${fmtUsd(runway.consumed)} spent of ${fmtUsd(ceiling)} available — ${fmtUsd(includedLeft)} included, then ${fmtUsd(runway.credits)} credits, then ${fmtUsd(runway.overage ?? 0)} metered overage`}
-          >
-            {projectedPct > consumedPct && (
-              <div
-                className="absolute inset-y-0 rounded-full"
-                style={{
-                  left: `${consumedPct}%`,
-                  width: `${Math.max(0, projectedPct - consumedPct)}%`,
-                  background: willBlock
-                    ? "color-mix(in srgb, var(--color-warm) 35%, transparent)"
-                    : "color-mix(in srgb, var(--color-green-bright) 30%, transparent)",
-                }}
-              />
-            )}
-            <div
-              className="absolute inset-y-0 left-0 rounded-full bg-green-bright transition-[width] duration-[var(--motion-duration-slow)] ease-[var(--motion-easing-out)] motion-reduce:transition-none"
-              style={{ width: `${consumedPct}%` }}
-            />
-            {/* Where included usage ends and metered overage begins. */}
-            <div
-              className="absolute -top-1 -bottom-1 w-px bg-border-strong"
-              style={{ left: `${includedPct}%` }}
-              aria-hidden="true"
-            />
-          </div>
-
-          <div className="mt-2.5 flex flex-wrap items-baseline justify-between gap-x-6 gap-y-1 text-[12px] text-fg-faint">
-            <p className={willBlock ? "text-warm" : undefined}>
-              {projectedUsd === null ? (
-                <>Resets {resetsAt}</>
-              ) : willBlock ? (
-                <>
-                  Projected{" "}
-                  <span className="font-mono tabular-nums">
-                    {fmtUsd(projectedUsd)}
-                  </span>{" "}
-                  by {resetsAt} — over your limit by{" "}
-                  <span className="font-mono tabular-nums">
-                    {fmtUsd(overCeiling)}
-                  </span>
-                </>
-              ) : intoOverage > 0 ? (
-                <>
-                  Projected{" "}
-                  <span className="font-mono tabular-nums">
-                    {fmtUsd(projectedUsd)}
-                  </span>{" "}
-                  by {resetsAt} ·{" "}
-                  <span className="font-mono tabular-nums">
-                    {fmtUsd(intoOverage)}
-                  </span>{" "}
-                  billed as overage
-                </>
-              ) : (
-                <>
-                  Projected{" "}
-                  <span className="font-mono tabular-nums">
-                    {fmtUsd(projectedUsd)}
-                  </span>{" "}
-                  by {resetsAt} · within included
-                </>
-              )}
-            </p>
-            <p>
-              <span
-                className={`font-mono tabular-nums ${remaining <= 0 ? "text-warm" : "text-fg-strong"}`}
-              >
-                {fmtUsd(remaining)}
-              </span>{" "}
-              left of{" "}
-              <span className="font-mono tabular-nums">{fmtUsd(ceiling)}</span>
-            </p>
-          </div>
-        </>
-      )}
+    <section className={className} aria-label="Balance">
+      {heading}
+      <div
+        className="flex flex-wrap items-baseline gap-x-2.5 gap-y-1"
+        aria-label={
+          runway
+            ? `${fmtUsd(remaining)} remaining of ${fmtUsd(issuedTotal)} total issued`
+            : undefined
+        }
+      >
+        <p className="text-[52px] font-normal leading-none text-fg">
+          {runway ? fmtUsd(remaining) : "—"}
+        </p>
+        {runway && (
+          <p className="text-[12px] font-normal text-fg-faint">
+            / {fmtUsd(issuedTotal)} remaining
+          </p>
+        )}
+      </div>
     </section>
   );
 }
@@ -312,71 +210,9 @@ function Instrument({
 
 export default function UsageView() {
   const { isConnected, user } = useAuth();
-  const [period, setPeriod] = useState<PeriodId>("30d");
-  const active = PERIODS.find((p) => p.id === period) ?? PERIODS[1]!;
-  // Clicking a capability in the table filters the call list below instead
-  // of navigating — the two now live on one page.
   const [callsQuery, setCallsQuery] = useState("");
-  const callsRef = useRef<HTMLDivElement>(null);
-  // Takes the capability's display name: it's built by the same
-  // `humanizePipelineModel` the call mapper uses for `row.model`, so it
-  // matches exactly what the search box searches.
-  const focusCapability = useCallback((capabilityName: string) => {
-    setCallsQuery(capabilityName);
-    callsRef.current?.scrollIntoView({
-      behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches
-        ? "auto"
-        : "smooth",
-      block: "start",
-    });
-  }, []);
 
-  const usageState = useAccountUsage(isConnected, { periodDays: active.days });
   const walletState = useWalletBillingState(isConnected);
-  const fresh = usageState.status === "ready" ? usageState.data : null;
-
-  // Refetch keeps the frame. Switching 7d → 30d re-fetches, and the hook
-  // reports `loading` with no data for a beat; rendering skeletons there
-  // made the whole page jump. Hold the last payload and dim it instead —
-  // the skeleton is only for the very first load, when there is nothing to
-  // hold.
-  const lastDataRef = useRef<typeof fresh>(null);
-  if (fresh) lastDataRef.current = fresh;
-  const data = fresh ?? lastDataRef.current;
-  const refetching = usageState.status === "loading" && data !== null;
-
-  const capabilityRows = useMemo(() => {
-    if (!data) return [];
-    return orderByCost(
-      buildUsageCapabilityRows({
-        current: data.current.pipelineModels,
-        prior: data.prior.pipelineModels,
-        period: data.period,
-        dailyByPipeline: data.current.dailyByPipeline,
-      })
-    );
-  }, [data]);
-
-  /** Capability display name → series colour, shared with the call list so
-   *  a call's dot matches its row in the breakdown. Keyed by display name
-   *  because that is what the call rows carry (and what the filter uses). */
-  const colorByCapability = useMemo(
-    () => new Map(capabilityRows.map((c) => [c.name, c.color] as const)),
-    [capabilityRows]
-  );
-
-  /** Total fee per day, for the burn-rate projection. */
-  const dailyTotal = useMemo(() => {
-    if (!data) return null;
-    const index = new Map(data.periodDayKeys.map((k, i) => [k, i] as const));
-    const total = new Array<number>(data.periodDayKeys.length).fill(0);
-    for (const row of data.current.dailyByPipeline) {
-      const i = index.get(row.date);
-      if (i === undefined) continue;
-      total[i] = (total[i] ?? 0) + microsToUsd(row.networkFeeUsdMicros);
-    }
-    return total;
-  }, [data]);
 
   const included: IncludedUsageSummary | null =
     walletState.state.status === "ready"
@@ -398,267 +234,36 @@ export default function UsageView() {
     };
   }, [walletState.state, included]);
 
-  const resetsAt = included?.resetsAt
-    ? new Date(included.resetsAt).toLocaleDateString(undefined, {
-        month: "short",
-        day: "numeric",
-      })
-    : data
-      ? formatPeriodResetLabel(data.period.end)
-      : "—";
-
-  /**
-   * The allowance is measured in network cost, so the burn rate comes from the
-   * same meter — a projection built on billable retail would read high against
-   * a balance it never touches.
-   */
-  const projectedUsd = useMemo(() => {
-    if (!dailyTotal || !included?.resetsAt) return null;
-    const window = dailyTotal.slice(-7);
-    if (window.length === 0) return null;
-    const rate = window.reduce((a, b) => a + b, 0) / Math.max(1, window.length);
-    const daysLeft = Math.max(
-      0,
-      Math.ceil((Date.parse(included.resetsAt) - Date.now()) / 86_400_000)
-    );
-    if (daysLeft === 0 || rate <= 0) return null;
-    return microsToUsd(included.consumedUsdMicros) + rate * daysLeft;
-  }, [dailyTotal, included]);
-
-  const rangeLabel = useMemo(() => {
-    if (!data) return `Last ${active.noun}`;
-    const fmtDay = (iso: string) =>
-      new Date(iso).toLocaleDateString(undefined, {
-        month: "short",
-        day: "numeric",
-      });
-    return `${fmtDay(data.period.start)} – ${fmtDay(data.period.end)}`;
-  }, [data, active.noun]);
-
   const loading =
-    (usageState.status === "loading" || usageState.status === "idle") &&
-    data === null;
-  const grandReq = capabilityRows.reduce((a, c) => a + c.requestCount, 0);
-  const grandSpend = capabilityRows.reduce(
-    (a, c) => a + microsToUsd(c.networkFeeUsdMicros),
-    0
-  );
-  const spendUsd = data ? microsToUsd(data.current.networkFeeUsdMicros) : 0;
+    walletState.state.status === "loading" ||
+    walletState.state.status === "idle";
 
   return (
-    <div className="mx-auto w-full max-w-[1200px] px-7 pb-20 pt-7">
-      {/* The one filter row. It scopes the instrument and the table; the
-          call log is per billing cycle and says so in its own header. */}
-      <SectionHeader
-        variant="default"
-        className="mb-3 flex items-end justify-between gap-3"
-        title={rangeLabel}
-        description={`Last ${active.noun}`}
-        action={
-          <PeriodTabs value={period} onChange={setPeriod} disabled={loading} />
-        }
-      />
-
-      <div
-        className={`transition-opacity duration-[var(--motion-duration-base)] ${
-          refetching ? "opacity-60" : ""
-        }`}
-        aria-busy={refetching || undefined}
-      >
+    <div className="w-full pb-20">
+      <div className="mb-8 grid grid-cols-1 gap-8 px-3 pt-3 md:px-7 md:pt-7 lg:grid-cols-3 lg:items-start lg:gap-3">
         <Instrument
           loading={loading}
-          spendUsd={spendUsd}
           runway={runway}
-          projectedUsd={projectedUsd}
-          resetsAt={resetsAt}
+          className="order-1 py-4 lg:order-none lg:py-0"
         />
-
-        {usageState.status === "error" ? (
-          <div className="mt-4">
-            <UsageLoadError
-              message={usageState.message}
-              onRetry={usageState.reload}
-            />
-          </div>
-        ) : loading ? (
-          <>
-            <SectionHeader
-              variant="default"
-              className="mt-7 mb-3 flex items-end justify-between gap-3"
-              title="Spend by capability"
-              description="Loading…"
-            />
-            <div
-              className="overflow-hidden rounded-md border border-hairline bg-dark-lighter shadow-card"
-              aria-busy="true"
-            >
-              {[0, 1, 2, 3, 4, 5].map((i) => (
-                <div
-                  key={i}
-                  className="flex items-center justify-between gap-4 border-b border-hairline px-5 py-3 last:border-b-0"
-                >
-                  <SkeletonBar className="h-3.5 w-40" />
-                  <SkeletonBar className="h-3.5 w-20" />
-                </div>
-              ))}
-            </div>
-          </>
-        ) : capabilityRows.length === 0 ? (
-          <>
-            {/* Same heading as the populated table so the section keeps its
-                name when empty. The card is a short note, not a window: the
-                call log directly below is the tall one, and stacking two
-                look-alike "no calls" boxes read as a duplicate. */}
-            <SectionHeader
-              variant="default"
-              className="mt-7 mb-3 flex items-end justify-between gap-3"
-              title="Spend by capability"
-              description={`No spend in the last ${active.noun}`}
-            />
-            <div className="rounded-md border border-hairline bg-dark-lighter px-4 py-8 text-center shadow-card">
-              <p className="text-sm text-fg-muted">Nothing to rank yet.</p>
-              <p className="mx-auto mt-1.5 max-w-sm text-[12.5px] text-fg-faint">
-                Once you&apos;ve made calls, each capability appears here ranked
-                by what it cost.
-              </p>
-            </div>
-          </>
-        ) : (
-          <>
-            <SectionHeader
-              variant="default"
-              className="mt-7 mb-3 flex items-end justify-between gap-3"
-              title="Spend by capability"
-              description="Ranked by cost"
-            />
-            <BreakdownTable
-              rows={capabilityRows}
-              grandReq={grandReq}
-              grandSpend={grandSpend}
-              onSelectCapability={focusCapability}
-            />
-          </>
-        )}
-      </div>
-
-      <div ref={callsRef} className="scroll-mt-4">
-        <CallsSection
-          query={callsQuery}
-          onQueryChange={setCallsQuery}
-          colorByCapability={colorByCapability}
+        <HomePromoCards
+          user={user}
+          className="order-2 lg:order-none lg:col-span-2"
+          gridClassName="grid w-full grid-cols-2 gap-3"
         />
       </div>
 
-      {user?.id && (
-        <p className="mt-8 break-all font-mono text-[10.5px] text-fg-disabled">
-          Account {user.id}
-        </p>
-      )}
-    </div>
-  );
-}
-
-// ─── Spend by capability ────────────────────────────────────────────────────
-
-/**
- * Shares its vocabulary with the call log below — the same header recipe
- * (sans, 11px, uppercase: column labels are language), the same row rhythm,
- * the same footer band — so the two tables read as one system. The count
- * column is "Calls", the same noun the log uses; the page used to say jobs,
- * requests and calls for the same thing.
- */
-export const TABLE_HEAD_CLASS =
-  "border-b border-hairline bg-dark py-2.5 text-[11px] font-medium uppercase tracking-[0.08em] text-fg-faint";
-export const TABLE_FOOT_CLASS =
-  "border-t border-hairline bg-dark py-2.5 text-[12.5px]";
-
-function BreakdownTable({
-  rows,
-  grandReq,
-  grandSpend,
-  onSelectCapability,
-}: {
-  rows: UsageCapabilityRow[];
-  grandReq: number;
-  grandSpend: number;
-  /** Filters the call list below to this capability, by display name. */
-  onSelectCapability: (capabilityName: string) => void;
-}) {
-  const cols =
-    "grid grid-cols-[minmax(0,1.9fr)_0.8fr_0.9fr_0.9fr_0.8fr] items-center gap-3 px-5";
-
-  return (
-    <div className="overflow-x-auto rounded-md border border-hairline bg-dark-lighter shadow-card">
-      <div className="min-w-[560px]">
-        <div className={`${cols} ${TABLE_HEAD_CLASS}`}>
-          <div>Capability</div>
-          <div className="justify-self-end whitespace-nowrap">Calls</div>
-          <div className="justify-self-end whitespace-nowrap">Trend</div>
-          <div className="justify-self-end whitespace-nowrap">Cost</div>
-          <div className="justify-self-end whitespace-nowrap">Per call</div>
-        </div>
-
-        <div className="max-h-[340px] overflow-y-auto">
-          {rows.map((c) => {
-            const cost = microsToUsd(c.networkFeeUsdMicros);
-            const unitCost = c.requestCount > 0 ? cost / c.requestCount : 0;
-            return (
-              <div
-                key={c.id}
-                className={`${cols} border-b border-hairline py-2.5 text-[12.5px] text-fg-strong transition-colors last:border-b-0 hover:bg-hover`}
-              >
-                <div className="flex min-w-0 items-center gap-2.5">
-                  <span
-                    className="h-2 w-2 shrink-0 rounded-full"
-                    style={{ background: c.color }}
-                    aria-hidden="true"
-                  />
-                  <button
-                    type="button"
-                    onClick={() => onSelectCapability(c.name)}
-                    className="truncate rounded-[3px] text-left font-medium text-fg-strong transition-colors hover:text-fg focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-green-bright/30"
-                    title={`Show calls for ${c.name}`}
-                  >
-                    {c.name}
-                  </button>
-                </div>
-                <div className="justify-self-end font-mono text-[11.5px] tabular-nums text-fg-strong">
-                  {fmt(c.requestCount)}
-                </div>
-                <div className="justify-self-end opacity-90">
-                  <MiniSpark
-                    data={c.data}
-                    color={c.color}
-                    height={16}
-                    width={64}
-                  />
-                </div>
-                <div className="justify-self-end font-mono text-[11.5px] tabular-nums text-fg">
-                  {fmtSpend(cost)}
-                </div>
-                <div className="justify-self-end font-mono text-[11.5px] tabular-nums text-fg-faint">
-                  {unitCost > 0 ? `$${unitCost.toFixed(4)}` : "—"}
-                </div>
-              </div>
-            );
-          })}
+      {walletState.state.status === "error" && (
+        <div className="mt-4 px-3 md:px-7">
+          <UsageLoadError
+            message={walletState.state.message}
+            onRetry={walletState.reload}
+          />
         </div>
+      )}
 
-        {/* Total sits outside the scroll region so it stays put while the
-            rows move under it. */}
-        <div
-          className={`${cols} ${TABLE_FOOT_CLASS} font-medium text-fg-strong`}
-        >
-          <div>Total</div>
-          <div className="justify-self-end font-mono text-[11.5px] tabular-nums text-fg">
-            {fmt(grandReq)}
-          </div>
-          <div />
-          <div className="justify-self-end font-mono text-[11.5px] tabular-nums text-fg">
-            {fmtSpend(grandSpend)}
-          </div>
-          <div />
-        </div>
+      <div className="scroll-mt-4">
+        <CallsSection query={callsQuery} onQueryChange={setCallsQuery} />
       </div>
     </div>
   );
diff --git a/lib/console/dev-mock.ts b/lib/console/dev-mock.ts
index f615c88..ffbdcc9 100644
--- a/lib/console/dev-mock.ts
+++ b/lib/console/dev-mock.ts
@@ -224,26 +224,23 @@ function buildUsage(
   };
 }
 
-/** 30-day totals, shared so the wallet and the usage payload agree. */
-let baseTotals: { networkFee: number; billable: number } | null = null;
-function periodTotals() {
-  if (!baseTotals) {
-    const base = buildUsage(PERIOD_DAYS, false);
-    baseTotals = {
-      networkFee: Number(base.current.networkFeeUsdMicros) / 1_000_000,
-      billable: Number(base.current.endUserBillableUsdMicros) / 1_000_000,
-    };
-  }
-  return baseTotals;
+function devRedirect(path: string | null, requestUrl: string): Response {
+  const safePath = path?.startsWith("/") && !path.startsWith("//") ? path : "/home";
+  const baseUrl = process.env.APP_BASE_URL || requestUrl;
+
+  return new Response(null, {
+    status: 307,
+    headers: { location: new URL(safePath, baseUrl).toString() },
+  });
 }
 
-const INCLUDED_TOTAL_USD = 500;
+const INCLUDED_TOTAL_USD = 250;
 
 function buildWallet() {
   const resetsAt = new Date();
   resetsAt.setUTCDate(resetsAt.getUTCDate() + 11);
-  const consumed = periodTotals().networkFee;
-  const remaining = Math.max(0, INCLUDED_TOTAL_USD - consumed);
+  const consumed = 0;
+  const remaining = INCLUDED_TOTAL_USD;
 
   return {
     clientId: "app_dev_mock_console",
@@ -404,7 +401,7 @@ function buildInvoices() {
 }
 
 /**
- * Per-request rows for the Calls section on /usage.
+ * Per-request rows for the Calls section on /home.
  *
  * Drawn from the same CAPABILITIES mix as the usage totals so the two halves
  * of the page agree with each other: the capability that dominates Spend by
@@ -464,7 +461,8 @@ function buildRequests(limit: number, cursor: string | null) {
  */
 export function devMockResponse(
   pathname: string,
-  search: URLSearchParams
+  search: URLSearchParams,
+  requestUrl: string
 ): Response | null {
   // Auth0's client `useUser()` reads this; a body here makes the app "signed in".
   if (pathname === "/auth/profile") {
@@ -481,7 +479,7 @@ export function devMockResponse(
 
   // Logging out of a fake session would bounce to a real Auth0 tenant.
   if (pathname === "/auth/logout" || pathname === "/auth/login") {
-    return new Response(null, { status: 307, headers: { location: "/home" } });
+    return devRedirect(search.get("returnTo"), requestUrl);
   }
 
   if (pathname === "/api/pymthouse/account-usage") {
diff --git a/lib/console/mock-data.ts b/lib/console/mock-data.ts
index b9b4cde..c3cbfcc 100644
--- a/lib/console/mock-data.ts
+++ b/lib/console/mock-data.ts
@@ -2630,7 +2630,7 @@ export const REMOTE_SIGNERS: RemoteSigner[] = [
   },
 ];
 
-// ─── Account Usage (per-account view under /settings?tab=usage) ─────
+// ─── Account Usage ───────────────────────────────────────────────────
 //
 // The monthly totals below are the canonical account usage figures for mocks.
 // They are derived from REMOTE_SIGNERS.monthlyUsage (Paymthouse + Livepeer Cloud)
@@ -2795,6 +2795,13 @@ function generateRecentRequests(): import("./types").AccountActivityRow[] {
     "key-2": "env-development",
     "key-foundation": "env-development",
   };
+  const formatExpenseDisplay = (display: string) => {
+    if (!display.startsWith("$")) return display;
+    const amount = Number(display.slice(1));
+    if (!Number.isFinite(amount)) return display;
+    if (amount < 0.01) return "<$0.01";
+    return `$${amount.toFixed(2)}`;
+  };
 
   const specs: Spec[] = [
     // Two live sessions streaming right now — no final duration; elapsed ticks
@@ -3153,7 +3160,7 @@ function generateRecentRequests(): import("./types").AccountActivityRow[] {
       signerLabel: SIGNER_LABEL[s.signer],
       tokenId: s.tokenId,
       tokenName: TOKEN_LABEL[s.tokenId] ?? s.tokenId,
-      costDisplay: s.costDisplay,
+      costDisplay: formatExpenseDisplay(s.costDisplay),
     };
   });
 }
diff --git a/lib/console/signed-ticket-activity.ts b/lib/console/signed-ticket-activity.ts
index 0b9b477..25c443a 100644
--- a/lib/console/signed-ticket-activity.ts
+++ b/lib/console/signed-ticket-activity.ts
@@ -37,6 +37,6 @@ export function mapSignedTicketToActivityRow(
     signerLabel: row.appName?.trim() || "PymtHouse",
     tokenId: "",
     tokenName: "",
-    costDisplay: `$${fee}`,
+    costDisplay: fee,
   };
 }
diff --git a/lib/console/usage-capability-display.ts b/lib/console/usage-capability-display.ts
index 748d647..af868d0 100644
--- a/lib/console/usage-capability-display.ts
+++ b/lib/console/usage-capability-display.ts
@@ -179,10 +179,8 @@ export function buildUsageCapabilityRows(input: {
 
 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);
+  if (usd < 0.01) return "<$0.01";
+  return `$${usd.toFixed(2)}`;
 }
 
 export function formatPeriodResetLabel(periodEndIso: string): string {
diff --git a/lib/console/utils.ts b/lib/console/utils.ts
index a06be39..87d63b9 100644
--- a/lib/console/utils.ts
+++ b/lib/console/utils.ts
@@ -114,8 +114,8 @@ export function formatPrice(model: App): string {
 //   Request / Step: one unit per call
 //   Second / Minute: derived from inferenceTime when known, else one unit
 //   M Tokens: one call ≈ ~500 output tokens (rough mock; tokens not tracked)
-// Returned as a short USD string; "<$0.0001" for tiny amounts so the badge
-// never collapses to "$0.00".
+// Returned as a short USD string; sub-penny estimates render as "<$0.01" so
+// expense badges never expose fractional pennies.
 export function estimateCallCost(
   model: App,
   inferenceTimeSeconds?: number
@@ -137,9 +137,7 @@ export function estimateCallCost(
     default:
       cost = amount;
   }
-  if (cost < 0.0001) return "<$0.0001";
-  if (cost < 0.01) return `$${cost.toFixed(4)}`;
-  if (cost < 1) return `$${cost.toFixed(3)}`;
+  if (cost < 0.01) return "<$0.01";
   return `$${cost.toFixed(2)}`;
 }
 

From a37058516cbdf7f731141f26e63ea8a27684e11a Mon Sep 17 00:00:00 2001
From: peace node <peacenode@aol.com>
Date: Thu, 3 Sep 2026 18:37:15 -0400
Subject: [PATCH 4/5] feat(history): add media detail viewer

---
 components/console/CallDetailDrawer.tsx | 652 +++++++++++++++++++-----
 1 file changed, 536 insertions(+), 116 deletions(-)

diff --git a/components/console/CallDetailDrawer.tsx b/components/console/CallDetailDrawer.tsx
index 06e2c1e..585bd0c 100644
--- a/components/console/CallDetailDrawer.tsx
+++ b/components/console/CallDetailDrawer.tsx
@@ -1,35 +1,60 @@
 "use client";
 
-import Drawer from "@/components/design-system/Drawer";
-import EnvTag from "@/components/console/EnvTag";
-import { formatCallMetric, formatRunRelativeTime } from "@/lib/console/utils";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+  type WheelEvent as ReactWheelEvent,
+} from "react";
+import { createPortal } from "react-dom";
+import { Maximize2, MoreVertical, Play, VolumeX } from "lucide-react";
+import { modalityTag } from "@/components/console/CallsTable";
+import { formatCallMetric } from "@/lib/console/utils";
 import type {
   AccountActivityRow,
   AccountActivityStatus,
 } from "@/lib/console/types";
 
-/**
- * CallDetailDrawer — the per-call inspector. A right-side slide-over opened from
- * any call row (`/calls?request={id}`): status, the key metrics, a timing
- * trace, and the request/response payloads (batch) or a session summary (live).
- * Payloads are mock, derived from the pipeline, until the metering API lands.
- */
-
 const STATUS_LABEL: Record<AccountActivityStatus, string> = {
   active: "Streaming",
   success: "Succeeded",
   failed: "Failed",
   timeout: "Timed out",
 };
-const STATUS_DOT: Record<AccountActivityStatus, string> = {
-  active: "bg-warm",
-  success: "bg-green-bright",
-  failed: "bg-red-400",
-  timeout: "bg-warm",
+
+type MediaKind = "image" | "video" | "audio" | "text" | "json";
+
+type MediaSpec = {
+  kind: MediaKind;
+  title: string;
+  label: string;
+  format: string;
+  metricLabel: string;
+  metricValue: string;
+  source: string;
+  imageUrl?: string;
+  text?: string;
+  json?: unknown;
 };
 
-// Mock request/response shaped by the pipeline, so the inspector reads like a
-// real call without a backend.
+const AUDIO_BARS = Array.from({ length: 64 }, (_, i) => {
+  const envelope = Math.sin((i / 64) * Math.PI);
+  const detail = Math.sin(i * 1.3) * 0.32 + Math.sin(i * 0.45) * 0.22;
+  return Math.max(12, Math.round((0.18 + envelope * 0.72 + detail * 0.2) * 96));
+});
+
+function previewSeed(row: AccountActivityRow): string {
+  return encodeURIComponent(
+    `${row.id}-${row.pipeline}`.replace(/[^a-z0-9_-]+/gi, "-")
+  );
+}
+
+function previewImageUrl(row: AccountActivityRow, size = "1200/900"): string {
+  return `https://picsum.photos/seed/${previewSeed(row)}/${size}`;
+}
+
 function samplePayload(row: AccountActivityRow): {
   request: unknown;
   response: unknown;
@@ -48,6 +73,7 @@ function samplePayload(row: AccountActivityRow): {
 
   switch (row.pipeline) {
     case "text-to-image":
+    case "image-to-image":
       return {
         request: {
           prompt: "a neon-lit city street at night, cinematic",
@@ -57,12 +83,46 @@ function samplePayload(row: AccountActivityRow): {
         response: failed
           ? error
           : {
-              image_url: "https://gateway.livepeer/out/41207.png",
+              image_url: previewImageUrl(row, "1024/1024"),
               width: 1024,
               height: 1024,
             },
       };
+    case "image-to-video":
+    case "text-to-video":
+    case "video-to-video":
+    case "live-video-to-video":
+      return {
+        request: {
+          prompt: "wide cinematic production frame, soft natural motion",
+          duration_s: 6,
+        },
+        response: failed
+          ? error
+          : {
+              video_url: "https://gateway.livepeer/out/render.mp4",
+              width: 1920,
+              height: 1080,
+              duration_s: 6,
+            },
+      };
+    case "transcoding":
+    case "live-transcoding":
+      return {
+        request: {
+          source_url: "https://gateway.livepeer/in/feed.mp4",
+          profiles: ["1080p", "720p", "480p"],
+        },
+        response: failed
+          ? error
+          : {
+              playback_url: "https://gateway.livepeer/out/master.m3u8",
+              width: 1920,
+              height: 1080,
+            },
+      };
     case "language":
+    case "text-generation":
       return {
         request: {
           messages: [
@@ -76,7 +136,7 @@ function samplePayload(row: AccountActivityRow): {
         response: failed
           ? error
           : {
-              text: "• Decentralized GPU network…\n• Pay-per-use inference…\n• Open, permissionless apps.",
+              text: "- Decentralized GPU network\n- Pay-per-use inference\n- Open, permissionless apps",
               tokens: 187,
             },
       };
@@ -89,11 +149,12 @@ function samplePayload(row: AccountActivityRow): {
         response: failed
           ? error
           : {
-              text: "Welcome back to the show — today we're talking real-time AI video.",
+              text: "Welcome back to the show. Today we're talking real-time AI video.",
               duration_s: 12.4,
             },
       };
     case "text-to-speech":
+    case "text-to-audio":
       return {
         request: { text: "Hello from the Livepeer network.", voice: "am_onyx" },
         response: failed
@@ -120,136 +181,495 @@ function samplePayload(row: AccountActivityRow): {
       };
     default:
       return {
-        request: { input: "…", pipeline: row.pipeline },
-        response: failed ? error : { output: "…", pipeline: row.pipeline },
+        request: { input: "...", pipeline: row.pipeline },
+        response: failed ? error : { output: "...", pipeline: row.pipeline },
       };
   }
 }
 
-function Json({ value }: { value: unknown }) {
+function readText(value: unknown): string | undefined {
+  if (!value || typeof value !== "object") return undefined;
+  const text = (value as { text?: unknown }).text;
+  return typeof text === "string" ? text : undefined;
+}
+
+function readTokenCount(value: unknown): string {
+  if (!value || typeof value !== "object") return "Text";
+  const tokens = (value as { tokens?: unknown }).tokens;
+  return typeof tokens === "number" ? `${tokens} tokens` : "Text";
+}
+
+function mediaSpecForRow(row: AccountActivityRow): MediaSpec {
+  const payload = samplePayload(row);
+  const pipeline = row.pipeline.toLowerCase();
+  const failed = row.status === "failed" || row.status === "timeout";
+  const source = row.signerLabel || "Livepeer";
+
+  if (failed) {
+    return {
+      kind: "json",
+      title: `${row.model} request`,
+      label: "Error",
+      format: "JSON",
+      metricLabel: "Result",
+      metricValue: STATUS_LABEL[row.status],
+      source,
+      json: payload.response,
+    };
+  }
+
+  if (pipeline.includes("video") || pipeline.includes("transcoding")) {
+    return {
+      kind: "video",
+      title:
+        row.kind === "live" ? `${row.model} session` : `${row.model} video`,
+      label: "Video",
+      format: pipeline.includes("transcoding") ? "HLS" : "MP4",
+      metricLabel: "Dimensions",
+      metricValue: "1920 x 1080",
+      source,
+      imageUrl: previewImageUrl(row, "1280/720"),
+    };
+  }
+
+  if (pipeline.includes("image")) {
+    return {
+      kind: "image",
+      title: `${row.model} image`,
+      label: "Image",
+      format: "PNG",
+      metricLabel: "Dimensions",
+      metricValue: "1024 x 1024",
+      source,
+      imageUrl: previewImageUrl(row, "1024/1024"),
+    };
+  }
+
+  if (pipeline.includes("audio") || pipeline.includes("speech")) {
+    return {
+      kind: "audio",
+      title: `${row.model} audio`,
+      label: "Audio",
+      format: "WAV",
+      metricLabel: "Duration",
+      metricValue:
+        row.pipeline === "audio-to-text" ? "12.4s source" : "2.1s output",
+      source,
+    };
+  }
+
+  if (
+    pipeline === "language" ||
+    pipeline === "llm" ||
+    pipeline.includes("text")
+  ) {
+    const text = readText(payload.response) ?? JSON.stringify(payload.response);
+    return {
+      kind: "text",
+      title: `${row.model} response`,
+      label: "Text",
+      format: "TXT",
+      metricLabel: "Length",
+      metricValue: readTokenCount(payload.response),
+      source,
+      text,
+    };
+  }
+
+  return {
+    kind: "json",
+    title: `${row.model} response`,
+    label: "Data",
+    format: "JSON",
+    metricLabel: "Result",
+    metricValue: STATUS_LABEL[row.status],
+    source,
+    json: payload.response,
+  };
+}
+
+function formatTimestamp(iso: string): string {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return "";
+  return new Intl.DateTimeFormat(undefined, {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  }).format(date);
+}
+
+function DetailRow({
+  label,
+  children,
+}: {
+  label: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className="grid grid-cols-[86px_minmax(0,1fr)] items-start gap-4 border-b border-hairline py-3 text-sm">
+      <dt className="text-fg-muted">{label}</dt>
+      <dd className="min-w-0 break-words text-right text-fg">{children}</dd>
+    </div>
+  );
+}
+
+function CapabilityChip({ children }: { children: ReactNode }) {
   return (
-    <pre className="overflow-x-auto rounded-md border border-hairline bg-dark px-3 py-2.5 font-mono text-[11.5px] leading-[1.6] text-fg-strong">
-      {JSON.stringify(value, null, 2)}
-    </pre>
+    <span className="inline-flex max-w-full items-center rounded-[5px] bg-foreground/5 px-2 py-0.5 text-sm text-fg">
+      <span className="truncate">{children}</span>
+    </span>
   );
 }
 
-function Section({
+function ImagePreview({
+  src,
   title,
-  children,
 }: {
+  src: string;
   title: string;
-  children: React.ReactNode;
 }) {
+  const [failed, setFailed] = useState(false);
+
+  useEffect(() => {
+    setFailed(false);
+  }, [src]);
+
+  if (failed) {
+    return (
+      <div className="flex h-full w-full items-center justify-center text-sm text-white/50">
+        Preview unavailable
+      </div>
+    );
+  }
+
+  return (
+    <img
+      src={src}
+      alt={title}
+      decoding="async"
+      onError={() => setFailed(true)}
+      className="h-full w-full object-contain object-top lg:object-center"
+    />
+  );
+}
+
+function VideoPreview({ poster }: { poster?: string }) {
+  return (
+    <div className="relative h-full w-full overflow-hidden bg-background">
+      {poster && (
+        <img
+          src={poster}
+          alt=""
+          decoding="async"
+          aria-hidden="true"
+          className="absolute inset-0 h-full w-full object-cover opacity-20 blur-sm"
+        />
+      )}
+      <div className="absolute inset-0 bg-background/80" />
+      <div className="absolute inset-x-5 bottom-5 text-white/80">
+        <div className="flex items-center gap-3 text-sm">
+          <Play className="h-4 w-4 fill-current" aria-hidden="true" />
+          <span>0:00</span>
+          <div className="ml-auto flex items-center gap-5 text-white/45">
+            <VolumeX className="h-4 w-4" aria-hidden="true" />
+            <Maximize2 className="h-4 w-4" aria-hidden="true" />
+            <MoreVertical className="h-4 w-4" aria-hidden="true" />
+          </div>
+        </div>
+        <div className="mt-5 h-1 overflow-hidden rounded-full bg-white/20">
+          <div className="h-full w-[8%] rounded-full bg-white/65" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function AudioPreview() {
+  return (
+    <div className="flex w-full max-w-3xl flex-col gap-5 rounded-[6px] bg-black/20 px-8 py-7">
+      <div className="flex h-28 items-center gap-1.5">
+        {AUDIO_BARS.map((height, i) => (
+          <span
+            key={i}
+            className="w-1 flex-1 rounded-full bg-white/45"
+            style={{ height }}
+            aria-hidden="true"
+          />
+        ))}
+      </div>
+      <div className="flex items-center gap-3 text-sm text-white/70">
+        <Play className="h-4 w-4 fill-current" aria-hidden="true" />
+        <span>0:00</span>
+        <div className="h-1 flex-1 rounded-full bg-white/15" />
+      </div>
+    </div>
+  );
+}
+
+function TextPreview({ text }: { text: string }) {
+  return (
+    <pre className="max-h-full w-full max-w-3xl overflow-auto whitespace-pre-wrap rounded-[6px] bg-black/20 p-6 text-left text-sm leading-6 text-white/75">
+      {text}
+    </pre>
+  );
+}
+
+function JsonPreview({ value }: { value: unknown }) {
   return (
-    <section>
-      <h3 className="mb-2 font-mono text-[10px] uppercase tracking-[0.08em] text-fg-faint">
-        {title}
-      </h3>
-      {children}
-    </section>
+    <pre className="max-h-full w-full max-w-3xl overflow-auto whitespace-pre-wrap rounded-[6px] bg-black/20 p-6 text-left font-mono text-xs leading-6 text-white/70">
+      {JSON.stringify(value, null, 2)}
+    </pre>
   );
 }
 
-function Meta({ label, value }: { label: string; value: React.ReactNode }) {
+function MediaStage({ media }: { media: MediaSpec }) {
   return (
-    <div className="min-w-0">
-      <dt className="font-mono text-[10px] uppercase tracking-[0.06em] text-fg-faint">
-        {label}
-      </dt>
-      <dd className="mt-0.5 truncate font-mono text-[12px] tabular-nums text-fg-strong">
-        {value}
-      </dd>
+    <div className="relative flex aspect-video w-full min-h-0 min-w-0 items-start justify-center overflow-auto bg-background lg:aspect-auto lg:h-full lg:items-center">
+      {media.kind === "image" && media.imageUrl && (
+        <ImagePreview src={media.imageUrl} title={media.title} />
+      )}
+      {media.kind === "video" && <VideoPreview poster={media.imageUrl} />}
+      {media.kind === "audio" && <AudioPreview />}
+      {media.kind === "text" && <TextPreview text={media.text ?? ""} />}
+      {media.kind === "json" && <JsonPreview value={media.json} />}
     </div>
   );
 }
 
+function canScrollWithin(target: EventTarget, deltaY: number): boolean {
+  if (!(target instanceof HTMLElement)) return false;
+  const scrollTarget = target.closest<HTMLElement>("[data-detail-scroll]");
+  if (!scrollTarget) return false;
+  if (scrollTarget.scrollHeight <= scrollTarget.clientHeight) return false;
+
+  if (deltaY > 0) {
+    return (
+      scrollTarget.scrollTop + scrollTarget.clientHeight <
+      scrollTarget.scrollHeight - 1
+    );
+  }
+
+  return scrollTarget.scrollTop > 0;
+}
+
+function HistoryEntryRail({
+  rows,
+  activeId,
+  onSelect,
+}: {
+  rows: AccountActivityRow[];
+  activeId: string;
+  onSelect?: (row: AccountActivityRow) => void;
+}) {
+  const activeRef = useRef<HTMLButtonElement | null>(null);
+
+  useEffect(() => {
+    activeRef.current?.scrollIntoView({ block: "nearest" });
+  }, [activeId, rows.length]);
+
+  if (!onSelect || rows.length <= 1) return null;
+
+  return (
+    <aside
+      className="hidden h-full w-10 shrink-0 overflow-y-auto py-1 lg:block"
+      aria-label="History entries"
+    >
+      <div className="flex min-h-full flex-col items-end gap-px">
+        {rows.map((entry, index) => {
+          const active = entry.id === activeId;
+          return (
+            <button
+              key={entry.id}
+              ref={active ? activeRef : undefined}
+              type="button"
+              onClick={() => onSelect(entry)}
+              aria-label={`Open history entry ${index + 1}`}
+              aria-current={active ? "true" : undefined}
+              title={`${entry.model} ${entry.costDisplay}`}
+              className="group grid h-3 w-9 shrink-0 place-items-center justify-items-end rounded-[3px] focus:outline-none"
+            >
+              <span
+                className={`h-0.5 rounded-full transition-all ${
+                  active
+                    ? "w-7 bg-white"
+                    : "w-5 bg-white/40 group-hover:w-6 group-hover:bg-white/70"
+                }`}
+                aria-hidden="true"
+              />
+            </button>
+          );
+        })}
+      </div>
+    </aside>
+  );
+}
+
 export default function CallDetailDrawer({
   row,
+  rows = [],
   open,
   onClose,
+  onSelectRow,
 }: {
   row: AccountActivityRow | null;
+  rows?: AccountActivityRow[];
   open: boolean;
   onClose: () => void;
+  onSelectRow?: (row: AccountActivityRow) => void;
 }) {
-  const live = row?.kind === "live";
+  const [mounted, setMounted] = useState(false);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const previousActiveRef = useRef<HTMLElement | null>(null);
+  const wheelDeltaRef = useRef(0);
+  const lastWheelNavigationRef = useRef(0);
+  const media = row ? mediaSpecForRow(row) : null;
 
-  return (
-    <Drawer
-      side="right"
-      open={open}
-      onClose={onClose}
-      title={row?.model ?? "Call"}
-      ariaLabel="Call detail"
+  useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    const original = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = original;
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [open, onClose]);
+
+  useEffect(() => {
+    if (open) {
+      previousActiveRef.current = document.activeElement as HTMLElement | null;
+      requestAnimationFrame(() => panelRef.current?.focus({ preventScroll: true }));
+    } else if (previousActiveRef.current) {
+      previousActiveRef.current.focus?.({ preventScroll: true });
+      previousActiveRef.current = null;
+    }
+  }, [open]);
+
+  const selectAdjacentRow = useCallback(
+    (offset: number) => {
+      if (!row || !onSelectRow || rows.length <= 1) return;
+      const currentIndex = rows.findIndex((entry) => entry.id === row.id);
+      if (currentIndex === -1) return;
+
+      const nextIndex = Math.max(
+        0,
+        Math.min(rows.length - 1, currentIndex + offset)
+      );
+      if (nextIndex === currentIndex) return;
+
+      const nextRow = rows[nextIndex];
+      if (nextRow) onSelectRow(nextRow);
+    },
+    [onSelectRow, row, rows]
+  );
+
+  const handleWheel = (event: ReactWheelEvent<HTMLDivElement>) => {
+    if (
+      !onSelectRow ||
+      rows.length <= 1 ||
+      window.matchMedia("(max-width: 1023px)").matches ||
+      canScrollWithin(event.target, event.deltaY)
+    ) {
+      return;
+    }
+
+    event.preventDefault();
+    wheelDeltaRef.current += event.deltaY;
+    if (Math.abs(wheelDeltaRef.current) < 28) return;
+
+    const now = performance.now();
+    if (now - lastWheelNavigationRef.current < 90) return;
+
+    lastWheelNavigationRef.current = now;
+    selectAdjacentRow(wheelDeltaRef.current > 0 ? 1 : -1);
+    wheelDeltaRef.current = 0;
+  };
+
+  if (!mounted) return null;
+
+  return createPortal(
+    <div
+      className={`fixed inset-0 z-[100] flex items-center justify-center bg-black p-3 pt-14 transition-opacity duration-200 sm:p-6 sm:pt-16 ${
+        open ? "visible opacity-100" : "invisible opacity-0"
+      }`}
+      aria-hidden={!open}
     >
-      {row && (
-        <div className="flex flex-col gap-5 px-5 py-5">
-          {/* Status + facets */}
-          <div className="flex flex-wrap items-center gap-2 text-[12px] text-fg-strong">
-            <span className="inline-flex items-center gap-1.5">
-              <span
-                className={`h-2 w-2 rounded-full ${STATUS_DOT[row.status]}`}
-                aria-hidden="true"
-              />
-              {STATUS_LABEL[row.status]}
-            </span>
-            <span className="text-fg-disabled">·</span>
-            <span
-              className={`rounded-[3px] border px-1.5 py-px font-mono text-[10px] font-medium uppercase tracking-[0.03em] ${
-                live
-                  ? "border-blue-bright/25 bg-blue-bright/10 text-blue-bright"
-                  : "border-hairline text-fg-faint"
-              }`}
-            >
-              {live ? "Live" : "Batch"}
-            </span>
-            <EnvTag environmentId={row.environmentId} />
-            <span className="ml-auto font-mono text-[11px] text-fg-faint">
-              {formatRunRelativeTime(row.timestamp)}
-            </span>
-          </div>
+      <button
+        type="button"
+        tabIndex={-1}
+        aria-label="Close detail"
+        onClick={onClose}
+        className="absolute inset-0 h-full w-full cursor-default bg-transparent"
+      />
+      <button
+        type="button"
+        onClick={onClose}
+        className="absolute left-1/2 top-3 z-20 inline-flex -translate-x-1/2 items-center gap-1.5 text-sm font-medium text-white transition-colors hover:text-white/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 sm:top-4"
+      >
+        <span aria-hidden="true">&larr;</span>
+        Return to dashboard
+      </button>
 
-          {/* Key metrics */}
-          <dl className="grid grid-cols-2 gap-x-4 gap-y-3">
-            <Meta label="Request ID" value={row.id} />
-            <Meta label="Pipeline" value={row.pipeline} />
-            <Meta
-              label={live ? "Duration" : "Latency"}
-              value={formatCallMetric(row)}
-            />
-            <Meta label="Cost" value={row.costDisplay} />
-            <Meta
-              label="Caller"
-              value={`${row.tokenName} · ${row.signerLabel}`}
-            />
-            <Meta label="When" value={formatRunRelativeTime(row.timestamp)} />
-          </dl>
-
-          {live ? (
-            <Section title="Session">
-              <Json
-                value={{
-                  transport:
-                    row.pipeline === "live-transcoding" ? "HLS" : "trickle",
-                  channels: ["video", "events", "data"],
-                  status: row.status === "active" ? "streaming" : "ended",
-                  duration: formatCallMetric(row),
-                }}
-              />
-            </Section>
-          ) : (
-            <>
-              <Section title="Request">
-                <Json value={samplePayload(row).request} />
-              </Section>
-              <Section title="Response">
-                <Json value={samplePayload(row).response} />
-              </Section>
-            </>
-          )}
+      {row && media && (
+        <div
+          ref={panelRef}
+          role="dialog"
+          aria-modal="true"
+          aria-label={`${row.model} detail`}
+          tabIndex={-1}
+          onWheel={handleWheel}
+          className={`relative z-10 flex max-h-[calc(100dvh-68px)] w-[min(1240px,calc(100vw-32px))] items-stretch gap-3 overflow-y-auto outline-none transition-[opacity,transform] duration-200 ease-out sm:max-h-[calc(100dvh-96px)] lg:h-[calc(100dvh-96px)] lg:max-h-[760px] lg:overflow-visible ${
+            open ? "scale-100 opacity-100" : "scale-[0.98] opacity-0"
+          }`}
+        >
+          <div className="grid h-auto min-w-0 flex-1 grid-rows-[auto_auto] overflow-hidden rounded-sm bg-background shadow-2xl shadow-black/55 lg:h-full lg:grid-cols-[minmax(0,1fr)_350px] lg:grid-rows-none">
+            <MediaStage media={media} />
+
+            <aside className="flex min-h-0 flex-col border-t border-hairline bg-background lg:border-l lg:border-t-0">
+              <dl className="min-h-0 overflow-y-auto px-5 py-5" data-detail-scroll>
+                <DetailRow label="Capability">
+                  <CapabilityChip>{row.model}</CapabilityChip>
+                </DetailRow>
+                <DetailRow label="Modality">
+                  <CapabilityChip>{modalityTag(row.pipeline)}</CapabilityChip>
+                </DetailRow>
+                <DetailRow label="Format">{media.format}</DetailRow>
+                <DetailRow label={media.metricLabel}>
+                  {media.metricValue}
+                </DetailRow>
+                <DetailRow label="Source">{media.source}</DetailRow>
+                <DetailRow label="Status">{STATUS_LABEL[row.status]}</DetailRow>
+                <DetailRow label={row.kind === "live" ? "Duration" : "Latency"}>
+                  {formatCallMetric(row)}
+                </DetailRow>
+                <DetailRow label="Cost">{row.costDisplay}</DetailRow>
+                <DetailRow label="Time">
+                  {formatTimestamp(row.timestamp)}
+                </DetailRow>
+              </dl>
+            </aside>
+          </div>
+          <HistoryEntryRail
+            rows={rows}
+            activeId={row.id}
+            onSelect={onSelectRow}
+          />
         </div>
       )}
-    </Drawer>
+    </div>,
+    document.body
   );
 }

From b13cef50d9c65de0d4dfb8e3752107681cb7405b Mon Sep 17 00:00:00 2001
From: peace node <peacenode@aol.com>
Date: Thu, 3 Sep 2026 18:37:43 -0400
Subject: [PATCH 5/5] feat(install): add MCP install guide

---
 app/(app)/install/page.tsx | 591 +++++++++++++++++++++++++++++++++++++
 1 file changed, 591 insertions(+)
 create mode 100644 app/(app)/install/page.tsx

diff --git a/app/(app)/install/page.tsx b/app/(app)/install/page.tsx
new file mode 100644
index 0000000..5a8ef47
--- /dev/null
+++ b/app/(app)/install/page.tsx
@@ -0,0 +1,591 @@
+"use client";
+
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type PointerEvent as ReactPointerEvent,
+  type ReactNode,
+} from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/components/console/AuthContext";
+import CopyButton from "@/components/console/CopyButton";
+import HarnessLogo from "@/components/console/HarnessLogo";
+import SectionHeader from "@/components/console/SectionHeader";
+import { MCP_SERVER_URL } from "@/lib/constants";
+
+type HarnessKey = "claude" | "claude-code" | "chatgpt" | "hermes";
+
+type CopyValue = {
+  value: string;
+  ariaLabel: string;
+};
+
+type InstallStepConfig = {
+  title: string;
+  body: string;
+  copy?: CopyValue;
+};
+
+type InstallTarget = {
+  key: HarnessKey;
+  label: string;
+  steps: InstallStepConfig[];
+};
+
+type WheelImage = {
+  src: string;
+  alt: string;
+};
+
+const CLAUDE_CODE_COMMAND = `claude mcp add --transport http livepeer ${MCP_SERVER_URL}`;
+const CHATGPT_CODEX_PROMPT = `Codex, add the Livepeer MCP connector to ChatGPT desktop. Name it Livepeer and use this server URL: ${MCP_SERVER_URL}`;
+const HERMES_CODEX_PROMPT = `Codex, add the Livepeer MCP connector to Hermes. Name it Livepeer and use this server URL: ${MCP_SERVER_URL}`;
+const WHEEL_IMAGE_REPEAT = 1;
+const WHEEL_CARD_WIDTH = 118;
+const WHEEL_CARD_HEIGHT = WHEEL_CARD_WIDTH * (4 / 3);
+const WHEEL_RADIUS_X = 226;
+const WHEEL_RADIUS_Y = 54;
+const WHEEL_SPIN_SPEED = 9;
+const WHEEL_SCROLL_BOOST_FACTOR = 0.8;
+const WHEEL_SCROLL_BOOST_MAX = 180;
+const WHEEL_SCROLL_BOOST_DECAY = 0.92;
+const WHEEL_CARD_TILT_DEGREES = 5;
+
+const WHEEL_IMAGES: WheelImage[] = [
+  {
+    src: "/images/console/explore/stable-video-diffusion.webp",
+    alt: "Stable Video Diffusion preview",
+  },
+  {
+    src: "/images/console/explore/img2img-sdxl.webp",
+    alt: "Image editing preview",
+  },
+  {
+    src: "/images/console/explore/live-video-to-video.webp",
+    alt: "Live video preview",
+  },
+  {
+    src: "/images/console/explore/flux-schnell.webp",
+    alt: "Flux Schnell preview",
+  },
+  {
+    src: "/images/console/daydream.png",
+    alt: "Daydream preview",
+  },
+  {
+    src: "/images/console/explore/sdxl-turbo.webp",
+    alt: "SDXL Turbo preview",
+  },
+  {
+    src: "/images/console/explore/real-esrgan-4x.webp",
+    alt: "Image upscale preview",
+  },
+];
+
+const TARGETS: InstallTarget[] = [
+  {
+    key: "claude",
+    label: "Claude",
+    steps: [
+      {
+        title: "Add the Livepeer MCP URL",
+        body: "Open Claude connector settings, name the server Livepeer, and paste this URL.",
+        copy: {
+          value: MCP_SERVER_URL,
+          ariaLabel: "Copy Claude MCP server URL",
+        },
+      },
+      {
+        title: "Connect and start",
+        body: "Sign in when the browser opens, then ask Claude to create or edit production media.",
+      },
+    ],
+  },
+  {
+    key: "claude-code",
+    label: "Claude Code",
+    steps: [
+      {
+        title: "Run the Claude Code command",
+        body: "Paste this into your terminal once to add Livepeer as an MCP server. Use /mcp inside Claude Code if it asks you to finish sign-in.",
+        copy: {
+          value: CLAUDE_CODE_COMMAND,
+          ariaLabel: "Copy Claude Code install command",
+        },
+      },
+      {
+        title: "Connect and start",
+        body: "Start a Claude Code session and ask Livepeer for image, video, audio, or rendering work.",
+      },
+    ],
+  },
+  {
+    key: "chatgpt",
+    label: "ChatGPT",
+    steps: [
+      {
+        title: "Copy and run the Codex prompt",
+        body: "ChatGPT MCP connector setup works in the desktop app only. Open ChatGPT desktop, start Codex, paste the prompt, and approve the connector changes.",
+        copy: {
+          value: CHATGPT_CODEX_PROMPT,
+          ariaLabel: "Copy ChatGPT Codex connector prompt",
+        },
+      },
+      {
+        title: "Connect and start",
+        body: "Sign in, then bring Livepeer production tools into your ChatGPT workflows.",
+      },
+    ],
+  },
+  {
+    key: "hermes",
+    label: "Hermes",
+    steps: [
+      {
+        title: "Copy and run the Codex prompt",
+        body: "This asks Codex to add the Livepeer MCP server for you. Open Hermes, start Codex, paste the prompt, and approve the connector changes.",
+        copy: {
+          value: HERMES_CODEX_PROMPT,
+          ariaLabel: "Copy Hermes Codex connector prompt",
+        },
+      },
+      {
+        title: "Connect and start",
+        body: "Sign in, then start generating production assets from Hermes.",
+      },
+    ],
+  },
+];
+
+function TargetIcon({ target }: { target: HarnessKey }) {
+  if (target === "claude" || target === "claude-code") {
+    return <HarnessLogo id="claude" className="h-4 w-4" />;
+  }
+  if (target === "chatgpt") {
+    return <HarnessLogo id="codex" className="h-4 w-4" />;
+  }
+  return <HarnessLogo id="hermes" className="h-4 w-4" />;
+}
+
+function InstallImageWheel() {
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const itemRefs = useRef<Array<HTMLDivElement | null>>([]);
+  const rotationRef = useRef(0);
+  const momentumRef = useRef(0);
+  const scrollBoostRef = useRef(0);
+  const previousScrollYRef = useRef(0);
+  const isDraggingRef = useRef(false);
+  const dragPointerIdRef = useRef(-1);
+  const previousPointerXRef = useRef(0);
+  const inViewRef = useRef(true);
+  const wheelItems = useMemo(
+    () => Array.from({ length: WHEEL_IMAGE_REPEAT }).flatMap(() => WHEEL_IMAGES),
+    []
+  );
+
+  const renderWheel = useCallback(
+    (rotation: number) => {
+      const root = rootRef.current;
+      const itemCount = wheelItems.length;
+      if (!root || itemCount === 0) return;
+
+      const viewportScale = Math.min(
+        1,
+        Math.max(0.66, root.clientWidth / 760)
+      );
+      const cardWidth = WHEEL_CARD_WIDTH * viewportScale;
+      const cardHeight = WHEEL_CARD_HEIGHT * viewportScale;
+      const radiusX = WHEEL_RADIUS_X * viewportScale;
+      const radiusY = WHEEL_RADIUS_Y * viewportScale;
+
+      itemRefs.current.forEach((node, index) => {
+        if (!node) return;
+        const radians =
+          (index / itemCount) * Math.PI * 2 + (rotation * Math.PI) / 180;
+        const depth = (Math.sin(radians) + 1) / 2;
+        const x = Math.cos(radians) * radiusX * (0.74 + depth * 0.26);
+        const y = Math.sin(radians) * radiusY * (0.88 + depth * 0.12);
+        const scale = 0.72 + depth * 0.28;
+        const shadowY = 4 + depth * 8;
+        const shadowBlur = 14 + depth * 18;
+
+        node.style.width = `${cardWidth}px`;
+        node.style.height = `${cardHeight}px`;
+        node.style.marginLeft = `${-cardWidth / 2}px`;
+        node.style.marginTop = `${-cardHeight / 2}px`;
+        node.style.transform = `translate3d(${x}px, ${y}px, 0) scale(${scale}) rotate(${WHEEL_CARD_TILT_DEGREES}deg)`;
+        node.style.removeProperty("opacity");
+        node.style.zIndex = `${Math.round(depth * 1000)}`;
+        node.style.boxShadow = `0 ${shadowY}px ${shadowBlur}px rgba(0,0,0,${0.05 + depth * 0.08})`;
+      });
+    },
+    [wheelItems.length]
+  );
+
+  useEffect(() => {
+    itemRefs.current.length = wheelItems.length;
+    renderWheel(rotationRef.current);
+  }, [renderWheel, wheelItems.length]);
+
+  useEffect(() => {
+    const reducedMotion = window.matchMedia(
+      "(prefers-reduced-motion: reduce)"
+    ).matches;
+    let animationFrame = 0;
+    let lastTime = 0;
+    let running = false;
+
+    const tick = (now: number) => {
+      if (!lastTime) lastTime = now;
+      const delta = (now - lastTime) / 1000;
+      lastTime = now;
+
+      if (!isDraggingRef.current && inViewRef.current && !reducedMotion) {
+        rotationRef.current += WHEEL_SPIN_SPEED * delta;
+        rotationRef.current += scrollBoostRef.current * delta;
+        rotationRef.current += momentumRef.current;
+        momentumRef.current *= 0.95;
+        scrollBoostRef.current *= WHEEL_SCROLL_BOOST_DECAY;
+      }
+
+      renderWheel(rotationRef.current);
+      if (inViewRef.current) {
+        animationFrame = window.requestAnimationFrame(tick);
+      } else {
+        animationFrame = 0;
+        running = false;
+      }
+    };
+
+    const start = () => {
+      if (reducedMotion || running || !inViewRef.current) return;
+      window.cancelAnimationFrame(animationFrame);
+      lastTime = 0;
+      running = true;
+      animationFrame = window.requestAnimationFrame(tick);
+    };
+
+    const stop = () => {
+      window.cancelAnimationFrame(animationFrame);
+      animationFrame = 0;
+      running = false;
+    };
+
+    const handleScroll = () => {
+      if (!inViewRef.current || reducedMotion) return;
+      const scrollY = window.scrollY;
+      const delta = Math.abs(scrollY - previousScrollYRef.current);
+      previousScrollYRef.current = scrollY;
+      if (delta > 0) {
+        scrollBoostRef.current = Math.min(
+          scrollBoostRef.current + delta * WHEEL_SCROLL_BOOST_FACTOR,
+          WHEEL_SCROLL_BOOST_MAX
+        );
+        start();
+      }
+    };
+
+    const handleResize = () => renderWheel(rotationRef.current);
+
+    previousScrollYRef.current = window.scrollY;
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    window.addEventListener("resize", handleResize);
+
+    const observer =
+      rootRef.current && "IntersectionObserver" in window
+        ? new IntersectionObserver(
+            ([entry]) => {
+              inViewRef.current = entry.isIntersecting;
+              if (entry.isIntersecting) {
+                start();
+              } else {
+                stop();
+              }
+            },
+            { threshold: 0.1 }
+          )
+        : null;
+
+    if (observer && rootRef.current) observer.observe(rootRef.current);
+
+    renderWheel(rotationRef.current);
+    start();
+
+    return () => {
+      stop();
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("resize", handleResize);
+      observer?.disconnect();
+    };
+  }, [renderWheel]);
+
+  const handlePointerDown = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      if (event.pointerType === "touch") return;
+      isDraggingRef.current = true;
+      dragPointerIdRef.current = event.pointerId;
+      previousPointerXRef.current = event.clientX;
+      momentumRef.current = 0;
+      event.currentTarget.setPointerCapture(event.pointerId);
+      event.currentTarget.style.cursor = "grabbing";
+    },
+    []
+  );
+
+  const handlePointerMove = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      if (
+        !isDraggingRef.current ||
+        dragPointerIdRef.current !== event.pointerId
+      ) {
+        return;
+      }
+
+      const delta = event.clientX - previousPointerXRef.current;
+      previousPointerXRef.current = event.clientX;
+      rotationRef.current += delta * 0.28;
+      momentumRef.current = delta * 0.03;
+      renderWheel(rotationRef.current);
+    },
+    [renderWheel]
+  );
+
+  const handlePointerUp = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      if (dragPointerIdRef.current !== event.pointerId) return;
+      isDraggingRef.current = false;
+      dragPointerIdRef.current = -1;
+      event.currentTarget.style.cursor = "grab";
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+    },
+    []
+  );
+
+  return (
+    <section
+      className="w-full max-w-[900px] overflow-visible py-2"
+      aria-hidden="true"
+    >
+      <div
+        ref={rootRef}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={handlePointerUp}
+        onPointerCancel={handlePointerUp}
+        className="relative mx-auto h-[185px] w-full cursor-grab touch-pan-y select-none overflow-visible sm:h-[240px] md:h-[260px]"
+        style={{ perspective: "900px" }}
+      >
+        {wheelItems.map((image, index) => (
+          <div
+            key={`${image.src}-${index}`}
+            ref={(node) => {
+              itemRefs.current[index] = node;
+            }}
+            className="absolute left-1/2 top-1/2 aspect-[3/4] overflow-hidden rounded-[12px] bg-muted ring-1 ring-border/40 will-change-transform sm:rounded-[18px] md:rounded-[22px]"
+            style={{
+              width: WHEEL_CARD_WIDTH,
+              height: WHEEL_CARD_HEIGHT,
+              marginLeft: -WHEEL_CARD_WIDTH / 2,
+              marginTop: -WHEEL_CARD_HEIGHT / 2,
+              transformStyle: "preserve-3d",
+              backfaceVisibility: "hidden",
+            }}
+          >
+            <img
+              src={image.src}
+              alt={image.alt}
+              draggable={false}
+              loading={index < WHEEL_IMAGES.length ? "eager" : "lazy"}
+              decoding="async"
+              className="pointer-events-none block h-full w-full object-cover"
+            />
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function InstallStep({
+  n,
+  title,
+  body,
+  children,
+}: {
+  n: number;
+  title: string;
+  body: string;
+  children?: ReactNode;
+}) {
+  return (
+    <section className="flex min-h-[190px] flex-col px-5 py-5">
+      <span className="grid h-7 w-7 place-items-center rounded-full bg-foreground/10 text-sm font-bold text-fg">
+        {n}
+      </span>
+      <h3 className="mt-7 text-base font-bold leading-tight text-fg">
+        {title}
+      </h3>
+      <p className="mt-3 max-w-sm text-sm leading-[1.5] text-fg-muted">
+        {body}
+      </p>
+      {children && <div className="mt-auto pt-8">{children}</div>}
+    </section>
+  );
+}
+
+function CopyValueBlock({ copy }: { copy: CopyValue }) {
+  return (
+    <div
+      className="inline-flex max-w-full rounded-lg border bg-transparent px-6 py-5 text-left"
+      style={{
+        borderColor: "color-mix(in oklch, var(--color-fg-muted) 45%, transparent)",
+      }}
+    >
+      <div className="flex min-w-0 items-center gap-4">
+      <code
+        title={copy.value}
+        className="block min-w-0 flex-1 truncate font-sans text-sm leading-5 text-fg"
+      >
+        {copy.value}
+      </code>
+      <CopyButton
+        value={copy.value}
+        iconOnly
+        size="sm"
+        feedback="toast"
+        ariaLabel={copy.ariaLabel}
+      />
+      </div>
+    </div>
+  );
+}
+
+function InstallGuide() {
+  const [activeKey, setActiveKey] = useState<HarnessKey>("claude");
+  const active = TARGETS.find((target) => target.key === activeKey)!;
+  const gridCols =
+    active.steps.length === 2 ? "md:grid-cols-2" : "md:grid-cols-3";
+
+  return (
+    <div
+      data-install-guide
+      className="w-full overflow-hidden rounded-lg border border-hairline bg-muted text-left"
+    >
+      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline bg-background/40 px-3 py-3 light:bg-foreground/6">
+        <div
+          className="flex flex-wrap items-center gap-1.5"
+          role="tablist"
+          aria-label="Install target"
+        >
+          {TARGETS.map((target) => {
+            const selected = target.key === activeKey;
+            return (
+              <button
+                key={target.key}
+                type="button"
+                role="tab"
+                aria-selected={selected}
+                onClick={() => setActiveKey(target.key)}
+                className={`inline-flex h-9 items-center gap-2 rounded-full px-3 text-sm transition-colors ${
+                  selected
+                    ? "bg-background text-fg"
+                    : "text-fg-muted hover:bg-foreground/3 hover:text-fg"
+                }`}
+              >
+                <TargetIcon target={target.key} />
+                {target.label}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      <div className={`grid overflow-hidden ${gridCols}`}>
+        {active.steps.map((step, index) => (
+          <InstallStep
+            key={step.title}
+            n={index + 1}
+            title={step.title}
+            body={step.body}
+          >
+            {step.copy && <CopyValueBlock copy={step.copy} />}
+          </InstallStep>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function McpServerUrl() {
+  return (
+    <div className="mt-5 inline-flex max-w-full rounded-lg bg-muted px-6 py-5 text-left">
+      <div className="flex min-w-0 items-center gap-4">
+        <code
+          title={MCP_SERVER_URL}
+          className="block min-w-0 flex-1 truncate font-sans text-sm leading-5 text-fg"
+        >
+          {MCP_SERVER_URL}
+        </code>
+        <CopyButton
+          value={MCP_SERVER_URL}
+          iconOnly
+          size="sm"
+          feedback="toast"
+          ariaLabel="Copy MCP server URL"
+        />
+      </div>
+    </div>
+  );
+}
+
+export default function InstallPage() {
+  const { isConnected, isLoading } = useAuth();
+  const router = useRouter();
+
+  // Middleware already sends signed-out requests to /login before this page
+  // is served (see middleware.ts). This client-side fallback only fires if
+  // the session lapses while the console is open.
+  useEffect(() => {
+    if (!isLoading && !isConnected) {
+      router.replace("/login");
+    }
+  }, [isLoading, isConnected, router]);
+
+  if (isLoading) return null;
+
+  // Redirect is in flight; render nothing while it takes effect.
+  if (!isConnected) return null;
+
+  return (
+    <main id="main-content" className="relative flex-1 bg-dark">
+      <div className="mx-auto flex w-full max-w-6xl flex-col items-center px-3 pb-20 pt-8 text-center md:px-7 md:pt-12">
+        <InstallImageWheel />
+        <h1 className="mt-2 max-w-[720px] text-5xl font-normal leading-[0.98] tracking-normal text-fg">
+          Turn your agent into a full suite production studio.
+        </h1>
+        <p className="mt-4 max-w-[560px] text-sm leading-[1.55] tracking-normal text-fg-muted">
+          Bring image, video, audio, 3D, editing, rendering, and production
+          tools into your agent’s workflows with Livepeer.
+        </p>
+        <McpServerUrl />
+
+        <section
+          className="w-full max-w-5xl py-28 text-left md:py-32"
+          aria-label="Install guide"
+        >
+          <SectionHeader
+            variant="default"
+            className="mb-3 flex items-end justify-between gap-3"
+            title="Install Guide"
+          />
+          <InstallGuide />
+        </section>
+      </div>
+    </main>
+  );
+}