feat(web): management console — TanStack Start + orval + shadcn + Paraglide

Browser UI for the host's management REST API (mgmt.rs / docs/api/openapi.json).

Stack, exactly as specified:
- TanStack Start (Vite, SPA mode) — file-based routes, SSR shell + client hydration.
- React Query via orval codegen from the checked-in OpenAPI spec: a custom fetch mutator
  (src/api/fetcher.ts) centralizes the base URL, the bearer token (Settings → localStorage),
  JSON, and a throwing ApiError; the query client skips retries on 4xx. orval returns the
  response body directly (includeHttpResponseReturnType:false) so a query's `.data` is the
  typed payload; GET→useQuery, POST/DELETE→useMutation by method.
- shadcn/ui on Tailwind v4 (CSS-first tokens, dark-first) — button/card/badge/input/label/
  table/skeleton primitives hand-authored from the canonical source.
- Paraglide i18n (en + de) with a reactive useLocale() hook and a language switcher.

Pages: dashboard (live status — video/audio/session/stream, stop-session + request-IDR,
2s polling), host (identity/codecs/ports), clients (paired list + unpair), pairing (PIN
submit, polls pin_pending), settings (API token + language).

Dev server proxies /api → 127.0.0.1:47990 (same-origin, no CORS; PUNKTFUNK_MGMT_URL to
override). Generated code (orval client, paraglide runtime, routeTree) is gitignored and
reproduced by `pnpm codegen` (prepare/pre* scripts). Validated live against `serve`: API
shapes match, dev proxy works, SSR shell renders the localized nav, build + tsc green.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/src/api/fetcher.ts

@@ -0,0 +1,57 @@
+// The fetch mutator orval-generated hooks call: `apiFetch<T>(url, RequestInit)`. orval is
+// configured (includeHttpResponseReturnType: false) so `T` is the response BODY; on an HTTP
+// error we THROW an `ApiError` so React Query's `isError` works (the query client is
+// configured not to retry 4xx — see src/router.tsx).
+//
+// Centralizes the bearer token (from Settings → localStorage). In dev, requests use a
+// relative `/api/...` path that Vite proxies to the management host (same-origin, no CORS,
+// the token rides along); a production build served by the host hits the same path.
+
+const TOKEN_KEY = 'punktfunk.apiToken'
+
+export function getApiToken(): string {
+  if (typeof localStorage === 'undefined') return ''
+  return localStorage.getItem(TOKEN_KEY) ?? ''
+}
+
+export function setApiToken(token: string): void {
+  if (typeof localStorage === 'undefined') return
+  if (token) localStorage.setItem(TOKEN_KEY, token)
+  else localStorage.removeItem(TOKEN_KEY)
+}
+
+/** A failed API call. `status` is the HTTP code; `data` is the parsed `ApiError` body if any. */
+export class ApiError extends Error {
+  status: number
+  data: unknown
+  constructor(status: number, data: unknown, message?: string) {
+    super(message ?? `API error ${status}`)
+    this.name = 'ApiError'
+    this.status = status
+    this.data = data
+  }
+}
+
+export async function apiFetch<T>(url: string, options?: RequestInit): Promise<T> {
+  const token = getApiToken()
+  const headers = new Headers(options?.headers)
+  headers.set('Accept', 'application/json')
+  if (token) headers.set('Authorization', `Bearer ${token}`)
+
+  const res = await fetch(url, { ...options, headers })
+
+  const text = await res.text()
+  const body = text ? safeJson(text) : undefined
+  if (!res.ok) throw new ApiError(res.status, body, res.statusText)
+  return body as T
+}
+
+function safeJson(text: string): unknown {
+  try {
+    return JSON.parse(text)
+  } catch {
+    return text
+  }
+}
+
+export default apiFetch

web/src/components/app-shell.tsx

