show stats

Signed-off-by: ale <ale@manalejandro.com>

app/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
-import { Search, Copy, Check, Hash, Key, AlertCircle, Loader2 } from 'lucide-react';
+import { Search, Copy, Check, Hash, Key, AlertCircle, Loader2, Database } from 'lucide-react';
 
 interface SearchResult {
   found: boolean;
@@ -30,12 +30,48 @@ interface SearchResult {
   message?: string;
 }
 
+interface IndexStats {
+  documentCount: number;
+  indexSize: number;
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+function formatNumber(num: number): string {
+  return num.toLocaleString();
+}
+
 export default function Home() {
   const [query, setQuery] = useState('');
   const [result, setResult] = useState<SearchResult | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
   const [copiedField, setCopiedField] = useState<string | null>(null);
+  const [stats, setStats] = useState<IndexStats | null>(null);
+
+  useEffect(() => {
+    const fetchStats = async () => {
+      try {
+        const response = await fetch('/api/health');
+        if (response.ok) {
+          const data = await response.json();
+          if (data.index?.stats) {
+            setStats(data.index.stats);
+          }
+        }
+      } catch (_err) {
+        // Silently fail - stats are not critical
+      }
+    };
+
+    fetchStats();
+  }, [result]); // Refresh stats after each search result
 
   const handleSearch = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -110,6 +146,18 @@ export default function Home() {
           <p className="text-sm text-gray-500 mt-2">
             Supports MD5, SHA1, SHA256, SHA512, and Bcrypt
           </p>
+          {stats && (
+            <div className="flex items-center justify-center gap-4 mt-4 text-sm text-gray-500">
+              <div className="flex items-center gap-1.5">
+                <Database className="w-4 h-4" />
+                <span><strong>{formatNumber(stats.documentCount)}</strong> hashes</span>
+              </div>
+              <span className="text-gray-300">•</span>
+              <div>
+                <span><strong>{formatBytes(stats.indexSize)}</strong> indexed</span>
+              </div>
+            </div>
+          )}
         </div>
 
         {/* Search Form */}