@retrivora-ai/rag-engine 1.9.8 → 2.0.0

package/src/handlers/index.ts

@@ -145,6 +145,62 @@ function getOrCreatePlugin(configOrPlugin: Partial<RagConfig> | VectorPlugin | u
   return _g[cacheKey];
 }
 
+// ─── Telemetry Reporter Helper ───────────────────────────────────────────────
+
+/**
+ * Asynchronously sends telemetry payload to telemetryUrl when telemetry is enabled
+ * or when a licenseKey is set. Non-blocking.
+ */
+function reportTelemetry(
+  req: NextRequest,
+  plugin: VectorPlugin,
+  action: string,
+  status: 'success' | 'error',
+  details: string,
+  trace?: unknown
+) {
+  try {
+    const config = plugin.getConfig();
+    const licenseKey = config.licenseKey || process.env.RAG_LICENSE_KEY || process.env.RETRIVORA_LICENSE_KEY || process.env.NEXT_PUBLIC_RETRIVORA_LICENSE_KEY;
+    const telemetryConfig = config.telemetry;
+
+    const enabled = telemetryConfig?.enabled ?? Boolean(licenseKey);
+    if (!enabled) return;
+
+    const telemetryUrl = telemetryConfig?.url || process.env.TELEMETRY_URL || process.env.NEXT_PUBLIC_TELEMETRY_URL || '/api/telemetry';
+    const host = req.headers.get('host') || 'localhost';
+
+    let absoluteUrl = telemetryUrl;
+    if (!telemetryUrl.startsWith('http')) {
+      const proto = req.headers.get('x-forwarded-proto') || 'http';
+      absoluteUrl = `${proto}://${host}${telemetryUrl}`;
+    }
+
+    const projectId = config.projectId || 'default';
+
+    fetch(absoluteUrl, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'x-forwarded-for': req.headers.get('x-forwarded-for') || '',
+        'x-real-ip': req.headers.get('x-real-ip') || '',
+      },
+      body: JSON.stringify({
+        trace,
+        licenseKey,
+        projectId,
+        action,
+        status,
+        details,
+      }),
+    }).catch(err => {
+      console.warn('[Retrivora Telemetry] Async report warning:', err.message);
+    });
+  } catch {
+    /* non-blocking */
+  }
+}
+
 // ─── SSE helpers ──────────────────────────────────────────────────────────────
 
 /**
@@ -194,17 +250,6 @@ const SSE_HEADERS: Record<string, string> = {
 
 /**
  * createChatHandler — factory that returns a Next.js App Router POST handler.
- *
- * Accepts either a full/partial `RagConfig` **or** a pre-built `VectorPlugin`
- * instance (preferred for singleton/multi-tenant setups).
- *
- * @example
- * // Option A — pass config (plugin created once at module load time)
- * export const POST = createChatHandler(getRagConfig());
- *
- * // Option B — pass a pre-built plugin (most flexible)
- * const plugin = new VectorPlugin(getRagConfig());
- * export const POST = createChatHandler(plugin);
  */
 export function createChatHandler(
   configOrPlugin?: Partial<RagConfig> | VectorPlugin,
@@ -261,6 +306,8 @@ export function createChatHandler(
         trace: result.trace,
       }).catch(err => console.warn('[createChatHandler] Failed to save assistant message:', err));
 
+      reportTelemetry(req, plugin, 'QUERY_GENERATION', 'success', `Tokens: ${result.trace?.tokens?.totalTokens || 0}, Latency: ${result.trace?.latency?.totalMs || 0}ms`, result.trace);
+
       return NextResponse.json({
         ...result,
         messageId: assistantMsgId,
@@ -268,6 +315,7 @@ export function createChatHandler(
       });
     } catch (err) {
       const message = err instanceof Error ? err.message : 'Internal server error';
+      reportTelemetry(req, plugin, 'QUERY_GENERATION', 'error', message);
       return NextResponse.json({ error: message }, { status: 500 });
     }
   };
