mirror of
https://github.com/tale/headplane.git
synced 2026-07-26 15:58:14 +00:00
Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Aarnav Tale
|
87a9219fd3 | ||
|
Aarnav Tale
|
ad7e58570f | ||
|
Aarnav Tale
|
04ff2138d2 |
@@ -1,6 +1,8 @@
|
||||
node_modules
|
||||
/.fate
|
||||
/.react-router
|
||||
/.cache
|
||||
/.data
|
||||
/build
|
||||
/test
|
||||
.env
|
||||
|
||||
@@ -0,0 +1,616 @@
|
||||
# Headplane codebase findings
|
||||
|
||||
Date: 2026-05-16
|
||||
|
||||
Scope: server-side TypeScript, React Router route modules, client components, live-data/data-fetching paths, auth/session/RBAC, Headscale config/API integration, Go agent/WebSSH code, runtime/build/CI, and docs. This is an architecture and pattern review, not a completed security audit.
|
||||
|
||||
## Executive summary
|
||||
|
||||
Headplane's biggest codebase risks are not isolated style issues; they cluster around ownership boundaries:
|
||||
|
||||
- **Auth/session boundary:** API-key sessions put the raw Headscale API key in the auth cookie, and self-service account linking can claim arbitrary unclaimed Headscale users.
|
||||
- **Live-data boundary:** the current live path polls globally, caches globally, and tells React Router to re-run whole active route loaders on any resource change.
|
||||
- **Lifecycle boundary:** process-lifetime services have `setInterval`, child processes, SSE streams, Undici agents, and WASM/tsnet state, but there is no coordinated shutdown/disposal model.
|
||||
- **Mutation boundary:** config-file edits and several admin/user mutations rely on UI constraints, mutable process state, non-transactional writes, or inconsistent server-side validation.
|
||||
- **Framework/tooling boundary:** React Router loaders/actions currently carry a lot of app state orchestration. Fate could be a good fit for live `nodes`/`users` data, but it will not fix auth, authorization, config mutation, WebSSH, or agent lifecycle issues by itself.
|
||||
|
||||
## Highest-priority findings
|
||||
|
||||
### 1. OIDC self-linking can claim arbitrary unclaimed Headscale users
|
||||
|
||||
**Severity:** Critical
|
||||
**Area:** AuthZ / account linking
|
||||
|
||||
**Evidence:**
|
||||
|
||||
- `app/routes/home.tsx:84-97` accepts a posted `headscale_user_id` and calls `context.auth.linkHeadscaleUser(principal.user.id, headscaleUserId)`.
|
||||
- `app/server/web/auth.ts:225-237` grants machine ownership based on `principal.user.headscaleUserId === node.user?.id`.
|
||||
- `app/routes/machines/machine-actions.ts:57-68` authorizes machine mutations through `canManageNode`.
|
||||
|
||||
**Why it matters:** a logged-in OIDC user can forge the form POST and link themselves to any unclaimed Headscale user ID. Once linked, they can manage that user's machines through the machine action authorization path.
|
||||
|
||||
**Suggested direction:** recompute allowed self-link targets server-side inside the action and reject anything not in that set. Prefer auto-linking only by verified OIDC subject/email match, and reserve arbitrary linking for admins.
|
||||
|
||||
### 2. API-key sessions put the raw Headscale API key in a signed cookie
|
||||
|
||||
**Severity:** Critical
|
||||
**Area:** Auth/session security
|
||||
|
||||
**Evidence:**
|
||||
|
||||
- `app/server/web/auth.ts:96-105` manually base64url-encodes JSON and signs it with HMAC.
|
||||
- `app/server/web/auth.ts:269-283` serializes `{ sid, api_key }` for API-key sessions.
|
||||
- `app/server/web/auth.ts:144-173` resolves API-key principals from `payload.api_key`; the DB `api_key_hash` is not used to retrieve a server-side secret.
|
||||
- `app/utils/oidc-state.ts:13-19` explicitly sets `httpOnly`, while the main auth cookie options are not explicit in `app/server/context.ts:49-54` / `app/server/web/auth.ts:96-105`.
|
||||
- `docs/install/index.md` describes `server.cookie_secret` as encrypting cookies, but the implementation signs rather than encrypts.
|
||||
|
||||
**Why it matters:** cookie compromise becomes direct Headscale API compromise, not just Headplane session compromise. HMAC protects integrity, not confidentiality. The auth cookie should be an opaque session handle, not a transport for upstream credentials.
|
||||
|
||||
**Suggested direction:** store only `sid` in the cookie; keep the API key encrypted or server-side in the DB/secret store; verify `api_key_hash` if retaining API-key sessions; explicitly set `httpOnly`, `sameSite`, `secure`, `path`, and consider key rotation/versioning. Use timing-safe HMAC comparison if manual signatures remain.
|
||||
|
||||
## Live data and data-fetching findings
|
||||
|
||||
### 3. SSE events trigger whole-route revalidation instead of resource-scoped updates
|
||||
|
||||
**Severity:** High
|
||||
**Area:** Client data fetching / live data
|
||||
|
||||
**Evidence:**
|
||||
|
||||
- `app/utils/live-data.tsx:35-39` calls `revalidator.revalidate()`.
|
||||
- `app/utils/live-data.tsx:63-82` treats every `changed` event as a global route revalidation.
|
||||
- `app/routes/util/live.ts:34-37` sends only `{ resource, version }`, not field/object-level deltas or subscribed views.
|
||||
|
||||
**Why it matters:** any node/user change can re-run every active loader for the current route tree. Pages such as machines/users load multiple resources and agent metadata, so frequent Headscale changes can become over-fetching and UI churn.
|
||||
|
||||
**Suggested direction:** short term, include enough resource metadata to revalidate only affected routes or debounce/coalesce revalidation. Long term, move live data to normalized object/list subscriptions instead of request/route invalidation.
|
||||
|
||||
### 4. Live-data pause state is global, boolean, and can stick disabled
|
||||
|
||||
**Severity:** High
|
||||
**Area:** Client state / live data
|
||||
|
||||
**Evidence:**
|
||||
|
||||
- `app/root.tsx:41-66` mounts `LiveDataProvider` above all routes.
|
||||
- `app/routes/auth/login/page.tsx:59-66` calls `pause()` with no dependency array and no cleanup/resume.
|
||||
- `app/components/dialog.tsx:21-27` uses the same single boolean pause model for dialogs.
|
||||
- `app/utils/live-data.tsx:136-141` exposes imperative `pause()` / `resume()` with no ownership token.
|
||||
|
||||
**Why it matters:** visiting `/login` can leave live updates disabled after navigating into the app. Multiple pause consumers can also fight: closing one dialog can resume live updates while another still expects them paused.
|
||||
|
||||
**Suggested direction:** add immediate cleanup in login (`pause(); return resume`) and a dependency array. Replace the boolean with a refcount/token model so each consumer releases only its own pause.
|
||||
|
||||
### 5. `hsLive` is process-global but stores one mutable API client
|
||||
|
||||
**Severity:** High
|
||||
**Area:** Server live data / cache scoping
|
||||
|
||||
**Evidence:**
|
||||
|
||||
- `app/server/context.ts:86-101` creates one `hsLive` for the entire process.
|
||||
- `app/server/headscale/live-store.ts:69` keeps `storedApiClient` in shared closure state.
|
||||
- `app/server/headscale/live-store.ts:113-120` polling uses that shared client.
|
||||
- `app/server/headscale/live-store.ts:143` and `app/server/headscale/live-store.ts:158` overwrite it from each caller.
|
||||
|
||||
**Why it matters:** the last request/action to touch `hsLive` controls which API key future background polls use. A bad/expired user-supplied API-key session can poison live refresh for everyone until another request resets it. Snapshots are also not principal/session scoped.
|
||||
|
||||
**Suggested direction:** poll with one stable server credential only, or scope cache/polling by principal/session. If adopting Fate, make this one of the first seams to replace.
|
||||
|
||||
### 6. Live store polling is coarse and lifecycle-unmanaged
|
||||
|
||||
**Severity:** Medium
|
||||
**Area:** Server lifecycle / live data
|
||||
|
||||
**Evidence:**
|
||||
|
||||
- `app/server/headscale/live-store.ts:38-45` polls nodes every 5s and users every 15s.
|
||||
- `app/server/headscale/live-store.ts:82-104` compares `JSON.stringify(data)` for the whole resource.
|
||||
- `app/server/headscale/live-store.ts:113-123` starts intervals lazily but never stops them unless `dispose()` is called.
|
||||
- `app/server/context.ts:94` creates the store, but no app shutdown path calls `hsLive.dispose()`.
|
||||
|
||||
**Why it matters:** whole-resource JSON comparison is order-sensitive and grows with tailnet size. The polling intervals continue for process lifetime and can leak during dev HMR or repeated context creation.
|
||||
|
||||
**Suggested direction:** introduce app-level lifecycle management and subscription-aware polling, or replace with event/object-scoped live subscriptions.
|
||||
|
||||
### 7. Loader data is mirrored into local state and can overwrite edits during revalidation
|
||||
|
||||
**Severity:** Medium
|
||||
**Area:** Client state / React patterns
|
||||
|
||||
**Evidence:**
|
||||
|
||||
- `app/routes/acls/overview.tsx:30-41` mirrors `policy` into `codePolicy` and updates it when loader data changes.
|
||||
- `app/routes/dns/components/manage-domains.tsx:25-31` mirrors `searchDomains` into local state.
|
||||
|
||||
**Why it matters:** global SSE revalidation can replace local edit state. The ACL editor is especially risky because an unsaved policy can be overwritten by background loader refresh.
|
||||
|
||||
**Suggested direction:** separate “initial server value” from “dirty draft” state; never overwrite dirty drafts on background revalidation without prompting.
|
||||
|
||||
### 8. Fetcher/dialog orchestration is imperative and duplicated
|
||||
|
||||
**Severity:** Medium
|
||||
**Area:** Client forms / mutations
|
||||
|
||||
**Evidence:**
|
||||
|
||||
- `app/routes/machines/dialogs/tags.tsx:34-43` uses `submittingRef` + effects to close/unlock.
|
||||
- `app/routes/settings/auth-keys/dialogs/add-auth-key.tsx:56-71` uses similar orchestration and directly assigns `fetcher.data = undefined`.
|
||||
- `app/routes/machines/dialogs/routes.tsx:49-63` submits on switch changes without optimistic/error state.
|
||||
|
||||
**Why it matters:** each dialog reimplements mutation lifecycle handling. Direct mutation of `fetcher.data` fights router-owned state and can hide stale or failed submissions.
|
||||
|
||||
**Suggested direction:** centralize fetcher mutation state handling, or move to an action/mutation primitive with explicit pending/error/success states and optimistic updates.
|
||||
|
||||
## Auth, authorization, and route handling findings
|
||||
|
||||
### 9. Agent settings route/action lacks capability checks
|
||||
|
||||
**Severity:** High
|
||||
**Area:** Authorization
|
||||
|
||||
**Evidence:**
|
||||
|
||||
- `app/routes/settings/agent.tsx:13-27` only authenticates.
|
||||
- `app/routes/settings/agent.tsx:29-39` only authenticates before triggering sync.
|
||||
|
||||
**Why it matters:** any authenticated user can view agent status and trigger sync work if they know the URL, regardless of settings/admin capability.
|
||||
|
||||
**Suggested direction:** gate read and sync separately, probably using `read_feature`/`write_feature` or a dedicated agent capability.
|
||||
|
||||
### 10. App layout catches all loader errors and destroys sessions
|
||||
|
||||
**Severity:** High
|
||||
**Area:** Error handling / auth UX
|
||||
|
||||
**Evidence:**
|
||||
|
||||
- `app/layout/app.tsx:32-103` wraps the whole loader in `try/catch` and redirects to `/login` with `destroySession()` for any error.
|
||||
- `app/layout/app.tsx:50-67` handles one expected expired-API-key case, but the outer catch covers unrelated failures too.
|
||||
|
||||
**Why it matters:** network errors, programming errors, and transient Headscale failures can become silent logouts. It also hides diagnostics from route error boundaries.
|
||||
|
||||
**Suggested direction:** catch only expected auth/session errors; let operational/programming errors hit the error boundary or a health banner.
|
||||
|
||||
### 11. RBAC is inconsistent across routes/actions
|
||||
|
||||
**Severity:** Medium/High
|
||||
**Area:** Authorization
|
||||
|
||||
**Evidence:**
|
||||
|
||||
- `app/routes/machines/machine-actions.ts:64-68` performs resource-specific checks via `canManageNode`.
|
||||
- `app/routes/users/user-actions.ts:10-17` checks only broad `write_users` before operations.
|
||||
- `app/routes/home.tsx:84-97` lets OIDC users link Headscale identities without revalidating target ownership.
|
||||
- `app/routes/settings/auth-keys/actions.ts:23-35` has more careful self-service ownership checks, showing the pattern exists but is not universal.
|
||||
|
||||
**Why it matters:** permissions are enforced route-by-route with no single policy layer, so new actions can accidentally rely on UI hiding. The self-linking issue is one concrete outcome.
|
||||
|
||||
**Suggested direction:** create server-side action guards for common ownership/role decisions and require every mutation to call one.
|
||||
|
||||
### 12. Runtime role input is not validated and ownership updates are non-transactional
|
||||
|
||||
**Severity:** Medium
|
||||
**Area:** Auth/RBAC data integrity
|
||||
|
||||
**Evidence:**
|
||||
|
||||
- `app/routes/users/user-actions.ts:82-104` casts `newRole as Role` from form data.
|
||||
- `app/server/web/auth.ts:467-484` upserts that role into the DB.
|
||||
- `app/server/web/auth.ts:430-464` transfers ownership with two separate updates.
|
||||
- `app/server/web/auth.ts:324-342` makes the first user owner with a count-after-insert flow.
|
||||
|
||||
**Why it matters:** forged role values can reach storage, and failures/races in ownership transfer or first-login owner selection can produce invalid owner state.
|
||||
|
||||
**Suggested direction:** validate `newRole` against `Roles` at the route boundary, use transactions for ownership transfer, and make first-owner assignment atomic.
|
||||
|
||||
### 13. Login page has live-data and URL cleanup bugs
|
||||
|
||||
**Severity:** Medium
|
||||
**Area:** Client route behavior
|
||||
|
||||
**Evidence:**
|
||||
|
||||
- `app/routes/auth/login/page.tsx:59-66` pauses live data on every render and never resumes.
|
||||
- `app/routes/auth/login/page.tsx:68-84` uses `window.history.replaceState` manually.
|
||||
- `app/routes/auth/login/page.tsx:78-80` builds `newUrl` with `` `{${window.location.pathname}?...` ``, leaving a literal `{` in the URL.
|
||||
|
||||
**Why it matters:** this can disable live updates and corrupt/uglify login URLs. Manual history mutation bypasses router state.
|
||||
|
||||
**Suggested direction:** use a loader redirect or router navigation where possible; otherwise fix the string and make the effect one-shot with cleanup.
|
||||
|
||||
## Headscale API and config mutation findings
|
||||
|
||||
### 14. Headscale API errors are collapsed into `502 Bad Gateway`
|
||||
|
||||
**Severity:** Medium/High
|
||||
**Area:** API wrapper / error handling
|
||||
|
||||
**Evidence:**
|
||||
|
||||
- `app/server/headscale/api/index.ts:139-145` converts network errors to React Router `data(..., 502)`.
|
||||
- `app/server/headscale/api/index.ts:183-203` converts every Headscale `>=400` response to outer status 502 while preserving the real status only inside the body.
|
||||
- Many callers inspect raw strings/statuses manually, e.g. `app/routes/auth/login/action.ts:78-93` and `app/routes/acls/acl-action.ts:39-107`.
|
||||
|
||||
**Why it matters:** UI and route logic must understand wrapper internals. HTTP semantics are obscured, and handling becomes string-fragile.
|
||||
|
||||
**Suggested direction:** preserve upstream status classes where safe, expose typed domain errors, and make expected Headscale quirks explicit in one adapter layer.
|
||||
|
||||
### 15. OpenAPI polling interval has no disposal and returned interface exposes stale values
|
||||
|
||||
**Severity:** Medium
|
||||
**Area:** Server lifecycle / API versioning
|
||||
|
||||
**Evidence:**
|
||||
|
||||
- `app/server/headscale/api/index.ts:241-250` starts a `setInterval` inside `createHeadscaleInterface`.
|
||||
- `app/server/headscale/api/index.ts:252-272` returns `openapiHashes` and `apiVersion` as values captured at return time, while `clientHelpers.isAtleast` reads the mutable closure.
|
||||
- No `dispose()` exists on the interface.
|
||||
|
||||
**Why it matters:** lifecycle leaks in dev/reload scenarios, and consumers reading `context.hsApi.apiVersion` can see stale data while helpers see updated data.
|
||||
|
||||
**Suggested direction:** add lifecycle, expose getters for mutable version state, or only detect once at startup.
|
||||
|
||||
### 16. Config patching is not safely serialized
|
||||
|
||||
**Severity:** Medium/High
|
||||
**Area:** Config mutation / concurrency
|
||||
|
||||
**Evidence:**
|
||||
|
||||
- `app/server/headscale/config-loader.ts:63-127` mutates the YAML document before acquiring `writeLock`.
|
||||
- `app/server/headscale/config-loader.ts:120-127` sets `writeLock = true` without `try/finally`; a failed write can leave the lock stuck.
|
||||
- `app/server/headscale/config-dns.ts` has a similar write-lock pattern (see `writeLock` usage).
|
||||
|
||||
**Why it matters:** concurrent admin actions can interleave mutations, lose updates, or deadlock future writes after an exception.
|
||||
|
||||
**Suggested direction:** replace the boolean lock/spin loop with a promise queue or mutex; acquire before document mutation; release in `finally`; write atomically via temp file + rename.
|
||||
|
||||
### 17. DNS/config actions mutate shared config arrays and lack input validation
|
||||
|
||||
**Severity:** Medium
|
||||
**Area:** Config mutation / validation
|
||||
|
||||
**Evidence:**
|
||||
|
||||
- `app/routes/dns/dns-actions.ts:103-118` pushes nameservers into arrays read from `context.hs.c`.
|
||||
- `app/routes/dns/dns-actions.ts:147-164` pushes search domains into arrays read from `context.hs.c`.
|
||||
- `app/routes/dns/dns-actions.ts:189-209` writes DNS record type/value from form data with minimal validation.
|
||||
|
||||
**Why it matters:** in-memory config can be mutated before persistence succeeds, and invalid values can be written directly to Headscale config.
|
||||
|
||||
**Suggested direction:** clone before modification, validate domain/IP/record types server-side, and return actionable typed errors.
|
||||
|
||||
### 18. Restrictions config actions fire integration restarts without awaiting them
|
||||
|
||||
**Severity:** Medium
|
||||
**Area:** Config mutation / operational consistency
|
||||
|
||||
**Evidence:**
|
||||
|
||||
- `app/routes/settings/restrictions/actions.ts:51`, `:79`, `:100`, `:129`, `:150`, `:179` call `context.integration?.onConfigChange(api)` without `await`.
|
||||
- `app/routes/dns/dns-actions.ts` generally awaits the same hook.
|
||||
|
||||
**Why it matters:** the response can report success while restart/reload fails in the background, and unhandled rejections can be lost.
|
||||
|
||||
**Suggested direction:** await the hook consistently or queue/retry restarts through an explicit background job with surfaced status.
|
||||
|
||||
## Server lifecycle and runtime findings
|
||||
|
||||
### 19. Process-lifetime services have no composition-root `stop()`
|
||||
|
||||
**Severity:** High
|
||||
**Area:** Server lifecycle
|
||||
|
||||
**Evidence:**
|
||||
|
||||
- `app/server/context.ts:21-101` constructs DB, Headscale API, live store, auth service, OIDC, optional agent manager, and integration.
|
||||
- `app/server/app.ts:38-40` starts auth pruning.
|
||||
- `app/server/hp-agent.ts:319-359` starts an interval and child process with `dispose()`.
|
||||
- `app/server/headscale/live-store.ts:182-191` has `dispose()`.
|
||||
- `runtime/http.ts:192-200` handles SIGINT/SIGTERM by closing the HTTP server and exiting, but has no app context cleanup.
|
||||
- `runtime/vite-plugin.ts:44-50` uses `ssrLoadModule` in dev; HMR can recreate modules/services without calling old disposers.
|
||||
|
||||
**Why it matters:** intervals, child processes, SSE listeners, and Undici agents can leak in dev and are force-killed in production instead of being drained.
|
||||
|
||||
**Suggested direction:** return an app runtime with `stop()` from the composition root; call `auth.stop()`, `hsLive.dispose()`, `agents.dispose()`, `hsApi.undiciAgent.close()`, and integration cleanup from production shutdown and Vite HMR dispose hooks.
|
||||
|
||||
### 20. Architecture docs describe patterns the code no longer fully follows
|
||||
|
||||
**Severity:** Medium
|
||||
**Area:** Documentation / maintainability
|
||||
|
||||
**Evidence:**
|
||||
|
||||
- `docs/development/architecture.md:15-20` says all services are closure factories, no classes/globals.
|
||||
- `app/server/headscale/config-loader.ts:21-213` uses a mutable class for Headscale config.
|
||||
- `docs/development/architecture.md:162-218` describes `server/index.ts`, `AppRuntime`, and `context.runtime`, while current code uses `app/server/app.ts`, `createAppContext`, and direct `context.<service>`.
|
||||
|
||||
**Why it matters:** docs are important to this project. Stale architecture guidance makes future changes less consistent and harder for agents/contributors to follow.
|
||||
|
||||
**Suggested direction:** update the architecture docs to the current composition root and explicitly document exceptions such as config-file wrappers.
|
||||
|
||||
## Go agent and WebSSH findings
|
||||
|
||||
### 21. WebSSH WASM lacks a top-level disposal model and leaks JS functions
|
||||
|
||||
**Severity:** High
|
||||
**Area:** WebSSH lifecycle / browser resources
|
||||
|
||||
**Evidence:**
|
||||
|
||||
- `app/routes/ssh/page.tsx:156-188` creates the WASM/IPN instance and cleanup only sets `cancelled = true`.
|
||||
- `app/routes/ssh/wasm.client.ts:27-29` exposes `openTunnel` only; no `dispose()`.
|
||||
- `cmd/hp_ssh/hp_ssh.go:16-80` creates JS functions but never releases them with `js.Func.Release()`.
|
||||
- `internal/hp_ipn/ipnserver.go:107-133` starts backend/server work but exposes no shutdown API.
|
||||
|
||||
**Why it matters:** repeated SSH sessions can leave in-browser tsnet/backend resources and JS function handles alive until tab refresh.
|
||||
|
||||
**Suggested direction:** add top-level `dispose()` to the JS API, release Go `js.Func` handles, cancel contexts, close sessions/backend/server, and call dispose from React cleanup.
|
||||
|
||||
### 22. WebSSH disables SSH host key verification
|
||||
|
||||
**Severity:** Medium/High
|
||||
**Area:** Security / WebSSH
|
||||
|
||||
**Evidence:**
|
||||
|
||||
- `internal/hp_ipn/ssh.go:59-63` returns `nil` from `HostKeyCallback`.
|
||||
|
||||
**Why it matters:** this accepts any host key and allows MITM within the network path. Tailscale identity reduces exposure, but SSH host identity is still bypassed.
|
||||
|
||||
**Suggested direction:** document the tradeoff clearly at minimum. Prefer known_hosts-style pinning, Tailscale SSH identity integration, or an explicit trust-on-first-use flow.
|
||||
|
||||
### 23. Go agent can panic on peers without Tailscale IPs
|
||||
|
||||
**Severity:** Medium
|
||||
**Area:** Go agent robustness
|
||||
|
||||
**Evidence:**
|
||||
|
||||
- `internal/tsnet/peers.go:61` indexes `peer.TailscaleIPs[0]`.
|
||||
- `internal/tsnet/peers.go:119` also indexes `peer.TailscaleIPs[0]` before checking `len(ip) == 0`.
|
||||
|
||||
**Why it matters:** transient or malformed peer state can crash host-info collection.
|
||||
|
||||
**Suggested direction:** check `len(peer.TailscaleIPs) > 0` before indexing in both paths.
|
||||
|
||||
### 24. Go agent preflight uses `http.Get` without timeout and does not close response bodies
|
||||
|
||||
**Severity:** Medium
|
||||
**Area:** Go agent robustness
|
||||
|
||||
**Evidence:**
|
||||
|
||||
- `internal/config/preflight.go:40-56` calls `http.Get(testURL)` directly.
|
||||
- `internal/config/preflight.go:47-54` never closes `resp.Body`.
|
||||
|
||||
**Why it matters:** startup can hang indefinitely on network issues, and response bodies leak.
|
||||
|
||||
**Suggested direction:** use `http.Client{Timeout: ...}` and `defer resp.Body.Close()`.
|
||||
|
||||
### 25. Go library-like code exits the process and logging is hand-rolled
|
||||
|
||||
**Severity:** Medium
|
||||
**Area:** Go maintainability
|
||||
|
||||
**Evidence:**
|
||||
|
||||
- `internal/tsnet/server.go:22-72` uses `log.Fatal` inside `NewAgent`/`Connect` rather than returning errors.
|
||||
- `internal/util/logger.go:25-29` defines `encoder` and `pool`, but `internal/util/logger.go:59-66` only writes plain stderr lines and exits on fatal.
|
||||
|
||||
**Why it matters:** callers cannot recover or return structured errors, and the logger has unused complexity while still lacking structured output.
|
||||
|
||||
**Suggested direction:** return errors from `NewAgent`/`Connect`, let `cmd/hp_agent` decide process exit, and simplify or replace the logger.
|
||||
|
||||
## Build, CI, and tooling findings
|
||||
|
||||
### 26. CI does not explicitly run typecheck or lint
|
||||
|
||||
**Severity:** Medium
|
||||
**Area:** Tooling / quality gates
|
||||
|
||||
**Evidence:**
|
||||
|
||||
- `package.json` has `typecheck`, `lint`, and `format` scripts.
|
||||
- `.github/workflows/build.yaml:32-37` runs `./build.sh --skip-pnpm-prune`, unit tests, and integration tests.
|
||||
- `build.sh:157-173` runs `pnpm run build`, not `pnpm run typecheck` or `pnpm run lint`.
|
||||
|
||||
**Why it matters:** Vite/React Router builds transpile TypeScript but are not a substitute for `tsgo` typechecking. Lint-only issues can land despite local scripts existing.
|
||||
|
||||
**Suggested direction:** add `pnpm run typecheck` and `pnpm run lint` to CI. Consider `pnpm run format --check` if supported by oxfmt.
|
||||
|
||||
### 27. Build script leaves temporary `vendor/` behind if WASM build fails
|
||||
|
||||
**Severity:** Low/Medium
|
||||
**Area:** Build hygiene
|
||||
|
||||
**Evidence:**
|
||||
|
||||
- `build.sh:143-154` runs `go mod vendor`, applies a patch, builds, then removes `vendor` only after success.
|
||||
|
||||
**Why it matters:** failed local builds can leave a large generated directory in the worktree, which is easy to accidentally inspect or commit around.
|
||||
|
||||
**Suggested direction:** add a trap around the vendoring step to remove `vendor` on failure.
|
||||
|
||||
## Fate/SPA/Vite+ migration assessment
|
||||
|
||||
### Updated direction: SPA first, not Void first
|
||||
|
||||
After comparing the shape of Headplane with Void's current platform/runtime direction, the better target is **not** a Void app. Headplane is a self-hosted local control-plane UI that needs a predictable Node process, local filesystem/config access, SQLite, child process/agent management, long-lived SSE, and a packaging story that can eventually compile into a Node static SEA.
|
||||
|
||||
The preferred target is now a one-way SPA cutover:
|
||||
|
||||
```text
|
||||
Hono Node server + Vite SPA + TanStack Router + raw Fate
|
||||
```
|
||||
|
||||
The important architectural choice is that **Fate becomes the data framework directly** while the app shell stays thin. The shell should own static assets, cookies/session plumbing, routing, and lifecycle. Fate should own reads, mutations/actions, normalized cache updates, and live object/list subscriptions. Do not build a Headplane-specific abstraction layer over Fate's live bus, view resolution, actions, or native HTTP handlers unless a concrete repeated problem appears after using the raw APIs.
|
||||
|
||||
Void may still be a useful reference implementation for Fate integration, but it should not drive Headplane's runtime architecture unless it later proves a first-class self-hosted Node mode that fits Headplane's install model.
|
||||
|
||||
### Current Fate fit
|
||||
|
||||
Fate is directly aimed at the pain Headplane is showing: declarative views, normalized cache, data masking, Async React, optimistic actions/mutations, and live views over SSE. Fate 1.0 says it now includes production-ready live views, Drizzle support, garbage collection, and native HTTP transport. The docs also still contain an alpha warning in the getting-started page, so I would treat the ecosystem as promising but still worth piloting behind a branch.
|
||||
|
||||
Headplane is already close on prerequisites:
|
||||
|
||||
- React is `19.2.5` and Fate requires React 19.2+.
|
||||
- The app already uses Vite 8-era tooling, Vitest, Oxlint, Oxfmt, tsgo, and pnpm.
|
||||
- Headplane already has Drizzle, but only for Headplane-local data (`users`, sessions, host info), while core tailnet data comes from the remote Headscale API.
|
||||
|
||||
### What Fate would improve
|
||||
|
||||
- Replace `LiveDataProvider` + `useRevalidator()` with object/list-level subscriptions (`useLiveView` / `useLiveListView`).
|
||||
- Normalize `nodes`, `users`, pre-auth keys, and agent host info instead of passing large loader payloads around.
|
||||
- Let components declare data needs near rendering rather than building large page-level loader DTOs.
|
||||
- Make mutations return selected updated data and update dependent views without manual `context.hsLive.refresh(...)` calls.
|
||||
|
||||
### What Fate will not fix
|
||||
|
||||
- API-key-in-cookie session design.
|
||||
- Self-linking authorization.
|
||||
- Missing route/action capability checks.
|
||||
- Headscale config-file write races.
|
||||
- WebSSH/WASM lifecycle and SSH host-key verification.
|
||||
- Go agent robustness issues.
|
||||
|
||||
These should be fixed before or alongside any framework migration.
|
||||
|
||||
### Headplane-specific adoption challenges
|
||||
|
||||
- **Remote API source:** Fate's Drizzle adapter helps for local DB rows, but `Machine`, `User`, `PreAuthKey`, ACL policy, and DNS/config data mostly come from Headscale REST/config files. A Headscale Fate source/adapter or custom native HTTP query layer would be needed.
|
||||
- **Authorization:** Fate views must be scoped by the authenticated principal. Do not reproduce the current process-global cache or mutable API client.
|
||||
- **Live events:** Headscale does not appear to push the exact object-level events Headplane needs, so Headplane may still need polling or mutation-triggered `live.update(...)` calls. The win is to send object/list updates to subscribed views, not to revalidate whole routes.
|
||||
- **Server framework:** the desired end state is no longer another heavyweight metaframework. Hono is a good fit for the server shell because it uses the Fetch `Request`/`Response` model Fate already targets, while still running as a normal self-hosted Node process.
|
||||
|
||||
### Target runtime shape
|
||||
|
||||
```text
|
||||
╭────────────────────────────────────────────╮
|
||||
│ Node static SEA / Docker image │
|
||||
│ - bundled server JS │
|
||||
│ - embedded or adjacent Vite client assets │
|
||||
╰───────────────────┬────────────────────────╯
|
||||
│
|
||||
▼
|
||||
╭────────────────────────────────────────────╮
|
||||
│ Hono Node server │
|
||||
│ - process lifecycle start/stop │
|
||||
│ - static asset + SPA fallback serving │
|
||||
│ - cookie/session middleware │
|
||||
│ - /fate and /fate/live │
|
||||
│ - /api, /events during transition │
|
||||
╰───────────────────┬────────────────────────╯
|
||||
│
|
||||
▼
|
||||
╭────────────────────────────────────────────╮
|
||||
│ Framework-neutral Headplane server core │
|
||||
│ - auth/session/authorization │
|
||||
│ - Headscale API/config adapters │
|
||||
│ - agent manager │
|
||||
│ - Fate live bus used directly │
|
||||
╰───────────────────┬────────────────────────╯
|
||||
│
|
||||
▼
|
||||
╭────────────────────────────────────────────╮
|
||||
│ Vite SPA │
|
||||
│ - TanStack Router for navigation/search │
|
||||
│ - raw Fate for all app data and mutations │
|
||||
│ - no route loaders/actions/fetchers │
|
||||
╰────────────────────────────────────────────╯
|
||||
```
|
||||
|
||||
### Node SEA packaging implications
|
||||
|
||||
The SPA direction is a better fit for a Node static SEA than SSR framework mode because the runtime can become one server entry plus a finite static asset set. The server should be structured so that production can first serve assets from `build/client`, then later swap that out for an embedded asset manifest without changing application routing.
|
||||
|
||||
Practical constraints for the SEA target:
|
||||
|
||||
- keep one explicit production server entry instead of framework-generated adapter code;
|
||||
- avoid dynamic runtime imports for route modules in production;
|
||||
- make client assets addressable by a generated manifest rather than filesystem discovery;
|
||||
- keep mutable data outside the SEA (`data_path`, Headscale config paths, SQLite, logs);
|
||||
- preserve direct file serving for large WASM artifacts until we decide whether they should be embedded or adjacent assets.
|
||||
|
||||
### Raw Fate rule
|
||||
|
||||
Use Fate's public APIs directly:
|
||||
|
||||
- `createFateServer(...)` and the native HTTP handler for `/fate`;
|
||||
- Fate's live bus directly for `live.update(...)`, `live.delete(...)`, and connection/list invalidations;
|
||||
- Fate's context callback directly for request auth and Headscale API access;
|
||||
- `FateClient`, `createClient` / `createHTTPTransport` while bootstrapping, then generated `createFateClient(...)` once the Fate Vite plugin has a real server module;
|
||||
- `useRequest`, `useView`, `useLiveView`, `useLiveListView`, and Fate actions directly in React.
|
||||
|
||||
Do not add project-level wrappers such as `HeadplaneLivePublisher`, `HeadplaneDataContext`, or a custom Fate transport abstraction at the beginning. If raw Fate usage becomes repetitive, extract only the smallest local helper at the repetition site.
|
||||
|
||||
### Current scaffold on `tale/fate-spa`
|
||||
|
||||
- Removed the earlier `HeadplaneRuntime`, `HeadplaneDataContext`, and `HeadplaneLivePublisher` scaffolding.
|
||||
- Added direct dependencies: `react-fate`, `@nkzw/fate`, `@tanstack/react-router`, `@tanstack/router-plugin`, and `@vitejs/plugin-react`.
|
||||
- Added a plain Vite SPA `index.html` and `app/spa` entry with TanStack Router and the generated raw Fate client from `react-fate/client`.
|
||||
- Moved the old React Router Vite config to `vite-old.config.ts` and replaced `vite.config.ts` with a clean SPA config.
|
||||
- Added Hono and `@hono/node-server`, plus a minimal Hono server shell in `app/server/hono-app.ts`, `app/server/hono-dev.ts`, and `app/server/hono-main.ts`.
|
||||
- Added `app/server/fate.ts`, which exports a raw Fate server and live bus. Hono mounts Fate's `createHonoFateHandler(fate)` at `/admin/fate` and `/admin/fate/*`, passing the existing app context through Hono variables.
|
||||
- Wired the official `react-fate/vite` plugin to `app/server/fate.ts`, ignored generated `.fate/` output, and made `pnpm run typecheck` run `fate generate` before `tsgo` so generated `react-fate/client` typings exist from a clean checkout.
|
||||
- Added the first real Fate read roots: `machines` and `users`. They use Fate `dataView(...)`, `list(...)`, and source executors directly, call the existing principal-scoped Headscale runtime API client, and enforce existing `read_machines` / `read_users` capabilities.
|
||||
- Added minimal SPA `/machines` and `/users` routes that fetch with raw `useRequest(...)`, render records with `useLiveView(...)`, and subscribe to root list connections with `useLiveListView(...)`. These routes intentionally do not port filters, actions, or optimistic updates yet.
|
||||
- Bridged existing `hsLive` resource changes directly to Fate connection invalidations: `nodes` invalidates the `machines` root connection and `users` invalidates the `users` root connection. This is a temporary seam so converted routes can exercise Fate live primitives before the old live store is deleted.
|
||||
- Added the first raw Fate mutation, `machine.rename`. It reuses existing `canManageNode` authorization, calls the Headscale API, refreshes the transitional `hsLive` nodes resource, emits direct Fate entity/list live events, and returns the client-selected `Machine` view.
|
||||
- `pnpm dev` now runs the Hono/Vite middleware shell with local `.data` storage for the example config; `pnpm build` now runs `vite build` for the SPA.
|
||||
- Fate's Drizzle peer currently warns against the repo's Drizzle `1.0.0-beta.21`; avoid Fate's Drizzle adapter until that compatibility is resolved, and start with a direct Headscale source/resolver instead.
|
||||
|
||||
### Fate context decision
|
||||
|
||||
The current Fate request context should stay pragmatic rather than heavily decomposed:
|
||||
|
||||
- expose `api`, the principal-scoped Headscale runtime client, as the primary data access path for remote Headscale data;
|
||||
- keep `principal` and `request` available for authorization and future audit/session needs;
|
||||
- keep `app` available during the migration so resolvers can reuse the existing auth/config/agent services without inventing a new service layer first;
|
||||
- do not pass an unstructured context into every helper by default once a data domain settles. If a `machines`, `users`, or `authKeys` module becomes large, give that module explicit functions that accept the concrete pieces it uses.
|
||||
|
||||
In other words: full app context is acceptable as migration scaffolding, but the resolver code should prefer the smallest direct dependency (`ctx.api`, `ctx.app.auth`, etc.) and should not become a new `HeadplaneRuntime` abstraction.
|
||||
|
||||
### Recommended migration sequence
|
||||
|
||||
1. **Remove transitional abstractions** and make the branch clearly one-way toward SPA + raw Fate.
|
||||
2. **Install the direct dependencies**: `react-fate`, `@nkzw/fate`, `@tanstack/react-router`, `@tanstack/router-plugin`, and the plain Vite React plugin if the React Router plugin is removed.
|
||||
3. **Replace the build/dev entry shape**:
|
||||
- add a Vite SPA entry and TanStack route tree;
|
||||
- stop generating new React Router route types;
|
||||
- keep the existing Node server entry as the self-hosted process.
|
||||
4. **Mount raw Fate endpoints** in the current Node request path:
|
||||
- `/fate` for native RPC;
|
||||
- `/fate/live` for SSE and subscription control;
|
||||
- request context resolves auth using the existing auth service and calls `context.hsApi.getRuntimeClient(...)` directly.
|
||||
5. **Convert the machines page first** using raw Fate views and live list/view hooks.
|
||||
6. **Add live updates to the converted lists** by publishing Fate list/entity invalidations from the existing polling/mutation seams. Keep this raw Fate live bus usage, not a Headplane live wrapper.
|
||||
7. **Port one mutation at a time**, starting with a low-risk machine mutation such as rename. The mutation should call the existing Headscale API, return the selected entity, and emit the relevant Fate live event.
|
||||
8. **Delete the old React Router loader/action/SSE path for converted data**, rather than running duplicate data models side-by-side.
|
||||
9. **Fix critical auth/session issues early**: self-linking, raw API-key cookie, agent-route authz.
|
||||
10. **Keep runtime changes minimal** until the SPA actually needs them: Hono routes, static SPA fallback, Fate routes, and later SEA asset serving.
|
||||
|
||||
### Vite+ / VoidZero tooling assessment
|
||||
|
||||
Vite+ is a unified CLI (`vp`) for Vite, Vitest, Oxlint, Oxfmt, Rolldown, tsdown, type checking, package-manager/runtime management, and task caching. Headplane already uses most of these tools separately, so Vite+ would mostly consolidate tooling and improve task ergonomics; it will not solve the data-layer problems by itself.
|
||||
|
||||
Recommended Vite+ approach:
|
||||
|
||||
- Try `vp migrate` in a separate branch only after adding CI typecheck/lint gates.
|
||||
- Expect manual work around the custom React Router SSR entry and `runtime/vite-plugin.ts`.
|
||||
- Do not combine Vite+ migration with Fate/Void/router migration in the same PR.
|
||||
|
||||
## Suggested immediate backlog
|
||||
|
||||
1. Replace the temporary `hsLive` bridge with direct Fate events from converted mutations and, if needed, a principal-safe polling source.
|
||||
2. Move the machine rename UI out of the throwaway table row controls once the permanent SPA machines page layout exists.
|
||||
3. Port the next machine mutations: expire/delete/tags/routes, one at a time, each returning selected data or deleting/updating the normalized cache explicitly.
|
||||
4. Fix OIDC self-linking authorization.
|
||||
5. Make API-key sessions opaque/server-side and set explicit auth cookie flags.
|
||||
6. Add capability checks to `/settings/agent` loader/action.
|
||||
7. Fix live-data pause cleanup/refcounting for unconverted React Router routes.
|
||||
8. Make `hsLive` use a stable server credential or principal-scoped cache while it still exists.
|
||||
9. Serialize config patches with a real mutex/queue and clone config arrays before editing.
|
||||
10. Add CI `pnpm run typecheck` and `pnpm run lint`.
|
||||
11. Add WebSSH top-level dispose and release Go `js.Func` values.
|
||||
+12
-1
@@ -5,6 +5,7 @@ import log from "~/utils/log";
|
||||
import type { HeadplaneConfig } from "./config/config-schema";
|
||||
import { loadIntegration } from "./config/integration";
|
||||
import { createDbClient } from "./db/client.server";
|
||||
import { live as fateLive } from "./fate";
|
||||
import { createHeadscaleInterface } from "./headscale/api";
|
||||
import { loadHeadscaleConfig } from "./headscale/config-loader";
|
||||
import { createLiveStore, nodesResource, usersResource } from "./headscale/live-store";
|
||||
@@ -83,6 +84,16 @@ export async function createAppContext(config: HeadplaneConfig) {
|
||||
}
|
||||
: undefined;
|
||||
|
||||
const hsLive = createLiveStore([nodesResource, usersResource]);
|
||||
hsLive.subscribe((resource, version) => {
|
||||
const eventId = `${resource}:${version}`;
|
||||
if (resource === nodesResource.key) {
|
||||
fateLive.connection("machines").invalidate({ eventId });
|
||||
} else if (resource === usersResource.key) {
|
||||
fateLive.connection("users").invalidate({ eventId });
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
config,
|
||||
db,
|
||||
@@ -91,7 +102,7 @@ export async function createAppContext(config: HeadplaneConfig) {
|
||||
agents,
|
||||
auth,
|
||||
oidc,
|
||||
hsLive: createLiveStore([nodesResource, usersResource]),
|
||||
hsLive,
|
||||
hs: await loadHeadscaleConfig(
|
||||
config.headscale.config_path,
|
||||
config.headscale.config_strict,
|
||||
|
||||
@@ -0,0 +1,378 @@
|
||||
import {
|
||||
createFateServer,
|
||||
createLiveEventBus,
|
||||
dataView,
|
||||
FateRequestError,
|
||||
list,
|
||||
resolveSourceById,
|
||||
type Entity,
|
||||
type SourceDefinition,
|
||||
type SourceRegistry,
|
||||
} from "@nkzw/fate/server";
|
||||
import type { Context } from "hono";
|
||||
|
||||
import type { Machine as HeadscaleMachine, User as HeadscaleUser } from "~/types";
|
||||
|
||||
import type { AppContext } from "./context";
|
||||
import type { RuntimeApiClient } from "./headscale/api/endpoints";
|
||||
import { isConnectionError, isDataWithApiError } from "./headscale/api/error-client";
|
||||
import { nodesResource } from "./headscale/live-store";
|
||||
import type { Principal } from "./web/auth";
|
||||
import { Capabilities } from "./web/roles";
|
||||
|
||||
export interface HonoFateEnv {
|
||||
Variables: {
|
||||
appContext: AppContext;
|
||||
};
|
||||
}
|
||||
|
||||
interface FateContext {
|
||||
api: RuntimeApiClient;
|
||||
app: AppContext;
|
||||
principal: Principal;
|
||||
request: Request;
|
||||
}
|
||||
|
||||
type FateAdapterContext = Context<HonoFateEnv>;
|
||||
|
||||
export const live = createLiveEventBus();
|
||||
|
||||
type UserRecord = HeadscaleUser & Record<string, unknown>;
|
||||
type MachineRecord = Omit<HeadscaleMachine, "user"> & {
|
||||
user?: UserRecord;
|
||||
} & Record<string, unknown>;
|
||||
|
||||
export const UserDataView = dataView<UserRecord>("User")({
|
||||
createdAt: true,
|
||||
displayName: true,
|
||||
email: true,
|
||||
id: true,
|
||||
name: true,
|
||||
profilePicUrl: true,
|
||||
provider: true,
|
||||
providerId: true,
|
||||
});
|
||||
|
||||
export const MachineDataView = dataView<MachineRecord>("Machine")({
|
||||
approvedRoutes: true,
|
||||
availableRoutes: true,
|
||||
createdAt: true,
|
||||
discoKey: true,
|
||||
expiry: true,
|
||||
givenName: true,
|
||||
id: true,
|
||||
ipAddresses: true,
|
||||
lastSeen: true,
|
||||
machineKey: true,
|
||||
name: true,
|
||||
nodeKey: true,
|
||||
online: true,
|
||||
registerMethod: true,
|
||||
subnetRoutes: true,
|
||||
tags: true,
|
||||
user: UserDataView,
|
||||
});
|
||||
|
||||
export type User = Entity<typeof UserDataView, "User">;
|
||||
export type Machine = Entity<
|
||||
typeof MachineDataView,
|
||||
"Machine",
|
||||
{
|
||||
user?: User;
|
||||
}
|
||||
>;
|
||||
|
||||
export type FateUser = User;
|
||||
export type FateMachine = Machine;
|
||||
|
||||
const userSource = {
|
||||
id: "id",
|
||||
view: UserDataView,
|
||||
} satisfies SourceDefinition<UserRecord>;
|
||||
|
||||
const machineSource = {
|
||||
id: "id",
|
||||
view: MachineDataView,
|
||||
} satisfies SourceDefinition<MachineRecord>;
|
||||
|
||||
const machineList = list(MachineDataView, { orderBy: { givenName: "asc" } });
|
||||
const userList = list(UserDataView, { orderBy: { name: "asc" } });
|
||||
|
||||
export const Root = {
|
||||
machines: machineList,
|
||||
users: userList,
|
||||
};
|
||||
export const roots = Root;
|
||||
|
||||
const queries = {};
|
||||
const lists = {};
|
||||
|
||||
function apiFailureToFateError(error: unknown, fallback: string): FateRequestError {
|
||||
if (error instanceof FateRequestError) {
|
||||
return error;
|
||||
}
|
||||
|
||||
if (isDataWithApiError(error)) {
|
||||
const status = error.data.statusCode;
|
||||
if (status === 401) {
|
||||
return new FateRequestError("UNAUTHORIZED", "Headscale rejected the current API key.");
|
||||
}
|
||||
if (status === 403) {
|
||||
return new FateRequestError("FORBIDDEN", "Headscale refused this operation.");
|
||||
}
|
||||
if (status === 404) {
|
||||
return new FateRequestError("NOT_FOUND", "The requested Headscale resource was not found.");
|
||||
}
|
||||
|
||||
return new FateRequestError(
|
||||
"INTERNAL_ERROR",
|
||||
`Headscale API request failed with status ${status}.`,
|
||||
{ status: 502 },
|
||||
);
|
||||
}
|
||||
|
||||
const data = error && typeof error === "object" && "data" in error ? error.data : undefined;
|
||||
if (isConnectionError(data)) {
|
||||
return new FateRequestError(
|
||||
"INTERNAL_ERROR",
|
||||
`Unable to reach Headscale: ${data.errorMessage}`,
|
||||
{ status: 502 },
|
||||
);
|
||||
}
|
||||
|
||||
return new FateRequestError("INTERNAL_ERROR", fallback);
|
||||
}
|
||||
|
||||
interface RenameMachineInput {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const renameMachineInput = {
|
||||
parse(input: unknown): RenameMachineInput {
|
||||
if (!input || typeof input !== "object") {
|
||||
throw new FateRequestError("VALIDATION_ERROR", "Machine rename input is required.");
|
||||
}
|
||||
|
||||
const id = (input as Record<string, unknown>).id;
|
||||
const name = (input as Record<string, unknown>).name;
|
||||
if (typeof id !== "string" || id.trim() === "") {
|
||||
throw new FateRequestError("VALIDATION_ERROR", "Machine ID is required.");
|
||||
}
|
||||
if (typeof name !== "string" || name.trim() === "") {
|
||||
throw new FateRequestError("VALIDATION_ERROR", "Machine name is required.");
|
||||
}
|
||||
|
||||
return {
|
||||
id,
|
||||
name: name.trim(),
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
const mutations = {
|
||||
"machine.rename": {
|
||||
input: renameMachineInput,
|
||||
resolve: async ({
|
||||
ctx,
|
||||
input,
|
||||
select,
|
||||
}: {
|
||||
ctx: FateContext;
|
||||
input: RenameMachineInput;
|
||||
select: Array<string>;
|
||||
}): Promise<Machine | null> => {
|
||||
let node;
|
||||
try {
|
||||
node = await ctx.api.getNode(input.id);
|
||||
} catch (error) {
|
||||
throw apiFailureToFateError(error, "Unable to load this machine.");
|
||||
}
|
||||
|
||||
if (!ctx.app.auth.canManageNode(ctx.principal, node)) {
|
||||
throw new FateRequestError(
|
||||
"FORBIDDEN",
|
||||
"You do not have permission to rename this machine.",
|
||||
);
|
||||
}
|
||||
|
||||
try {
|
||||
await ctx.api.renameNode(input.id, input.name);
|
||||
} catch (error) {
|
||||
throw apiFailureToFateError(error, "Unable to rename this machine.");
|
||||
}
|
||||
|
||||
void ctx.app.hsLive.refresh(nodesResource, ctx.api).catch(() => undefined);
|
||||
|
||||
const eventId = `machine:${input.id}:rename:${Date.now()}`;
|
||||
live.update("Machine", input.id, { changed: ["givenName", "name"], eventId });
|
||||
live.connection("machines").invalidate({ eventId });
|
||||
|
||||
return (await resolveSourceById({
|
||||
ctx,
|
||||
id: input.id,
|
||||
input: { select },
|
||||
registry,
|
||||
source: machineSource,
|
||||
})) as Machine | null;
|
||||
},
|
||||
type: "Machine",
|
||||
},
|
||||
};
|
||||
|
||||
type SourceByIdsOptions = {
|
||||
ctx: FateContext;
|
||||
ids: Array<string>;
|
||||
};
|
||||
|
||||
type SourceConnectionOptions = {
|
||||
ctx: FateContext;
|
||||
cursor?: string;
|
||||
direction: "backward" | "forward";
|
||||
take: number;
|
||||
};
|
||||
|
||||
function requireCapability(ctx: FateContext, capability: Capabilities) {
|
||||
if (!ctx.app.auth.can(ctx.principal, capability)) {
|
||||
throw new FateRequestError("FORBIDDEN", "You do not have permission to view this data.");
|
||||
}
|
||||
}
|
||||
|
||||
function compareText(a: string | undefined, b: string | undefined) {
|
||||
return (a ?? "").localeCompare(b ?? "", undefined, { numeric: true, sensitivity: "base" });
|
||||
}
|
||||
|
||||
function byRequestedId<T extends { id: string }>(items: Array<T>, ids: Array<string>) {
|
||||
const byId = new Map(items.map((item) => [item.id, item]));
|
||||
return ids.flatMap((id) => {
|
||||
const item = byId.get(id);
|
||||
return item ? [item] : [];
|
||||
});
|
||||
}
|
||||
|
||||
function pageByCursor<T extends { id: string }>(
|
||||
items: Array<T>,
|
||||
{ cursor, direction, take }: Omit<SourceConnectionOptions, "ctx">,
|
||||
) {
|
||||
if (!cursor) {
|
||||
return direction === "backward"
|
||||
? items.slice(Math.max(0, items.length - take))
|
||||
: items.slice(0, take);
|
||||
}
|
||||
|
||||
const cursorIndex = items.findIndex((item) => item.id === cursor);
|
||||
if (cursorIndex < 0) {
|
||||
return direction === "backward"
|
||||
? items.slice(Math.max(0, items.length - take))
|
||||
: items.slice(0, take);
|
||||
}
|
||||
|
||||
if (direction === "backward") {
|
||||
return items.slice(Math.max(0, cursorIndex - take), cursorIndex);
|
||||
}
|
||||
|
||||
return items.slice(cursorIndex + 1, cursorIndex + 1 + take);
|
||||
}
|
||||
|
||||
async function getMachineRecords(ctx: FateContext): Promise<Array<MachineRecord>> {
|
||||
requireCapability(ctx, Capabilities.read_machines);
|
||||
|
||||
try {
|
||||
return (await ctx.api.getNodes())
|
||||
.map((machine) => machine as MachineRecord)
|
||||
.sort(
|
||||
(a, b) =>
|
||||
compareText(a.givenName || a.name, b.givenName || b.name) || compareText(a.id, b.id),
|
||||
);
|
||||
} catch (error) {
|
||||
throw apiFailureToFateError(error, "Unable to load machines from Headscale.");
|
||||
}
|
||||
}
|
||||
|
||||
async function getUserRecords(ctx: FateContext): Promise<Array<UserRecord>> {
|
||||
requireCapability(ctx, Capabilities.read_users);
|
||||
|
||||
try {
|
||||
return (await ctx.api.getUsers())
|
||||
.map((user) => user as UserRecord)
|
||||
.sort((a, b) => compareText(a.name, b.name) || compareText(a.id, b.id));
|
||||
} catch (error) {
|
||||
throw apiFailureToFateError(error, "Unable to load users from Headscale.");
|
||||
}
|
||||
}
|
||||
|
||||
const registry = new Map() as SourceRegistry<FateContext>;
|
||||
registry.set(machineSource as SourceDefinition, {
|
||||
byIds: async ({ ctx, ids }: SourceByIdsOptions) =>
|
||||
byRequestedId(await getMachineRecords(ctx), ids),
|
||||
connection: async ({ ctx, cursor, direction, take }: SourceConnectionOptions) =>
|
||||
pageByCursor(await getMachineRecords(ctx), { cursor, direction, take }),
|
||||
});
|
||||
registry.set(userSource as SourceDefinition, {
|
||||
byIds: async ({ ctx, ids }: SourceByIdsOptions) => byRequestedId(await getUserRecords(ctx), ids),
|
||||
connection: async ({ ctx, cursor, direction, take }: SourceConnectionOptions) =>
|
||||
pageByCursor(await getUserRecords(ctx), { cursor, direction, take }),
|
||||
});
|
||||
|
||||
const sourceByView = new Map<unknown, SourceDefinition>([
|
||||
[MachineDataView, machineSource as SourceDefinition],
|
||||
[machineList, machineSource as SourceDefinition],
|
||||
[UserDataView, userSource as SourceDefinition],
|
||||
[userList, userSource as SourceDefinition],
|
||||
]);
|
||||
|
||||
function isSourceDefinition(target: unknown): target is SourceDefinition {
|
||||
return target !== null && typeof target === "object" && "view" in target;
|
||||
}
|
||||
|
||||
export const fate = createFateServer<
|
||||
FateContext,
|
||||
typeof roots,
|
||||
typeof queries,
|
||||
typeof lists,
|
||||
typeof mutations,
|
||||
FateAdapterContext
|
||||
>({
|
||||
context: async ({ adapterContext, request }) => {
|
||||
if (!adapterContext) {
|
||||
throw new Error("Fate request is missing Hono context");
|
||||
}
|
||||
|
||||
const app = adapterContext.get("appContext");
|
||||
let principal;
|
||||
try {
|
||||
principal = await app.auth.require(request);
|
||||
} catch {
|
||||
throw new FateRequestError("UNAUTHORIZED", "Authentication required.");
|
||||
}
|
||||
|
||||
const api = app.hsApi.getRuntimeClient(app.auth.getHeadscaleApiKey(principal));
|
||||
|
||||
return {
|
||||
api,
|
||||
app,
|
||||
principal,
|
||||
request,
|
||||
};
|
||||
},
|
||||
live,
|
||||
mutations,
|
||||
roots,
|
||||
sources: {
|
||||
registry,
|
||||
getSource(target) {
|
||||
if (isSourceDefinition(target)) {
|
||||
return target;
|
||||
}
|
||||
|
||||
const source = sourceByView.get(target);
|
||||
if (!source) {
|
||||
throw new Error("No Fate source registered for data view");
|
||||
}
|
||||
|
||||
return source;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export type { FateAdapterContext, FateContext };
|
||||
@@ -0,0 +1,115 @@
|
||||
import { versions } from "node:process";
|
||||
|
||||
import { serveStatic } from "@hono/node-server/serve-static";
|
||||
import { createHonoFateHandler } from "@nkzw/fate/server";
|
||||
import { Hono, type Context } from "hono";
|
||||
|
||||
import type { AppContext } from "./context";
|
||||
import { fate, type HonoFateEnv } from "./fate";
|
||||
|
||||
interface HonoAppOptions {
|
||||
context: AppContext;
|
||||
prefix: string;
|
||||
staticRoot?: string;
|
||||
}
|
||||
|
||||
export function createHeadplaneHonoApp({ context, prefix, staticRoot }: HonoAppOptions) {
|
||||
const app = new Hono<HonoFateEnv>();
|
||||
const fateHandler = createHonoFateHandler(fate);
|
||||
|
||||
app.use("*", async (c, next) => {
|
||||
c.set("appContext", context);
|
||||
await next();
|
||||
});
|
||||
|
||||
const health = async (c: Context) => {
|
||||
const api = context.hsApi.getRuntimeClient("fake-api-key");
|
||||
const healthy = await api.isHealthy();
|
||||
|
||||
return c.json({ status: healthy ? "OK" : "ERROR" }, healthy ? 200 : 500);
|
||||
};
|
||||
|
||||
app.get("/healthz", health);
|
||||
app.get(`${prefix}/healthz`, health);
|
||||
|
||||
app.get(`${prefix}/api/info`, async (c) => {
|
||||
if (context.config.server.info_secret == null) {
|
||||
return c.json({ status: "Forbidden" }, 403);
|
||||
}
|
||||
|
||||
const bearer = c.req.header("Authorization") ?? "";
|
||||
if (!bearer.startsWith("Bearer ")) {
|
||||
return c.json({ status: "Unauthorized" }, 401);
|
||||
}
|
||||
|
||||
const token = bearer.slice("Bearer ".length).trim();
|
||||
if (token !== context.config.server.info_secret) {
|
||||
return c.json({ status: "Forbidden" }, 403);
|
||||
}
|
||||
|
||||
const api = context.hsApi.getRuntimeClient("fake-api-key");
|
||||
const healthy = await api.isHealthy();
|
||||
|
||||
return c.json({
|
||||
status: healthy ? "healthy" : "unhealthy",
|
||||
headplane_version: __VERSION__,
|
||||
headscale_canonical_version: healthy ? context.hsApi.apiVersion : "unknown",
|
||||
internal_versions: {
|
||||
node: versions.node,
|
||||
v8: versions.v8,
|
||||
uv: versions.uv,
|
||||
zlib: versions.zlib,
|
||||
openssl: versions.openssl,
|
||||
libc: versions.libc,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
app.get(`${prefix}/api/session`, async (c) => {
|
||||
try {
|
||||
const principal = await context.auth.require(c.req.raw);
|
||||
|
||||
if (principal.kind === "api_key") {
|
||||
return c.json({
|
||||
authenticated: true,
|
||||
principal: {
|
||||
kind: principal.kind,
|
||||
sessionId: principal.sessionId,
|
||||
displayName: principal.displayName,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
return c.json({
|
||||
authenticated: true,
|
||||
principal: {
|
||||
kind: principal.kind,
|
||||
sessionId: principal.sessionId,
|
||||
user: principal.user,
|
||||
profile: principal.profile,
|
||||
},
|
||||
});
|
||||
} catch {
|
||||
return c.json({ authenticated: false }, 401);
|
||||
}
|
||||
});
|
||||
|
||||
app.all(`${prefix}/fate`, fateHandler);
|
||||
app.all(`${prefix}/fate/*`, fateHandler);
|
||||
|
||||
if (staticRoot) {
|
||||
const stripPrefix = (path: string) => path.slice(prefix.length) || "/";
|
||||
|
||||
app.get(prefix, (c) => c.redirect(`${prefix}/`));
|
||||
app.use(
|
||||
`${prefix}/*`,
|
||||
serveStatic({
|
||||
root: staticRoot,
|
||||
rewriteRequestPath: stripPrefix,
|
||||
}),
|
||||
);
|
||||
app.get(`${prefix}/*`, serveStatic({ root: staticRoot, path: "index.html" }));
|
||||
}
|
||||
|
||||
return app;
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
import { createServer } from "node:http";
|
||||
import { exit } from "node:process";
|
||||
|
||||
import { getRequestListener } from "@hono/node-server";
|
||||
import { createServer as createViteServer } from "vite";
|
||||
|
||||
import log from "~/utils/log";
|
||||
|
||||
import { ConfigError } from "./config/error";
|
||||
import { loadConfig } from "./config/load";
|
||||
import { createAppContext } from "./context";
|
||||
import { createHeadplaneHonoApp } from "./hono-app";
|
||||
|
||||
const PREFIX = process.env.__INTERNAL_PREFIX || "/admin";
|
||||
(globalThis as Record<string, unknown>).__PREFIX__ = PREFIX;
|
||||
(globalThis as Record<string, unknown>).__VERSION__ = process.env.HEADPLANE_VERSION ?? "dev";
|
||||
|
||||
let config;
|
||||
try {
|
||||
config = await loadConfig();
|
||||
} catch (error) {
|
||||
if (error instanceof ConfigError) {
|
||||
log.error("server", "Unable to load configuration: %s", error.message);
|
||||
} else {
|
||||
log.error("server", "Failed to load configuration: %s", error);
|
||||
}
|
||||
exit(1);
|
||||
}
|
||||
|
||||
const context = await createAppContext(config);
|
||||
context.auth.start();
|
||||
|
||||
const app = createHeadplaneHonoApp({ context, prefix: PREFIX });
|
||||
const honoListener = getRequestListener(app.fetch);
|
||||
const vite = await createViteServer({
|
||||
appType: "spa",
|
||||
server: {
|
||||
middlewareMode: true,
|
||||
},
|
||||
});
|
||||
|
||||
const server = createServer((req, res) => {
|
||||
if (shouldUseHono(req.url)) {
|
||||
void honoListener(req, res);
|
||||
return;
|
||||
}
|
||||
|
||||
vite.middlewares(req, res, (error?: unknown) => {
|
||||
if (error) {
|
||||
if (error instanceof Error) {
|
||||
vite.ssrFixStacktrace(error);
|
||||
}
|
||||
|
||||
log.error("server", "Vite middleware failed: %s", error);
|
||||
res.statusCode = 500;
|
||||
res.end("Internal Server Error");
|
||||
return;
|
||||
}
|
||||
|
||||
void honoListener(req, res);
|
||||
});
|
||||
});
|
||||
|
||||
server.listen(config.server.port, config.server.host, () => {
|
||||
log.info("server", "Listening on http://%s:%s", config.server.host, config.server.port);
|
||||
});
|
||||
|
||||
function shouldUseHono(rawUrl: string | undefined) {
|
||||
if (!rawUrl) {
|
||||
return false;
|
||||
}
|
||||
|
||||
let pathname;
|
||||
try {
|
||||
pathname = new URL(rawUrl, "http://localhost").pathname;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
|
||||
return (
|
||||
pathname === "/healthz" ||
|
||||
pathname === `${PREFIX}/healthz` ||
|
||||
pathname === `${PREFIX}/fate` ||
|
||||
pathname.startsWith(`${PREFIX}/fate/`) ||
|
||||
pathname.startsWith(`${PREFIX}/api/`)
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import { exit } from "node:process";
|
||||
|
||||
import { serve } from "@hono/node-server";
|
||||
|
||||
import log from "~/utils/log";
|
||||
|
||||
import { ConfigError } from "./config/error";
|
||||
import { loadConfig } from "./config/load";
|
||||
import { createAppContext } from "./context";
|
||||
import { createHeadplaneHonoApp } from "./hono-app";
|
||||
|
||||
const PREFIX = process.env.__INTERNAL_PREFIX || "/admin";
|
||||
(globalThis as Record<string, unknown>).__PREFIX__ = PREFIX;
|
||||
(globalThis as Record<string, unknown>).__VERSION__ = process.env.HEADPLANE_VERSION ?? "dev";
|
||||
|
||||
let config;
|
||||
try {
|
||||
config = await loadConfig();
|
||||
} catch (error) {
|
||||
if (error instanceof ConfigError) {
|
||||
log.error("server", "Unable to load configuration: %s", error.message);
|
||||
} else {
|
||||
log.error("server", "Failed to load configuration: %s", error);
|
||||
}
|
||||
exit(1);
|
||||
}
|
||||
|
||||
const context = await createAppContext(config);
|
||||
context.auth.start();
|
||||
|
||||
const app = createHeadplaneHonoApp({
|
||||
context,
|
||||
prefix: PREFIX,
|
||||
staticRoot: "build/client",
|
||||
});
|
||||
|
||||
serve(
|
||||
{
|
||||
fetch: app.fetch,
|
||||
hostname: config.server.host,
|
||||
port: config.server.port,
|
||||
},
|
||||
(info) => {
|
||||
log.info("server", "Listening on http://%s:%s", info.address, info.port);
|
||||
},
|
||||
);
|
||||
@@ -0,0 +1,23 @@
|
||||
import { RouterProvider } from "@tanstack/react-router";
|
||||
import { Suspense } from "react";
|
||||
import { FateClient } from "react-fate";
|
||||
import { createFateClient } from "react-fate/client";
|
||||
|
||||
import { router } from "./router";
|
||||
|
||||
const fate = createFateClient({
|
||||
fetch: (input, init) => fetch(input, { ...init, credentials: "include" }),
|
||||
url: `${__PREFIX__}/fate`,
|
||||
});
|
||||
|
||||
export function App() {
|
||||
return (
|
||||
<FateClient client={fate}>
|
||||
<Suspense
|
||||
fallback={<div className="min-h-screen bg-neutral-950 p-6 text-neutral-400">Loading…</div>}
|
||||
>
|
||||
<RouterProvider router={router} />
|
||||
</Suspense>
|
||||
</FateClient>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
|
||||
import "~/tailwind.css";
|
||||
import { App } from "./app";
|
||||
|
||||
const root = document.getElementById("root");
|
||||
if (!root) {
|
||||
throw new Error("Unable to find root element");
|
||||
}
|
||||
|
||||
createRoot(root).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
);
|
||||
@@ -0,0 +1,326 @@
|
||||
import { Link, Outlet, createRootRoute, createRoute, createRouter } from "@tanstack/react-router";
|
||||
import { useState, useTransition } from "react";
|
||||
import {
|
||||
useFateClient,
|
||||
useLiveListView,
|
||||
useLiveView,
|
||||
useRequest,
|
||||
view,
|
||||
type ViewRef,
|
||||
} from "react-fate";
|
||||
|
||||
import type { FateMachine, FateUser } from "../server/fate";
|
||||
|
||||
const UserView = view<FateUser>()({
|
||||
displayName: true,
|
||||
email: true,
|
||||
id: true,
|
||||
name: true,
|
||||
});
|
||||
|
||||
const MachineView = view<FateMachine>()({
|
||||
expiry: true,
|
||||
givenName: true,
|
||||
id: true,
|
||||
ipAddresses: true,
|
||||
lastSeen: true,
|
||||
name: true,
|
||||
online: true,
|
||||
tags: true,
|
||||
user: {
|
||||
displayName: true,
|
||||
id: true,
|
||||
name: true,
|
||||
},
|
||||
});
|
||||
|
||||
const MachineConnectionView = {
|
||||
args: { first: 100 },
|
||||
items: {
|
||||
cursor: true,
|
||||
node: MachineView,
|
||||
},
|
||||
pagination: {
|
||||
hasNext: true,
|
||||
hasPrevious: true,
|
||||
nextCursor: true,
|
||||
previousCursor: true,
|
||||
},
|
||||
};
|
||||
|
||||
const UserConnectionView = {
|
||||
args: { first: 100 },
|
||||
items: {
|
||||
cursor: true,
|
||||
node: UserView,
|
||||
},
|
||||
pagination: {
|
||||
hasNext: true,
|
||||
hasPrevious: true,
|
||||
nextCursor: true,
|
||||
previousCursor: true,
|
||||
},
|
||||
};
|
||||
|
||||
const rootRoute = createRootRoute({
|
||||
component: RootLayout,
|
||||
});
|
||||
|
||||
const indexRoute = createRoute({
|
||||
getParentRoute: () => rootRoute,
|
||||
path: "/",
|
||||
component: HomePage,
|
||||
});
|
||||
|
||||
const machinesRoute = createRoute({
|
||||
getParentRoute: () => rootRoute,
|
||||
path: "/machines",
|
||||
component: MachinesPage,
|
||||
});
|
||||
|
||||
const usersRoute = createRoute({
|
||||
getParentRoute: () => rootRoute,
|
||||
path: "/users",
|
||||
component: UsersPage,
|
||||
});
|
||||
|
||||
const routeTree = rootRoute.addChildren([indexRoute, machinesRoute, usersRoute]);
|
||||
|
||||
export const router = createRouter({
|
||||
basepath: __PREFIX__,
|
||||
routeTree,
|
||||
});
|
||||
|
||||
declare module "@tanstack/react-router" {
|
||||
interface Register {
|
||||
router: typeof router;
|
||||
}
|
||||
}
|
||||
|
||||
function RootLayout() {
|
||||
return (
|
||||
<div className="min-h-screen bg-neutral-950 text-white">
|
||||
<header className="border-b border-white/10 px-6 py-4">
|
||||
<nav className="flex gap-4 text-sm">
|
||||
<Link to="/">Home</Link>
|
||||
<Link to="/machines">Machines</Link>
|
||||
<Link to="/users">Users</Link>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main className="p-6">
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function HomePage() {
|
||||
return (
|
||||
<section className="space-y-2">
|
||||
<h1 className="text-2xl font-semibold">Headplane SPA</h1>
|
||||
<p className="text-neutral-400">
|
||||
This is the one-way SPA shell. Data should move to raw Fate views and actions.
|
||||
</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function MachinesPage() {
|
||||
const { machines } = useRequest({ machines: { list: MachineConnectionView } });
|
||||
const [machineItems, loadNext] = useLiveListView(MachineConnectionView, machines);
|
||||
|
||||
return (
|
||||
<section className="space-y-4">
|
||||
<h1 className="text-2xl font-semibold">Machines</h1>
|
||||
|
||||
{machineItems.length === 0 ? (
|
||||
<p className="rounded-lg border border-white/10 bg-white/5 p-4 text-neutral-400">
|
||||
No machines returned from Headscale.
|
||||
</p>
|
||||
) : (
|
||||
<div className="overflow-hidden rounded-xl border border-white/10">
|
||||
<table className="min-w-full divide-y divide-white/10 text-left text-sm">
|
||||
<thead className="bg-white/5 text-xs tracking-wide text-neutral-400 uppercase">
|
||||
<tr>
|
||||
<th className="px-4 py-3 font-medium">Machine</th>
|
||||
<th className="px-4 py-3 font-medium">User</th>
|
||||
<th className="px-4 py-3 font-medium">Addresses</th>
|
||||
<th className="px-4 py-3 font-medium">Status</th>
|
||||
<th className="px-4 py-3 font-medium">Last seen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-white/10">
|
||||
{machineItems.map(({ node: machine }) => (
|
||||
<MachineRow key={machine.id} machine={machine} />
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loadNext ? (
|
||||
<button
|
||||
className="rounded-lg border border-white/10 px-3 py-2 text-sm text-neutral-200 hover:bg-white/10"
|
||||
onClick={() => void loadNext()}
|
||||
type="button"
|
||||
>
|
||||
Load more machines
|
||||
</button>
|
||||
) : null}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function MachineRow({ machine: machineRef }: { machine: ViewRef<"Machine"> }) {
|
||||
const fate = useFateClient();
|
||||
const machine = useLiveView(MachineView, machineRef);
|
||||
const currentName = machine.givenName || machine.name;
|
||||
const [name, setName] = useState(currentName);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isPending, startTransition] = useTransition();
|
||||
|
||||
const rename = () => {
|
||||
const nextName = name.trim();
|
||||
if (!nextName || nextName === currentName) {
|
||||
return;
|
||||
}
|
||||
|
||||
startTransition(() => {
|
||||
void (async () => {
|
||||
setError(null);
|
||||
const result = await fate.mutations.machine.rename({
|
||||
input: { id: machine.id, name: nextName },
|
||||
view: MachineView,
|
||||
});
|
||||
|
||||
if (result.error) {
|
||||
setError(result.error.message);
|
||||
return;
|
||||
}
|
||||
|
||||
setName(nextName);
|
||||
})();
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<tr className="bg-neutral-950/80">
|
||||
<td className="px-4 py-3 align-top">
|
||||
<div className="font-medium text-white">{currentName}</div>
|
||||
<div className="text-xs text-neutral-500">{machine.id}</div>
|
||||
<form
|
||||
className="mt-2 flex max-w-sm gap-2"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
rename();
|
||||
}}
|
||||
>
|
||||
<input
|
||||
className="min-w-0 flex-1 rounded-md border border-white/10 bg-neutral-900 px-2 py-1 text-xs text-white outline-none focus:border-cyan-400"
|
||||
disabled={isPending}
|
||||
onChange={(event) => setName(event.currentTarget.value)}
|
||||
value={name}
|
||||
/>
|
||||
<button
|
||||
className="rounded-md border border-white/10 px-2 py-1 text-xs text-neutral-200 hover:bg-white/10 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
disabled={isPending || !name.trim() || name.trim() === currentName}
|
||||
type="submit"
|
||||
>
|
||||
{isPending ? "Saving" : "Rename"}
|
||||
</button>
|
||||
</form>
|
||||
{error ? <div className="mt-1 text-xs text-red-300">{error}</div> : null}
|
||||
{machine.tags.length > 0 ? (
|
||||
<div className="mt-2 flex flex-wrap gap-1">
|
||||
{machine.tags.map((tag) => (
|
||||
<span
|
||||
className="rounded-full bg-cyan-400/10 px-2 py-0.5 text-xs text-cyan-200"
|
||||
key={tag}
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</td>
|
||||
<td className="px-4 py-3 align-top text-neutral-300">
|
||||
{machine.user ? machine.user.displayName || machine.user.name : "Tag-owned"}
|
||||
</td>
|
||||
<td className="px-4 py-3 align-top text-neutral-300">
|
||||
<div className="flex flex-col gap-1 font-mono text-xs">
|
||||
{machine.ipAddresses.map((ip) => (
|
||||
<span key={ip}>{ip}</span>
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3 align-top">
|
||||
<span
|
||||
className={
|
||||
machine.online
|
||||
? "rounded-full bg-green-400/10 px-2 py-1 text-xs text-green-200"
|
||||
: "rounded-full bg-neutral-700 px-2 py-1 text-xs text-neutral-300"
|
||||
}
|
||||
>
|
||||
{machine.online ? "Online" : "Offline"}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 align-top text-neutral-300">{formatDate(machine.lastSeen)}</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
function UsersPage() {
|
||||
const { users } = useRequest({ users: { list: UserConnectionView } });
|
||||
const [userItems, loadNext] = useLiveListView(UserConnectionView, users);
|
||||
|
||||
return (
|
||||
<section className="space-y-4">
|
||||
<h1 className="text-2xl font-semibold">Users</h1>
|
||||
|
||||
{userItems.length === 0 ? (
|
||||
<p className="rounded-lg border border-white/10 bg-white/5 p-4 text-neutral-400">
|
||||
No users returned from Headscale.
|
||||
</p>
|
||||
) : (
|
||||
<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
|
||||
{userItems.map(({ node: user }) => (
|
||||
<UserCard key={user.id} user={user} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loadNext ? (
|
||||
<button
|
||||
className="rounded-lg border border-white/10 px-3 py-2 text-sm text-neutral-200 hover:bg-white/10"
|
||||
onClick={() => void loadNext()}
|
||||
type="button"
|
||||
>
|
||||
Load more users
|
||||
</button>
|
||||
) : null}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function UserCard({ user: userRef }: { user: ViewRef<"User"> }) {
|
||||
const user = useLiveView(UserView, userRef);
|
||||
|
||||
return (
|
||||
<article className="rounded-xl border border-white/10 bg-white/5 p-4">
|
||||
<div className="font-medium text-white">{user.displayName || user.name}</div>
|
||||
<div className="text-sm text-neutral-400">{user.name}</div>
|
||||
{user.email ? <div className="mt-2 text-sm text-neutral-300">{user.email}</div> : null}
|
||||
<div className="mt-3 font-mono text-xs text-neutral-500">{user.id}</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
function formatDate(value: string | null | undefined) {
|
||||
if (!value) return "Never";
|
||||
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return value;
|
||||
|
||||
return date.toLocaleString();
|
||||
}
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Headplane</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/app/spa/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
+11
-4
@@ -6,10 +6,10 @@
|
||||
"sideEffects": false,
|
||||
"scripts": {
|
||||
"preinstall": "npx only-allow pnpm",
|
||||
"build": "react-router build",
|
||||
"dev": "HEADPLANE_CONFIG_PATH=./config.example.yaml react-router dev",
|
||||
"start": "node build/server/index.js",
|
||||
"typecheck": "react-router typegen && tsgo",
|
||||
"build": "vite build",
|
||||
"dev": "HEADPLANE_CONFIG_PATH=./config.example.yaml HEADPLANE_SERVER__DATA_PATH=./.data tsx app/server/hono-dev.ts",
|
||||
"start": "tsx app/server/hono-main.ts",
|
||||
"typecheck": "fate generate && react-router typegen && tsgo",
|
||||
"test:unit": "vitest run --project unit",
|
||||
"test:integration": "vitest run --project integration:*",
|
||||
"docs:dev": "vitepress dev docs",
|
||||
@@ -28,15 +28,19 @@
|
||||
"@dnd-kit/sortable": "^8.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"@fontsource-variable/inter": "^5.2.8",
|
||||
"@hono/node-server": "^2.0.2",
|
||||
"@iconify/react": "^6.0.2",
|
||||
"@kubernetes/client-node": "^1.4.0",
|
||||
"@lezer/highlight": "^1.2.3",
|
||||
"@nkzw/fate": "^1.0.2",
|
||||
"@react-router/node": "^7.14.0",
|
||||
"@readme/openapi-parser": "^6.0.1",
|
||||
"@tanstack/react-router": "^1.170.3",
|
||||
"@uiw/react-codemirror": "4.25.9",
|
||||
"arktype": "^2.2.0",
|
||||
"clsx": "^2.1.1",
|
||||
"drizzle-orm": "1.0.0-beta.21",
|
||||
"hono": "^4.12.19",
|
||||
"isbot": "5.1.37",
|
||||
"jose": "6.2.2",
|
||||
"js-yaml": "^4.1.1",
|
||||
@@ -47,6 +51,7 @@
|
||||
"react-codemirror-merge": "4.25.9",
|
||||
"react-dom": "19.2.5",
|
||||
"react-error-boundary": "^6.1.1",
|
||||
"react-fate": "^1.0.2",
|
||||
"react-router": "^7.14.0",
|
||||
"react-router-dom": "^7.14.0",
|
||||
"restty": "^0.1.35",
|
||||
@@ -59,11 +64,13 @@
|
||||
"@react-router/dev": "^7.14.0",
|
||||
"@shopify/lang-jsonc": "^1.0.1",
|
||||
"@tailwindcss/vite": "^4.2.2",
|
||||
"@tanstack/router-plugin": "^1.168.4",
|
||||
"@types/js-yaml": "^4.0.9",
|
||||
"@types/node": "^25.6.0",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@typescript/native-preview": "7.0.0-dev.20260410.1",
|
||||
"@vitejs/plugin-react": "^6.0.2",
|
||||
"drizzle-kit": "1.0.0-beta.21",
|
||||
"lefthook": "^2.1.5",
|
||||
"oxfmt": "^0.44.0",
|
||||
|
||||
Generated
+476
-28
File diff suppressed because it is too large
Load Diff
+7
-1
@@ -1,5 +1,11 @@
|
||||
{
|
||||
"include": ["**/*", "**/.server/**/*", "**/.client/**/*", ".react-router/types/**/*"],
|
||||
"include": [
|
||||
"**/*",
|
||||
"**/.server/**/*",
|
||||
"**/.client/**/*",
|
||||
".fate/**/*",
|
||||
".react-router/types/**/*"
|
||||
],
|
||||
"exclude": ["docs"],
|
||||
"compilerOptions": {
|
||||
"lib": ["DOM", "DOM.Iterable", "ES2023"],
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
import { execSync } from "node:child_process";
|
||||
import { readFile } from "node:fs/promises";
|
||||
|
||||
import { reactRouter } from "@react-router/dev/vite";
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
import { defineConfig } from "vite";
|
||||
import { parse } from "yaml";
|
||||
|
||||
import { headplaneDevServer } from "./runtime/vite-plugin";
|
||||
|
||||
const PROD_ENTRY = "./app/server/main.ts";
|
||||
const DEV_ENTRY = "./app/server/app.ts";
|
||||
|
||||
const PREFIX = process.env.__INTERNAL_PREFIX || "/admin";
|
||||
if (PREFIX.endsWith("/")) {
|
||||
throw new Error("Prefix must not end with a slash");
|
||||
}
|
||||
|
||||
// Derive version: HEADPLANE_VERSION env > git describe > package.json
|
||||
const isNext = process.env.IMAGE_TAG?.includes("next");
|
||||
let VERSION: string;
|
||||
if (process.env.HEADPLANE_VERSION) {
|
||||
VERSION = process.env.HEADPLANE_VERSION;
|
||||
} else {
|
||||
try {
|
||||
const describe = execSync("git describe --tags", { encoding: "utf-8" })
|
||||
.trim()
|
||||
.replace(/^v/, "");
|
||||
const tag = execSync("git describe --tags --abbrev=0", { encoding: "utf-8" })
|
||||
.trim()
|
||||
.replace(/^v/, "");
|
||||
VERSION = describe === tag ? tag : `${tag}-dev+${describe.split("-").pop()}`;
|
||||
} catch {
|
||||
const pkg = await readFile("package.json", "utf-8");
|
||||
VERSION = JSON.parse(pkg).version;
|
||||
}
|
||||
}
|
||||
|
||||
if (!VERSION) {
|
||||
throw new Error("Unable to determine version");
|
||||
}
|
||||
|
||||
// Load the config without any environment variables (not needed here)
|
||||
const config = await readFile("config.example.yaml", "utf-8");
|
||||
const { server } = parse(config);
|
||||
|
||||
export default defineConfig(({ command, isSsrBuild }) => ({
|
||||
base: command === "build" ? `${PREFIX}/` : undefined,
|
||||
plugins: [
|
||||
headplaneDevServer({
|
||||
entry: DEV_ENTRY,
|
||||
basename: PREFIX,
|
||||
publicDir: new URL("./public", import.meta.url).pathname,
|
||||
}),
|
||||
reactRouter(),
|
||||
tailwindcss(),
|
||||
],
|
||||
server: {
|
||||
host: server.host,
|
||||
port: server.port,
|
||||
},
|
||||
resolve: {
|
||||
tsconfigPaths: true,
|
||||
},
|
||||
build: {
|
||||
target: "baseline-widely-available",
|
||||
sourcemap: true,
|
||||
rollupOptions:
|
||||
command === "build"
|
||||
? {
|
||||
// Override the SSR build entry so React Router emits the
|
||||
// production bootstrap (`app/server/main.ts`) as
|
||||
// `build/server/index.js`. It transitively imports the
|
||||
// SSR entry, which pulls in the React Router server build
|
||||
// via the virtual module `virtual:react-router/server-build`.
|
||||
input: isSsrBuild ? PROD_ENTRY : undefined,
|
||||
|
||||
// Exclude WASM from the client since it fetches from the server
|
||||
external: isSsrBuild ? [] : [/\.wasm(\?url)?$/],
|
||||
}
|
||||
: undefined,
|
||||
},
|
||||
ssr: {
|
||||
noExternal: command === "build" ? true : undefined,
|
||||
},
|
||||
define: {
|
||||
__VERSION__: JSON.stringify(isNext ? `${VERSION}-next` : VERSION),
|
||||
__PREFIX__: JSON.stringify(PREFIX),
|
||||
},
|
||||
}));
|
||||
+20
-35
@@ -1,22 +1,18 @@
|
||||
import { execSync } from "node:child_process";
|
||||
import { readFile } from "node:fs/promises";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
import { reactRouter } from "@react-router/dev/vite";
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
import { fate } from "react-fate/vite";
|
||||
import { defineConfig } from "vite";
|
||||
import { parse } from "yaml";
|
||||
|
||||
import { headplaneDevServer } from "./runtime/vite-plugin";
|
||||
|
||||
const PROD_ENTRY = "./app/server/main.ts";
|
||||
const DEV_ENTRY = "./app/server/app.ts";
|
||||
|
||||
const PREFIX = process.env.__INTERNAL_PREFIX || "/admin";
|
||||
if (PREFIX.endsWith("/")) {
|
||||
throw new Error("Prefix must not end with a slash");
|
||||
}
|
||||
|
||||
// Derive version: HEADPLANE_VERSION env > git describe > package.json
|
||||
const isNext = process.env.IMAGE_TAG?.includes("next");
|
||||
let VERSION: string;
|
||||
if (process.env.HEADPLANE_VERSION) {
|
||||
@@ -40,19 +36,18 @@ if (!VERSION) {
|
||||
throw new Error("Unable to determine version");
|
||||
}
|
||||
|
||||
// Load the config without any environment variables (not needed here)
|
||||
const config = await readFile("config.example.yaml", "utf-8");
|
||||
const { server } = parse(config);
|
||||
|
||||
export default defineConfig(({ command, isSsrBuild }) => ({
|
||||
base: command === "build" ? `${PREFIX}/` : undefined,
|
||||
export default defineConfig({
|
||||
appType: "spa",
|
||||
base: `${PREFIX}/`,
|
||||
plugins: [
|
||||
headplaneDevServer({
|
||||
entry: DEV_ENTRY,
|
||||
basename: PREFIX,
|
||||
publicDir: new URL("./public", import.meta.url).pathname,
|
||||
fate({
|
||||
module: "./app/server/fate.ts",
|
||||
transport: "native",
|
||||
}),
|
||||
reactRouter(),
|
||||
react(),
|
||||
tailwindcss(),
|
||||
],
|
||||
server: {
|
||||
@@ -60,31 +55,21 @@ export default defineConfig(({ command, isSsrBuild }) => ({
|
||||
port: server.port,
|
||||
},
|
||||
resolve: {
|
||||
tsconfigPaths: true,
|
||||
alias: {
|
||||
"~": fileURLToPath(new URL("./app", import.meta.url)),
|
||||
},
|
||||
},
|
||||
build: {
|
||||
target: "baseline-widely-available",
|
||||
emptyOutDir: true,
|
||||
outDir: "build/client",
|
||||
sourcemap: true,
|
||||
rollupOptions:
|
||||
command === "build"
|
||||
? {
|
||||
// Override the SSR build entry so React Router emits the
|
||||
// production bootstrap (`app/server/main.ts`) as
|
||||
// `build/server/index.js`. It transitively imports the
|
||||
// SSR entry, which pulls in the React Router server build
|
||||
// via the virtual module `virtual:react-router/server-build`.
|
||||
input: isSsrBuild ? PROD_ENTRY : undefined,
|
||||
|
||||
// Exclude WASM from the client since it fetches from the server
|
||||
external: isSsrBuild ? [] : [/\.wasm(\?url)?$/],
|
||||
}
|
||||
: undefined,
|
||||
},
|
||||
ssr: {
|
||||
noExternal: command === "build" ? true : undefined,
|
||||
target: "baseline-widely-available",
|
||||
rollupOptions: {
|
||||
external: [/\.wasm(\?url)?$/],
|
||||
},
|
||||
},
|
||||
define: {
|
||||
__VERSION__: JSON.stringify(isNext ? `${VERSION}-next` : VERSION),
|
||||
__PREFIX__: JSON.stringify(PREFIX),
|
||||
},
|
||||
}));
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user