claudmax 2.0.0 → 2.0.1

package/src/app/api/v1/models/route.ts

@@ -1,14 +0,0 @@
-import { NextResponse } from 'next/server';
-
-export async function GET() {
-  return NextResponse.json({
-    models: [
-      { id: 'claude-opus-4-6',             name: 'Opus 4.6',        provider: 'claudmax', context_length: 200000, input_types: ['text'],   output_types: ['text'] },
-      { id: 'claude-sonnet-4-6',           name: 'Sonnet 4.6',      provider: 'claudmax', context_length: 200000, input_types: ['text'],   output_types: ['text'] },
-      { id: 'claude-haiku-4-5-20251001',  name: 'Haiku 4.5',       provider: 'claudmax', context_length: 200000, input_types: ['text'],   output_types: ['text'] },
-      { id: 'claude-sonnet-4-vision',     name: 'Sonnet 4 Vision',  provider: 'claudmax', context_length: 200000, input_types: ['text','image'], output_types: ['text'] },
-      { id: 'claude-image-4',             name: 'Image 4',          provider: 'claudmax', context_length: 200000, input_types: ['text'],   output_types: ['image'] },
-      { id: 'claude-audio-4',             name: 'Audio 4',          provider: 'claudmax', context_length: 200000, input_types: ['text'],   output_types: ['audio'] },
-    ],
-  });
-}

package/src/app/api/v1/route.ts

@@ -1,18 +0,0 @@
-import { NextResponse } from 'next/server';
-
-// API root — returns JSON 404 to signal this is an API, not a website
-export async function GET(req: Request) {
-  const host = req.headers.get('host') ?? '';
-  if (host.startsWith('api.')) {
-    return NextResponse.json(
-      { message: 'Cannot GET /', error: 'Not Found', statusCode: 404 },
-      { status: 404 }
-    );
-  }
-  return NextResponse.json({
-    status: 'ok',
-    service: 'ClaudMax API',
-    version: '1.0.0',
-    timestamp: new Date().toISOString(),
-  });
-}

package/src/app/blog/BlogClient.tsx

