@retrivora-ai/rag-engine 1.9.8 → 1.9.9

package/src/core/ConfigResolver.ts

@@ -117,22 +117,48 @@ export class ConfigResolver {
       normalized.useReranking = retrieval.useReranking ?? normalized.useReranking;
 
       if (retrieval.strategy === 'hybrid') normalized.architecture = normalized.architecture ?? 'hybrid';
-      if (retrieval.strategy === 'agentic') normalized.architecture = 'agentic';
-      if (retrieval.strategy === 'contextual-compression') normalized.useReranking = true;
+      if (retrieval.strategy === 'agentic') normalized.architecture = 'multi-agent';
+      if (retrieval.strategy === 'contextual-compression') {
+        normalized.useReranking = true;
+        normalized.architecture = normalized.architecture ?? 'retrieve-and-rerank';
+      }
     }
 
     if (workflow?.type) {
       const type = workflow.type;
-      if (type === 'agentic' || type === 'agentic-rag') normalized.architecture = 'agentic';
-      else if (type === 'hybrid-rag') normalized.architecture = 'hybrid';
-      else if (type === 'graph-rag') {
+      if (type === 'naive-rag') {
+        normalized.architecture = 'naive';
+        normalized.useReranking = false;
+        normalized.useGraphRetrieval = false;
+      } else if (type === 'retrieve-and-rerank') {
+        normalized.architecture = 'retrieve-and-rerank';
+        normalized.useReranking = true;
+      } else if (type === 'multimodal-rag') {
+        normalized.architecture = 'multimodal';
+      } else if (type === 'graph-rag') {
         normalized.architecture = 'graph';
         normalized.useGraphRetrieval = true;
+      } else if (type === 'hybrid-rag') {
+        normalized.architecture = 'hybrid';
+      } else if (type === 'agentic-router') {
+        normalized.architecture = 'agentic-router';
+      } else if (type === 'multi-agent-rag' || type === 'multi-agent' || type === 'agentic' || type === 'agentic-rag') {
+        normalized.architecture = 'multi-agent';
       } else if (type === 'simple-rag' || type === 'rag') {
-        normalized.architecture = normalized.architecture ?? 'simple';
+        normalized.architecture = normalized.architecture ?? 'naive';
       }
     }
 
+    // Default fallbacks based on architecture configuration
+    if (normalized.architecture === 'retrieve-and-rerank') {
+      normalized.useReranking = true;
+    } else if (normalized.architecture === 'graph') {
+      normalized.useGraphRetrieval = true;
+    } else if (normalized.architecture === 'naive') {
+      normalized.useReranking = false;
+      normalized.useGraphRetrieval = false;
+    }
+
     return normalized;
   }
 }

package/src/core/LicenseVerifier.ts