@@ -0,0 +1,74 @@
+import type { ReactNode } from 'react'
+import { Link } from '@tanstack/react-router'
+import { Activity, Server, Users, KeyRound, Settings, Radio } from 'lucide-react'
+import { m } from '@/paraglide/messages'
+import { useLocale, changeLocale, locales, type Locale } from '@/lib/i18n'
+import { cn } from '@/lib/utils'
+
+const NAV = [
+  { to: '/', icon: Activity, label: () => m.nav_dashboard() },
+  { to: '/host', icon: Server, label: () => m.nav_host() },
+  { to: '/clients', icon: Users, label: () => m.nav_clients() },
+  { to: '/pairing', icon: KeyRound, label: () => m.nav_pairing() },
+  { to: '/settings', icon: Settings, label: () => m.nav_settings() },
+] as const
+
+export function AppShell({ children }: { children: ReactNode }) {
+  // Read the locale so the whole shell re-renders on a language switch.
+  useLocale()
+  return (
+    <div className="flex min-h-screen">
+      <aside className="hidden w-60 shrink-0 flex-col border-r bg-card/40 p-4 sm:flex">
+        <div className="mb-6 flex items-center gap-2 px-2">
+          <Radio className="size-5 text-[var(--success)]" />
+          <div>
+            <div className="font-semibold leading-tight">{m.app_name()}</div>
+            <div className="text-xs text-muted-foreground">{m.app_tagline()}</div>
+          </div>
+        </div>
+        <nav className="flex flex-col gap-1">
+          {NAV.map(({ to, icon: Icon, label }) => (
+            <Link
+              key={to}
+              to={to}
+              activeOptions={{ exact: to === '/' }}
+              className="flex items-center gap-3 rounded-md px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+              activeProps={{ className: 'bg-accent text-foreground font-medium' }}
+            >
+              <Icon className="size-4" />
+              {label()}
+            </Link>
+          ))}
+        </nav>
+        <div className="mt-auto pt-4">
+          <LanguageSwitcher />
+        </div>
+      </aside>
+      <main className="flex-1 overflow-x-hidden">
+        <div className="mx-auto max-w-5xl p-6 sm:p-10">{children}</div>
+      </main>
+    </div>
+  )
+}
+
+function LanguageSwitcher() {
+  const current = useLocale()
+  return (
+    <div className="flex gap-1" role="group" aria-label="Language">
+      {locales.map((l: Locale) => (
+        <button
+          key={l}
+          onClick={() => changeLocale(l)}
+          className={cn(
+            'rounded px-2 py-1 text-xs uppercase transition-colors',
+            l === current
+              ? 'bg-secondary text-secondary-foreground font-medium'
+              : 'text-muted-foreground hover:text-foreground',
+          )}
+        >
+          {l}
+        </button>
+      ))}
+    </div>
+  )
+}

web/src/components/query-state.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react'
+import { ApiError } from '@/api/fetcher'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Button } from '@/components/ui/button'
+import { m } from '@/paraglide/messages'
+
+interface QueryStateProps {
+  isLoading: boolean
+  error: unknown
+  refetch?: () => void
+  children: ReactNode
+}
+
+/** Uniform loading/error wrapper for a query-backed view. */
+export function QueryState({ isLoading, error, refetch, children }: QueryStateProps) {
+  if (isLoading) {
+    return (
+      <div className="space-y-3">
+        <Skeleton className="h-8 w-40" />
+        <Skeleton className="h-24 w-full" />
+      </div>
+    )
+  }
+  if (error) {
+    const unauthorized = error instanceof ApiError && error.status === 401
+    return (
+      <div className="rounded-lg border border-destructive/40 bg-destructive/5 p-4 text-sm">
+        <p className="font-medium text-destructive">
+          {unauthorized ? m.common_unauthorized() : m.common_error()}
+        </p>
+        {refetch && !unauthorized && (
+          <Button variant="outline" size="sm" className="mt-3" onClick={() => refetch()}>
+            {m.common_retry()}
+          </Button>
+        )}
+      </div>
+    )
+  }
+  return <>{children}</>
+}

web/src/components/ui/badge.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium transition-colors focus:outline-none',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground',
+        success: 'border-transparent bg-[var(--success)] text-white',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: { variant: 'default' },
+  },
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
+}
+
+export { Badge, badgeVariants }

web/src/components/ui/button.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: { variant: 'default', size: 'default' },
+  },
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => (
+    <button ref={ref} className={cn(buttonVariants({ variant, size, className }))} {...props} />
+  ),
+)
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }

web/src/components/ui/card.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('rounded-xl border bg-card text-card-foreground shadow', className)}
+      {...props}
+    />
+  ),
+)
+Card.displayName = 'Card'
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  ),
+)
+CardHeader.displayName = 'CardHeader'
+
+const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('font-semibold leading-none tracking-tight', className)} {...props} />
+  ),
+)
+CardTitle.displayName = 'CardTitle'
+
+const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+  ),
+)
+CardDescription.displayName = 'CardDescription'
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  ),
+)
+CardContent.displayName = 'CardContent'
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+  ),
+)
+CardFooter.displayName = 'CardFooter'
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

web/src/components/ui/input.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+  ({ className, type, ...props }, ref) => (
+    <input
+      type={type}
+      ref={ref}
+      className={cn(
+        'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+Input.displayName = 'Input'
+
+export { Input }

web/src/components/ui/label.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+const Label = React.forwardRef<HTMLLabelElement, React.LabelHTMLAttributes<HTMLLabelElement>>(
+  ({ className, ...props }, ref) => (
+    <label
+      ref={ref}
+      className={cn(
+        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+Label.displayName = 'Label'
+
+export { Label }

web/src/components/ui/skeleton.tsx

@@ -0,0 +1,7 @@
+import { cn } from '@/lib/utils'
+
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('animate-pulse rounded-md bg-muted', className)} {...props} />
+}
+
+export { Skeleton }

web/src/components/ui/table.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+      <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
+    </div>
+  ),
+)
+Table.displayName = 'Table'
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+))
+TableHeader.displayName = 'TableHeader'
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+))
+TableBody.displayName = 'TableBody'
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn(
+        'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+TableRow.displayName = 'TableRow'
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+      className,
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = 'TableHead'
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn('p-2 align-middle [&:has([role=checkbox])]:pr-0', className)}
+    {...props}
+  />
+))
+TableCell.displayName = 'TableCell'
+
+export { Table, TableHeader, TableBody, TableHead, TableRow, TableCell }

web/src/lib/i18n.ts

@@ -0,0 +1,29 @@
+// Thin reactive layer over Paraglide. Paraglide's `m.*` message functions and
+// `setLocale`/`getLocale` are framework-agnostic; this hook re-renders React when the
+// locale changes (Paraglide's localStorage strategy persists the choice across reloads).
+import { useSyncExternalStore } from 'react'
+import { getLocale, setLocale, locales } from '@/paraglide/runtime'
+
+/** The available locales as a union (`'en' | 'de'`), derived from Paraglide's `locales`. */
+export type Locale = (typeof locales)[number]
+
+const listeners = new Set<() => void>()
+
+/** Switch locale and notify subscribers (Paraglide also persists it per its strategy). */
+export function changeLocale(locale: Locale) {
+  // `reload: false` keeps the SPA mounted; we re-render via the store below.
+  setLocale(locale, { reload: false })
+  for (const l of listeners) l()
+}
+
+function subscribe(cb: () => void) {
+  listeners.add(cb)
+  return () => listeners.delete(cb)
+}
+
+/** Current locale, reactive — components using `m.*` should read this so they re-render. */
+export function useLocale(): Locale {
+  return useSyncExternalStore(subscribe, getLocale, () => 'en' as Locale)
+}
+
+export { locales }

web/src/lib/utils.ts

@@ -0,0 +1,7 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+/** shadcn/ui's class combiner: merge conditional classes, dedupe Tailwind conflicts. */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

web/src/router.tsx

@@ -0,0 +1,39 @@
+import { createRouter as createTanStackRouter } from '@tanstack/react-router'
+import { QueryClient } from '@tanstack/react-query'
+import { routeTree } from './routeTree.gen'
+import { ApiError } from './api/fetcher'
+
+export function getRouter() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 2_000,
+        // Don't hammer the host on auth/validation errors; do retry transient 5xx once.
+        retry: (failureCount, error) => {
+          if (error instanceof ApiError && error.status >= 400 && error.status < 500) return false
+          return failureCount < 1
+        },
+      },
+    },
+  })
+
+  return createTanStackRouter({
+    routeTree,
+    context: { queryClient },
+    defaultPreload: 'intent',
+    scrollRestoration: true,
+    Wrap: ({ children }) => <QueryProvider client={queryClient}>{children}</QueryProvider>,
+  })
+}
+
+// Local import kept below the function so the module reads top-down.
+import { QueryClientProvider } from '@tanstack/react-query'
+function QueryProvider({ client, children }: { client: QueryClient; children: React.ReactNode }) {
+  return <QueryClientProvider client={client}>{children}</QueryClientProvider>
+}
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: ReturnType<typeof getRouter>
+  }
+}