@@ -1,193 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import Link from 'next/link';
-import Header from '@/components/Header';
-import Footer from '@/components/Footer';
-import { Search, Clock, Eye, ArrowRight, BookOpen } from 'lucide-react';
-
-function fmtDate(d: Date | string | null) {
-  if (!d) return '';
-  return new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
-}
-
-function readingTime(content: string): number {
-  const words = content.replace(/[#*`_\[\]]/g, '').split(/\s+/).length;
-  return Math.max(1, Math.ceil(words / 200));
-}
-
-interface Post {
-  id: string; title: string; slug: string; excerpt: string | null;
-  coverImage: string | null; tags: string | null; publishedAt: Date | null;
-  views: number; seoTitle: string | null; seoDesc: string | null;
-  author: { name: string } | null;
-}
-
-const ALL_TAGS = ['API Key', 'Anthropic', 'Tutorial', 'Security', 'Rate Limits', 'Tutorial',
-  'Python', 'Node.js', 'curl', 'SDK', 'Claude Opus', 'Models', 'AI', 'Deep Learning',
-  'Claude Sonnet', 'Review', 'Production', 'Claude Haiku', 'Speed', 'Cost Optimization',
-  'Proxy API', 'Architecture', 'Middleware', 'Claude Max', 'Streaming', 'SSE', 'Technical',
-  'Ideas', 'Projects', 'Use Cases', 'Inspiration', 'Coding', 'Claude Code', 'Development',
-  'VS Code', 'Cursor', 'Cost Optimization', 'Extended Thinking', 'Advanced', 'Reasoning',
-  'Plans', 'Features', 'Pricing', 'Chatbot', 'React', 'Python', 'Deployment', 'Comparison',
-  'OpenAI', 'Developer Guide', 'Tool Use', 'Function Calling', 'Agents', 'Context Window'];
-
-export default function BlogClient() {
-  const [posts, setPosts] = useState<Post[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [query, setQuery] = useState('');
-  const [activeTag, setActiveTag] = useState('');
-
-  useEffect(() => {
-    fetch('/api/blog')
-      .then(r => r.json())
-      .then(d => { setPosts(d.posts || []); setLoading(false); })
-      .catch(() => setLoading(false));
-  }, []);
-
-  const tags = [...new Set(ALL_TAGS)];
-
-  const filtered = posts.filter(p => {
-    const matchQuery = !query || p.title.toLowerCase().includes(query.toLowerCase()) ||
-      (p.excerpt || '').toLowerCase().includes(query.toLowerCase()) ||
-      (p.tags || '').toLowerCase().includes(query.toLowerCase());
-    const matchTag = !activeTag || (p.tags || '').includes(activeTag);
-    return matchQuery && matchTag;
-  });
-
-  const featured = filtered[0];
-  const rest = filtered.slice(1);
-
-  return (
-    <div className="min-h-screen bg-[#F9FAFB] flex flex-col">
-      <Header />
-
-      <main className="flex-1 max-w-6xl mx-auto px-4 sm:px-6 py-10 w-full">
-        {/* Hero */}
-        <div className="text-center mb-10">
-          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-purple-50 border border-purple-100 text-purple-600 text-xs font-semibold mb-4">
-            <BookOpen className="w-3.5 h-3.5" />
-            {posts.length} Articles Published
-          </div>
-          <h1 className="text-4xl font-black text-[#111827] mb-3 tracking-tight">ClaudMax Blog</h1>
-          <p className="text-[#9CA3AF] text-lg max-w-xl mx-auto">
-            Tutorials, guides, and deep dives into Claude AI integration, API development, and building with Claude Code.
-          </p>
-        </div>
-
-        {/* Search + Filter */}
-        <div className="mb-10 space-y-4">
-          <div className="relative max-w-lg mx-auto">
-            <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
-            <input
-              value={query}
-              onChange={e => setQuery(e.target.value)}
-              placeholder="Search articles..."
-              className="w-full pl-11 pr-4 py-3 bg-white border border-gray-200 rounded-2xl text-sm text-[#111827] placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all shadow-sm"
-            />
-          </div>
-          <div className="flex gap-2 overflow-x-auto pb-2 scrollbar-hide">
-            <button onClick={() => setActiveTag('')}
-              className={`shrink-0 px-3.5 py-1.5 rounded-full text-xs font-semibold border transition-all ${!activeTag ? 'bg-[#5244F3] text-white border-[#5244F3]' : 'bg-white text-[#6B7280] border-gray-200 hover:border-purple-300 hover:text-purple-600'}`}>
-              All Posts
-            </button>
-            {tags.slice(0, 12).map(t => (
-              <button key={t} onClick={() => setActiveTag(activeTag === t ? '' : t)}
-                className={`shrink-0 px-3.5 py-1.5 rounded-full text-xs font-semibold border transition-all ${activeTag === t ? 'bg-[#5244F3] text-white border-[#5244F3]' : 'bg-white text-[#6B7280] border-gray-200 hover:border-purple-300 hover:text-purple-600'}`}>
-                {t}
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {loading ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {[...Array(6)].map((_, i) => (
-              <div key={i} className="bg-white rounded-2xl border border-gray-200 h-72 animate-pulse" />
-            ))}
-          </div>
-        ) : filtered.length === 0 ? (
-          <div className="text-center py-20 bg-white rounded-2xl border border-gray-200">
-            <div className="text-4xl mb-4">🔍</div>
-            <h3 className="text-lg font-bold text-[#111827] mb-2">No articles found</h3>
-            <p className="text-[#9CA3AF] text-sm">
-              {query ? `No results for "${query}" — try different keywords` : 'No posts in this category yet.'}
-            </p>
-            {query && <button onClick={() => setQuery('')} className="mt-4 text-purple-600 font-semibold text-sm hover:underline">Clear search</button>}
-          </div>
-        ) : (
-          <>
-            {/* Featured */}
-            {featured && (
-              <Link href={`/blog/${featured.slug}`} className="block mb-10 group">
-                <div className="bg-white rounded-2xl border border-gray-200 overflow-hidden hover:shadow-lg hover:border-purple-200 transition-all">
-                  <div className="flex flex-col lg:flex-row">
-                    {featured.coverImage && (
-                      <div className="lg:w-5/12 shrink-0">
-                        <img src={featured.coverImage} alt={featured.title} className="w-full h-56 lg:h-full object-cover" />
-                      </div>
-                    )}
-                    <div className="flex-1 p-7 lg:p-9 flex flex-col justify-center">
-                      <div className="flex flex-wrap gap-2 mb-4">
-                        {(featured.tags || '').split(',').filter(Boolean).slice(0, 3).map(t => (
-                          <span key={t} className="text-xs font-bold px-2.5 py-1 rounded-full bg-purple-50 text-purple-600 border border-purple-100">{t.trim()}</span>
-                        ))}
-                      </div>
-                      <h2 className="text-2xl lg:text-3xl font-black text-[#111827] mb-3 group-hover:text-purple-600 transition-colors leading-tight">{featured.title}</h2>
-                      <p className="text-[#6B7280] text-sm leading-relaxed mb-5 line-clamp-2">{featured.excerpt || featured.title}</p>
-                      <div className="flex items-center gap-4 text-xs text-[#9CA3AF]">
-                        <span className="font-medium text-[#374151]">{featured.author?.name || 'ClaudMax Team'}</span>
-                        <span>·</span>
-                        <span className="flex items-center gap-1"><Clock className="w-3.5 h-3.5" />{readingTime(featured.excerpt || '')} min read</span>
-                        <span>·</span>
-                        <span className="flex items-center gap-1"><Eye className="w-3.5 h-3.5" />{featured.views.toLocaleString()} views</span>
-                        <span>·</span>
-                        <span>{fmtDate(featured.publishedAt)}</span>
-                      </div>
-                      <div className="mt-5 flex items-center gap-2 text-purple-600 font-semibold text-sm group-hover:gap-3 transition-all">
-                        Read Article <ArrowRight className="w-4 h-4" />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </Link>
-            )}
-
-            {/* Grid */}
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-              {rest.map(post => (
-                <Link key={post.id} href={`/blog/${post.slug}`} className="block group">
-                  <div className="bg-white rounded-2xl border border-gray-200 overflow-hidden hover:shadow-lg hover:border-purple-200 transition-all h-full flex flex-col">
-                    {post.coverImage && (
-                      <div className="overflow-hidden">
-                        <img src={post.coverImage} alt={post.title} className="w-full h-40 object-cover group-hover:scale-105 transition-transform duration-300" />
-                      </div>
-                    )}
-                    <div className="p-5 flex flex-col flex-1">
-                      <div className="flex gap-1.5 mb-3 flex-wrap">
-                        {(post.tags || '').split(',').filter(Boolean).slice(0, 2).map(t => (
-                          <span key={t} className="text-xs font-bold px-2.5 py-1 rounded-full bg-purple-50 text-purple-600 border border-purple-100">{t.trim()}</span>
-                        ))}
-                      </div>
-                      <h3 className="text-base font-bold text-[#111827] mb-2 group-hover:text-purple-600 transition-colors line-clamp-2 leading-snug">{post.title}</h3>
-                      <p className="text-[#9CA3AF] text-xs line-clamp-2 flex-1 leading-relaxed">{post.excerpt || post.title}</p>
-                      <div className="flex items-center gap-2 text-xs text-[#9CA3AF] mt-4 pt-3 border-t border-gray-100">
-                        <span className="flex items-center gap-1"><Clock className="w-3 h-3" />{readingTime(post.excerpt || '')} min</span>
-                        <span>·</span>
-                        <span className="flex items-center gap-1"><Eye className="w-3 h-3" />{post.views.toLocaleString()}</span>
-                        <span>·</span>
-                        <span>{fmtDate(post.publishedAt)}</span>
-                      </div>
-                    </div>
-                  </div>
-                </Link>
-              ))}
-            </div>
-          </>
-        )}
-      </main>
-
-      <Footer />
-    </div>
-  );
-}

package/src/app/blog/[slug]/page.tsx

@@ -1,117 +0,0 @@
-import type { Metadata } from 'next';
-import { notFound } from 'next/navigation';
-import Header from '@/components/Header';
-import Footer from '@/components/Footer';
-import { prisma } from '@/lib/prisma';
-
-type Props = { params: Promise<{ slug: string }> };
-
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  const { slug } = await params;
-  const post = await prisma.post.findUnique({ where: { slug, published: true } });
-  if (!post) return { title: 'Post Not Found' };
-  return {
-    title: post.seoTitle ?? post.title,
-    description: post.seoDesc ?? post.excerpt ?? post.title,
-    openGraph: {
-      title: post.seoTitle ?? post.title,
-      description: post.seoDesc ?? post.excerpt ?? post.title,
-      type: 'article',
-      publishedTime: post.publishedAt?.toISOString(),
-      images: post.coverImage ? [{ url: post.coverImage }] : [],
-    },
-    twitter: {
-      card: 'summary_large_image',
-      title: post.seoTitle ?? post.title,
-      description: post.seoDesc ?? post.excerpt ?? post.title,
-      images: post.coverImage ? [post.coverImage] : [],
-    },
-  };
-}
-
-function fmtDate(d: Date | string | null) {
-  if (!d) return '';
-  return new Date(d).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });
-}
-
-export default async function BlogPostPage({ params }: Props) {
-  const { slug } = await params;
-  const post = await prisma.post.findUnique({
-    where: { slug, published: true },
-    include: { author: { select: { name: true } } },
-  });
-
-  if (!post) notFound();
-
-  // Increment views
-  await prisma.post.update({ where: { id: post.id }, data: { views: { increment: 1 } } });
-
-  const related = await prisma.post.findMany({
-    where: { published: true, id: { not: post.id } },
-    orderBy: { views: 'desc' },
-    take: 3,
-    select: { id: true, title: true, slug: true, excerpt: true, tags: true, publishedAt: true },
-  });
-
-  return (
-    <div className="min-h-screen bg-[#F9FAFB] flex flex-col">
-      <Header />
-
-      <article className="flex-1 max-w-3xl mx-auto px-4 sm:px-6 py-12 w-full">
-        {/* Breadcrumb */}
-        <div className="flex items-center gap-2 text-xs text-[#9CA3AF] mb-6">
-          <a href="/" className="hover:text-purple-600 transition-colors">Home</a>
-          <span>/</span>
-          <a href="/blog" className="hover:text-purple-600 transition-colors">Blog</a>
-          <span>/</span>
-          <span className="text-[#6B7280] truncate max-w-48">{post.title}</span>
-        </div>
-
-        {/* Header */}
-        {post.coverImage && (
-          <img src={post.coverImage} alt={post.title} className="w-full h-64 object-cover rounded-2xl mb-8 card-shadow" />
-        )}
-
-        <div className="flex flex-wrap gap-2 mb-4">
-          {post.tags.split(',').filter(Boolean).map(t => (
-            <span key={t} className="text-xs font-bold px-2.5 py-1 rounded-full bg-purple-50 text-purple-600 border border-purple-100">{t.trim()}</span>
-          ))}
-        </div>
-
-        <h1 className="text-3xl sm:text-4xl font-black text-[#111827] mb-4">{post.title}</h1>
-
-        <div className="flex items-center gap-4 text-sm text-[#9CA3AF] mb-8 pb-8 border-b border-gray-200">
-          {post.author?.name && <span className="font-semibold text-[#6B7280]">{post.author.name}</span>}
-          <span>{fmtDate(post.publishedAt)}</span>
-          <span>·</span>
-          <span>{(post.views + 1).toLocaleString()} views</span>
-        </div>
-
-        {/* Content */}
-        <div className="prose prose-lg max-w-none">
-          <div
-            className="text-[#374151] leading-relaxed"
-            dangerouslySetInnerHTML={{ __html: post.content.replace(/\n/g, '<br/>') }}
-          />
-        </div>
-
-        {/* Related */}
-        {related.length > 0 && (
-          <div className="mt-16 pt-10 border-t border-gray-200">
-            <h3 className="text-xl font-bold text-[#111827] mb-6">More Articles</h3>
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-              {related.map(p => (
-                <a key={p.id} href={`/blog/${p.slug}`} className="block bg-white rounded-xl border border-gray-200 p-4 hover:shadow-md transition-all group">
-                  <p className="text-sm font-bold text-[#374151] group-hover:text-purple-600 transition-colors line-clamp-2">{p.title}</p>
-                  <p className="text-xs text-[#9CA3AF] mt-2">{fmtDate(p.publishedAt)}</p>
-                </a>
-              ))}
-            </div>
-          </div>
-        )}
-      </article>
-
-      <Footer />
-    </div>
-  );
-}

package/src/app/blog/page.tsx

@@ -1,20 +0,0 @@
-import type { Metadata } from 'next';
-import BlogClient from './BlogClient';
-
-export const metadata: Metadata = {
-  title: 'Blog | ClaudMax — Claude API Tutorials & Guides',
-  description: 'Tutorials, guides, and deep dives into Claude AI integration, API development, Claude Code setup, and building with Anthropic models.',
-  keywords: 'Claude API blog,Claude tutorials,Claude Code guide,Anthropic API,OpenRouter tutorials,AI development guide',
-  openGraph: {
-    title: 'ClaudMax Blog',
-    description: 'Tutorials, guides, and deep dives into Claude AI integration.',
-    type: 'website',
-    url: 'https://claudmax.pro/blog',
-  },
-  twitter: { card: 'summary_large_image', title: 'ClaudMax Blog' },
-  robots: { index: true, follow: true },
-};
-
-export default function BlogPage() {
-  return <BlogClient />;
-}

package/src/app/check-usage/CheckUsageClient.tsx

@@ -1,186 +0,0 @@
-'use client';
-
-import { useState, useEffect, useRef, useCallback } from 'react';
-import Link from 'next/link';
-import Header from '@/components/Header';
-import Footer from '@/components/Footer';
-
-interface KeyStatus {
-  key: string; prefix: string; name: string; tier: string; isActive: boolean;
-  displayMultiplier: number; windowStartAt: string; windowResetAt: string; windowResetMs: number;
-  requestsUsed: number; requestsLimit: number; requestsLeft: number; requestsPerMinute: number;
-  tokensUsed: number; tokensLimit: number; tokensLeft: number;
-  lastUsedAt: string | null; createdAt: string;
-}
-
-function CircularGauge({ used, limit, label }: { used: number; limit: number; label: string }) {
-  const pct = limit > 0 ? Math.min(100, (used / limit) * 100) : 0;
-  const r = 36, circ = 2 * Math.PI * r, dash = (pct / 100) * circ;
-  const barColor = pct >= 100 ? '#EF4444' : pct >= 80 ? '#F59E0B' : '#5244F3';
-  return (
-    <div className="flex flex-col items-center gap-2">
-      <div className="relative w-24 h-24">
-        <svg className="w-24 h-24 -rotate-90" viewBox="0 0 80 80">
-          <circle cx="40" cy="40" r={r} fill="none" stroke="#F3F4F6" strokeWidth="6" />
-          <circle cx="40" cy="40" r={r} fill="none" stroke={barColor} strokeWidth="6" strokeLinecap="round"
-            strokeDasharray={`${dash} ${circ}`} style={{ transition: 'stroke-dasharray 0.5s ease' }} />
-        </svg>
-        <div className="absolute inset-0 flex items-center justify-center">
-          <span className="text-lg font-black text-[#111827]">{pct.toFixed(0)}%</span>
-        </div>
-      </div>
-      <p className="text-xs text-[#9CA3AF] font-medium">{label}</p>
-    </div>
-  );
-}
-
-function CountdownTimer({ windowResetMs }: { windowResetMs: number }) {
-  const [ms, setMs] = useState(windowResetMs);
-  useEffect(() => { setMs(windowResetMs); }, [windowResetMs]);
-  useEffect(() => {
-    if (ms <= 0) return;
-    const interval = setInterval(() => { setMs(prev => { if (prev <= 1000) { clearInterval(interval); return 0; } return prev - 1000; }); }, 1000);
-    return () => clearInterval(interval);
-  }, [ms]);
-  const h = Math.floor(ms / 3600000), m = Math.floor((ms % 3600000) / 60000), s = Math.floor((ms % 60000) / 1000);
-  return <span className="text-purple-600 font-bold tabular-nums">{h > 0 ? `${String(h).padStart(2,'0')}:` : ''}{String(m).padStart(2,'0')}:{String(s).padStart(2,'0')}</span>;
-}
-
-function formatTokens(n: number) { return n >= 1_000_000_000 ? `${(n/1_000_000_000).toFixed(1)}B` : n >= 1_000_000 ? `${(n/1_000_000).toFixed(1)}M` : n >= 1_000 ? `${(n/1_000).toFixed(0)}K` : String(n); }
-function pctColor(used: number, limit: number) { return used >= limit ? 'bg-red-500' : used >= limit * 0.8 ? 'bg-amber-500' : 'bg-purple-500'; }
-
-export default function CheckUsageClient() {
-  const [apiKey, setApiKey] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [status, setStatus] = useState<KeyStatus | null>(null);
-  const [error, setError] = useState('');
-  const [live, setLive] = useState(false);
-  const savedKeyRef = useRef('');
-
-  const fetchStatus = useCallback(async (key: string) => {
-    try {
-      const res = await fetch('/api/v1/key-status', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ apiKey: key }) });
-      const data = await res.json();
-      if (res.ok) { setStatus(data); setLive(true); }
-      else { setError(data.error ?? 'Invalid API key'); setStatus(null); setLive(false); }
-    } catch { setError('Failed to check key status. Please try again.'); }
-  }, []);
-
-  useEffect(() => {
-    if (!status || !savedKeyRef.current) return;
-    const interval = setInterval(() => fetchStatus(savedKeyRef.current), 3000);
-    return () => clearInterval(interval);
-  }, [status, fetchStatus]);
-
-  const checkStatus = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!apiKey.trim()) return;
-    setLoading(true); setError(''); setStatus(null); setLive(false);
-    savedKeyRef.current = apiKey.trim();
-    await fetchStatus(savedKeyRef.current);
-    setLoading(false);
-  };
-
-  const tierPlans: Record<string, { label: string; color: string; bg: string }> = {
-    '5x': { label: '5x Max', color: 'text-blue-600', bg: 'bg-blue-50' },
-    '20x': { label: '20x Max', color: 'text-purple-600', bg: 'bg-purple-50' },
-    unlimited: { label: 'Unlimited', color: 'text-amber-600', bg: 'bg-amber-50' },
-  };
-  const plan = status ? (tierPlans[status.tier] ?? tierPlans['5x']) : null;
-
-  return (
-    <div className="min-h-screen bg-[#F9FAFB] flex flex-col">
-      <Header />
-      <div className="flex-1 max-w-3xl mx-auto px-4 sm:px-6 py-12 w-full">
-        <div className="text-center mb-8">
-          <h1 className="text-4xl font-black text-[#111827] mb-2">API Key Status</h1>
-          <p className="text-[#9CA3AF] text-base">Check your token usage, limits, and window timer in real time.</p>
-        </div>
-        <form onSubmit={checkStatus} className="flex gap-2 mb-8">
-          <input value={apiKey} onChange={e => setApiKey(e.target.value)} placeholder="sk-cmx_your_api_key"
-            className="flex-1 h-12 px-4 bg-white border border-gray-200 rounded-2xl text-sm font-mono focus:outline-none focus:border-purple-400 focus:ring-2 focus:ring-purple-100 transition-all" />
-          <button type="submit" disabled={loading || !apiKey.trim()}
-            className="h-12 px-6 bg-[#5244F3] hover:bg-[#4338CA] disabled:bg-gray-300 text-white rounded-2xl text-sm font-semibold transition-colors shadow-sm whitespace-nowrap">
-            {loading ? 'Checking...' : 'Check'}
-          </button>
-        </form>
-        {error && <div className="mb-6 p-4 rounded-2xl border border-red-200 bg-red-50 text-red-600 text-sm font-medium">{error}</div>}
-        {status && (
-          <div className="space-y-4">
-            <div className="bg-white rounded-2xl border border-gray-200 p-6">
-              <div className="flex items-center justify-between mb-4">
-                <div><h3 className="text-[#111827] font-bold text-lg">{status.name}</h3><p className="text-[#D1D5DB] text-xs font-mono mt-0.5">{status.prefix}•••••••••••</p></div>
-                <div className="flex items-center gap-2">
-                  {plan && <span className={`text-xs font-bold px-2.5 py-1 rounded-full ${plan.bg} ${plan.color}`}>{plan.label}</span>}
-                  <span className={`text-xs font-bold px-2.5 py-1 rounded-full flex items-center gap-1 ${status.isActive ? 'bg-emerald-50 text-emerald-700 border border-emerald-200' : 'bg-red-50 text-red-500 border border-red-100'}`}>
-                    <span className={`w-1.5 h-1.5 rounded-full ${status.isActive ? 'bg-emerald-500 animate-pulse' : 'bg-red-500'}`} />{status.isActive ? 'Active' : 'Inactive'}
-                  </span>
-                  {live && <span className="text-xs font-bold px-2 py-0.5 rounded-full bg-emerald-50 text-emerald-600 border border-emerald-100 flex items-center gap-1"><span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />Live</span>}
-                </div>
-              </div>
-              <div className="flex items-center gap-6 py-4 border-t border-gray-100">
-                <CircularGauge used={status.tokensUsed} limit={status.tokensLimit} label="Tokens" />
-                <div className="flex-1 space-y-4">
-                  {[['Tokens', status.tokensUsed, status.tokensLimit, status.tokensLeft], ['Total Requests in 24hrs', status.requestsUsed, status.requestsLimit, status.requestsLeft]].map(([label, used, limit, left]) => (
-                    <div key={label as string}>
-                      <div className="flex justify-between text-xs mb-1.5">
-                        <span className="text-[#9CA3AF]">{label as string}</span>
-                        <span className="font-mono font-semibold text-[#374151]">{label === 'Total Requests in 24hrs' ? `${formatTokens(used as number)} / ${formatTokens(limit as number)} · 60/min` : `${formatTokens(used as number)} / ${formatTokens(limit as number)}`}</span>
-                      </div>
-                      <div className="h-2.5 bg-gray-100 rounded-full overflow-hidden">
-                        <div className={`h-full rounded-full transition-all duration-500 ${pctColor(used as number, limit as number)}`} style={{ width: `${Math.min(100, ((used as number) / (limit as number)) * 100)}%` }} />
-                      </div>
-                      <div className="flex justify-between mt-1">
-                        <span className="text-[10px] text-[#D1D5DB]">used</span>
-                        <span className="text-[10px] text-emerald-600 font-semibold">{formatTokens(left as number)} left</span>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </div>
-            <div className="grid grid-cols-2 gap-4">
-              <div className="bg-white rounded-2xl border border-gray-200 p-5">
-                <p className="text-[#9CA3AF] text-xs font-bold uppercase tracking-widest mb-2">Window Reset</p>
-                <p className="text-2xl font-black text-purple-600 mt-2"><CountdownTimer windowResetMs={status.windowResetMs} /></p>
-                <p className="text-[#D1D5DB] text-xs mt-1">{new Date(status.windowResetAt).toLocaleTimeString()} · 5h rolling window</p>
-              </div>
-              <div className="bg-white rounded-2xl border border-gray-200 p-5">
-                <p className="text-[#9CA3AF] text-xs font-bold uppercase tracking-widest mb-2">Tokens Left</p>
-                <p className="text-2xl font-black text-emerald-600 mt-2">{formatTokens(status.tokensLeft)}</p>
-                <p className="text-[#D1D5DB] text-xs mt-1">of {formatTokens(status.tokensLimit)} token budget</p>
-              </div>
-            </div>
-            <div className="bg-white rounded-2xl border border-gray-200 p-5">
-              <p className="text-[#9CA3AF] text-xs font-bold uppercase tracking-widest mb-4">Details</p>
-              <div className="grid grid-cols-2 gap-4">
-                {[
-                  ['Created', new Date(status.createdAt).toLocaleDateString()],
-                  ['Last Used', status.lastUsedAt ? new Date(status.lastUsedAt).toLocaleString() : 'Never'],
-                  ['Plan', (status.tier || '5x').toUpperCase()],
-                ].map(([label, value]) => (
-                  <div key={label as string} className="flex justify-between items-center py-2 border-b border-gray-100 last:border-0">
-                    <span className="text-[#9CA3AF] text-sm">{label as string}</span>
-                    <span className="text-[#374151] text-sm font-semibold">{value as string}</span>
-                  </div>
-                ))}
-              </div>
-            </div>
-            <div className="rounded-2xl border border-purple-200 bg-purple-50 p-5 text-center">
-              <p className="text-[#9CA3AF] text-sm mb-3">Need help integrating ClaudMax?</p>
-              <Link href="/docs"><button className="bg-[#5244F3] hover:bg-[#4338CA] text-white font-semibold px-6 py-2.5 rounded-xl text-sm transition-colors shadow-sm">Read Documentation</button></Link>
-            </div>
-          </div>
-        )}
-        {!status && !loading && !error && (
-          <div className="text-center py-16 bg-white rounded-2xl border border-gray-200">
-            <h3 className="text-[#111827] font-bold text-lg mb-2">Enter your API key</h3>
-            <p className="text-[#9CA3AF] text-sm mb-6">Enter the API key provided by your administrator to check usage and limits.</p>
-            <Link href="/docs"><button className="bg-[#5244F3] hover:bg-[#4338CA] text-white font-semibold px-8 py-2.5 rounded-xl text-sm transition-colors shadow-sm">View Documentation</button></Link>
-          </div>
-        )}
-      </div>
-      <Footer />
-    </div>
-  );
-}

package/src/app/check-usage/layout.tsx

@@ -1,11 +0,0 @@
-import type { Metadata } from 'next';
-
-export const metadata: Metadata = {
-  title: 'Check Usage — ClaudMax',
-  description: 'Check your ClaudMax API key usage, token limits, and window reset timer in real time.',
-  keywords: 'API usage, token counter, rate limit, ClaudMax usage',
-};
-
-export default function CheckUsageLayout({ children }: { children: React.ReactNode }) {
-  return children;
-}

package/src/app/check-usage/page.tsx

@@ -1,15 +0,0 @@
-import type { Metadata } from 'next';
-import CheckUsageClient from './CheckUsageClient';
-
-export const metadata: Metadata = {
-  title: 'Check Usage | ClaudMax — API Key Status',
-  description: 'Check your ClaudMax API key usage in real time. View token counts, request limits, and 5-hour rolling window resets for all Claude models.',
-  keywords: 'ClaudMax usage, API key status, token usage, check API key usage, Claude API usage tracker',
-  openGraph: { title: 'Check Usage | ClaudMax', description: 'Check your ClaudMax API key usage in real time.', type: 'website', url: 'https://claudmax.pro/check-usage', siteName: 'ClaudMax' },
-  twitter: { card: 'summary_large_image', title: 'Check Usage | ClaudMax' },
-  robots: { index: true, follow: true },
-};
-
-export default function CheckUsagePage() {
-  return <CheckUsageClient />;
-}

package/src/app/docs/layout.tsx

@@ -1,16 +0,0 @@
-import type { Metadata } from 'next';
-
-export const metadata: Metadata = {
-  title: 'Documentation — ClaudMax',
-  description: 'Complete API reference, integration guides, code examples, and tutorials for ClaudMax — the fastest Claude API gateway powered by OpenRouter.',
-  keywords: 'ClaudMax documentation, Claude API reference, OpenRouter API, API integration guide, Claude Code setup, Cursor MCP, Windsurf MCP, API authentication',
-  openGraph: {
-    title: 'Documentation — ClaudMax',
-    description: 'Complete API reference and integration guides for ClaudMax.',
-    type: 'website',
-  },
-};
-
-export default function DocsLayout({ children }: { children: React.ReactNode }) {
-  return children;
-}