auramaxx 0.0.1

package/src/app/api/apps/install/route.ts

@@ -0,0 +1,132 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { installApp, removeApp } from '../../../../../server/lib/app-installer';
+
+const WALLET_API = process.env.WALLET_SERVER_URL || 'http://localhost:4242';
+
+/**
+ * Validate admin access with explicit token validation.
+ * This must never trust public endpoints like GET /setup.
+ */
+async function validateAdmin(authHeader: string | null): Promise<boolean> {
+  if (!authHeader) return false;
+  const [scheme, token] = authHeader.trim().split(/\s+/, 2);
+  if (!scheme || scheme.toLowerCase() !== 'bearer' || !token) return false;
+
+  try {
+    const resp = await fetch(`${WALLET_API}/auth/validate`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ token }),
+      cache: 'no-store',
+    });
+    if (!resp.ok) return false;
+    const data = await resp.json() as { valid?: boolean; isAdmin?: boolean };
+    return data.valid === true && data.isAdmin === true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * POST /api/apps/install — Install a app from a source
+ * Body: { source: string, name?: string, force?: boolean }
+ */
+export async function POST(req: NextRequest) {
+  const authHeader = req.headers.get('authorization');
+  const isAdmin = await validateAdmin(authHeader);
+  if (!isAdmin) {
+    return NextResponse.json(
+      { success: false, error: 'Admin access required' },
+      { status: 403 },
+    );
+  }
+
+  try {
+    const body = await req.json();
+    const { source, name, force } = body;
+
+    if (!source || typeof source !== 'string') {
+      return NextResponse.json(
+        { success: false, error: 'source is required' },
+        { status: 400 },
+      );
+    }
+
+    const result = installApp(source, { name, force });
+
+    // Hot-reload: create token for the new app without restart
+    try {
+      await fetch(`${WALLET_API}/apps/${result.id}/reload`, {
+        method: 'POST',
+        headers: {
+          Authorization: authHeader!,
+          'Content-Type': 'application/json',
+        },
+      });
+    } catch {
+      // Non-critical — app will get a token on next server restart
+    }
+
+    return NextResponse.json({
+      success: true,
+      app: {
+        id: result.id,
+        name: result.name,
+        source: result.source,
+      },
+    });
+  } catch (err) {
+    const message = err instanceof Error ? err.message : 'Install failed';
+    return NextResponse.json(
+      { success: false, error: message },
+      { status: 400 },
+    );
+  }
+}
+
+/**
+ * DELETE /api/apps/install — Remove an installed app
+ * Body: { appId: string }
+ */
+export async function DELETE(req: NextRequest) {
+  const authHeader = req.headers.get('authorization');
+  const isAdmin = await validateAdmin(authHeader);
+  if (!isAdmin) {
+    return NextResponse.json(
+      { success: false, error: 'Admin access required' },
+      { status: 403 },
+    );
+  }
+
+  try {
+    const body = await req.json();
+    const { appId } = body;
+
+    if (!appId || typeof appId !== 'string') {
+      return NextResponse.json(
+        { success: false, error: 'appId is required' },
+        { status: 400 },
+      );
+    }
+
+    // Revoke the app's token via Express (separate process, holds token in memory)
+    try {
+      await fetch(`${WALLET_API}/apps/${appId}/approve`, {
+        method: 'DELETE',
+        headers: { Authorization: authHeader! },
+      });
+    } catch {
+      // Non-critical if Express is down — token expires in 24h max
+    }
+
+    removeApp(appId);
+
+    return NextResponse.json({ success: true, appId, removed: true });
+  } catch (err) {
+    const message = err instanceof Error ? err.message : 'Remove failed';
+    return NextResponse.json(
+      { success: false, error: message },
+      { status: 400 },
+    );
+  }
+}

package/src/app/api/apps/manifests/route.ts

