bhooai-nexus 2.0.13 → 3.0.4

package/packages/nexus-admin/src/App.tsx

@@ -12,14 +12,17 @@ import {
   getPaymentOrders, getPaymentTransactions, getPaymentStatus, createPaymentOrder, updatePaymentProvider, savePaymentProviderKeys,
   getDatabases, createDatabase, deleteDatabase,
   createCollection, modifyCollection, dropCollection, getCollectionDocs,
+  getUploads, getUploadStats, getUploadIndex, rebuildUploadIndex, reindexUploads,
   generateSchema, getAiStatus, getAiModels, aiChat, aiChatStream, getAiProviders, updateAiProvider, addAiProvider, deleteAiProvider, testAiProvider,
   getAllLogs, clearLogs, type LogEntry,
   getRequestLogs, getRequestSeries, type RequestLogEntry, type RequestSeries, type RequestSeriesRange,
   type ServiceState, type AdminConfig, type AdminEnv, type EnvEntry, type DatabaseInfo, type GeneratedSchema, type PaymentProviderStatus, type PaymentProviderField, type AiStatus, type AiModelInfo, type AiChatMessage, type AiProviderView, type AiProviderPersistence, type AiProviderTestResult, type UserRecord, type RoleDefinition, type PreflightReport, type PreflightCheck, type LintReport,
+  getCertStatus, generateCerts, type CertStatus, type CertGenerateResult,
+  type UploadRecord, type UploadsResponse, type UploadStats, type UploadIndexStatus,
 } from './api.js';
 
 
-type Tab = 'overview' | 'processes' | 'logs' | 'config' | 'env' | 'plugins' | 'users' | 'monitoring' | 'payments' | 'databases' | 'schema' | 'ai' | 'graphql' | 'theme';
+type Tab = 'overview' | 'processes' | 'logs' | 'config' | 'env' | 'plugins' | 'users' | 'monitoring' | 'payments' | 'databases' | 'uploads' | 'schema' | 'ai' | 'graphql' | 'theme';
 type AdminTheme = 'aurora' | 'midnight' | 'violet';
 type UiMode = 'workspace' | 'compact' | 'focus';
 type ToggleStyle = 'chip' | 'neon' | 'icon' | 'orb' | 'track';
