Files

T

ci / rust (push) Has been cancelled

Details

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

2.6 KiB

Raw Blame History

punktfunk web — management console

The browser UI for the punktfunk host's management REST API (crates/punktfunk-host/src/mgmt.rs, OpenAPI at docs/api/openapi.json). It shows live status, host capabilities, paired clients, the pairing-PIN flow, and session controls.

Stack: TanStack Start (Vite, SPA mode) · React Query via orval codegen from the OpenAPI spec · shadcn/ui (Tailwind v4) · Paraglide i18n (en/de).

Develop

# from web/
pnpm install              # runs `prepare` → codegen (orval + paraglide)
pnpm dev                  # http://localhost:3000

# The dev server proxies /api → http://127.0.0.1:47990 (the host's management API).
# Point it elsewhere with PUNKTFUNK_MGMT_URL=http://<host>:47990 pnpm dev

Start a host with the management API up:

# from the repo root — `serve` brings up the GameStream control plane + the mgmt API:
WAYLAND_DISPLAY=wayland-kde XDG_CURRENT_DESKTOP=KDE \
  cargo run -rp punktfunk-host -- serve
# loopback :47990, no token (a token is mandatory for non-loopback binds).

If the host runs with --mgmt-token, set it under Settings → API token (stored in localStorage, sent as Authorization: Bearer … by the orval fetcher).

Codegen

Generated code is not committed (gitignored) — it's reproduced from sources:

pnpm codegen — regenerate the API client (orval) + i18n runtime (paraglide). Runs automatically on pnpm install (prepare) and before dev/build (pre* for orval; the Vite plugin compiles paraglide on dev/build).
After a management-API change, regenerate the spec on the Rust side first: cargo run -p punktfunk-host -- openapi > docs/api/openapi.json, then pnpm api:gen.

Layout

src/
  routes/            file-based routes (index=dashboard, host, clients, pairing, settings)
  components/
    app-shell.tsx    sidebar nav + language switcher
    ui/              shadcn/ui primitives (button, card, table, …)
    query-state.tsx  loading/error wrapper (incl. 401 → "set a token")
  api/
    fetcher.ts       orval mutator: base URL, bearer token, JSON, throwing ApiError
    gen/             GENERATED react-query hooks + models (orval)
  lib/i18n.ts        reactive Paraglide locale hook
  paraglide/         GENERATED i18n runtime (paraglide)
messages/{en,de}.json   translation sources

Build

pnpm build            # client + SSR bundles under dist/
pnpm lint             # tsc --noEmit

A future step serves the built assets from the host itself (same origin as the API); today it's a standalone dev/preview app against the loopback management port.

2.6 KiB Raw Blame History