@@ -0,0 +1,16 @@
+import { NextResponse } from 'next/server';
+import { loadAppManifests } from '@/lib/app-loader';
+
+// GET /api/apps/manifests - Return all loaded app manifests
+export async function GET() {
+  try {
+    const manifests = loadAppManifests();
+    return NextResponse.json({ success: true, manifests });
+  } catch (error) {
+    console.error('Failed to load app manifests:', error);
+    return NextResponse.json(
+      { success: false, error: 'Failed to load app manifests' },
+      { status: 500 }
+    );
+  }
+}

package/src/app/api/apps/static/[...path]/route.ts

@@ -0,0 +1,57 @@
+import { NextRequest, NextResponse } from 'next/server';
+import fs from 'fs';
+import path from 'path';
+
+const MIME_TYPES: Record<string, string> = {
+  '.html': 'text/html',
+  '.css': 'text/css',
+  '.js': 'application/javascript',
+  '.json': 'application/json',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.svg': 'image/svg+xml',
+  '.gif': 'image/gif',
+  '.ico': 'image/x-icon',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+};
+
+// GET /api/apps/static/[...path] - Serve static files from apps/ directory
+export async function GET(
+  _request: NextRequest,
+  { params }: { params: Promise<{ path: string[] }> }
+) {
+  try {
+    const { path: segments } = await params;
+    const relativePath = segments.join('/');
+
+    // Security: prevent path traversal
+    if (relativePath.includes('..') || relativePath.includes('\0')) {
+      return NextResponse.json({ error: 'Invalid path' }, { status: 400 });
+    }
+
+    const appsDir = path.join(process.cwd(), 'apps');
+    const filePath = path.join(appsDir, relativePath);
+
+    // Ensure resolved path is within apps/
+    const resolved = path.resolve(filePath);
+    if (!resolved.startsWith(path.resolve(appsDir))) {
+      return NextResponse.json({ error: 'Invalid path' }, { status: 400 });
+    }
+
+    if (!fs.existsSync(filePath) || fs.statSync(filePath).isDirectory()) {
+      return NextResponse.json({ error: 'Not found' }, { status: 404 });
+    }
+
+    const ext = path.extname(filePath).toLowerCase();
+    const contentType = MIME_TYPES[ext] || 'application/octet-stream';
+    const content = fs.readFileSync(filePath);
+
+    return new NextResponse(content, {
+      headers: { 'Content-Type': contentType },
+    });
+  } catch (error) {
+    console.error('Failed to serve app static file:', error);
+    return NextResponse.json({ error: 'Not found' }, { status: 404 });
+  }
+}

package/src/app/api/docs/plain/route.ts