web/src/routes/__root.tsx

@@ -0,0 +1,43 @@
+/// <reference types="vite/client" />
+import {
+  createRootRouteWithContext,
+  HeadContent,
+  Outlet,
+  Scripts,
+} from '@tanstack/react-router'
+import type { QueryClient } from '@tanstack/react-query'
+import { AppShell } from '@/components/app-shell'
+import appCss from '@/styles.css?url'
+
+export interface RouterContext {
+  queryClient: QueryClient
+}
+
+export const Route = createRootRouteWithContext<RouterContext>()({
+  head: () => ({
+    meta: [
+      { charSet: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { name: 'color-scheme', content: 'dark light' },
+      { title: 'punktfunk' },
+    ],
+    links: [{ rel: 'stylesheet', href: appCss }],
+  }),
+  component: RootComponent,
+})
+
+function RootComponent() {
+  return (
+    <html lang="en" className="dark">
+      <head>
+        <HeadContent />
+      </head>
+      <body className="min-h-screen">
+        <AppShell>
+          <Outlet />
+        </AppShell>
+        <Scripts />
+      </body>
+    </html>
+  )
+}

web/src/routes/clients.tsx

@@ -0,0 +1,89 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useQueryClient } from '@tanstack/react-query'
+import { Trash2 } from 'lucide-react'
+import {
+  useListPairedClients,
+  useUnpairClient,
+  getListPairedClientsQueryKey,
+} from '@/api/gen/clients/clients'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { QueryState } from '@/components/query-state'
+import { m } from '@/paraglide/messages'
+import { useLocale } from '@/lib/i18n'
+
+export const Route = createFileRoute('/clients')({ component: ClientsPage })
+
+function ClientsPage() {
+  useLocale()
+  const qc = useQueryClient()
+  const clients = useListPairedClients()
+  const unpair = useUnpairClient()
+  const rows = clients.data ?? []
+
+  const onUnpair = (fingerprint: string) => {
+    if (!confirm(m.clients_unpair_confirm())) return
+    unpair.mutate(
+      { fingerprint },
+      { onSuccess: () => qc.invalidateQueries({ queryKey: getListPairedClientsQueryKey() }) },
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-2xl font-semibold">{m.clients_title()}</h1>
+      <QueryState isLoading={clients.isLoading} error={clients.error} refetch={clients.refetch}>
+        {rows.length === 0 ? (
+          <Card>
+            <CardContent className="p-8 text-center text-sm text-muted-foreground">
+              {m.clients_empty()}
+            </CardContent>
+          </Card>
+        ) : (
+          <Card>
+            <CardContent className="p-0">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{m.clients_name()}</TableHead>
+                    <TableHead>{m.clients_fingerprint()}</TableHead>
+                    <TableHead className="w-12" />
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {rows.map((c) => (
+                    <TableRow key={c.fingerprint}>
+                      <TableCell className="font-medium">{c.subject || '—'}</TableCell>
+                      <TableCell className="font-mono text-xs text-muted-foreground">
+                        {c.fingerprint.slice(0, 16)}…
+                      </TableCell>
+                      <TableCell>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          aria-label={m.action_unpair()}
+                          disabled={unpair.isPending}
+                          onClick={() => onUnpair(c.fingerprint)}
+                        >
+                          <Trash2 className="size-4 text-destructive" />
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
+        )}
+      </QueryState>
+    </div>
+  )
+}

web/src/routes/host.tsx

@@ -0,0 +1,81 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useGetHostInfo } from '@/api/gen/host/host'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { QueryState } from '@/components/query-state'
+import { m } from '@/paraglide/messages'
+import { useLocale } from '@/lib/i18n'
+
+export const Route = createFileRoute('/host')({ component: HostPage })
+
+function HostPage() {
+  useLocale()
+  const host = useGetHostInfo()
+  const h = host.data
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-2xl font-semibold">{m.nav_host()}</h1>
+      <QueryState isLoading={host.isLoading} error={host.error} refetch={host.refetch}>
+        {h && (
+          <div className="grid gap-4 lg:grid-cols-2">
+            <Card>
+              <CardHeader>
+                <CardTitle>{m.host_identity()}</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <dl className="grid grid-cols-1 gap-3">
+                  <Row label={m.host_hostname()} value={h.hostname} />
+                  <Row label={m.host_local_ip()} value={h.local_ip} mono />
+                  <Row label={m.host_version()} value={`${h.app_version} (${h.version})`} />
+                  <Row label={m.host_abi()} value={String(h.abi_version)} />
+                  <Row label={m.host_uniqueid()} value={h.uniqueid} mono />
+                </dl>
+              </CardContent>
+            </Card>
+            <div className="space-y-4">
+              <Card>
+                <CardHeader>
+                  <CardTitle>{m.host_codecs()}</CardTitle>
+                </CardHeader>
+                <CardContent className="flex flex-wrap gap-2">
+                  {h.codecs.map((c) => (
+                    <Badge key={c} variant="secondary">
+                      {c.toUpperCase()}
+                    </Badge>
+                  ))}
+                </CardContent>
+              </Card>
+              <Card>
+                <CardHeader>
+                  <CardTitle>{m.host_ports()}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <dl className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm tabular-nums">
+                    {Object.entries(h.ports).map(([k, v]) => (
+                      <div key={k} className="flex justify-between">
+                        <dt className="text-muted-foreground uppercase">{k}</dt>
+                        <dd className="font-medium">{v as number}</dd>
+                      </div>
+                    ))}
+                  </dl>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        )}
+      </QueryState>
+    </div>
+  )
+}
+
+function Row({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
+  return (
+    <div className="flex items-baseline justify-between gap-4">
+      <dt className="text-sm text-muted-foreground">{label}</dt>
+      <dd className={mono ? 'truncate font-mono text-xs' : 'font-medium'} title={value}>
+        {value}
+      </dd>
+    </div>
+  )
+}

web/src/routes/index.tsx

@@ -0,0 +1,138 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useQueryClient } from '@tanstack/react-query'
+import { Video, Volume2, MonitorPlay, ZapOff, RefreshCw } from 'lucide-react'
+import {
+  useGetStatus,
+  getGetStatusQueryKey,
+} from '@/api/gen/host/host'
+import { useStopSession, useRequestIdr } from '@/api/gen/session/session'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { QueryState } from '@/components/query-state'
+import { m } from '@/paraglide/messages'
+import { useLocale } from '@/lib/i18n'
+
+export const Route = createFileRoute('/')({ component: Dashboard })
+
+function Dashboard() {
+  useLocale()
+  const qc = useQueryClient()
+  // Poll live status every 2s so the console tracks an active session.
+  const status = useGetStatus({ query: { refetchInterval: 2_000 } })
+  const stop = useStopSession()
+  const idr = useRequestIdr()
+
+  const invalidate = () => qc.invalidateQueries({ queryKey: getGetStatusQueryKey() })
+  const s = status.data
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-2xl font-semibold">{m.status_title()}</h1>
+      <QueryState isLoading={status.isLoading} error={status.error} refetch={status.refetch}>
+        {s && (
+          <>
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+              <StatCard
+                icon={<Video className="size-4" />}
+                label={m.status_video()}
+                on={s.video_streaming}
+              />
+              <StatCard
+                icon={<Volume2 className="size-4" />}
+                label={m.status_audio()}
+                on={s.audio_streaming}
+              />
+              <Card>
+                <CardContent className="flex items-center justify-between p-4">
+                  <span className="text-sm text-muted-foreground">{m.status_paired_count()}</span>
+                  <span className="text-2xl font-semibold tabular-nums">{s.paired_clients}</span>
+                </CardContent>
+              </Card>
+              <Card>
+                <CardContent className="flex items-center justify-between p-4">
+                  <span className="text-sm text-muted-foreground">{m.status_pin_pending()}</span>
+                  <Badge variant={s.pin_pending ? 'default' : 'outline'}>
+                    {s.pin_pending ? '●' : '—'}
+                  </Badge>
+                </CardContent>
+              </Card>
+            </div>
+
+            <Card>
+              <CardHeader className="flex-row items-center justify-between space-y-0">
+                <CardTitle className="flex items-center gap-2">
+                  <MonitorPlay className="size-4" />
+                  {m.status_session()}
+                </CardTitle>
+                <div className="flex gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    disabled={!s.video_streaming || idr.isPending}
+                    onClick={() => idr.mutate(undefined)}
+                  >
+                    <RefreshCw className="size-3.5" />
+                    {m.action_request_idr()}
+                  </Button>
+                  <Button
+                    variant="destructive"
+                    size="sm"
+                    disabled={!s.session || stop.isPending}
+                    onClick={() => stop.mutate(undefined, { onSuccess: invalidate })}
+                  >
+                    <ZapOff className="size-3.5" />
+                    {m.action_stop_session()}
+                  </Button>
+                </div>
+              </CardHeader>
+              <CardContent>
+                {s.stream ? (
+                  <dl className="grid grid-cols-2 gap-x-6 gap-y-3 sm:grid-cols-4">
+                    <Field label={m.stream_codec()} value={s.stream.codec.toUpperCase()} />
+                    <Field
+                      label={m.stream_resolution()}
+                      value={`${s.stream.width}×${s.stream.height}`}
+                    />
+                    <Field label={m.stream_fps()} value={`${s.stream.fps} fps`} />
+                    <Field
+                      label={m.stream_bitrate()}
+                      value={`${(s.stream.bitrate_kbps / 1000).toFixed(1)} Mbps`}
+                    />
+                  </dl>
+                ) : (
+                  <p className="text-sm text-muted-foreground">{m.status_no_session()}</p>
+                )}
+              </CardContent>
+            </Card>
+          </>
+        )}
+      </QueryState>
+    </div>
+  )
+}
+
+function StatCard({ icon, label, on }: { icon: React.ReactNode; label: string; on: boolean }) {
+  return (
+    <Card>
+      <CardContent className="flex items-center justify-between p-4">
+        <span className="flex items-center gap-2 text-sm text-muted-foreground">
+          {icon}
+          {label}
+        </span>
+        <Badge variant={on ? 'success' : 'outline'}>
+          {on ? m.status_streaming() : m.status_idle()}
+        </Badge>
+      </CardContent>
+    </Card>
+  )
+}
+
+function Field({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <dt className="text-xs text-muted-foreground">{label}</dt>
+      <dd className="mt-0.5 font-medium tabular-nums">{value}</dd>
+    </div>
+  )
+}

web/src/routes/pairing.tsx

@@ -0,0 +1,91 @@
+import { useState } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { useQueryClient } from '@tanstack/react-query'
+import { KeyRound, CheckCircle2 } from 'lucide-react'
+import {
+  useGetPairingStatus,
+  useSubmitPairingPin,
+  getGetPairingStatusQueryKey,
+} from '@/api/gen/pairing/pairing'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { QueryState } from '@/components/query-state'
+import { m } from '@/paraglide/messages'
+import { useLocale } from '@/lib/i18n'
+
+export const Route = createFileRoute('/pairing')({ component: PairingPage })
+
+function PairingPage() {
+  useLocale()
+  const qc = useQueryClient()
+  const [pin, setPin] = useState('')
+  // Poll: the host flips pin_pending when a Moonlight client begins pairing.
+  const pairing = useGetPairingStatus({ query: { refetchInterval: 2_000 } })
+  const submit = useSubmitPairingPin()
+  const pending = pairing.data?.pin_pending ?? false
+
+  const onSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    submit.mutate(
+      { data: { pin } },
+      {
+        onSuccess: () => {
+          setPin('')
+          qc.invalidateQueries({ queryKey: getGetPairingStatusQueryKey() })
+        },
+      },
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-2xl font-semibold">{m.pairing_title()}</h1>
+      <QueryState isLoading={pairing.isLoading} error={pairing.error} refetch={pairing.refetch}>
+        <Card className="max-w-md">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <KeyRound className="size-4" />
+              {m.pairing_title()}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {!pending ? (
+              <p className="text-sm text-muted-foreground">{m.pairing_idle()}</p>
+            ) : (
+              <form onSubmit={onSubmit} className="space-y-4">
+                <p className="text-sm">{m.pairing_waiting()}</p>
+                <div className="space-y-2">
+                  <Label htmlFor="pin">{m.pairing_pin_label()}</Label>
+                  <Input
+                    id="pin"
+                    inputMode="numeric"
+                    autoComplete="off"
+                    maxLength={8}
+                    value={pin}
+                    onChange={(e) => setPin(e.target.value.replace(/\D/g, ''))}
+                    placeholder="0000"
+                    className="font-mono text-lg tracking-widest"
+                  />
+                </div>
+                <Button type="submit" disabled={pin.length < 4 || submit.isPending}>
+                  {m.pairing_submit()}
+                </Button>
+                {submit.isSuccess && (
+                  <p className="flex items-center gap-1.5 text-sm text-[var(--success)]">
+                    <CheckCircle2 className="size-4" />
+                    {m.pairing_success()}
+                  </p>
+                )}
+                {submit.isError && (
+                  <p className="text-sm text-destructive">{m.pairing_failed()}</p>
+                )}
+              </form>
+            )}
+          </CardContent>
+        </Card>
+      </QueryState>
+    </div>
+  )
+}

web/src/routes/settings.tsx

@@ -0,0 +1,81 @@
+import { useState } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { useQueryClient } from '@tanstack/react-query'
+import { Check } from 'lucide-react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { getApiToken, setApiToken } from '@/api/fetcher'
+import { m } from '@/paraglide/messages'
+import { useLocale, changeLocale, locales, type Locale } from '@/lib/i18n'
+import { cn } from '@/lib/utils'
+
+export const Route = createFileRoute('/settings')({ component: SettingsPage })
+
+function SettingsPage() {
+  const current = useLocale()
+  const qc = useQueryClient()
+  const [token, setToken] = useState(getApiToken())
+  const [saved, setSaved] = useState(false)
+
+  const onSave = (e: React.FormEvent) => {
+    e.preventDefault()
+    setApiToken(token.trim())
+    // Re-fetch everything with the new credential.
+    qc.invalidateQueries()
+    setSaved(true)
+    setTimeout(() => setSaved(false), 2_000)
+  }
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-2xl font-semibold">{m.settings_title()}</h1>
+
+      <Card className="max-w-lg">
+        <CardHeader>
+          <CardTitle>{m.settings_token_label()}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={onSave} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="token">{m.settings_token_label()}</Label>
+              <Input
+                id="token"
+                type="password"
+                autoComplete="off"
+                value={token}
+                onChange={(e) => setToken(e.target.value)}
+                placeholder="••••••••"
+              />
+              <p className="text-xs text-muted-foreground">{m.settings_token_help()}</p>
+            </div>
+            <Button type="submit">
+              {saved ? <Check className="size-4" /> : null}
+              {saved ? m.settings_saved() : m.settings_save()}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+
+      <Card className="max-w-lg">
+        <CardHeader>
+          <CardTitle>{m.settings_language()}</CardTitle>
+        </CardHeader>
+        <CardContent className="flex gap-2">
+          {locales.map((l: Locale) => (
+            <Button
+              key={l}
+              variant={l === current ? 'default' : 'outline'}
+              size="sm"
+              className={cn('uppercase')}
+              onClick={() => changeLocale(l)}
+            >
+              {l}
+            </Button>
+          ))}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

web/src/styles.css

@@ -0,0 +1,90 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+/* shadcn/ui design tokens (neutral base, dark-first to match a streaming console). */
+:root {
+  --radius: 0.625rem;
+  --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);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --success: oklch(0.6 0.13 160);
+}
+
+.dark {
+  --background: oklch(0.145 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.269 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);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --success: oklch(0.7 0.15 160);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+}
+
+@layer base {
+  * {
+    border-color: var(--border);
+  }
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+    font-feature-settings: 'rlig' 1, 'calt' 1;
+  }
+}