@@ -275,25 +323,6 @@ export function createChatHandler(
 
 /**
  * createStreamHandler — factory for a streaming SSE Next.js App Router POST handler.
- *
- * Streams the assistant response as Server-Sent Events (SSE). Each frame is a
- * JSON object with a `type` discriminant:
- *   - `{ type: "text",     text: "..." }`       — incremental text chunk
- *   - `{ type: "metadata", sources: [...] }`    — retrieval metadata (last frame)
- *   - `{ type: "error",    error: "..." }`       — stream-level error
- *
- * @example
- * // src/app/api/chat/route.ts
- * export const POST = createStreamHandler(getRagConfig());
- *
- * // Client-side parsing in useRagChat.ts:
- * // const lines = chunk.split('\n');
- * // for (const line of lines) {
- * //   if (line.startsWith('data: ')) {
- * //     const frame = JSON.parse(line.slice(6));
- * //     if (frame.type === 'text') { ... }
- * //   }
- * // }
  */
 export function createStreamHandler(
   configOrPlugin?: Partial<RagConfig> | VectorPlugin,
@@ -311,7 +340,6 @@ export function createStreamHandler(
     const rateLimited = checkRateLimit(req);
     if (rateLimited) return rateLimited;
 
-    // Parse body first so we can return a normal JSON 400 before opening the stream
     let body: {
       message?: string;
       history?: ChatMessage[];
@@ -380,11 +408,9 @@ export function createStreamHandler(
               // Retrieval metadata object — always the final frame
               enqueue(sseMetaFrame(chunk));
 
-              // ── LLM-driven visualization decision ─────────────────────────
               const responseChunk = chunk as ChatResponse;
               const sources = responseChunk?.sources || [];
 
-              // Emit observability trace if present
               if (responseChunk?.trace) {
                 enqueue(sseObservabilityFrame(responseChunk.trace));
               }
@@ -392,9 +418,6 @@ export function createStreamHandler(
               let uiTransformation = responseChunk?.ui_transformation;
               if (sources.length > 0) {
                 try {
-                  // The pipeline already computed ui_transformation inside askStream().
-                  // We ONLY fall back to the cheap heuristic transform (no LLM call) when
-                  // the pipeline didn't produce one — never call analyzeAndDecide() here.
                   uiTransformation =
                     responseChunk?.ui_transformation ??
                     UITransformer.transform(message, sources, plugin.getConfig());
@@ -423,14 +446,16 @@ export function createStreamHandler(
                 uiTransformation,
                 trace: responseChunk?.trace,
               }).catch(err => console.warn('[createStreamHandler] Failed to save assistant message:', err));
+
+              reportTelemetry(req, plugin, 'QUERY_GENERATION', 'success', `Tokens: ${responseChunk?.trace?.tokens?.totalTokens || 0}, Latency: ${responseChunk?.trace?.latency?.totalMs || 0}ms`, responseChunk?.trace);
             }
           }
         } catch (streamError) {
-          // Do not log or enqueue errors if the client intentionally cancelled/aborted
           if (isActive) {
             const errorMessage =
               streamError instanceof Error ? streamError.message : String(streamError);
             console.error('[createStreamHandler] Stream error:', streamError);
+            reportTelemetry(req, plugin, 'QUERY_GENERATION', 'error', errorMessage);
             try {
               enqueue(sseErrorFrame(errorMessage));
             } catch { /* silent */ }
@@ -480,9 +505,11 @@ export function createIngestHandler(
       }
 
       const results = await plugin.ingest(documents, namespace);
+      reportTelemetry(req, plugin, 'DOCUMENT_INGESTION', 'success', `Ingested ${documents.length} document(s)`);
       return NextResponse.json({ results });
     } catch (err) {
       const message = err instanceof Error ? err.message : 'Internal server error';
+      reportTelemetry(req, plugin, 'DOCUMENT_INGESTION', 'error', message);
       return NextResponse.json({ error: message }, { status: 500 });
     }
   };
@@ -560,20 +587,15 @@ export function createUploadHandler(
             for (const row of parsed.data) {
               i++;
               const rowData = row as Record<string, string>;
-              
-              // Dynamically determine the grouping key (typically the first column like ID or Handle)
               const groupingKey = Object.keys(rowData)[0];
               
-              // Forward-fill ALL empty columns for variants belonging to the same group
               if (lastRowData && groupingKey && rowData[groupingKey] && rowData[groupingKey] === lastRowData[groupingKey]) {
                 for (const key of Object.keys(rowData)) {
-                  // Forward-fill if the current row lacks the field but the previous row has it
                   if (!rowData[key] && lastRowData[key]) {
                     rowData[key] = lastRowData[key];
                   }
                 }
               }
-              // Save a copy of the filled rowData for the next iteration
               lastRowData = { ...rowData };
               
               const contentParts: string[] = [];
@@ -615,9 +637,11 @@ export function createUploadHandler(
       }
 
       const results = await plugin.ingest(documents, namespace);
+      reportTelemetry(req, plugin, 'DOCUMENT_INGESTION', 'success', `Uploaded & ingested ${files.length} file(s)`);
       return NextResponse.json({ message: 'Upload successful', results });
     } catch (err) {
       const message = err instanceof Error ? err.message : 'Upload failed';
+      reportTelemetry(req, plugin, 'DOCUMENT_INGESTION', 'error', message);
       return NextResponse.json({ error: message }, { status: 500 });
     }
   };
@@ -625,6 +649,7 @@ export function createUploadHandler(
 
 /**
  * createSuggestionsHandler — factory for the auto-suggestions endpoint.
+ * Supports both POST (JSON body) and GET (URL search parameters).
  */
 export function createSuggestionsHandler(
   configOrPlugin?: Partial<RagConfig> | VectorPlugin,
@@ -633,25 +658,34 @@ export function createSuggestionsHandler(
   const plugin = getOrCreatePlugin(configOrPlugin);
   const onAuthorize = options?.onAuthorize;
 
-  return async function POST(req: NextRequest) {
+  return async function handler(req: NextRequest) {
     const authResult = await checkAuth(req, onAuthorize);
     if (authResult) return authResult as any;
 
     try {
-      const body = await req.json();
-      const { query, namespace } = body as {
-        query: string;
-        namespace?: string;
-      };
+      let query = '';
+      let namespace: string | undefined = undefined;
+
+      if (req.method === 'POST') {
+        const body = await req.json().catch(() => ({}));
+        query = body.query || '';
+        namespace = body.namespace;
+      } else {
+        const url = new URL(req.url);
+        query = url.searchParams.get('query') || '';
+        namespace = url.searchParams.get('namespace') || undefined;
+      }
 
       if (typeof query !== 'string') {
         return NextResponse.json({ error: 'query is required' }, { status: 400 });
       }
 
       const suggestions = await plugin.getSuggestions(query, namespace);
+      reportTelemetry(req, plugin, 'AUTO_SUGGESTIONS', 'success', `Fetched ${suggestions.length} suggestions for: ${query.slice(0, 30)}`);
       return NextResponse.json({ suggestions });
     } catch (err) {
       const message = err instanceof Error ? err.message : 'Internal server error';
+      reportTelemetry(req, plugin, 'AUTO_SUGGESTIONS', 'error', message);
       return NextResponse.json({ error: message }, { status: 500 });
     }
   };
@@ -828,6 +862,8 @@ export function createRagHandler(
     switch (segment) {
       case 'health':
         return healthHandler(req);
+      case 'suggestions':
+        return suggestionsHandler(req);
       case 'history':
         return historyHandler(req);
       case 'feedback':

package/src/index.ts

@@ -15,11 +15,9 @@ export { MessageBubble } from './components/MessageBubble';
 export { SourceCard } from './components/SourceCard';
 export { ObservabilityPanel } from './components/ObservabilityPanel';
 export { ConfigProvider, useConfig } from './components/ConfigProvider';
-export { Hero } from './components/Hero';
-export { Lifecycle } from './components/Lifecycle';
-export { ArchitectureCardsSection } from './components/ArchitectureCardsSection';
-export { Documentation } from './components/Documentation';
-export { AmbientBackground } from './components/AmbientBackground';
+export { CodeViewer } from './components/CodeViewer';
+export { ProductCard } from './components/ProductCard';
+export { ProductCarousel } from './components/ProductCarousel';
 
 // ── Headless Hooks ────────────────────────────────────────────
 export { useRagChat } from './hooks/useRagChat';

package/src/components/AmbientBackground.tsx

@@ -1,29 +0,0 @@
-'use client';
-
-import React from 'react';
-
-export function AmbientBackground() {
-  return (
-    <div className="absolute inset-0 overflow-hidden pointer-events-none">
-      {/* Soft indigo orb — top left */}
-      <div
-        className="absolute -top-24 -left-24 w-[600px] h-[600px] rounded-full opacity-25 blur-3xl"
-        style={{ background: 'radial-gradient(circle, #c7d2fe 0%, #a5b4fc 40%, transparent 70%)' }}
-      />
-      {/* Soft violet orb — top right */}
-      <div
-        className="absolute -top-20 right-0 w-[500px] h-[500px] rounded-full opacity-20 blur-3xl"
-        style={{ background: 'radial-gradient(circle, #ddd6fe 0%, #c4b5fd 50%, transparent 70%)' }}
-      />
-      {/* Subtle grid */}
-      <div
-        className="absolute inset-0 opacity-[0.025]"
-        style={{
-          backgroundImage:
-            'linear-gradient(#6366f1 1px, transparent 1px), linear-gradient(90deg, #6366f1 1px, transparent 1px)',
-          backgroundSize: '56px 56px',
-        }}
-      />
-    </div>
-  );
-}

package/src/components/ArchitectureCard.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import { ArchitectureCardProps } from '@/app/types';
-import { ArrowRight } from 'lucide-react';
-
-interface ExtendedArchitectureCardProps extends ArchitectureCardProps {
-  gradientFrom?: string;
-  gradientTo?: string;
-}
-
-export function ArchitectureCard({ icon, title, description, badge, badgeColor, gradientFrom = '#6366f1', gradientTo = '#8b5cf6' }: ExtendedArchitectureCardProps) {
-  return (
-    <div className="group relative bg-white rounded-2xl border border-slate-200 p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-slate-200/80 overflow-hidden cursor-default">
-      {/* Gradient top accent */}
-      <div
-        className="absolute top-0 left-0 right-0 h-0.5 rounded-t-2xl opacity-80 group-hover:opacity-100 transition-opacity"
-        style={{ background: `linear-gradient(90deg, ${gradientFrom}, ${gradientTo})` }}
-      />
-
-      {/* Card top row */}
-      <div className="mb-5 flex items-center justify-between">
-        <div
-          className="w-12 h-12 rounded-xl flex items-center justify-center text-2xl transition-transform duration-300 group-hover:scale-110"
-          style={{
-            background: `linear-gradient(135deg, ${gradientFrom}18, ${gradientTo}10)`,
-            border: `1px solid ${gradientFrom}20`,
-          }}
-        >
-          {icon}
-        </div>
-        <span className={`rounded-full border px-3 py-1 text-[10px] font-bold uppercase tracking-wider ${badgeColor}`}>
-          {badge}
-        </span>
-      </div>
-
-      <h3 className="mb-2 font-bold text-slate-900 text-base">{title}</h3>
-      <p className="text-sm text-slate-500 leading-relaxed">{description}</p>
-
-      {/* "Learn more" on hover */}
-      <div
-        className="mt-5 flex items-center gap-1 text-[11px] font-semibold opacity-0 group-hover:opacity-100 transition-all duration-300 -translate-y-1 group-hover:translate-y-0"
-        style={{ color: gradientFrom }}
-      >
-        Learn more <ArrowRight className="h-3 w-3" />
-      </div>
-
-      {/* Subtle hover bg tint */}
-      <div
-        className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"
-        style={{ background: `radial-gradient(ellipse at 50% 0%, ${gradientFrom}05 0%, transparent 70%)` }}
-      />
-    </div>
-  );
-}

package/src/components/ArchitectureCardsSection.tsx

@@ -1,48 +0,0 @@
-'use client';
-
-import React from 'react';
-import Link from 'next/link';
-import { ArchitectureCard } from '@/components/ArchitectureCard';
-import { ARCHITECTURE_CARDS } from '@/app/constants';
-import { ArrowRight } from 'lucide-react';
-
-const CARD_GRADIENTS = [
-  { from: '#6366f1', to: '#8b5cf6' },
-  { from: '#f59e0b', to: '#f97316' },
-  { from: '#10b981', to: '#06b6d4' },
-];
-
-export function ArchitectureCardsSection() {
-  return (
-    <div className="relative">
-      <div className="text-center mb-12">
-        <h2 className="text-3xl md:text-4xl font-black text-slate-900 mb-4">
-          Built for every layer of the stack
-        </h2>
-        <p className="text-slate-500 max-w-xl mx-auto text-base leading-relaxed">
-          Swap providers without rewriting a single line of business logic.
-        </p>
-      </div>
-
-      <div className="grid gap-5 sm:grid-cols-3 max-w-5xl mx-auto">
-        {ARCHITECTURE_CARDS.map((card, i) => (
-          <ArchitectureCard
-            key={i}
-            {...card}
-            gradientFrom={CARD_GRADIENTS[i]?.from}
-            gradientTo={CARD_GRADIENTS[i]?.to}
-          />
-        ))}
-      </div>
-
-      <div className="mt-10 text-center">
-        <Link
-          href="/features"
-          className="inline-flex items-center gap-2 px-6 py-3 rounded-xl text-sm font-semibold text-slate-600 hover:text-indigo-600 border border-slate-200 hover:border-indigo-200 bg-white hover:bg-indigo-50 transition-all shadow-sm"
-        >
-          Explore all features <ArrowRight className="h-4 w-4" />
-        </Link>
-      </div>
-    </div>
-  );
-}

package/src/components/DocViewer.tsx

@@ -1,97 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Snippet } from '@/app/types';
-import { SNIPPETS } from '@/app/constants';
-import { CodeViewer } from './CodeViewer';
-import { ArrowLeft, ArrowRight } from 'lucide-react';
-
-export function DocViewer({ activeSnippet, setActiveSnippet }: { activeSnippet: Snippet; setActiveSnippet: (s: Snippet) => void }) {
-  const currentIndex = SNIPPETS.findIndex(s => s.id === activeSnippet.id);
-  const totalSteps   = SNIPPETS.length;
-  const isFirst      = currentIndex === 0;
-  const isLast       = currentIndex === totalSteps - 1;
-
-  const handlePrev = () => { if (!isFirst) setActiveSnippet(SNIPPETS[currentIndex - 1]); };
-  const handleNext = () => { if (!isLast)  setActiveSnippet(SNIPPETS[currentIndex + 1]); };
-
-  const progressPercent = Math.round(((currentIndex + 1) / totalSteps) * 100);
-
-  return (
-    <div className="flex flex-col h-full p-6 gap-5">
-      {/* Tab selector */}
-      <div className="flex flex-wrap gap-1.5 border-b border-slate-100 pb-5">
-        {SNIPPETS.map(snippet => (
-          <button
-            key={snippet.id}
-            onClick={() => setActiveSnippet(snippet)}
-            className={`px-4 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-wider transition-all border ${
-              activeSnippet.id === snippet.id
-                ? 'bg-indigo-600 text-white border-indigo-600 shadow-sm scale-[1.03]'
-                : 'bg-slate-50 border-slate-200 text-slate-500 hover:text-indigo-600 hover:border-indigo-200 hover:bg-indigo-50'
-            }`}
-          >
-            {snippet.title}
-          </button>
-        ))}
-      </div>
-
-      {/* Progress bar */}
-      <div className="bg-slate-100 rounded-full h-1.5 overflow-hidden">
-        <div
-          className="h-full rounded-full transition-all duration-500"
-          style={{
-            width: `${progressPercent}%`,
-            background: 'linear-gradient(90deg, #4f46e5, #7c3aed)',
-            boxShadow: '0 0 6px rgba(79, 102, 241, 0.4)',
-          }}
-        />
-      </div>
-
-      {/* Content */}
-      <div className="flex-grow flex flex-col gap-5">
-        <div className="flex items-start justify-between gap-4 flex-wrap sm:flex-nowrap">
-          <div>
-            <h3 className="text-lg font-bold text-slate-900 mb-1.5 flex items-center gap-3">
-              {activeSnippet.title}
-              <span className="text-[9px] font-extrabold uppercase px-2 py-0.5 rounded bg-indigo-50 border border-indigo-100 text-indigo-600">
-                Step {currentIndex + 1} of {totalSteps}
-              </span>
-            </h3>
-            <p className="text-xs text-slate-500 leading-relaxed italic">{activeSnippet.description}</p>
-          </div>
-          <span className="text-xs font-mono font-bold text-indigo-600 self-center shrink-0">{progressPercent}% Complete</span>
-        </div>
-
-        <CodeViewer snippet={activeSnippet} />
-
-        {/* Navigation */}
-        <div className="flex items-center justify-between border-t border-slate-100 pt-5 mt-auto">
-          <button
-            onClick={handlePrev}
-            disabled={isFirst}
-            className={`flex items-center gap-2 px-5 py-2.5 rounded-xl text-xs font-bold transition-all border ${
-              isFirst
-                ? 'opacity-35 cursor-not-allowed border-slate-100 text-slate-300 bg-slate-50'
-                : 'bg-white border-slate-200 text-slate-600 hover:border-slate-300 hover:bg-slate-50 active:scale-95'
-            }`}
-          >
-            <ArrowLeft size={13} /> Previous Step
-          </button>
-          <button
-            onClick={handleNext}
-            disabled={isLast}
-            className={`flex items-center gap-2 px-6 py-2.5 rounded-xl text-xs font-bold transition-all border ${
-              isLast
-                ? 'opacity-35 cursor-not-allowed border-slate-100 text-slate-300 bg-slate-50'
-                : 'text-white border-transparent shadow-md active:scale-95 hover:-translate-y-0.5'
-            }`}
-            style={!isLast ? { background: 'linear-gradient(135deg, #4f46e5, #7c3aed)', boxShadow: '0 4px 14px -4px rgba(79,70,229,0.35)' } : {}}
-          >
-            {isLast ? 'Complete!' : 'Next Step'} <ArrowRight size={13} />
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/Documentation.tsx

@@ -1,141 +0,0 @@
-'use client';
-
-import React from 'react';
-import { FileText, Zap, Package, ExternalLink, Code } from 'lucide-react';
-import { DocViewer } from '@/components/DocViewer';
-import { LANDING_PAGE_CONTENT, QUICK_START_STEPS, ADVANCED_STEPS, API_ENDPOINTS, SNIPPETS } from '@/app/constants';
-import { Snippet } from '@/app/types';
-
-export function Documentation() {
-  const [activeSnippet, setActiveSnippet] = React.useState<Snippet>(SNIPPETS[0]);
-
-  return (
-    <div className="max-w-6xl mx-auto">
-      {/* Header */}
-      <div className="text-center mb-14">
-        <span className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-indigo-50 border border-indigo-100 text-[10px] font-bold uppercase tracking-widest text-indigo-600 mb-5">
-          <span className="w-1.5 h-1.5 rounded-full bg-indigo-500 animate-pulse" />
-          Developer Guide
-        </span>
-        <h2 className="text-3xl md:text-4xl font-black text-slate-900 mb-4">
-          {LANDING_PAGE_CONTENT.guide.title}
-        </h2>
-        <p className="text-slate-500 max-w-xl mx-auto text-base leading-relaxed">
-          {LANDING_PAGE_CONTENT.guide.subtitle}
-        </p>
-      </div>
-
-      {/* Grid */}
-      <div className="w-full grid gap-8 lg:grid-cols-[270px_1fr] items-start">
-        {/* Sidebar */}
-        <aside className="flex flex-col gap-5">
-          {/* Quick Start */}
-          <section>
-            <h2 className="mb-3 text-[10px] font-black text-slate-400 uppercase tracking-[0.3em] flex items-center gap-2">
-              <FileText size={12} className="text-indigo-500" /> Quick Start
-            </h2>
-            <ol className="space-y-1">
-              {QUICK_START_STEPS.map((step, i) => {
-                const isActive = activeSnippet.id === step.id;
-                return (
-                  <li key={step.id}>
-                    <button
-                      onClick={() => { const s = SNIPPETS.find(s => s.id === step.id); if (s) setActiveSnippet(s); }}
-                      className={`w-full flex items-start gap-3 p-3 rounded-xl border text-left transition-all active:scale-[0.98] ${
-                        isActive
-                          ? 'bg-indigo-50 border-indigo-200 shadow-sm'
-                          : 'bg-white border-slate-200 hover:border-slate-300 hover:bg-slate-50'
-                      }`}
-                    >
-                      <span className={`flex h-6 w-6 shrink-0 items-center justify-center rounded-lg font-mono text-[10px] font-bold border transition-all ${
-                        isActive ? 'bg-indigo-600 text-white border-indigo-600 shadow-sm' : 'bg-slate-100 text-slate-500 border-slate-200'
-                      }`}>{i + 1}</span>
-                      <div className="pt-0.5">
-                        <span className={`text-xs font-semibold block ${isActive ? 'text-indigo-700 font-bold' : 'text-slate-700'}`}>{step.text}</span>
-                        <span className="text-[9px] text-slate-400 block mt-0.5">Step {i + 1}</span>
-                      </div>
-                    </button>
-                  </li>
-                );
-              })}
-            </ol>
-          </section>
-
-          {/* Advanced */}
-          <section>
-            <h2 className="mb-3 text-[10px] font-black text-slate-400 uppercase tracking-[0.3em] flex items-center gap-2">
-              <Code size={12} className="text-violet-500" /> Advanced Options
-            </h2>
-            <ol className="space-y-1">
-              {ADVANCED_STEPS.map((step, i) => {
-                const isActive = activeSnippet.id === step.id;
-                return (
-                  <li key={step.id}>
-                    <button
-                      onClick={() => { const s = SNIPPETS.find(s => s.id === step.id); if (s) setActiveSnippet(s); }}
-                      className={`w-full flex items-start gap-3 p-3 rounded-xl border text-left transition-all active:scale-[0.98] ${
-                        isActive
-                          ? 'bg-violet-50 border-violet-200 shadow-sm'
-                          : 'bg-white border-slate-200 hover:border-slate-300 hover:bg-slate-50'
-                      }`}
-                    >
-                      <span className={`flex h-6 w-6 shrink-0 items-center justify-center rounded-lg font-mono text-[10px] font-bold border transition-all ${
-                        isActive ? 'bg-violet-600 text-white border-violet-600 shadow-sm' : 'bg-slate-100 text-slate-500 border-slate-200'
-                      }`}>{i + 5}</span>
-                      <div className="pt-0.5">
-                        <span className={`text-xs font-semibold block ${isActive ? 'text-violet-700 font-bold' : 'text-slate-700'}`}>{step.text}</span>
-                        <span className="text-[9px] text-slate-400 block mt-0.5">Extension</span>
-                      </div>
-                    </button>
-                  </li>
-                );
-              })}
-            </ol>
-          </section>
-
-          {/* API Endpoints */}
-          <section className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
-            <h2 className="mb-4 text-[10px] font-black text-slate-400 uppercase tracking-[0.3em] flex items-center gap-2">
-              <Zap size={12} className="text-indigo-500" /> API Endpoints
-            </h2>
-            <div className="grid gap-2">
-              {API_ENDPOINTS.map((slug) => (
-                <div
-                  key={slug}
-                  className="flex items-center justify-between p-2.5 rounded-lg bg-slate-50 border border-slate-100 hover:border-indigo-200 hover:bg-indigo-50 transition-all group"
-                >
-                  <span className="text-[10px] font-mono text-slate-500 group-hover:text-indigo-600 transition-colors">/api/{slug}</span>
-                  <span className="text-[8px] font-bold text-indigo-600 bg-indigo-50 px-1.5 py-0.5 rounded border border-indigo-100">POST</span>
-                </div>
-              ))}
-            </div>
-          </section>
-        </aside>
-
-        {/* Code Viewer */}
-        <section className="flex flex-col h-full min-h-[560px]">
-          <div className="rounded-2xl border border-slate-200 bg-white overflow-hidden h-full shadow-sm">
-            <DocViewer activeSnippet={activeSnippet} setActiveSnippet={setActiveSnippet} />
-          </div>
-        </section>
-      </div>
-
-      {/* CTA */}
-      <div className="mt-14 text-center">
-        <a
-          href="https://www.npmjs.com/package/@retrivora-ai/rag-engine"
-          target="_blank" rel="noreferrer"
-          className="inline-flex items-center gap-3 px-8 py-4 rounded-2xl text-white font-bold text-sm shadow-lg transition-all hover:-translate-y-0.5"
-          style={{
-            background: 'linear-gradient(135deg, #4f46e5, #7c3aed)',
-            boxShadow: '0 8px 24px -6px rgba(79, 70, 229, 0.35)',
-          }}
-        >
-          <Package className="w-5 h-5" />
-          Get Started on NPM
-          <ExternalLink className="w-4 h-4" />
-        </a>
-      </div>
-    </div>
-  );
-}