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/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>
+  )
+}