@@ -12,6 +12,13 @@ export interface LicensePayload {
  * Enables zero-latency local license validation without external network calls.
  */
 export class LicenseVerifier {
+  // A simple in-memory cache to save CPU overhead of cryptographic signature checks.
+  private static readonly cache = new Map<
+    string,
+    { payload: LicensePayload; cachedAt: number }
+  >();
+  private static readonly CACHE_TTL_MS = 60 * 1000; // Cache verified license for 60 seconds
+
   // Retrivora's Public Key used to verify the license key signature.
   // In production, this matches the private key held by Retrivora SaaS.
   private static readonly PUBLIC_KEY = `-----BEGIN PUBLIC KEY-----
@@ -38,6 +45,22 @@ MwIDAQAB
     publicKeyOverride?: string
   ): LicensePayload {
     const isProduction = process.env.NODE_ENV === 'production';
+    const now = Date.now();
+
+    // Check verification cache to bypass crypto computations on hot paths
+    if (licenseKey) {
+      const cacheKey = `${licenseKey}:${currentProjectId}:${provider || ''}:${publicKeyOverride || ''}`;
+      const cached = this.cache.get(cacheKey);
+      if (cached && now - cached.cachedAt < this.CACHE_TTL_MS) {
+        // Enforce expiration check even for cached items
+        const currentTimestampSec = Math.floor(now / 1000);
+        if (cached.payload.expiresAt && currentTimestampSec > cached.payload.expiresAt) {
+          this.cache.delete(cacheKey);
+        } else {
+          return cached.payload;
+        }
+      }
+    }
 
     // 1. Development Fallback (Fail-open locally but log warning)
     if (!licenseKey) {
@@ -143,6 +166,11 @@ MwIDAQAB
         // Enterprise has access to all databases (including redis, weaviate, custom ones)
       }
 
+      if (licenseKey) {
+        const cacheKey = `${licenseKey}:${currentProjectId}:${provider || ''}:${publicKeyOverride || ''}`;
+        this.cache.set(cacheKey, { payload, cachedAt: now });
+      }
+
       return payload;
     } catch (err) {
       const message = err instanceof Error ? err.message : String(err);
@@ -151,4 +179,82 @@ MwIDAQAB
       );
     }
   }
+
+  static async verifyIP(licenseKey: string | undefined): Promise<void> {
+    if (!licenseKey) return;
+    try {
+      const parts = licenseKey.split('.');
+      if (parts.length !== 3) return;
+      const [, payloadB64] = parts;
+      const payload: LicensePayload & { ipv4?: string; ipv6?: string } = JSON.parse(
+        Buffer.from(payloadB64, 'base64url').toString('utf8')
+      );
+
+      const tier = (payload.tier || '').toLowerCase();
+      // Skip check if Enterprise or Custom
+      if (tier === 'enterprise' || tier === 'custom') {
+        return;
+      }
+
+      // If Hobby (free_trial) or Developer Pro, perform the check
+      if (payload.ipv4 || payload.ipv6) {
+        let currentIpv4 = '';
+        let currentIpv6 = '';
+        
+        try {
+          const res = await fetch('https://api4.ipify.org?format=json', { signal: AbortSignal.timeout(3000) });
+          const data = await res.json();
+          currentIpv4 = data.ip;
+        } catch (e) {}
+        
+        try {
+          const res = await fetch('https://api6.ipify.org?format=json', { signal: AbortSignal.timeout(3000) });
+          const data = await res.json();
+          currentIpv6 = data.ip;
+        } catch (e) {}
+
+        const localIps: string[] = [];
+        try {
+          const osModule = require('os');
+          const interfaces = osModule.networkInterfaces();
+          for (const name of Object.keys(interfaces)) {
+            for (const iface of interfaces[name] || []) {
+              if (!iface.internal) {
+                localIps.push(iface.address);
+              }
+            }
+          }
+        } catch (e) {}
+        
+        const isIpv4Match = payload.ipv4 && (
+          currentIpv4 === payload.ipv4 || 
+          localIps.includes(payload.ipv4)
+        );
+        const isIpv6Match = payload.ipv6 && (
+          currentIpv6 === payload.ipv6 || 
+          localIps.includes(payload.ipv6)
+        );
+
+        if (payload.ipv4 && payload.ipv6) {
+          if (!isIpv4Match && !isIpv6Match) {
+            throw new Error(
+              `License key access restricted. This license key was created for a different system (authorized IPv4: ${payload.ipv4}, IPv6: ${payload.ipv6}) and cannot be used on this machine.`
+            );
+          }
+        } else if (payload.ipv4 && !isIpv4Match) {
+          throw new Error(
+            `License key access restricted. This license key was created for a different system (authorized IPv4: ${payload.ipv4}) and cannot be used on this machine.`
+          );
+        } else if (payload.ipv6 && !isIpv6Match) {
+          throw new Error(
+            `License key access restricted. This license key was created for a different system (authorized IPv6: ${payload.ipv6}) and cannot be used on this machine.`
+          );
+        }
+      }
+    } catch (err: any) {
+      if (err.message.includes('License key access restricted')) {
+        throw new ConfigurationException(`[Retrivora SDK] ${err.message}`);
+      }
+    }
+  }
 }

package/src/core/Pipeline.ts

@@ -256,7 +256,7 @@ You are a helpful assistant. Use the provided context to answer questions accura
 
     await this.vectorDB.initialize();
 
-    if (this.config.rag?.architecture === 'agentic' || (this.config.mcpServers && this.config.mcpServers.length > 0)) {
+    if (this.config.rag?.architecture === 'agentic' || this.config.rag?.architecture === 'multi-agent' || (this.config.mcpServers && this.config.mcpServers.length > 0)) {
       this.mcpRegistry = new MCPRegistry(this.config.mcpServers || []);
       this.multiAgentCoordinator = new MultiAgentCoordinator({
         llmProvider: this.llmProvider,
@@ -448,7 +448,7 @@ You are a helpful assistant. Use the provided context to answer questions accura
   async ask(question: string, history: ChatMessage[] = [], namespace?: string): Promise<ChatResponse> {
     await this.initialize();
 
-    if ((this.config.rag?.architecture === 'agentic' || (this.config.mcpServers && this.config.mcpServers.length > 0)) && this.multiAgentCoordinator) {
+    if ((this.config.rag?.architecture === 'agentic' || this.config.rag?.architecture === 'multi-agent' || (this.config.mcpServers && this.config.mcpServers.length > 0)) && this.multiAgentCoordinator) {
       return await this.multiAgentCoordinator.run(question, history);
     }
 
@@ -475,7 +475,7 @@ You are a helpful assistant. Use the provided context to answer questions accura
 
   async *askStream(question: string, history: ChatMessage[] = [], namespace?: string): AsyncIterable<string | ChatResponse> {
     await this.initialize();
-    if ((this.config.rag?.architecture === 'agentic' || (this.config.mcpServers && this.config.mcpServers.length > 0)) && this.multiAgentCoordinator) {
+    if ((this.config.rag?.architecture === 'agentic' || this.config.rag?.architecture === 'multi-agent' || (this.config.mcpServers && this.config.mcpServers.length > 0)) && this.multiAgentCoordinator) {
       const stream = this.multiAgentCoordinator.runStream(question, history);
       for await (const chunk of stream) {
         yield chunk;
@@ -535,7 +535,8 @@ You are a helpful assistant. Use the provided context to answer questions accura
       const cacheKey = `${ns}::${searchQuery}`;
       const cachedVector = this.embeddingCache.get(cacheKey);
 
-      const useGraph = this.graphDB && this.config.rag?.useGraphRetrieval;
+      const arch = this.config.rag?.architecture;
+      const useGraph = arch !== 'naive' && arch !== 'retrieve-and-rerank' && this.graphDB && this.config.rag?.useGraphRetrieval;
       const [strategyResult, embeddedVector] = await Promise.all([
         QueryProcessor.determineRetrievalStrategy(
           searchQuery,
@@ -579,7 +580,8 @@ You are a helpful assistant. Use the provided context to answer questions accura
         ? structuredSources
         : structuredSources.filter((m) => m.score >= scoreThreshold);
       const rerankLimit = wantsExhaustiveList ? retrievalLimit : topK;
-      if (!hasNumericPredicates && this.config.rag?.useReranking) {
+      const useReranking = arch !== 'naive' && (arch === 'retrieve-and-rerank' || this.config.rag?.useReranking);
+      if (!hasNumericPredicates && useReranking) {
         fullSources = await this.reranker.rerank(fullSources, question, rerankLimit);
       } else if (!wantsExhaustiveList) {
         fullSources = fullSources.slice(0, topK);
@@ -830,7 +832,7 @@ You are a helpful assistant. Use the provided context to answer questions accura
       const latency: LatencyBreakdown = {
         embedMs: Math.round(embedMs),
         retrieveMs: Math.round(retrieveMs),
-        rerankMs: this.config.rag?.useReranking ? Math.round(rerankMs) : undefined,
+        rerankMs: (arch !== 'naive' && (arch === 'retrieve-and-rerank' || this.config.rag?.useReranking)) ? Math.round(rerankMs) : undefined,
         generateMs: Math.round(generateMs),
         totalMs: Math.round(totalMs),
       };

package/src/core/Retrivora.ts

@@ -29,6 +29,7 @@ export class Retrivora {
         this.config.projectId,
         this.config.vectorDb?.provider
       );
+      await LicenseVerifier.verifyIP(this.config.licenseKey);
     } catch (err) {
       throw wrapError(err, 'CONFIGURATION_ERROR');
     }

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>
-  );
-}