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>
2026-06-10 17:00:12 +00:00
parent ff4fe197be
commit e0b166ad60
32 changed files with 4786 additions and 0 deletions
@@ -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>
+  )
+}
@@ -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>
+  )
+}
@@ -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>
+  )
+}
@@ -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>
+  )
+}
@@ -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>
+  )
+}
@@ -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>
+  )
+}