-
+
);
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 (null);
+ const itemRefs = useRef>([]);
+ 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) => {
+ 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) => {
+ 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) => {
+ 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 (
+
+ );
+}
+
+function InstallStep({
+ n,
+ title,
+ body,
+ children,
+}: {
+ n: number;
+ title: string;
+ body: string;
+ children?: ReactNode;
+}) {
+ return (
+
+
+ {n}
+
+
+ );
+}
+
+function CopyValueBlock({ copy }: { copy: CopyValue }) {
+ return (
+ ("claude");
+ const active = TARGETS.find((target) => target.key === activeKey)!;
+ const gridCols =
+ active.steps.length === 2 ? "md:grid-cols-2" : "md:grid-cols-3";
+
+ return (
+
+
+ );
+}
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 `` 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({
-
+
-
-
- - 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. -
-
-
-
+
+ {title} +
++ {body} +
+ {children &&{children}
}
+
+
+ );
+}
+
+function InstallGuide() {
+ const [activeKey, setActiveKey] = useState
+
+
+ {copy.value}
+
+
+
+ );
+}
+
+function McpServerUrl() {
+ return (
+
+
+
+
+ {TARGETS.map((target) => {
+ const selected = target.key === activeKey;
+ return (
+
+ );
+ })}
+
+
+ {active.steps.map((step, index) => (
+
+ {step.copy &&
+ ))}
+
+
+
+ );
+}
+
+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 (
+
+
+
+ {MCP_SERVER_URL}
+
+
+
+
+
+ + Turn your agent into a full suite production studio. +
++ Bring image, video, audio, 3D, editing, rendering, and production + tools into your agent’s workflows with Livepeer. +
+
+
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 = {
- 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 (
-
- {/* Breadcrumb chrome bar — Settings / {sub-tab label}. Mirrors the v7
- prototype's `
- );
+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 (
-
-
- );
+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 (
<>
-
-
{children}
-
-
- Settings
-
-
-
- {TAB_LABELS[tab]}
-
-
-
- {/* Body — single-column "settings shell" matching the prototype's
- `.settings-shell-solo` (max-width 880px, padding 4px 28px 80px). */}
-
-
-
- {tab === "account" &&
-
-
-
+ = {
active: "Streaming",
success: "Succeeded",
failed: "Failed",
timeout: "Timed out",
};
-const STATUS_DOT: Record = {
- 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 (
+ 
setFailed(true)}
+ className="h-full w-full object-contain object-top lg:object-center"
+ />
+ );
+}
+
+function VideoPreview({ poster }: { poster?: string }) {
+ return (
+
-
+
{children}
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/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 @@
+
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 (
-
+
+
+
{children}
+
+
+
,
+ 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/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
+ {label}
+ {children}
+
+ );
+}
+
+function CapabilityChip({ children }: { children: ReactNode }) {
return (
-
- {JSON.stringify(value, null, 2)}
-
+
+ {children}
+
);
}
-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 (
+
+ Preview unavailable
+
+ );
+ }
+
+ return (
+
+ {poster && (
+
+ )}
+
+
+ );
+}
+
+function AudioPreview() {
+ return (
+
+
+
+
+ 0:00
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function TextPreview({ text }: { text: string }) {
+ return (
+
+ {AUDIO_BARS.map((height, i) => (
+
+ ))}
+
+
+
+ 0:00
+
+
+
+ {text}
+
+ );
+}
+
+function JsonPreview({ value }: { value: unknown }) {
return (
- - {title} -
- {children} -
+ {JSON.stringify(value, null, 2)}
+
);
}
-function Meta({ label, value }: { label: string; value: React.ReactNode }) {
+function MediaStage({ media }: { media: MediaSpec }) {
return (
-
-
- {label}
-
-
- {value}
-
+ ("[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(null);
+
+ useEffect(() => {
+ activeRef.current?.scrollIntoView({ block: "nearest" });
+ }, [activeId, rows.length]);
+
+ if (!onSelect || rows.length <= 1) return null;
+
+ return (
+
+ );
+}
+
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(null);
+ const previousActiveRef = useRef(null);
+ const wheelDeltaRef = useRef(0);
+ const lastWheelNavigationRef = useRef(0);
+ const media = row ? mediaSpecForRow(row) : null;
- return (
- {
+ 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) => {
+ 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(
+
View usage
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"
}
>
-
+ {media.kind === "image" && media.imageUrl && (
+
);
}
+function canScrollWithin(target: EventTarget, deltaY: number): boolean {
+ if (!(target instanceof HTMLElement)) return false;
+ const scrollTarget = target.closest
- {row && (
- ;
}) {
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(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(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 }) => (
-
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({
}
/>
- 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=`, which is where the
+ * Rows open the call inspector at `/home?request=`, 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 = {
+ "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 && {metricLabel}}
Cost
{!compact && Via}
- Time
+ {!compact && Time}
)}
{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 (
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. */}
- {/* Status + facets */}
-
-
- ) : (
- <>
-
-
-
-
-
- )}
+ {row && media && (
+
,
+ document.body
);
}
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
-
-
- {STATUS_LABEL[row.status]}
-
- ·
-
- {live ? "Live" : "Batch"}
-
-
+
+
- {/* Key metrics */}
- -
-
-
-
-
-
-
-
+
)}
-
+
+
+
- {children}
-
+ {children}
);
return (
<>
- {loading ? (
-
-
+ )}
+
+ ) : (
+ <>
+
- {Array.from({ length: 10 }).map((_, i) => (
-
- ) : requests.status === "error" ? (
-
-
-
-
- ))}
- - Could not load signed requests. -
-- {requests.message} -
-
+ {loadMoreError ? (
+
+ ) : searching ? (
+
+ ) : loadingMore ? (
+
+
+ Loading more…
+
+ ) : null}
+
+ )}
+
+ )}
- {rowColor ? (
-
- ) : active ? (
- // Liveness pulse for an in-progress session (warm per the
- // liveness color convention).
-
@@ -172,7 +249,11 @@ export default function CallsTable({
{formatCallMetric(row, nowMs)}
)}
-
+
{row.costDisplay}
{!compact && (
@@ -180,9 +261,11 @@ export default function CallsTable({
{row.signerLabel}
)}
-
- {formatRunRelativeTime(row.timestamp)}
-
+ {!compact && (
+
+ {timeLabel}
+
+ )}
);
})}
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() {
- {Icon && (
-
- )}
+
{title}
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 = (
-
+
+
+
+
+ )}
+
+
+
);
}
-// ─── 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=` 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 (
-
- {collapsed ? (
-
+
+
+
);
}
-// ─── Sidebar content (shared between desktop + mobile drawer) ───────────────
+function UserAvatar({
+ user,
+ className,
+}: {
+ user: ConsoleUser;
+ className: string;
+}) {
+ if (user.avatarUrl) {
+ return (
+
+ );
+ }
-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 (
+
+ );
}
-// ─── 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 (
-
-
- {link}
-
-
- ) : (
- link
- )}
-
- {/* Brand row — wordmark links to / (the public landing) */}
-
+
+
- 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 ? (
-
- ) : (
-
- )}
-
-
- {!hideToggle && onToggleCollapsed && (
-
- )}
-
-
- {/* Search button — same Cmd-K dispatch as the signed-in variant; copy
- tweaked to "Search apps…" since there's no organization to jump
- across. */}
-
- {collapsed ? (
-
- ) : (
-
+
+ {open && (
+
-
-
- {/* 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.) */}
-
-
- {/* (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 */}
-
-
- {/* 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 && (
-
-
- )}
-
-
-
-
-
-
- - Free tier -
-
- 5 demo calls
-
- per app
-
- No credit card. Spin up in 30 seconds with an API key. -
-
-
-
-
-
+
+
+
- {/* Back arrow + "Settings" header — returns to /home, mirroring
- the prototype's `setRoute('home')` on the back button. */}
-