Overhaul docs tabs: Overview, Testing, App Framework, MCP Apps (#45)

* Overhaul docs site tabs: Overview, MCP Testing Framework, MCP App Framework, MCP Apps

Restructure the documentation website from three tabs (Documentation, API
Reference, MCP Apps) to four tabs that cleanly separate the testing framework
from the app framework. Rename api-reference/ to app-framework/, split testing
content into dedicated pages, move guides and framework details to their
respective tabs, add CLI groups per tab, and add 85 redirects to preserve
all old URLs.

* List unit tests first across testing docs

* Use consistent test type ordering: Unit, E2E, Visual, Live, Evals

* Fix validate script: update hook doc path from api-reference to app-framework

Author: abewheel

docs/api-reference/cli/build.mdx docs/app-framework/cli/build.mdxdocs/api-reference/cli/build.mdx renamed to docs/app-framework/cli/build.mdx

@@ -80,7 +80,7 @@ The `uri` is generated using the resource name and a build timestamp for cache i
 
 ## App Identity
 
-Each built resource is wrapped in an [`AppProvider`](/api-reference/components/app-provider) that identifies the app to the host during the `ui/initialize` handshake. The `name` and `version` are read from your project's `package.json`:
+Each built resource is wrapped in an [`AppProvider`](/app-framework/components/app-provider) that identifies the app to the host during the `ui/initialize` handshake. The `name` and `version` are read from your project's `package.json`:
 
 ```json
 {
@@ -125,10 +125,10 @@ sunpeak build
 After building, start the production server or deploy:
 
 <CardGroup cols={2}>
-  <Card horizontal title="sunpeak start" icon="play" href="/api-reference/cli/start">
+  <Card horizontal title="sunpeak start" icon="play" href="/app-framework/cli/start">
     Start the production MCP server.
   </Card>
-  <Card horizontal title="Deployment Guide" icon="rocket" href="/guides/deployment">
+  <Card horizontal title="Deployment Guide" icon="rocket" href="/app-framework/guides/deployment">
     Deploy your app to production.
   </Card>
 </CardGroup>

docs/api-reference/cli/dev.mdx docs/app-framework/cli/dev.mdxdocs/api-reference/cli/dev.mdx renamed to docs/app-framework/cli/dev.mdx

@@ -179,10 +179,10 @@ Then connect the tunnel URL at the `/mcp` path (e.g., `https://your-subdomain.ng
 ## Related Commands
 
 <CardGroup cols={2}>
-  <Card horizontal title="sunpeak build" icon="hammer" href="/api-reference/cli/build">
+  <Card horizontal title="sunpeak build" icon="hammer" href="/app-framework/cli/build">
     Build resources and compile tools.
   </Card>
-  <Card horizontal title="sunpeak start" icon="play" href="/api-reference/cli/start">
+  <Card horizontal title="sunpeak start" icon="play" href="/app-framework/cli/start">
     Start the production MCP server.
   </Card>
 </CardGroup>

docs/api-reference/cli/new.mdx docs/app-framework/cli/new.mdxdocs/api-reference/cli/new.mdx renamed to docs/app-framework/cli/new.mdx

@@ -95,6 +95,6 @@ After creating your project:
 2. Start the dev server: `sunpeak dev`
 3. Open `http://localhost:3000` to see the inspector
 
-<Card horizontal title="Project Scaffold" icon="folder-tree" href="/framework/project-scaffold">
+<Card horizontal title="Project Scaffold" icon="folder-tree" href="/app-framework/project-scaffold">
   Learn more about the project structure and available commands.
 </Card>

docs/api-reference/cli/start.mdx docs/app-framework/cli/start.mdxdocs/api-reference/cli/start.mdx renamed to docs/app-framework/cli/start.mdx

@@ -30,7 +30,7 @@ Tools are registered with the MCP protocol using `registerAppTool` from the MCP
 | `--host <address>` | | Bind address (default: `0.0.0.0`, also respects `HOST` env var) |
 | `--json-logs` | | Output structured JSON lines to stdout/stderr |
 | `--sse` | | Use SSE streaming instead of JSON responses (default: JSON) |
-| `--stateless` | | Stateless mode — no session tracking, fresh server per request. For serverless and horizontally-scaled deployments. See [Deployment Guide](/guides/deployment#serverless--edge-deployment). |
+| `--stateless` | | Stateless mode — no session tracking, fresh server per request. For serverless and horizontally-scaled deployments. See [Deployment Guide](/app-framework/guides/deployment#serverless--edge-deployment). |
 
 ## Usage
 
@@ -64,7 +64,7 @@ The production server uses the MCP Streamable HTTP transport. In the default sta
 
 ## Authentication
 
-If your project includes a `src/server.ts` with an `auth()` export, the production server calls it on every MCP request. See [Server Entry](/api-reference/tools/server-entry) for details.
+If your project includes a `src/server.ts` with an `auth()` export, the production server calls it on every MCP request. See [Server Entry](/app-framework/tools/server-entry) for details.
 
 ## Testing Locally
 
@@ -79,16 +79,16 @@ Then expose the server with a tunnel (e.g., `ngrok http 8000`) and connect from
 ## Related Commands
 
 <CardGroup cols={2}>
-  <Card horizontal title="sunpeak build" icon="hammer" href="/api-reference/cli/build">
+  <Card horizontal title="sunpeak build" icon="hammer" href="/app-framework/cli/build">
     Build resources and compile tools.
   </Card>
-  <Card horizontal title="Production Server API" icon="server" href="/api-reference/tools/production-server">
+  <Card horizontal title="Production Server API" icon="server" href="/app-framework/tools/production-server">
     createMcpHandler, createHandler, and config types.
   </Card>
-  <Card horizontal title="Deployment Guide" icon="rocket" href="/guides/deployment">
+  <Card horizontal title="Deployment Guide" icon="rocket" href="/app-framework/guides/deployment">
     Full deployment walkthrough with custom server examples.
   </Card>
-  <Card horizontal title="sunpeak dev" icon="code" href="/api-reference/cli/dev">
+  <Card horizontal title="sunpeak dev" icon="code" href="/app-framework/cli/dev">
     Development server with inspector.
   </Card>
 </CardGroup>

…pi-reference/components/app-provider.mdx …pp-framework/components/app-provider.mdxdocs/api-reference/components/app-provider.mdx renamed to docs/app-framework/components/app-provider.mdx docs/api-reference/components/app-provider.mdx renamed to docs/app-framework/components/app-provider.mdx

@@ -68,7 +68,7 @@ import { AppProvider } from 'sunpeak';
 
 ## AppState
 
-The context value provided to child components via [`useApp`](/api-reference/hooks/use-app).
+The context value provided to child components via [`useApp`](/app-framework/hooks/use-app).
 
 ```tsx
 import type { AppState } from 'sunpeak';
@@ -94,6 +94,6 @@ import type { AppState } from 'sunpeak';
 
 ## Related
 
-- [`useApp`](/api-reference/hooks/use-app) — Access the `App` instance from context
+- [`useApp`](/app-framework/hooks/use-app) — Access the `App` instance from context
 - [App class](/mcp-apps/app/app-class) — The underlying SDK class
 - [Lifecycle](/mcp-apps/lifecycle) — Connection and initialization flow

…s/api-reference/components/safe-area.mdx …s/app-framework/components/safe-area.mdxdocs/api-reference/components/safe-area.mdx renamed to docs/app-framework/components/safe-area.mdx docs/api-reference/components/safe-area.mdx renamed to docs/app-framework/components/safe-area.mdx

@@ -116,20 +116,20 @@ function MyResource() {
 
 ## Inspector Behavior
 
-In the [Inspector](/api-reference/simulations/inspector), host detection reflects the currently selected host:
+In the [Inspector](/testing/inspector), host detection reflects the currently selected host:
 
 | Host selected | `isChatGPT()` | `isClaude()` | `detectHost()` |
 |---|---|---|---|
 | ChatGPT | `true` | `false` | `'chatgpt'` |
 | Claude | `false` | `false`* | `'unknown'`* |
 
-\* Claude detection relies on user agent or hostname, which aren't present in the inspector. Use [`useHostContext()`](/api-reference/hooks/use-host-context) to read host identity from the MCP protocol instead.
+\* Claude detection relies on user agent or hostname, which aren't present in the inspector. Use [`useHostContext()`](/app-framework/hooks/use-host-context) to read host identity from the MCP protocol instead.
 
 ## See Also
 
-<Card horizontal title="ChatGPT Hooks" icon="bolt" href="/api-reference/hooks/chatgpt-hooks">
+<Card horizontal title="ChatGPT Hooks" icon="bolt" href="/app-framework/hooks/chatgpt-hooks">
   Host-specific hooks for ChatGPT features.
 </Card>
-<Card horizontal title="useHostContext" icon="circle-info" href="/api-reference/hooks/use-host-context">
+<Card horizontal title="useHostContext" icon="circle-info" href="/app-framework/hooks/use-host-context">
   Read host identity and capabilities via the MCP protocol.
 </Card>

…i-reference/functions/host-detection.mdx …p-framework/functions/host-detection.mdxdocs/api-reference/functions/host-detection.mdx renamed to docs/app-framework/functions/host-detection.mdx docs/api-reference/functions/host-detection.mdx renamed to docs/app-framework/functions/host-detection.mdx

@@ -107,7 +107,7 @@ function InteractiveMap() {
 ```
 
 <Tip>
-For host-reported device capabilities, use [`useDeviceCapabilities`](/api-reference/hooks/use-device-capabilities) which reads the `touch` and `hover` values from the host context.
+For host-reported device capabilities, use [`useDeviceCapabilities`](/app-framework/hooks/use-device-capabilities) which reads the `touch` and `hover` values from the host context.
 </Tip>
 
 ---

…cs/api-reference/functions/utilities.mdx …cs/app-framework/functions/utilities.mdxdocs/api-reference/functions/utilities.mdx renamed to docs/app-framework/functions/utilities.mdx docs/api-reference/functions/utilities.mdx renamed to docs/app-framework/functions/utilities.mdx

@@ -11,7 +11,7 @@ MCP Apps can protect tools behind OAuth-based authorization, as defined in the [
 - **Per-server authorization** — every MCP request requires a valid token. Simple when all tools are sensitive.
 - **Per-tool authorization** — only specific tools require authorization. Public tools work without a token, and the OAuth flow triggers only when the user calls a protected tool.
 
-sunpeak supports both approaches through the [`src/server.ts`](/api-reference/tools/server-entry) auth export.
+sunpeak supports both approaches through the [`src/server.ts`](/app-framework/tools/server-entry) auth export.
 
 ## Server auth with `src/server.ts`
 
@@ -80,7 +80,7 @@ export default async function (args: { accountId: string }, extra: ToolHandlerEx
 A powerful pattern: load the app with public data (no auth required), then trigger the OAuth flow only when the user performs a protected action.
 
 1. A public tool loads the UI without authorization
-2. The user clicks a button that calls a protected tool via [`useCallServerTool`](/api-reference/hooks/use-call-server-tool)
+2. The user clicks a button that calls a protected tool via [`useCallServerTool`](/app-framework/hooks/use-call-server-tool)
 3. The host receives HTTP 401, automatically runs the OAuth flow
 4. After the user completes OAuth, the host retries the tool call with the token
 5. The protected data appears in the UI
@@ -122,7 +122,7 @@ The [MCP specification](https://modelcontextprotocol.io/specification/latest/bas
 
 **Authorization Server Metadata** (`/.well-known/oauth-authorization-server`) — advertises authorization and token endpoints, supported scopes, and client registration support.
 
-For custom server setups (using [`createMcpHandler`](/api-reference/tools/production-server)), you may need to implement these endpoints yourself. See the [MCP authorization spec](https://modelcontextprotocol.io/specification/latest/basic/authorization) for full requirements.
+For custom server setups (using [`createMcpHandler`](/app-framework/tools/production-server)), you may need to implement these endpoints yourself. See the [MCP authorization spec](https://modelcontextprotocol.io/specification/latest/basic/authorization) for full requirements.
 
 ## Token verification
 
@@ -173,7 +173,7 @@ MCP servers must validate that tokens were issued specifically for them. See [To
 
 ## See also
 
-<Card horizontal title="Server Entry" icon="lock" href="/api-reference/tools/server-entry">
+<Card horizontal title="Server Entry" icon="lock" href="/app-framework/tools/server-entry">
   The `src/server.ts` auth export and `AuthInfo` type reference.
 </Card>
 <Card horizontal title="MCP Auth Specification" icon="link" href="https://modelcontextprotocol.io/specification/latest/basic/authorization">

docs/guides/authorization.mdx …s/app-framework/guides/authorization.mdxdocs/guides/authorization.mdx renamed to docs/app-framework/guides/authorization.mdx docs/guides/authorization.mdx renamed to docs/app-framework/guides/authorization.mdx

@@ -67,7 +67,7 @@ Then expose the MCP server with a tunnel (e.g., `ngrok http 8000`) and connect f
 
 For full control over the HTTP server (custom middleware, CORS, health checks, etc.), use `createMcpHandler` to mount the MCP protocol handler on your own server.
 
-Unlike `sunpeak start` which auto-discovers from `dist/`, these handlers accept pre-loaded config objects — you load tools, resources, and auth yourself. See [Production Server API](/api-reference/tools/production-server) for config types.
+Unlike `sunpeak start` which auto-discovers from `dist/`, these handlers accept pre-loaded config objects — you load tools, resources, and auth yourself. See [Production Server API](/app-framework/tools/production-server) for config types.
 
 ```typescript
 import express from 'express';
@@ -154,10 +154,10 @@ const handler = createHandler({
 
 For custom MCP clients that don't send identifiable headers, `detectClientFromHeaders` is exported from `sunpeak/mcp` so you can build your own detection logic in a custom handler.
 
-Both `createMcpHandler` and `createHandler` use JSON responses by default (`enableJsonResponse: true`), which works reliably across all environments including serverless. If you need SSE streaming (e.g., for progress updates on long-running tool calls), set `enableJsonResponse: false` in your config. See [Production Server API](/api-reference/tools/production-server) for details.
+Both `createMcpHandler` and `createHandler` use JSON responses by default (`enableJsonResponse: true`), which works reliably across all environments including serverless. If you need SSE streaming (e.g., for progress updates on long-running tool calls), set `enableJsonResponse: false` in your config. See [Production Server API](/app-framework/tools/production-server) for details.
 
 <Info>
-For fully custom MCP server setups, `sunpeak/mcp` also re-exports `registerAppTool`, `registerAppResource`, and `RESOURCE_MIME_TYPE` from the [MCP Apps SDK](https://github.com/anthropics/ext-apps). See [Server Helpers](/api-reference/simulations/run-mcp-server#server-helpers) for the full list.
+For fully custom MCP server setups, `sunpeak/mcp` also re-exports `registerAppTool`, `registerAppResource`, and `RESOURCE_MIME_TYPE` from the [MCP Apps SDK](https://github.com/anthropics/ext-apps). See [Server Helpers](/app-framework/run-mcp-server#server-helpers) for the full list.
 </Info>
 
 ## Production Operations
@@ -270,7 +270,7 @@ These are handled at the infrastructure layer, not by `sunpeak start`:
 - **Rate limiting** — Configure at the proxy or CDN level
 - **Request body limits** — Handled by the proxy or platform
 
-For full control over the HTTP server (custom middleware, metrics, etc.), use [`createMcpHandler`](/api-reference/tools/production-server#createmcphandler) to mount the MCP handler on your own Express, Fastify, or http server.
+For full control over the HTTP server (custom middleware, metrics, etc.), use [`createMcpHandler`](/app-framework/tools/production-server#createmcphandler) to mount the MCP handler on your own Express, Fastify, or http server.
 
 ## Publish to ChatGPT