feat(web): real 3-step wizard, settings, audit, docs, marketing pages

Sprint 3.5: close every dead link and replace the single-step wizard with the
spec-mandated 3-step flow.

Wizard:
- Step 1 collects prompt + name + slug, calls /v1/servers/preview.
- Step 2 renders parsed tools (name, description, input schema as copyable JSON)
  + a credential field per requiredSecret Claude actually identified. Self-contained
  servers see 'No credentials needed' instead of generic Notion placeholders.
- Step 3 streams the live build over WebSocket and shows install snippets.

New dashboard pages:
- /settings — org, plan/usage, members table, API keys + billing stubs (Sprint 4),
  encryption status. Reads /v1/me/org.
- /audit — filterable table over /v1/audit with action pills, resource refs, IP,
  metadata JSON.

Docs site (/docs + 6 sub-pages):
- Sticky 240px sidebar, max-w-prose article column, shared DocsTitle/H2/Code primitives.
- Quickstart, MCP concepts, OAuth 2.1 flow (full walkthrough with curl), Authoring
  tools, Self-hosting, API reference, FAQ.

Marketing pages:
- /changelog with tagged release timeline.
- /security with 8 pillars + disclosure.
- /privacy with GDPR-aware sections.
- /terms (10 clauses).
- /pricing full page (nav now points here instead of /#pricing anchor).
- /status with live 10s probes against /api/health and /login.

Footer 'system status' badge now links to /status.

All 20 routes 200 OK in smoke crawl. Typecheck clean across packages.
This commit is contained in:
Marco Sadjadi
2026-05-19 18:20:31 +02:00
parent 1c92964bbd
commit 09688c1114
20 changed files with 2055 additions and 75 deletions

View File

@@ -12,7 +12,7 @@ export default function MarketingLayout({ children }: { children: React.ReactNod
<Link href="/#how" className="transition-colors hover:text-[--color-fg]">
How it works
</Link>
<Link href="/#pricing" className="transition-colors hover:text-[--color-fg]">
<Link href="/pricing" className="transition-colors hover:text-[--color-fg]">
Pricing
</Link>
<Link href="/docs" className="transition-colors hover:text-[--color-fg]">
@@ -42,10 +42,10 @@ export default function MarketingLayout({ children }: { children: React.ReactNod
<main className="flex-1">{children}</main>
<footer className="border-t border-[--color-border] py-8">
<div className="mx-auto flex max-w-6xl flex-col gap-4 px-6 text-[12px] text-[--color-fg-subtle] md:flex-row md:items-center md:justify-between">
<div className="flex items-center gap-2">
<Link href="/status" className="flex items-center gap-2 transition-colors hover:text-[--color-fg]">
<span className="size-1.5 animate-pulse rounded-full bg-emerald-400" />
<span>All systems operational</span>
</div>
<span>System status</span>
</Link>
<div className="flex flex-wrap gap-x-5 gap-y-1">
<Link href="/docs" className="transition-colors hover:text-[--color-fg]">
Docs