@@ -0,0 +1,74 @@
+import { NextRequest, NextResponse } from 'next/server';
+import {
+  README_DOC_FILENAME,
+  listDocFiles,
+  normalizeRequestedDocFilename,
+  readDocFile,
+  renderMarkdown,
+} from '@/lib/docs';
+
+/**
+ * GET /api/docs/plain?file=<filename>&q=<query>
+ * Returns docs list plus rendered markdown for selected file.
+ */
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const requestedFile = searchParams.get('file') || README_DOC_FILENAME;
+    const normalizedRequested = normalizeRequestedDocFilename(requestedFile);
+    const rawQuery = searchParams.get('q') || '';
+    const normalizedQuery = rawQuery.trim().toLowerCase();
+    const isDevMode = process.env.NODE_ENV !== 'production';
+
+    // Embedded vault docs only expose internal docs in dev mode.
+    const allDocs = (await listDocFiles()).filter((doc) => isDevMode || !doc.filename.startsWith('internal/'));
+    const contentByFile = new Map<string, string>();
+    const docs = normalizedQuery
+      ? (await Promise.all(allDocs.map(async (doc) => {
+          const content = await readDocFile(doc.filename);
+          contentByFile.set(doc.filename, content);
+          const haystack = `${doc.filename}\n${doc.title}\n${doc.summary}\n${content}`.toLowerCase();
+          return haystack.includes(normalizedQuery) ? doc : null;
+        }))).filter((doc): doc is NonNullable<typeof doc> => doc !== null)
+      : allDocs;
+
+    if (docs.length === 0) {
+      const markdownHtml = normalizedQuery
+        ? renderMarkdown(`No docs match \`${rawQuery.trim()}\`.`)
+        : renderMarkdown('No docs found.');
+      return NextResponse.json({
+        success: true,
+        docs: [],
+        selectedFile: '',
+        content: '',
+        markdownHtml,
+      });
+    }
+
+    const available = new Set(docs.map((doc) => doc.filename));
+    const fallback = available.has(README_DOC_FILENAME)
+      ? README_DOC_FILENAME
+      : docs[0]?.filename || README_DOC_FILENAME;
+    const selectedFile = available.has(normalizedRequested) ? normalizedRequested : fallback;
+    const content = contentByFile.get(selectedFile) ?? await readDocFile(selectedFile);
+    const markdownHtml = renderMarkdown(content, { currentDocFilename: selectedFile });
+
+    return NextResponse.json({
+      success: true,
+      docs: docs.map((doc) => ({
+        filename: doc.filename,
+        title: doc.title,
+        summary: doc.summary,
+      })),
+      selectedFile,
+      content,
+      markdownHtml,
+    });
+  } catch (error) {
+    console.error('[DocsPlain] Failed to load docs:', error);
+    return NextResponse.json(
+      { success: false, error: 'Failed to load docs content' },
+      { status: 500 },
+    );
+  }
+}

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

