@retrivora-ai/rag-engine 1.8.0 → 1.8.2

package/src/components/Navbar.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import React from 'react';
+import { Zap, Package, GitBranch, HeartPulse } from 'lucide-react';
+import { ThemeToggle } from '@/components/ThemeToggle';
+import { useConfig } from '@/components/ConfigProvider';
+import pkg from '../../package.json';
+
+export function Navbar() {
+  const { ui } = useConfig();
+
+  return (
+    <nav className="sticky top-0 z-50 flex items-center justify-between px-8 py-5 border-b border-slate-200 dark:border-white/5 bg-white/80 dark:bg-[#080811]/80 backdrop-blur-md">
+      <div className="flex items-center gap-3 group cursor-default">
+        <div className="relative">
+          <div
+            className="w-10 h-10 rounded-xl flex items-center justify-center shadow-lg relative z-10 overflow-hidden transition-transform group-hover:scale-110 duration-500"
+            style={{ background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` }}
+          >
+            <Zap className="w-5 h-5 text-white animate-pulse" />
+            <div className="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 transition-opacity" />
+          </div>
+          <div
+            className="absolute inset-0 blur-lg opacity-40 group-hover:opacity-80 transition-opacity"
+            style={{ background: ui.primaryColor }}
+          />
+        </div>
+        <div className="flex flex-col -gap-0.5">
+          <span className="font-black text-transparent bg-clip-text text-xl tracking-tight leading-none"
+            style={{ backgroundImage: `linear-gradient(to right, ${ui.primaryColor}, ${ui.accentColor})` }}
+          >
+            Retrivora&nbsp;AI
+          </span>
+          <div className="flex items-center gap-1.5">
+            <span className="font-bold text-slate-900 dark:text-white text-[10px] tracking-[0.15em] uppercase opacity-70">Accelerator</span>
+            <span className="text-[9px] px-1.5 py-0.5 rounded-full bg-slate-100 dark:bg-white/5 text-slate-500 dark:text-white/40 font-mono border border-slate-200/50 dark:border-white/10">v{pkg?.version}</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <ThemeToggle />
+        <a href="https://www.npmjs.com/package/@retrivora-ai/rag-engine" target="_blank" rel="noreferrer" className="text-slate-500 hover:text-[#CB3837] dark:text-white/40 dark:hover:text-[#CB3837] text-sm transition-colors flex items-center gap-1.5">
+          <Package className="w-4 h-4" /> NPM
+        </a>
+        <a href="https://github.com/abhinav1201/ai-accelerator" target="_blank" rel="noreferrer" className="text-slate-500 hover:text-slate-900 dark:text-white/40 dark:hover:text-white/70 text-sm transition-colors flex items-center gap-1.5">
+          <GitBranch className="w-4 h-4" /> GitHub
+        </a>
+        <a href="/api/health" target="_blank" rel="noreferrer" className="px-3 py-1.5 rounded-lg text-xs border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/50 hover:text-slate-900 dark:hover:text-white/80 hover:bg-slate-100 dark:hover:bg-white/5 transition-all flex items-center gap-1.5">
+          <HeartPulse className="w-3.5 h-3.5" /> Health
+        </a>
+      </div>
+    </nav>
+  );
+}

package/src/components/ObservabilityPanel.tsx

@@ -0,0 +1,374 @@
+'use client';
+
+import React from 'react';
+import {
+  Clock, Cpu, Zap, AlertTriangle, FileText, Layers,
+  ChevronDown, ChevronRight, CheckCircle, AlertCircle,
+} from 'lucide-react';
+import { ObservabilityTrace } from '../types';
+
+// ─── Props ────────────────────────────────────────────────────────────────────
+
+interface ObservabilityPanelProps {
+  trace: ObservabilityTrace;
+  primaryColor?: string;
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function fmtMs(ms: number): string {
+  return ms >= 1000 ? `${(ms / 1000).toFixed(2)}s` : `${Math.round(ms)}ms`;
+}
+
+function fmtTokens(n: number): string {
+  return n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n);
+}
+
+function ScoreBadge({ score }: { score: number }) {
+  const pct = Math.round(score * 100);
+  const color =
+    pct <= 20 ? 'text-emerald-600 bg-emerald-50 border-emerald-200 dark:text-emerald-400 dark:bg-emerald-500/10 dark:border-emerald-500/20'
+    : pct <= 50 ? 'text-amber-600 bg-amber-50 border-amber-200 dark:text-amber-400 dark:bg-amber-500/10 dark:border-amber-500/20'
+    : 'text-red-600 bg-red-50 border-red-200 dark:text-red-400 dark:bg-red-500/10 dark:border-red-500/20';
+
+  return (
+    <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-semibold border ${color}`}>
+      {pct <= 20 ? <CheckCircle className="w-3 h-3" /> : <AlertCircle className="w-3 h-3" />}
+      {pct}% hallucination risk
+    </span>
+  );
+}
+
+// ─── Tab content renderers ────────────────────────────────────────────────────
+
+function RetrievalTab({ trace }: { trace: ObservabilityTrace }) {
+  return (
+    <div className="space-y-2">
+      <p className="text-[11px] text-slate-500 dark:text-white/40">
+        {trace.chunks.length} chunk{trace.chunks.length !== 1 ? 's' : ''} retrieved
+        {trace.rewrittenQuery && (
+          <span className="ml-2 italic">
+            (query rewritten: <em className="text-indigo-500">{trace.rewrittenQuery}</em>)
+          </span>
+        )}
+      </p>
+      <div className="space-y-1.5 max-h-56 overflow-y-auto pr-1 custom-scrollbar">
+        {trace.chunks.map((chunk, i) => (
+          <div
+            key={String(chunk.id)}
+            className="rounded-lg border border-slate-100 dark:border-white/8 bg-slate-50 dark:bg-white/3 p-2.5"
+          >
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-[10px] font-mono text-slate-400 dark:text-white/30">
+                [{i + 1}] {String(chunk.id).slice(0, 20)}
+              </span>
+              <span className="text-[10px] font-semibold text-indigo-600 dark:text-indigo-400">
+                score: {chunk.score.toFixed(3)}
+              </span>
+            </div>
+            {/* Score bar */}
+            <div className="h-1 rounded-full bg-slate-200 dark:bg-white/10 mb-2 overflow-hidden">
+              <div
+                className="h-full rounded-full bg-indigo-500 dark:bg-indigo-400 transition-all"
+                style={{ width: `${Math.min(100, chunk.score * 100)}%` }}
+              />
+            </div>
+            <p className="text-[11px] text-slate-600 dark:text-white/60 line-clamp-2 leading-relaxed">
+              {chunk.content}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function LatencyTab({ trace }: { trace: ObservabilityTrace }) {
+  const { latency } = trace;
+  const bars = [
+    { label: 'Embed', ms: latency.embedMs, color: '#6366f1' },
+    { label: 'Retrieve', ms: latency.retrieveMs, color: '#10b981' },
+    ...(latency.rerankMs != null ? [{ label: 'Rerank', ms: latency.rerankMs, color: '#f59e0b' }] : []),
+    { label: 'Generate', ms: latency.generateMs, color: '#8b5cf6' },
+  ];
+  const maxMs = Math.max(...bars.map(b => b.ms), 1);
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <span className="text-[11px] text-slate-500 dark:text-white/40">Pipeline stages</span>
+        <span className="text-[11px] font-semibold text-slate-700 dark:text-white/70">
+          Total: {fmtMs(latency.totalMs)}
+        </span>
+      </div>
+      <div className="space-y-2">
+        {bars.map((bar) => (
+          <div key={bar.label} className="space-y-0.5">
+            <div className="flex items-center justify-between">
+              <span className="text-[11px] text-slate-600 dark:text-white/60">{bar.label}</span>
+              <span className="text-[11px] font-mono text-slate-500 dark:text-white/40">{fmtMs(bar.ms)}</span>
+            </div>
+            <div className="h-2 rounded-full bg-slate-100 dark:bg-white/8 overflow-hidden">
+              <div
+                className="h-full rounded-full transition-all duration-700"
+                style={{
+                  width: `${(bar.ms / maxMs) * 100}%`,
+                  background: bar.color,
+                  opacity: 0.85,
+                }}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function TokensTab({ trace }: { trace: ObservabilityTrace }) {
+  const { tokens } = trace;
+  if (!tokens) {
+    return <p className="text-[11px] text-slate-400 dark:text-white/30 italic">Token data not available.</p>;
+  }
+
+  const stats = [
+    { label: 'Prompt Tokens', value: fmtTokens(tokens.promptTokens), color: 'text-indigo-600 dark:text-indigo-400' },
+    { label: 'Completion Tokens', value: fmtTokens(tokens.completionTokens), color: 'text-emerald-600 dark:text-emerald-400' },
+    { label: 'Total Tokens', value: fmtTokens(tokens.totalTokens), color: 'text-slate-700 dark:text-white/80' },
+  ];
+
+  return (
+    <div className="space-y-3">
+      <div className="grid grid-cols-3 gap-2">
+        {stats.map((s) => (
+          <div key={s.label} className="rounded-lg border border-slate-100 dark:border-white/8 bg-slate-50 dark:bg-white/3 p-2.5 text-center">
+            <p className={`text-lg font-bold ${s.color}`}>{s.value}</p>
+            <p className="text-[10px] text-slate-400 dark:text-white/30 mt-0.5">{s.label}</p>
+          </div>
+        ))}
+      </div>
+      {tokens.estimatedCostUsd != null && (
+        <div className="flex items-center justify-between rounded-lg border border-emerald-100 dark:border-emerald-500/20 bg-emerald-50 dark:bg-emerald-500/10 px-3 py-2">
+          <span className="text-[11px] text-emerald-700 dark:text-emerald-400 font-medium">Estimated Cost</span>
+          <span className="text-[11px] font-bold text-emerald-700 dark:text-emerald-400">
+            ${tokens.estimatedCostUsd < 0.0001
+              ? tokens.estimatedCostUsd.toExponential(2)
+              : tokens.estimatedCostUsd.toFixed(5)} USD
+          </span>
+        </div>
+      )}
+      {/* Visual token proportion bar */}
+      <div className="h-2 rounded-full overflow-hidden flex">
+        <div
+          className="h-full bg-indigo-500 dark:bg-indigo-400"
+          style={{ width: `${(tokens.promptTokens / tokens.totalTokens) * 100}%` }}
+          title="Prompt tokens"
+        />
+        <div
+          className="h-full bg-emerald-500 dark:bg-emerald-400"
+          style={{ width: `${(tokens.completionTokens / tokens.totalTokens) * 100}%` }}
+          title="Completion tokens"
+        />
+      </div>
+      <div className="flex gap-3 text-[10px] text-slate-400 dark:text-white/30">
+        <span className="flex items-center gap-1"><span className="inline-block w-2 h-2 rounded-full bg-indigo-500" /> Prompt</span>
+        <span className="flex items-center gap-1"><span className="inline-block w-2 h-2 rounded-full bg-emerald-500" /> Completion</span>
+      </div>
+    </div>
+  );
+}
+
+function HallucinationTab({ trace }: { trace: ObservabilityTrace }) {
+  if (trace.hallucinationScore == null) {
+    return <p className="text-[11px] text-slate-400 dark:text-white/30 italic">Hallucination scoring not available for this response.</p>;
+  }
+
+  const score = trace.hallucinationScore;
+  const pct = Math.round(score * 100);
+  const barColor = pct <= 20 ? '#10b981' : pct <= 50 ? '#f59e0b' : '#ef4444';
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <ScoreBadge score={score} />
+        <span className="text-[11px] font-mono text-slate-500 dark:text-white/40">{pct}/100</span>
+      </div>
+      <div className="h-3 rounded-full bg-slate-100 dark:bg-white/8 overflow-hidden">
+        <div
+          className="h-full rounded-full transition-all duration-700"
+          style={{ width: `${pct}%`, background: barColor }}
+        />
+      </div>
+      {trace.hallucinationReason && (
+        <div className="rounded-lg border border-slate-100 dark:border-white/8 bg-slate-50 dark:bg-white/3 p-2.5">
+          <p className="text-[11px] text-slate-500 dark:text-white/40 font-medium mb-0.5">AI self-assessment</p>
+          <p className="text-[11px] text-slate-700 dark:text-white/70 leading-relaxed">{trace.hallucinationReason}</p>
+        </div>
+      )}
+      <div className="flex gap-2 text-[10px] text-slate-400 dark:text-white/30">
+        <span className="flex items-center gap-1"><span className="inline-block w-2 h-2 rounded-full bg-emerald-500" /> 0–20%: Grounded</span>
+        <span className="flex items-center gap-1"><span className="inline-block w-2 h-2 rounded-full bg-amber-500" /> 21–50%: Uncertain</span>
+        <span className="flex items-center gap-1"><span className="inline-block w-2 h-2 rounded-full bg-red-500" /> 51–100%: Risk</span>
+      </div>
+    </div>
+  );
+}
+
+function PromptTab({ trace }: { trace: ObservabilityTrace }) {
+  const [showSystem, setShowSystem] = React.useState(false);
+  return (
+    <div className="space-y-3">
+      <div>
+        <button
+          onClick={() => setShowSystem(s => !s)}
+          className="flex items-center gap-1.5 text-[11px] font-semibold text-slate-600 dark:text-white/60 hover:text-slate-900 dark:hover:text-white/80 transition-colors mb-1.5"
+        >
+          {showSystem ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
+          System Prompt
+        </button>
+        {showSystem && (
+          <pre className="text-[10px] font-mono text-slate-600 dark:text-white/60 bg-slate-900 dark:bg-black/30 rounded-lg p-3 overflow-auto max-h-40 whitespace-pre-wrap leading-relaxed">
+            {trace.systemPrompt || '(empty)'}
+          </pre>
+        )}
+      </div>
+      <div>
+        <p className="text-[11px] font-semibold text-slate-600 dark:text-white/60 mb-1.5">User Prompt</p>
+        <pre className="text-[10px] font-mono text-slate-600 dark:text-white/60 bg-slate-900 dark:bg-black/30 rounded-lg p-3 overflow-auto max-h-40 whitespace-pre-wrap leading-relaxed">
+          {trace.userPrompt}
+        </pre>
+      </div>
+    </div>
+  );
+}
+
+function ChunksTab({ trace }: { trace: ObservabilityTrace }) {
+  const [expanded, setExpanded] = React.useState<Set<number>>(new Set());
+  const toggle = (i: number) => setExpanded(prev => {
+    const next = new Set(prev);
+    if (next.has(i)) {
+      next.delete(i);
+    } else {
+      next.add(i);
+    }
+    return next;
+  });
+
+  return (
+    <div className="space-y-1.5 max-h-64 overflow-y-auto pr-1 custom-scrollbar">
+      {trace.chunks.map((chunk, i) => {
+        const isOpen = expanded.has(i);
+        return (
+          <div
+            key={String(chunk.id)}
+            className="rounded-lg border border-slate-100 dark:border-white/8 bg-slate-50 dark:bg-white/3 overflow-hidden"
+          >
+            <button
+              onClick={() => toggle(i)}
+              className="w-full flex items-center justify-between px-3 py-2 text-left hover:bg-slate-100 dark:hover:bg-white/5 transition-colors"
+            >
+              <div className="flex items-center gap-2">
+                {isOpen ? <ChevronDown className="w-3 h-3 text-slate-400" /> : <ChevronRight className="w-3 h-3 text-slate-400" />}
+                <span className="text-[11px] font-medium text-slate-700 dark:text-white/70">
+                  Chunk {i + 1}
+                </span>
+                <span className="text-[10px] font-mono text-slate-400 dark:text-white/30">
+                  {String(chunk.id).slice(0, 16)}
+                </span>
+              </div>
+              <span className="text-[10px] font-semibold text-indigo-600 dark:text-indigo-400">
+                {chunk.score.toFixed(3)}
+              </span>
+            </button>
+
+            {isOpen && (
+              <div className="px-3 pb-3 space-y-2 border-t border-slate-100 dark:border-white/5 pt-2">
+                <div>
+                  <p className="text-[10px] text-slate-400 dark:text-white/30 font-semibold uppercase tracking-wider mb-1">Content</p>
+                  <p className="text-[11px] text-slate-600 dark:text-white/60 leading-relaxed whitespace-pre-wrap">
+                    {chunk.content}
+                  </p>
+                </div>
+                {Object.keys(chunk.metadata).length > 0 && (
+                  <div>
+                    <p className="text-[10px] text-slate-400 dark:text-white/30 font-semibold uppercase tracking-wider mb-1">Metadata</p>
+                    <pre className="text-[10px] font-mono text-slate-500 dark:text-white/40 bg-slate-900 dark:bg-black/30 rounded-md p-2 overflow-auto max-h-24">
+                      {JSON.stringify(chunk.metadata, null, 2)}
+                    </pre>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// ─── Main component ───────────────────────────────────────────────────────────
+
+type TabId = 'retrieval' | 'latency' | 'tokens' | 'hallucination' | 'prompt' | 'chunks';
+
+const TABS: { id: TabId; label: string; icon: React.ReactNode }[] = [
+  { id: 'retrieval',    label: 'Retrieval',    icon: <Layers className="w-3 h-3" /> },
+  { id: 'latency',      label: 'Latency',      icon: <Clock className="w-3 h-3" /> },
+  { id: 'tokens',       label: 'Tokens',       icon: <Cpu className="w-3 h-3" /> },
+  { id: 'hallucination',label: 'Grounding',    icon: <AlertTriangle className="w-3 h-3" /> },
+  { id: 'prompt',       label: 'Prompt',       icon: <FileText className="w-3 h-3" /> },
+  { id: 'chunks',       label: 'Chunks',       icon: <Zap className="w-3 h-3" /> },
+];
+
+export function ObservabilityPanel({ trace, primaryColor = '#6366f1' }: ObservabilityPanelProps) {
+  const [activeTab, setActiveTab] = React.useState<TabId>('retrieval');
+
+  return (
+    <div className="mt-2 w-full rounded-xl border border-slate-200 dark:border-white/8 bg-white dark:bg-slate-900/60 shadow-sm overflow-hidden text-[12px]">
+      {/* Header */}
+      <div
+        className="flex items-center gap-2 px-3 py-2 border-b border-slate-100 dark:border-white/8"
+        style={{ background: `${primaryColor}08` }}
+      >
+        <span
+          className="inline-flex items-center gap-1 text-[10px] font-bold uppercase tracking-wider"
+          style={{ color: primaryColor }}
+        >
+          <Zap className="w-3 h-3" />
+          Observability Trace
+        </span>
+        <span className="text-[10px] text-slate-400 dark:text-white/30 ml-auto font-mono">
+          {trace.requestId}
+        </span>
+      </div>
+
+      {/* Tabs */}
+      <div className="flex border-b border-slate-100 dark:border-white/8 overflow-x-auto">
+        {TABS.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)}
+            className={`flex items-center gap-1.5 px-3 py-2 text-[10px] font-semibold whitespace-nowrap transition-colors border-b-2 ${
+              activeTab === tab.id
+                ? 'border-b-2 text-indigo-600 dark:text-indigo-400'
+                : 'border-transparent text-slate-400 dark:text-white/30 hover:text-slate-600 dark:hover:text-white/60'
+            }`}
+            style={activeTab === tab.id ? { borderBottomColor: primaryColor, color: primaryColor } : {}}
+          >
+            {tab.icon}
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Tab body */}
+      <div className="p-3">
+        {activeTab === 'retrieval'    && <RetrievalTab trace={trace} />}
+        {activeTab === 'latency'      && <LatencyTab trace={trace} />}
+        {activeTab === 'tokens'       && <TokensTab trace={trace} />}
+        {activeTab === 'hallucination'&& <HallucinationTab trace={trace} />}
+        {activeTab === 'prompt'       && <PromptTab trace={trace} />}
+        {activeTab === 'chunks'       && <ChunksTab trace={trace} />}
+      </div>
+    </div>
+  );
+}

package/src/components/ProductCard.tsx

@@ -24,7 +24,7 @@ export function ProductCard({ product, primaryColor = '#6366f1', onAddToCart }:
             <ShoppingCart className="w-12 h-12" />
           </div>
         )}
-        
+
         {/* Brand Badge */}
         {product.brand && (
           <div className="absolute top-2 left-2 px-2 py-1 bg-white/90 dark:bg-black/60 backdrop-blur-md rounded-md text-[10px] font-bold uppercase tracking-wider text-slate-700 dark:text-white/90 shadow-sm">
@@ -41,11 +41,13 @@ export function ProductCard({ product, primaryColor = '#6366f1', onAddToCart }:
           </h3>
           {product.price && (
             <span className="text-sm font-bold" style={{ color: primaryColor }}>
-              {typeof product.price === 'number' ? `$${product.price}` : product.price}
+              {typeof product.price === 'number' 
+                ? `$${product.price}` 
+                : (String(product.price).match(/^[\d.]/) ? `$${product.price}` : product.price)}
             </span>
           )}
         </div>
-        
+
         {product.description && (
           <p className="text-[11px] text-slate-500 dark:text-white/50 line-clamp-2 leading-relaxed">
             {product.description}