claudmax 2.0.0 → 2.0.1

package/src/app/docs/page.tsx

@@ -1,1055 +0,0 @@
-'use client';
-
-import { useState, useEffect, useRef } from 'react';
-import Link from 'next/link';
-import {
-  Zap, Shield, Search, ChevronRight, BookOpen,
-  Key, MessageSquare, Box, Hash,
-  Activity, Puzzle, Gauge, Wrench, Menu, X,
-  Terminal as TerminalIcon
-} from 'lucide-react';
-import Header from '@/components/Header';
-import Footer from '@/components/Footer';
-
-// NOTE: Metadata is exported from layout.tsx (server component).
-
-const API_BASE = (process.env.NEXT_PUBLIC_API_BASE || process.env.NEXT_PUBLIC_API_URL) || 'https://api.claudmax.pro';
-const SETUP_DOMAIN = 'claudmax.pro';
-
-// ─── Icon Map ───────────────────────────────────────────────────────────────
-const navIcons: Record<string, React.ReactNode> = {
-  overview:      <BookOpen className="w-4 h-4" />,
-  claude_code:   <TerminalIcon className="w-4 h-4" />,
-  vscode:        <Box className="w-4 h-4" />,
-  cursor:        <Box className="w-4 h-4" />,
-  windsurf:      <Box className="w-4 h-4" />,
-  cline:         <Box className="w-4 h-4" />,
-  roo_code:      <Box className="w-4 h-4" />,
-  auth:          <Key className="w-4 h-4" />,
-  messages:      <MessageSquare className="w-4 h-4" />,
-  models:        <Box className="w-4 h-4" />,
-  token_count:   <Hash className="w-4 h-4" />,
-  key_status:    <Activity className="w-4 h-4" />,
-  mcp:           <Puzzle className="w-4 h-4" />,
-  limits:        <Gauge className="w-4 h-4" />,
-  troubleshooting: <Wrench className="w-4 h-4" />,
-};
-
-// ─── Components ───────────────────────────────────────────────────────────────
-function Terminal({ title, code, lang = 'bash', filename }: { title?: string; code: string; lang?: 'bash' | 'powershell' | 'python' | 'javascript'; filename?: string }) {
-  const [copied, setCopied] = useState(false);
-  const colors: Record<string, string> = { bash: 'text-orange-300', powershell: 'text-blue-300', python: 'text-purple-300', javascript: 'text-yellow-300' };
-  return (
-    <div className="rounded-xl border border-gray-200 bg-[#0d0d0d] overflow-hidden my-4">
-      <div className="flex items-center justify-between px-4 py-2.5 border-b border-white/[0.06] bg-[#161616]">
-        <div className="flex items-center gap-2">
-          <div className="flex gap-1.5"><div className="w-2.5 h-2.5 rounded-full bg-red-500/60" /><div className="w-2.5 h-2.5 rounded-full bg-yellow-500/60" /><div className="w-2.5 h-2.5 rounded-full bg-green-500/60" /></div>
-          <span className="text-white/25 text-xs font-mono ml-2">{filename || title || 'terminal'}</span>
-        </div>
-        <button onClick={() => { navigator.clipboard.writeText(code); setCopied(true); setTimeout(() => setCopied(false), 2000); }}
-          className="text-xs text-white/30 hover:text-white/60 px-2 py-0.5 rounded border border-white/10 font-medium transition-colors">
-          {copied ? 'Copied!' : 'Copy'}
-        </button>
-      </div>
-      <div className="p-4 font-mono text-sm overflow-x-auto"><pre className={colors[lang] || colors.bash}><code>{code}</code></pre></div>
-    </div>
-  );
-}
-
-function Callout({ type, children }: { type?: 'info' | 'warning' | 'success'; children: React.ReactNode }) {
-  const styles: Record<string, string> = {
-    info:    'border-blue-200 bg-blue-50 text-blue-800',
-    warning: 'border-amber-200 bg-amber-50 text-amber-800',
-    success: 'border-emerald-200 bg-emerald-50 text-emerald-800',
-  };
-  const icons: Record<string, React.ReactNode> = {
-    info:    <BookOpen className="w-4 h-4 shrink-0 mt-0.5" />,
-    warning: <Shield className="w-4 h-4 shrink-0 mt-0.5" />,
-    success: <Zap className="w-4 h-4 shrink-0 mt-0.5" />,
-  };
-  return (
-    <div className={`rounded-lg border p-3 my-4 text-sm flex gap-2.5 ${styles[type ?? 'info']}`}>
-      {icons[type ?? 'info']}
-      <span>{children}</span>
-    </div>
-  );
-}
-
-function CodeInline({ children }: { children: string }) {
-  return <code className="bg-gray-100 text-purple-600 px-1.5 py-0.5 rounded text-xs font-mono font-semibold">{children}</code>;
-}
-
-function CodeBlock({ label, children }: { label?: string; children: React.ReactNode }) {
-  return (
-    <div className="bg-gray-50 border border-gray-200 rounded-xl p-4 my-4">
-      {label && <p className="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">{label}</p>}
-      {children}
-    </div>
-  );
-}
-
-function SectionTitle({ children }: { children: React.ReactNode }) {
-  return <h2 className="text-xl font-bold text-[#111827] mt-10 mb-3 pb-2 border-b border-gray-100">{children}</h2>;
-}
-
-function SubTitle({ children }: { children: React.ReactNode }) {
-  return <h3 className="text-base font-bold text-[#374151] mt-8 mb-2">{children}</h3>;
-}
-
-function Para({ children }: { children: React.ReactNode }) {
-  return <p className="text-sm text-[#6B7280] leading-relaxed mb-3">{children}</p>;
-}
-
-function SidebarItem({ label, active, onClick, icon }: { label: string; active?: boolean; onClick?: () => void; icon?: React.ReactNode }) {
-  return (
-    <button
-      onClick={onClick}
-      className={`w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm font-medium transition-all text-left ${
-        active
-          ? 'bg-purple-100 text-purple-700 font-semibold'
-          : 'text-[#6B7280] hover:text-[#111827] hover:bg-gray-100'
-      }`}
-    >
-      {icon && <span className={active ? 'text-purple-600' : 'text-[#9CA3AF]'}>{icon}</span>}
-      {label}
-      {active && <ChevronRight className="w-3 h-3 ml-auto shrink-0" />}
-    </button>
-  );
-}
-
-// ─── Content Sections ─────────────────────────────────────────────────────────
-function OverviewSection() {
-  const features = [
-    { icon: <Zap className="w-5 h-5 text-amber-500" />, title: 'Drop-in Compatible', desc: 'Works with Claude Code CLI, Python SDK, OpenAI SDK, and any HTTP client — just change the base URL.' },
-    { icon: <Shield className="w-5 h-5 text-emerald-500" />, title: 'Per-Key Budgets', desc: '5-hour rolling window token limits per API key. Automatic resets on every request.' },
-    { icon: <Search className="w-5 h-5 text-blue-500" />, title: 'MCP Tools Built-in', desc: 'Web search and image analysis available as native Claude tools via the MCP server.' },
-    { icon: <Gauge className="w-5 h-5 text-purple-500" />, title: '200K Context', desc: 'All models support up to 200,000 token context windows. Process entire documents in one call.' },
-  ];
-
-  const models = [
-    { id: 'claude-opus-4-6', name: 'Opus 4.6', input: '$5', output: '$25', ctx: '200K', best: 'Research, complex reasoning, highest quality' },
-    { id: 'claude-sonnet-4-6', name: 'Sonnet 4.6', input: '$3', output: '$15', ctx: '200K', best: 'Coding, writing, general assistance' },
-    { id: 'claude-haiku-4-5-20251001', name: 'Haiku 4.5', input: '$1', output: '$5', ctx: '200K', best: 'High-volume, low-cost tasks' },
-    { id: 'claude-sonnet-4-vision', name: 'Sonnet 4 Vision', input: '$3', output: '$15', ctx: '200K', best: 'Image analysis, screenshots, documents' },
-  ];
-
-  const plans = [
-    { tier: '5x Max', requests: '500 / 5h', tokens: '5M / 5h', price: 'Affordable', color: 'bg-blue-50 border-blue-100' },
-    { tier: '20x Max', requests: '2,000 / 5h', tokens: '20M / 5h', price: 'Best Value', color: 'bg-purple-50 border-purple-100' },
-    { tier: 'Unlimited', requests: 'Unlimited', tokens: 'Unlimited', price: 'Enterprise', color: 'bg-amber-50 border-amber-100' },
-  ];
-
-  return (
-    <div id="overview" className="space-y-0">
-      <h1 className="text-3xl font-black text-[#111827] mb-2">Getting Started with ClaudMax</h1>
-      <p className="text-[#6B7280] mb-6">ClaudMax is a high-performance Claude API gateway powered by OpenRouter. Access Claude Opus 4.6, Sonnet 4.6, and Haiku 4.5 through a single unified endpoint.</p>
-
-      {/* Key Features */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 mb-8">
-        {features.map(f => (
-          <div key={f.title} className="bg-white rounded-xl border border-gray-200 p-4">
-            <div className="mb-2">{f.icon}</div>
-            <h3 className="font-bold text-sm text-[#111827] mb-1">{f.title}</h3>
-            <p className="text-xs text-[#9CA3AF] leading-relaxed">{f.desc}</p>
-          </div>
-        ))}
-      </div>
-
-      {/* Models Table */}
-      <SectionTitle>Available Models</SectionTitle>
-      <Para>All Claude models are accessible with up to 200K token context windows.</Para>
-      <CodeBlock label="Model Pricing (per 1M tokens)">
-        <div className="overflow-x-auto">
-          <table className="w-full text-sm">
-            <thead>
-              <tr className="border-b border-gray-100 bg-gray-50">
-                {['Model', 'Name', 'Input', 'Output', 'Context', 'Best For'].map(h => (
-                  <th key={h} className="text-left px-3 py-2 text-xs font-bold text-gray-400 uppercase">{h}</th>
-                ))}
-              </tr>
-            </thead>
-            <tbody>
-              {models.map(m => (
-                <tr key={m.id} className="border-b border-gray-100 last:border-0 hover:bg-gray-50">
-                  <td className="px-3 py-2.5"><code className="text-purple-600 font-mono text-xs">{m.id}</code></td>
-                  <td className="px-3 py-2.5 text-gray-700 text-xs font-semibold">{m.name}</td>
-                  <td className="px-3 py-2.5 text-gray-500 text-xs font-mono">{m.input}</td>
-                  <td className="px-3 py-2.5 text-gray-500 text-xs font-mono">{m.output}</td>
-                  <td className="px-3 py-2.5 text-gray-400 text-xs font-mono">{m.ctx}</td>
-                  <td className="px-3 py-2.5 text-gray-500 text-xs">{m.best}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </CodeBlock>
-
-      {/* Plan Tiers */}
-      <SectionTitle>Plan Tiers</SectionTitle>
-      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-6">
-        {plans.map(p => (
-          <div key={p.tier} className={`rounded-xl border p-4 ${p.color}`}>
-            <h3 className="font-bold text-sm text-[#111827] mb-2">{p.tier}</h3>
-            <div className="space-y-1 text-xs text-[#6B7280]">
-              <div className="flex justify-between"><span>Requests</span><span className="font-semibold text-[#111827]">{p.requests}</span></div>
-              <div className="flex justify-between"><span>Tokens</span><span className="font-semibold text-[#111827]">{p.tokens}</span></div>
-              <div className="flex justify-between"><span>Tier</span><span className="font-semibold text-[#111827]">{p.price}</span></div>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      <Callout type="info">All plans use a rolling 5-hour window that resets on every API request, ensuring you always have fresh capacity when you need it.</Callout>
-
-      {/* Quick Start */}
-      <SectionTitle>Quick Install (30 Seconds)</SectionTitle>
-      <Para>Run the interactive setup wizard — it detects your IDE and configures everything automatically:</Para>
-      <Terminal filename="terminal" code={`npx claudmax`} />
-      <Para>The wizard will:</Para>
-      <ul className="list-disc list-inside text-sm text-[#6B7280] space-y-1.5 ml-2 mb-4">
-        <li>Prompt for your API key (format: <CodeInline>sk-cmx_...</CodeInline>)</li>
-        <li>Auto-detect and configure your IDE</li>
-        <li>Install ClaudMax MCP tools automatically</li>
-        <li>Verify your connection</li>
-      </ul>
-
-      {/* Manual Setup */}
-      <SectionTitle>Manual Setup</SectionTitle>
-      <SubTitle>Windows (PowerShell)</SubTitle>
-      <Terminal lang="powershell" filename="PowerShell (Administrator)" code={`Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
-irm https://${SETUP_DOMAIN}/setup.ps1 | iex`} />
-
-      <SubTitle>macOS / Linux</SubTitle>
-      <Terminal filename="terminal" code={`curl -fsSL https://${SETUP_DOMAIN}/setup.sh | bash`} />
-
-      <SubTitle>First API Call</SubTitle>
-      <Terminal filename="terminal" code={`curl -X POST ${API_BASE}/v1/messages \\
-  -H "x-api-key: YOUR_API_KEY" \\
-  -H "Content-Type: application/json" \\
-  -d '{
-    "model": "claude-sonnet-4-6",
-    "max_tokens": 512,
-    "messages": [{"role": "user", "content": "Hello, Claude!"}]
-  }'`} />
-
-      <Callout type="success">That is all you need to get started. Scroll down or use the sidebar to explore each section in detail.</Callout>
-    </div>
-  );
-}
-
-function ClaudeCodeSection() {
-  return (
-    <div id="claude_code">
-      <h1 className="text-3xl font-black text-[#111827] mb-2">Claude Code CLI</h1>
-      <p className="text-[#9CA3AF] mb-6">Configure Claude Code CLI to use ClaudMax as your API gateway.</p>
-
-      <SectionTitle>Automatic Setup (Recommended)</SectionTitle>
-      <Para>Run the setup wizard and select Claude Code CLI:</Para>
-      <Terminal filename="terminal" code={`npx claudmax`} />
-      <Callout type="info">The wizard automatically configures both <CodeInline>settings.json</CodeInline> and <CodeInline>.claude.json</CodeInline>.</Callout>
-
-      <SectionTitle>Manual Configuration</SectionTitle>
-      <SubTitle>Step 1: Configure settings.json</SubTitle>
-      <Terminal filename="~/.claude/settings.json" code={`{
-  "env": {
-    "ANTHROPIC_AUTH_TOKEN": "YOUR_API_KEY",
-    "ANTHROPIC_BASE_URL": "${API_BASE}/v1/messages",
-    "ANTHROPIC_MODEL": "claude-opus-4-6",
-    "ANTHROPIC_SMALL_FAST_MODEL": "claude-haiku-4-5-20251001",
-    "ANTHROPIC_DEFAULT_SONNET_MODEL": "claude-sonnet-4-6",
-    "ANTHROPIC_DEFAULT_OPUS_MODEL": "claude-opus-4-6",
-    "ANTHROPIC_DEFAULT_HAIKU_MODEL": "claude-haiku-4-5-20251001",
-    "CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC": "1"
-  },
-  "hasCompletedOnboarding": true
-}`} />
-      <Callout type="warning">Replace <CodeInline>YOUR_API_KEY</CodeInline> with your actual ClaudMax API key.</Callout>
-
-      <SubTitle>Step 2: Configure MCP server</SubTitle>
-      <Terminal filename="~/.claude.json" code={`{
-  "mcpServers": {
-    "ClaudMax": {
-      "command": "npx",
-      "args": ["-y", "claudmax-mcp"],
-      "env": {
-        "CLAUDMAX_API_KEY": "YOUR_API_KEY",
-        "CLAUDMAX_URL": "${API_BASE}"
-      }
-    }
-  }
-}`} />
-
-      <SubTitle>Step 3: Reload your shell</SubTitle>
-      <Terminal filename="terminal" code={`source ~/.zshrc  # or source ~/.bashrc`} />
-
-      <SubTitle>Step 4: Verify installation</SubTitle>
-      <Terminal filename="terminal" code={`claude --version
-# Should show Claude Code version without errors`} />
-
-      <Callout type="success">Claude Code is now configured to route all requests through ClaudMax.</Callout>
-    </div>
-  );
-}
-
-function VSSection() {
-  return (
-    <div id="vscode">
-      <h1 className="text-3xl font-black text-[#111827] mb-2">VS Code</h1>
-      <p className="text-[#9CA3AF] mb-6">The VS Code Claude extension uses the same configuration as Claude Code CLI.</p>
-
-      <SectionTitle>Automatic Setup (Recommended)</SectionTitle>
-      <Para>Run the setup wizard and select VS Code:</Para>
-      <Terminal filename="terminal" code={`npx claudmax`} />
-
-      <SectionTitle>Manual Configuration</SectionTitle>
-      <Para>Same files as Claude Code CLI. Create or edit:</Para>
-      <ul className="list-disc list-inside text-sm text-[#6B7280] space-y-1.5 mb-4 ml-2">
-        <li><CodeInline>~/.claude/settings.json</CodeInline></li>
-        <li><CodeInline>~/.claude.json</CodeInline></li>
-      </ul>
-      <Callout type="warning">Restart VS Code after configuring the files.</Callout>
-    </div>
-  );
-}
-
-function CursorSection() {
-  return (
-    <div id="cursor">
-      <h1 className="text-3xl font-black text-[#111827] mb-2">Cursor</h1>
-      <p className="text-[#9CA3AF] mb-6">Configure Cursor IDE to use ClaudMax for AI assistance.</p>
-
-      <SectionTitle>Automatic Setup (Recommended)</SectionTitle>
-      <Terminal filename="terminal" code={`npx claudmax`} />
-
-      <SectionTitle>Manual MCP Configuration</SectionTitle>
-      <SubTitle>Step 1: Configure MCP server</SubTitle>
-      <Terminal filename="~/.cursor/mcp.json" code={`{
-  "mcpServers": {
-    "ClaudMax": {
-      "command": "npx",
-      "args": ["-y", "claudmax-mcp"],
-      "env": {
-        "CLAUDMAX_API_KEY": "YOUR_API_KEY",
-        "CLAUDMAX_URL": "${API_BASE}"
-      }
-    }
-  }
-}`} />
-
-      <SubTitle>Step 2: Add API model in Cursor</SubTitle>
-      <Para>Open Cursor Settings, navigate to Models, and add a custom OpenAI-compatible model:</Para>
-      <CodeBlock label="Settings — Models — Add Custom Model">
-        <div className="space-y-2 text-sm">
-          <div className="flex justify-between"><span className="text-gray-500 font-medium">Base URL</span><code className="text-purple-600 font-mono text-xs">{API_BASE}</code></div>
-          <div className="flex justify-between"><span className="text-gray-500 font-medium">API Key</span><code className="text-purple-600 font-mono text-xs">YOUR_API_KEY</code></div>
-          <div className="flex justify-between"><span className="text-gray-500 font-medium">Model ID</span><code className="text-purple-600 font-mono text-xs">claude-sonnet-4-6</code></div>
-        </div>
-      </CodeBlock>
-      <Callout type="success">Cursor will now route Claude requests through ClaudMax.</Callout>
-    </div>
-  );
-}
-
-function WindsurfSection() {
-  return (
-    <div id="windsurf">
-      <h1 className="text-3xl font-black text-[#111827] mb-2">Windsurf</h1>
-      <p className="text-[#9CA3AF] mb-6">Configure Windsurf IDE to use ClaudMax for AI assistance.</p>
-
-      <SectionTitle>Automatic Setup (Recommended)</SectionTitle>
-      <Terminal filename="terminal" code={`npx claudmax`} />
-
-      <SectionTitle>Manual MCP Configuration</SectionTitle>
-      <SubTitle>Step 1: Configure MCP server</SubTitle>
-      <Terminal filename="~/.windsurf/mcp.json" code={`{
-  "mcpServers": {
-    "ClaudMax": {
-      "command": "npx",
-      "args": ["-y", "claudmax-mcp"],
-      "env": {
-        "CLAUDMAX_API_KEY": "YOUR_API_KEY",
-        "CLAUDMAX_URL": "${API_BASE}"
-      }
-    }
-  }
-}`} />
-
-      <SubTitle>Step 2: Set base URL in Windsurf</SubTitle>
-      <Para>Open Windsurf Settings, navigate to AI Provider, and set the base URL:</Para>
-      <CodeBlock label="Settings — AI Provider">
-        <div className="space-y-2 text-sm">
-          <div className="flex justify-between"><span className="text-gray-500 font-medium">Base URL</span><code className="text-purple-600 font-mono text-xs">{API_BASE}</code></div>
-          <div className="flex justify-between"><span className="text-gray-500 font-medium">API Key</span><code className="text-purple-600 font-mono text-xs">YOUR_API_KEY</code></div>
-        </div>
-      </CodeBlock>
-    </div>
-  );
-}
-
-function ClineSection() {
-  return (
-    <div id="cline">
-      <h1 className="text-3xl font-black text-[#111827] mb-2">Cline</h1>
-      <p className="text-[#9CA3AF] mb-6">Configure Cline (VS Code extension) to use ClaudMax.</p>
-
-      <SectionTitle>Automatic Setup (Recommended)</SectionTitle>
-      <Terminal filename="terminal" code={`npx claudmax`} />
-
-      <SectionTitle>Manual Configuration</SectionTitle>
-      <SubTitle>Edit VS Code Settings</SubTitle>
-      <Para>Open VS Code, navigate to Extensions, then Cline Settings, and edit in settings.json:</Para>
-      <Terminal filename="settings.json" code={`{
-  "cline.apiProvider": "anthropic",
-  "cline.anthropicBaseUrl": "${API_BASE}",
-  "cline.apiKey": "YOUR_API_KEY"
-}`} />
-      <Callout type="info">Cline also supports the MCP server configuration. See the Windsurf section for MCP setup.</Callout>
-    </div>
-  );
-}
-
-function RooCodeSection() {
-  return (
-    <div id="roo_code">
-      <h1 className="text-3xl font-black text-[#111827] mb-2">Roo Code</h1>
-      <p className="text-[#9CA3AF] mb-6">Configure Roo Code (VS Code extension) to use ClaudMax.</p>
-
-      <SectionTitle>Automatic Setup (Recommended)</SectionTitle>
-      <Terminal filename="terminal" code={`npx claudmax`} />
-
-      <SectionTitle>Manual Configuration</SectionTitle>
-      <SubTitle>Edit VS Code Settings</SubTitle>
-      <Terminal filename="settings.json" code={`{
-  "roo-cline.apiProvider": "anthropic",
-  "roo-cline.anthropicBaseUrl": "${API_BASE}",
-  "roo-cline.apiKey": "YOUR_API_KEY"
-}`} />
-    </div>
-  );
-}
-
-function AuthSection() {
-  return (
-    <div id="auth">
-      <h1 className="text-3xl font-black text-[#111827] mb-2">Authentication</h1>
-      <p className="text-[#9CA3AF] mb-6">All API requests require your ClaudMax API key passed via HTTP headers.</p>
-
-      <SectionTitle>Passing Your API Key</SectionTitle>
-      <Para>Include your API key in the <CodeInline>x-api-key</CodeInline> header or <CodeInline>Authorization: Bearer</CodeInline> header.</Para>
-
-      <SubTitle>x-api-key Header</SubTitle>
-      <Terminal filename="terminal" code={`curl -X POST ${API_BASE}/v1/messages \\
-  -H "x-api-key: YOUR_API_KEY" \\
-  -H "Content-Type: application/json" \\
-  -d '{
-    "model": "claude-sonnet-4-6",
-    "max_tokens": 512,
-    "messages": [{"role": "user", "content": "Hello!"}]
-  }'`} />
-
-      <SubTitle>Authorization Header</SubTitle>
-      <Terminal filename="terminal" code={`curl -X POST ${API_BASE}/v1/messages \\
-  -H "Authorization: Bearer YOUR_API_KEY" \\
-  -H "Content-Type: application/json" \\
-  -d '{
-    "model": "claude-sonnet-4-6",
-    "max_tokens": 512,
-    "messages": [{"role": "user", "content": "Hello!"}]
-  }'`} />
-
-      <Callout type="warning">Never expose your API key in client-side code. Use server-side proxies or environment variables.</Callout>
-    </div>
-  );
-}
-
-function MessagesSection() {
-  return (
-    <div id="messages">
-      <h1 className="text-3xl font-black text-[#111827] mb-2">Messages</h1>
-      <p className="text-[#9CA3AF] mb-6">POST <CodeInline>{`${API_BASE}/v1/messages`}</CodeInline> — Send a conversation and receive a structured response.</p>
-
-      <SectionTitle>Request Body</SectionTitle>
-      <CodeBlock label="Fields">
-        <div className="space-y-2 text-sm">
-          {[
-            { field: 'model', type: 'string', desc: 'Claude model ID (see Models)' },
-            { field: 'messages', type: 'array', desc: 'Array of {role, content} message objects' },
-            { field: 'system', type: 'string', desc: 'Optional system prompt (shorthand)' },
-            { field: 'max_tokens', type: 'integer', desc: 'Maximum tokens in the response (min 1, max 8192)' },
-            { field: 'temperature', type: 'number', desc: 'Sampling temperature (0.0–2.0, default: 1.0)' },
-            { field: 'stream', type: 'boolean', desc: 'Enable server-sent events streaming (default: false)' },
-            { field: 'tools', type: 'array', desc: 'MCP tools array for function calling' },
-          ].map(f => (
-            <div key={f.field} className="flex sm:justify-between sm:flex-row flex-col gap-1 border-b border-gray-100 last:border-0 py-2">
-              <code className="text-purple-600 font-mono text-xs">{f.field}</code>
-              <span className="text-blue-500 text-xs font-mono">{f.type}</span>
-              <span className="text-gray-400 text-xs">{f.desc}</span>
-            </div>
-          ))}
-        </div>
-      </CodeBlock>
-
-      <SubTitle>Standard Request</SubTitle>
-      <Terminal filename="terminal" code={`curl -X POST ${API_BASE}/v1/messages \\
-  -H "x-api-key: YOUR_API_KEY" \\
-  -H "Content-Type: application/json" \\
-  -d '{
-    "model": "claude-sonnet-4-6",
-    "max_tokens": 1024,
-    "messages": [
-      {"role": "user", "content": "What is 2 + 2?"}
-    ]
-  }'`} />
-
-      <SubTitle>Streaming Response</SubTitle>
-      <Terminal filename="terminal" code={`curl -X POST ${API_BASE}/v1/messages \\
-  -H "x-api-key: YOUR_API_KEY" \\
-  -H "Content-Type: application/json" \\
-  -d '{
-    "model": "claude-sonnet-4-6",
-    "max_tokens": 1024,
-    "stream": true,
-    "messages": [
-      {"role": "user", "content": "Write a haiku about the sea."}
-    ]
-  }'`} />
-
-      <SectionTitle>Chat Completions (OpenAI-compatible)</SectionTitle>
-      <Para>The <CodeInline>/v1/chat/completions</CodeInline> endpoint accepts the OpenAI chat completions format:</Para>
-      <Terminal filename="terminal" code={`curl -X POST ${API_BASE}/v1/chat/completions \\
-  -H "x-api-key: YOUR_API_KEY" \\
-  -H "Content-Type: "application/json" \\
-  -d '{
-    "model": "claude-sonnet-4-6",
-    "max_tokens": 1024,
-    "messages": [
-      {"role": "system", "content": "You are a helpful assistant."},
-      {"role": "user", "content": "Hello!"}
-    ]
-  }'`} />
-      <Callout type="info">Both <CodeInline>/v1/messages</CodeInline> (native Anthropic) and <CodeInline>/v1/chat/completions</CodeInline> (OpenAI-compatible) are supported.</Callout>
-    </div>
-  );
-}
-
-function ModelsSection() {
-  return (
-    <div id="models">
-      <h1 className="text-3xl font-black text-[#111827] mb-2">Models</h1>
-      <p className="text-[#9CA3AF] mb-6">All Claude models are accessible through ClaudMax with up to 200K context windows.</p>
-
-      <SectionTitle>Available Models</SectionTitle>
-      <CodeBlock label="Model Reference">
-        <div className="overflow-x-auto">
-          <table className="w-full text-sm">
-            <thead>
-              <tr className="border-b border-gray-100 bg-gray-50">
-                {['Model ID', 'Name', 'Input', 'Output', 'Context', 'Best For'].map(h => (
-                  <th key={h} className="text-left px-3 py-2 text-xs font-bold text-gray-400 uppercase">{h}</th>
-                ))}
-              </tr>
-            </thead>
-            <tbody>
-              {[
-                { id: 'claude-opus-4-6',            name: 'Opus 4.6',        input: 'Text',    output: 'Text',   ctx: '200K', best: 'Complex analysis, research, long-form writing' },
-                { id: 'claude-sonnet-4-6',          name: 'Sonnet 4.6',      input: 'Text',    output: 'Text',   ctx: '200K', best: 'General coding, reasoning, and assistance' },
-                { id: 'claude-haiku-4-5-20251001', name: 'Haiku 4.5',       input: 'Text',    output: 'Text',   ctx: '200K', best: 'High-volume tasks, quick completions' },
-                { id: 'claude-sonnet-4-vision',    name: 'Sonnet 4 Vision', input: 'Text+Img',output: 'Text',   ctx: '200K', best: 'Image analysis, screenshots, document understanding' },
-                { id: 'claude-image-4',            name: 'Image 4',        input: 'Text',    output: 'Image', ctx: '200K', best: 'High-quality image generation from text prompts' },
-                { id: 'claude-audio-4',            name: 'Audio 4',         input: 'Text',    output: 'Audio', ctx: '200K', best: 'Natural text-to-speech, voice synthesis' },
-              ].map(m => (
-                <tr key={m.id} className="border-b border-gray-100 last:border-0 hover:bg-gray-50">
-                  <td className="px-3 py-2.5"><code className="text-purple-600 font-mono text-xs">{m.id}</code></td>
-                  <td className="px-3 py-2.5 text-gray-700 text-xs font-semibold">{m.name}</td>
-                  <td className="px-3 py-2.5 text-gray-500 text-xs">{m.input}</td>
-                  <td className="px-3 py-2.5 text-gray-500 text-xs">{m.output}</td>
-                  <td className="px-3 py-2.5 text-gray-400 text-xs font-mono">{m.ctx}</td>
-                  <td className="px-3 py-2.5 text-gray-500 text-xs">{m.best}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </CodeBlock>
-      <Callout type="info">Model IDs are case-insensitive aliases: <CodeInline>opus</CodeInline>, <CodeInline>sonnet</CodeInline>, <CodeInline>haiku</CodeInline> all map to their respective Claude models.</Callout>
-    </div>
-  );
-}
-
-function TokenCountSection() {
-  return (
-    <div id="token_count">
-      <h1 className="text-3xl font-black text-[#111827] mb-2">Token Counting</h1>
-      <p className="text-[#9CA3AF] mb-6">Estimate token usage for a given input before sending to the API.</p>
-
-      <SectionTitle>Endpoint</SectionTitle>
-      <Para>POST <CodeInline>{`${API_BASE}/v1/messages/count_tokens`}</CodeInline></Para>
-
-      <SubTitle>Request</SubTitle>
-      <Terminal filename="terminal" code={`curl -X POST ${API_BASE}/v1/messages/count_tokens \\
-  -H "x-api-key: YOUR_API_KEY" \\
-  -H "Content-Type: application/json" \\
-  -d '{
-    "model": "claude-sonnet-4-6",
-    "messages": [
-      {"role": "user", "content": "Explain quantum entanglement."}
-    ]
-  }'`} />
-
-      <SubTitle>Response</SubTitle>
-      <Terminal filename="JSON Response" code={`{
-  "input_tokens": 14,
-  "output_tokens": 0,
-  "total_tokens": 14
-}`} />
-      <Callout type="info">Use this endpoint to check how many tokens a request will consume before making the actual API call.</Callout>
-    </div>
-  );
-}
-
-function KeyStatusSection() {
-  return (
-    <div id="key_status">
-      <h1 className="text-3xl font-black text-[#111827] mb-2">Key Status</h1>
-      <p className="text-[#9CA3AF] mb-6">Check your API key usage, limits, and validity in real time.</p>
-
-      <SectionTitle>Endpoint</SectionTitle>
-      <Para>POST <CodeInline>{`${API_BASE}/v1/key-status`}</CodeInline></Para>
-
-      <SubTitle>Request</SubTitle>
-      <Terminal filename="terminal" code={`curl -X POST ${API_BASE}/v1/key-status \\
-  -H "Content-Type: application/json" \\
-  -d '{
-    "apiKey": "YOUR_API_KEY"
-  }'`} />
-
-      <SubTitle>Response Fields</SubTitle>
-      <CodeBlock label="Fields">
-        <div className="space-y-2 text-sm">
-          {[
-            { field: 'key', type: 'string', desc: 'Internal key ID' },
-            { field: 'name', type: 'string', desc: 'Human-readable key name' },
-            { field: 'tier', type: 'string', desc: 'Plan tier: free, 5x, 20x, unlimited' },
-            { field: 'isActive', type: 'boolean', desc: 'Whether the key is active' },
-            { field: 'requestsUsed', type: 'integer', desc: 'Requests used in the current 5h window' },
-            { field: 'requestsLimit', type: 'integer', desc: 'Max requests per 5h window' },
-            { field: 'tokensUsed', type: 'integer', desc: 'Tokens used (displayed, with multiplier)' },
-            { field: 'tokensLimit', type: 'integer', desc: 'Max tokens per 5h window (displayed)' },
-            { field: 'windowResetAt', type: 'string', desc: 'ISO 8601 timestamp when limits reset' },
-            { field: 'tokensUsedActual', type: 'integer', desc: 'Actual backend token usage' },
-            { field: 'tokensLeft', type: 'integer', desc: 'Tokens remaining in the window' },
-          ].map(f => (
-            <div key={f.field} className="flex sm:justify-between sm:flex-row flex-col gap-1 border-b border-gray-100 last:border-0 py-2">
-              <code className="text-purple-600 font-mono text-xs">{f.field}</code>
-              <span className="text-blue-500 text-xs font-mono">{f.type}</span>
-              <span className="text-gray-400 text-xs">{f.desc}</span>
-            </div>
-          ))}
-        </div>
-      </CodeBlock>
-
-      <SubTitle>Example Response</SubTitle>
-      <Terminal filename="JSON Response" code={`{
-  "key": "cmnhqfpx90000lpx5urf3rb31",
-  "name": "ClaudMax Key",
-  "tier": "20x",
-  "isActive": true,
-  "requestsUsed": 142,
-  "requestsLimit": 2000,
-  "tokensUsed": 3600000,
-  "tokensLimit": 60000000,
-  "tokensUsedActual": 1200000,
-  "tokensLeft": 56400000,
-  "windowResetAt": "2026-04-03T22:12:12.286Z",
-  "createdAt": "2026-04-03T17:12:12.286Z",
-  "lastUsedAt": "2026-04-03T19:15:00.000Z"
-}`} />
-
-      <Callout type="info">Check usage visually at <Link href="/check-usage" className="underline font-semibold">claudmax.pro/check-usage</Link>.</Callout>
-    </div>
-  );
-}
-
-function MCPSection() {
-  const tools = [
-    { icon: <Search className="w-5 h-5 text-blue-500" />, name: 'Web Search', desc: 'Search the web for current information. Ideal for factual queries, news, and research.' },
-    { icon: <Box className="w-5 h-5 text-purple-500" />, name: 'Image Analysis', desc: 'Analyze images using AI vision. Upload screenshots, diagrams, or photos for detailed descriptions.' },
-  ];
-
-  return (
-    <div id="mcp">
-      <h1 className="text-3xl font-black text-[#111827] mb-2">MCP Tools</h1>
-      <p className="text-[#9CA3AF] mb-6">ClaudMax supports the Model Context Protocol (MCP) for tool use with Claude models.</p>
-
-      <SectionTitle>Available Tools</SectionTitle>
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-6">
-        {tools.map(t => (
-          <div key={t.name} className="bg-white rounded-xl border border-gray-200 p-4">
-            <div className="mb-2">{t.icon}</div>
-            <h3 className="font-bold text-sm text-[#111827] mb-1">{t.name}</h3>
-            <p className="text-xs text-[#9CA3AF] leading-relaxed">{t.desc}</p>
-          </div>
-        ))}
-      </div>
-
-      <SectionTitle>Enabling MCP Tools</SectionTitle>
-      <Para>MCP tools are supported on all Claude text models. Web search and image analysis are available via dedicated endpoints.</Para>
-
-      <SubTitle>Python Example</SubTitle>
-      <Terminal lang="python" filename="mcp_example.py" code={`from anthropic import Anthropic
-
-client = Anthropic(
-    base_url="${API_BASE}",
-    api_key="YOUR_API_KEY"
-)
-
-message = client.messages.create(
-    model="claude-sonnet-4-6",
-    max_tokens=1024,
-    tools=[
-        {
-            "name": "get_weather",
-            "description": "Get current weather for a city",
-            "input_schema": {
-                "type": "object",
-                "properties": {
-                    "city": {"type": "string", "description": "City name"}
-                },
-                "required": ["city"]
-            }
-        }
-    ],
-    messages=[
-        {"role": "user", "content": "What is the weather in Tokyo?"}
-    ]
-)
-
-for content in message.content:
-    if content.type == "tool_use":
-        print(f"Tool: {content.name}, Input: {content.input}")
-    elif content.type == "text":
-        print(f"Response: {content.text}")`} />
-
-      <SectionTitle>MCP Server Setup</SectionTitle>
-      <Para>Install the ClaudMax MCP server globally:</Para>
-      <Terminal filename="terminal" code={`npm install -g claudmax-mcp`} />
-      <Para>Then add it to your IDE MCP configuration (see Claude Code CLI, Cursor, Windsurf sections above).</Para>
-
-      <Callout type="info">The MCP server enables web search and image analysis as native Claude tools, accessible through the standard tools API.</Callout>
-    </div>
-  );
-}
-
-function LimitsSection() {
-  return (
-    <div id="limits">
-      <h1 className="text-3xl font-black text-[#111827] mb-2">Rate Limits</h1>
-      <p className="text-[#9CA3AF] mb-6">Rate limits are enforced per API key on a 5-hour rolling window. Limits reset automatically when the window expires.</p>
-
-      <SectionTitle>Limits by Tier</SectionTitle>
-      <CodeBlock label="Rate Limit Table">
-        <div className="overflow-x-auto">
-          <table className="w-full text-sm">
-            <thead>
-              <tr className="border-b border-gray-100 bg-gray-50">
-                {['Tier', 'Requests / 5h', 'Tokens / 5h', 'Use Case'].map(h => (
-                  <th key={h} className="text-left px-3 py-2 text-xs font-bold text-gray-400 uppercase">{h}</th>
-                ))}
-              </tr>
-            </thead>
-            <tbody>
-              {[
-                { tier: 'Free', req: '100', tok: '500K', use: 'Learning, experimentation' },
-                { tier: '5x Max', req: '500', tok: '5M', use: 'Individual developers, light workloads' },
-                { tier: '20x Max', req: '2,000', tok: '20M', use: 'Power users, moderate production' },
-                { tier: 'Unlimited', req: 'Infinite', tok: 'Infinite', use: 'Heavy production, unlimited scale' },
-              ].map((t, i) => (
-                <tr key={t.tier} className={`border-b border-gray-100 last:border-0 ${i === 0 ? 'bg-gray-50/50' : ''}`}>
-                  <td className="px-3 py-2.5"><span className="text-gray-700 text-xs font-semibold">{t.tier}</span></td>
-                  <td className="px-3 py-2.5 text-gray-500 text-xs font-mono">{t.req}</td>
-                  <td className="px-3 py-2.5 text-gray-500 text-xs font-mono">{t.tok}</td>
-                  <td className="px-3 py-2.5 text-gray-400 text-xs">{t.use}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </CodeBlock>
-
-      <SectionTitle>Rate Limit Headers</SectionTitle>
-      <CodeBlock label="Response Headers">
-        <div className="space-y-2 text-sm">
-          {[
-            { h: 'x-ratelimit-limit', d: 'Total requests allowed in the window' },
-            { h: 'x-ratelimit-remaining', d: 'Requests remaining in the current window' },
-            { h: 'x-ratelimit-reset', d: 'ISO 8601 timestamp when the window resets' },
-          ].map(r => (
-            <div key={r.h} className="flex sm:justify-between sm:flex-row flex-col gap-1 border-b border-gray-100 last:border-0 py-2">
-              <code className="text-purple-600 font-mono text-xs">{r.h}</code>
-              <span className="text-gray-400 text-xs">{r.d}</span>
-            </div>
-          ))}
-        </div>
-      </CodeBlock>
-
-      <Callout type="warning">When a rate limit is hit, the API returns <CodeInline>429 Too Many Requests</CodeInline>. Check the <CodeInline>x-ratelimit-reset</CodeInline> header for the reset timestamp.</Callout>
-
-      <SectionTitle>Checking Your Usage</SectionTitle>
-      <Para>Monitor your current usage:</Para>
-      <Terminal filename="terminal" code={`npx claudmax status`} />
-    </div>
-  );
-}
-
-function TroubleshootingSection() {
-  const issues = [
-    { q: 'Invalid API key error (401)', a: 'Ensure your API key starts with sk-cmx_. Obtain a valid key from your administrator.', type: 'warning' },
-    { q: 'Rate limit exceeded (429)', a: 'You have hit your per-5-hour window limit. Wait for the window to reset, or upgrade your tier.', type: 'warning' },
-    { q: 'Model not found', a: "Ensure you are using a valid Claude model ID: claude-opus-4-6, claude-sonnet-4-6, or claude-haiku-4-5-20251001.", type: 'warning' },
-    { q: 'Streaming not working', a: 'Set "stream": true in your request body. Ensure your client handles text/event-stream content type.', type: 'info' },
-    { q: '403 / 500 server errors', a: 'The API gateway may be experiencing temporary issues. Check the status page and try again shortly.', type: 'warning' },
-    { q: 'Cursor/Windsurf not connecting', a: 'Double-check the base URL is set to ' + API_BASE + ' (not /v1/chat or /v1/messages). Some providers require the base URL without the path suffix.', type: 'info' },
-    { q: 'Token usage higher than expected', a: 'Token counts include both input (prompt) and output (response) tokens. Use /v1/key-status for accurate tracking.', type: 'info' },
-    { q: 'CLI not found after installation', a: 'Ensure ~/.local/bin is in your PATH. Run: export PATH="$HOME/.local/bin:$PATH" && claudmax status.', type: 'warning' },
-  ];
-
-  return (
-    <div id="troubleshooting">
-      <h1 className="text-3xl font-black text-[#111827] mb-2">Troubleshooting</h1>
-      <p className="text-[#9CA3AF] mb-6">Common issues and how to resolve them.</p>
-
-      <div className="space-y-3">
-        {issues.map(item => (
-          <div key={item.q} className="bg-white rounded-xl border border-gray-200 p-4">
-            <h3 className="font-bold text-sm text-[#111827] mb-1">{item.q}</h3>
-            <p className="text-[#6B7280] text-sm leading-relaxed">{item.a}</p>
-          </div>
-        ))}
-      </div>
-
-      <div className="mt-6">
-        <SectionTitle>Contact Support</SectionTitle>
-        <Para>Still experiencing issues? Check the <Link href="/status" className="text-purple-600 underline">status page</Link> for live service updates.</Para>
-      </div>
-    </div>
-  );
-}
-
-// ─── Page ─────────────────────────────────────────────────────────────────────
-export default function DocsPage() {
-  const [activeSection, setActiveSection] = useState('overview');
-  const [sidebarOpen, setSidebarOpen] = useState(false);
-  const contentRef = useRef<HTMLDivElement>(null);
-
-  const sectionIds = ['overview', 'claude_code', 'vscode', 'cursor', 'windsurf', 'cline', 'roo_code', 'auth', 'messages', 'models', 'token_count', 'key_status', 'mcp', 'limits', 'troubleshooting'];
-
-  // IntersectionObserver to track the currently visible section
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            setActiveSection(entry.target.id);
-          }
-        });
-      },
-      {
-        rootMargin: '-35% 0px -35% 0px',
-        threshold: 0,
-      }
-    );
-
-    sectionIds.forEach((id) => {
-      const el = document.getElementById(id);
-      if (el) observer.observe(el);
-    });
-
-    return () => observer.disconnect();
-  }, [sectionIds]);
-
-  // Auto-scroll: when active section scrolls above 20% of viewport, advance to next
-  useEffect(() => {
-    let isScrolling = false;
-    let lockTimeout: ReturnType<typeof setTimeout>;
-
-    const handleScroll = () => {
-      if (isScrolling) return;
-      const currentIndex = sectionIds.indexOf(activeSection);
-      if (currentIndex === -1 || currentIndex >= sectionIds.length - 1) return;
-
-      const el = document.getElementById(activeSection);
-      if (!el) return;
-
-      // When the section's bottom edge passes the top of the viewport
-      const rect = el.getBoundingClientRect();
-      const contentEl = contentRef.current;
-      const viewportH = contentEl ? contentEl.clientHeight : window.innerHeight;
-
-      if (rect.bottom < viewportH * 0.25) {
-        const nextId = sectionIds[currentIndex + 1];
-        const nextEl = document.getElementById(nextId);
-        if (nextEl) {
-          isScrolling = true;
-          nextEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
-          setActiveSection(nextId);
-          clearTimeout(lockTimeout);
-          lockTimeout = setTimeout(() => {
-            isScrolling = false;
-          }, 1200);
-        }
-      }
-    };
-
-    const contentEl = contentRef.current;
-    if (contentEl) {
-      contentEl.addEventListener('scroll', handleScroll, { passive: true });
-    } else {
-      window.addEventListener('scroll', handleScroll, { passive: true });
-    }
-
-    return () => {
-      if (contentEl) {
-        contentEl.removeEventListener('scroll', handleScroll);
-      } else {
-        window.removeEventListener('scroll', handleScroll);
-      }
-      clearTimeout(lockTimeout);
-    };
-  }, [activeSection, sectionIds]);
-
-  const handleNavClick = (key: string) => {
-    setActiveSection(key);
-    setSidebarOpen(false);
-    const el = document.getElementById(key);
-    if (el) {
-      el.scrollIntoView({ behavior: 'smooth', block: 'start' });
-      // Sync scroll position for auto-scroll detection
-      if (contentRef.current) contentRef.current.scrollTop = el.offsetTop - 20;
-    }
-  };
-
-  const navGroups = [
-    { label: 'Getting Started', items: [{ key: 'overview', label: 'Overview' }] },
-    { label: 'IDE Setup', items: [
-      { key: 'claude_code', label: 'Claude Code CLI' },
-      { key: 'vscode', label: 'VS Code' },
-      { key: 'cursor', label: 'Cursor' },
-      { key: 'windsurf', label: 'Windsurf' },
-      { key: 'cline', label: 'Cline' },
-      { key: 'roo_code', label: 'Roo Code' },
-    ]},
-    { label: 'API Reference', items: [
-      { key: 'auth', label: 'Authentication' },
-      { key: 'messages', label: 'Messages' },
-      { key: 'models', label: 'Models' },
-      { key: 'token_count', label: 'Token Counting' },
-      { key: 'key_status', label: 'Key Status' },
-    ]},
-    { label: 'Advanced', items: [
-      { key: 'mcp', label: 'MCP Tools' },
-      { key: 'limits', label: 'Rate Limits' },
-      { key: 'troubleshooting', label: 'Troubleshooting' },
-    ]},
-  ];
-
-  return (
-    <div className="min-h-screen bg-[#F9FAFB] flex flex-col">
-
-      {/* Header */}
-      <header className="sticky top-0 z-50 bg-white/95 backdrop-blur-md border-b border-gray-200 shrink-0">
-        <div className="flex items-center justify-between h-14 px-4 lg:px-6">
-          <div className="flex items-center gap-4">
-            <Link href="/" className="flex items-center gap-2">
-              <div className="w-7 h-7 rounded-lg bg-gradient-to-br from-purple-600 to-purple-500 flex items-center justify-center">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" className="text-white">
-                  <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" fill="currentColor"/>
-                </svg>
-              </div>
-              <span className="text-[#111827] font-bold text-base">ClaudMax</span>
-            </Link>
-            <span className="hidden sm:inline text-[#D1D5DB] text-xs">/</span>
-            <span className="hidden sm:inline text-[#6B7280] text-sm font-medium">Documentation</span>
-          </div>
-
-          {/* Desktop nav */}
-          <nav className="hidden md:flex items-center gap-4">
-            <Link href="/" className="text-sm text-[#6B7280] hover:text-[#111827] transition-colors">Home</Link>
-            <Link href="/docs" className="text-sm text-purple-600 font-medium transition-colors">Docs</Link>
-            <Link href="/status" className="text-sm text-[#6B7280] hover:text-[#111827] transition-colors">Status</Link>
-            <Link href="/check-usage" className="text-sm text-[#6B7280] hover:text-[#111827] transition-colors">Usage</Link>
-          </nav>
-
-          {/* Mobile hamburger */}
-          <button
-            onClick={() => setSidebarOpen(!sidebarOpen)}
-            className="md:hidden w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors"
-            aria-label="Toggle sidebar"
-          >
-            {sidebarOpen ? <X className="w-5 h-5 text-[#374151]" /> : <Menu className="w-5 h-5 text-[#374151]" />}
-          </button>
-        </div>
-      </header>
-
-      {/* Body: sidebar + content */}
-      <div className="flex flex-col md:flex-row flex-1">
-
-        {/* Sidebar overlay (mobile) */}
-        {sidebarOpen && (
-          <div
-            className="fixed inset-0 z-40 bg-black/30 backdrop-blur-sm md:hidden"
-            onClick={() => setSidebarOpen(false)}
-          />
-        )}
-
-        {/* Sidebar */}
-        <aside className={`
-          fixed md:sticky top-14 left-0 z-50 md:z-0 shrink-0
-          w-64 md:w-56 lg:w-64 md:h-fit md:max-h-[calc(100vh-3.5rem)] md:overflow-y-auto
-          bg-white md:bg-transparent border-r border-gray-200 md:border-0
-          pb-8 md:pb-0
-          transition-transform duration-200 ease-in-out
-          ${sidebarOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'}
-        `}>
-          <div className="p-4 md:pt-4">
-            {navGroups.map((group) => (
-              <div key={group.label} className="mb-5">
-                <p className="text-[#9CA3AF] text-xs font-bold uppercase tracking-widest mb-1.5 px-3">{group.label}</p>
-                {group.items.map((item) => (
-                  <SidebarItem
-                    key={item.key}
-                    label={item.label}
-                    icon={navIcons[item.key]}
-                    active={activeSection === item.key}
-                    onClick={() => handleNavClick(item.key)}
-                  />
-                ))}
-              </div>
-            ))}
-          </div>
-        </aside>
-
-        {/* Main content — render ALL sections for continuous scroll */}
-        <main ref={contentRef} className="flex-1 min-w-0 px-4 sm:px-6 lg:px-8 py-8 pb-20 overflow-y-auto" style={{ maxHeight: 'calc(100vh - 3.5rem)' }}>
-          <div className="max-w-3xl mx-auto space-y-4">
-            <OverviewSection />
-            <ClaudeCodeSection />
-            <VSSection />
-            <CursorSection />
-            <WindsurfSection />
-            <ClineSection />
-            <RooCodeSection />
-            <AuthSection />
-            <MessagesSection />
-            <ModelsSection />
-            <TokenCountSection />
-            <KeyStatusSection />
-            <MCPSection />
-            <LimitsSection />
-            <TroubleshootingSection />
-          </div>
-        </main>
-      </div>
-
-    </div>
-  );
-}