@@ -0,0 +1,92 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { broadcast } from '@/lib/websocket-server';
+import { prisma } from '@/lib/db';
+import type { WalletEvent } from '@/lib/events';
+
+/**
+ * GET /api/events
+ * Query events from database with optional filtering
+ * No authentication required
+ */
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const type = searchParams.get('type');
+    const category = searchParams.get('category');
+    const limit = Math.min(parseInt(searchParams.get('limit') || '50'), 250);
+    const offset = parseInt(searchParams.get('offset') || '0');
+
+    // Build where clause
+    const where: Record<string, unknown> = {};
+    if (type) {
+      where.type = type;
+    } else if (category) {
+      where.type = { startsWith: `${category}:` };
+    }
+
+    // Query events
+    const [events, total] = await Promise.all([
+      prisma.event.findMany({
+        where,
+        orderBy: { timestamp: 'desc' },
+        take: limit,
+        skip: offset,
+      }),
+      prisma.event.count({ where }),
+    ]);
+
+    return NextResponse.json({
+      success: true,
+      events: events.map((e: any) => ({
+        ...e,
+        data: typeof e.data === 'string' ? JSON.parse(e.data) : e.data,
+      })),
+      pagination: {
+        total,
+        limit,
+        offset,
+        hasMore: offset + events.length < total,
+      },
+    });
+  } catch (error) {
+    console.error('[Events] Error fetching events:', error);
+    return NextResponse.json(
+      { success: false, error: 'Failed to fetch events' },
+      { status: 500 }
+    );
+  }
+}
+
+/**
+ * POST /api/events
+ * Webhook endpoint to receive events from Express server
+ * and broadcast them to WebSocket clients
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const event: WalletEvent = await request.json();
+
+    // Validate event structure
+    if (!event.type || !event.timestamp || !event.data) {
+      return NextResponse.json(
+        { error: 'Invalid event structure' },
+        { status: 400 }
+      );
+    }
+
+    // Broadcast to all connected WebSocket clients
+    broadcast(event);
+
+    return NextResponse.json({
+      success: true,
+      type: event.type,
+      clientsNotified: true,
+    });
+  } catch (error) {
+    console.error('[Events] Error processing webhook:', error);
+    return NextResponse.json(
+      { error: 'Failed to process event' },
+      { status: 500 }
+    );
+  }
+}

package/src/app/api/page.tsx

@@ -0,0 +1,290 @@
+import Link from 'next/link';
+import { redirect } from 'next/navigation';
+import { headers } from 'next/headers';
+import DocsSearchBar from '@/components/docs/DocsSearchBar';
+import PersistentDocGroup from '@/components/docs/PersistentDocGroup';
+import DocsThemeToggle from '@/components/docs/DocsThemeToggle';
+import ShareUrlButton from '@/components/docs/ShareUrlButton';
+import ClientSideMarkdown from '@/components/docs/ClientSideMarkdown';
+import SidebarScrollMemory from '@/components/docs/SidebarScrollMemory';
+
+import {
+  API_ENTRY_DOC,
+  getApiDocHref,
+  listApiDocFiles,
+  listApiDocGroups,
+  normalizeApiDocFilename,
+  readApiDocFile,
+} from '@/lib/api-docs';
+import { renderMarkdown } from '@/lib/docs';
+
+interface ApiReferencePageProps {
+  searchParams?: Promise<{
+    doc?: string | string[];
+    query?: string | string[];
+    q?: string | string[];
+  }>;
+}
+
+const resolveParam = (value?: string | string[]) => {
+  if (!value) return '';
+  return Array.isArray(value) ? value[0] : value;
+};
+
+const resolveSearchQuery = (value?: string | string[]) => {
+  const resolved = resolveParam(value);
+  return resolved ? resolved.trim() : '';
+};
+
+const docMatchesSearch = (
+  doc: { filename: string; title: string; summary: string },
+  normalizedQuery: string,
+) => {
+  if (!normalizedQuery) return true;
+  const haystack = `${doc.filename} ${doc.title} ${doc.summary}`.toLowerCase();
+  return haystack.includes(normalizedQuery);
+};
+
+const getApiHref = (filename: string, searchQuery: string) => {
+  const base = getApiDocHref(filename);
+  const normalizedQuery = searchQuery.trim();
+  if (!normalizedQuery) return base;
+  const params = new URLSearchParams({ query: normalizedQuery });
+  return `${base}?${params.toString()}`;
+};
+
+const getDocNavLabel = (filename: string, title: string) => {
+  if (filename === API_ENTRY_DOC) return title;
+  const base = filename.split('/').pop() ?? filename;
+  if (base.toLowerCase() === 'readme.md') {
+    const parent = filename.split('/').slice(-2, -1)[0];
+    return parent ? `${parent}` : 'README';
+  }
+  return base.replace(/\.md$/i, '');
+};
+
+const getGroupStorageKey = (label: string) =>
+  `api:sidebar:${label.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`;
+
+const shouldHideHomeLink = async () => {
+  const requestHeaders = await headers();
+  const host = requestHeaders.get('x-forwarded-host') ?? requestHeaders.get('host') ?? '';
+  const firstHost = host.split(',')[0]?.trim() ?? '';
+  const hostname = firstHost.split(':')[0].toLowerCase();
+  return hostname === 'auramaxx.sh';
+};
+
+export async function ApiReferencePageContent({ selectedFilename, searchQuery = '' }: { selectedFilename?: string | null; searchQuery?: string }) {
+  const hideHomeLink = await shouldHideHomeLink();
+  const selectedRequested = normalizeApiDocFilename(selectedFilename);
+
+  const allDocs = await listApiDocFiles();
+  const groups = await listApiDocGroups();
+  const selectedDoc = allDocs.find((doc) => doc.filename === selectedRequested)
+    ?? allDocs.find((doc) => doc.filename === API_ENTRY_DOC)
+    ?? allDocs[0];
+
+  const normalizedSearch = searchQuery.trim().toLowerCase();
+  const filteredGroups = normalizedSearch
+    ? groups
+      .map((group) => ({
+        ...group,
+        docs: group.docs.filter((doc) => docMatchesSearch(doc, normalizedSearch)),
+      }))
+      .filter((group) => group.docs.length > 0)
+    : groups;
+
+  const visibleDocCount = filteredGroups.reduce((count, group) => count + group.docs.length, 0);
+  const autoOpenSections = normalizedSearch.length > 0;
+  const shareUrl = `https://auramaxx.sh${getApiHref(selectedDoc?.filename ?? API_ENTRY_DOC, searchQuery)}`;
+  const rawContent = selectedDoc ? await readApiDocFile(selectedDoc.filename) : '# No API docs found';
+  const html = renderMarkdown(rawContent);
+
+  return (
+    <div className="min-h-screen bg-[var(--color-background,#f4f4f5)] relative p-4 py-8">
+      {/* Background matching Sterile Field */}
+      <div className="fixed inset-0 pointer-events-none z-0 overflow-hidden">
+        {/* Sterile Grid */}
+        <div className="absolute inset-0 bg-grid-adaptive bg-[size:4rem_4rem] opacity-30" />
+
+        {/* Tyvek Texture Overlay */}
+        <div className="absolute inset-0 tyvek-texture opacity-40 mix-blend-multiply" />
+
+        {/* Giant Background Typography */}
+        <div className="absolute top-[5%] left-[5%] opacity-5 select-none">
+          <h1 className="text-[15vw] font-bold leading-none text-[var(--color-text,#0a0a0a)] font-mono tracking-tighter">
+            AURA
+          </h1>
+        </div>
+        <div className="absolute bottom-[5%] right-[5%] opacity-5 select-none">
+          <h1 className="text-[15vw] font-bold leading-none text-[var(--color-text,#0a0a0a)] font-mono tracking-tighter text-right">
+            MAXXING
+          </h1>
+        </div>
+
+        {/* Lab Markings - Corner Finder Patterns */}
+        <div className="absolute top-10 left-10 w-32 h-32 border-l-4 border-t-4 border-[var(--color-text,#0a0a0a)] opacity-10">
+          <div className="absolute top-2 left-2 w-4 h-4 bg-[var(--color-text,#0a0a0a)]" />
+        </div>
+        <div className="absolute bottom-10 right-10 w-32 h-32 border-r-4 border-b-4 border-[var(--color-text,#0a0a0a)] opacity-10 flex items-end justify-end">
+          <div className="absolute bottom-2 right-2 w-4 h-4 bg-[var(--color-text,#0a0a0a)]" />
+        </div>
+      </div>
+
+      {/* Logo header */}
+      <Link
+        href="/"
+        className="fixed top-4 left-4 sm:top-6 sm:left-6 z-30 flex items-center gap-2 sm:gap-3 hover:opacity-80 transition-opacity"
+      >
+        <div className="w-8 h-8 sm:w-10 sm:h-10">
+          <img src="/logo.webp" alt="AuraMaxx" className="w-full h-full object-contain" />
+        </div>
+        <div className="hidden sm:block font-black text-xl tracking-tighter text-[var(--color-text,#0a0a0a)]">AURAMAXX</div>
+      </Link>
+
+      {/* Nav */}
+      <div className="fixed top-5 right-4 sm:top-7 sm:right-6 z-30 flex items-center gap-2 sm:gap-3 font-mono text-[9px] sm:text-[10px] tracking-widest">
+        <Link href="/docs" className="text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors">DOCS</Link>
+        {!hideHomeLink && (
+          <Link href="/" className="text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors">HOME</Link>
+        )}
+        <a href="https://github.com/Aura-Industry/auramaxx" target="_blank" rel="noopener noreferrer" className="text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors">GITHUB</a>
+        <a href="https://x.com/npxauramaxx" target="_blank" rel="noopener noreferrer" className="text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors">X</a>
+        <a href="https://x.com/hi_im_nico" target="_blank" rel="noopener noreferrer" className="text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors">HELP</a>
+        <DocsThemeToggle />
+      </div>
+
+      <div className="relative z-[5] max-w-[1400px] mx-auto pt-16">
+        <div className="grid gap-4 md:grid-cols-[240px_minmax(0,1fr)]">
+          {/* Sidebar (sticky) */}
+          <aside className="font-mono">
+            <div id="api-sidebar-scroll-container" className="md:sticky md:top-20 md:max-h-[calc(100vh-6rem)] md:overflow-y-auto">
+              <SidebarScrollMemory containerId="api-sidebar-scroll-container" storageKey="api:sidebar:scroll" />
+              <details open className="group sidebar-always-open bg-[var(--color-surface,#f4f4f2)] border border-[var(--color-border,#d4d4d8)] shadow-lg overflow-hidden font-mono">
+                <summary className="px-4 py-3 border-b border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface-alt,#fafafa)] flex items-center justify-between cursor-pointer md:cursor-default list-none [&::-webkit-details-marker]:hidden">
+                  <Link href="/api" className="font-sans font-bold text-sm text-[var(--color-text,#0a0a0a)] uppercase tracking-tight hover:opacity-70 transition-opacity">API Index</Link>
+                  <span className="flex items-center gap-2">
+                    <span className="text-[9px] text-[var(--color-text-faint,#9ca3af)] font-bold">QTY: {visibleDocCount.toString().padStart(3, '0')}</span>
+                    <svg className="w-3 h-3 text-[var(--color-text-muted,#6b7280)] transition-transform group-open:rotate-180 md:hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 9l6 6 6-6" /></svg>
+                  </span>
+                </summary>
+                <div className="p-3 space-y-4">
+                  {filteredGroups.map((group) => (
+                    group.collapsible ? (
+                      <PersistentDocGroup
+                        key={group.label}
+                        storageKey={getGroupStorageKey(group.label)}
+                        label={group.label}
+                        forceOpen={autoOpenSections}
+                      >
+                        {group.docs.map((doc) => {
+                          const isActive = selectedDoc?.filename === doc.filename;
+                          return (
+                            <Link
+                              key={doc.filename}
+                              href={getApiHref(doc.filename, searchQuery)}
+                              className={`block px-3 py-1.5 text-[11px] uppercase transition-colors border ${
+                                isActive
+                                  ? 'border-[var(--color-border,#d4d4d8)] bg-[var(--color-text,#0a0a0a)] text-[var(--color-surface,#ffffff)]'
+                                  : 'border-transparent hover:border-[var(--color-border-muted,#e5e5e5)] hover:bg-[var(--color-surface-alt,#fafafa)] text-[var(--color-text-muted,#6b7280)]'
+                              }`}
+                            >
+                              {getDocNavLabel(doc.filename, doc.title)}
+                            </Link>
+                          );
+                        })}
+                      </PersistentDocGroup>
+                    ) : (
+                      <div key={group.label}>
+                        <div className="text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-widest mb-1 px-1 uppercase">{group.label}</div>
+                        <div className="space-y-0.5">
+                          {group.docs.map((doc) => {
+                            const isActive = selectedDoc?.filename === doc.filename;
+                            return (
+                              <Link
+                                key={doc.filename}
+                                href={getApiHref(doc.filename, searchQuery)}
+                                className={`block px-3 py-1.5 text-[11px] uppercase transition-colors border ${
+                                  isActive
+                                    ? 'border-[var(--color-border,#d4d4d8)] bg-[var(--color-text,#0a0a0a)] text-[var(--color-surface,#ffffff)]'
+                                    : 'border-transparent hover:border-[var(--color-border-muted,#e5e5e5)] hover:bg-[var(--color-surface-alt,#fafafa)] text-[var(--color-text-muted,#6b7280)]'
+                                }`}
+                              >
+                                {getDocNavLabel(doc.filename, doc.title)}
+                              </Link>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    )
+                  ))}
+
+                  {filteredGroups.length === 0 && (
+                    <div className="px-1 py-2 text-[9px] text-[var(--color-text-muted,#6b7280)]">
+                      No API docs found for "{searchQuery}".
+                    </div>
+                  )}
+                </div>
+
+                {/* Barcode + Stripe */}
+                <div className="flex items-center gap-3 px-4 py-2 border-t border-[var(--color-border,#d4d4d8)]">
+                  <div className="h-4 flex-1 bg-[repeating-linear-gradient(90deg,var(--color-text,#000),var(--color-text,#000)_1px,transparent_1px,transparent_3px)] opacity-30" />
+                </div>
+                <div className="h-2 w-full" style={{
+                  backgroundImage: 'repeating-linear-gradient(45deg, var(--color-text, #000), var(--color-text, #000) 5px, transparent 5px, transparent 10px)',
+                  opacity: 0.1,
+                }} />
+              </details>
+            </div>
+          </aside>
+
+          {/* Content */}
+          <div className="bg-[var(--color-surface,#f4f4f2)] border border-[var(--color-border,#d4d4d8)] shadow-lg overflow-hidden font-mono">
+            <div className="px-4 py-3 border-b border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface-alt,#fafafa)] flex items-center justify-between">
+              <span className="font-sans font-bold text-sm text-[var(--color-text,#0a0a0a)] uppercase tracking-tight">
+                {selectedDoc?.title ?? 'API Reference'}
+              </span>
+              <div className="flex items-center gap-2">
+                <span className="text-[9px] text-[var(--color-text-muted,#6b7280)]">{selectedDoc?.filename ?? API_ENTRY_DOC}</span>
+                <ShareUrlButton url={shareUrl} />
+              </div>
+            </div>
+
+            <ClientSideMarkdown className="p-5 prose-mono" html={html} />
+
+            {/* Footer */}
+            <div className="px-4 py-2 border-t border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface-alt,#fafafa)]">
+              <div className="text-[8px] text-[var(--color-text-faint,#9ca3af)] uppercase tracking-wider mb-1">DOCUMENT REFERENCE</div>
+              <div className="text-[9px] text-[var(--color-text,#0a0a0a)] font-bold">{selectedDoc?.filename ?? API_ENTRY_DOC}</div>
+            </div>
+
+            {/* Barcode + Stripe */}
+            <div className="flex items-center gap-3 px-4 py-2 border-t border-[var(--color-border,#d4d4d8)]">
+              <div className="h-4 flex-1 bg-[repeating-linear-gradient(90deg,var(--color-text,#000),var(--color-text,#000)_1px,transparent_1px,transparent_3px)] opacity-30" />
+              <span className="text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-wider">AURAMAXX</span>
+            </div>
+            <div className="h-2 w-full" style={{
+              backgroundImage: 'repeating-linear-gradient(45deg, var(--color-text, #000), var(--color-text, #000) 5px, transparent 5px, transparent 10px)',
+              opacity: 0.1,
+            }} />
+          </div>
+        </div>
+      </div>
+
+      <DocsSearchBar initialQuery={searchQuery} />
+    </div>
+  );
+}
+
+export default async function ApiReferencePage({ searchParams }: ApiReferencePageProps) {
+  const resolvedSearchParams = searchParams ? await searchParams : undefined;
+  const queryDocParam = resolveParam(resolvedSearchParams?.doc);
+  const selectedRequested = normalizeApiDocFilename(queryDocParam);
+  const searchQuery = resolveSearchQuery(resolvedSearchParams?.query) || resolveSearchQuery(resolvedSearchParams?.q);
+
+  if (queryDocParam) {
+    redirect(getApiHref(selectedRequested, searchQuery));
+  }
+
+  return <ApiReferencePageContent selectedFilename={selectedRequested} searchQuery={searchQuery} />;
+}