@@ -457,6 +460,7 @@ function Dashboard({ user, onUserChange, onLogout }: { user: AdminUser | null; o
     { id: 'monitoring', label: 'Monitoring', icon: 'activity', keywords: ['metrics', 'telemetry', 'health', 'uptime', 'traffic', 'stats'], desc: 'Live backend metrics and request traffic.' },
     { id: 'payments', label: 'Payments', icon: 'dollar', keywords: ['orders', 'transactions', 'money', 'ledger', 'checkout', 'razorpay', 'paypal', 'stripe'], desc: 'Orders, transactions and provider status.' },
     { id: 'databases', label: 'Databases', icon: 'database', keywords: ['mongo', 'mongodb', 'collections', 'data', 'tables', 'docs'], desc: 'Databases, collections and their documents.' },
+    { id: 'uploads', label: 'Uploads', icon: 'image', keywords: ['uploads', 'files', 'images', 'search', 'index', 'storage', 'sha256', 'variants', 'dedup'], desc: 'Millions-scale uploads, search index and dedup.' },
     { id: 'schema', label: 'AI Schema', icon: 'sparkles', keywords: ['generate', 'ai', 'model', 'json schema', 'validator'], desc: 'Generate MongoDB schemas from plain English.' },
     { id: 'ai', label: 'AI Agents', icon: 'bot', keywords: ['providers', 'chat', 'playground', 'ollama', 'openai', 'models', 'settings'], desc: 'AI settings, providers and chat playground.' },
     { id: 'graphql', label: 'GraphQL', icon: 'gitFork', keywords: ['graphiql', 'explorer', 'schema', 'playground', 'graphql', 'api'], desc: 'GraphQL explorer and access control.' },
@@ -644,6 +648,7 @@ function Dashboard({ user, onUserChange, onLogout }: { user: AdminUser | null; o
             {tab === 'monitoring' && <Monitoring />}
             {tab === 'payments' && <Payments toggle={customTheme.toggle} />}
             {tab === 'databases' && <Databases />}
+            {tab === 'uploads' && <Uploads />}
             {tab === 'schema' && <Schema />}
             {tab === 'ai' && <AiAgents toggle={customTheme.toggle} />}
             {tab === 'graphql' && <GraphQLSettings onNavigate={setTab} />}
@@ -1459,13 +1464,13 @@ function Overview({ onNavigate }: { onNavigate: (tab: Tab) => void }) {
       <div className="overview-hero"><div><span className="admin-overline">GOOD MORNING, ADMIN</span><h1>Your project is <em>in orbit.</em></h1><p>One calm surface for the services, configuration, data, and AI that power your Nexus application.</p></div><div className="hero-orbit-art"><span /><i /><b /><strong>NX</strong></div></div>
       <div className="overview-stat-grid"><div className="overview-stat"><span>ACTIVE SERVICES</span><strong>{running}<small>/{services.length || 4}</small></strong><b className="stat-good">● running now</b></div><div className="overview-stat"><span>HTTP REQUESTS</span><strong>{requestCount || '—'}</strong><b>since boot</b></div><div className="overview-stat"><span>UPTIME</span><strong>{metrics ? `${Math.round((metrics.uptime ?? 0) / 60)}m` : '—'}</strong><b>backend process</b></div><div className="overview-stat"><span>ENVIRONMENT</span><strong>DEV</strong><b className="stat-violet">local workspace</b></div></div>
       <section className="workspace-panel live-traffic-panel"><div className="panel-title-row"><div><span className="admin-overline">HTTP REQUESTS</span><h3>Live traffic</h3></div><span className="live-badge"><i className="status-dot good" /> LIVE</span></div><TrafficChart samples={traffic} total={requestCount} last={traffic.length ? traffic[traffic.length - 1] : 0} onNavigate={onNavigate} /></section>
-      <div className="overview-columns"><section className="workspace-panel"><div className="panel-title-row"><div><span className="admin-overline">PROJECT SURFACES</span><h3>Everything in one place</h3></div><button onClick={() => onNavigate('config')} className="text-action">View config →</button></div><div className="surface-grid"><button className="surface-card acc-blue" onClick={() => onNavigate('config')}><span className="surface-icon"><Icon name="braces" size={20} /></span><strong>Runtime config</strong><small>nexus.runtime.json overrides</small><i className="surface-go">→</i></button><button className="surface-card acc-violet" onClick={() => onNavigate('env')}><span className="surface-icon"><Icon name="key" size={20} /></span><strong>Environment</strong><small>Masked secrets editor</small><i className="surface-go">→</i></button><button className="surface-card acc-pink" onClick={() => onNavigate('databases')}><span className="surface-icon"><Icon name="database" size={20} /></span><strong>Data layer</strong><small>Mongo databases &amp; collections</small><i className="surface-go">→</i></button><button className="surface-card acc-blue" onClick={() => onNavigate('theme')}><span className="surface-icon"><Icon name="sparkles" size={20} /></span><strong>AI theme</strong><small>Generate schemas from English</small><i className="surface-go">→</i></button><button className="surface-card acc-violet" onClick={() => onNavigate('users')}><span className="surface-icon"><Icon name="users" size={20} /></span><strong>Users &amp; roles</strong><small>Accounts, roles &amp; grants</small><i className="surface-go">→</i></button><button className="surface-card acc-pink" onClick={() => onNavigate('payments')}><span className="surface-icon"><Icon name="dollar" size={20} /></span><strong>Payments</strong><small>Orders, transactions &amp; providers</small><i className="surface-go">→</i></button><button className="surface-card acc-blue" onClick={() => onNavigate('ai')}><span className="surface-icon"><Icon name="bot" size={20} /></span><strong>AI agents</strong><small>Providers &amp; chat playground</small><i className="surface-go">→</i></button></div></section><section className="workspace-panel pulse-panel"><div className="panel-title-row"><div><span className="admin-overline">SYSTEM PULSE</span><h3>Services are moving</h3></div><span className="live-badge"><i className="status-dot good" /> LIVE</span></div><div className="pulse-bars">{[34,55,42,78,62,88,52,72,48,66,84,58].map((height, index) => <i key={index} style={{ height: `${height}%` }} />)}</div><p>Live supervisor status refreshes every five seconds.</p><button onClick={() => onNavigate('monitoring')} className="text-action">Open monitoring →</button></section></div>
+      <div className="overview-columns"><section className="workspace-panel"><div className="panel-title-row"><div><span className="admin-overline">PROJECT SURFACES</span><h3>Everything in one place</h3></div><button onClick={() => onNavigate('config')} className="text-action">View config →</button></div><div className="surface-grid"><button className="surface-card acc-blue" onClick={() => onNavigate('config')}><span className="surface-icon"><Icon name="braces" size={20} /></span><strong>Runtime config</strong><small>nexus.runtime.json overrides</small><i className="surface-go">→</i></button><button className="surface-card acc-violet" onClick={() => onNavigate('uploads')}><span className="surface-icon"><Icon name="image" size={20} /></span><strong>Uploads</strong><small>Searchable file index</small><i className="surface-go">→</i></button><button className="surface-card acc-pink" onClick={() => onNavigate('databases')}><span className="surface-icon"><Icon name="database" size={20} /></span><strong>Data layer</strong><small>Mongo databases &amp; collections</small><i className="surface-go">→</i></button><button className="surface-card acc-blue" onClick={() => onNavigate('theme')}><span className="surface-icon"><Icon name="sparkles" size={20} /></span><strong>AI theme</strong><small>Generate schemas from English</small><i className="surface-go">→</i></button><button className="surface-card acc-violet" onClick={() => onNavigate('users')}><span className="surface-icon"><Icon name="users" size={20} /></span><strong>Users &amp; roles</strong><small>Accounts, roles &amp; grants</small><i className="surface-go">→</i></button><button className="surface-card acc-pink" onClick={() => onNavigate('payments')}><span className="surface-icon"><Icon name="dollar" size={20} /></span><strong>Payments</strong><small>Orders, transactions &amp; providers</small><i className="surface-go">→</i></button><button className="surface-card acc-blue" onClick={() => onNavigate('ai')}><span className="surface-icon"><Icon name="bot" size={20} /></span><strong>AI agents</strong><small>Providers &amp; chat playground</small><i className="surface-go">→</i></button></div></section><section className="workspace-panel pulse-panel"><div className="panel-title-row"><div><span className="admin-overline">SYSTEM PULSE</span><h3>Services are moving</h3></div><span className="live-badge"><i className="status-dot good" /> LIVE</span></div><div className="pulse-bars">{[34,55,42,78,62,88,52,72,48,66,84,58].map((height, index) => <i key={index} style={{ height: `${height}%` }} />)}</div><p>Live supervisor status refreshes every five seconds.</p><button onClick={() => onNavigate('monitoring')} className="text-action">Open monitoring →</button></section></div>
       <section className="workspace-panel">
         <div className="panel-title-row">
-          <div><span className="admin-overline">PREFLIGHT DIAGNOSTICS</span><h3>Dependencies are being probed</h3></div>
-          <button onClick={runChecks} disabled={preflightBusy} className="glass-chip-btn">{preflightBusy ? 'probing…' : <><Icon name="refresh" size={12} /> run checks</>}</button>
+          <div><span className="admin-overline">PREFLIGHT DIAGNOSTICS</span><h3>{preflightBusy ? 'Probing dependencies…' : preflight ? 'Dependency health' : 'Dependency diagnostics'}</h3></div>
+          <button onClick={runChecks} disabled={preflightBusy} className="glass-chip-btn">{preflightBusy ? 'Probing…' : <><Icon name="refresh" size={12} /> Run checks</>}</button>
         </div>
-        <p className="preflight-note">The Python server pings the backend API, AI server, GraphQL endpoint and data-store ports, and reports latency per target.</p>
+        <p className="preflight-note">The Node backend probes the API, AI server, GraphQL endpoint, data-store ports (Mongo/Redis), enabled AI providers, the Fusion DB server, the Python pyserver, SMTP relay and the frontend dev server, and reports latency per target.</p>
         {preflightErr && (
           <div role="alert" className="mb-3 rounded-lg border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-sm text-rose-400">
             Preflight failed — {preflightErr}
@@ -1562,7 +1567,7 @@ function Processes() {
   return (
     <div className="space-y-6">
       <PageHead title="Processes">
-        <button onClick={refresh} className="glass-chip-btn"><Icon name="refresh" size={12} /> refresh</button>
+        <button onClick={refresh} className="glass-chip-btn"><Icon name="refresh" size={12} /> Refresh</button>
       </PageHead>
       <PageHero kicker="SERVICE CONTROL PLANE" title={<>Your services, <em>in check.</em></>} desc="Every backend, frontend and AI process the supervisor is tending — live status, uptime, PID and one-click control." glyph="server" art="bars" />
       <div className="glass-panel overflow-hidden p-2">
@@ -1582,10 +1587,10 @@ function Processes() {
                 <td className="text-center text-slate-400">{s.startedAt ? `${Math.round((Date.now() - s.startedAt) / 1000)}s` : '—'}</td>
                 <td className="text-center">
                   <span className="inline-flex gap-1.5">
-                    <button onClick={() => controlService('start', s.name)} className="glass-chip-btn">start</button>
-                    <button onClick={() => controlService('stop', s.name)} className="glass-chip-btn-danger">stop</button>
-                    <button onClick={() => controlService('restart', s.name)} className="glass-chip-btn">restart</button>
-                    <button onClick={() => showLogs(s.name)} className="glass-chip-btn">logs</button>
+                    <button onClick={() => controlService('start', s.name)} className="glass-chip-btn">Start</button>
+                    <button onClick={() => controlService('stop', s.name)} className="glass-chip-btn-danger">Stop</button>
+                    <button onClick={() => controlService('restart', s.name)} className="glass-chip-btn">Restart</button>
+                    <button onClick={() => showLogs(s.name)} className="glass-chip-btn">Logs</button>
                   </span>
                 </td>
               </tr>
@@ -1775,10 +1780,10 @@ function Logs({ onNavigate }: { onNavigate: (tab: Tab) => void }) {
       <PageHead title="Logs">
         <div className="flex flex-wrap items-center gap-2">
           <button aria-pressed={live} onClick={() => setLive(!live)} className={`glass-chip-btn inline-flex items-center gap-1.5 log-live-btn${live ? ' is-live' : ''}`}>{live ? '● live' : '○ paused'}</button>
-          <button aria-label="Refresh logs" onClick={() => void refresh()} className="glass-chip-btn inline-flex items-center gap-1.5"><Icon name="refresh" size={12} /> refresh</button>
-          <button aria-label="Copy filtered logs" onClick={() => void copyAll()} className="glass-chip-btn inline-flex items-center gap-1.5">{copied ? 'Copied' : <><Icon name="copy" size={12} /> copy</>}</button>
-          <button aria-label="Summarize logs with AI" onClick={() => void runAiSummary()} disabled={aiSummaryBusy} className="glass-chip-btn log-ai-btn inline-flex items-center gap-1.5"><Icon name="sparkles" size={12} /> {aiSummaryBusy ? 'summarizing…' : 'ai summary'}</button>
-          <button aria-label="Clear all logs" onClick={async () => { try { await clearLogs(); await refresh(); } catch { /* supervisor may not be reachable */ } }} className="glass-chip-btn-danger inline-flex items-center gap-1.5"><Icon name="trash" size={12} /> clear</button>
+          <button aria-label="Refresh logs" onClick={() => void refresh()} className="glass-chip-btn inline-flex items-center gap-1.5"><Icon name="refresh" size={12} /> Refresh</button>
+          <button aria-label="Copy filtered logs" onClick={() => void copyAll()} className="glass-chip-btn inline-flex items-center gap-1.5">{copied ? 'Copied' : <><Icon name="copy" size={12} /> Copy</>}</button>
+          <button aria-label="Summarize logs with AI" onClick={() => void runAiSummary()} disabled={aiSummaryBusy} className="glass-chip-btn log-ai-btn inline-flex items-center gap-1.5"><Icon name="sparkles" size={12} /> {aiSummaryBusy ? 'Summarizing…' : 'AI summary'}</button>
+          <button aria-label="Clear all logs" onClick={async () => { try { await clearLogs(); await refresh(); } catch { /* supervisor may not be reachable */ } }} className="glass-chip-btn-danger inline-flex items-center gap-1.5"><Icon name="trash" size={12} /> Clear</button>
         </div>
       </PageHead>
       <PageHero kicker="ERROR CONSOLE" title={<>Every failure, <em>in one stream.</em></>} desc="Aggregated stdout, stderr and supervisor events from every service — live as the supervisor records them, filterable and searchable." glyph="terminal" art="wave" />
@@ -1816,9 +1821,9 @@ function Logs({ onNavigate }: { onNavigate: (tab: Tab) => void }) {
             <div className="log-ai-head">
               <span className="log-ai-title"><Icon name="sparkles" size={12} /> AI summary{aiModel ? ` · ${aiModel}` : ''}</span>
               <div className="log-ai-actions">
-                {aiSummaryBusy && <button onClick={stopAiSummary} className="glass-chip-btn-danger"><Icon name="square" size={10} /> stop</button>}
-                {!aiSummaryBusy && aiSummary && <button onClick={() => void copyAiSummary()} className="glass-chip-btn"><Icon name="copy" size={12} /> copy</button>}
-                <button onClick={() => { setAiSummaryOpen(false); setAiSummary(''); setAiSummaryErr(''); }} className="glass-chip-btn"><Icon name="x" size={12} /> dismiss</button>
+                {aiSummaryBusy && <button onClick={stopAiSummary} className="glass-chip-btn-danger"><Icon name="square" size={10} /> Stop</button>}
+                {!aiSummaryBusy && aiSummary && <button onClick={() => void copyAiSummary()} className="glass-chip-btn"><Icon name="copy" size={12} /> Copy</button>}
+                <button onClick={() => { setAiSummaryOpen(false); setAiSummary(''); setAiSummaryErr(''); }} className="glass-chip-btn"><Icon name="x" size={12} /> Dismiss</button>
               </div>
             </div>
             {aiSummaryErr && (
@@ -1944,7 +1949,7 @@ function LintChecks({ run, title, overline }: { run: () => Promise<LintReport>;
     <section className="workspace-panel lint-panel">
       <div className="panel-title-row">
         <div><span className="admin-overline">{overline}</span><h3>{title}</h3></div>
-        <button onClick={doRun} disabled={busy} className="glass-chip-btn">{busy ? 'linting…' : <><Icon name="refresh" size={12} /> run lint</>}</button>
+        <button onClick={doRun} disabled={busy} className="glass-chip-btn">{busy ? 'Linting…' : <><Icon name="refresh" size={12} /> Run lint</>}</button>
       </div>
       {err && <p className="preflight-empty">{err}</p>}
       {report ? (
@@ -2050,7 +2055,7 @@ function AiSettings() {
       <section className="glass-card space-y-3">
         <div className="flex items-center justify-between">
           <h3 className="glass-h3">AI server health</h3>
-          <button onClick={checkAi} className="glass-chip-btn">re-check</button>
+          <button onClick={checkAi} className="glass-chip-btn">Re-check</button>
         </div>
         {aiErr && <p className="text-xs text-rose-400">{aiErr}</p>}
         <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
@@ -2354,7 +2359,7 @@ function AiProviders({ toggle }: { toggle: ToggleStyle }) {
         <div className="flex items-center justify-between">
           <h3 className="glass-h3">AI providers ({providers.length})</h3>
           <div className="flex gap-2">
-            <button onClick={loadProviders} disabled={busy} className="glass-chip-btn">refresh</button>
+            <button onClick={loadProviders} disabled={busy} className="glass-chip-btn">Refresh</button>
             <button onClick={() => setShowAdd(true)} disabled={busy} className="glass-chip-btn">+ add provider</button>
           </div>
         </div>
@@ -2607,7 +2612,7 @@ function ProviderCard({ provider, toggle, anim, busy, isCustom, testing, testRes
       {/* Test row */}
       <div className="flex items-center gap-2 pt-0.5 border-t border-white/[0.06]">
         <button type="button" onClick={onTest} disabled={busy || testing} className="glass-chip-btn shrink-0 text-[10px]">
-          {testing ? 'testing…' : <><Icon name="zap" size={11} /> test</>}
+          {testing ? 'Testing…' : <><Icon name="zap" size={11} /> Test</>}
         </button>
         {testResult && (
           testResult.ok ? (
@@ -2969,8 +2974,8 @@ function AiChatPlayground() {
         <div className="flex items-center justify-between">
           <h3 className="glass-h3">Chat playground</h3>
           <div className="flex gap-2">
-            <button onClick={checkAi} disabled={streaming} className="glass-chip-btn"><Icon name="refresh" size={12} /> refresh models</button>
-            <button onClick={clearChat} disabled={streaming} className="glass-chip-btn">clear</button>
+            <button onClick={checkAi} disabled={streaming} className="glass-chip-btn"><Icon name="refresh" size={12} /> Refresh models</button>
+            <button onClick={clearChat} disabled={streaming} className="glass-chip-btn">Clear</button>
           </div>
         </div>
 
@@ -3064,6 +3069,13 @@ function Config({ onNavigate }: { onNavigate?: (tab: Tab) => void }) {
   const [newKey, setNewKey] = useState('');
   const [newType, setNewType] = useState<ConfigValueType>('string');
   const [newValue, setNewValue] = useState('');
+  // HTTP/HTTPS transport switch — backed by server.https + certFile/keyFile
+  const [serverHttps, setServerHttps] = useState(false);
+  const [serverCertFile, setServerCertFile] = useState('');
+  const [serverKeyFile, setServerKeyFile] = useState('');
+  const [certStatus, setCertStatus] = useState<CertStatus | null>(null);
+  const [certBusy, setCertBusy] = useState(false);
+  const [certMsg, setCertMsg] = useState('');
 
   const addKey = () => {
     if (!newKey.trim()) return;
@@ -3071,6 +3083,32 @@ function Config({ onNavigate }: { onNavigate?: (tab: Tab) => void }) {
     setNewKey(''); setNewType('string'); setNewValue('');
   };
 
+  const refreshCertStatus = async () => {
+    try { setCertStatus(await getCertStatus()); } catch { setCertStatus(null); }
+  };
+
+  const handleGenerateCerts = async (force = false) => {
+    setCertBusy(true); setCertMsg('');
+    try {
+      const res = await generateCerts({ force });
+      if (res.ok) {
+        setCertStatus(res.status ?? null);
+        if (res.certFile) setServerCertFile(res.certFile);
+        if (res.keyFile) setServerKeyFile(res.keyFile);
+        setCertMsg(`Generated ${res.method} certificates: ${res.certFile} + ${res.keyFile}${res.overwritten ? ' (overwritten)' : ''}. Saved to runtime — restart to use.`);
+      } else {
+        setCertMsg(`Failed: ${(res as unknown as { reason?: string }).reason ?? 'unknown error'}`);
+      }
+    } catch (e: any) {
+      const msg = String(e?.message ?? e);
+      if (msg.includes('already exist')) {
+        setCertMsg('Certificates already exist. Tick “overwrite” to regenerate.');
+      } else {
+        setCertMsg(`Error: ${msg}`);
+      }
+    } finally { setCertBusy(false); }
+  };
+
   const load = async () => {
     try {
       const c = await getAdminConfig();
@@ -3083,10 +3121,17 @@ function Config({ onNavigate }: { onNavigate?: (tab: Tab) => void }) {
       const base = overrides.length
         ? overrides
         : flattenConfig(c.config).filter((entry) => entry.value !== '***');
-      setEntries(base);
+      // Extract transport keys into dedicated switch state; keep the table free of duplicates
+      const s = (c.config?.server ?? {}) as { https?: boolean; certFile?: string; keyFile?: string };
+      setServerHttps(!!s.https);
+      setServerCertFile((s.certFile as string) ?? '');
+      setServerKeyFile((s.keyFile as string) ?? '');
+      const filtered = base.filter((e) => !['server.https', 'server.certFile', 'server.keyFile'].includes(e.key));
+      setEntries(filtered);
       setFilePath(c.file?.path ?? '');
       setFileText(c.file?.content ?? '');
       setMsg(c.file ? '' : 'No human-edited config file found.');
+      void refreshCertStatus();
     } catch (e: any) { setMsg(String(e?.message ?? e)); }
   };
   useEffect(() => { load(); }, []);
@@ -3094,7 +3139,20 @@ function Config({ onNavigate }: { onNavigate?: (tab: Tab) => void }) {
   const saveRuntime = async () => {
     setBusy(true); setMsg('');
     try {
-      const overrides = buildConfig(entries);
+      const baseConfig = buildConfig(entries);
+      const serverPatch: Record<string, unknown> = { https: serverHttps };
+      if (serverHttps) {
+        if (serverCertFile.trim()) serverPatch.certFile = serverCertFile.trim();
+        if (serverKeyFile.trim()) serverPatch.keyFile = serverKeyFile.trim();
+      } else {
+        // Keep cert paths in runtime if the user already typed them — the server ignores them when https is false
+        if (serverCertFile.trim()) serverPatch.certFile = serverCertFile.trim();
+        if (serverKeyFile.trim()) serverPatch.keyFile = serverKeyFile.trim();
+      }
+      const overrides = {
+        ...baseConfig,
+        server: { ...((baseConfig.server as Record<string, unknown>) ?? {}), ...serverPatch },
+      } as Record<string, unknown>;
       await putAdminConfig(overrides);
       setMsg('Saved to nexus.runtime.json. Restart services to apply changes.');
       setRestartDialog(true);
@@ -3115,6 +3173,79 @@ function Config({ onNavigate }: { onNavigate?: (tab: Tab) => void }) {
       <PageHead title="Configuration"><div className="heading-actions"><span className="restart-badge">RESTART REQUIRED AFTER SAVE</span><button onClick={load} className="workspace-action"><Icon name="refresh" size={12} /> Reload</button></div></PageHead>
       <div className="config-intro"><div><span className="admin-overline">PROJECT CONTROL PLANE</span><h1>Configure your <em>runtime.</em></h1><p>Use key/value rows for safe JSON overrides, or switch to source mode for the typed project configuration.</p></div><div className="hero-art hero-art--cubes"><strong>{'{ }'}</strong><span className="ha-a" /><span className="ha-b" /><span className="ha-c" /></div></div>
       <div className="workspace-tabs">{([['runtime', 'Runtime JSON'], ['source', 'Source file'], ['effective', 'Effective view']] as const).map(([id, label]) => <button key={id} onClick={() => setMode(id)} className={mode === id ? 'is-active' : ''}>{label}</button>)}</div>
+      {mode === 'runtime' && (
+        <section className="glass-card space-y-3">
+          <div className="flex items-center justify-between">
+            <div>
+              <span className="admin-overline">TRANSPORT · PROTOCOL</span>
+              <h3 className="glass-h3">HTTP / HTTPS switch</h3>
+            </div>
+            <span className={serverHttps ? 'provider-badge-ok' : 'provider-badge-mute'}>{serverHttps ? 'https' : 'http'}</span>
+          </div>
+          <p className="text-xs text-slate-400">Toggle the backend protocol. HTTPS requires certificate and key files. Saved to <code className="font-mono text-slate-300">nexus.runtime.json</code> as <code className="font-mono text-slate-300">server.https</code> (+ certFile/keyFile). Restart required after save.</p>
+          <div className="flex flex-wrap items-center gap-3">
+            <div className="flex items-center gap-2 rounded-full border border-white/10 bg-white/5 p-1">
+              <button type="button" onClick={() => setServerHttps(false)} className={`rounded-full px-4 py-1.5 text-xs font-medium transition-colors ${!serverHttps ? 'bg-white text-slate-900 shadow' : 'text-slate-400 hover:text-slate-200'}`}>HTTP</button>
+              <button type="button" onClick={() => setServerHttps(true)} className={`rounded-full px-4 py-1.5 text-xs font-medium transition-colors ${serverHttps ? 'bg-emerald-500 text-white shadow' : 'text-slate-400 hover:text-slate-200'}`}>HTTPS</button>
+            </div>
+            <button type="button" onClick={() => setServerHttps(!serverHttps)} className={`ai-toggle ${serverHttps ? 'is-on' : ''}`} aria-label="Toggle HTTPS" title={serverHttps ? 'HTTPS enabled — click for HTTP' : 'HTTP enabled — click for HTTPS'}>
+              <span className="ai-toggle-knob" />
+            </button>
+            <span className="text-xs text-slate-500">{serverHttps ? 'Backend will listen with TLS' : 'Backend will listen plain HTTP'}</span>
+          </div>
+          {serverHttps && (
+            <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+              <label className="text-xs text-slate-300">Cert file path
+                <input value={serverCertFile} onChange={(e) => setServerCertFile(e.target.value)} placeholder="certs/server.crt" className="glass-input mt-1 block w-full font-mono text-xs" />
+              </label>
+              <label className="text-xs text-slate-300">Key file path
+                <input value={serverKeyFile} onChange={(e) => setServerKeyFile(e.target.value)} placeholder="certs/server.key" className="glass-input mt-1 block w-full font-mono text-xs" />
+              </label>
+            </div>
+          )}
+          {serverHttps && (!serverCertFile.trim() || !serverKeyFile.trim()) && (
+            <p className="rounded-lg border border-amber-400/30 bg-amber-400/10 px-3 py-2 text-xs text-amber-200">HTTPS is on but cert/key paths are empty. The server will fail to start without valid files — generate self-signed certs into <code className="font-mono">certs/</code> or set paths before restarting. You can still save and add keys later.</p>
+          )}
+          {!serverHttps && (serverCertFile || serverKeyFile) && (
+            <p className="text-xs text-slate-500">Cert paths are kept but ignored while HTTP is selected. They will be used again when you switch back to HTTPS.</p>
+          )}
+          <div className="flex items-center gap-2 text-xs text-slate-500">
+            <span>Effective URL:</span>
+            <code className="font-mono text-slate-300">{`${serverHttps ? 'https' : 'http'}://${((cfg?.config as unknown as { server?: { host?: string; port?: number } })?.server?.host) ?? 'localhost'}:${((cfg?.config as unknown as { server?: { port?: number } })?.server?.port) ?? 4000}`}</code>
+          </div>
+
+          {/* Self-signed certificate generation */}
+          <div className="rounded-xl border border-white/10 bg-white/[0.03] p-3">
+            <div className="flex flex-wrap items-center justify-between gap-2">
+              <div>
+                <span className="admin-overline">CERTIFICATES</span>
+                <div className="text-xs text-slate-200">Self-signed certificate</div>
+                {certStatus ? (
+                  <div className="mt-1 flex flex-wrap items-center gap-2 text-[11px] font-mono">
+                    <span className={certStatus.certExists ? 'text-emerald-400' : 'text-rose-400'}>cert: {certStatus.certFile} {certStatus.certExists ? '● exists' : '○ missing'}{certStatus.certInfo ? ` (${Math.round((certStatus.certInfo.size)/1024*10)/10}k)` : ''}</span>
+                    <span className={certStatus.keyExists ? 'text-emerald-400' : 'text-rose-400'}>key: {certStatus.keyFile} {certStatus.keyExists ? '● exists' : '○ missing'}{certStatus.keyInfo ? ` (${Math.round((certStatus.keyInfo.size)/1024*10)/10}k)` : ''}</span>
+                    {certStatus.ready ? <span className="provider-badge-ok">ready</span> : <span className="provider-badge-warn">not ready</span>}
+                  </div>
+                ) : (
+                  <div className="text-[11px] text-slate-500">Checking…</div>
+                )}
+              </div>
+              <div className="flex items-center gap-2">
+                <button type="button" onClick={() => void refreshCertStatus()} className="glass-chip-btn" disabled={certBusy}><Icon name="refresh" size={12} /> Check</button>
+                <button type="button" onClick={() => void handleGenerateCerts(false)} disabled={certBusy} className="glass-chip-btn-primary" title="Generate server.crt + server.key in certs/">{certBusy ? 'Generating…' : <><Icon name="sparkles" size={12} /> Generate cert</>}</button>
+              </div>
+            </div>
+            {certStatus?.ready && (
+              <div className="mt-2 flex items-center gap-2">
+                <span className="text-[11px] text-slate-500">Regenerate (overwrite existing files):</span>
+                <button type="button" onClick={() => void handleGenerateCerts(true)} disabled={certBusy} className="glass-chip-btn-danger text-[11px]">{certBusy ? '…' : 'Overwrite' }</button>
+              </div>
+            )}
+            {certMsg && <p className={`mt-2 rounded-lg px-3 py-2 text-xs ${certMsg.startsWith('Generated') ? 'border border-emerald-400/30 bg-emerald-400/10 text-emerald-200' : certMsg.startsWith('Failed') || certMsg.startsWith('Error') ? 'border border-rose-400/30 bg-rose-400/10 text-rose-300' : 'border border-white/10 bg-white/5 text-slate-300'}`}>{certMsg}</p>}
+            <p className="mt-2 text-[11px] text-slate-500">Generates a self-signed RSA 2048 certificate for <code className="font-mono">localhost</code> (+ 127.0.0.1) valid 365 days via OpenSSL or pure-JS fallback. Paths are auto-saved to <code className="font-mono">nexus.runtime.json</code> as <code className="font-mono">server.certFile</code>/<code className="font-mono">server.keyFile</code>.</p>
+          </div>
+        </section>
+      )}
       {mode === 'runtime' && <section className="workspace-panel config-panel"><div className="panel-title-row"><div><span className="admin-overline">NEXUS CONFIG · KEY/VALUE</span><h3>Configuration overrides</h3></div><button onClick={addKey} className="workspace-action">+ Add key</button></div><p className="panel-description">Existing configuration is loaded into the rows below. Changes are written to nexus.runtime.json and validated against the Nexus schema before saving. Secrets are redacted and managed in the Environment surface.</p><div className="key-add-bar">
         <input value={newKey} onChange={(event) => setNewKey(event.target.value)} onKeyDown={(event) => { if (event.key === 'Enter') addKey(); }} placeholder="key path — e.g. server.port" />
         <select value={newType} onChange={(event) => { setNewType(event.target.value as ConfigValueType); if (event.target.value === 'null') setNewValue(''); }}><option value="string">string</option><option value="number">number</option><option value="boolean">boolean</option><option value="null">null</option><option value="object">object</option><option value="array">array</option></select>
@@ -3337,8 +3468,7 @@ function GraphQLSettings({ onNavigate }: { onNavigate?: (tab: Tab) => void }) {
         {requireAuth && <p className="text-xs text-amber-400">When enabled, opening /graphiql requires an active admin session (same guard as /admin/*).</p>}
         {msg && <p className="text-xs text-slate-400">{msg}</p>}
         <div className="flex items-center justify-end gap-2">
-          <button onClick={load} className="glass-chip-btn"><Icon name="refresh" size={12} /> Reload</button>
-          <button onClick={save} disabled={busy} className="glass-chip-btn-primary shrink-0">{busy ? 'Saving…' : 'Save'} <span>→</span></button>
+          <button onClick={load} className="glass-chip-btn"><Icon name="refresh" size={12} /> Reload</button>          <button onClick={save} disabled={busy} className="glass-chip-btn-primary shrink-0">{busy ? 'Saving…' : 'Save'} <span>→</span></button>
         </div>
       </section>
 
@@ -3703,7 +3833,7 @@ function Payments({ toggle }: { toggle: ToggleStyle }) {
             <option value="all" className="bg-slate-900">All providers</option>
             {ALL_PROVIDERS.map((p) => <option key={p} value={p} className="bg-slate-900">{p}</option>)}
           </select>
-          <button onClick={() => load()} className="glass-chip-btn"><Icon name="refresh" size={12} /> refresh</button>
+          <button onClick={() => load()} className="glass-chip-btn"><Icon name="refresh" size={12} /> Refresh</button>
         </div>
       </PageHead>
       <PageHero kicker="PAYMENT OPERATIONS" title={<>Money flow, <em>on the ledger.</em></>} desc="Every charge, refund and provider event from your payment stack — one surface to reconcile what went through." glyph="dollar" art="cards" />
@@ -3849,7 +3979,7 @@ function TestConsole({ toggle, status, onRun, onNotice, onCreated }: { toggle: T
         <div className="flex items-center justify-between">
           <h3 className="glass-h3">Provider status</h3>
           <button onClick={async () => { setProbeBusy(true); try { await onRun(); } finally { setProbeBusy(false); } }} className="glass-chip-btn" disabled={probeBusy}>
-            {probeBusy ? 'checking…' : <><Icon name="refresh" size={12} /> re-run checks</>}
+            {probeBusy ? 'Checking…' : <><Icon name="refresh" size={12} /> Re-run checks</>}
           </button>
         </div>
         <div className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
@@ -3871,7 +4001,7 @@ function TestConsole({ toggle, status, onRun, onNotice, onCreated }: { toggle: T
                     <div className="text-[11px] text-slate-500 font-mono truncate">{p.sandbox ? 'sandbox mode' : 'live mode'}</div>
                   </div>
                   <span className={p.ok ? 'dot-ok' : 'dot-bad'} title={p.ok ? 'working' : 'not working'} />
-                  <button onClick={() => openKeys(p)} className="glass-chip-btn shrink-0 text-[10px]" title="Set API key / secret"><Icon name="key" size={11} /> keys</button>
+                  <button onClick={() => openKeys(p)} className="glass-chip-btn shrink-0 text-[10px]" title="Set API key / secret"><Icon name="key" size={11} /> Keys</button>
                 </div>
                 <div className="flex flex-wrap items-center gap-1.5">
                   {p.enabled
@@ -4063,7 +4193,7 @@ function Databases() {
   return (
     <div className="space-y-6">
       <PageHead title="Databases">
-        <button onClick={refresh} className="glass-chip-btn"><Icon name="refresh" size={12} /> refresh</button>
+        <button onClick={refresh} className="glass-chip-btn"><Icon name="refresh" size={12} /> Refresh</button>
       </PageHead>
       <PageHero kicker="DATA FOUNDATION" title={<>Your data, <em>organized.</em></>} desc="Databases and collections backing your project — inspect, create and keep the layer that stores everything sane." glyph="database" art="cubes" />
 
@@ -4080,24 +4210,24 @@ function Databases() {
                 <span className={`mr-1 inline-block transition-transform ${expanded === db.name ? 'rotate-90' : ''}`}><Icon name="chevronRight" size={14} /></span>{db.name}
               </button>
               <span className="text-xs text-slate-500">{(db.sizeOnDisk / 1024).toFixed(1)} KB · {db.collections.length} collections</span>
-              <button onClick={() => setConfirm({ title: `Drop database “${db.name}”?`, message: <>This will permanently delete the database <strong>{db.name}</strong> and all of its collections. This cannot be undone.</>, action: async () => { if (await withOk(() => deleteDatabase(db.name))) await refresh(); } })} className="glass-chip-btn-danger ml-auto">drop</button>
+              <button onClick={() => setConfirm({ title: `Drop database “${db.name}”?`, message: <>This will permanently delete the database <strong>{db.name}</strong> and all of its collections. This cannot be undone.</>, action: async () => { if (await withOk(() => deleteDatabase(db.name))) await refresh(); } })} className="glass-chip-btn-danger ml-auto">Drop</button>
             </div>
 
             {expanded === db.name && (
               <div className="mt-4 space-y-2.5">
                 <div className="flex gap-2">
                   <input className="glass-input max-w-xs !py-1.5 text-sm" placeholder="new collection" value={newColl[db.name] ?? ''} onChange={(e) => setNewColl({ ...newColl, [db.name]: e.target.value })} />
-                  <button onClick={() => doCreateColl(db.name)} className="glass-chip-btn">create</button>
+                  <button onClick={() => doCreateColl(db.name)} className="glass-chip-btn">Create</button>
                 </div>
                 {db.collections.length === 0 && <p className="text-sm text-slate-500">No collections.</p>}
                 {db.collections.map((c) => (
                   <div key={`${db.name}/${c.name}`} className="flex flex-wrap items-center gap-2 border-t border-white/[0.06] pt-2.5 text-sm">
                     <span className="font-mono text-slate-200">{c.name}</span>
                     <span className="text-xs text-slate-500">{c.count} docs</span>
-                    <button onClick={() => toggleDocs(db.name, c.name)} className="glass-chip-btn ml-auto">docs</button>
+                    <button onClick={() => toggleDocs(db.name, c.name)} className="glass-chip-btn ml-auto">Docs</button>
                     <input className="glass-input w-36 !py-1 text-xs" placeholder="rename to…" value={renames[`${db.name}/${c.name}`] ?? ''} onChange={(e) => setRenames({ ...renames, [`${db.name}/${c.name}`]: e.target.value })} />
-                    <button onClick={() => doRename(db.name, c.name)} className="glass-chip-btn">rename</button>
-                    <button onClick={() => setConfirm({ title: `Drop collection “${c.name}”?`, message: <>This will permanently delete the collection <strong>{db.name}/{c.name}</strong> and its {c.count} document{c.count === 1 ? '' : 's'}. This cannot be undone.</>, action: async () => { if (await withOk(() => dropCollection(db.name, c.name))) await refresh(); } })} className="glass-chip-btn-danger">drop</button>
+                    <button onClick={() => doRename(db.name, c.name)} className="glass-chip-btn">Rename</button>
+                    <button onClick={() => setConfirm({ title: `Drop collection “${c.name}”?`, message: <>This will permanently delete the collection <strong>{db.name}/{c.name}</strong> and its {c.count} document{c.count === 1 ? '' : 's'}. This cannot be undone.</>, action: async () => { if (await withOk(() => dropCollection(db.name, c.name))) await refresh(); } })} className="glass-chip-btn-danger">Drop</button>
                   </div>
                 ))}
               </div>
@@ -4130,6 +4260,119 @@ function Databases() {
   );
 }
 
+function Uploads() {
+  const [q, setQ] = useState('');
+  const [mime, setMime] = useState('');
+  const [page, setPage] = useState(1);
+  const [sort, setSort] = useState<'recent' | 'oldest' | 'size' | 'name'>('recent');
+  const [data, setData] = useState<UploadsResponse | null>(null);
+  const [stats, setStats] = useState<UploadStats | null>(null);
+  const [index, setIndex] = useState<UploadIndexStatus | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [msg, setMsg] = useAdminAlert('uploads');
+
+  const load = async (p = page) => {
+    setBusy(true);
+    try {
+      const res = await getUploads({ q: q.trim() || undefined, mime: mime.trim() || undefined, page: p, limit: 20, sort });
+      setData(res);
+      setPage(p);
+      if (!res.ok) setMsg(res.reason ?? 'Failed to load uploads');
+      else setMsg('');
+    } catch (e: any) {
+      setMsg(String(e?.message ?? e));
+    } finally {
+      setBusy(false);
+    }
+  };
+  const loadStats = async () => {
+    try {
+      setStats(await getUploadStats());
+      setIndex(await getUploadIndex());
+    } catch {}
+  };
+  useEffect(() => { load(1); loadStats(); }, []);
+  // Debounced search
+  useEffect(() => {
+    const t = setTimeout(() => { load(1); }, 300);
+    return () => clearTimeout(t);
+  }, [q, mime, sort]);
+
+  const rebuild = async () => {
+    setBusy(true);
+    setMsg('Rebuilding search index…');
+    try {
+      const res = await rebuildUploadIndex();
+      setMsg(res.ok ? 'Index rebuilt' : `Rebuild failed: ${res.reason ?? 'unknown'}`);
+      setIndex(await getUploadIndex());
+      await load(page);
+    } catch (e: any) {
+      setMsg(String(e?.message ?? e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <PageHead title="Uploads">
+        <button onClick={() => { load(page); loadStats(); }} className="glass-chip-btn"><Icon name="refresh" size={12} /> Refresh</button>
+        <button onClick={rebuild} disabled={busy} className="glass-chip-btn">{busy ? '…' : 'Rebuild index'}</button>
+      </PageHead>
+      <PageHero kicker="STORAGE" title={<>Uploads, <em>searchable.</em></>} desc="Single DB entry per sha256, placements per directory, symlink dedup — millions searchable via text index." glyph="image" art="cubes" />
+
+      {stats && (
+        <div className="grid grid-cols-1 gap-3 md:grid-cols-4">
+          <div className="glass-card"><div className="text-xs text-slate-500">Total uploads (unique sha256)</div><div className="text-2xl font-bold text-slate-100">{stats.total}</div></div>
+          <div className="glass-card"><div className="text-xs text-slate-500">Total bytes</div><div className="text-2xl font-bold text-slate-100">{(stats.totalSize / (1024 * 1024)).toFixed(2)} MB</div></div>
+          <div className="glass-card"><div className="text-xs text-slate-500">MIME breakdown</div><div className="text-xs text-slate-300">{stats.mimeBreakdown.slice(0, 3).map((m) => `${m._id}:${m.count}`).join(' · ') || '—'}</div></div>
+          <div className="glass-card"><div className="text-xs text-slate-500">Search index</div><div className={`text-xs ${index?.hasText ? 'text-emerald-400' : 'text-amber-400'}`}>{index?.hasText ? 'text index ✓' : 'no text index'} · {index?.indexes?.length ?? 0} indexes</div><div className="text-[0.6rem] text-slate-500">{index?.hasSha256 ? 'sha256 ✓' : 'sha256 —'}</div></div>
+        </div>
+      )}
+
+      <div className="glass-card flex flex-wrap gap-2">
+        <div className="flex items-center gap-2">
+          <Icon name="search" size={14} />
+          <input className="glass-input w-64" placeholder="search name, mime, sha256, dir" value={q} onChange={(e) => setQ(e.target.value)} />
+        </div>
+        <input className="glass-input w-32" placeholder="mime filter" value={mime} onChange={(e) => setMime(e.target.value)} />
+        <select className="glass-input w-32" value={sort} onChange={(e) => setSort(e.target.value as any)}>
+          <option value="recent">recent</option><option value="oldest">oldest</option><option value="size">size</option><option value="name">name</option>
+        </select>
+        <span className="text-xs text-slate-500">{data?.total ?? 0} total · page {data?.page ?? 1}/{data?.pages ?? 1}</span>
+      </div>
+
+      <div className="glass-card overflow-auto">
+        <table className="w-full text-left text-sm">
+          <thead className="text-xs text-slate-500"><tr><th className="p-2">Preview</th><th className="p-2">Name</th><th className="p-2">MIME</th><th className="p-2">Size</th><th className="p-2">Placements</th><th className="p-2">Variants</th><th className="p-2">Created</th></tr></thead>
+          <tbody>
+            {data?.uploads?.map((u) => (
+              <tr key={u.sha256} className="border-t border-white/5">
+                <td className="p-2">{u.mime.startsWith('image/') ? <img src={u.url} alt={u.originalName} className="h-10 w-10 rounded object-cover" onError={(e) => ((e.currentTarget.style.display = 'none'))} /> : <span className="text-xs text-slate-500">—</span>}</td>
+                <td className="p-2"><div className="font-mono text-xs text-slate-200">{u.originalName}</div><div className="text-[0.6rem] text-slate-500">{u.sha256.slice(0, 12)}…</div></td>
+                <td className="p-2 text-xs text-slate-400">{u.mime}</td>
+                <td className="p-2 text-xs text-slate-400">{(u.size / 1024).toFixed(1)} KB</td>
+                <td className="p-2 text-xs text-slate-400">{u.placementsCount} dirs<br /><span className="text-[0.6rem]">{u.placements?.slice(0, 2).map((p) => p.dir).join(', ')}</span></td>
+                <td className="p-2 text-xs text-slate-400">{u.variants ? Object.keys(u.variants).join(', ') : '—'}</td>
+                <td className="p-2 text-xs text-slate-500">{u.createdAt ? new Date(u.createdAt).toLocaleString() : '—'}</td>
+              </tr>
+            ))}
+            {data && data.uploads.length === 0 && <tr><td colSpan={7} className="p-4 text-center text-sm text-slate-500">No uploads match “{q}”</td></tr>}
+            {!data && <tr><td colSpan={7} className="p-4 text-center text-sm text-slate-500">Loading…</td></tr>}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <button disabled={page <= 1 || busy} onClick={() => load(page - 1)} className="glass-chip-btn">Prev</button>
+        <span className="text-xs text-slate-500">page {page} / {data?.pages ?? 1}</span>
+        <button disabled={data ? page >= (data.pages ?? 1) : true || busy} onClick={() => load(page + 1)} className="glass-chip-btn">Next</button>
+        <span className="ml-auto text-xs text-slate-500">Per-backend storage: apps/backend/storage, single DB entry per sha256, symlink across dirs.</span>
+      </div>
+    </div>
+  );
+}
+
 function Schema() {
   const [prompt, setPrompt] = useState('');
   const [databases, setDatabases] = useState<DatabaseInfo[]>([]);
@@ -4182,7 +4425,7 @@ function Schema() {
       <section className="glass-card space-y-3">
         <div className="flex items-center justify-between">
           <h3 className="glass-h3">AI provider status</h3>
-          <button onClick={checkAi} className="glass-chip-btn">re-check</button>
+          <button onClick={checkAi} className="glass-chip-btn">Re-check</button>
         </div>
         {aiErr && <p className="text-xs text-rose-400">{aiErr}</p>}
         <div className="grid grid-cols-1 gap-3 md:grid-cols-3">