feat(frontend): redesign hub navigation, org creation, and project NUX (#5064)

## Summary

- Refresh the hub dashboard chrome: new top bar, settings drawer, sidebar cleanup (drops `sidebar-toggle.tsx`), feedback / help buttons, restyled dropdowns/cards.
- New "Create a new organization" page (`new-org-page.tsx`) with an animated gradient orb avatar + client-side image upload (resized to 256x256 JPEG and stored as a data URL on `org.logo`). The same `paletteForLetter` palette (orange / cream / blue / green / purple / pink / teal / yellow keyed off the org name) is used in the org switcher, user dropdown, and `cloud-organization-select` fallback avatars.
- New `org-landing` page (`/orgs/$organization`) with project grid + inline members section. New project NUX (`actors-grid`, `namespaces-grid`, settings panels under `settings-pages/`) and a polished context-switcher.
- `serverless-connection-check`: replace the broken `error.error.{message,details}` destructure with a tagged-union formatter over `RunnerConfigsServerlessMetadataError` (handles `invalidRequest`, `requestFailed`, `requestTimedOut`, `nonSuccessStatus`, `invalidResponseJson`, `invalidResponseSchema`, `invalidEnvoyProtocolVersion`).
- `user-dropdown`: drop the invalid `side="left"` prop on `<DropdownMenuSubContent>` (Radix infers side from the trigger).
- `vite.config.ts`: add `allowedHosts: ["local.staging.rivet.dev"]` so teammates can hit the dev tunnel without re-editing.

## Known limitations

- **Org logo upload is client-only.** Image is stored as a base64 data URL in `org.logo` via `authClient.organization.create({ logo })`. Works end-to-end with no backend changes but bloats the org record for large pictures. Real object-storage upload requires a backend endpoint.
- **Project-level cross-namespace builds.** The context-switcher's namespace popover still assumes the current-namespace engine token; listing actor names across other namespaces would need a new cloud-api endpoint.

## Test plan

- [ ] `pnpm run check-types` passes (verified locally).
- [ ] `pnpm test` passes (13 tests, verified locally).
- [ ] Walk the chrome on `https://local.staging.rivet.dev` against the dev tunnel.
- [ ] Create a new org (with + without avatar upload) and confirm the gradient + letter render in the user dropdown and switcher list.
- [ ] Open an org with multiple projects and verify the org landing page, project tiles, and members section.
- [ ] Trigger a serverless health-check failure and confirm the new error formatter renders a useful message for each variant.

Author: NicholasKissel

.agent/notes/hub-foundry-restyle.md

@@ -0,0 +1,74 @@
+# Hub frontend Foundry restyle
+
+Mirror the visual language of `sandbox-agent-v2/dhaka/frontend/packages/website` (Foundry) across `cairo/frontend`. Phased so each chunk can land independently.
+
+## Status: code-complete pending visual QA.
+
+## Foundry traits mirrored
+- Dark mode only. Cool zinc-blacks (`#09090b`, `#0f0f11`, `#0c0c0e`) instead of cairo's warm-brown.
+- IBM Plex Sans (body + headings) + IBM Plex Mono.
+- Glass surfaces: `bg-white/[0.02] backdrop-blur-md border border-white/10`, hover border `white/20`.
+- White-on-black primary button: not adopted — kept Rivet's orange primary (brand).
+- `rounded-lg` (buttons / inputs) and `rounded-xl` (cards / modals).
+- Orange accent at `#ff4f00`/`#ff5500` (Rivet brand).
+- Utilities lifted: `.glass`, `.glass-strong`, `.glow-accent`, `.shine-top`, `.text-gradient-accent`.
+
+## Non-goals
+- Keep FontAwesome (`@rivet-gg/icons`); did not swap to lucide.
+- Did not rewrite component file structure.
+- Did not touch workflow-diagram (XYFlow) or Shiki code-highlight colors.
+
+## Files touched
+
+### Phase 1 — Foundation
+- `frontend/packages/components/public/theme.css` — cool zinc HSL tokens, dropped light mode, IBM Plex `@import`.
+- `frontend/src/components/theme.css` — same updates (less likely to be loaded but kept in sync).
+- `frontend/src/components/tailwind-base.ts` — `fontFamily.sans` → IBM Plex Sans; added `fontFamily.mono`.
+- `frontend/src/index.css` — added `.glass`, `.glass-strong`, `.glow-accent`, `.shine-top`, `.text-gradient-accent` in `@layer components`.
+
+### Phase 2 — Primitives
+- `frontend/src/components/ui/button.tsx` — base `rounded-lg`; rebuilt secondary/outline/ghost variants on `border-white/10` + hover `border-white/20` + `bg-white/[0.06]` hover bg.
+- `frontend/src/components/ui/input.tsx` — `bg-white/[0.02]`, `border-white/10`, hover lift.
+- `frontend/src/components/ui/textarea.tsx` — same.
+- `frontend/src/components/ui/select.tsx` — same on trigger.
+- `frontend/src/components/ui/card.tsx` — `rounded-xl border-white/10`.
+- `frontend/src/components/ui/dialog.tsx` — overlay `bg-background/70 backdrop-blur-md`; content `rounded-xl border-white/10 bg-card shadow-2xl`.
+
+### Phase 3 — Chrome
+- `frontend/src/app/layout.tsx` — sidebar `border-r border-white/10`; `HeaderLink` active state `bg-white/[0.06]`.
+- `frontend/src/app/actor-builds-list.tsx` — active state `bg-white/[0.06]`.
+- `frontend/src/components/ui/popover.tsx` — glass surface, `rounded-lg`.
+- `frontend/src/components/ui/dropdown-menu.tsx` — glass surface on both Content + SubContent, `rounded-lg`.
+- `frontend/src/components/ui/tooltip.tsx` — glass surface.
+- `frontend/src/components/ui/sonner.tsx` — `theme="dark"`, glass toast surface, `rounded-lg`.
+- `frontend/src/components/ui/sheet.tsx` — overlay `bg-background/70 backdrop-blur-md`.
+
+### Phase 4 — New flow surfaces
+- `frontend/src/app/forms/create-project-form.tsx` — type cards: glass + `border-white/10` → `border-primary glow-accent` when selected.
+- `frontend/src/app/actors-grid.tsx` — `GridCard` glass + hover border-shift; outer wrapper `rounded-xl border-white/10`; build icon container `bg-white/[0.06]`.
+- `frontend/src/app/agent-panel.tsx` — chat bubbles: agent `bg-white/[0.04]`, user `bg-primary/15 border-primary/20`; avatar `bg-white/[0.06]`; bubbles `rounded-lg`.
+- `frontend/src/app/namespace-agent-layout.tsx` — agent column wrapper `rounded-xl border-white/10`.
+
+### Phase 5 — Polish
+- `frontend/src/components/ui/typography.tsx` — H1 `text-2xl lg:text-3xl tracking-tight`; H2 `text-2xl`; H3 `text-xl` (was H1 `text-xl lg:text-4xl`, H2 `text-3xl`, H3 `text-2xl`).
+- `frontend/src/components/mdx/index.tsx` — `Note` callout swapped from `text-gray-*` literals to tokens.
+- `frontend/src/components/actors/guard-connectable-inspector.tsx` — `text-gray-600` → `text-muted-foreground`.
+
+## Visual QA checklist (Task #19)
+Walk these routes at `https://local.staging.rivet.dev`. Screenshot anything that regresses.
+
+- `/login` — login form, Google button, Turnstile presence.
+- `/orgs/$org` — context switcher, project list.
+- `/orgs/$org/new` — new project creation form (the new flow I built).
+- `/orgs/$org/projects/$project` — namespace list redirect.
+- `/orgs/$org/projects/$project/ns/$namespace` — actors grid landing (the new flow).
+- `/orgs/$org/projects/$project/ns/$namespace?n=…` — list+inspector view, tabs (Config, State, Database, Logs, Queue, Workflow, Connections).
+- `/orgs/$org/projects/$project/ns/$namespace/settings` — settings page.
+- `/orgs/$org/projects/$project/ns/$namespace/billing` — billing.
+- Agent panel toggle (bottom-right pill) — collapse/expand, chat bubbles.
+- Modals reachable via header dropdowns: Feedback, CreateNamespace, CreateOrganization, OrgMembers.
+- Toasts (any mutation that triggers one).
+
+## Approach
+- One PR per phase (or all-in-one if user prefers).
+- Verify in browser at `https://local.staging.rivet.dev` after each phase (vite + cloudflared tunnel running locally).

.claude/reference/feature-flags.md

@@ -0,0 +1,61 @@
+# Frontend Feature Flags
+
+The dashboard runs against several deployment flavors (full cloud, OSS self-host, enterprise/on-prem). A feature flag lets each flavor turn a capability on or off without forking the code. Flags are the mechanism that keeps one frontend build serving every flavor.
+
+## Where flags live
+
+All flags are defined in one place: [frontend/src/lib/features.ts](../../frontend/src/lib/features.ts). Consume them with:
+
+```ts
+import { features } from "@/lib/features";
+
+if (features.platform) {
+  // cloud-platform-only UI
+}
+```
+
+- Source of truth at runtime is the `VITE_FEATURE_FLAGS` env var: a comma-separated list of enabled flag names.
+- In dev (`import.meta.env.DEV`), a `localStorage` key `FEATURE_FLAGS` overrides the env var so a flavor can be simulated locally.
+- **Unset (`undefined`) means every flag is on** — that is the full cloud build. An empty/explicit list opts in only to the named flags.
+- Some flags imply others (e.g. `platform` requires `auth`; `acl` is implied by `platform`). Encode those dependencies in `features.ts`, not at each call site.
+
+## Current flags
+
+| Flag | Meaning |
+| --- | --- |
+| `auth` | Dashboard ships a login/register flow. NOT a proxy for "engine requires credentials." |
+| `platform` | Cloud platform stack: publishable-token endpoint, billing, projects, multi-tenancy. Implies `auth`. (`multitenancy` is a legacy alias accepted during rollover.) |
+| `acl` | Engine enforces token auth on the public endpoint. Implied by `platform`; set independently for enterprise. |
+| `billing` | Billing UI. |
+| `captcha` | Turnstile captcha on auth forms. Requires `auth`. |
+| `support` | Support/help affordances. |
+| `branding` | Rivet branding chrome. |
+| `datacenter` | Datacenter-related UI. |
+| `danger-zone` | Destructive settings actions (`features.dangerZone`). |
+
+Deployment flavors map to flag sets roughly as: **cloud** = all on; **OSS** = `auth`/`platform`/`acl` off; **enterprise** = `acl` on, `auth`/`platform` off (engine enforces auth without a login UI). Do not treat `platform`/`auth` as "engine requires credentials" — that is `acl`.
+
+## When to add a new flag
+
+**A new pack of features must ship behind a feature flag whenever it is significant or not universally available across deployment flavors.** The goal is that every flavor can freely enable or disable it.
+
+Add a flag when the feature:
+
+- Is unavailable, restricted, or behaves differently on at least one deployment flavor (cloud / OSS / enterprise), OR
+- Introduces a substantial new surface (a whole panel, page, settings section, or subsystem) that a flavor may want to turn off.
+
+Do **not** add a flag for:
+
+- Small, universal changes (bug fixes, copy tweaks, layout polish, a single button that every flavor always shows).
+- Anything that is always on everywhere — that is just code.
+
+Avoid flag sprawl: do not gate everything. One flag per meaningful capability, not per component.
+
+**If you are unsure whether a feature needs a flag, confirm with the user before adding (or omitting) one.** When in doubt, ask rather than guessing — flags are hard to remove once flavors depend on them.
+
+## Consistency rules
+
+- Add the flag in `features.ts` with a one-line comment on what it gates and any implied dependencies; do not read `VITE_FEATURE_FLAGS` or `import.meta.env` directly elsewhere.
+- Name flags after the capability (`billing`, `support`), not the deployment (`enterprise-only`). Deployment flavor is composed from flags, not the other way around.
+- Encode flag-implies-flag relationships in `features.ts` so call sites stay simple booleans.
+- When a flag changes the set of flavors, update the deployment-flavor mapping above and any docs that describe what each flavor ships.

CLAUDE.md

@@ -79,6 +79,22 @@ docker-compose up -d
 
 **Never push to `main` unless explicitly specified by the user.**
 
+## Frontend Visual Changes
+
+- For any frontend visual change, use the `agent-browser` skill to view the result in a browser instead of working blind. If it is not installed, prompt the user to install it.
+- The frontend dashboard dev server always runs at `http://localhost:43708/`. Check that it is already serving there before starting a new one.
+
+## Frontend Forms
+
+- Manage all user-submitted form state with `react-hook-form`. Do not hand-roll form state with `useState`-driven controlled inputs. Wrapping a controlled UI-library input (e.g. a shadcn `Select`) in RHF's `<Controller>` is still react-hook-form owning the state and is fine.
+
+## Frontend Feature Flags
+
+- The dashboard serves multiple deployment flavors (cloud / OSS / enterprise) from one build via flags in `frontend/src/lib/features.ts`; consume them through `import { features } from "@/lib/features"`, never by reading `VITE_FEATURE_FLAGS` directly.
+- Ship a new pack of features behind a feature flag whenever it is significant (a whole panel/page/subsystem) or not universally available across flavors, so each flavor can freely enable or disable it. Do not gate small universal changes, and do not make flags for everything.
+- If unsure whether a feature needs a flag, confirm the need with the user before adding or omitting one.
+- See [Feature flags](.claude/reference/feature-flags.md) for the flag list, flavor mapping, and consistency rules.
+
 ## Frontend Routing (TanStack Router)
 
 ### Route context vs loader data
@@ -327,6 +343,7 @@ Load these only when the task touches the topic.
 ### Agent procedural (`.claude/reference/`)
 
 - **[Testing](.claude/reference/testing.md)** — running RivetKit tests, Vitest filter gotchas, driver-test parity workflow, Rust test layout.
+- **[Feature flags](.claude/reference/feature-flags.md)** — frontend `features.*` system, deployment-flavor mapping, when to add a flag, consistency rules.
 - **[Build troubleshooting](.claude/reference/build-troubleshooting.md)** — DTS failures, NAPI rebuild, `JsActorConfig` field churn, tsup stale exports.
 - **[Docs sync](.claude/reference/docs-sync.md)** — full table of "when you change X, update docs Y". Consult before finishing a change.
 - **[Content frontmatter](.claude/reference/content-frontmatter.md)** — required frontmatter schemas for docs + blog/changelog.

frontend/packages/components/public/theme.css

@@ -1,58 +1,56 @@
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
+
 :root {
+	/* Light tokens — kept as a fallback. App pins `<html class="dark">`
+	   in index.html so these only render if dark is ever removed. */
 	--background: 0 0% 100%;
-	--foreground: 20 14.3% 4.1%;
+	--foreground: 240 10% 4%;
 	--card: 0 0% 100%;
-	--card-foreground: 20 14.3% 4.1%;
+	--card-foreground: 240 10% 4%;
 	--popover: 0 0% 100%;
-	--popover-foreground: 20 14.3% 4.1%;
-	--primary: 24.6 95% 53.1%;
-	--primary-foreground: 60 9.1% 97.8%;
-	--secondary: 60 4.8% 95.9%;
-	--secondary-foreground: 24 9.8% 10%;
-	--muted: 60 4.8% 95.9%;
-	--muted-foreground: 25 5.3% 44.7%;
-	--muted-destructive: 0 72% 30%;
-	--accent: 60 4.8% 95.9%;
-	--accent-foreground: 24 9.8% 10%;
+	--popover-foreground: 240 10% 4%;
+	--primary: 18.5 100% 50%;
+	--primary-foreground: 0 0% 100%;
+	--secondary: 240 5% 96%;
+	--secondary-foreground: 240 10% 4%;
+	--muted: 240 5% 96%;
+	--muted-foreground: 240 4% 46%;
+	--accent: 240 5% 96%;
+	--accent-foreground: 240 10% 4%;
 	--destructive: 0 84.2% 60.2%;
-	--destructive-foreground: 60 9.1% 97.8%;
-	--border: 20 5.9% 90%;
-	--input: 20 5.9% 90%;
-	--ring: 24.6 95% 53.1%;
+	--destructive-foreground: 0 0% 100%;
+	--border: 240 6% 90%;
+	--input: 240 6% 90%;
+	--ring: 18.5 100% 50%;
 	--radius: 0.5rem;
 }
 :root[class~="dark"] {
-	--background: 20 14.3% 4.1%;
-	--foreground: 60 9.1% 97.8%;
-	--card: 0 9.09% 6.47%;
-	--card-foreground: 60 9.1% 97.8%;
-	--popover: 0 9.09% 6.47%;
-	--popover-foreground: 60 9.1% 97.8%;
+	/* Cool zinc neutrals — mirrors Foundry's #09090b / #0c0c0e / #0f0f11. */
+	--background: 240 6% 4%;
+	--foreground: 0 0% 100%;
+	--card: 240 7% 5%;
+	--card-foreground: 0 0% 100%;
+	--popover: 240 7% 5%;
+	--popover-foreground: 0 0% 100%;
 	--primary: 18.5 100% 50%;
-	--primary-foreground: 60 9.1% 97.8%;
-	--secondary: 12 6.5% 15.1%;
-	--secondary-foreground: 60 9.1% 97.8%;
-	--muted: 34 10% 10%;
-	--muted-foreground: 24 5.4% 63.9%;
-	--accent: 12 6.5% 15.1%;
-	--accent-foreground: 60 9.1% 97.8%;
+	--primary-foreground: 0 0% 100%;
+	--secondary: 240 5% 7%;
+	--secondary-foreground: 0 0% 100%;
+	--muted: 240 5% 9%;
+	--muted-foreground: 240 5% 65%;
+	--accent: 240 5% 9%;
+	--accent-foreground: 0 0% 100%;
 	--destructive: 0 72.2% 50.6%;
-	--destructive-foreground: 60 9.1% 97.8%;
+	--destructive-foreground: 0 0% 100%;
 	--warning: 47.9 95.8% 53.1%;
-	--border: 12 6.5% 15.1%;
-	--input: 12 6.5% 15.1%;
+	/* Visual equivalent of white/10 over the background. */
+	--border: 240 5% 14%;
+	--input: 240 5% 14%;
 	--ring: 18.59deg 100% 50%;
-	--background-main: 0 7.14% 5.49%;
-}
-
-:root {
-	--chart-1: 12 76% 61%;
-	--chart-2: 173 58% 39%;
-	--chart-3: 197 37% 24%;
-	--chart-4: 43 74% 66%;
-	--chart-5: 27 87% 67%;
+	--background-main: 240 6% 4%;
 }
 
+:root,
 .dark {
 	--chart-1: 18.5 100% 50%;
 	--chart-2: 160 60% 45%;