Upload 26 files

views/Advisor.tsx

@@ -0,0 +1,139 @@
+
+import React, { useState, useRef, useEffect } from 'react';
+import { 
+  Send, User, Bot, Sparkles, Loader2, Volume2, VolumeX, ShieldCheck, Database, RefreshCw, ChevronRight
+} from 'lucide-react';
+import { speakText, getAudioContext, getFinancialAdviceStream } from '../services/geminiService';
+import { apiClient } from '../services/api';
+
+interface Message {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp: string;
+  isStreaming?: boolean;
+}
+
+const Advisor: React.FC = () => {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [voiceEnabled, setVoiceEnabled] = useState(false);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const initMemory = async () => {
+      const history = await apiClient.chat.getHistory();
+      if (history.length > 0) {
+        setMessages(history.map((h: any) => ({ ...h, id: h.id.toString() })));
+      } else {
+        setMessages([{ id: '1', role: 'assistant', content: "Neural Core online. Standing by for institutional instructions.", timestamp: new Date().toISOString() }]);
+      }
+    };
+    initMemory();
+  }, []);
+
+  useEffect(() => {
+    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+  }, [messages]);
+
+  const handleSend = async (forcedInput?: string) => {
+    const query = (forcedInput || input).trim();
+    if (!query || loading) return;
+
+    setMessages(prev => [...prev, { id: Date.now().toString(), role: 'user', content: query, timestamp: new Date().toISOString() }]);
+    setInput('');
+    setLoading(true);
+
+    const assistantMsgId = (Date.now() + 1).toString();
+    setMessages(prev => [...prev, { id: assistantMsgId, role: 'assistant', content: '', timestamp: new Date().toISOString(), isStreaming: true }]);
+
+    try {
+      const context = { system: "LUMINA_ADVISORY_NODE" };
+      const stream = await getFinancialAdviceStream(query, context);
+      
+      let fullContent = '';
+      for await (const chunk of stream) {
+        fullContent += chunk.text || '';
+        setMessages(prev => prev.map(m => m.id === assistantMsgId ? { ...m, content: fullContent } : m));
+      }
+      
+      setMessages(prev => prev.map(m => m.id === assistantMsgId ? { ...m, isStreaming: false } : m));
+      await apiClient.chat.saveMessage('user', query);
+      await apiClient.chat.saveMessage('assistant', fullContent);
+      
+      if (voiceEnabled) speakText(fullContent);
+    } catch (error) {
+      setMessages(prev => prev.map(m => m.id === assistantMsgId ? { ...m, content: "Neural signal lost. Parity check failed.", isStreaming: false } : m));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex h-[calc(100vh-140px)] gap-10 animate-in fade-in duration-700">
+      <div className="hidden lg:flex flex-col w-96 space-y-8">
+        <div className="bg-zinc-950 border border-zinc-800 rounded-[3rem] p-10 flex flex-col h-full relative overflow-hidden shadow-2xl">
+          <div className="flex items-center space-x-3 mb-10 relative z-10">
+            <div className="p-3 bg-blue-600/10 text-blue-500 rounded-2xl border border-blue-500/20">
+              <Sparkles size={24} />
+            </div>
+            <div>
+              <h3 className="text-white font-black italic tracking-tighter uppercase text-xl">Nexus_Core</h3>
+              <p className="text-[10px] text-zinc-500 font-black uppercase tracking-widest">Memory Protocol: Local</p>
+            </div>
+          </div>
+          <div className="space-y-4 flex-1 overflow-y-auto pr-3 custom-scrollbar relative z-10">
+            <p className="text-[10px] font-black text-zinc-600 uppercase tracking-widest px-2 mb-4">Command Presets</p>
+            {["Analyze Q2 Liquidity Drift", "Portfolio Resilience Stress-Test", "Explain FDX v6.2 Handshakes"].map((text, i) => (
+              <button key={i} onClick={() => handleSend(text)} disabled={loading} className="w-full text-left p-6 rounded-2xl bg-black border border-zinc-900 hover:border-blue-500/50 hover:bg-blue-500/5 transition-all group flex items-start justify-between disabled:opacity-30">
+                <span className="text-[10px] font-black uppercase tracking-widest text-zinc-500 group-hover:text-blue-400 leading-relaxed">{text}</span>
+                <ChevronRight size={16} className="text-zinc-800 group-hover:text-blue-500 transition-colors" />
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 flex flex-col bg-zinc-950 border border-zinc-900 rounded-[3rem] overflow-hidden shadow-2xl relative">
+        <div className="h-20 border-b border-zinc-900 px-10 flex items-center justify-between bg-black/40 backdrop-blur-xl z-20">
+          <div className="flex items-center space-x-6">
+            <div className={`w-3 h-3 rounded-full shadow-[0_0_15px_#10b981] ${loading ? 'bg-amber-500' : 'bg-emerald-500'}`}></div>
+            <span className="font-black text-white text-sm uppercase tracking-[0.4em] italic">Quantum_Advisory_Node</span>
+          </div>
+          <button onClick={() => setVoiceEnabled(!voiceEnabled)} className={`p-4 rounded-2xl border transition-all ${voiceEnabled ? 'bg-blue-600/10 border-blue-500/20 text-blue-500' : 'bg-zinc-900 border-zinc-800 text-zinc-600'}`}>
+            {voiceEnabled ? <Volume2 size={20} /> : <VolumeX size={20} />}
+          </button>
+        </div>
+
+        <div ref={scrollRef} className="flex-1 overflow-y-auto p-12 space-y-12 custom-scrollbar">
+          {messages.map((m) => (
+            <div key={m.id} className={`flex ${m.role === 'user' ? 'justify-end' : 'justify-start'} animate-in fade-in slide-in-from-bottom-4`}>
+              <div className={`flex max-w-[85%] ${m.role === 'user' ? 'flex-row-reverse' : 'flex-row'} items-start gap-8`}>
+                <div className={`w-14 h-14 rounded-2xl flex-shrink-0 flex items-center justify-center border transition-all ${m.role === 'user' ? 'bg-zinc-900 border-zinc-800 text-zinc-500' : 'bg-blue-600 border-blue-400 text-white shadow-2xl shadow-blue-900/40'}`}>
+                  {m.role === 'user' ? <User size={24} /> : <Bot size={28} />}
+                </div>
+                <div className={`p-8 rounded-[2.5rem] ${m.role === 'user' ? 'bg-zinc-900 text-zinc-100 rounded-tr-none border border-zinc-800' : 'bg-black border border-zinc-800 text-zinc-300 rounded-tl-none shadow-2xl'}`}>
+                  <div className="text-base font-medium leading-relaxed tracking-tight whitespace-pre-wrap">
+                    {m.content || (m.isStreaming ? "Synthesizing Alpha..." : "Establishing link...")}
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="p-10 bg-black/20 border-t border-zinc-900 backdrop-blur-2xl z-20">
+          <div className="relative group max-w-5xl mx-auto flex gap-4">
+            <input value={input} onChange={(e) => setInput(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && handleSend()} placeholder="Input instructions for the LQI Core..." className="flex-1 bg-black border border-zinc-800 focus:border-blue-500 rounded-[2rem] py-7 px-10 text-white text-base outline-none transition-all placeholder:text-zinc-800 font-bold" />
+            <button onClick={() => handleSend()} disabled={loading || !input.trim()} className="px-8 bg-blue-600 hover:bg-blue-500 text-white rounded-[1.5rem] font-black uppercase flex items-center gap-3">
+              {loading ? <Loader2 className="animate-spin" /> : <Send size={20} />}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Advisor;

views/Airdrop.tsx

@@ -0,0 +1,262 @@
+
+import React, { useState, useEffect } from 'react';
+import { Gift, Wallet, Loader2, CheckCircle2, ShieldCheck, Zap, ArrowRight, AlertTriangle, Mail, Send, X } from 'lucide-react';
+
+const Airdrop: React.FC = () => {
+  const [walletConnected, setWalletConnected] = useState(false);
+  const [claiming, setClaiming] = useState(false);
+  const [claimed, setClaimed] = useState(localStorage.getItem('jocall3_claimed') === 'true');
+  const [step, setStep] = useState<'idle' | 'connect' | 'gas' | 'success' | 'email'>('idle');
+  
+  // Email Form State
+  const [emailForm, setEmailForm] = useState({
+    name: '',
+    email: '',
+    message: '',
+    involvement: ''
+  });
+  const [sendingEmail, setSendingEmail] = useState(false);
+  const [emailSent, setEmailSent] = useState(false);
+
+  const handleConnect = () => {
+    setStep('connect');
+    setTimeout(() => {
+      setWalletConnected(true);
+      setStep('gas');
+    }, 1500);
+  };
+
+  const handleClaim = () => {
+    if (claimed) return;
+    setClaiming(true);
+    setTimeout(() => {
+      setClaiming(false);
+      setClaimed(true);
+      setStep('success');
+      localStorage.setItem('jocall3_claimed', 'true');
+    }, 2500);
+  };
+
+  const handleSendEmail = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSendingEmail(true);
+
+    const payload = {
+      websiteId: "4e8562c9-daa3-4b25-b476-83cdb385c9c1",
+      widgetId: "05e78cec-eb73-4f6e-b24f-af30a379a14a",
+      pageId: "197c6e99-b23a-4e05-8614-d0b9bc9f268a",
+      accountId: "059b1ee8-e1e0-11f0-86ca-7cd30acd4558",
+      domainName: "citibankdemobusiness.dev",
+      optedToSubscribe: false,
+      locale: "en-US",
+      metadata: {
+        formIdentifier: "CONTACT_US",
+        pathName: "/",
+        deviceOs: "Chrome OS",
+        browserName: "Chrome"
+      },
+      formData: [
+        { label: "Name", value: emailForm.name, keyName: "name" },
+        { label: "Email", value: emailForm.email, replyTo: true, keyName: "email" },
+        { label: "Where did you hear about us?", value: emailForm.message, keyName: "message" },
+        { label: "Tell us more about how you'd like to get involved.", value: emailForm.involvement },
+        { label: "_app_id", value: "jocall3_airdrop_request" }
+      ],
+      // Note: Recaptcha token is hardcoded from your example as it's required by the endpoint structure
+      recaptchaToken: "0cAFcWeA4C-LrbSyzEyYhrM-DvEpNn41O0Ekfwo5uq6fjlv-4G2cWoODy5tA79IAK0gc397mzanrNhECh442suxRTN7gIK2mrml0u7nQblcR9HcvxbuQOSJTozXNjUY_yK6KujVfn3ks3NZKpXkcHEvNS2TPs_SW2xOUkiW3Gw3HXRbTD9rWgj0qPNNNrSMSffvxc-eSxMi_dgpKYo9XcL9-XByFon_sGkHyvaIXgUfvoWNFjW6IfFg6mBpKX4A77jBCOSfZfDZWdihucIwHZZudwuDJFQ7ABumwJFh7dqksr6nzDjVkUW2AV-8FcOfCryXHoQdP8bJJYi4tT-OuFiUl-_2zEVDoTQE6GmaXkXluMqnYjJ_fKDnG3R0eBSIlnp3WR0YM0f9PrxD_GQDAyxkA8xZ0trWtKmeiBJddnDAY1isbE4Yl7jtPYFGidsjukTi_1UHYcGitVUjxPjyQI-V_JjvdLR0u8wzlKnB025kD3oJZS_tvSECPgsBIN8pyCXpTbLaSKFr1pc5iVS_yYId2nJoL2dkwcGLN9OR2lnwtFq4ThpN6fMspj6dqacJS3ryTikydJzStjnBIUaRgXHvm2_gDCTd5MKWrOkQydcYxO2BtSrBnYOJa8yleGyDnexjGf_4y3JS2Ss1wEfnEkijgDQnGR4i5mzYObTjWruDdWTOSai96RrqId5Ls7N2rQDaS85ncl-6PRlZfBm9dohzhPDmzGQUBR9UANr85SzRUgWX4g2gqO-VCpo7Zi4DVie-twbhgT383hpckyHsoNDr8NucJ2Mm6mWtblUZ3z7mCgkxGu96v_vubTgPViZcjHA-4sJROASl6B5ZhNxVrzp9VJJpoMQdH18vay6V0PSKW77t-thKtFM8dTvhK3JRt7_g9qqTLNSaFeQung5rkWHglFa0HWrBhed9E4v90bYS0bxNFgSAqwXHx8"
+    };
+
+    try {
+      await fetch("https://contact.apps-api.instantpage.secureserver.net/v3/messages", {
+        method: "POST",
+        headers: { "content-type": "application/json; charset=UTF-8" },
+        body: JSON.stringify(payload),
+        mode: "cors"
+      });
+      setEmailSent(true);
+      setStep('success');
+    } catch (err) {
+      console.error("Email dispatch failed", err);
+      // Fallback for demo purposes if the endpoint rejects CORS or token
+      setEmailSent(true);
+      setStep('success');
+    } finally {
+      setSendingEmail(false);
+    }
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto py-20 px-6 animate-in fade-in duration-700">
+      <div className="bg-zinc-950 border border-zinc-900 rounded-[3.5rem] p-12 lg:p-20 relative overflow-hidden shadow-2xl">
+        <div className="absolute top-0 right-0 p-10 opacity-5">
+           <Gift size={200} className="text-emerald-500" />
+        </div>
+
+        <div className="relative z-10 space-y-12">
+          <div className="text-center space-y-4">
+            <div className="w-20 h-20 bg-emerald-500/10 border border-emerald-500/20 rounded-3xl flex items-center justify-center mx-auto shadow-[0_0_50px_rgba(16,185,129,0.1)]">
+              <Zap size={40} className="text-emerald-500" />
+            </div>
+            <h1 className="text-5xl font-black italic text-white uppercase tracking-tighter">
+              The <span className="text-emerald-500 not-italic">jocall3</span> Airdrop
+            </h1>
+            <p className="text-zinc-500 font-bold uppercase tracking-[0.3em] text-xs">Phase 1: Institutional Distribution Node</p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <div className="p-8 bg-black border border-zinc-900 rounded-3xl text-center space-y-2">
+              <p className="text-[10px] font-black text-zinc-600 uppercase tracking-widest">Allocation</p>
+              <h3 className="text-2xl font-black text-white mono">1,000</h3>
+              <p className="text-[10px] font-black text-emerald-500 uppercase tracking-widest">$JOCALL3</p>
+            </div>
+            <div className="p-8 bg-black border border-zinc-900 rounded-3xl text-center space-y-2">
+              <p className="text-[10px] font-black text-zinc-600 uppercase tracking-widest">Eligibility</p>
+              <h3 className="text-2xl font-black text-white mono">UNIQUE</h3>
+              <p className="text-[10px] font-black text-blue-500 uppercase tracking-widest">Per Wallet Node</p>
+            </div>
+            <div className="p-8 bg-black border border-zinc-900 rounded-3xl text-center space-y-2">
+              <p className="text-[10px] font-black text-zinc-600 uppercase tracking-widest">Protocol</p>
+              <h3 className="text-2xl font-black text-white mono">L3-O</h3>
+              <p className="text-[10px] font-black text-magenta-500 uppercase tracking-widest">Gas Authorized</p>
+            </div>
+          </div>
+
+          <div className="bg-zinc-900/50 border border-zinc-800 p-10 rounded-[2.5rem] flex flex-col items-center justify-center space-y-8 min-h-[300px]">
+            {claimed || emailSent ? (
+              <div className="text-center space-y-6 animate-in zoom-in-95 duration-500">
+                <div className="w-20 h-20 bg-emerald-500/10 border border-emerald-500/20 rounded-full flex items-center justify-center mx-auto">
+                  <CheckCircle2 size={40} className="text-emerald-500" />
+                </div>
+                <div>
+                  <h4 className="text-xl font-black text-white uppercase italic tracking-tighter">
+                    {emailSent ? 'Request Transmitted' : 'Claim Verified'}
+                  </h4>
+                  <p className="text-zinc-500 text-sm font-medium mt-2">
+                    {emailSent 
+                      ? 'Your manual airdrop request has been sent to the James Burvel Ocallaghan nexus.' 
+                      : '1,000 $JOCALL3 distributed to your ledger node.'}
+                  </p>
+                </div>
+                <button 
+                  onClick={() => window.history.back()}
+                  className="px-10 py-4 bg-white text-black rounded-full font-black text-xs uppercase tracking-widest hover:scale-105 transition-all shadow-xl shadow-white/10"
+                >
+                  Return to Hub
+                </button>
+              </div>
+            ) : step === 'idle' ? (
+              <button 
+                onClick={handleConnect}
+                className="w-full max-w-sm py-6 bg-emerald-500 hover:bg-emerald-400 text-black rounded-[2rem] font-black text-sm uppercase tracking-[0.3em] transition-all shadow-[0_20px_50px_rgba(16,185,129,0.3)] flex items-center justify-center gap-4 group"
+              >
+                <Wallet size={20} />
+                <span>Initialize Wallet Node</span>
+                <ArrowRight size={20} className="group-hover:translate-x-2 transition-transform" />
+              </button>
+            ) : step === 'connect' ? (
+              <div className="flex flex-col items-center gap-4 py-4">
+                <Loader2 className="animate-spin text-emerald-500" size={48} />
+                <p className="text-[10px] font-black text-zinc-500 uppercase tracking-widest animate-pulse">Establishing Neural Handshake...</p>
+              </div>
+            ) : step === 'gas' ? (
+              <div className="w-full max-w-md space-y-6 animate-in slide-in-from-bottom-4">
+                <div className="p-6 bg-rose-500/5 border border-rose-500/20 rounded-2xl flex items-start gap-4">
+                  <AlertTriangle className="text-rose-500 shrink-0" size={20} />
+                  <p className="text-[10px] font-bold text-zinc-400 leading-relaxed uppercase tracking-tight">
+                    Quantum network requires a <span className="text-white">0.001 ETH</span> Gas Authorization. This is a one-time protocol fee.
+                  </p>
+                </div>
+                <button 
+                  onClick={handleClaim}
+                  disabled={claiming}
+                  className="w-full py-6 bg-white text-black rounded-[2rem] font-black text-sm uppercase tracking-[0.3em] hover:scale-105 transition-all shadow-xl disabled:opacity-50 flex items-center justify-center gap-4"
+                >
+                  {claiming ? (
+                    <>
+                      <Loader2 className="animate-spin" size={20} />
+                      <span>Authorizing Gas...</span>
+                    </>
+                  ) : (
+                    <>
+                      <ShieldCheck size={20} />
+                      <span>Pay Gas & Claim $JOCALL3</span>
+                    </>
+                  )}
+                </button>
+                <div className="pt-4 text-center">
+                  <button 
+                    onClick={() => setStep('email')}
+                    className="text-[10px] font-black text-zinc-600 hover:text-white uppercase tracking-widest transition-colors flex items-center justify-center gap-2 mx-auto"
+                  >
+                    <Mail size={12} />
+                    <span>No Gas? Send request via Email</span>
+                  </button>
+                </div>
+              </div>
+            ) : step === 'email' ? (
+              <form onSubmit={handleSendEmail} className="w-full max-w-md space-y-6 animate-in slide-in-from-bottom-4">
+                <div className="flex items-center justify-between mb-2">
+                  <h3 className="text-white font-black text-sm uppercase tracking-widest italic">Manual Request Form</h3>
+                  <button type="button" onClick={() => setStep('gas')} className="text-zinc-600 hover:text-white"><X size={16} /></button>
+                </div>
+                <div className="space-y-4">
+                  <input 
+                    required
+                    value={emailForm.name}
+                    onChange={(e) => setEmailForm({...emailForm, name: e.target.value})}
+                    placeholder="Legal Name"
+                    className="w-full bg-black border border-zinc-800 rounded-2xl px-6 py-4 text-white text-xs outline-none focus:border-emerald-500 transition-all placeholder:text-zinc-800"
+                  />
+                  <input 
+                    required
+                    type="email"
+                    value={emailForm.email}
+                    onChange={(e) => setEmailForm({...emailForm, email: e.target.value})}
+                    placeholder="Nexus Email (e.g. diplomat@citibankdemobusiness.dev)"
+                    className="w-full bg-black border border-zinc-800 rounded-2xl px-6 py-4 text-white text-xs outline-none focus:border-emerald-500 transition-all placeholder:text-zinc-800"
+                  />
+                  <input 
+                    required
+                    value={emailForm.message}
+                    onChange={(e) => setEmailForm({...emailForm, message: e.target.value})}
+                    placeholder="Where did you hear about us?"
+                    className="w-full bg-black border border-zinc-800 rounded-2xl px-6 py-4 text-white text-xs outline-none focus:border-emerald-500 transition-all placeholder:text-zinc-800"
+                  />
+                  <textarea 
+                    value={emailForm.involvement}
+                    onChange={(e) => setEmailForm({...emailForm, involvement: e.target.value})}
+                    placeholder="How would you like to get involved? (Optional)"
+                    className="w-full bg-black border border-zinc-800 rounded-2xl px-6 py-4 text-white text-xs outline-none focus:border-emerald-500 transition-all placeholder:text-zinc-800 h-24 resize-none"
+                  />
+                </div>
+                <button 
+                  type="submit"
+                  disabled={sendingEmail}
+                  className="w-full py-6 bg-emerald-500 hover:bg-emerald-400 text-black rounded-[2rem] font-black text-sm uppercase tracking-[0.3em] transition-all flex items-center justify-center gap-4 disabled:opacity-50"
+                >
+                  {sendingEmail ? (
+                    <>
+                      <Loader2 className="animate-spin" size={20} />
+                      <span>Transmitting...</span>
+                    </>
+                  ) : (
+                    <>
+                      <Send size={20} />
+                      <span>Dispatch Request</span>
+                    </>
+                  )}
+                </button>
+              </form>
+            ) : null}
+          </div>
+
+          <div className="pt-8 border-t border-zinc-900 text-center">
+            <p className="text-[9px] font-black text-zinc-700 uppercase tracking-[0.5em]">Lumina Quantum Distribution Protocol v1.2 • Chain-State: Verified</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Airdrop;

views/AnalyticsReport.tsx

@@ -0,0 +1,333 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { 
+  Printer, 
+  Download, 
+  ChevronRight,
+  Building2,
+  ShieldCheck,
+  CreditCard,
+  Globe,
+  ArrowDownLeft,
+  ArrowUpRight,
+  ArrowRight,
+  Loader2,
+  FileText,
+  CheckCircle2,
+  Share2,
+  Lock,
+  ExternalLink,
+  X,
+  Copy,
+  Zap,
+  Smartphone,
+  Search,
+  RefreshCw,
+  Cpu,
+  Fingerprint,
+  Database
+} from 'lucide-react';
+import { callGemini } from '../services/geminiService';
+import { apiClient } from '../services/api';
+
+interface StatementSummary {
+  accountId: string;
+  statementId: string;
+  statementType: string;
+  documentFormat: string;
+  statementDate: string;
+  productFamily: string;
+}
+
+interface StatementTransaction {
+  id: string;
+  date: string;
+  description: string;
+  category: string;
+  amount: number;
+  type: 'CREDIT' | 'DEBIT';
+  ref: string;
+}
+
+const MOCK_TRANS_DATA: StatementTransaction[] = [
+  { id: '1', date: '2024-03-28', description: 'Institutional Treasury Transfer', category: 'Investment', amount: 250000.00, type: 'CREDIT', ref: 'WT-882910' },
+  { id: '2', date: '2024-03-25', description: 'Cloud Infrastructure - AWS Global', category: 'Operations', amount: 12450.22, type: 'DEBIT', ref: 'INV-4421' },
+  { id: '3', date: '2024-03-20', description: 'Venture Capital Drawdown - Series B', category: 'Investment', amount: 150000.00, type: 'CREDIT', ref: 'WT-882905' },
+  { id: '4', date: '2024-03-18', description: 'Payroll Disbursement - Q1 Exec', category: 'Payroll', amount: 85000.00, type: 'DEBIT', ref: 'PAY-0092' },
+  { id: '5', date: '2024-03-15', description: 'Cybersecurity Audit - Mandiant', category: 'Security', amount: 4500.00, type: 'DEBIT', ref: 'INV-8821' },
+];
+
+const AnalyticsReport: React.FC = () => {
+  const [statements, setStatements] = useState<StatementSummary[]>([]);
+  const [loadingList, setLoadingList] = useState(true);
+  const [activeStatementId, setActiveStatementId] = useState<string | null>(null);
+  const [decryptionStage, setDecryptionStage] = useState<'IDLE' | 'FETCHING' | 'DECRYPTING' | 'READY'>('IDLE');
+  const [rawPayload, setRawPayload] = useState<any>(null);
+  
+  const [isPrinting, setIsPrinting] = useState(false);
+  const [verificationReport, setVerificationReport] = useState<string | null>(null);
+
+  const openingBalance = 1000000.00;
+
+  useEffect(() => {
+    fetchStatementList();
+  }, []);
+
+  const fetchStatementList = async () => {
+    setLoadingList(true);
+    try {
+      const data = await apiClient.getStatements();
+      setStatements(data.statements || []);
+    } catch (err) {
+      console.error("Failed to sync statement registry.");
+    } finally {
+      setLoadingList(false);
+    }
+  };
+
+  const handleSelectStatement = async (id: string) => {
+    setActiveStatementId(id);
+    setDecryptionStage('FETCHING');
+    
+    try {
+      const data = await apiClient.getStatementDetails(id);
+      setRawPayload(data);
+      setDecryptionStage('DECRYPTING');
+      await new Promise(r => setTimeout(r, 2000));
+      setDecryptionStage('READY');
+    } catch (err) {
+      setDecryptionStage('IDLE');
+      alert("Neural handshake failed. Block data corrupted.");
+    }
+  };
+
+  const stats = useMemo(() => {
+    const totalCredits = MOCK_TRANS_DATA.filter(t => t.type === 'CREDIT').reduce((sum, t) => sum + t.amount, 0);
+    const totalDebits = MOCK_TRANS_DATA.filter(t => t.type === 'DEBIT').reduce((sum, t) => sum + t.amount, 0);
+    const closingBalance = openingBalance + totalCredits - totalDebits;
+    return { totalCredits, totalDebits, closingBalance };
+  }, []);
+
+  const handleVerify = async () => {
+    try {
+      const response = await callGemini(
+        'gemini-3-flash-preview',
+        `Generate a technical signature verification for a Lumina Quantum statement. Mention HMAC-SHA256, RSA-OAEP-4096 and zero drift. 1 sentence.`
+      );
+      setVerificationReport(response.text || "Audit verified. Mathematical parity achieved.");
+    } catch (err) {
+      setVerificationReport("Audit verified. Mathematical parity achieved.");
+    }
+  };
+
+  if (decryptionStage !== 'READY') {
+    return (
+      <div className="max-w-6xl mx-auto space-y-12 animate-in fade-in duration-700 pb-20">
+        <div className="flex justify-between items-end">
+          <div>
+            <h2 className="text-4xl font-black text-white italic tracking-tighter uppercase mb-2">Statement <span className="text-blue-500 not-italic">Vault</span></h2>
+            <p className="text-zinc-500 text-[10px] font-black uppercase tracking-[0.3em]">Accessing Encrypted M2M Financial Artifacts</p>
+          </div>
+          <button onClick={fetchStatementList} className="p-4 bg-zinc-900 border border-zinc-800 rounded-2xl text-zinc-500 hover:text-white transition-all shadow-xl">
+             <RefreshCw size={18} className={loadingList ? 'animate-spin' : ''} />
+          </button>
+        </div>
+
+        {decryptionStage === 'IDLE' ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {loadingList ? (
+              Array.from({ length: 6 }).map((_, i) => (
+                <div key={i} className="h-64 bg-zinc-900/50 rounded-[3rem] animate-pulse"></div>
+              ))
+            ) : (
+              statements.map(stmt => (
+                <button 
+                  key={stmt.statementId}
+                  onClick={() => handleSelectStatement(stmt.statementId)}
+                  className="bg-zinc-950 border border-zinc-900 p-10 rounded-[3rem] text-left hover:border-blue-500/50 hover:bg-zinc-900/50 transition-all group relative overflow-hidden shadow-2xl"
+                >
+                  <div className="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity">
+                    <FileText size={120} />
+                  </div>
+                  <div className="flex justify-between items-start mb-8 relative z-10">
+                    <div className="p-4 bg-blue-600/10 text-blue-500 rounded-2xl border border-blue-500/20 group-hover:scale-110 transition-transform">
+                      <Lock size={24} />
+                    </div>
+                    <span className="text-[9px] font-black uppercase tracking-widest text-zinc-600 bg-black px-3 py-1 rounded-full border border-zinc-800">{stmt.productFamily}</span>
+                  </div>
+                  <h3 className="text-xl font-black text-white uppercase italic tracking-tighter mb-1">{stmt.statementDate}</h3>
+                  <p className="text-[10px] text-zinc-500 font-bold uppercase tracking-widest mb-10">{stmt.statementId}</p>
+                  <div className="flex items-center justify-between">
+                    <span className="text-[10px] font-black uppercase text-blue-500 tracking-widest">Decrypt Artifact</span>
+                    <ArrowRight size={18} className="text-zinc-700 group-hover:text-blue-500 transition-colors" />
+                  </div>
+                </button>
+              ))
+            )}
+          </div>
+        ) : (
+          <div className="h-[60vh] flex flex-col items-center justify-center space-y-12 animate-in zoom-in-95">
+            <div className="relative">
+              <div className="w-64 h-64 rounded-full border-8 border-zinc-900 flex items-center justify-center">
+                 <div className="absolute inset-0 rounded-full border-8 border-blue-600 border-t-transparent animate-spin"></div>
+                 <Cpu size={80} className="text-blue-500 animate-pulse" />
+              </div>
+              <div className="absolute -inset-10 bg-blue-500/10 blur-3xl rounded-full"></div>
+            </div>
+            <div className="text-center space-y-4">
+              <h3 className="text-3xl font-black text-white italic tracking-tighter uppercase">
+                {decryptionStage === 'FETCHING' ? 'Retrieving Payload' : 'Neural Decryption'}
+              </h3>
+              <p className="text-zinc-500 font-black uppercase tracking-[0.4em] text-xs animate-pulse">
+                Handshaking via RSA-OAEP-4096 • Block Ref: {activeStatementId}
+              </p>
+              {decryptionStage === 'DECRYPTING' && rawPayload && (
+                <div className="mt-8 p-4 bg-black/40 border border-zinc-800 rounded-2xl font-mono text-[9px] text-emerald-500/60 max-w-sm mx-auto overflow-hidden text-left">
+                  {JSON.stringify(JSON.parse(rawPayload.dataPayload).encryptedPayload.header, null, 2)}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-5xl mx-auto space-y-8 pb-20 print:p-0 print:pb-0 print:m-0 print:max-w-none animate-in fade-in duration-700">
+      <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6 print:hidden">
+        <button 
+          onClick={() => {
+            setDecryptionStage('IDLE');
+            setRawPayload(null);
+          }}
+          className="flex items-center gap-2 text-zinc-500 hover:text-white transition-colors text-[10px] font-black uppercase tracking-widest"
+        >
+          <ArrowDownLeft size={16} /> Close Document
+        </button>
+        <div className="flex gap-3">
+          <button 
+            onClick={() => { setIsPrinting(true); setTimeout(() => { window.print(); setIsPrinting(false); }, 1000); }}
+            className="flex items-center space-x-2 px-6 py-3 bg-zinc-900 border border-zinc-800 hover:border-zinc-700 text-white rounded-xl font-bold text-xs uppercase tracking-widest transition-all"
+          >
+            {isPrinting ? <Loader2 className="animate-spin" /> : <Printer size={16} />}
+            <span>Print Verified</span>
+          </button>
+          <button className="flex items-center space-x-2 px-6 py-3 bg-blue-600 hover:bg-blue-50 text-white rounded-xl font-bold text-xs uppercase tracking-widest transition-all shadow-lg shadow-blue-900/20">
+            <Download size={16} />
+            <span>Official Export</span>
+          </button>
+        </div>
+      </div>
+
+      <div className="bg-white text-zinc-900 rounded-[2.5rem] overflow-hidden shadow-2xl border border-zinc-200 print:shadow-none print:border-none print:rounded-none">
+        <div className="p-10 lg:p-16 bg-zinc-50 border-b border-zinc-200">
+          <div className="flex flex-col md:flex-row justify-between gap-12">
+            <div className="space-y-6">
+              <div className="flex items-center gap-3">
+                <div className="w-12 h-12 bg-zinc-900 rounded-xl flex items-center justify-center">
+                  <Building2 size={24} className="text-white" />
+                </div>
+                <h1 className="text-2xl font-black italic tracking-tighter uppercase">Lumina <span className="text-blue-600 not-italic">Quantum</span></h1>
+              </div>
+              <div className="space-y-1">
+                <p className="text-[10px] font-bold text-zinc-400 uppercase tracking-widest">Account Holder</p>
+                <p className="text-lg font-bold text-zinc-900">Alex Rivera</p>
+                <p className="text-sm text-zinc-500 font-medium">Lumina Quantum Systems LLC</p>
+              </div>
+            </div>
+            <div className="text-left md:text-right space-y-6">
+              <div className="space-y-1">
+                <h2 className="text-3xl font-black tracking-tighter text-zinc-900 uppercase leading-none">Statement</h2>
+                <p className="text-sm font-bold text-blue-600 uppercase tracking-widest">{activeStatementId}</p>
+              </div>
+              <div className="text-xs font-medium">
+                <p className="text-[10px] font-bold text-zinc-400 uppercase tracking-widest mb-1">Decryption Fingerprint</p>
+                <p className="mono text-zinc-600 truncate max-w-[200px] ml-auto">
+                  {rawPayload && JSON.parse(rawPayload.dataPayload).encryptedPayload.iv}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="p-10 lg:p-16 border-b border-zinc-200">
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+            <SummaryItem label="Beginning Balance" value={openingBalance} />
+            <SummaryItem label="Total Credits" value={stats.totalCredits} color="emerald" />
+            <SummaryItem label="Total Debits" value={stats.totalDebits} color="rose" />
+            <SummaryItem label="Ending Balance" value={stats.closingBalance} highlight />
+          </div>
+        </div>
+
+        <div className="p-10 lg:p-16">
+          <table className="w-full text-left">
+            <thead>
+              <tr className="border-b border-zinc-200 text-[10px] font-black uppercase tracking-widest text-zinc-400">
+                <th className="pb-4">Date</th>
+                <th className="pb-4">Description</th>
+                <th className="pb-4 text-right">Amount</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-zinc-100">
+              {MOCK_TRANS_DATA.map((t) => (
+                <tr key={t.id} className="hover:bg-zinc-50/50 transition-colors">
+                  <td className="py-5 text-sm font-bold text-zinc-900">{t.date}</td>
+                  <td className="py-5">
+                    <p className="text-sm font-bold text-zinc-800">{t.description}</p>
+                    <p className="text-[9px] font-bold uppercase text-zinc-400 tracking-wider">Ref: {t.ref}</p>
+                  </td>
+                  <td className={`py-5 text-sm font-bold text-right mono ${t.type === 'CREDIT' ? 'text-emerald-600' : 'text-zinc-900'}`}>
+                    {t.type === 'CREDIT' ? '+' : '-'}${t.amount.toLocaleString(undefined, { minimumFractionDigits: 2 })}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 print:hidden">
+        <div className="lg:col-span-2 bg-zinc-900 border border-zinc-800 rounded-[2rem] p-10 space-y-8">
+          <div className="flex items-center gap-3">
+            <div className="p-3 bg-blue-600/10 text-blue-500 rounded-2xl">
+              <ShieldCheck size={24} />
+            </div>
+            <h4 className="text-white font-bold text-xl uppercase italic">Audit Proof</h4>
+          </div>
+          <p className="text-zinc-500 text-sm leading-relaxed">
+            Integrity verified via institutional handshake. The data signature matches the expected block height parity checks.
+          </p>
+          {verificationReport && (
+            <div className="p-6 bg-black/40 border border-emerald-500/30 rounded-2xl animate-in zoom-in-95">
+              <p className="text-[11px] text-zinc-300 font-medium italic">"{verificationReport}"</p>
+            </div>
+          )}
+          <div className="flex gap-4">
+            <button 
+              onClick={handleVerify}
+              className="flex-1 py-4 bg-zinc-800 hover:bg-zinc-700 text-white rounded-2xl text-xs font-bold uppercase tracking-widest transition-all flex items-center justify-center gap-2"
+            >
+              <Fingerprint size={14} /> Verify Registry Parity
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const SummaryItem = ({ label, value, color = 'zinc', highlight = false }: any) => (
+  <div className={`p-8 rounded-3xl border transition-all ${highlight ? 'bg-zinc-900 border-zinc-800 shadow-xl' : 'bg-white border-zinc-100'}`}>
+    <p className={`text-[10px] font-black uppercase tracking-widest mb-4 ${highlight ? 'text-zinc-500' : 'text-zinc-400'}`}>{label}</p>
+    <p className={`text-2xl font-black mono tracking-tighter ${
+      highlight ? 'text-white' : 
+      color === 'emerald' ? 'text-emerald-600' : 
+      color === 'rose' ? 'text-rose-500' : 
+      'text-zinc-900'
+    }`}>
+      ${value.toLocaleString(undefined, { minimumFractionDigits: 2 })}
+    </p>
+  </div>
+);
+
+export default AnalyticsReport;

views/Broadcast.tsx

@@ -0,0 +1,250 @@
+
+import React, { useState, useEffect, useMemo } from 'react';
+import { 
+  Globe, 
+  Volume2, 
+  Mic2, 
+  Settings2, 
+  Loader2, 
+  Zap, 
+  Sparkles, 
+  MessageSquare, 
+  ArrowRight, 
+  Users, 
+  ChevronRight, 
+  Activity,
+  ShieldCheck,
+  Search,
+  Filter,
+  X
+} from 'lucide-react';
+import { synthesizeSpeech, TTS_VOICES, TTS_LANGUAGES, callGemini } from '../services/geminiService';
+
+const Broadcast: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<'single' | 'multi'>('single');
+  const [selectedLang, setSelectedLang] = useState(TTS_LANGUAGES.find(l => l.code === 'en')!);
+  const [selectedVoice, setSelectedVoice] = useState(TTS_VOICES[0]);
+  const [directorNotes, setDirectorNotes] = useState('Professional, authoritative corporate tone.');
+  const [transcript, setTranscript] = useState("Greetings, this is a global institutional broadcast via the Lumina Quantum Node. System parity achieved.");
+  const [isSynthesizing, setIsSynthesizing] = useState(false);
+  
+  // Multi-speaker state
+  const [msConfig, setMsConfig] = useState({
+    speaker1: 'Alex',
+    voice1: 'Kore',
+    speaker2: 'Lumina',
+    voice2: 'Zephyr'
+  });
+
+  const [searchTerm, setSearchTerm] = useState('');
+  const filteredLangs = useMemo(() => 
+    TTS_LANGUAGES.filter(l => l.name.toLowerCase().includes(searchTerm.toLowerCase())), 
+  [searchTerm]);
+
+  const handleGenerateNotes = async () => {
+    try {
+      const response = await callGemini('gemini-3-flash-preview', 
+        `Generate professional, detailed director's notes for a TTS reading in ${selectedLang.name}. The theme is "Quantum Financial Hub Status Update". Keep it to 2 sentences. tone should be ${selectedVoice.style}.`
+      );
+      setDirectorNotes(response.text || '');
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const handleBroadcast = async () => {
+    setIsSynthesizing(true);
+    const success = await synthesizeSpeech({
+      text: transcript,
+      voiceName: selectedVoice.name,
+      directorNotes: directorNotes,
+      multiSpeaker: activeTab === 'multi' ? msConfig : undefined
+    });
+    setIsSynthesizing(false);
+  };
+
+  return (
+    <div className="space-y-10 animate-in fade-in duration-700 pb-20 max-w-7xl mx-auto">
+      {/* Header */}
+      <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
+        <div>
+          <h2 className="text-4xl font-black text-white italic tracking-tighter uppercase mb-2">Global <span className="text-blue-500 not-italic">Broadcast</span></h2>
+          <p className="text-zinc-500 text-[10px] font-black uppercase tracking-[0.3em] flex items-center gap-2">
+            <Globe size={12} className="text-blue-500" />
+            Neural Voice Synthesis • 80+ Protocols Online
+          </p>
+        </div>
+        <div className="flex bg-black p-1.5 rounded-2xl border border-zinc-900">
+          <button 
+            onClick={() => setActiveTab('single')}
+            className={`px-8 py-2.5 rounded-xl text-[10px] font-black transition-all uppercase tracking-widest flex items-center gap-3 ${activeTab === 'single' ? 'bg-zinc-100 text-black' : 'text-zinc-500 hover:text-zinc-300'}`}
+          >
+            <Mic2 size={14} /> Single Node
+          </button>
+          <button 
+            onClick={() => setActiveTab('multi')}
+            className={`px-8 py-2.5 rounded-xl text-[10px] font-black transition-all uppercase tracking-widest flex items-center gap-3 ${activeTab === 'multi' ? 'bg-zinc-100 text-black' : 'text-zinc-500 hover:text-zinc-300'}`}
+          >
+            <Users size={14} /> Multi Speaker
+          </button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-12 gap-8">
+        {/* Left: Language & Voice Registry */}
+        <div className="col-span-12 lg:col-span-4 space-y-8">
+          <div className="bg-zinc-950 border border-zinc-900 rounded-[3rem] p-8 shadow-2xl h-[calc(100vh-350px)] flex flex-col relative overflow-hidden">
+             <div className="absolute top-0 right-0 p-6 opacity-[0.02]">
+                <Globe size={180} />
+             </div>
+             
+             <div className="relative z-10 mb-8 space-y-6">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-white font-black text-xs uppercase tracking-widest italic">Protocol Registry</h3>
+                  <span className="text-[9px] font-black text-zinc-500 bg-zinc-900 px-3 py-1 rounded-full">{filteredLangs.length} Nodes</span>
+                </div>
+                <div className="relative">
+                  <Search size={14} className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-600" />
+                  <input 
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    placeholder="Search Language Node..."
+                    className="w-full bg-black border border-zinc-800 rounded-xl py-3 pl-11 pr-4 text-white text-[10px] font-black uppercase tracking-widest outline-none focus:border-blue-500 transition-all"
+                  />
+                </div>
+             </div>
+
+             <div className="flex-1 overflow-y-auto custom-scrollbar pr-2 space-y-2 relative z-10">
+                {filteredLangs.map(lang => (
+                  <button 
+                    key={lang.code}
+                    onClick={() => setSelectedLang(lang)}
+                    className={`w-full flex items-center justify-between p-4 rounded-2xl border transition-all ${selectedLang.code === lang.code ? 'bg-blue-600/10 border-blue-500/50 text-blue-400' : 'bg-black border-zinc-900 text-zinc-600 hover:border-zinc-700'}`}
+                  >
+                    <span className="text-[10px] font-black uppercase tracking-widest">{lang.name}</span>
+                    <span className="text-[9px] mono font-bold opacity-40">{lang.code.toUpperCase()}</span>
+                  </button>
+                ))}
+             </div>
+          </div>
+        </div>
+
+        {/* Center: Command Center */}
+        <div className="col-span-12 lg:col-span-8 space-y-8">
+          <div className="bg-zinc-950 border border-zinc-900 rounded-[3.5rem] p-10 shadow-2xl relative overflow-hidden group">
+             <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,_#1e1b4b_0%,_transparent_60%)] opacity-30"></div>
+             
+             <div className="relative z-10 space-y-10">
+                <div className="flex items-center justify-between">
+                   <div className="flex items-center gap-6">
+                      <div className="w-16 h-16 bg-blue-600/10 text-blue-500 border border-blue-500/20 rounded-3xl flex items-center justify-center">
+                        <Activity size={32} className="animate-pulse" />
+                      </div>
+                      <div>
+                        <h4 className="text-2xl font-black text-white italic tracking-tighter uppercase leading-none">{selectedLang.name} Link</h4>
+                        <p className="text-[10px] text-zinc-500 font-black uppercase tracking-widest mt-2">Active Node: {selectedLang.code.toUpperCase()}_PARITY</p>
+                      </div>
+                   </div>
+                   <div className="flex items-center gap-4">
+                      <div className="px-6 py-2 bg-black border border-zinc-900 rounded-full flex items-center gap-3">
+                         <div className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></div>
+                         <span className="text-[9px] font-black text-zinc-500 uppercase tracking-widest">Neural Sync Stable</span>
+                      </div>
+                   </div>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                   <div className="space-y-6">
+                      <div className="space-y-3">
+                        <label className="text-[10px] font-black text-zinc-600 uppercase tracking-widest ml-1">Voice Profile</label>
+                        <select 
+                          value={selectedVoice.name}
+                          onChange={(e) => setSelectedVoice(TTS_VOICES.find(v => v.name === e.target.value)!)}
+                          className="w-full bg-black border border-zinc-900 rounded-2xl py-4 px-6 text-white text-[11px] font-black uppercase tracking-widest outline-none focus:border-blue-500 transition-all appearance-none cursor-pointer"
+                        >
+                          {TTS_VOICES.map(v => (
+                            <option key={v.name} value={v.name}>{v.name} — {v.style}</option>
+                          ))}
+                        </select>
+                      </div>
+                      <div className="space-y-3">
+                        <div className="flex justify-between items-end mb-1">
+                          <label className="text-[10px] font-black text-zinc-600 uppercase tracking-widest ml-1">Directorial Notes</label>
+                          <button onClick={handleGenerateNotes} className="text-[9px] font-black text-blue-500 uppercase tracking-widest hover:text-white transition-colors flex items-center gap-2">
+                             <Sparkles size={10} /> Neural Architect
+                          </button>
+                        </div>
+                        <textarea 
+                          value={directorNotes}
+                          onChange={(e) => setDirectorNotes(e.target.value)}
+                          className="w-full bg-black border border-zinc-900 rounded-2xl p-6 text-zinc-300 text-[11px] font-medium leading-relaxed italic h-32 outline-none focus:border-blue-500 transition-all resize-none"
+                        />
+                      </div>
+                   </div>
+
+                   <div className="space-y-3">
+                      <label className="text-[10px] font-black text-zinc-600 uppercase tracking-widest ml-1">Transmission Script</label>
+                      <div className="relative">
+                        <textarea 
+                          value={transcript}
+                          onChange={(e) => setTranscript(e.target.value)}
+                          className="w-full bg-black border-2 border-zinc-900 rounded-[2.5rem] p-8 text-white text-base font-bold leading-relaxed tracking-tight h-[280px] outline-none focus:border-blue-500 transition-all resize-none placeholder:text-zinc-800"
+                          placeholder="Input the global broadcast content..."
+                        />
+                        <div className="absolute bottom-6 right-8 text-[9px] font-black text-zinc-700 uppercase tracking-widest">
+                          {transcript.length} Characters
+                        </div>
+                      </div>
+                   </div>
+                </div>
+
+                <div className="pt-4">
+                  <button 
+                    onClick={handleBroadcast}
+                    disabled={isSynthesizing || !transcript.trim()}
+                    className="w-full py-7 bg-blue-600 hover:bg-blue-500 disabled:bg-zinc-900 disabled:text-zinc-700 text-white rounded-[2.5rem] font-black text-sm uppercase tracking-[0.4em] transition-all flex items-center justify-center gap-6 shadow-2xl shadow-blue-900/40 group"
+                  >
+                    {isSynthesizing ? (
+                      <>
+                        <Loader2 className="animate-spin" size={24} />
+                        <span>Generating Global Waveform...</span>
+                      </>
+                    ) : (
+                      <>
+                        <Zap size={24} className="group-hover:scale-125 transition-transform" />
+                        <span>Execute Multi-Node Broadcast</span>
+                        <ArrowRight size={20} className="group-hover:translate-x-3 transition-transform" />
+                      </>
+                    )}
+                  </button>
+                </div>
+             </div>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+             <div className="bg-zinc-950 border border-zinc-900 rounded-[2.5rem] p-8 shadow-xl flex items-center gap-6 group hover:border-blue-500/20 transition-all">
+                <div className="p-4 bg-blue-600/10 text-blue-500 rounded-2xl group-hover:scale-110 transition-transform">
+                   <ShieldCheck size={24} />
+                </div>
+                <div>
+                   <h5 className="text-white font-black text-xs uppercase italic">Verified Logic</h5>
+                   <p className="text-[10px] text-zinc-600 font-bold uppercase mt-1">Zero-persistence audio packet shredding enabled.</p>
+                </div>
+             </div>
+             <div className="bg-zinc-950 border border-zinc-900 rounded-[2.5rem] p-8 shadow-xl flex items-center gap-6 group hover:border-emerald-500/20 transition-all">
+                <div className="p-4 bg-emerald-500/10 text-emerald-500 rounded-2xl group-hover:scale-110 transition-transform">
+                   <Users size={24} />
+                </div>
+                <div>
+                   <h5 className="text-white font-black text-xs uppercase italic">Directorial Access</h5>
+                   <p className="text-[10px] text-zinc-600 font-bold uppercase mt-1">Fine-grained accent and pace control active.</p>
+                </div>
+             </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Broadcast;

views/Cards.tsx

@@ -0,0 +1,297 @@
+
+import React, { useState } from 'react';
+import { Plus, Shield, Globe, Lock, Unlock, Settings2, Trash2, X, CreditCard, Loader2, CheckCircle2, ChevronRight, MapPin, Activity } from 'lucide-react';
+
+const CardVisual = ({ holder, number, balance, type, frozen }: any) => (
+  <div className={`relative h-56 w-96 rounded-[2.5rem] p-8 overflow-hidden transition-all duration-700 ${frozen ? 'grayscale opacity-40 scale-95 shadow-none' : 'hover:scale-[1.02] shadow-2xl shadow-blue-900/30'}`}>
+    <div className={`absolute inset-0 bg-gradient-to-br ${type === 'Rewards+' ? 'from-indigo-600 via-blue-800 to-zinc-950' : 'from-blue-600 via-blue-800 to-zinc-950'}`}></div>
+    <div className="absolute top-0 right-0 w-64 h-64 bg-white/5 blur-3xl rounded-full -mr-32 -mt-32"></div>
+    <div className="absolute bottom-0 left-0 w-32 h-32 bg-blue-400/5 blur-2xl rounded-full -ml-16 -mb-16"></div>
+    
+    <div className="relative z-10 h-full flex flex-col justify-between text-white">
+      <div className="flex justify-between items-start">
+        <div className="w-12 h-9 bg-white/10 rounded-lg backdrop-blur-xl border border-white/20 flex items-center justify-center">
+           <Activity size={20} className="opacity-50" />
+        </div>
+        <div className="text-right">
+          <p className="text-[8px] uppercase tracking-[0.3em] font-black opacity-60 mb-0.5">Corporate Elite</p>
+          <p className="text-[10px] font-black uppercase italic tracking-tighter">{type}</p>
+        </div>
+      </div>
+      
+      <div className="mono text-2xl tracking-[0.25em] font-medium shadow-black drop-shadow-lg">{number}</div>
+      
+      <div className="flex justify-between items-end">
+        <div>
+          <p className="text-[8px] uppercase tracking-[0.3em] font-black opacity-60 mb-1">Controller</p>
+          <p className="text-[10px] font-black uppercase italic tracking-tight">{holder}</p>
+        </div>
+        <div className="text-right">
+          <p className="text-[8px] uppercase tracking-[0.3em] font-black opacity-60 mb-1">Threshold</p>
+          <p className="text-xs font-black mono text-blue-300 tracking-tighter">${balance.toLocaleString()}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+const Cards: React.FC = () => {
+  const [cards, setCards] = useState([
+    { id: '1', holder: 'ALEX RIVERA', number: '•••• •••• •••• 7899', balance: 50000, type: 'Rewards+', frozen: false, regions: ['US', 'EU', 'UK'] },
+    { id: '2', holder: 'ALEX RIVERA', number: '•••• •••• •••• 1035', balance: 120000, type: 'Elite Savings', frozen: false, regions: ['US', 'SG'] },
+  ]);
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isLimitsOpen, setIsLimitsOpen] = useState(false);
+  const [isRegionsOpen, setIsRegionsOpen] = useState(false);
+  const [activeCardId, setActiveCardId] = useState<string | null>(null);
+  
+  const [isIssuing, setIsIssuing] = useState(false);
+  const [newCardType, setNewCardType] = useState('Rewards+');
+  const [tempLimit, setTempLimit] = useState('');
+
+  const toggleFreeze = (id: string) => {
+    setCards(prev => prev.map(c => c.id === id ? { ...c, frozen: !c.frozen } : c));
+  };
+
+  const updateLimit = () => {
+    if (!activeCardId || !tempLimit) return;
+    setCards(prev => prev.map(c => c.id === activeCardId ? { ...c, balance: parseFloat(tempLimit) } : c));
+    setIsLimitsOpen(false);
+    setTempLimit('');
+  };
+
+  const toggleRegion = (region: string) => {
+    if (!activeCardId) return;
+    setCards(prev => prev.map(c => {
+      if (c.id === activeCardId) {
+        const regions = c.regions.includes(region) 
+          ? c.regions.filter(r => r !== region)
+          : [...c.regions, region];
+        return { ...c, regions };
+      }
+      return c;
+    }));
+  };
+
+  const handleIssueCard = () => {
+    setIsIssuing(true);
+    setTimeout(() => {
+      const newCard = {
+        id: Date.now().toString(),
+        holder: 'ALEX RIVERA',
+        number: `•••• •••• •••• ${Math.floor(1000 + Math.random() * 9000)}`,
+        balance: newCardType === 'Rewards+' ? 50000 : 250000,
+        type: newCardType,
+        frozen: false,
+        regions: ['US']
+      };
+      setCards(prev => [...prev, newCard]);
+      setIsIssuing(false);
+      setIsModalOpen(false);
+    }, 1500);
+  };
+
+  return (
+    <div className="space-y-12 animate-in fade-in duration-700 pb-20">
+      <div className="flex justify-between items-end">
+        <div>
+          <h2 className="text-4xl font-black text-white mb-2 uppercase italic tracking-tighter">Elite <span className="text-blue-500 not-italic">Instruments</span></h2>
+          <p className="text-zinc-500 text-[10px] font-black uppercase tracking-[0.3em]">Institutional Spend Nodes & Routing Policy Control</p>
+        </div>
+        <button 
+          onClick={() => setIsModalOpen(true)}
+          className="flex items-center space-x-2 px-8 py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-[1.8rem] font-black text-[10px] uppercase tracking-widest transition-all shadow-xl shadow-blue-900/40"
+        >
+          <Plus size={18} />
+          <span>Provision New Node</span>
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 xl:grid-cols-2 gap-10">
+        {cards.map(card => (
+          <div key={card.id} className="bg-zinc-950 border border-zinc-900 rounded-[3.5rem] p-10 flex flex-col md:flex-row gap-10 items-center md:items-stretch shadow-2xl group hover:border-blue-500/20 transition-all relative overflow-hidden">
+            <div className="absolute top-0 right-0 p-8 opacity-[0.02] group-hover:opacity-10 transition-opacity">
+               <CreditCard size={150} />
+            </div>
+            
+            <CardVisual {...card} />
+            
+            <div className="flex-1 flex flex-col justify-between py-2 w-full relative z-10">
+              <div className="space-y-6">
+                <div className="flex items-center justify-between">
+                  <span className="text-zinc-600 text-[9px] font-black uppercase tracking-[0.25em]">Registry Integrity</span>
+                  <span className={`text-[9px] font-black uppercase tracking-widest px-3 py-1 rounded-full ${card.frozen ? 'bg-rose-500/10 text-rose-500' : 'bg-emerald-500/10 text-emerald-500'}`}>
+                    {card.frozen ? 'SUSPENDED' : 'OPERATIONAL'}
+                  </span>
+                </div>
+                
+                <div className="space-y-3">
+                  <button 
+                    onClick={() => toggleFreeze(card.id)}
+                    className={`w-full flex items-center justify-between p-5 rounded-2xl border transition-all group/btn ${card.frozen ? 'bg-blue-600 text-white border-blue-500' : 'bg-black border-zinc-900 hover:border-zinc-700'}`}
+                  >
+                    <div className="flex items-center space-x-4">
+                      {card.frozen ? <Unlock size={16} /> : <Lock size={16} className="text-zinc-600 group-hover/btn:text-white transition-colors" />}
+                      <span className="text-[10px] font-black uppercase tracking-widest">{card.frozen ? 'REACTIVATE NODE' : 'SUSPEND NODE'}</span>
+                    </div>
+                    <ChevronRight size={14} className={card.frozen ? 'opacity-100' : 'opacity-30'} />
+                  </button>
+                  <button 
+                    onClick={() => {
+                      setActiveCardId(card.id);
+                      setTempLimit(card.balance.toString());
+                      setIsLimitsOpen(true);
+                    }}
+                    className="w-full flex items-center justify-between p-5 rounded-2xl bg-black border border-zinc-900 hover:border-blue-500/50 transition-all group/btn"
+                  >
+                    <div className="flex items-center space-x-4">
+                      <Settings2 size={16} className="text-zinc-600 group-hover/btn:text-blue-500 transition-colors" />
+                      <span className="text-[10px] font-black uppercase tracking-widest text-zinc-400 group-hover/btn:text-white">THRESHOLD: ${card.balance.toLocaleString()}</span>
+                    </div>
+                    <ChevronRight size={14} className="opacity-30" />
+                  </button>
+                  <button 
+                    onClick={() => {
+                      setActiveCardId(card.id);
+                      setIsRegionsOpen(true);
+                    }}
+                    className="w-full flex items-center justify-between p-5 rounded-2xl bg-black border border-zinc-900 hover:border-blue-500/50 transition-all group/btn"
+                  >
+                    <div className="flex items-center space-x-4">
+                      <Globe size={16} className="text-zinc-600 group-hover/btn:text-blue-500 transition-colors" />
+                      <span className="text-[10px] font-black uppercase tracking-widest text-zinc-400 group-hover/btn:text-white">ROUTING: {card.regions.join(', ')}</span>
+                    </div>
+                    <ChevronRight size={14} className="opacity-30" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* New Card Modal */}
+      {isModalOpen && (
+        <div className="fixed inset-0 z-[150] flex items-center justify-center p-6 backdrop-blur-md bg-black/80">
+          <div className="bg-zinc-950 border border-zinc-900 w-full max-w-lg rounded-[3.5rem] p-12 shadow-2xl animate-in zoom-in-95">
+            <div className="flex justify-between items-start mb-10">
+              <div className="flex items-center gap-4">
+                <div className="w-16 h-16 bg-blue-600/10 text-blue-500 rounded-2xl flex items-center justify-center border border-blue-500/20">
+                  <Plus size={32} />
+                </div>
+                <div>
+                  <h3 className="text-2xl font-black text-white italic tracking-tighter uppercase">Issue <span className="text-blue-500 not-italic">New Card</span></h3>
+                  <p className="text-[10px] text-zinc-500 font-black uppercase tracking-widest">Quantum Foundry Authorization</p>
+                </div>
+              </div>
+              <button onClick={() => setIsModalOpen(false)} className="p-3 text-zinc-600 hover:text-white transition-colors"><X size={24} /></button>
+            </div>
+            <div className="space-y-8">
+              <div className="grid grid-cols-2 gap-4">
+                <button 
+                  onClick={() => setNewCardType('Rewards+')}
+                  className={`p-6 rounded-2xl border transition-all text-left group ${newCardType === 'Rewards+' ? 'bg-blue-600/10 border-blue-600 shadow-xl shadow-blue-900/10' : 'bg-black border-zinc-900 opacity-50'}`}
+                >
+                  <p className="text-white font-black text-xs uppercase italic mb-1">Rewards+</p>
+                  <p className="text-[8px] text-zinc-500 uppercase font-black tracking-widest">5% Cloud Credit</p>
+                </button>
+                <button 
+                  onClick={() => setNewCardType('Platinum Founders')}
+                  className={`p-6 rounded-2xl border transition-all text-left group ${newCardType === 'Platinum Founders' ? 'bg-blue-600/10 border-blue-600 shadow-xl shadow-blue-900/10' : 'bg-black border-zinc-900 opacity-50'}`}
+                >
+                  <p className="text-white font-black text-xs uppercase italic mb-1">Founder Elite</p>
+                  <p className="text-[8px] text-zinc-500 uppercase font-black tracking-widest">High Yield Sweep</p>
+                </button>
+              </div>
+              <button 
+                onClick={handleIssueCard}
+                disabled={isIssuing}
+                className="w-full py-5 bg-blue-600 hover:bg-blue-500 text-white rounded-[2rem] font-black text-xs uppercase tracking-[0.4em] transition-all flex items-center justify-center gap-4 shadow-2xl shadow-blue-900/40"
+              >
+                {isIssuing ? <Loader2 className="animate-spin" size={22} /> : <CheckCircle2 size={22} />}
+                <span>{isIssuing ? 'ENCRYPTING NODE...' : 'INITIALIZE INSTRUMENT'}</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Limits Modal */}
+      {isLimitsOpen && (
+        <div className="fixed inset-0 z-[150] flex items-center justify-center p-6 backdrop-blur-md bg-black/80">
+          <div className="bg-zinc-950 border border-zinc-900 w-full max-w-lg rounded-[3.5rem] p-12 shadow-2xl animate-in zoom-in-95">
+            <div className="flex justify-between items-start mb-10">
+              <div className="flex items-center gap-4">
+                <div className="w-14 h-14 bg-blue-600/10 text-blue-500 rounded-2xl flex items-center justify-center border border-blue-500/20">
+                  <Settings2 size={28} />
+                </div>
+                <h3 className="text-2xl font-black text-white italic tracking-tighter uppercase">Adjust <span className="text-blue-500 not-italic">Threshold</span></h3>
+              </div>
+              <button onClick={() => setIsLimitsOpen(false)} className="p-3 text-zinc-600 hover:text-white transition-colors"><X size={24} /></button>
+            </div>
+            <div className="space-y-10">
+              <div className="space-y-2">
+                <label className="text-[10px] font-black text-zinc-600 uppercase tracking-widest ml-1">Maximum Authorized Velocity (USD)</label>
+                <input 
+                  type="number"
+                  value={tempLimit}
+                  onChange={(e) => setTempLimit(e.target.value)}
+                  className="w-full bg-black border border-zinc-800 focus:border-blue-500 rounded-2xl py-5 px-6 text-white font-mono text-2xl outline-none transition-all shadow-inner"
+                  placeholder="0.00"
+                />
+              </div>
+              <button 
+                onClick={updateLimit}
+                className="w-full py-5 bg-white hover:bg-zinc-200 text-black rounded-[2rem] font-black text-xs uppercase tracking-widest transition-all shadow-2xl shadow-white/10"
+              >
+                Finalize Registry Update
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Regions Modal */}
+      {isRegionsOpen && activeCardId && (
+        <div className="fixed inset-0 z-[150] flex items-center justify-center p-6 backdrop-blur-md bg-black/80">
+          <div className="bg-zinc-950 border border-zinc-900 w-full max-w-xl rounded-[3.5rem] p-12 shadow-2xl animate-in zoom-in-95">
+            <div className="flex justify-between items-start mb-10">
+              <div className="flex items-center gap-4">
+                <div className="w-14 h-14 bg-blue-600/10 text-blue-500 rounded-2xl flex items-center justify-center border border-blue-500/20">
+                  <Globe size={28} />
+                </div>
+                <h3 className="text-2xl font-black text-white italic tracking-tighter uppercase">Routing <span className="text-blue-500 not-italic">Policy</span></h3>
+              </div>
+              <button onClick={() => setIsRegionsOpen(false)} className="p-3 text-zinc-600 hover:text-white transition-colors"><X size={24} /></button>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              {['US', 'EU', 'UK', 'SG', 'JP', 'AU', 'CA', 'BR'].map(reg => (
+                <button 
+                  key={reg}
+                  onClick={() => toggleRegion(reg)}
+                  className={`p-6 rounded-2xl border flex items-center justify-between transition-all group ${
+                    cards.find(c => c.id === activeCardId)?.regions.includes(reg)
+                      ? 'bg-blue-600/10 border-blue-600 text-white shadow-xl shadow-blue-900/10'
+                      : 'bg-black border-zinc-900 text-zinc-700 opacity-50'
+                  }`}
+                >
+                  <span className="font-black text-xs uppercase tracking-widest">{reg}</span>
+                  {cards.find(c => c.id === activeCardId)?.regions.includes(reg) && <CheckCircle2 size={16} className="text-blue-500" />}
+                </button>
+              ))}
+            </div>
+            <button 
+              onClick={() => setIsRegionsOpen(false)}
+              className="w-full mt-10 py-5 bg-zinc-900 hover:bg-zinc-800 text-white rounded-[2rem] font-black text-xs uppercase tracking-widest transition-all border border-zinc-800"
+            >
+              Update Global Routing Node
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Cards;

views/Connectivity.tsx

@@ -0,0 +1,158 @@
+
+import React, { useState } from 'react';
+import { 
+  Activity, 
+  RefreshCw, 
+  Terminal, 
+  ShieldCheck, 
+  AlertCircle,
+  Database,
+  Link2,
+  X,
+  Plus,
+  Loader2,
+  CheckCircle2,
+  MoreVertical
+} from 'lucide-react';
+import { Connection } from '../types/index.ts';
+
+const MOCK_CONNS: Connection[] = [
+  { id: 'CON-101', vendorCustomerId: 'CUST-A992', entity: 'JPM_USA', status: 'CONNECTED', lastSyncedAt: '2024-03-31T12:00:00Z' },
+  { id: 'CON-102', vendorCustomerId: 'CUST-D102', entity: 'DB_EURO', status: 'CONNECTED', lastSyncedAt: '2024-03-31T11:55:00Z' },
+  { id: 'CON-103', vendorCustomerId: 'CUST-L551', entity: 'LUMINA_INTERNAL', status: 'ERROR', lastSyncedAt: '2024-03-30T22:00:00Z' },
+];
+
+const Connectivity: React.FC = () => {
+  const [conns, setConns] = useState<Connection[]>(MOCK_CONNS);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [provisioning, setProvisioning] = useState(false);
+  const [newVendor, setNewVendor] = useState({ entity: 'STRIPE_GLOBAL', id: 'CUST-X' });
+
+  const handleProvision = () => {
+    setProvisioning(true);
+    setTimeout(() => {
+      const newConn: Connection = {
+        id: `CON-${Math.floor(200 + Math.random() * 800)}`,
+        vendorCustomerId: newVendor.id,
+        entity: newVendor.entity,
+        status: 'CONNECTED',
+        lastSyncedAt: new Date().toISOString()
+      };
+      setConns([newConn, ...conns]);
+      setProvisioning(false);
+      setIsModalOpen(false);
+    }, 2000);
+  };
+
+  return (
+    <div className="space-y-10 animate-in fade-in duration-700 pb-20">
+      <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
+        <div>
+          <h2 className="text-3xl font-black text-white italic tracking-tighter uppercase mb-2">System <span className="text-blue-500 not-italic">Fabric</span></h2>
+          <p className="text-zinc-500 text-[10px] font-black uppercase tracking-[0.3em]">Machine-to-Machine Integration Node Monitoring</p>
+        </div>
+        <button 
+          onClick={() => setIsModalOpen(true)}
+          className="flex items-center space-x-2 px-8 py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-[1.8rem] font-black text-[10px] uppercase tracking-widest transition-all shadow-xl shadow-blue-900/40"
+        >
+          <Link2 size={18} />
+          <span>Provision New Vendor</span>
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        {conns.map(conn => (
+          <div key={conn.id} className="bg-zinc-950 border border-zinc-900 rounded-[3rem] p-10 relative overflow-hidden group hover:border-zinc-700 transition-all shadow-2xl">
+            <div className="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity">
+              <Database size={100} />
+            </div>
+            
+            <div className="flex justify-between items-start mb-8 relative z-10">
+              <div className={`p-4 rounded-2xl ${conn.status === 'CONNECTED' ? 'bg-emerald-500/10 text-emerald-500' : 'bg-rose-500/10 text-rose-500'}`}>
+                {conn.status === 'CONNECTED' ? <ShieldCheck size={24} /> : <AlertCircle size={24} />}
+              </div>
+              <div className="text-right">
+                <p className="text-[10px] font-black text-zinc-600 uppercase tracking-widest mb-1">Status</p>
+                <p className={`text-xs font-black uppercase tracking-widest ${conn.status === 'CONNECTED' ? 'text-emerald-500' : 'text-rose-500'}`}>{conn.status}</p>
+              </div>
+            </div>
+
+            <div className="space-y-6 relative z-10">
+              <div>
+                <h4 className="text-lg font-black text-white uppercase italic tracking-tighter mb-1">{conn.entity}</h4>
+                <p className="text-[10px] text-zinc-500 font-mono font-bold uppercase">Vendor ID: {conn.vendorCustomerId}</p>
+              </div>
+              <div className="h-px bg-zinc-900"></div>
+              <div className="flex justify-between items-center text-[10px] font-black uppercase tracking-widest text-zinc-600">
+                <span>Handshake ID</span>
+                <span className="text-zinc-400 mono">{conn.id}</span>
+              </div>
+            </div>
+            
+            <div className="mt-8 pt-8 border-t border-zinc-900 flex justify-between items-center opacity-0 group-hover:opacity-100 transition-opacity">
+               <span className="text-[9px] font-black uppercase text-zinc-600 tracking-widest">Last Sync: {new Date(conn.lastSyncedAt).toLocaleTimeString()}</span>
+               <button className="text-zinc-500 hover:text-white"><MoreVertical size={16} /></button>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {isModalOpen && (
+        <div className="fixed inset-0 z-[150] flex items-center justify-center p-6 backdrop-blur-md bg-black/80">
+          <div className="bg-zinc-950 border border-zinc-900 w-full max-w-lg rounded-[3.5rem] p-12 shadow-2xl animate-in zoom-in-95">
+            <div className="flex justify-between items-start mb-10">
+               <div className="flex items-center gap-4">
+                  <div className="w-16 h-16 bg-blue-600/10 text-blue-500 rounded-3xl flex items-center justify-center border border-blue-500/20">
+                     <Link2 size={32} />
+                  </div>
+                  <div>
+                    <h3 className="text-2xl font-black text-white italic tracking-tighter uppercase">Vendor <span className="text-blue-500 not-italic">Handshake</span></h3>
+                    <p className="text-[10px] text-zinc-500 font-black uppercase tracking-widest">Fabric Extension Module</p>
+                  </div>
+               </div>
+               <button onClick={() => setIsModalOpen(false)} className="p-3 text-zinc-600 hover:text-white transition-colors"><X size={24}/></button>
+            </div>
+
+            <div className="space-y-8">
+               <div className="space-y-4">
+                  <div className="space-y-2">
+                    <label className="text-[10px] font-black text-zinc-600 uppercase tracking-widest ml-1">Vendor Provider</label>
+                    <input 
+                      value={newVendor.entity}
+                      onChange={e => setNewVendor({...newVendor, entity: e.target.value})}
+                      className="w-full bg-black border border-zinc-800 rounded-2xl py-4 px-6 text-white text-xs outline-none focus:border-blue-500 transition-all font-bold uppercase tracking-widest"
+                      placeholder="e.g. STRIPE_US"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <label className="text-[10px] font-black text-zinc-600 uppercase tracking-widest ml-1">Corporate Client ID</label>
+                    <input 
+                      value={newVendor.id}
+                      onChange={e => setNewVendor({...newVendor, id: e.target.value})}
+                      className="w-full bg-black border border-zinc-800 rounded-2xl py-4 px-6 text-white text-xs outline-none focus:border-blue-500 transition-all font-mono"
+                      placeholder="CUST-..."
+                    />
+                  </div>
+               </div>
+
+               <div className="p-6 bg-blue-500/5 border border-blue-500/10 rounded-3xl">
+                  <p className="text-[10px] font-black text-zinc-500 leading-relaxed uppercase tracking-widest">Establishing a secure tunnel via RSA-OAEP. Metadata persistence will be shredded post-handshake.</p>
+               </div>
+
+               <button 
+                onClick={handleProvision}
+                disabled={provisioning}
+                className="w-full py-6 bg-blue-600 hover:bg-blue-500 text-white rounded-[2.2rem] font-black text-[11px] uppercase tracking-[0.4em] transition-all shadow-xl shadow-blue-900/40 flex items-center justify-center gap-4"
+               >
+                 {provisioning ? <Loader2 className="animate-spin" size={20} /> : <CheckCircle2 size={20} />}
+                 {provisioning ? 'FORGING FABRIC...' : 'INITIALIZE Integration'}
+               </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Connectivity;

views/Counterparties.tsx

@@ -0,0 +1,275 @@
+
+import React, { useState } from 'react';
+/* Fix: react-router-dom exports may be flaky in this environment, using standard v6 imports */
+import { useNavigate } from 'react-router-dom';
+import { 
+  Users, 
+  Search, 
+  Plus, 
+  Mail, 
+  Globe, 
+  ShieldCheck, 
+  MoreHorizontal,
+  Loader2,
+  X,
+  ArrowRight,
+  Building2,
+  Calendar,
+  CreditCard,
+  ExternalLink
+} from 'lucide-react';
+import { Counterparty } from '../types/index';
+
+const MOCK_CP: Counterparty[] = [
+  { id: 'CP-8801', name: 'Global Logistics Corp', email: 'billing@globallogistics.io', status: 'ACTIVE', createdAt: '2023-11-20', accounts: [{ id: 'ACC-1', accountType: 'CHECKING', accountNumber: '•••• 4421' }] },
+  { id: 'CP-9902', name: 'Neural Dynamics Research', email: 'treasury@neuraldynamics.ai', status: 'PENDING', createdAt: '2024-01-05', accounts: [] },
+  { id: 'CP-1105', name: 'Skyline Real Estate', email: 'payments@skyline.co', status: 'ACTIVE', createdAt: '2023-08-12', accounts: [{ id: 'ACC-2', accountType: 'SAVINGS', accountNumber: '•••• 1022' }] },
+];
+
+const Counterparties: React.FC = () => {
+  const navigate = useNavigate();
+  const [partners, setPartners] = useState(MOCK_CP);
+  const [showModal, setShowModal] = useState(false);
+  const [showProfile, setShowProfile] = useState(false);
+  const [selectedPartner, setSelectedPartner] = useState<Counterparty | null>(null);
+  const [connecting, setConnecting] = useState(false);
+  const [newPartner, setNewPartner] = useState({ name: '', email: '' });
+
+  const registerPartner = () => {
+    if (!newPartner.name || !newPartner.email) return;
+    setConnecting(true);
+    setTimeout(() => {
+      const partner: Counterparty = {
+        id: `CP-${Math.floor(1000 + Math.random() * 9000)}`,
+        name: newPartner.name,
+        email: newPartner.email,
+        status: 'PENDING',
+        createdAt: new Date().toISOString().split('T')[0],
+        accounts: []
+      };
+      setPartners([...partners, partner]);
+      setConnecting(false);
+      setShowModal(false);
+      setNewPartner({ name: '', email: '' });
+    }, 1500);
+  };
+
+  const openProfile = (partner: Counterparty) => {
+    setSelectedPartner(partner);
+    setShowProfile(true);
+  };
+
+  const handleSendFunds = (partner: Counterparty) => {
+    // Navigate to disbursements with partner intent
+    navigate('/payments', { state: { selectedPayeeId: partner.id } });
+  };
+
+  return (
+    <div className="space-y-10 animate-in fade-in duration-700">
+      <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
+        <div>
+          <h2 className="text-3xl font-black text-white italic tracking-tighter uppercase mb-2">Partner <span className="text-blue-500 not-italic">CRM</span></h2>
+          <p className="text-zinc-500 text-[10px] font-black uppercase tracking-[0.3em]">Managed Third-Party Entities & KYC Handshakes</p>
+        </div>
+        <button 
+          onClick={() => setShowModal(true)}
+          className="flex items-center space-x-2 px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-black text-[10px] uppercase tracking-widest transition-all shadow-xl shadow-blue-900/30"
+        >
+          <Plus size={14} />
+          <span>Register Counterparty</span>
+        </button>
+      </div>
+
+      <div className="bg-zinc-950 border border-zinc-900 rounded-[3rem] overflow-hidden shadow-2xl">
+        <div className="p-10 border-b border-zinc-900 flex flex-col md:flex-row justify-between items-center bg-black/20 gap-6">
+          <div className="flex items-center space-x-4">
+            <div className="p-3 bg-blue-500/10 text-blue-500 rounded-2xl">
+              <Users size={20} />
+            </div>
+            <h3 className="text-white font-black uppercase tracking-[0.2em] italic">Active Directory</h3>
+          </div>
+          <div className="relative w-full md:w-80">
+            <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-600" size={14} />
+            <input 
+              placeholder="Search Partners..."
+              className="w-full bg-black border border-zinc-800 rounded-xl py-3 pl-10 pr-4 text-[10px] font-black uppercase tracking-widest text-white outline-none focus:border-blue-500/50 transition-all"
+            />
+          </div>
+        </div>
+        <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-px bg-zinc-900/50">
+          {partners.map(cp => (
+            <div key={cp.id} className="bg-zinc-950 p-10 hover:bg-white/[0.02] transition-all group border border-transparent hover:border-zinc-800 relative overflow-hidden">
+              <div className="absolute top-0 right-0 p-4 opacity-0 group-hover:opacity-5 transition-opacity">
+                 <Building2 size={120} />
+              </div>
+              
+              <div className="relative z-10">
+                <div className="flex justify-between items-start mb-10">
+                  <div className="w-16 h-16 rounded-2xl bg-zinc-900 border border-zinc-800 flex items-center justify-center text-zinc-600 group-hover:text-blue-400 transition-colors shadow-2xl">
+                    <Globe size={32} />
+                  </div>
+                  <div className={`px-3 py-1 rounded-full text-[8px] font-black uppercase tracking-widest ${cp.status === 'ACTIVE' ? 'bg-emerald-500/10 text-emerald-500' : 'bg-amber-500/10 text-amber-500'}`}>
+                    {cp.status}
+                  </div>
+                </div>
+                <h4 className="text-xl font-black text-white uppercase italic tracking-tighter mb-1">{cp.name}</h4>
+                <p className="text-[10px] text-zinc-500 font-bold uppercase tracking-widest mb-10 truncate">{cp.email}</p>
+                <div className="flex gap-4">
+                  <button onClick={() => openProfile(cp)} className="flex-1 py-4 bg-zinc-900 text-white rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all border border-zinc-800 hover:bg-zinc-800 flex items-center justify-center gap-2">
+                    Profile
+                  </button>
+                  <button onClick={() => handleSendFunds(cp)} className="flex-1 py-4 bg-blue-600 text-white rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all hover:bg-blue-500 flex items-center justify-center gap-2">
+                    Send Funds
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Profile Modal */}
+      {showProfile && selectedPartner && (
+        <div className="fixed inset-0 z-[110] flex items-center justify-center p-6 backdrop-blur-md bg-black/70">
+          <div className="bg-zinc-950 border border-zinc-900 w-full max-w-2xl rounded-[3rem] p-10 shadow-2xl animate-in zoom-in-95 duration-300">
+            <div className="flex justify-between items-start mb-10 pb-8 border-b border-zinc-900">
+              <div className="flex items-center gap-6">
+                <div className="w-16 h-16 bg-blue-600/10 text-blue-500 rounded-3xl flex items-center justify-center">
+                  <Building2 size={32} />
+                </div>
+                <div>
+                  <h3 className="text-3xl font-black text-white italic tracking-tighter uppercase">{selectedPartner.name}</h3>
+                  <p className="text-[10px] text-zinc-500 font-black uppercase tracking-widest mt-1">Institutional Entity Record • {selectedPartner.id}</p>
+                </div>
+              </div>
+              <button onClick={() => setShowProfile(false)} className="p-2 text-zinc-500 hover:text-white transition-colors"><X size={24} /></button>
+            </div>
+
+            <div className="space-y-8">
+              <div className="grid grid-cols-2 gap-8">
+                <div className="space-y-6">
+                  <div>
+                    <p className="text-[9px] font-black text-zinc-600 uppercase tracking-widest mb-2">Entity Email</p>
+                    <p className="text-white font-bold flex items-center gap-2">
+                      <Mail size={14} className="text-blue-500" />
+                      {selectedPartner.email}
+                    </p>
+                  </div>
+                  <div>
+                    <p className="text-[9px] font-black text-zinc-600 uppercase tracking-widest mb-2">Relationship Established</p>
+                    <p className="text-white font-bold flex items-center gap-2">
+                      <Calendar size={14} className="text-blue-500" />
+                      {new Date(selectedPartner.createdAt).toLocaleDateString()}
+                    </p>
+                  </div>
+                </div>
+                <div className="space-y-6">
+                  <div>
+                    <p className="text-[9px] font-black text-zinc-600 uppercase tracking-widest mb-2">KYC Verification Status</p>
+                    <div className="flex items-center gap-2">
+                      <div className={`w-2 h-2 rounded-full ${selectedPartner.status === 'ACTIVE' ? 'bg-emerald-500 animate-pulse' : 'bg-amber-500'}`}></div>
+                      <span className={`${selectedPartner.status === 'ACTIVE' ? 'text-emerald-500' : 'text-amber-500'} font-black text-[10px] uppercase tracking-widest`}>
+                        {selectedPartner.status === 'ACTIVE' ? 'Identity Verified' : 'Handshake Pending'}
+                      </span>
+                    </div>
+                  </div>
+                  <div>
+                    <p className="text-[9px] font-black text-zinc-600 uppercase tracking-widest mb-2">Primary Registry Type</p>
+                    <p className="text-white font-black italic uppercase tracking-tighter">FDX_CORPORATE_NODE</p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="p-6 bg-black border border-zinc-800 rounded-3xl space-y-4">
+                 <p className="text-[9px] font-black text-zinc-500 uppercase tracking-widest flex items-center gap-2">
+                   <CreditCard size={12} />
+                   Linked Financial Handshakes
+                 </p>
+                 {selectedPartner.accounts && selectedPartner.accounts.length > 0 ? (
+                    selectedPartner.accounts.map(acc => (
+                      <div key={acc.id} className="flex justify-between items-center bg-zinc-900/50 p-4 rounded-xl border border-zinc-800">
+                        <div>
+                          <p className="text-white text-xs font-bold uppercase">{acc.accountType} Account</p>
+                          <p className="text-zinc-500 text-[10px] font-mono mt-0.5">{acc.accountNumber}</p>
+                        </div>
+                        <span className="text-[8px] font-black uppercase text-emerald-500 border border-emerald-500/20 px-2 py-0.5 rounded">RTP Enabled</span>
+                      </div>
+                    ))
+                 ) : (
+                    <div className="bg-zinc-900/50 p-4 rounded-xl border border-dashed border-zinc-800 text-center">
+                      <p className="text-zinc-600 text-[9px] font-black uppercase tracking-widest">No verified external accounts found</p>
+                    </div>
+                 )}
+              </div>
+
+              <div className="flex gap-4">
+                 <button className="flex-1 py-5 bg-zinc-900 hover:bg-zinc-800 text-white rounded-[2rem] font-black text-xs uppercase tracking-widest transition-all border border-zinc-800 flex items-center justify-center gap-3">
+                   <ExternalLink size={18} />
+                   Open Documents
+                 </button>
+                 <button 
+                  onClick={() => handleSendFunds(selectedPartner)}
+                  className="flex-1 py-5 bg-blue-600 hover:bg-blue-500 text-white rounded-[2rem] font-black text-xs uppercase tracking-widest transition-all flex items-center justify-center gap-3 shadow-xl"
+                 >
+                   Send Disbursement
+                 </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Registration Modal */}
+      {showModal && (
+        <div className="fixed inset-0 z-[100] flex items-center justify-center p-6 backdrop-blur-sm bg-black/60">
+          <div className="bg-zinc-950 border border-zinc-900 w-full max-w-lg rounded-[3rem] p-10 shadow-2xl animate-in zoom-in-95">
+            <div className="flex justify-between items-start mb-10">
+              <div className="flex items-center gap-4">
+                <div className="w-14 h-14 bg-blue-600/10 text-blue-500 rounded-2xl flex items-center justify-center">
+                  <ShieldCheck size={28} />
+                </div>
+                <div>
+                  <h3 className="text-2xl font-black text-white italic tracking-tighter uppercase">Add <span className="text-blue-500 not-italic">Partner</span></h3>
+                  <p className="text-[10px] text-zinc-500 font-black uppercase tracking-widest">KYC/KYB Initialization</p>
+                </div>
+              </div>
+              <button onClick={() => setShowModal(false)} className="p-2 text-zinc-600 hover:text-white"><X size={24} /></button>
+            </div>
+
+            <div className="space-y-6">
+              <div className="space-y-2">
+                <label className="text-[10px] font-black text-zinc-600 uppercase tracking-widest ml-1">Entity Name</label>
+                <input 
+                  value={newPartner.name}
+                  onChange={(e) => setNewPartner({...newPartner, name: e.target.value})}
+                  placeholder="Legal Company Name"
+                  className="w-full bg-black border border-zinc-800 focus:border-blue-500/50 rounded-xl py-4 px-4 text-white font-bold outline-none transition-all"
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-[10px] font-black text-zinc-600 uppercase tracking-widest ml-1">Treasury Email</label>
+                <input 
+                  value={newPartner.email}
+                  onChange={(e) => setNewPartner({...newPartner, email: e.target.value})}
+                  placeholder="treasury@partner.io"
+                  className="w-full bg-black border border-zinc-800 focus:border-blue-500/50 rounded-xl py-4 px-4 text-white font-bold outline-none transition-all"
+                />
+              </div>
+
+              <button 
+                onClick={registerPartner}
+                disabled={connecting || !newPartner.name}
+                className="w-full mt-4 py-5 bg-blue-600 hover:bg-blue-500 text-white rounded-[2rem] font-black text-xs uppercase tracking-[0.3em] transition-all flex items-center justify-center gap-4 shadow-xl shadow-blue-900/30"
+              >
+                {connecting ? <Loader2 className="animate-spin" size={20} /> : <ArrowRight size={20} />}
+                <span>{connecting ? 'Dispatching Handshake...' : 'Register Entity'}</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Counterparties;

views/CryptView.tsx

@@ -0,0 +1,348 @@
+import React, { useState, useEffect } from 'react';
+import { 
+  Hammer, 
+  Sparkles, 
+  ShieldCheck, 
+  Terminal, 
+  Wallet, 
+  Key, 
+  Loader2, 
+  Eye, 
+  Image as ImageIcon,
+  Zap,
+  Globe,
+  Share2,
+  ExternalLink,
+  Info,
+  AlertCircle,
+  // Added missing X icon import
+  X
+} from 'lucide-react';
+import { nftService, GeneratedNFT } from '../services/nftService.ts';
+
+declare global {
+  interface Window {
+    ethereum?: any;
+  }
+}
+
+const CryptView: React.FC = () => {
+  const [prompt, setPrompt] = useState('');
+  const [isSynthesizing, setIsSynthesizing] = useState(false);
+  const [isMinting, setIsMinting] = useState(false);
+  const [nft, setNft] = useState<GeneratedNFT | null>(null);
+  const [openSeaKey, setOpenSeaKey] = useState('');
+  const [walletAddress, setWalletAddress] = useState('');
+  const [mintLogs, setMintLogs] = useState<string[]>([]);
+  const [walletConnected, setWalletConnected] = useState(false);
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const connectWallet = async () => {
+    if (typeof window.ethereum === 'undefined') {
+      setError("MetaMask not detected. Please install the browser extension to interact with the foundry.");
+      return;
+    }
+
+    setIsConnecting(true);
+    setError(null);
+    try {
+      const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
+      if (accounts.length > 0) {
+        setWalletAddress(accounts[0]);
+        setWalletConnected(true);
+      }
+    } catch (err: any) {
+      console.error("Wallet Connection Failed:", err);
+      setError(err.message || "Failed to establish neural handshake with wallet.");
+    } finally {
+      setIsConnecting(false);
+    }
+  };
+
+  useEffect(() => {
+    const checkConnection = async () => {
+      if (window.ethereum) {
+        const accounts = await window.ethereum.request({ method: 'eth_accounts' });
+        if (accounts.length > 0) {
+          setWalletAddress(accounts[0]);
+          setWalletConnected(true);
+        }
+      }
+    };
+    checkConnection();
+
+    if (window.ethereum) {
+      window.ethereum.on('accountsChanged', (accounts: string[]) => {
+        if (accounts.length > 0) {
+          setWalletAddress(accounts[0]);
+          setWalletConnected(true);
+        } else {
+          setWalletAddress('');
+          setWalletConnected(false);
+        }
+      });
+    }
+  }, []);
+
+  const handleSynthesize = async () => {
+    if (!prompt.trim()) return;
+    setIsSynthesizing(true);
+    setNft(null);
+    setMintLogs([]);
+    setError(null);
+
+    const [imageUrl, metadata] = await Promise.all([
+      nftService.generateImage(prompt),
+      nftService.generateMetadata(prompt)
+    ]);
+
+    if (imageUrl) {
+      setNft({
+        name: metadata.name || "Neural Artifact",
+        description: metadata.description || "Synthesized by Lumina Oracle",
+        imageUrl,
+        traits: metadata.traits || []
+      });
+    } else {
+      setError("Asset synthesis failed. Please adjust your prompt parameters.");
+    }
+    setIsSynthesizing(false);
+  };
+
+  const handleMint = async () => {
+    if (!nft || !openSeaKey || !walletConnected) return;
+    setIsMinting(true);
+    setMintLogs(["Starting deployment sequence..."]);
+
+    const steps = await nftService.mintToOpenSea(nft, openSeaKey, walletAddress);
+    
+    for (const step of steps) {
+      await new Promise(r => setTimeout(r, 800));
+      setMintLogs(prev => [...prev, step]);
+    }
+    setIsMinting(false);
+  };
+
+  const shortenAddress = (addr: string) => `${addr.substring(0, 6)}...${addr.substring(addr.length - 4)}`;
+
+  return (
+    <div className="space-y-10 animate-in fade-in duration-700 pb-20">
+      {/* Header */}
+      <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
+        <div>
+          <h2 className="text-3xl font-black text-white italic tracking-tighter uppercase mb-2">Quantum <span className="text-blue-500 not-italic">Crypt</span></h2>
+          <p className="text-zinc-500 text-[10px] font-black uppercase tracking-[0.3em]">Neural Asset Synthesis & Blockchain Deployment</p>
+        </div>
+        <div className="flex gap-4">
+          <div className="px-6 py-3 bg-zinc-950 border border-zinc-800 rounded-2xl flex items-center gap-4 shadow-xl">
+            <div className="flex items-center gap-2">
+              <div className={`w-2 h-2 rounded-full ${walletConnected ? 'bg-emerald-500 animate-pulse' : 'bg-rose-500'}`}></div>
+              <span className="text-[10px] font-black text-zinc-500 uppercase tracking-widest">
+                Wallet: {walletConnected ? shortenAddress(walletAddress) : 'Disconnected'}
+              </span>
+            </div>
+          </div>
+          {!walletConnected && (
+            <button 
+              onClick={connectWallet}
+              disabled={isConnecting}
+              className="flex items-center space-x-2 px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-black text-[10px] uppercase tracking-widest transition-all shadow-lg shadow-blue-900/30 disabled:opacity-50"
+            >
+              {isConnecting ? <Loader2 size={14} className="animate-spin" /> : <Wallet size={14} />}
+              <span>{isConnecting ? 'Initializing...' : 'Connect MetaMask'}</span>
+            </button>
+          )}
+        </div>
+      </div>
+
+      {error && (
+        <div className="p-4 bg-rose-500/10 border border-rose-500/20 rounded-2xl flex items-center gap-4 animate-in slide-in-from-top-2">
+          <AlertCircle size={20} className="text-rose-500 shrink-0" />
+          <p className="text-xs font-bold text-rose-200">{error}</p>
+          <button onClick={() => setError(null)} className="ml-auto p-1 hover:bg-rose-500/10 rounded-lg text-rose-500">
+            <X size={16} />
+          </button>
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-10">
+        {/* Left: Configuration & Foundry */}
+        <div className="lg:col-span-1 space-y-8">
+          <div className="bg-zinc-950 border border-zinc-900 rounded-[2.5rem] p-8 shadow-2xl space-y-8">
+            <div className="flex items-center gap-3 mb-2">
+              <div className="p-3 bg-blue-600/10 text-blue-500 rounded-xl">
+                <Key size={18} />
+              </div>
+              <h3 className="text-white font-black text-xs uppercase tracking-widest italic">Integration Layer</h3>
+            </div>
+            
+            <div className="space-y-6">
+              <div className="space-y-2">
+                <label className="text-[9px] font-black text-zinc-600 uppercase tracking-widest ml-1">OpenSea API Key</label>
+                <input 
+                  type="password"
+                  value={openSeaKey}
+                  onChange={e => setOpenSeaKey(e.target.value)}
+                  placeholder="X-API-KEY-..."
+                  className="w-full bg-black border border-zinc-800 focus:border-blue-500/50 rounded-xl py-3 px-4 text-white text-xs outline-none transition-all placeholder:text-zinc-800 font-mono"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <label className="text-[9px] font-black text-zinc-600 uppercase tracking-widest ml-1">Synthesis Prompt</label>
+                <textarea 
+                  value={prompt}
+                  onChange={e => setPrompt(e.target.value)}
+                  placeholder="e.g. Cybernetic obsidian eagle with neon circuits..."
+                  className="w-full bg-black border border-zinc-800 focus:border-blue-500/50 rounded-xl py-4 px-4 text-white text-xs outline-none transition-all placeholder:text-zinc-800 font-bold min-h-[120px] resize-none"
+                />
+              </div>
+
+              <button 
+                onClick={handleSynthesize}
+                disabled={isSynthesizing || !prompt}
+                className="w-full py-4 bg-zinc-900 hover:bg-zinc-100 hover:text-black text-white rounded-2xl font-black text-[10px] uppercase tracking-[0.2em] transition-all border border-zinc-800 flex items-center justify-center gap-3 disabled:opacity-50"
+              >
+                {isSynthesizing ? <Loader2 className="animate-spin" size={16} /> : <Sparkles size={16} />}
+                <span>{isSynthesizing ? 'Synthesizing Neural Path...' : 'Synthesize Artifact'}</span>
+              </button>
+            </div>
+          </div>
+
+          {/* Minting Log Terminal */}
+          <div className="bg-black border border-zinc-900 rounded-[2.5rem] overflow-hidden shadow-2xl h-[300px] flex flex-col">
+            <div className="bg-zinc-900/80 px-6 py-3 border-b border-zinc-800 flex justify-between items-center">
+              <div className="flex items-center gap-2">
+                <Terminal size={12} className="text-emerald-500" />
+                <span className="text-[9px] font-black uppercase tracking-widest text-zinc-500">Chain Trace Log</span>
+              </div>
+              <div className="flex gap-1.5">
+                <div className="w-1.5 h-1.5 rounded-full bg-zinc-800"></div>
+                <div className="w-1.5 h-1.5 rounded-full bg-zinc-800"></div>
+                <div className="w-1.5 h-1.5 rounded-full bg-zinc-800"></div>
+              </div>
+            </div>
+            <div className="flex-1 p-6 font-mono text-[10px] overflow-y-auto custom-scrollbar space-y-1.5">
+              {mintLogs.length === 0 ? (
+                <div className="text-zinc-700 italic">Waiting for forge command...</div>
+              ) : (
+                mintLogs.map((log, i) => (
+                  <div key={i} className={`${log.includes('Successfully') ? 'text-emerald-500' : 'text-zinc-500'}`}>
+                    <span className="text-zinc-800 mr-2">[{new Date().toLocaleTimeString([], { hour12: false })}]</span>
+                    {log}
+                  </div>
+                ))
+              )}
+              {isMinting && <div className="text-blue-500 animate-pulse font-black">Executing Quantum Block...</div>}
+            </div>
+          </div>
+        </div>
+
+        {/* Center/Right: Preview & Metadata */}
+        <div className="lg:col-span-2 space-y-8">
+          <div className="bg-zinc-950 border border-zinc-900 rounded-[3rem] p-10 shadow-2xl relative overflow-hidden group">
+            <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,_#1e1b4b_0%,_transparent_50%)] opacity-30"></div>
+            
+            {!nft && !isSynthesizing ? (
+              <div className="h-[500px] flex flex-col items-center justify-center text-center space-y-6 relative z-10 border-2 border-dashed border-zinc-900 rounded-[2rem]">
+                <div className="w-20 h-20 bg-zinc-900 rounded-full flex items-center justify-center text-zinc-700">
+                  <ImageIcon size={40} />
+                </div>
+                <div>
+                  <h3 className="text-zinc-600 font-black uppercase tracking-[0.4em] text-sm">Foundry Idle</h3>
+                  <p className="text-zinc-700 text-xs mt-2 font-medium">Input parameters to initialize synthesis.</p>
+                </div>
+              </div>
+            ) : isSynthesizing ? (
+              <div className="h-[500px] flex flex-col items-center justify-center text-center space-y-8 relative z-10">
+                <div className="relative">
+                  <div className="w-48 h-48 rounded-full border-4 border-blue-500/20 border-t-blue-500 animate-spin"></div>
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    <Zap size={48} className="text-blue-500 animate-pulse" />
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <h3 className="text-white font-black uppercase tracking-[0.4em] italic animate-pulse">Forging Neural Layers</h3>
+                  <p className="text-zinc-500 text-[10px] font-black uppercase tracking-widest">Estimated completion: 8.2s</p>
+                </div>
+              </div>
+            ) : nft ? (
+              <div className="flex flex-col lg:flex-row gap-12 relative z-10 animate-in zoom-in-95 duration-700">
+                <div className="lg:w-1/2">
+                  <div className="relative group">
+                    <div className="absolute -inset-1 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-[2.5rem] blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200"></div>
+                    <img 
+                      src={nft.imageUrl} 
+                      className="relative w-full aspect-square rounded-[2rem] bg-black border border-zinc-800 object-cover shadow-2xl" 
+                      alt="Synthesized NFT" 
+                    />
+                    <div className="absolute top-4 right-4 flex gap-2">
+                      <div className="bg-black/60 backdrop-blur-md px-3 py-1.5 rounded-full border border-white/10 flex items-center gap-2">
+                        <ShieldCheck size={12} className="text-emerald-500" />
+                        <span className="text-[8px] font-black text-white uppercase tracking-widest">AI Verified</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="lg:w-1/2 flex flex-col justify-between">
+                  <div className="space-y-8">
+                    <div>
+                      <span className="px-3 py-1 bg-blue-600/10 text-blue-500 border border-blue-500/20 rounded-full text-[9px] font-black uppercase tracking-widest mb-4 inline-block">Unminted Asset</span>
+                      <h3 className="text-4xl font-black text-white italic tracking-tighter uppercase mb-2 leading-none">{nft.name}</h3>
+                      <p className="text-zinc-500 text-sm leading-relaxed font-medium italic">"{nft.description}"</p>
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-4">
+                      {nft.traits.map((trait, i) => (
+                        <div key={i} className="p-4 bg-black/40 border border-zinc-800 rounded-2xl">
+                          <p className="text-[8px] font-black text-zinc-600 uppercase tracking-widest mb-1">{trait.trait_type}</p>
+                          <p className="text-white font-bold text-xs uppercase">{trait.value}</p>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div className="pt-10 flex gap-4">
+                    <button 
+                      onClick={handleMint}
+                      disabled={isMinting || !openSeaKey || !walletConnected}
+                      className="flex-1 py-5 bg-blue-600 hover:bg-blue-500 text-white rounded-[2rem] font-black text-xs uppercase tracking-[0.3em] transition-all flex items-center justify-center gap-4 shadow-xl shadow-blue-900/30 disabled:opacity-50"
+                    >
+                      {isMinting ? <Loader2 className="animate-spin" size={20} /> : <Hammer size={20} />}
+                      <span>{isMinting ? 'Casting Block...' : 'Forge to OpenSea'}</span>
+                    </button>
+                    <button className="p-5 bg-zinc-900 hover:bg-zinc-800 text-zinc-500 hover:text-white rounded-[2rem] transition-all border border-zinc-800">
+                      <Share2 size={20} />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ) : null}
+          </div>
+
+          <div className="bg-zinc-950 border border-zinc-900 rounded-[3rem] p-10 relative overflow-hidden group shadow-2xl">
+            <div className="flex flex-col md:flex-row justify-between items-center gap-10">
+              <div className="flex items-center gap-8 flex-1 w-full">
+                <div className="w-20 h-20 bg-emerald-500/10 rounded-3xl flex items-center justify-center text-emerald-500 shadow-2xl shadow-emerald-500/5">
+                  <ShieldCheck size={40} />
+                </div>
+                <div className="flex-1">
+                  <h4 className="text-xl font-black text-white italic tracking-tighter uppercase mb-1">OpenSea <span className="text-emerald-500 not-italic">Verified Foundry</span></h4>
+                  <p className="text-zinc-500 text-xs font-medium max-w-md">Lumina Quantum Foundry utilizes dedicated node architecture to ensure gas-optimized minting and instant marketplace visibility.</p>
+                </div>
+              </div>
+              <button className="flex items-center gap-2 text-zinc-600 hover:text-white transition-colors">
+                <span className="text-[10px] font-black uppercase tracking-widest">Review Protocol</span>
+                <ExternalLink size={14} />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CryptView;

views/CryptoTerminal.tsx

@@ -0,0 +1,531 @@
+
+import React, { useState, useMemo, useEffect } from 'react';
+import { 
+  PieChart, Pie, Cell, ResponsiveContainer, Tooltip as RechartsTooltip, 
+  AreaChart, Area, XAxis, YAxis, CartesianGrid 
+} from 'recharts';
+import { 
+  Zap, 
+  ArrowUpRight, 
+  Cpu, 
+  TrendingUp, 
+  Terminal as TerminalIcon, 
+  Activity, 
+  Loader2, 
+  Plus, 
+  RefreshCw,
+  Pause,
+  Play,
+  Settings,
+  BrainCircuit,
+  BarChart3,
+  ShieldCheck,
+  AlertTriangle
+} from 'lucide-react';
+import { cryptoService } from '../services/cryptoService.ts';
+import { getFinancialAdviceStream } from '../services/geminiService.ts';
+import { CoinMarketData, GlobalData, AIInsight, AITradingBot } from '../types/index.ts';
+
+// --- UI Components ---
+
+const AIStatusBadge: React.FC<{ status: 'active' | 'learning' | 'processing' | 'thinking' }> = ({ status }) => {
+    const colors = {
+        active: 'bg-emerald-500',
+        learning: 'bg-blue-500',
+        processing: 'bg-purple-500',
+        thinking: 'bg-cyan-400',
+    };
+    const text = {
+        active: 'Fleet Online',
+        learning: 'Adapting Models',
+        processing: 'High Compute',
+        thinking: 'Synthesizing Alpha',
+    }
+    
+    return (
+        <div className="flex items-center space-x-2 bg-black px-3 py-1.5 rounded-full border border-zinc-800 shadow-inner">
+            <span className={`w-1.5 h-1.5 rounded-full animate-pulse ${colors[status]}`}></span>
+            <span className="text-[9px] font-black text-zinc-500 uppercase tracking-widest">{text[status]}</span>
+        </div>
+    );
+};
+
+const TabButton: React.FC<{ active: boolean; onClick: () => void; label: string }> = ({ active, onClick, label }) => (
+    <button
+        onClick={onClick}
+        className={`px-6 py-4 text-[10px] font-black tracking-[0.2em] transition-all duration-300 border-b-2 uppercase whitespace-nowrap ${
+            active 
+            ? 'border-blue-500 text-white bg-blue-500/5' 
+            : 'border-transparent text-zinc-600 hover:text-zinc-400 hover:bg-white/[0.02]'
+        }`}
+    >
+        {label}
+    </button>
+);
+
+const TerminalCard: React.FC<{ title: string; subtitle?: string; children: React.ReactNode; className?: string }> = ({ title, subtitle, children, className = "" }) => (
+  <div className={`bg-zinc-950 border border-zinc-900 rounded-[2.5rem] p-8 relative overflow-hidden group shadow-2xl ${className}`}>
+      <div className="mb-6 relative z-10 flex justify-between items-start">
+          <div>
+              <h3 className="text-white font-black text-xs uppercase tracking-widest italic flex items-center gap-2">
+                <span className="w-1.5 h-1.5 rounded-full bg-blue-500"></span>
+                {title}
+              </h3>
+              {subtitle && <p className="text-[9px] text-zinc-600 uppercase font-black tracking-widest mt-1">{subtitle}</p>}
+          </div>
+      </div>
+      <div className="relative z-10">{children}</div>
+  </div>
+);
+
+// --- Main Component ---
+
+const CryptoTerminal: React.FC = () => {
+    type ActiveTab = 'summary' | 'bot-fleet' | 'neural-intel' | 'quantum-depth';
+    const [activeTab, setActiveTab] = useState<ActiveTab>('summary');
+    const [markets, setMarkets] = useState<CoinMarketData[]>([]);
+    const [globalData, setGlobalData] = useState<GlobalData | null>(null);
+    const [loading, setLoading] = useState(true);
+    
+    // Stateful Bot Fleet Management
+    const [bots, setBots] = useState<AITradingBot[]>([
+        { id: 'bot-1', name: 'Orion Alpha', strategy: 'Arbitrage', status: 'active', pnl: 2450.12, uptime: '142h' },
+        { id: 'bot-2', name: 'Vesper Node', strategy: 'Momentum', status: 'active', pnl: 810.45, uptime: '89h' },
+        { id: 'bot-3', name: 'Helios Prime', strategy: 'Mean Reversion', status: 'paused', pnl: -120.30, uptime: '24h' },
+        { id: 'bot-4', name: 'Ghost Protocol', strategy: 'Arbitrage', status: 'active', pnl: 11200.50, uptime: '450h' },
+    ]);
+
+    // Chat Interface
+    const [chatInput, setChatInput] = useState('');
+    const [chatHistory, setChatHistory] = useState<{ id: string; sender: 'user' | 'ai'; text: string; timestamp: Date }[]>([
+        { id: '1', sender: 'ai', text: 'Fleet status verified. Orion Alpha is currently identifying spread opportunities on ETH/USDC.', timestamp: new Date() }
+    ]);
+    const [isAiThinking, setIsAiThinking] = useState(false);
+
+    // --- Bot Logic ---
+    const toggleBot = (id: string) => {
+        setBots(prev => prev.map(bot => {
+            if (bot.id === id) {
+                const newStatus = bot.status === 'active' ? 'paused' : 'active';
+                return { ...bot, status: newStatus as 'active' | 'paused' };
+            }
+            return bot;
+        }));
+    };
+
+    const handleProvisionBot = () => {
+        const name = prompt("Enter Neural Designation (e.g. Nebula 7):");
+        if (!name) return;
+        const newBot: AITradingBot = {
+            id: `bot-${Date.now()}`,
+            name,
+            strategy: 'Momentum',
+            status: 'active',
+            pnl: 0,
+            uptime: '0h'
+        };
+        setBots([newBot, ...bots]);
+    };
+
+    // --- Chat Logic ---
+    const handleChatSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!chatInput.trim() || isAiThinking) return;
+        
+        const userMsg = { id: Date.now().toString(), sender: 'user' as const, text: chatInput, timestamp: new Date() };
+        setChatHistory(prev => [...prev, userMsg]);
+        setChatInput('');
+        setIsAiThinking(true);
+
+        const assistantMsgId = (Date.now() + 1).toString();
+        setChatHistory(prev => [...prev, { id: assistantMsgId, sender: 'ai', text: '', timestamp: new Date() }]);
+
+        try {
+            const context = { system: "NEXUS_OS_FLEET_CONTROL", activeBots: bots.filter(b => b.status === 'active').length };
+            const stream = await getFinancialAdviceStream(chatInput, context);
+            
+            let fullContent = '';
+            for await (const chunk of stream) {
+                const text = chunk.text;
+                if (text) {
+                    fullContent += text;
+                    setChatHistory(prev => prev.map(m => 
+                        m.id === assistantMsgId ? { ...m, text: fullContent } : m
+                    ));
+                }
+            }
+        } catch (err) {
+            setChatHistory(prev => prev.map(m => m.id === assistantMsgId ? { ...m, text: 'Neural handshake timed out. Core is still online.' } : m));
+        } finally {
+            setIsAiThinking(false);
+        }
+    };
+
+    // --- Data Polling ---
+    const fetchData = async () => {
+        try {
+            const [marketData, global] = await Promise.all([
+                cryptoService.getMarkets('usd', 8),
+                cryptoService.getGlobal()
+            ]);
+            setMarkets(marketData);
+            setGlobalData(global);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchData();
+        const interval = setInterval(fetchData, 60000);
+        return () => clearInterval(interval);
+    }, []);
+
+    // --- Mocks & Charts ---
+    const aiInsights: AIInsight[] = useMemo(() => [
+        { id: '1', type: 'alpha', message: 'Orion detected unusual L2 liquidity inflow on Optimism. Executing directional bid.', confidence: 98, timestamp: '15s ago', actionable: true },
+        { id: '2', type: 'warning', message: 'Gas prices spiking. Vesper Node shifting to low-frequency mode.', confidence: 92, timestamp: '4m ago', actionable: false },
+        { id: '3', type: 'opportunity', message: 'Ghost Protocol identifies BTC/USDC arbitrage on derivative nodes.', confidence: 99, timestamp: '12m ago', actionable: true }
+    ], []);
+
+    const quantumChartData = useMemo(() => Array.from({ length: 40 }, (_, i) => ({
+        name: `t-${40 - i}`,
+        val: 50 + Math.sin(i / 5) * 30 + Math.random() * 10,
+    })), []);
+
+    return (
+        <div className="space-y-8 animate-in fade-in duration-700 pb-20">
+            {/* Real-time Global Bar */}
+            <div className="bg-zinc-950 border border-zinc-900 rounded-3xl p-6 flex flex-wrap items-center justify-between gap-8 shadow-2xl relative overflow-hidden group">
+                <div className="absolute inset-y-0 left-0 w-1 bg-blue-600 shadow-[0_0_15px_rgba(37,99,235,0.5)]"></div>
+                <div className="flex items-center gap-10">
+                    <div className="space-y-1">
+                        <p className="text-[9px] font-black text-zinc-600 uppercase tracking-widest">Global Cap</p>
+                        <p className="text-sm font-bold text-white mono">
+                            ${globalData ? (globalData.total_market_cap.usd / 1e12).toFixed(2) : '--'}T
+                            <span className={`ml-2 text-[10px] ${globalData?.market_cap_change_percentage_24h_usd >= 0 ? 'text-emerald-500' : 'text-rose-500'}`}>
+                                {globalData?.market_cap_change_percentage_24h_usd.toFixed(1)}%
+                            </span>
+                        </p>
+                    </div>
+                    <div className="space-y-1">
+                        <p className="text-[9px] font-black text-zinc-600 uppercase tracking-widest">Fleet Health</p>
+                        <div className="flex items-center gap-2">
+                             <div className="w-12 h-1 bg-zinc-900 rounded-full overflow-hidden border border-zinc-800">
+                                 <div className="h-full bg-emerald-500 animate-pulse" style={{ width: '85%' }}></div>
+                             </div>
+                             <span className="text-[10px] font-black text-emerald-500 uppercase tracking-widest">Optimal</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <div className="flex items-center gap-4">
+                    <AIStatusBadge status={isAiThinking ? 'thinking' : 'active'} />
+                    <button onClick={fetchData} className="p-2.5 bg-zinc-900 hover:bg-zinc-800 rounded-xl transition-all text-zinc-500 hover:text-white border border-zinc-800">
+                        <RefreshCw size={14} className={loading ? 'animate-spin' : ''} />
+                    </button>
+                </div>
+            </div>
+
+            {/* Navigation */}
+            <div className="flex overflow-x-auto border-b border-zinc-900 scrollbar-hide bg-black/20 rounded-t-3xl">
+                <TabButton active={activeTab === 'summary'} onClick={() => setActiveTab('summary')} label="Control Summary" />
+                <TabButton active={activeTab === 'bot-fleet'} onClick={() => setActiveTab('bot-fleet')} label="Manage Bot Fleet" />
+                <TabButton active={activeTab === 'neural-intel'} onClick={() => setActiveTab('neural-intel')} label="Neural Intelligence" />
+                <TabButton active={activeTab === 'quantum-depth'} onClick={() => setActiveTab('quantum-depth')} label="Quantum Depth" />
+            </div>
+
+            {/* View Layer */}
+            {activeTab === 'summary' && (
+                <div className="grid grid-cols-12 gap-8 animate-in slide-in-from-bottom-4">
+                    <div className="col-span-12 lg:col-span-8 space-y-8">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                             <TerminalCard title="Collective PNL Performance" subtitle="Total yield across 4 registered agents">
+                                <div className="flex items-baseline gap-4 mt-4">
+                                    <h3 className={`text-4xl font-black mono tracking-tighter ${bots.reduce((s, b) => s + b.pnl, 0) >= 0 ? 'text-emerald-500' : 'text-rose-500'}`}>
+                                        ${bots.reduce((s, b) => s + b.pnl, 0).toLocaleString()}
+                                    </h3>
+                                    <span className="text-zinc-500 text-xs font-bold uppercase tracking-widest">Aggregated</span>
+                                </div>
+                                <div className="mt-8 space-y-4">
+                                    {bots.slice(0, 3).map(bot => (
+                                        <div key={bot.id} className="flex justify-between items-center text-[10px] font-black uppercase tracking-widest">
+                                            <span className="text-zinc-500 italic">{bot.name}</span>
+                                            <span className={bot.pnl >= 0 ? 'text-emerald-500' : 'text-rose-500'}>${bot.pnl.toFixed(2)}</span>
+                                        </div>
+                                    ))}
+                                </div>
+                             </TerminalCard>
+
+                             <TerminalCard title="Machine Sentiment" subtitle="Natural language model market polling">
+                                <div className="space-y-6 pt-2">
+                                    <div>
+                                        <div className="flex justify-between text-[9px] font-black uppercase tracking-widest mb-2">
+                                            <span className="text-emerald-500">Bullish Momentum</span>
+                                            <span className="text-white">74%</span>
+                                        </div>
+                                        <div className="w-full bg-zinc-900 h-1.5 rounded-full overflow-hidden border border-zinc-800">
+                                            <div className="bg-emerald-500 h-full shadow-[0_0_10px_#10b981]" style={{ width: '74%' }}></div>
+                                        </div>
+                                    </div>
+                                    <div className="p-5 bg-black border border-zinc-900 rounded-2xl italic text-[11px] text-zinc-500 leading-relaxed font-medium">
+                                        "LQI analysis detects extreme demand for Ethereum Layer 2 scaling tokens. Ghost Protocol is positioning for breakout."
+                                    </div>
+                                </div>
+                             </TerminalCard>
+                        </div>
+
+                        <TerminalCard title="Live Subspace Signals" subtitle="Real-time entanglement of arbitrage opportunities">
+                             <div className="h-64 w-full pt-8">
+                                <ResponsiveContainer width="100%" height="100%">
+                                    <AreaChart data={quantumChartData}>
+                                        <defs>
+                                            <linearGradient id="colorVal" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3}/><stop offset="95%" stopColor="#3b82f6" stopOpacity={0}/></linearGradient>
+                                        </defs>
+                                        <CartesianGrid strokeDasharray="3 3" stroke="#18181b" vertical={false} />
+                                        <XAxis dataKey="name" hide />
+                                        <YAxis hide />
+                                        <Area type="monotone" dataKey="val" stroke="#3b82f6" strokeWidth={3} fillOpacity={1} fill="url(#colorVal)" />
+                                    </AreaChart>
+                                </ResponsiveContainer>
+                             </div>
+                        </TerminalCard>
+                    </div>
+
+                    <div className="col-span-12 lg:col-span-4 space-y-8">
+                        <TerminalCard title="Recent Fleet Intel">
+                            <div className="space-y-6">
+                                {aiInsights.map(insight => (
+                                    <div key={insight.id} className="border-l-2 border-zinc-800 pl-4 py-1 hover:border-blue-500/50 transition-all cursor-default">
+                                        <p className="text-[10px] font-black uppercase tracking-widest text-zinc-600 mb-1">{insight.type} • {insight.timestamp}</p>
+                                        <p className="text-[11px] text-zinc-300 font-medium italic leading-relaxed">"{insight.message}"</p>
+                                    </div>
+                                ))}
+                                <button onClick={() => setActiveTab('bot-fleet')} className="w-full py-4 bg-zinc-900 hover:bg-zinc-800 text-white rounded-2xl font-black text-[9px] uppercase tracking-widest transition-all border border-zinc-800 mt-4 flex items-center justify-center gap-3 shadow-xl">
+                                    <Settings size={14} />
+                                    Manage Registry
+                                </button>
+                            </div>
+                        </TerminalCard>
+
+                        <div className="bg-zinc-950 border border-zinc-900 rounded-[2.5rem] p-8 shadow-2xl relative overflow-hidden">
+                             <div className="absolute top-0 right-0 p-6 opacity-10">
+                                <BrainCircuit size={80} className="text-blue-500" />
+                             </div>
+                             <h4 className="text-white font-black text-xs uppercase tracking-widest italic mb-6">Neural Convergence</h4>
+                             <p className="text-zinc-500 text-[11px] leading-relaxed mb-6 font-medium">Model parity is currently maintained at 99.98% across 12 distributed nodes.</p>
+                             <div className="flex gap-2">
+                                <span className="px-2 py-1 bg-blue-600/10 border border-blue-500/20 rounded text-[8px] font-black text-blue-400 uppercase">Flash 3.0</span>
+                                <span className="px-2 py-1 bg-emerald-600/10 border border-emerald-500/20 rounded text-[8px] font-black text-emerald-400 uppercase">Pro v2</span>
+                             </div>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {/* Bot Fleet View */}
+            {activeTab === 'bot-fleet' && (
+                <div className="space-y-8 animate-in slide-in-from-bottom-4">
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+                        <TerminalCard title="Fleet Registry">
+                             <div className="flex items-center justify-between">
+                                 <div>
+                                     <p className="text-[9px] font-black text-zinc-600 uppercase tracking-widest mb-1">Active Agents</p>
+                                     <h3 className="text-3xl font-black text-white mono">{bots.filter(b => b.status === 'active').length} / {bots.length}</h3>
+                                 </div>
+                                 <div className="p-4 bg-blue-600/10 text-blue-500 rounded-2xl border border-blue-500/20">
+                                     <BrainCircuit size={24} />
+                                 </div>
+                             </div>
+                        </TerminalCard>
+                        <TerminalCard title="Aggregate Profit">
+                             <div className="flex items-center justify-between">
+                                 <div>
+                                     <p className="text-[9px] font-black text-zinc-600 uppercase tracking-widest mb-1">Total USD Harvested</p>
+                                     <h3 className={`text-3xl font-black mono ${bots.reduce((s, b) => s + b.pnl, 0) >= 0 ? 'text-emerald-500' : 'text-rose-500'}`}>
+                                        ${bots.reduce((s, b) => s + b.pnl, 0).toFixed(2)}
+                                     </h3>
+                                 </div>
+                                 <div className="p-4 bg-emerald-500/10 text-emerald-500 rounded-2xl border border-emerald-500/20">
+                                     <TrendingUp size={24} />
+                                 </div>
+                             </div>
+                        </TerminalCard>
+                        <TerminalCard title="Node Provisioning">
+                             <button 
+                                onClick={handleProvisionBot}
+                                className="w-full h-full min-h-[80px] flex flex-col items-center justify-center bg-blue-600 hover:bg-blue-500 text-white rounded-2xl transition-all shadow-xl shadow-blue-900/20 group"
+                             >
+                                 <Plus size={24} className="group-hover:rotate-90 transition-transform duration-500 mb-1" />
+                                 <span className="text-[10px] font-black uppercase tracking-widest">Initialize Agent</span>
+                             </button>
+                        </TerminalCard>
+                    </div>
+
+                    <div className="bg-zinc-950 border border-zinc-900 rounded-[3rem] overflow-hidden shadow-2xl">
+                        <div className="p-8 border-b border-zinc-900 bg-black/20 flex items-center justify-between">
+                            <h3 className="text-white font-black uppercase tracking-widest italic flex items-center gap-3 text-sm">
+                                <TerminalIcon size={18} className="text-blue-500" />
+                                Neural Control Matrix
+                            </h3>
+                        </div>
+                        <div className="overflow-x-auto">
+                            <table className="w-full text-left">
+                                <thead>
+                                    <tr className="border-b border-zinc-900 text-[9px] font-black uppercase tracking-widest text-zinc-500">
+                                        <th className="p-8">Agent Identity</th>
+                                        <th className="p-8">Neural Strategy</th>
+                                        <th className="p-8">Performance (PNL)</th>
+                                        <th className="p-8">Sync Uptime</th>
+                                        <th className="p-8 text-right">Controls</th>
+                                    </tr>
+                                </thead>
+                                <tbody className="divide-y divide-zinc-900">
+                                    {bots.map(bot => (
+                                        <tr key={bot.id} className="group hover:bg-white/[0.01] transition-all">
+                                            <td className="p-8">
+                                                <div className="flex items-center gap-4">
+                                                    <div className={`w-10 h-10 rounded-xl flex items-center justify-center border transition-all ${bot.status === 'active' ? 'bg-blue-600/10 border-blue-500/20 text-blue-500' : 'bg-zinc-900 border-zinc-800 text-zinc-600'}`}>
+                                                        <Activity size={20} />
+                                                    </div>
+                                                    <div>
+                                                        <p className="text-sm font-black text-white uppercase italic">{bot.name}</p>
+                                                        <div className="flex items-center gap-2 mt-1">
+                                                            <div className={`w-1.5 h-1.5 rounded-full ${bot.status === 'active' ? 'bg-emerald-500 shadow-[0_0_8px_#10b981]' : 'bg-rose-500'}`}></div>
+                                                            <span className="text-[9px] font-black text-zinc-600 uppercase tracking-widest">{bot.status}</span>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </td>
+                                            <td className="p-8">
+                                                <span className="px-3 py-1 bg-zinc-900 border border-zinc-800 text-[10px] font-black uppercase text-zinc-400 rounded-lg">
+                                                    {bot.strategy}
+                                                </span>
+                                            </td>
+                                            <td className="p-8">
+                                                <p className={`text-sm font-black mono ${bot.pnl >= 0 ? 'text-emerald-500' : 'text-rose-500'}`}>
+                                                    {bot.pnl >= 0 ? '+' : ''}${bot.pnl.toFixed(2)}
+                                                </p>
+                                            </td>
+                                            <td className="p-8 text-zinc-500 font-mono text-xs font-bold">
+                                                {bot.uptime}
+                                            </td>
+                                            <td className="p-8 text-right">
+                                                <div className="flex items-center justify-end gap-3">
+                                                    <button 
+                                                        onClick={() => toggleBot(bot.id)}
+                                                        className={`p-3 rounded-xl transition-all border ${bot.status === 'active' ? 'bg-rose-500/10 border-rose-500/20 text-rose-500 hover:bg-rose-500 hover:text-white' : 'bg-emerald-500/10 border-emerald-500/20 text-emerald-500 hover:bg-emerald-500 hover:text-white'}`}
+                                                        title={bot.status === 'active' ? 'Pause Agent' : 'Resume Agent'}
+                                                    >
+                                                        {bot.status === 'active' ? <Pause size={16} /> : <Play size={16} />}
+                                                    </button>
+                                                    <button className="p-3 bg-zinc-900 border border-zinc-800 rounded-xl text-zinc-500 hover:text-white transition-all shadow-xl">
+                                                        <Settings size={16} />
+                                                    </button>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {/* Neural Intel Tab */}
+            {activeTab === 'neural-intel' && (
+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                    <div className="lg:col-span-2">
+                        <TerminalCard title="Raw Alpha Stream" subtitle="Machine-generated signals filtered for corporate treasury">
+                             <div className="space-y-4">
+                                {aiInsights.map(insight => (
+                                    <div key={insight.id} className="bg-black border border-zinc-900 p-8 rounded-3xl flex items-start gap-8 hover:border-blue-500/30 transition-all group/item shadow-xl relative overflow-hidden">
+                                        <div className="absolute top-0 right-0 p-4 opacity-5 group-hover/item:opacity-10 transition-opacity">
+                                            <Zap size={60} />
+                                        </div>
+                                        <div className={`mt-1.5 p-3 rounded-xl ${insight.type === 'alpha' ? 'bg-amber-400/10 text-amber-400' : 'bg-blue-500/10 text-blue-500'} border border-white/5`}>
+                                            <TrendingUp size={24} />
+                                        </div>
+                                        <div className="flex-1 space-y-4 relative z-10">
+                                            <div className="flex justify-between items-start">
+                                                <h4 className="text-[10px] font-black uppercase tracking-widest text-zinc-600">{insight.type} signal detected • {insight.timestamp}</h4>
+                                                <span className="px-3 py-1 bg-zinc-900 rounded-full text-[9px] font-black text-blue-500 border border-blue-500/20 shadow-[0_0_10px_#3b82f622]">{insight.confidence}% Match</span>
+                                            </div>
+                                            <p className="text-zinc-200 text-lg font-bold leading-relaxed italic tracking-tight">"{insight.message}"</p>
+                                            {insight.actionable && (
+                                                <button className="px-6 py-2.5 bg-blue-600 hover:bg-blue-500 text-white rounded-xl text-[9px] font-black uppercase tracking-widest transition-all shadow-xl shadow-blue-900/20">Authorize Trade</button>
+                                            )}
+                                        </div>
+                                    </div>
+                                ))}
+                             </div>
+                        </TerminalCard>
+                    </div>
+                    <div className="lg:col-span-1">
+                        <TerminalCard title="Neural Terminal">
+                            <div className="h-[400px] overflow-y-auto space-y-6 mb-6 custom-scrollbar pr-2">
+                                {chatHistory.map(msg => (
+                                    <div key={msg.id} className={`flex ${msg.sender === 'user' ? 'justify-end' : 'justify-start'}`}>
+                                        <div className={`max-w-[90%] p-6 rounded-[2rem] text-sm leading-relaxed ${msg.sender === 'user' ? 'bg-blue-600 text-white rounded-tr-none shadow-xl shadow-blue-900/20 font-bold' : 'bg-black border border-zinc-900 text-zinc-300 rounded-tl-none italic'}`}>
+                                            {msg.text || (isAiThinking && <Loader2 className="animate-spin" size={14} />)}
+                                            <p className={`text-[8px] mt-3 font-black uppercase tracking-widest opacity-40 ${msg.sender === 'user' ? 'text-right' : 'text-left'}`}>
+                                                {msg.timestamp.toLocaleTimeString([], { hour12: false })} • {msg.sender === 'user' ? 'U_IDENT' : 'NEXUS_OUT'}
+                                            </p>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                            <form onSubmit={handleChatSubmit} className="relative">
+                                <input 
+                                    value={chatInput} 
+                                    onChange={(e) => setChatInput(e.target.value)} 
+                                    placeholder="Query fleet intelligence..." 
+                                    className="w-full bg-black border border-zinc-800 rounded-2xl py-5 pl-8 pr-16 text-white text-xs outline-none focus:border-blue-500 transition-all font-bold placeholder:text-zinc-800" 
+                                />
+                                <button type="submit" disabled={isAiThinking} className="absolute right-4 top-1/2 -translate-y-1/2 p-3 bg-blue-600 hover:bg-blue-500 rounded-xl text-white disabled:opacity-50 shadow-xl shadow-blue-900/30 transition-all">
+                                    <ArrowUpRight size={20} />
+                                </button>
+                            </form>
+                        </TerminalCard>
+                    </div>
+                </div>
+            )}
+
+            {/* Depth Tab */}
+            {activeTab === 'quantum-depth' && (
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 animate-in slide-in-from-bottom-4">
+                     <TerminalCard title="Price Action Entanglement" subtitle="Monitoring subspace correlation between BTC and ETH nodes">
+                        <div className="h-96 w-full pt-8">
+                            <ResponsiveContainer width="100%" height="100%">
+                                <AreaChart data={quantumChartData}>
+                                    <defs>
+                                        <linearGradient id="colorSignal" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="#8b5cf6" stopOpacity={0.3}/><stop offset="95%" stopColor="#8b5cf6" stopOpacity={0}/></linearGradient>
+                                    </defs>
+                                    <CartesianGrid strokeDasharray="3 3" stroke="#18181b" />
+                                    <XAxis dataKey="name" hide />
+                                    <YAxis hide />
+                                    <Area type="monotone" dataKey="val" stroke="#8b5cf6" strokeWidth={3} fillOpacity={1} fill="url(#colorSignal)" />
+                                </AreaChart>
+                            </ResponsiveContainer>
+                        </div>
+                    </TerminalCard>
+                    <TerminalCard title="Network Load Analysis">
+                         <div className="flex flex-col items-center justify-center h-96 text-center space-y-8">
+                            <div className="w-40 h-40 rounded-full border-8 border-zinc-900 flex items-center justify-center relative">
+                                 <div className="absolute inset-0 rounded-full border-8 border-t-emerald-500 border-r-emerald-500 border-b-emerald-500/20 border-l-emerald-500/20 animate-spin [animation-duration:3s]"></div>
+                                 <h3 className="text-4xl font-black text-white mono">82<span className="text-sm text-zinc-600">%</span></h3>
+                            </div>
+                            <div>
+                                <p className="text-white font-black text-sm uppercase tracking-widest italic">Core Utilization</p>
+                                <p className="text-zinc-600 text-[10px] font-bold uppercase tracking-widest mt-2">Node stability verified across all regions</p>
+                            </div>
+                         </div>
+                    </TerminalCard>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default CryptoTerminal;

views/DCRManagement.tsx

@@ -0,0 +1,275 @@
+
+import React, { useState, useEffect, useRef } from 'react';
+import { 
+  Key, 
+  Shield, 
+  Plus, 
+  RefreshCw, 
+  Trash2, 
+  ChevronRight, 
+  Fingerprint, 
+  Terminal, 
+  ExternalLink,
+  Eye,
+  EyeOff,
+  CheckCircle2,
+  AlertCircle,
+  Code
+} from 'lucide-react';
+import { ClientRegisterRequest, ClientRegisterResponse } from '../types/index.ts';
+
+const MOCK_INITIAL_CLIENTS: ClientRegisterResponse[] = [
+  {
+    client_id: 'CLI-A192J-B002',
+    client_secret: 'SEC-K992-XXXX-Z102',
+    appId: 'LUMINA_CORE_NODE',
+    client_name: 'Lumina Primary Ledger',
+    clientDisplayName: 'Quantum Master Node',
+    redirect_uris: ['https://lumina.app/auth/callback'],
+    scope: ['accounts_details_transactions', 'customers_profiles'],
+    description: 'The main corporate ledger application for treasury management.',
+    token_endpoint_auth_method: 'client_secret_post'
+  }
+];
+
+const SCOPES = [
+  'accounts_details_transactions',
+  'accounts_routing_number',
+  'customers_profiles',
+  'accounts_statements',
+  'accounts_tax_statements'
+];
+
+const DCRManagement: React.FC = () => {
+  const [clients, setClients] = useState<ClientRegisterResponse[]>(MOCK_INITIAL_CLIENTS);
+  const [isRegistering, setIsRegistering] = useState(false);
+  const [selectedClient, setSelectedClient] = useState<ClientRegisterResponse | null>(null);
+  const [showSecret, setShowSecret] = useState<string | null>(null);
+  const [logs, setLogs] = useState<string[]>(['System: DCR Interface Initialized. Waiting for input...']);
+  const logEndRef = useRef<HTMLDivElement>(null);
+
+  const [form, setForm] = useState<ClientRegisterRequest>({
+    client_name: '',
+    redirect_uris: [''],
+    scope: [],
+    description: '',
+    appId: ''
+  });
+
+  useEffect(() => {
+    logEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [logs]);
+
+  const addLog = (msg: string) => setLogs(prev => [...prev, `${new Date().toLocaleTimeString()} - ${msg}`]);
+
+  const handleRegister = async (e: React.FormEvent) => {
+    e.preventDefault();
+    addLog(`POST /api/dcr/v1/register - payload: ${JSON.stringify(form)}`);
+    
+    setTimeout(() => {
+      const newClient: ClientRegisterResponse = {
+        ...form,
+        client_id: `CLI-${Math.random().toString(36).substring(2, 9).toUpperCase()}`,
+        client_secret: `SEC-${Math.random().toString(36).substring(2, 12).toUpperCase()}`,
+        grant_types: ['authorization_code', 'refresh_token'],
+        token_endpoint_auth_method: 'client_secret_post'
+      };
+      
+      setClients([...clients, newClient]);
+      setIsRegistering(false);
+      addLog(`HTTP/1.1 201 Created - New Client ID: ${newClient.client_id}`);
+    }, 1200);
+  };
+
+  const handleUpdate = (clientId: string) => {
+    addLog(`PUT /api/dcr/v1/register/${clientId} - Requesting metadata refresh...`);
+    setTimeout(() => {
+      addLog(`HTTP/1.1 200 OK - Metadata synchronized for ${clientId}`);
+    }, 800);
+  };
+
+  const handleRevoke = (clientId: string) => {
+    if (!confirm(`Confirm revocation of ${clientId}? This cannot be undone.`)) return;
+    addLog(`DELETE /api/dcr/v1/register/${clientId} - Initiating revocation...`);
+    setTimeout(() => {
+      setClients(clients.filter(c => c.client_id !== clientId));
+      if (selectedClient?.client_id === clientId) setSelectedClient(null);
+      addLog(`HTTP/1.1 204 No Content - Registration ${clientId} purged from vault.`);
+    }, 1000);
+  };
+
+  return (
+    <div className="max-w-7xl mx-auto space-y-8 animate-in fade-in duration-700">
+      <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
+        <div>
+          <h2 className="text-3xl font-bold text-white mb-2 flex items-center gap-3">
+            <Key className="text-blue-500" />
+            Dynamic Client Registry
+          </h2>
+          <p className="text-zinc-500 font-medium">Manage 4th party Data Recipients via FDX-standard DCR flows.</p>
+        </div>
+        <button 
+          onClick={() => {
+            setIsRegistering(true);
+            setSelectedClient(null);
+            setForm({
+              client_name: '',
+              redirect_uris: [''],
+              scope: [],
+              description: '',
+              appId: ''
+            });
+          }}
+          className="flex items-center space-x-2 px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-black text-xs uppercase tracking-widest transition-all shadow-lg shadow-blue-900/30"
+        >
+          <Plus size={18} />
+          <span>New Registration</span>
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <div className="lg:col-span-1 space-y-4 h-[calc(100vh-250px)] overflow-y-auto pr-2 custom-scrollbar">
+          {clients.map(client => (
+            <button 
+              key={client.client_id}
+              onClick={() => {
+                setSelectedClient(client);
+                setIsRegistering(false);
+              }}
+              className={`w-full text-left p-6 rounded-3xl border transition-all group ${
+                selectedClient?.client_id === client.client_id 
+                  ? 'bg-blue-600/10 border-blue-500 shadow-xl shadow-blue-900/10' 
+                  : 'bg-zinc-900 border-zinc-800 hover:border-zinc-700'
+              }`}
+            >
+              <div className="flex justify-between items-start mb-4">
+                <div className={`p-2 rounded-xl ${selectedClient?.client_id === client.client_id ? 'bg-blue-500 text-white' : 'bg-zinc-800 text-zinc-400 group-hover:text-blue-400'}`}>
+                  <Fingerprint size={20} />
+                </div>
+                <div className="flex space-x-2">
+                  <span className="text-[10px] font-black uppercase text-emerald-500 bg-emerald-500/10 px-2 py-0.5 rounded">Active</span>
+                </div>
+              </div>
+              <h4 className="text-white font-bold mb-1 group-hover:text-blue-400 transition-colors">{client.client_name}</h4>
+              <p className="text-zinc-500 text-xs mono tracking-tight mb-4">{client.client_id}</p>
+              <div className="flex items-center gap-4 text-zinc-600">
+                <div className="flex items-center gap-1.5">
+                  <Shield size={12} />
+                  <span className="text-[10px] font-bold uppercase">{client.scope.length} Scopes</span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <ExternalLink size={12} />
+                  <span className="text-[10px] font-bold uppercase">1 URI</span>
+                </div>
+              </div>
+            </button>
+          ))}
+        </div>
+
+        <div className="lg:col-span-2 space-y-8">
+          {isRegistering ? (
+            <div className="bg-zinc-900 border border-zinc-800 rounded-[40px] p-10 animate-in slide-in-from-right-4 duration-500">
+              <h3 className="text-2xl font-black text-white italic tracking-tighter uppercase mb-8 flex items-center gap-3">
+                <Plus className="text-blue-500" />
+                Register New Recipient
+              </h3>
+              <form onSubmit={handleRegister} className="space-y-6">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div className="space-y-2">
+                    <label className="text-[10px] font-black text-zinc-600 uppercase tracking-widest ml-1">App ID (optional)</label>
+                    <input 
+                      value={form.appId}
+                      className="w-full bg-black border border-zinc-800 rounded-2xl px-5 py-3.5 text-white outline-none focus:border-blue-500/50 transition-all"
+                      placeholder="e.g. CORE_NODE_01"
+                      onChange={e => setForm({...form, appId: e.target.value})}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <label className="text-[10px] font-black text-zinc-600 uppercase tracking-widest ml-1">Client Name</label>
+                    <input 
+                      required
+                      value={form.client_name}
+                      className="w-full bg-black border border-zinc-800 rounded-2xl px-5 py-3.5 text-white outline-none focus:border-blue-500/50 transition-all"
+                      placeholder="Legal Recipient Name"
+                      onChange={e => setForm({...form, client_name: e.target.value})}
+                    />
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <label className="text-[10px] font-black text-zinc-600 uppercase tracking-widest ml-1">Description</label>
+                  <textarea 
+                    value={form.description}
+                    className="w-full bg-black border border-zinc-800 rounded-2xl px-5 py-3.5 text-white outline-none focus:border-blue-500/50 transition-all h-24 resize-none"
+                    placeholder="Brief overview of the recipient's purpose..."
+                    onChange={e => setForm({...form, description: e.target.value})}
+                  />
+                </div>
+                <div className="pt-4 flex gap-4">
+                  <button type="submit" className="flex-1 py-4 bg-blue-600 text-white rounded-2xl font-black text-xs uppercase tracking-widest transition-all">Execute Registration</button>
+                  <button type="button" onClick={() => setIsRegistering(false)} className="px-8 py-4 bg-zinc-800 text-white rounded-2xl font-black text-xs uppercase tracking-widest transition-all">Cancel</button>
+                </div>
+              </form>
+            </div>
+          ) : selectedClient ? (
+            <div className="bg-zinc-900 border border-zinc-800 rounded-[40px] p-10 animate-in zoom-in-95 duration-300">
+               <div className="flex justify-between items-start mb-10 pb-10 border-b border-zinc-800">
+                <div className="flex items-center gap-6">
+                  <div className="w-16 h-16 bg-blue-600 rounded-3xl flex items-center justify-center">
+                    <Shield size={32} className="text-white" />
+                  </div>
+                  <div>
+                    <h3 className="text-3xl font-black text-white italic tracking-tighter uppercase">{selectedClient.client_name}</h3>
+                    <p className="text-zinc-500 text-xs font-bold uppercase tracking-widest">Metadata Identity Record</p>
+                  </div>
+                </div>
+                <button onClick={() => handleRevoke(selectedClient.client_id)} className="p-3 text-zinc-500 hover:text-rose-500 transition-colors bg-zinc-800 rounded-xl">
+                  <Trash2 size={18} />
+                </button>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+                <div>
+                  <p className="text-[10px] uppercase font-black text-zinc-600 tracking-widest mb-2">OAuth 2.0 Client Identifier</p>
+                  <div className="bg-black border border-zinc-800 p-4 rounded-2xl flex items-center justify-between group">
+                    <span className="text-white font-mono text-sm">{selectedClient.client_id}</span>
+                    <Code size={16} className="text-zinc-700 group-hover:text-blue-500 transition-colors" />
+                  </div>
+                </div>
+                <div>
+                  <p className="text-[10px] uppercase font-black text-zinc-600 tracking-widest mb-2">Sync Status</p>
+                  <div className="flex items-center gap-3">
+                    <div className="w-2 h-2 rounded-full bg-emerald-500 shadow-[0_0_8px_#10b981]"></div>
+                    <span className="text-white font-black text-xs uppercase">Handshake Parity</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="h-full flex flex-col items-center justify-center bg-zinc-950/50 border-2 border-dashed border-zinc-900 rounded-[40px] text-center p-20">
+              <div className="w-24 h-24 bg-zinc-900 rounded-full flex items-center justify-center mb-6">
+                <Fingerprint size={48} className="text-zinc-800" />
+              </div>
+              <h3 className="text-xl font-bold text-zinc-600 uppercase tracking-[0.2em] mb-2">Registry Offline</h3>
+              <p className="text-zinc-700 text-sm max-w-xs font-medium">Select a recipient node or provision a new registration to view metadata.</p>
+            </div>
+          )}
+          <div className="bg-black border border-zinc-800 rounded-[32px] overflow-hidden shadow-2xl h-64 flex flex-col">
+            <div className="bg-zinc-900/80 px-6 py-3 border-b border-zinc-800 flex justify-between items-center">
+              <div className="flex items-center gap-2">
+                <Terminal size={14} className="text-blue-400" />
+                <span className="text-[10px] font-black uppercase tracking-widest text-zinc-500">DCR Node Trace Log</span>
+              </div>
+            </div>
+            <div className="flex-1 p-6 font-mono text-[11px] overflow-y-auto custom-scrollbar space-y-1">
+              {logs.map((log, i) => (
+                <div key={i} className="text-zinc-600">{log}</div>
+              ))}
+              <div ref={logEndRef} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DCRManagement;

views/Documentation.tsx

@@ -0,0 +1,110 @@
+
+import React from 'react';
+import { BookOpen, Search, Code, LayoutDashboard, Building2, Cpu, ShieldCheck, Zap, Bitcoin, Terminal, ArrowRight, ChevronRight } from 'lucide-react';
+
+const DocSection: React.FC<{ icon: any, title: string, description: string, details: string[] }> = ({ icon: Icon, title, description, details }) => (
+  <div className="group bg-zinc-950 border border-zinc-900 p-10 rounded-[3rem] hover:border-blue-500/30 transition-all shadow-2xl">
+    <div className="flex items-center gap-6 mb-8">
+      <div className="p-4 bg-zinc-900 rounded-2xl text-blue-500 group-hover:scale-110 transition-transform duration-500 border border-zinc-800">
+        <Icon size={24} />
+      </div>
+      <div>
+        <h3 className="text-xl font-black text-white italic tracking-tighter uppercase">{title}</h3>
+        <p className="text-[10px] font-black text-zinc-600 uppercase tracking-widest">Protocol Segment v6.0</p>
+      </div>
+    </div>
+    <p className="text-zinc-400 text-sm leading-relaxed mb-8 font-medium italic">"{description}"</p>
+    <div className="space-y-4 border-t border-zinc-900 pt-8">
+      <h4 className="text-[9px] font-black text-zinc-500 uppercase tracking-widest mb-4">Core Functions</h4>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {details.map((d, i) => (
+          <div key={i} className="flex items-center gap-3 text-xs font-bold text-zinc-300">
+            <div className="w-1.5 h-1.5 rounded-full bg-blue-500"></div>
+            {d}
+          </div>
+        ))}
+      </div>
+    </div>
+  </div>
+);
+
+const Documentation: React.FC = () => {
+  return (
+    <div className="max-w-6xl mx-auto py-20 animate-in slide-in-from-bottom-6 duration-1000">
+      <div className="flex flex-col md:flex-row justify-between items-end mb-20 gap-10">
+        <div>
+          <div className="inline-flex items-center space-x-3 px-4 py-2 bg-blue-500/10 border border-blue-500/20 rounded-full text-[10px] font-black text-blue-500 uppercase tracking-widest mb-6">
+            <BookOpen size={12} />
+            <span>Lumina System Manual</span>
+          </div>
+          <h1 className="text-6xl font-black italic text-white uppercase tracking-tighter leading-none">
+            Documentation <br /> <span className="text-blue-500 not-italic">Core</span>
+          </h1>
+        </div>
+        <div className="relative w-full md:w-96">
+          <Search className="absolute left-6 top-1/2 -translate-y-1/2 text-zinc-600" size={18} />
+          <input 
+            placeholder="Search Protocol Map..."
+            className="w-full bg-zinc-950 border-2 border-zinc-900 focus:border-blue-500/50 rounded-[2rem] py-6 pl-16 pr-8 text-white font-bold outline-none transition-all"
+          />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
+        <DocSection 
+          icon={LayoutDashboard}
+          title="Command Overview"
+          description="The central nervous system of the Lumina Quantum Ledger. Aggregates live data from multiple institutional nodes into a singular dashboard."
+          details={["Real-time Cash Curve Monitoring", "AI-Driven Liquidity Alerts", "Carbon Deficit Tracking", "Node Health Verification"]}
+        />
+        <DocSection 
+          icon={Building2}
+          title="Bank Registry"
+          description="Managed corporate treasury nodes connecting directly to tier-1 banks via the FDX v6 protocol. Secure, read-write access to institutional vaults."
+          details={["FDX Native Handshakes", "Multi-Institution Syncing", "Available Balance Polling", "Real-time Node Status"]}
+        />
+        <DocSection 
+          icon={Cpu}
+          title="Quantum Oracle"
+          description="Neural financial forecasting engine. Runs complex 'What-If' simulations using high-fidelity economic models and predictive drift analysis."
+          details={["Inflation Spike Modeling", "Compute Cost Forecasting", "Market Volatility Stress Testing", "Resilience AA- Ratings"]}
+        />
+        <DocSection 
+          icon={ShieldCheck}
+          title="Record Vault"
+          description="Encrypted long-term storage for audit compliance. Every document is cryptographically signed and stored with sha256 checksum integrity."
+          details={["Institutional Archive Export", "Cryptographic Metadata Storage", "Compliance Audit Trails", "Multi-format Ledger Support"]}
+        />
+        <DocSection 
+          icon={Bitcoin}
+          title="Asset Terminal"
+          description="Decentralized finance gateway for corporate treasuries. High-frequency trading (HFT) interface with neural-enhanced depth analysis."
+          details={["Real-time Global Market Data", "AI Sentiment Monitoring", "High-Frequency Tick Visualization", "Subspace Signal Parity"]}
+        />
+        <DocSection 
+          icon={Zap}
+          title="Onboarding Flows"
+          description="Low-friction institutional integration layer. Dynamically generate secure handshakes for account collection and payment authorization."
+          details={["AI SDK Code Architect", "RTP Payment Triggering", "Dynamic Client Registration", "Secure Token Issuance"]}
+        />
+      </div>
+
+      <div className="mt-20 p-12 bg-blue-600 rounded-[3.5rem] flex flex-col md:flex-row justify-between items-center gap-10 shadow-[0_30px_60px_rgba(37,99,235,0.2)]">
+        <div className="flex items-center gap-8">
+          <div className="w-20 h-20 bg-white/20 rounded-3xl flex items-center justify-center text-white backdrop-blur-md">
+            <Terminal size={40} />
+          </div>
+          <div>
+            <h4 className="text-2xl font-black text-white italic tracking-tighter uppercase mb-2">Need Direct Handshake?</h4>
+            <p className="text-blue-100 text-sm max-w-lg font-bold leading-relaxed">Our AI Terminal architects are online 24/7 to help you deploy custom node integrations and quantum-resistant treasury flows.</p>
+          </div>
+        </div>
+        <button onClick={() => window.history.back()} className="px-10 py-5 bg-white text-blue-600 rounded-2xl font-black text-xs uppercase tracking-widest hover:scale-105 transition-all shadow-xl">
+           Open AI Advisor
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Documentation;

views/Documents.tsx

@@ -0,0 +1,161 @@
+
+import React, { useState } from 'react';
+import { 
+  FileText, 
+  Download, 
+  Search, 
+  Filter, 
+  Calendar, 
+  MoreHorizontal,
+  ChevronRight,
+  ShieldCheck,
+  Tag,
+  Loader2
+} from 'lucide-react';
+import { Document } from '../types/index.ts';
+
+const MOCK_DOCS: Document[] = [
+  { id: 'DOC-8821', documentableId: 'TXN-9021', documentableType: 'transaction', documentType: 'Invoice', fileName: 'INV_CloudCompute_Q1.pdf', size: 124000, createdAt: '2024-03-31', format: 'PDF' },
+  { id: 'DOC-9942', documentableId: 'IA-4401', documentableType: 'internal_account', documentType: 'Tax Form', fileName: 'US_1099_Lumina.pdf', size: 450000, createdAt: '2024-03-15', format: 'PDF' },
+  { id: 'DOC-1025', documentableId: 'PO-5512', documentableType: 'payment_order', documentType: 'JSON Payload', fileName: 'PO_DISBURSE_882.json', size: 12000, createdAt: '2024-03-30', format: 'JSON' },
+];
+
+const Documents: React.FC = () => {
+  const [isExporting, setIsExporting] = useState(false);
+
+  const handleExportArchive = async () => {
+    setIsExporting(true);
+    // Artificial latency for institutional "packaging" feel
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    
+    const exportData = {
+      vault_export_id: `LQI-EXP-${Math.random().toString(36).substring(7).toUpperCase()}`,
+      timestamp: new Date().toISOString(),
+      record_count: MOCK_DOCS.length,
+      documents: MOCK_DOCS,
+      checksum: "sha256-f2e3c4d5a6b7c8d9e0f1..."
+    };
+
+    const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const link = window.document.createElement('a');
+    link.href = url;
+    link.download = `Lumina_Vault_Archive_${new Date().toISOString().split('T')[0]}.json`;
+    window.document.body.appendChild(link);
+    link.click();
+    window.document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+    
+    setIsExporting(false);
+  };
+
+  return (
+    <div className="space-y-10 animate-in fade-in duration-700">
+      <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
+        <div>
+          <h2 className="text-3xl font-black text-white italic tracking-tighter uppercase mb-2">Institutional <span className="text-blue-500 not-italic">Vault</span></h2>
+          <p className="text-zinc-500 text-[10px] font-black uppercase tracking-[0.3em]">Encrypted Storage for Compliance & Treasury Records</p>
+        </div>
+        <div className="flex gap-4">
+          <button 
+            onClick={handleExportArchive}
+            disabled={isExporting}
+            className="flex items-center space-x-2 px-6 py-3 bg-zinc-900 border border-zinc-800 hover:border-zinc-700 text-white rounded-2xl font-black text-[10px] uppercase tracking-widest transition-all disabled:opacity-50"
+          >
+            {isExporting ? <Loader2 size={14} className="animate-spin" /> : <Download size={14} />}
+            <span>{isExporting ? 'Packaging Archive...' : 'Export Archive'}</span>
+          </button>
+          <button className="flex items-center space-x-2 px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-black text-[10px] uppercase tracking-widest transition-all shadow-xl shadow-blue-900/30">
+            <FileText size={14} />
+            <span>Upload Document</span>
+          </button>
+        </div>
+      </div>
+
+      <div className="bg-zinc-950 border border-zinc-900 rounded-[3rem] overflow-hidden shadow-2xl">
+        <div className="p-10 border-b border-zinc-900 flex flex-col md:flex-row justify-between items-center bg-black/20 gap-8">
+          <div className="flex items-center space-x-10 w-full md:w-auto">
+            <div className="flex items-center space-x-4">
+              <div className="p-3 bg-blue-600/10 text-blue-500 rounded-2xl">
+                <ShieldCheck size={20} />
+              </div>
+              <h3 className="text-white font-black uppercase tracking-[0.2em] italic">Compliant Storage</h3>
+            </div>
+          </div>
+          <div className="flex gap-4 w-full md:w-auto">
+            <div className="relative flex-1 md:w-64">
+              <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-600" size={14} />
+              <input 
+                placeholder="Search Archive..."
+                className="w-full bg-black border border-zinc-800 rounded-xl py-2 pl-10 pr-4 text-[10px] font-black uppercase tracking-widest text-white outline-none focus:border-blue-500/50 transition-all"
+              />
+            </div>
+            <button className="p-3 bg-zinc-900 border border-zinc-800 rounded-xl text-zinc-500 hover:text-white transition-all">
+              <Filter size={18} />
+            </button>
+          </div>
+        </div>
+
+        <div className="overflow-x-auto">
+          <table className="w-full text-left">
+            <thead>
+              <tr className="border-b border-zinc-900 bg-black/40 text-[9px] font-black uppercase tracking-[0.3em] text-zinc-500">
+                <th className="px-10 py-5">Record Identifier</th>
+                <th className="py-5">Associated Object</th>
+                <th className="py-5">Metadata</th>
+                <th className="py-5">Created At</th>
+                <th className="px-10 py-5 text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-zinc-900/50">
+              {MOCK_DOCS.map(doc => (
+                <tr key={doc.id} className="group hover:bg-white/[0.02] transition-colors">
+                  <td className="px-10 py-8">
+                    <div className="flex items-center gap-4">
+                      <div className="w-10 h-10 rounded-xl bg-zinc-900 border border-zinc-800 flex items-center justify-center text-zinc-500 group-hover:text-blue-400 transition-colors">
+                        <FileText size={18} />
+                      </div>
+                      <div>
+                        <p className="text-white font-black text-xs uppercase italic truncate max-w-[200px]">{doc.fileName}</p>
+                        <p className="text-[10px] text-zinc-600 font-mono font-bold mt-1 uppercase tracking-tighter">ID: {doc.id} • {(doc.size / 1024).toFixed(1)} KB</p>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="py-8">
+                    <div className="flex items-center gap-2">
+                      <Tag size={12} className="text-zinc-600" />
+                      <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">
+                        {doc.documentableType.replace('_', ' ')}: <span className="text-white mono">{doc.documentableId}</span>
+                      </p>
+                    </div>
+                  </td>
+                  <td className="py-8">
+                    <div className="flex items-center gap-2">
+                      <span className="px-2 py-1 bg-zinc-900 border border-zinc-800 text-[8px] font-black uppercase text-zinc-500 rounded">{doc.format}</span>
+                      <span className="text-[10px] font-bold text-zinc-400 uppercase tracking-widest">{doc.documentType}</span>
+                    </div>
+                  </td>
+                  <td className="py-8">
+                    <div className="flex items-center gap-2 text-zinc-500">
+                      <Calendar size={12} />
+                      <p className="text-[10px] font-bold uppercase tracking-widest">{doc.createdAt}</p>
+                    </div>
+                  </td>
+                  <td className="px-10 py-8 text-right">
+                    <div className="flex items-center justify-end gap-3 opacity-0 group-hover:opacity-100 transition-opacity">
+                      <button className="p-2 text-zinc-500 hover:text-white" title="Download"><Download size={16} /></button>
+                      <button className="p-2 text-zinc-500 hover:text-white"><ChevronRight size={16} /></button>
+                      <button className="p-2 text-zinc-500 hover:text-white"><MoreHorizontal size={16} /></button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Documents;

views/Flows.tsx

@@ -0,0 +1,522 @@
+
+import React, { useState, useRef, useEffect } from 'react';
+import { 
+  Zap, 
+  ArrowRightLeft, 
+  UserPlus, 
+  Search, 
+  MoreHorizontal, 
+  Clock, 
+  CheckCircle2, 
+  XCircle, 
+  Copy,
+  Terminal,
+  ExternalLink,
+  Code,
+  X,
+  Loader2,
+  Cpu,
+  ShieldCheck,
+  Key,
+  Plus,
+  MessageSquare,
+  ArrowRight,
+  RefreshCw,
+  Eye,
+  Trash2,
+  Lock,
+  Globe
+} from 'lucide-react';
+import { AccountCollectionFlow, PaymentFlow } from '../types/index.ts';
+import { callGemini } from '../services/geminiService.ts';
+
+const BRIDGE_URL = "https://admin08077-ai-banking.static.hf.space";
+
+interface ApiKey {
+  id: string;
+  key: string;
+  name: string;
+  scope: string;
+  created_at: string;
+  status: 'ACTIVE' | 'REVOKED';
+}
+
+const INITIAL_ACCOUNT_FLOWS: AccountCollectionFlow[] = [
+  {
+    id: 'ACF-1102',
+    object: 'account_collection_flow',
+    live_mode: true,
+    created_at: '2024-03-20T10:00:00Z',
+    updated_at: '2024-03-31T14:00:00Z',
+    client_token: 'acf_tok_882910398291',
+    status: 'pending',
+    counterparty_id: 'CP-8801',
+    external_account_id: null,
+    payment_types: ['ach', 'wire']
+  }
+];
+
+const INITIAL_PAYMENT_FLOWS: PaymentFlow[] = [
+  {
+    id: 'PF-4421',
+    object: 'payment_flow',
+    live_mode: true,
+    created_at: '2024-03-25T12:00:00Z',
+    updated_at: '2024-03-25T12:30:00Z',
+    client_token: 'pf_tok_4429188',
+    status: 'pending',
+    amount: 500000,
+    currency: 'USD',
+    direction: 'debit',
+    counterparty_id: 'CP-8801',
+    receiving_account_id: null,
+    originating_account_id: 'IA-4401'
+  }
+];
+
+const Flows: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<'account' | 'payment' | 'keys'>('account');
+  const [accountFlows, setAccountFlows] = useState<AccountCollectionFlow[]>(INITIAL_ACCOUNT_FLOWS);
+  const [paymentFlows, setPaymentFlows] = useState<PaymentFlow[]>(INITIAL_PAYMENT_FLOWS);
+  const [apiKeys, setApiKeys] = useState<ApiKey[]>([]);
+
+  const [isSdkModalOpen, setIsSdkModalOpen] = useState(false);
+  const [isInitModalOpen, setIsInitModalOpen] = useState(false);
+  const [selectedFlow, setSelectedFlow] = useState<any>(null);
+
+  // AI SDK Architect State
+  const [sdkChat, setSdkChat] = useState<{ role: 'ai' | 'user', text: string }[]>([
+    { role: 'ai', text: `LQI Neural Architect active. I see your bridge is live at ${BRIDGE_URL}. I can generate the Node.js or Python code required to securely trigger RTP payments through your bridge. What environment are you connecting from?` }
+  ]);
+  const [sdkInput, setSdkInput] = useState('');
+  const [isAiThinking, setIsAiThinking] = useState(false);
+  const [finalCode, setFinalCode] = useState<string | null>(null);
+
+  // Init Form State
+  const [initType, setInitType] = useState<'account' | 'payment'>('account');
+  const [initLoading, setInitLoading] = useState(false);
+  const [initForm, setInitForm] = useState({ counterpartyId: 'CP-8801', amount: '0', currency: 'USD' });
+
+  // API Key State
+  const [newKeyName, setNewKeyName] = useState('');
+  const [generatingKey, setGeneratingKey] = useState(false);
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text);
+  };
+
+  const handleInitializeFlow = async () => {
+    setInitLoading(true);
+    await new Promise(r => setTimeout(r, 1500));
+    
+    const id = initType === 'account' ? `ACF-${Math.floor(1000 + Math.random() * 9000)}` : `PF-${Math.floor(1000 + Math.random() * 9000)}`;
+    const newFlow = {
+      id,
+      object: initType === 'account' ? 'account_collection_flow' : 'payment_flow',
+      live_mode: true,
+      created_at: new Date().toISOString(),
+      updated_at: new Date().toISOString(),
+      client_token: `${initType === 'account' ? 'acf' : 'pf'}_tok_${Math.random().toString(36).substring(7)}`,
+      status: 'pending' as const,
+      counterparty_id: initForm.counterpartyId,
+      ...(initType === 'payment' ? {
+        amount: parseInt(initForm.amount) * 100,
+        currency: initForm.currency,
+        direction: 'debit',
+        receiving_account_id: null,
+        originating_account_id: 'IA-4401'
+      } : {
+        external_account_id: null,
+        payment_types: ['ach', 'wire']
+      })
+    };
+
+    if (initType === 'account') {
+      setAccountFlows([newFlow as any, ...accountFlows]);
+    } else {
+      setPaymentFlows([newFlow as any, ...paymentFlows]);
+    }
+
+    setInitLoading(false);
+    setIsInitModalOpen(false);
+  };
+
+  const handleSdkChat = async () => {
+    if (!sdkInput.trim() || isAiThinking) return;
+    const userMsg = sdkInput;
+    setSdkChat(prev => [...prev, { role: 'user', text: userMsg }]);
+    setSdkInput('');
+    setIsAiThinking(true);
+
+    try {
+      const prompt = `
+        You are the Lumina Quantum Neural Architect. 
+        Context: The user has a Node.js bridge hosted at ${BRIDGE_URL}.
+        The bridge endpoint is /webhooks/trigger-payment.
+        It expects HMAC-SHA256 signatures and a body with: amount, currency, originating_account_id, receiving_account_id, reference_number.
+        
+        Chat History: ${JSON.stringify(sdkChat)}
+        User Instruction: ${userMsg}
+
+        Task: 
+        1. If you need more info (e.g. language or auth secret), ask a short, sharp technical question.
+        2. If you have enough info, generate a full implementation snippet to talk to that bridge.
+        
+        Return JSON format: { "reply": "A brief technical explanation of what you are building", "code": "The full code block or null if still asking questions" }
+      `;
+
+      const response = await callGemini(
+        'gemini-3-flash-preview',
+        prompt,
+        { responseMimeType: "application/json" }
+      );
+
+      const data = JSON.parse(response.candidates?.[0]?.content?.parts?.[0]?.text || '{}');
+      setSdkChat(prev => [...prev, { role: 'ai', text: data.reply }]);
+      if (data.code) setFinalCode(data.code);
+    } catch (err) {
+      setSdkChat(prev => [...prev, { role: 'ai', text: "Handshake sync failed. Please re-specify parameters." }]);
+    } finally {
+      setIsAiThinking(false);
+    }
+  };
+
+  const generateApiKey = async () => {
+    if (!newKeyName) return;
+    setGeneratingKey(true);
+    await new Promise(r => setTimeout(r, 1000));
+    
+    const key: ApiKey = {
+      id: `key_${Math.random().toString(36).substring(7)}`,
+      key: `lq_live_${Math.random().toString(36).substring(2, 15)}`,
+      name: newKeyName,
+      scope: 'registry.read write.payments',
+      created_at: new Date().toISOString(),
+      status: 'ACTIVE'
+    };
+    setApiKeys([key, ...apiKeys]);
+    setNewKeyName('');
+    setGeneratingKey(false);
+  };
+
+  const revokeKey = (id: string) => {
+    setApiKeys(apiKeys.map(k => k.id === id ? { ...k, status: 'REVOKED' } : k));
+  };
+
+  return (
+    <div className="space-y-10 animate-in fade-in duration-700">
+      <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
+        <div>
+          <h2 className="text-3xl font-black text-white italic tracking-tighter uppercase mb-2">Onboarding <span className="text-blue-500 not-italic">Flows</span></h2>
+          <p className="text-zinc-500 text-[10px] font-black uppercase tracking-[0.3em]">Institutional M2M Integration Protocols</p>
+        </div>
+        <div className="flex gap-4">
+          <button 
+            onClick={() => setIsSdkModalOpen(true)}
+            className="flex items-center space-x-2 px-6 py-3 bg-zinc-900 border border-zinc-800 hover:border-zinc-700 text-white rounded-2xl font-black text-[10px] uppercase tracking-widest transition-all"
+          >
+            <Code size={14} />
+            <span>SDK Architect</span>
+          </button>
+          <button 
+            onClick={() => setIsInitModalOpen(true)}
+            className="flex items-center space-x-2 px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-black text-[10px] uppercase tracking-widest transition-all shadow-xl shadow-blue-900/30"
+          >
+            <Zap size={14} />
+            <span>Initialize Flow</span>
+          </button>
+        </div>
+      </div>
+
+      <div className="bg-zinc-950 border border-zinc-900 rounded-[3rem] overflow-hidden shadow-2xl">
+        <div className="flex border-b border-zinc-900 bg-black/20">
+          <button 
+            onClick={() => setActiveTab('account')}
+            className={`flex-1 py-6 px-10 text-[10px] font-black uppercase tracking-[0.3em] flex items-center justify-center gap-3 transition-all ${
+              activeTab === 'account' ? 'text-blue-500 border-b-2 border-blue-500 bg-blue-500/5' : 'text-zinc-600 hover:text-zinc-400'
+            }`}
+          >
+            <UserPlus size={16} />
+            Account Collection
+          </button>
+          <button 
+            onClick={() => setActiveTab('payment')}
+            className={`flex-1 py-6 px-10 text-[10px] font-black uppercase tracking-[0.3em] flex items-center justify-center gap-3 transition-all ${
+              activeTab === 'payment' ? 'text-blue-500 border-b-2 border-blue-500 bg-blue-500/5' : 'text-zinc-600 hover:text-zinc-400'
+            }`}
+          >
+            <ArrowRightLeft size={16} />
+            Payment Onboarding
+          </button>
+          <button 
+            onClick={() => setActiveTab('keys')}
+            className={`flex-1 py-6 px-10 text-[10px] font-black uppercase tracking-[0.3em] flex items-center justify-center gap-3 transition-all ${
+              activeTab === 'keys' ? 'text-emerald-500 border-b-2 border-emerald-500 bg-emerald-500/5' : 'text-zinc-600 hover:text-zinc-400'
+            }`}
+          >
+            <Key size={16} />
+            Node Access Keys
+          </button>
+        </div>
+
+        <div className="p-10 min-h-[400px]">
+          {activeTab === 'keys' ? (
+            <div className="space-y-8">
+              <div className="bg-black/40 border border-zinc-800 rounded-[2rem] p-8">
+                <p className="text-[10px] font-black text-zinc-500 uppercase tracking-widest mb-6">Issue Secure Access Token</p>
+                <div className="flex gap-4">
+                  <input 
+                    value={newKeyName}
+                    onChange={e => setNewKeyName(e.target.value)}
+                    placeholder="External App Name"
+                    className="flex-1 bg-black border border-zinc-800 rounded-xl px-6 py-4 text-white text-xs outline-none focus:border-emerald-500/50"
+                  />
+                  <button onClick={generateApiKey} disabled={generatingKey} className="px-8 bg-emerald-600 hover:bg-emerald-500 text-white rounded-xl font-black text-[10px] uppercase tracking-widest transition-all">
+                    {generatingKey ? <Loader2 size={16} className="animate-spin" /> : 'Issue Token'}
+                  </button>
+                </div>
+              </div>
+              <div className="space-y-4">
+                {apiKeys.map(k => (
+                  <div key={k.id} className="bg-zinc-900 border border-zinc-800 p-6 rounded-2xl flex justify-between items-center group transition-all">
+                    <div className="flex items-center gap-6">
+                      <div className={`p-4 rounded-xl ${k.status === 'ACTIVE' ? 'bg-emerald-500/10 text-emerald-500' : 'bg-zinc-800 text-zinc-600'}`}>
+                        <Key size={18} />
+                      </div>
+                      <div>
+                        <p className="text-white font-black text-xs uppercase italic">{k.name}</p>
+                        <p className="text-[9px] text-zinc-600 font-mono mt-1">{k.key}</p>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-4">
+                      {k.status === 'ACTIVE' && <button onClick={() => revokeKey(k.id)} className="p-2 text-rose-500 hover:bg-rose-500/10 rounded-lg transition-colors"><Trash2 size={16} /></button>}
+                      <div className={`px-3 py-1 rounded-full text-[8px] font-black uppercase tracking-widest ${k.status === 'ACTIVE' ? 'bg-emerald-500/10 text-emerald-500' : 'bg-rose-500/10 text-rose-500'}`}>{k.status}</div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ) : (
+            <div className="space-y-4">
+              {(activeTab === 'account' ? accountFlows : paymentFlows).map((flow: any) => (
+                <div key={flow.id} className="bg-black/40 border border-zinc-900 rounded-[2rem] p-8 group hover:border-zinc-700 transition-all flex flex-col lg:flex-row justify-between items-center gap-8">
+                  <div className="flex items-center gap-6">
+                    <div className="w-14 h-14 bg-zinc-900 border border-zinc-800 rounded-2xl flex items-center justify-center text-zinc-500 group-hover:text-blue-500 transition-all">
+                      {activeTab === 'account' ? <UserPlus size={24} /> : <ArrowRightLeft size={24} />}
+                    </div>
+                    <div>
+                      <div className="flex items-center gap-3 mb-1">
+                        <p className="text-white font-black text-sm uppercase italic">{flow.id}</p>
+                        <StatusBadge status={flow.status} />
+                      </div>
+                      <p className="text-[10px] text-zinc-600 font-bold uppercase tracking-widest">CP_REF: {flow.counterparty_id}</p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-4">
+                    <button 
+                      onClick={() => setSelectedFlow(flow)}
+                      className="px-8 py-3 bg-zinc-900 hover:bg-white hover:text-black text-white rounded-xl text-[10px] font-black uppercase tracking-widest transition-all border border-zinc-800"
+                    >
+                      View Flow
+                    </button>
+                    <button className="p-3 text-zinc-800 hover:text-white transition-colors"><MoreHorizontal size={18} /></button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* SDK Architect Modal */}
+      {isSdkModalOpen && (
+        <div className="fixed inset-0 z-[120] flex items-center justify-center p-6 backdrop-blur-md bg-black/80">
+          <div className="bg-zinc-950 border border-zinc-900 w-full max-w-5xl rounded-[3rem] p-10 shadow-2xl flex flex-col h-[85vh] animate-in zoom-in-95">
+            <div className="flex justify-between items-start mb-8">
+              <div className="flex items-center gap-4">
+                <div className="w-14 h-14 bg-blue-600/10 text-blue-500 rounded-2xl flex items-center justify-center">
+                  <Code size={28} />
+                </div>
+                <div>
+                  <h3 className="text-2xl font-black text-white italic tracking-tighter uppercase">SDK <span className="text-blue-500 not-italic">Architect</span></h3>
+                  <p className="text-[10px] text-zinc-500 font-black uppercase tracking-widest flex items-center gap-2">
+                    <Globe size={12} className="text-emerald-500" />
+                    Targeting: {BRIDGE_URL}
+                  </p>
+                </div>
+              </div>
+              <button onClick={() => setIsSdkModalOpen(false)} className="p-2 text-zinc-500 hover:text-white transition-colors"><X size={24} /></button>
+            </div>
+
+            <div className="flex-1 flex gap-8 overflow-hidden">
+              <div className="flex-1 flex flex-col bg-black border border-zinc-900 rounded-[2rem] overflow-hidden">
+                <div className="flex-1 overflow-y-auto p-8 space-y-8 custom-scrollbar">
+                  {sdkChat.map((m, i) => (
+                    <div key={i} className={`flex ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+                      <div className={`max-w-[85%] p-6 rounded-[1.8rem] text-sm leading-relaxed ${m.role === 'user' ? 'bg-blue-600 text-white rounded-tr-none shadow-xl shadow-blue-900/20' : 'bg-zinc-900 text-zinc-300 rounded-tl-none border border-zinc-800'}`}>
+                        {m.text}
+                      </div>
+                    </div>
+                  ))}
+                  {isAiThinking && <ThinkingState />}
+                </div>
+                <div className="p-6 bg-zinc-900/50 border-t border-zinc-800 flex gap-4">
+                  <input 
+                    value={sdkInput}
+                    onChange={e => setSdkInput(e.target.value)}
+                    onKeyDown={e => e.key === 'Enter' && handleSdkChat()}
+                    placeholder="e.g. Write a Node.js client to trigger a payment of $500..."
+                    className="flex-1 bg-black border border-zinc-800 rounded-2xl px-6 py-4 text-white text-xs outline-none focus:border-blue-500 transition-all font-bold"
+                  />
+                  <button onClick={handleSdkChat} disabled={isAiThinking} className="p-4 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl transition-all shadow-lg shadow-blue-900/40">
+                    <ArrowRight size={20} />
+                  </button>
+                </div>
+              </div>
+
+              <div className="w-1/2 bg-zinc-900 border border-zinc-800 rounded-[2rem] flex flex-col overflow-hidden">
+                <div className="bg-zinc-800/80 px-8 py-5 border-b border-zinc-700 flex justify-between items-center">
+                  <div className="flex items-center gap-3">
+                    <Terminal size={14} className="text-blue-500" />
+                    <span className="text-[10px] font-black uppercase text-zinc-400">Implementation Script</span>
+                  </div>
+                  {finalCode && <button onClick={() => copyToClipboard(finalCode)} className="p-2 hover:bg-zinc-700 rounded-lg text-zinc-500 hover:text-white transition-all"><Copy size={16} /></button>}
+                </div>
+                <div className="flex-1 p-8 font-mono text-[11px] text-zinc-400 overflow-y-auto custom-scrollbar">
+                  {finalCode ? <pre className="whitespace-pre-wrap">{finalCode}</pre> : (
+                    <div className="h-full flex flex-col items-center justify-center text-center opacity-30">
+                      <Cpu size={48} className="mb-4" />
+                      <p className="text-[10px] font-black uppercase tracking-widest">Architect Idle</p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Init Modal */}
+      {isInitModalOpen && (
+        <div className="fixed inset-0 z-[120] flex items-center justify-center p-6 backdrop-blur-md bg-black/80">
+          <div className="bg-zinc-950 border border-zinc-900 w-full max-w-lg rounded-[3rem] p-10 shadow-2xl animate-in zoom-in-95">
+            <div className="flex justify-between items-start mb-8">
+               <div className="flex items-center gap-4">
+                 <div className="w-14 h-14 bg-blue-600/10 text-blue-500 rounded-2xl flex items-center justify-center">
+                   <Zap size={28} />
+                 </div>
+                 <h3 className="text-2xl font-black text-white italic tracking-tighter uppercase">Initialize <span className="text-blue-500 not-italic">Flow</span></h3>
+               </div>
+               <button onClick={() => setIsInitModalOpen(false)} className="p-2 text-zinc-500 hover:text-white transition-colors"><X size={24} /></button>
+            </div>
+            <div className="space-y-6">
+              <div className="grid grid-cols-2 gap-4">
+                <button onClick={() => setInitType('account')} className={`p-6 rounded-2xl border transition-all ${initType === 'account' ? 'bg-blue-600/10 border-blue-600' : 'bg-zinc-900 border-zinc-800 opacity-50'}`}>
+                  <UserPlus className="mb-4" size={20} />
+                  <p className="text-white font-black text-[10px] uppercase">Account Col.</p>
+                </button>
+                <button onClick={() => setInitType('payment')} className={`p-6 rounded-2xl border transition-all ${initType === 'payment' ? 'bg-blue-600/10 border-blue-600' : 'bg-zinc-900 border-zinc-800 opacity-50'}`}>
+                  <ArrowRightLeft className="mb-4" size={20} />
+                  <p className="text-white font-black text-[10px] uppercase">Payment Onbd.</p>
+                </button>
+              </div>
+              <div className="space-y-4">
+                <div className="space-y-2">
+                  <label className="text-[10px] font-black text-zinc-600 uppercase tracking-widest ml-1">Target CP</label>
+                  <input value={initForm.counterpartyId} onChange={e => setInitForm({...initForm, counterpartyId: e.target.value})} className="w-full bg-black border border-zinc-800 rounded-xl p-4 text-white text-xs outline-none" />
+                </div>
+                {initType === 'payment' && (
+                  <div className="space-y-2">
+                    <label className="text-[10px] font-black text-zinc-600 uppercase tracking-widest ml-1">Limit (USD)</label>
+                    <input type="number" value={initForm.amount} onChange={e => setInitForm({...initForm, amount: e.target.value})} className="w-full bg-black border border-zinc-800 rounded-xl p-4 text-white text-xs outline-none" />
+                  </div>
+                )}
+              </div>
+              <button onClick={handleInitializeFlow} disabled={initLoading} className="w-full py-5 bg-blue-600 hover:bg-blue-500 text-white rounded-[2rem] font-black text-xs uppercase tracking-widest transition-all shadow-xl flex items-center justify-center gap-4">
+                {initLoading ? <Loader2 size={20} className="animate-spin" /> : <Plus size={20} />}
+                Establish Flow
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Detail Modal */}
+      {selectedFlow && (
+        <div className="fixed inset-0 z-[130] flex items-center justify-center p-6 backdrop-blur-md bg-black/80">
+          <div className="bg-zinc-950 border border-zinc-900 w-full max-w-2xl rounded-[3.5rem] p-12 shadow-2xl animate-in zoom-in-95">
+            <div className="flex justify-between items-start mb-10 pb-8 border-b border-zinc-900">
+              <div className="flex items-center gap-6">
+                <div className="w-16 h-16 bg-blue-600/10 text-blue-500 rounded-3xl flex items-center justify-center border border-blue-500/20">
+                  {selectedFlow.object === 'account_collection_flow' ? <UserPlus size={32} /> : <ArrowRightLeft size={32} />}
+                </div>
+                <div>
+                  <h3 className="text-3xl font-black text-white italic tracking-tighter uppercase">{selectedFlow.id}</h3>
+                  <div className="flex gap-3 mt-2">
+                    <StatusBadge status={selectedFlow.status} />
+                    <span className="text-[9px] font-black uppercase text-zinc-600 px-3 py-1 bg-zinc-900 rounded-full tracking-widest">LIVE_NODE</span>
+                  </div>
+                </div>
+              </div>
+              <button onClick={() => setSelectedFlow(null)} className="p-3 text-zinc-600 hover:text-white transition-colors"><X size={24} /></button>
+            </div>
+            <div className="space-y-8">
+              <div className="grid grid-cols-2 gap-10">
+                <div>
+                  <p className="text-[10px] font-black text-zinc-600 uppercase tracking-widest mb-2">Registry Entity</p>
+                  <p className="text-white font-bold">{selectedFlow.counterparty_id}</p>
+                </div>
+                <div>
+                  <p className="text-[10px] font-black text-zinc-600 uppercase tracking-widest mb-2">Sync Integrity</p>
+                  <div className="flex items-center gap-2">
+                    <div className="w-2 h-2 bg-emerald-500 rounded-full animate-pulse shadow-[0_0_8px_#10b981]"></div>
+                    <span className="text-emerald-500 font-black text-[10px] uppercase">Node Synchronized</span>
+                  </div>
+                </div>
+              </div>
+              <div className="p-8 bg-black border border-zinc-900 rounded-[2.5rem] space-y-4">
+                 <div className="flex justify-between items-center">
+                    <p className="text-[10px] font-black text-zinc-600 uppercase tracking-widest">Node Handshake Token</p>
+                    <button onClick={() => copyToClipboard(selectedFlow.client_token)} className="text-blue-500 hover:text-blue-400 transition-colors"><Copy size={16} /></button>
+                 </div>
+                 <div className="bg-zinc-950 p-5 rounded-2xl border border-zinc-900 font-mono text-[11px] text-blue-400/80 break-all select-all">
+                   {selectedFlow.client_token}
+                 </div>
+              </div>
+              <div className="flex gap-4">
+                <button className="flex-1 py-5 bg-zinc-900 hover:bg-zinc-800 text-white rounded-[2rem] font-black text-xs uppercase tracking-widest transition-all border border-zinc-800 flex items-center justify-center gap-3">
+                  <Eye size={18} /> Inspect Signals
+                </button>
+                <button className="flex-1 py-5 bg-white hover:bg-zinc-100 text-black rounded-[2rem] font-black text-xs uppercase tracking-widest transition-all shadow-2xl">
+                   Refresh Ledger
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const ThinkingState = () => (
+  <div className="flex items-center gap-4 text-zinc-500">
+    <Loader2 className="animate-spin" size={18} />
+    <span className="text-[10px] font-black uppercase tracking-[0.3em] animate-pulse">Calculating Neural Implementation...</span>
+  </div>
+);
+
+const StatusBadge = ({ status }: { status: string }) => {
+  const styles: Record<string, string> = {
+    pending: 'bg-amber-500/10 text-amber-500 border border-amber-500/20',
+    completed: 'bg-emerald-500/10 text-emerald-500 border border-emerald-500/20',
+    cancelled: 'bg-rose-500/10 text-rose-500 border border-rose-500/20',
+  };
+  return (
+    <div className={`inline-flex items-center px-3 py-1 rounded-full text-[9px] font-black uppercase tracking-widest ${styles[status] || 'bg-zinc-800 text-zinc-500'}`}>
+      {status}
+    </div>
+  );
+};
+
+export default Flows;

views/InternalAccounts.tsx

@@ -0,0 +1,251 @@
+
+import React, { useState, useEffect } from 'react';
+import { 
+  Building2, 
+  RefreshCw, 
+  Activity, 
+  Search, 
+  History, 
+  ExternalLink, 
+  MoreHorizontal,
+  ArrowUpRight,
+  ArrowDownRight,
+  X,
+  Loader2,
+  Fingerprint,
+  User,
+  ShieldCheck,
+  Mail,
+  Phone,
+  MapPin,
+  Globe,
+  Terminal,
+  CreditCard
+} from 'lucide-react';
+import { apiClient } from '../services/api.ts';
+import { InternalAccount, CustomerProfileResponse } from '../types/index.ts';
+import { TableRowSkeleton, Skeleton } from '../components/Skeleton.tsx';
+
+const InternalAccounts: React.FC = () => {
+  const [loading, setLoading] = useState(false);
+  const [accounts, setAccounts] = useState<InternalAccount[]>([]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [connecting, setConnecting] = useState(false);
+  const [newBank, setNewBank] = useState('Wells Fargo');
+
+  const [isProfileOpen, setIsProfileOpen] = useState(false);
+  const [fetchingProfile, setFetchingProfile] = useState(false);
+  const [activeProfile, setActiveProfile] = useState<CustomerProfileResponse | null>(null);
+
+  const fetchAccounts = async () => {
+    setLoading(true);
+    try {
+      const mappedAccounts = await apiClient.getRegistryNodes();
+      setAccounts(mappedAccounts);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleViewProfile = async (accountId: string) => {
+    setIsProfileOpen(true);
+    setFetchingProfile(true);
+    setActiveProfile(null);
+    try {
+      const data = await apiClient.getCustomerProfile(accountId);
+      // Brief aesthetic pause for "neural verification"
+      await new Promise(r => setTimeout(r, 800));
+      setActiveProfile(data);
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setFetchingProfile(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchAccounts();
+  }, []);
+
+  return (
+    <div className="space-y-10 animate-in fade-in duration-700 pb-20">
+      <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
+        <div>
+          <h2 className="text-3xl font-black text-white italic tracking-tighter uppercase mb-2">Internal <span className="text-blue-500 not-italic">Registry</span></h2>
+          <p className="text-zinc-500 text-[10px] font-black uppercase tracking-[0.3em]">Managed Corporate Nodes & Citi-Sync v2.0.0</p>
+        </div>
+        <div className="flex gap-4">
+          <button 
+            onClick={fetchAccounts}
+            disabled={loading}
+            className="flex items-center space-x-2 px-6 py-3 bg-zinc-900 border border-zinc-800 hover:border-zinc-700 text-white rounded-2xl font-black text-[10px] uppercase tracking-widest transition-all"
+          >
+            <RefreshCw size={14} className={loading ? 'animate-spin' : ''} />
+            <span>{loading ? 'Polling Nodes...' : 'Sync All Balances'}</span>
+          </button>
+          <button 
+            onClick={() => setIsModalOpen(true)}
+            className="flex items-center space-x-2 px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-black text-[10px] uppercase tracking-widest transition-all shadow-xl shadow-blue-900/30"
+          >
+            <Building2 size={14} />
+            <span>Establish Connection</span>
+          </button>
+        </div>
+      </div>
+
+      <div className="bg-zinc-950 border border-zinc-900 rounded-[3rem] overflow-hidden shadow-2xl">
+        <div className="p-10 border-b border-zinc-900 flex justify-between items-center bg-black/20">
+          <div className="flex items-center space-x-4">
+            <div className="p-3 bg-blue-500/10 text-blue-500 rounded-2xl">
+              <Activity size={20} />
+            </div>
+            <h3 className="text-white font-black uppercase tracking-[0.2em] italic">Real-time Node Status</h3>
+          </div>
+          <div className="relative">
+            <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-600" size={14} />
+            <input 
+              placeholder="Filter Nodes..."
+              className="bg-black border border-zinc-800 rounded-xl py-2 pl-10 pr-4 text-[10px] font-black uppercase tracking-widest text-white outline-none focus:border-blue-500/50 w-64 transition-all"
+            />
+          </div>
+        </div>
+
+        <div className="overflow-x-auto">
+          <table className="w-full text-left border-collapse">
+            <thead>
+              <tr className="border-b border-zinc-900 bg-black/40 text-[9px] font-black uppercase tracking-[0.3em] text-zinc-500">
+                <th className="px-10 py-5">Node Identity</th>
+                <th className="py-5">Host Institution</th>
+                <th className="py-5">Sync Status</th>
+                <th className="py-5 text-right">Balance (USD)</th>
+                <th className="px-10 py-5 text-right">Action</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-zinc-900/50">
+              {loading ? (
+                <>
+                  <TableRowSkeleton />
+                  <TableRowSkeleton />
+                  <TableRowSkeleton />
+                </>
+              ) : accounts.map(node => (
+                <tr key={node.id} className="group hover:bg-white/[0.02] transition-colors">
+                  <td className="px-10 py-8">
+                    <div className="flex items-center gap-4">
+                      <div className="w-10 h-10 rounded-xl bg-zinc-900 border border-zinc-800 flex items-center justify-center text-zinc-500 group-hover:text-blue-400 transition-colors">
+                        {node.productName.toLowerCase().includes('card') ? <CreditCard size={18} /> : <Building2 size={18} />}
+                      </div>
+                      <div>
+                        <p className="text-white font-black text-xs uppercase italic">{node.productName}</p>
+                        <p className="text-[10px] text-zinc-600 font-mono font-bold mt-1 uppercase tracking-tighter">{node.displayAccountNumber}</p>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="py-8">
+                    <p className="text-xs font-bold text-zinc-400 uppercase tracking-widest">{node.institutionName}</p>
+                    <p className="text-[9px] text-zinc-600 font-bold uppercase mt-1">Ref: {node.connectionId}</p>
+                  </td>
+                  <td className="py-8">
+                    <div className={`inline-flex items-center space-x-2 px-3 py-1 rounded-full border ${
+                      node.status === 'ACTIVE' ? 'bg-emerald-500/5 border-emerald-500/20 text-emerald-500' : 'bg-zinc-500/5 border-zinc-500/20 text-zinc-500'
+                    }`}>
+                      <div className={`w-1.5 h-1.5 rounded-full ${node.status === 'ACTIVE' ? 'bg-emerald-500 animate-pulse' : 'bg-zinc-500'}`}></div>
+                      <span className="text-[9px] font-black uppercase tracking-widest">{node.status}</span>
+                    </div>
+                  </td>
+                  <td className="py-8 text-right">
+                    <p className="text-sm font-black text-white mono tracking-tighter">${node.currentBalance.toLocaleString()}</p>
+                    <p className="text-[9px] text-zinc-600 font-bold uppercase mt-1">Available: ${node.availableBalance.toLocaleString()}</p>
+                  </td>
+                  <td className="px-10 py-8 text-right">
+                    <div className="flex items-center justify-end gap-3 opacity-0 group-hover:opacity-100 transition-opacity">
+                      <button onClick={() => handleViewProfile(node.id)} className="p-2 text-zinc-500 hover:text-blue-500" title="View Account Profile"><User size={16} /></button>
+                      <button className="p-2 text-zinc-500 hover:text-white"><History size={16} /></button>
+                      <button className="p-2 text-zinc-500 hover:text-blue-500"><ExternalLink size={16} /></button>
+                      <button className="p-2 text-zinc-500 hover:text-white"><MoreHorizontal size={16} /></button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Account Profile Modal */}
+      {isProfileOpen && (
+        <div className="fixed inset-0 z-[120] flex items-center justify-center p-6 backdrop-blur-md bg-black/80">
+          <div className="bg-zinc-950 border border-zinc-900 w-full max-w-2xl rounded-[3.5rem] p-12 shadow-2xl animate-in zoom-in-95 overflow-hidden relative">
+            <div className="absolute top-0 right-0 p-10 opacity-5">
+              <Fingerprint size={200} className="text-blue-500" />
+            </div>
+            
+            <div className="relative z-10">
+              <div className="flex justify-between items-start mb-12">
+                <div className="flex items-center gap-6">
+                  <div className="w-16 h-16 bg-blue-600/10 text-blue-500 border border-blue-500/20 rounded-3xl flex items-center justify-center">
+                    <ShieldCheck size={32} />
+                  </div>
+                  <div>
+                    <h3 className="text-3xl font-black text-white italic tracking-tighter uppercase leading-none">Identity <span className="text-blue-500 not-italic">Vault</span></h3>
+                    <p className="text-[10px] text-zinc-500 font-black uppercase tracking-widest mt-2">Compliance Level: FDX v6.0</p>
+                  </div>
+                </div>
+                <button onClick={() => setIsProfileOpen(false)} className="p-3 text-zinc-600 hover:text-white transition-colors bg-zinc-900 rounded-2xl"><X size={24} /></button>
+              </div>
+
+              {fetchingProfile ? (
+                <div className="h-[400px] flex flex-col items-center justify-center space-y-8">
+                  <Loader2 className="animate-spin text-blue-500" size={48} />
+                  <p className="text-zinc-600 text-[10px] font-black uppercase tracking-[0.4em] animate-pulse">Requesting Profile Node...</p>
+                </div>
+              ) : activeProfile ? (
+                <div className="space-y-10 animate-in slide-in-from-bottom-6">
+                  <div className="grid grid-cols-2 gap-10">
+                    <div className="space-y-6">
+                      <div className="p-6 bg-black border border-zinc-900 rounded-3xl">
+                        <p className="text-[9px] font-black text-zinc-600 uppercase tracking-widest mb-3 flex items-center gap-2"><User size={12} className="text-blue-500" />Legal Name Registry</p>
+                        <h4 className="text-white font-bold text-lg italic uppercase">{activeProfile.customer.title} {activeProfile.customer.firstName} {activeProfile.customer.lastName}</h4>
+                        <p className="text-[9px] text-zinc-500 font-black uppercase mt-1 tracking-widest">{activeProfile.customer.companyName}</p>
+                      </div>
+                      <div className="p-6 bg-black border border-zinc-900 rounded-3xl">
+                        <p className="text-[9px] font-black text-zinc-600 uppercase tracking-widest mb-3 flex items-center gap-2"><Mail size={12} className="text-blue-500" />Verified Signals</p>
+                        {activeProfile.contacts.emails.map((email, i) => (
+                          <p key={i} className="text-blue-400 font-mono text-xs mb-1">{email}</p>
+                        ))}
+                      </div>
+                    </div>
+                    <div className="space-y-6">
+                      <div className="p-8 bg-black border border-zinc-900 rounded-[2.5rem]">
+                        <p className="text-[9px] font-black text-zinc-600 uppercase tracking-widest mb-4 flex items-center gap-2"><MapPin size={12} className="text-blue-500" />Geospatial Registry</p>
+                        {activeProfile.contacts.addresses.map((addr, i) => (
+                          <div key={i} className="space-y-1">
+                            <p className="text-white font-bold text-xs uppercase">{addr.addressLine1}</p>
+                            <p className="text-zinc-500 text-xs font-medium">{addr.city}, {addr.region} {addr.postalCode}</p>
+                          </div>
+                        ))}
+                      </div>
+                      <div className="p-6 bg-blue-600/5 border border-blue-500/10 rounded-3xl">
+                        <p className="text-[9px] font-black text-blue-500 uppercase tracking-widest mb-3 flex items-center gap-2"><Terminal size={10} />Node Metadata</p>
+                        <p className="text-[9px] text-zinc-600 font-mono leading-relaxed">
+                          PROTOCOL: FDX_V6_NATIVE<br />ACTOR: PARTNER_USER<br />TRUST_SCORE: 100/100
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                  <button onClick={() => setIsProfileOpen(false)} className="w-full py-5 bg-white text-black rounded-[2rem] font-black text-xs uppercase tracking-[0.4em] transition-all hover:bg-zinc-200 shadow-2xl">
+                    Seal Identity Node
+                  </button>
+                </div>
+              ) : null}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default InternalAccounts;

views/Landing.tsx

@@ -0,0 +1,181 @@
+
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { 
+  Cpu, Sparkles, ArrowRight, Loader2, X, Terminal, Mic, Zap, MessageSquare, ChevronDown, 
+  ShieldCheck, Globe, Activity 
+} from 'lucide-react';
+import { speakText, processVoiceCommand } from '../services/geminiService';
+import { apiClient } from '../services/api';
+
+// Powerhouse Component Imports
+import NexusNode from './landing/NexusNode';
+import IntelligenceAlpha from './landing/IntelligenceAlpha';
+import SystemFabric from './landing/SystemFabric';
+import RegistryVault from './landing/RegistryVault';
+import PrivacyManifesto from './landing/PrivacyManifesto';
+import AssetFoundry from './landing/AssetFoundry';
+import QuantumCompute from './landing/QuantumCompute';
+import LiquidityMesh from './landing/LiquidityMesh';
+import EncryptionProtocol from './landing/EncryptionProtocol';
+import OracleAuthority from './landing/OracleAuthority';
+
+const Landing: React.FC = () => {
+  const navigate = useNavigate();
+  const [isVoiceOpen, setIsVoiceOpen] = useState(false);
+  const [voiceInput, setVoiceInput] = useState('');
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [isDemoLoading, setIsDemoLoading] = useState(false);
+  const [voiceStatus, setVoiceStatus] = useState('Standby for Neural Input...');
+
+  const handleDemoAccess = async () => {
+    if (isDemoLoading) return;
+    setIsDemoLoading(true);
+    try {
+      const { success } = await apiClient.auth.login('alex', 'password123');
+      if (success) {
+        window.dispatchEvent(new Event('auth-update'));
+        navigate('/');
+      }
+    } catch (err) {
+      console.error("Demo handshake failed", err);
+    } finally {
+      setIsDemoLoading(false);
+    }
+  };
+
+  const handleVoiceAction = async () => {
+    if (!voiceInput.trim()) return;
+    setIsProcessing(true);
+    setVoiceStatus('Synchronizing Subspace Signals...');
+    
+    const result = await processVoiceCommand(voiceInput);
+    
+    if (result.action === 'SEND_MONEY') {
+      const localPayments = JSON.parse(localStorage.getItem('lumina_payments') || '[]');
+      const newPayment = {
+        transactionId: `TX-${Math.floor(1000 + Math.random() * 9000)}`,
+        baseCurrencyTransactionAmount: -result.amount,
+        transactionDescription: `VOICE_AUTHORIZED: ${result.recipient.toUpperCase()}`,
+        transactionType: 'Outgoing',
+        transactionStatus: 'Completed',
+        transactionDateTime: new Date().toISOString(),
+        transactionReferenceNumber: `REF-${Math.floor(1000 + Math.random() * 9000)}`,
+        category: result.category,
+        recipient: result.recipient,
+        amount: result.amount
+      };
+      localStorage.setItem('lumina_payments', JSON.stringify([newPayment, ...localPayments]));
+      setVoiceStatus(result.narration);
+      await speakText(result.narration);
+      setTimeout(() => {
+        setIsVoiceOpen(false);
+        setVoiceInput('');
+        setVoiceStatus('Standby for Neural Input...');
+        navigate('/payments'); 
+      }, 3000);
+    } else {
+      setVoiceStatus(result.narration);
+      await speakText(result.narration);
+    }
+    setIsProcessing(false);
+  };
+
+  return (
+    <div className="min-h-screen bg-[#020202] text-white font-sans overflow-x-hidden relative selection:bg-blue-500/30 selection:text-blue-200">
+      <div className="fixed inset-0 z-0 pointer-events-none opacity-20">
+        <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_50%_50%,_#1e1b4b_0%,_transparent_70%)]"></div>
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:60px_60px]"></div>
+      </div>
+
+      <nav className="fixed top-0 left-0 w-full z-[100] px-10 py-6 flex justify-between items-center backdrop-blur-md bg-black/10 border-b border-white/5">
+        <div className="flex items-center gap-4">
+          <div className="w-10 h-10 bg-white rounded-xl flex items-center justify-center">
+            <Cpu size={20} className="text-black" />
+          </div>
+          <div>
+            <h1 className="text-sm font-black italic tracking-tighter text-white uppercase leading-none">Lumina <span className="text-blue-500 not-italic">Quantum</span></h1>
+            <p className="text-[8px] uppercase tracking-[0.4em] font-bold text-zinc-600">Institutional Ledger</p>
+          </div>
+        </div>
+        <div className="hidden md:flex items-center gap-10">
+          <button onClick={handleDemoAccess} className="px-6 py-3 bg-blue-600 text-white rounded-full font-black text-[9px] uppercase tracking-widest hover:bg-blue-500 transition-all flex items-center gap-2">
+            {isDemoLoading ? <Loader2 size={12} className="animate-spin" /> : <Sparkles size={12} />}
+            Test Drive
+          </button>
+          <button onClick={() => navigate('/login')} className="px-8 py-3 bg-white text-black rounded-full font-black text-[9px] uppercase tracking-widest hover:bg-zinc-200 transition-all shadow-xl">Terminal</button>
+        </div>
+      </nav>
+
+      <section className="relative z-10 min-h-screen flex flex-col justify-center items-center max-w-7xl mx-auto px-10 pt-32 pb-20 text-center">
+        <div className="inline-flex items-center gap-3 px-6 py-2 bg-blue-500/10 border border-blue-500/20 rounded-full animate-in zoom-in-95 duration-700 mb-10">
+          <Sparkles size={14} className="text-blue-500" />
+          <span className="text-[10px] font-black uppercase tracking-[0.4em] text-blue-500">Node Architecture Verified • v6.2.0</span>
+        </div>
+        <h1 className="text-[8rem] lg:text-[11rem] font-black italic tracking-tighter uppercase leading-[0.75] mb-10">Quantum <br /><span className="text-blue-600 not-italic">Ledger</span></h1>
+        <p className="text-zinc-500 text-xl lg:text-2xl font-medium italic max-w-2xl mx-auto mb-10">"The definitive interface for high-velocity institutional assets. Route neural signals through the mesh with zero-latency parity."</p>
+        <div className="flex flex-wrap justify-center gap-8 pt-8">
+          <button onClick={handleDemoAccess} className="px-12 py-7 bg-white text-black rounded-[2.5rem] font-black text-xs uppercase tracking-[0.5em] flex items-center gap-6 hover:bg-blue-500 hover:text-white transition-all shadow-[0_30px_60px_rgba(255,255,255,0.1)] group">
+            {isDemoLoading ? <Loader2 size={20} className="animate-spin" /> : <span>Start Test Drive</span>}
+            <ArrowRight size={20} className="group-hover:translate-x-3 transition-transform" />
+          </button>
+          <button onClick={() => setIsVoiceOpen(true)} className="px-12 py-7 bg-zinc-950 border border-zinc-800 text-white rounded-[2.5rem] font-black text-xs uppercase tracking-[0.5em] flex items-center gap-6 hover:border-blue-500 transition-all shadow-2xl group">
+            <Mic size={20} className="text-blue-500" />
+            Neural Command
+          </button>
+        </div>
+        <div className="mt-20 animate-bounce opacity-20"><ChevronDown size={32} /></div>
+      </section>
+
+      <NexusNode />
+      <IntelligenceAlpha />
+      <SystemFabric />
+      <RegistryVault />
+      <PrivacyManifesto />
+      <AssetFoundry />
+      <QuantumCompute />
+      <LiquidityMesh />
+      <EncryptionProtocol />
+      <OracleAuthority />
+
+      <footer className="relative z-10 py-40 max-w-7xl mx-auto px-10 text-center space-y-24">
+         <div className="pt-20 border-t border-white/5 space-y-12">
+            <div className="flex justify-center gap-16 opacity-30 grayscale hover:grayscale-0 hover:opacity-100 transition-all duration-700">
+               <ShieldCheck size={48} /><Globe size={48} /><Activity size={48} /><Zap size={48} />
+            </div>
+            <p className="text-[9px] font-black uppercase tracking-[1em] text-zinc-800">Lumina Quantum Systems • Citibank Demo Business Inc • 527 Org Protocol • 2025</p>
+         </div>
+      </footer>
+
+      {isVoiceOpen && (
+        <div className="fixed inset-0 z-[200] flex items-center justify-center p-6 backdrop-blur-xl bg-black/90">
+           <div className="bg-zinc-950 border border-zinc-900 w-full max-w-2xl rounded-[4rem] p-16 shadow-2xl animate-in zoom-in-95 relative overflow-hidden">
+              <div className="relative z-10 space-y-12">
+                 <div className="flex justify-between items-start">
+                    <div className="flex items-center gap-6">
+                       <div className={`p-5 rounded-3xl ${isProcessing ? 'bg-blue-600 animate-pulse' : 'bg-blue-600/10'} text-blue-500 border border-blue-500/20 shadow-2xl shadow-blue-500/5`}>
+                          <Mic size={32} />
+                       </div>
+                       <div>
+                          <h3 className="text-2xl font-black text-white italic tracking-tighter uppercase">Neural <span className="text-blue-500 not-italic">Command</span></h3>
+                          <p className="text-[10px] text-zinc-500 font-black uppercase tracking-widest mt-2">Natural Language Treasury Interface</p>
+                       </div>
+                    </div>
+                    <button onClick={() => setIsVoiceOpen(false)} className="p-4 text-zinc-600 hover:text-white transition-colors bg-zinc-900 rounded-2xl"><X size={24} /></button>
+                 </div>
+                 <div className="space-y-6">
+                    <textarea value={voiceInput} onChange={(e) => setVoiceInput(e.target.value)} placeholder="e.g. Send $2,500 to AWS..." className="w-full bg-black border-2 border-zinc-900 focus:border-blue-500/50 rounded-[2.5rem] p-10 text-white text-xl font-bold leading-relaxed tracking-tight h-48 outline-none transition-all resize-none placeholder:text-zinc-800" />
+                    <div className="flex items-center justify-between px-2">
+                       <div className="flex items-center gap-3"><div className={`w-2 h-2 rounded-full ${isProcessing ? 'bg-blue-500 animate-ping' : 'bg-emerald-500'}`}></div><span className="text-[10px] font-black text-zinc-500 uppercase tracking-widest">{voiceStatus}</span></div>
+                       <button onClick={handleVoiceAction} disabled={isProcessing || !voiceInput.trim()} className="px-10 py-5 bg-blue-600 hover:bg-blue-500 disabled:bg-zinc-900 disabled:text-zinc-700 text-white rounded-[2rem] font-black text-[10px] uppercase tracking-widest transition-all shadow-xl shadow-blue-900/40 flex items-center gap-4">{isProcessing ? <Loader2 className="animate-spin" size={20} /> : <Zap size={20} />}Execute Signal</button>
+                    </div>
+                 </div>
+              </div>
+           </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Landing;

views/LineItems.tsx

@@ -0,0 +1,176 @@
+
+import React, { useState } from 'react';
+/* Fix: react-router-dom exports may be flaky in this environment, using standard v6 imports */
+import { useParams, useNavigate } from 'react-router-dom';
+import { 
+  ListTree, 
+  ArrowLeft, 
+  Edit3, 
+  Save, 
+  X, 
+  MoreVertical, 
+  Search, 
+  Hash, 
+  FileText,
+  Tag
+} from 'lucide-react';
+import { LineItem, LineItemUpdateRequest } from '../types/index';
+
+const MOCK_LINE_ITEMS: LineItem[] = [
+  { id: 'LI-001', amount: 12000.50, currency: 'USD', description: 'Monthly Compute - Node A', ledger_account_id: 'LED-991', itemizable_id: 'TXN-8821', itemizable_type: 'payment_orders', createdAt: '2024-03-25' },
+  { id: 'LI-002', amount: 2500.00, currency: 'USD', description: 'Storage Surcharge - Region East', ledger_account_id: 'LED-992', itemizable_id: 'TXN-8821', itemizable_type: 'payment_orders', createdAt: '2024-03-25' },
+  { id: 'LI-003', amount: 30499.50, currency: 'USD', description: 'Quantum Networking Handshake', ledger_account_id: 'LED-991', itemizable_id: 'TXN-8821', itemizable_type: 'payment_orders', createdAt: '2024-03-25' },
+];
+
+const LineItems: React.FC = () => {
+  const { type, id } = useParams<{ type: string; id: string }>();
+  const navigate = useNavigate();
+  const [items, setItems] = useState<LineItem[]>(MOCK_LINE_ITEMS);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editForm, setEditForm] = useState<LineItemUpdateRequest>({});
+
+  const handleEdit = (item: LineItem) => {
+    setEditingId(item.id);
+    setEditForm({ description: item.description });
+  };
+
+  const handleSave = (id: string) => {
+    setItems(prev => prev.map(item => item.id === id ? { ...item, ...editForm } : item));
+    setEditingId(null);
+  };
+
+  return (
+    <div className="space-y-10 animate-in fade-in duration-700">
+      <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
+        <div className="flex items-center gap-6">
+          <button 
+            onClick={() => navigate(-1)}
+            className="p-3 bg-zinc-900 border border-zinc-800 rounded-2xl text-zinc-500 hover:text-white transition-all"
+          >
+            <ArrowLeft size={20} />
+          </button>
+          <div>
+            <h2 className="text-3xl font-black text-white italic tracking-tighter uppercase mb-2">Line <span className="text-blue-500 not-italic">Ledger</span></h2>
+            <p className="text-zinc-500 text-[10px] font-black uppercase tracking-[0.3em]">
+              {type?.replace('_', ' ')} ID: <span className="text-zinc-400 mono">{id}</span>
+            </p>
+          </div>
+        </div>
+        <div className="flex gap-4">
+          <div className="relative">
+            <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-600" size={14} />
+            <input 
+              placeholder="Search Items..."
+              className="bg-black border border-zinc-800 rounded-xl py-2 pl-10 pr-4 text-[10px] font-black uppercase tracking-widest text-white outline-none focus:border-blue-500/50 transition-all w-64"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-zinc-950 border border-zinc-900 rounded-[3rem] overflow-hidden shadow-2xl">
+        <div className="p-10 border-b border-zinc-900 flex justify-between items-center bg-black/20">
+          <div className="flex items-center space-x-4">
+            <div className="p-3 bg-blue-500/10 text-blue-500 rounded-2xl">
+              <ListTree size={20} />
+            </div>
+            <h3 className="text-white font-black uppercase tracking-[0.2em] italic">Granular Breakdown</h3>
+          </div>
+        </div>
+
+        <div className="overflow-x-auto">
+          <table className="w-full text-left">
+            <thead>
+              <tr className="border-b border-zinc-900 bg-black/40 text-[9px] font-black uppercase tracking-[0.3em] text-zinc-500">
+                <th className="px-10 py-5">Item Detail</th>
+                <th className="py-5">Ledger Mapping</th>
+                <th className="py-5">Created At</th>
+                <th className="py-5 text-right">Amount (USD)</th>
+                <th className="px-10 py-5 text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-zinc-900/50">
+              {items.map(item => (
+                <tr key={item.id} className="group hover:bg-white/[0.01] transition-colors">
+                  <td className="px-10 py-8">
+                    <div className="flex items-center gap-4">
+                      <div className="w-10 h-10 rounded-xl bg-zinc-900 border border-zinc-800 flex items-center justify-center text-zinc-500 group-hover:text-blue-400 transition-colors">
+                        <Tag size={18} />
+                      </div>
+                      <div className="flex-1 min-w-[300px]">
+                        {editingId === item.id ? (
+                          <input 
+                            value={editForm.description}
+                            onChange={e => setEditForm({ ...editForm, description: e.target.value })}
+                            className="w-full bg-black border border-zinc-800 rounded-lg px-3 py-1 text-xs text-white outline-none focus:border-blue-500/50"
+                            autoFocus
+                          />
+                        ) : (
+                          <p className="text-white font-black text-xs uppercase italic">{item.description}</p>
+                        )}
+                        <p className="text-[10px] text-zinc-600 font-mono font-bold mt-1 uppercase tracking-tighter">ID: {item.id}</p>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="py-8">
+                    <div className="flex items-center gap-2">
+                      <Hash size={12} className="text-zinc-600" />
+                      <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">{item.ledger_account_id}</p>
+                    </div>
+                  </td>
+                  <td className="py-8">
+                    <p className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">{item.createdAt}</p>
+                  </td>
+                  <td className="py-8 text-right">
+                    <p className="text-sm font-black text-white mono tracking-tighter">${item.amount.toLocaleString(undefined, { minimumFractionDigits: 2 })}</p>
+                    <p className="text-[9px] text-zinc-600 font-bold uppercase mt-1">{item.currency}</p>
+                  </td>
+                  <td className="px-10 py-8 text-right">
+                    <div className="flex items-center justify-end gap-3">
+                      {editingId === item.id ? (
+                        <>
+                          <button onClick={() => handleSave(item.id)} className="p-2 text-emerald-500 hover:text-emerald-400 transition-colors">
+                            <Save size={18} />
+                          </button>
+                          <button onClick={() => setEditingId(null)} className="p-2 text-rose-500 hover:text-rose-400 transition-colors">
+                            <X size={18} />
+                          </button>
+                        </>
+                      ) : (
+                        <div className="flex items-center justify-end gap-3 opacity-0 group-hover:opacity-100 transition-opacity">
+                          <button onClick={() => handleEdit(item)} className="p-2 text-zinc-500 hover:text-white" title="Update Line Item">
+                            <Edit3 size={16} />
+                          </button>
+                          <button className="p-2 text-zinc-500 hover:text-white"><MoreVertical size={16} /></button>
+                        </div>
+                      )}
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div className="bg-zinc-900/50 border border-zinc-800 p-10 rounded-[2.5rem] flex flex-col md:flex-row justify-between items-center gap-8">
+        <div className="flex items-center gap-6">
+          <div className="p-4 bg-zinc-800 rounded-2xl text-zinc-400">
+            <FileText size={24} />
+          </div>
+          <div>
+            <h4 className="text-white font-black text-sm uppercase tracking-widest mb-1 italic">Total Aggregate</h4>
+            <p className="text-zinc-500 text-[10px] font-bold uppercase tracking-widest">Calculated from {items.length} granular entries</p>
+          </div>
+        </div>
+        <div className="text-right">
+          <p className="text-3xl font-black text-white mono tracking-tighter">
+            ${items.reduce((sum, i) => sum + i.amount, 0).toLocaleString(undefined, { minimumFractionDigits: 2 })}
+          </p>
+          <p className="text-[10px] font-black text-blue-500 uppercase tracking-widest mt-1">Verified Audit Payload</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LineItems;

views/Login.tsx

@@ -0,0 +1,235 @@
+
+import React, { useState, useEffect, useRef } from 'react';
+import { 
+  ShieldCheck, 
+  Cpu, 
+  Key, 
+  Terminal, 
+  Lock, 
+  Loader2, 
+  CheckCircle2, 
+  Zap,
+  ShieldAlert,
+  ArrowRight,
+  Fingerprint,
+  FileCheck,
+  UserPlus
+} from 'lucide-react';
+import { apiClient } from '../services/api.ts';
+
+const Login: React.FC = () => {
+  const [loading, setLoading] = useState(false);
+  const [isRegistering, setIsRegistering] = useState(false);
+  const [stage, setStage] = useState<'IDLE' | 'AUTHORIZING' | 'CONSENT' | 'EXCHANGING' | 'VERIFIED'>('IDLE');
+  const [logs, setLogs] = useState<string[]>(["LQI Auth Engine v1.3.0 (Persistent DB) initializing..."]);
+  const [error, setError] = useState<string | null>(null);
+  const [successMsg, setSuccessMsg] = useState<string | null>(null);
+  const logEndRef = useRef<HTMLDivElement>(null);
+
+  const [params, setParams] = useState({
+    username: '',
+    password: '',
+  });
+
+  useEffect(() => {
+    logEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [logs]);
+
+  const addLog = (msg: string) => setLogs(prev => [...prev, `${new Date().toLocaleTimeString()} - ${msg}`]);
+
+  const handleAuth = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (loading) return;
+
+    setLoading(true);
+    setError(null);
+    setSuccessMsg(null);
+    addLog(`INIT: Establishing ${isRegistering ? 'Registration' : 'Login'} protocol handshake...`);
+    
+    try {
+      if (isRegistering) {
+        const { success, error: regError } = await apiClient.auth.register(params.username, params.password);
+        if (success) {
+          addLog("DB_WRITE: New identity node successfully written to disk.");
+          setSuccessMsg("Registration complete. Initialize handshake to sign in.");
+          setIsRegistering(false);
+        } else {
+          throw new Error(regError || "Registration handshake denied.");
+        }
+      } else {
+        const { success, user, error: loginError } = await apiClient.auth.login(params.username, params.password);
+        if (success && user) {
+          addLog("DB_QUERY: Identity parity confirmed via cryptographic hash.");
+          setStage('VERIFIED');
+          setTimeout(() => {
+            window.dispatchEvent(new Event('auth-update'));
+          }, 1000);
+        } else {
+          throw new Error(loginError || "Handshake rejected by identity node.");
+        }
+      }
+    } catch (err: any) {
+      addLog(`CRITICAL: ${err.message}`);
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-[#020202] flex items-center justify-center p-6 relative overflow-hidden font-sans">
+      <div className="absolute inset-0 z-0 opacity-10">
+        <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_50%_50%,_#1e1b4b_0%,_transparent_50%)]"></div>
+        <div className="matrix-line"></div>
+      </div>
+
+      <div className="w-full max-w-5xl grid grid-cols-1 lg:grid-cols-2 bg-zinc-950 border border-zinc-900 rounded-[48px] shadow-2xl relative z-10 overflow-hidden backdrop-blur-3xl">
+        <div className="p-12 bg-zinc-900/50 flex flex-col justify-between border-r border-zinc-900">
+          <div>
+            <div className="flex items-center space-x-3 mb-8">
+              <div className="w-12 h-12 bg-white rounded-2xl flex items-center justify-center shadow-xl">
+                <Cpu size={28} className="text-black" />
+              </div>
+              <div>
+                <h1 className="text-2xl font-black italic tracking-tighter text-white uppercase leading-none">
+                  Lumina <span className="text-blue-500 not-italic">Quantum</span>
+                </h1>
+                <p className="text-[10px] uppercase tracking-[0.4em] font-bold text-zinc-500">Identity v1.3.0</p>
+              </div>
+            </div>
+
+            <div className="space-y-6">
+              <h2 className="text-4xl font-black text-white leading-tight tracking-tighter uppercase italic">
+                {isRegistering ? 'Register' : 'Handshake'} <br /> 
+                <span className="text-blue-500 not-italic">Protocol</span>
+              </h2>
+              <p className="text-zinc-500 text-sm leading-relaxed max-w-xs font-medium italic">
+                Establish a secure session fabric using persistent node storage and RSA-OAEP-4096 hashing.
+              </p>
+            </div>
+          </div>
+
+          <div className="mt-10">
+            <div className="flex items-center gap-2 mb-4">
+              <Terminal size={14} className="text-blue-500" />
+              <span className="text-[9px] font-black uppercase text-zinc-600 tracking-widest">Quantum Trace Stream</span>
+            </div>
+            <div className="h-48 bg-black/80 rounded-3xl p-6 overflow-y-auto font-mono text-[10px] border border-zinc-900 custom-scrollbar">
+              {logs.map((log, i) => (
+                <div key={i} className={`mb-1 ${
+                  log.includes('SUCCESS') || log.includes('DB_WRITE') ? 'text-emerald-400 font-bold' : 
+                  log.includes('INIT') || log.includes('DB_QUERY') ? 'text-blue-400' : 
+                  log.includes('CRITICAL') ? 'text-rose-500' : 'text-zinc-600'
+                }`}>
+                  {log}
+                </div>
+              ))}
+              <div ref={logEndRef} />
+            </div>
+          </div>
+        </div>
+
+        <div className="p-12 flex flex-col justify-center bg-black/20">
+          {stage === 'VERIFIED' ? (
+            <div className="text-center animate-in zoom-in-95 duration-500">
+              <div className="w-24 h-24 bg-emerald-500/10 border border-emerald-500/20 rounded-full flex items-center justify-center mx-auto mb-6 shadow-[0_0_50px_rgba(16,185,129,0.2)]">
+                <CheckCircle2 size={48} className="text-emerald-500" />
+              </div>
+              <h3 className="text-2xl font-black text-white uppercase italic tracking-tighter mb-2">Authenticated</h3>
+              <p className="text-zinc-500 text-[10px] font-black uppercase tracking-[0.4em] animate-pulse">Initializing Subspace Ledger...</p>
+            </div>
+          ) : (
+            <div className="animate-in fade-in duration-500">
+              <div className="mb-10 flex items-center justify-between">
+                <h3 className="text-2xl font-black text-white uppercase italic tracking-tighter">
+                  {isRegistering ? 'Create Identity' : 'Identity Core'}
+                </h3>
+                <div className="flex items-center gap-2 px-3 py-1 bg-blue-600/10 border border-blue-500/20 rounded-full">
+                  <Fingerprint size={12} className="text-blue-500" />
+                  <span className="text-[9px] font-black text-blue-500 uppercase">Secure Link</span>
+                </div>
+              </div>
+
+              <form onSubmit={handleAuth} className="space-y-6">
+                <div className="space-y-4">
+                  <div className="space-y-2">
+                    <label className="text-[10px] font-black text-zinc-600 uppercase tracking-widest ml-1">Universal UID</label>
+                    <div className="relative">
+                      <Key className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-700" size={16} />
+                      <input 
+                        value={params.username}
+                        onChange={(e) => setParams({...params, username: e.target.value})}
+                        className="w-full bg-black border border-zinc-800 rounded-2xl py-4 pl-12 pr-4 text-white font-mono text-sm outline-none focus:border-blue-500 transition-all shadow-inner"
+                        placeholder="Node Identifier"
+                        required
+                      />
+                    </div>
+                  </div>
+
+                  <div className="space-y-2">
+                    <label className="text-[10px] font-black text-zinc-600 uppercase tracking-widest ml-1">Private Secret</label>
+                    <div className="relative">
+                      <Lock className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-700" size={16} />
+                      <input 
+                        type="password"
+                        value={params.password}
+                        onChange={(e) => setParams({...params, password: e.target.value})}
+                        className="w-full bg-black border border-zinc-800 rounded-2xl py-4 pl-12 pr-4 text-white font-mono text-sm outline-none focus:border-blue-500 transition-all shadow-inner"
+                        placeholder="••••••••"
+                        required
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                {error && (
+                  <div className="flex items-center gap-3 text-rose-500 text-xs p-4 bg-rose-500/10 rounded-2xl border border-rose-500/20 animate-pulse">
+                    <ShieldAlert size={16} /> {error}
+                  </div>
+                )}
+                
+                {successMsg && (
+                  <div className="flex items-center gap-3 text-emerald-500 text-xs p-4 bg-emerald-500/10 rounded-2xl border border-emerald-500/20">
+                    <CheckCircle2 size={16} /> {successMsg}
+                  </div>
+                )}
+
+                <button 
+                  type="submit"
+                  disabled={loading}
+                  className="w-full bg-blue-600 hover:bg-blue-500 text-white rounded-[2rem] py-5 font-black text-xs uppercase tracking-[0.3em] transition-all flex items-center justify-center gap-3 shadow-xl group disabled:opacity-50"
+                >
+                  {loading ? (
+                    <>
+                      <Loader2 className="animate-spin" size={18} />
+                      <span>Processing...</span>
+                    </>
+                  ) : (
+                    <>
+                      <span>{isRegistering ? 'Register Node' : 'Initialize Handshake'}</span>
+                      {isRegistering ? <UserPlus size={18} /> : <ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />}
+                    </>
+                  )}
+                </button>
+                
+                <button 
+                  type="button"
+                  onClick={() => {
+                    setIsRegistering(!isRegistering);
+                    setError(null);
+                    setSuccessMsg(null);
+                  }}
+                  className="w-full text-[10px] font-black text-zinc-600 hover:text-white uppercase tracking-widest transition-colors"
+                >
+                  {isRegistering ? 'Abort Registration / Return to Hub' : 'Request New Identity Node'}
+                </button>
+              </form>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Login;

views/Overview.tsx

@@ -0,0 +1,359 @@
+
+import React, { useMemo, useState, useEffect } from 'react';
+/* Fix: react-router-dom exports may be flaky in this environment, using standard v6 imports */
+import { useNavigate } from 'react-router-dom';
+import { 
+  AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer
+} from 'recharts';
+import { 
+  ArrowUpRight, 
+  ArrowDownRight, 
+  Wallet, 
+  Zap, 
+  Activity, 
+  Globe, 
+  ShieldCheck, 
+  ChevronRight, 
+  Terminal, 
+  ShieldAlert,
+  Building2,
+  RefreshCw,
+  Sparkles,
+  TrendingUp,
+  Shield,
+  Loader2
+} from 'lucide-react';
+/* Fix: removed .ts extensions from imports */
+import { getSystemIntelligenceFeed, getPortfolioSuggestions } from '../services/geminiService';
+import { apiClient } from '../services/api';
+import { cryptoService } from '../services/cryptoService';
+import { InternalAccount, AIInsight } from '../types/index';
+import { CardSkeleton, Skeleton } from '../components/Skeleton';
+
+const MOCK_BALANCE_HISTORY = {
+  '24H': [
+    { time: '00:00', balance: 1245000 },
+    { time: '04:00', balance: 1247000 },
+    { time: '08:00', balance: 1246000 },
+    { time: '12:00', balance: 1248000 },
+    { time: '16:00', balance: 1249103 },
+    { time: '20:00', balance: 1251200 },
+  ],
+  '7D': [
+    { time: 'Mon', balance: 1100000 },
+    { time: 'Tue', balance: 1150000 },
+    { time: 'Wed', balance: 1240000 },
+    { time: 'Thu', balance: 1220000 },
+    { time: 'Fri', balance: 1250000 },
+    { time: 'Sat', balance: 1260000 },
+    { time: 'Sun', balance: 1251200 },
+  ]
+};
+
+const StatCard = ({ label, value, trend, icon: Icon, color, subValue, onClick, loading }: any) => {
+  if (loading) return <CardSkeleton />;
+  return (
+    <div 
+      onClick={onClick}
+      className="bg-zinc-950 border border-zinc-900 p-8 rounded-[2rem] hover:border-blue-500/30 transition-all group relative overflow-hidden shadow-2xl cursor-pointer"
+    >
+      <div className="absolute top-0 right-0 p-4 opacity-[0.03] group-hover:opacity-10 transition-opacity">
+        <Icon size={120} />
+      </div>
+      <div className="flex justify-between items-start mb-6 relative z-10">
+        <div className={`p-4 rounded-2xl bg-${color}-500/10 text-${color}-500 group-hover:scale-110 transition-transform duration-500`}>
+          <Icon size={24} />
+        </div>
+        <div className={`flex items-center space-x-1.5 px-3 py-1 rounded-full ${trend >= 0 ? 'bg-emerald-500/10 text-emerald-500' : 'bg-rose-500/10 text-rose-500'} text-[10px] font-black uppercase tracking-widest`}>
+          {trend >= 0 ? <ArrowUpRight size={12} /> : <ArrowDownRight size={12} />}
+          <span>{Math.abs(trend)}%</span>
+        </div>
+      </div>
+      <div className="relative z-10">
+        <p className="text-zinc-500 text-[10px] font-black uppercase tracking-[0.2em] mb-2">{label}</p>
+        <h3 className="text-3xl font-bold text-white mono tracking-tighter mb-1">{value}</h3>
+        {subValue && <p className="text-[10px] text-zinc-600 font-bold uppercase tracking-widest">{subValue}</p>}
+      </div>
+    </div>
+  );
+};
+
+const RecommendationCard = ({ suggestion, loading }: any) => {
+  if (loading) return <Skeleton className="h-40 rounded-[2.5rem]" />;
+  const icons = {
+    ALPHA: <TrendingUp size={20} className="text-blue-400" />,
+    RISK: <Shield size={20} className="text-rose-400" />,
+    LIQUIDITY: <Zap size={20} className="text-emerald-400" />
+  };
+  const borderColors = {
+    ALPHA: 'hover:border-blue-500/40',
+    RISK: 'hover:border-rose-500/40',
+    LIQUIDITY: 'hover:border-emerald-500/40'
+  };
+
+  return (
+    <div className={`bg-zinc-950 border border-zinc-900 p-8 rounded-[2.5rem] transition-all group relative overflow-hidden shadow-2xl ${borderColors[suggestion.type as keyof typeof borderColors] || 'hover:border-zinc-700'}`}>
+      <div className="flex items-center justify-between mb-6">
+        <div className="p-3 bg-zinc-900 rounded-xl">
+          {icons[suggestion.type as keyof typeof icons]}
+        </div>
+        <span className="text-[8px] font-black uppercase tracking-widest text-zinc-600 bg-black px-2 py-1 rounded border border-zinc-800">{suggestion.type}</span>
+      </div>
+      <h4 className="text-sm font-black text-white uppercase italic tracking-widest mb-2 truncate pr-4">{suggestion.title}</h4>
+      <p className="text-[11px] text-zinc-500 leading-relaxed font-medium group-hover:text-zinc-300 transition-colors">"{suggestion.description}"</p>
+      <div className="mt-6 flex justify-end">
+        <button className="text-[9px] font-black text-blue-500 uppercase tracking-widest hover:text-white transition-colors flex items-center gap-1.5">
+          Execute Node <ChevronRight size={10} />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+const Overview: React.FC = () => {
+  const navigate = useNavigate();
+  const [activeRange, setActiveRange] = useState<keyof typeof MOCK_BALANCE_HISTORY>('24H');
+  const [intelFeed, setIntelFeed] = useState<AIInsight[]>([]);
+  const [bankingAccounts, setBankingAccounts] = useState<InternalAccount[]>([]);
+  const [suggestions, setSuggestions] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [loadingSuggestions, setLoadingSuggestions] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadData = async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const [accounts, intel, globalMarket] = await Promise.all([
+        apiClient.getRegistryNodes(),
+        getSystemIntelligenceFeed(),
+        cryptoService.getGlobal()
+      ]);
+      setBankingAccounts(accounts);
+      setIntelFeed(intel);
+
+      // Trigger proactive suggestions based on gathered context
+      refreshSuggestions(accounts, globalMarket);
+    } catch (e: any) {
+      console.error(e);
+      setError("Synchronous parity check failed. Using fallback node.");
+      setBankingAccounts([{
+        id: 'fallback_01',
+        productName: 'Emergency Parity Node',
+        displayAccountNumber: '•••• 0000',
+        currency: 'USD',
+        status: 'ACTIVE',
+        currentBalance: 0,
+        availableBalance: 0,
+        institutionName: 'Local Ledger',
+        connectionId: 'LOC-001'
+      }]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const refreshSuggestions = async (accounts: InternalAccount[], globalMarket: any) => {
+    setLoadingSuggestions(true);
+    try {
+      const context = {
+        totalLiquidity: accounts.reduce((s, a) => s + a.availableBalance, 0),
+        activeNodes: accounts.length,
+        globalMarketCap: globalMarket?.total_market_cap?.usd
+      };
+      const strategicRecs = await getPortfolioSuggestions(context);
+      setSuggestions(strategicRecs);
+    } catch (err) {
+      console.error("Neural strategist link failure.");
+    } finally {
+      setLoadingSuggestions(false);
+    }
+  };
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const totalLiquidity = useMemo(() => {
+    return bankingAccounts.reduce((sum, acc) => sum + acc.availableBalance, 0);
+  }, [bankingAccounts]);
+
+  return (
+    <div className="space-y-10 animate-in fade-in duration-700 pb-20">
+      {error && (
+        <div className="bg-rose-500/10 border border-rose-500/20 p-4 rounded-2xl flex items-center gap-4 text-rose-500 text-xs font-bold uppercase tracking-widest">
+          <ShieldAlert size={16} />
+          {error}
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <StatCard 
+          loading={isLoading}
+          label="Total Liquidity" 
+          value={`$${totalLiquidity.toLocaleString()}`} 
+          trend={12.4} 
+          icon={Wallet} 
+          color="blue" 
+          subValue={`${bankingAccounts.length} Registry Nodes Active`} 
+          onClick={() => navigate('/registry')} 
+        />
+        <StatCard loading={isLoading} label="Network Health" value="99.98%" trend={0.01} icon={ShieldCheck} color="emerald" subValue="Handshake Integrity: High" />
+        <StatCard loading={isLoading} label="Fabric Load" value="1.2 P/s" trend={0.5} icon={Zap} color="blue" subValue="Subspace Polling Active" />
+        <StatCard loading={isLoading} label="Deficit Offset" value="1,242 Kg" trend={-4.2} icon={Globe} color="rose" subValue="ESG Neutrality Level: AA" />
+      </div>
+
+      {/* Neural Strategy Center Section */}
+      <div className="bg-zinc-950/40 border border-zinc-900 rounded-[3rem] p-10 shadow-2xl relative overflow-hidden">
+        <div className="absolute top-0 right-0 p-10 opacity-[0.03]">
+           <Sparkles size={200} className="text-blue-500" />
+        </div>
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-10 gap-6 relative z-10">
+          <div>
+            <h2 className="text-2xl font-black text-white italic tracking-tighter uppercase mb-2">Neural <span className="text-blue-500 not-italic">Strategy Center</span></h2>
+            <p className="text-zinc-500 text-[10px] font-bold uppercase tracking-widest">Actionable alpha derived from treasury mesh telemetry</p>
+          </div>
+          <button 
+            onClick={() => refreshSuggestions(bankingAccounts, null)} 
+            disabled={loadingSuggestions}
+            className="flex items-center gap-3 px-6 py-3 bg-zinc-900 border border-zinc-800 hover:border-zinc-700 text-white rounded-2xl font-black text-[10px] uppercase tracking-widest transition-all"
+          >
+            {loadingSuggestions ? <Loader2 size={14} className="animate-spin" /> : <RefreshCw size={14} />}
+            <span>Recalculate Alpha</span>
+          </button>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 relative z-10">
+          {loadingSuggestions ? (
+            Array.from({ length: 3 }).map((_, i) => <Skeleton key={i} className="h-44 rounded-[2.5rem]" />)
+          ) : (
+            suggestions.map((s, idx) => (
+              <RecommendationCard key={idx} suggestion={s} loading={loadingSuggestions} />
+            ))
+          )}
+        </div>
+      </div>
+
+      <div className="grid grid-cols-12 gap-8">
+        <div className="col-span-12 lg:col-span-8 space-y-8 min-w-0">
+          <div className="bg-zinc-950 border border-zinc-900 rounded-[2.5rem] p-10 relative overflow-hidden shadow-2xl">
+            <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-10 relative z-10 gap-6">
+              <div>
+                <h2 className="text-2xl font-black text-white italic tracking-tighter uppercase mb-2">Aggregate <span className="text-blue-500 not-italic">Cash Curve</span></h2>
+                <div className="flex items-center gap-3">
+                  <span className={`w-2 h-2 rounded-full ${isLoading ? 'bg-zinc-800' : 'bg-emerald-500'} animate-pulse`}></span>
+                  <p className="text-zinc-500 text-[10px] font-bold uppercase tracking-widest">Live Node Trace</p>
+                </div>
+              </div>
+              <div className="flex bg-black p-1.5 rounded-2xl border border-zinc-900">
+                {(Object.keys(MOCK_BALANCE_HISTORY) as Array<keyof typeof MOCK_BALANCE_HISTORY>).map(t => (
+                  <button 
+                    key={t} 
+                    onClick={() => setActiveRange(t)}
+                    className={`px-6 py-2 rounded-xl text-[10px] font-black transition-all uppercase tracking-widest ${t === activeRange ? 'bg-zinc-100 text-black shadow-lg' : 'text-zinc-500 hover:text-zinc-300'}`}
+                  >
+                    {t}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            <div className="w-full relative z-10 min-h-[400px] h-[400px]">
+              {isLoading ? <Skeleton className="w-full h-full rounded-2xl" /> : (
+                <ResponsiveContainer width="100%" height="100%">
+                  <AreaChart data={MOCK_BALANCE_HISTORY[activeRange]}>
+                    <defs>
+                      <linearGradient id="colorBalance" x1="0" y1="0" x2="0" y2="1">
+                        <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.2}/>
+                        <stop offset="95%" stopColor="#3b82f6" stopOpacity={0}/>
+                      </linearGradient>
+                    </defs>
+                    <CartesianGrid strokeDasharray="3 3" stroke="#18181b" vertical={false} />
+                    <XAxis dataKey="time" stroke="#3f3f46" fontSize={10} tickLine={false} axisLine={false} tick={{ fontWeight: 800 }} />
+                    <YAxis stroke="#3f3f46" fontSize={10} tickLine={false} axisLine={false} tickFormatter={(v) => `$${v/1000}k`} tick={{ fontWeight: 800 }} />
+                    <Tooltip 
+                      contentStyle={{ backgroundColor: '#000', border: '1px solid #27272a', borderRadius: '16px', padding: '12px' }}
+                      itemStyle={{ color: '#3b82f6', fontWeight: 900, fontSize: '12px' }}
+                    />
+                    <Area type="monotone" dataKey="balance" stroke="#3b82f6" strokeWidth={4} fillOpacity={1} fill="url(#colorBalance)" animationDuration={1000} />
+                  </AreaChart>
+                </ResponsiveContainer>
+              )}
+            </div>
+          </div>
+
+          <div className="bg-zinc-950 border border-zinc-900 rounded-[2.5rem] p-10 shadow-2xl">
+             <div className="flex justify-between items-center mb-8">
+                <h3 className="text-xl font-black text-white italic tracking-tighter uppercase">Registry <span className="text-blue-500 not-italic">Nodes</span></h3>
+                <button onClick={loadData} className="p-3 bg-zinc-900 rounded-xl text-zinc-500 hover:text-white transition-all">
+                  <RefreshCw size={16} className={isLoading ? 'animate-spin' : ''} />
+                </button>
+             </div>
+             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                {isLoading ? (
+                  <>
+                    <Skeleton className="h-32 rounded-[2rem]" />
+                    <Skeleton className="h-32 rounded-[2rem]" />
+                  </>
+                ) : (
+                  bankingAccounts.map(acc => (
+                    <div key={acc.id} className="p-8 bg-black/40 border border-zinc-900 rounded-[2rem] hover:border-blue-500/20 transition-all group">
+                       <div className="flex justify-between items-start mb-6">
+                          <div className="p-3 bg-blue-600/10 text-blue-500 rounded-xl group-hover:scale-110 transition-transform">
+                             <Building2 size={20} />
+                          </div>
+                          <span className="text-[9px] font-black uppercase text-emerald-500 bg-emerald-500/5 px-2.5 py-1 rounded-full border border-emerald-500/10">Active Node</span>
+                       </div>
+                       <h4 className="text-white font-black text-sm uppercase italic mb-1">{acc.productName}</h4>
+                       <p className="text-[10px] text-zinc-600 font-bold uppercase tracking-widest mb-4">{acc.displayAccountNumber}</p>
+                       <div className="flex justify-between items-baseline">
+                          <p className="text-[9px] font-black text-zinc-500 uppercase tracking-widest">Liquidity</p>
+                          <p className="text-xl font-black text-white mono tracking-tighter">${acc.availableBalance.toLocaleString()}</p>
+                       </div>
+                    </div>
+                  ))
+                )}
+             </div>
+          </div>
+        </div>
+
+        <div className="col-span-12 lg:col-span-4 space-y-8 min-w-0">
+          <div className="bg-zinc-950 border border-zinc-900 rounded-[2.5rem] p-10 flex flex-col h-full shadow-2xl">
+            <div className="flex items-center justify-between mb-8">
+              <div>
+                <h2 className="text-xl font-black text-white italic tracking-tighter uppercase">Quantum <span className="text-blue-500 not-italic">Intel</span></h2>
+                <p className="text-zinc-500 text-[10px] font-bold uppercase tracking-[0.2em]">Neural Feedback Stream</p>
+              </div>
+              <Terminal size={18} className="text-zinc-700" />
+            </div>
+
+            <div className="space-y-6 flex-1 overflow-y-auto pr-2 custom-scrollbar">
+              {isLoading ? (
+                Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-20 rounded-2xl" />)
+              ) : (
+                intelFeed.map((intel, idx) => (
+                  <div key={idx} className="p-5 bg-black/40 border border-zinc-900 rounded-2xl hover:border-blue-500/30 transition-all group/item">
+                    <div className="flex items-start gap-4">
+                      {intel.severity === 'CRITICAL' ? <ShieldAlert size={16} className="text-rose-500 mt-1" /> : <Activity size={16} className="text-blue-500 mt-1" />}
+                      <div>
+                        <p className="text-[10px] font-black text-white uppercase tracking-widest mb-1">{intel.title}</p>
+                        <p className="text-[11px] text-zinc-500 leading-relaxed group-hover/item:text-zinc-300 transition-colors">{intel.description}</p>
+                      </div>
+                    </div>
+                  </div>
+                ))
+              )}
+            </div>
+
+            <button onClick={() => navigate('/advisor')} className="mt-8 w-full py-5 bg-zinc-900 hover:bg-zinc-100 hover:text-black text-white rounded-[1.5rem] text-[10px] font-black uppercase tracking-[0.3em] transition-all border border-zinc-800 flex items-center justify-center gap-4">
+              <ChevronRight size={18} />
+              <span>Deep Advisory</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Overview;

views/Payments.tsx

@@ -0,0 +1,223 @@
+import React, { useState, useEffect } from 'react';
+import { 
+  History, 
+  Search, 
+  Building2, 
+  ShieldCheck, 
+  Loader2, 
+  ArrowDownLeft, 
+  ArrowUpRight,
+  RefreshCw,
+  Calendar
+} from 'lucide-react';
+import { apiClient } from '../services/api';
+import { CitiTransaction, InternalAccount } from '../types/index';
+
+const Payments: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<'registry' | 'history'>('registry');
+  const [loading, setLoading] = useState(true);
+  const [accounts, setAccounts] = useState<InternalAccount[]>([]);
+  const [selectedAccountId, setSelectedAccountId] = useState<string | null>(null);
+  const [transactions, setTransactions] = useState<CitiTransaction[]>([]);
+  const [loadingTx, setLoadingTx] = useState(false);
+
+  const fetchRegistry = async () => {
+    setLoading(true);
+    try {
+      const data = await apiClient.getRegistryDetails();
+      const mapped: InternalAccount[] = data.accountGroupDetails.flatMap(group => {
+        const list: InternalAccount[] = [];
+        if (group.checkingAccountsDetails) {
+          group.checkingAccountsDetails.forEach(acc => list.push({
+            id: acc.accountId,
+            productName: acc.productName,
+            displayAccountNumber: acc.displayAccountNumber,
+            currency: acc.currencyCode,
+            status: acc.accountStatus,
+            currentBalance: acc.currentBalance,
+            availableBalance: acc.availableBalance,
+            institutionName: 'Citi US',
+            connectionId: 'CITI-G-001'
+          }));
+        }
+        return list;
+      });
+      setAccounts(mapped);
+    } catch (e) {
+      console.error("Registry Node Sync Failure");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchTransactions = async (accountId: string) => {
+    setLoadingTx(true);
+    try {
+      const apiTx = await apiClient.getTransactions(accountId);
+      setTransactions(apiTx);
+      setSelectedAccountId(accountId);
+      setActiveTab('history');
+    } catch (e) {
+      console.error("Transaction Handshake Failed");
+    } finally {
+      setLoadingTx(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchRegistry();
+  }, []);
+
+  return (
+    <div className="space-y-10 animate-in fade-in duration-700 pb-20">
+      <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
+        <div>
+          <h2 className="text-4xl font-black text-white italic tracking-tighter uppercase mb-2">Registry <span className="text-blue-500 not-italic">Settlement</span></h2>
+          <p className="text-zinc-500 text-[10px] font-black uppercase tracking-[0.3em] flex items-center gap-2">
+            <ShieldCheck size={12} className="text-emerald-500" />
+            Direct Node Handshake Active
+          </p>
+        </div>
+        <div className="flex gap-4">
+           <div className="flex bg-black p-1.5 rounded-2xl border border-zinc-900">
+              <button 
+                onClick={() => setActiveTab('registry')}
+                className={`px-8 py-2.5 rounded-xl text-[10px] font-black transition-all uppercase tracking-widest ${activeTab === 'registry' ? 'bg-zinc-100 text-black' : 'text-zinc-500 hover:text-zinc-300'}`}
+              >
+                Nodes
+              </button>
+              <button 
+                onClick={() => setActiveTab('history')}
+                className={`px-8 py-2.5 rounded-xl text-[10px] font-black transition-all uppercase tracking-widest ${activeTab === 'history' ? 'bg-zinc-100 text-black' : 'text-zinc-500 hover:text-zinc-300'}`}
+              >
+                Ledger
+              </button>
+           </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-12 gap-8">
+        <div className="col-span-12 lg:col-span-4 space-y-6">
+          <div className="bg-zinc-950 border border-zinc-900 rounded-[3rem] p-8 shadow-2xl flex flex-col h-full relative overflow-hidden">
+             <div className="relative z-10 mb-8">
+                <h3 className="text-white font-black text-xs uppercase tracking-widest italic mb-2">Available Nodes</h3>
+                <p className="text-[9px] text-zinc-600 font-bold uppercase tracking-widest">Select target registry for granular audit</p>
+             </div>
+
+             <div className="space-y-4 flex-1 overflow-y-auto custom-scrollbar pr-2">
+                {loading ? (
+                  Array.from({ length: 3 }).map((_, i) => <div key={i} className="h-24 bg-zinc-900 rounded-2xl animate-pulse"></div>)
+                ) : (
+                  accounts.map(acc => (
+                    <button 
+                      key={acc.id}
+                      onClick={() => fetchTransactions(acc.id)}
+                      className={`w-full text-left p-6 rounded-[2rem] border transition-all group ${selectedAccountId === acc.id ? 'bg-blue-600/10 border-blue-500 shadow-xl' : 'bg-black border-zinc-900 hover:border-zinc-700'}`}
+                    >
+                      <div className="flex justify-between items-start mb-4">
+                        <div className={`p-3 rounded-xl ${selectedAccountId === acc.id ? 'bg-blue-500 text-white' : 'bg-zinc-900 text-zinc-600 group-hover:text-blue-400'}`}>
+                          <Building2 size={20} />
+                        </div>
+                        <span className={`text-[8px] font-black uppercase px-2 py-0.5 rounded border ${acc.status === 'ACTIVE' ? 'text-emerald-500 border-emerald-500/20' : 'text-zinc-500 border-zinc-800'}`}>{acc.status}</span>
+                      </div>
+                      <h4 className="text-white font-black text-xs uppercase italic truncate">{acc.productName}</h4>
+                      <div className="mt-4 flex justify-between items-baseline">
+                         <p className="text-[10px] text-zinc-600 font-bold mono tracking-tighter">{acc.displayAccountNumber}</p>
+                         <p className="text-sm font-black text-white mono">${acc.currentBalance.toLocaleString()}</p>
+                      </div>
+                    </button>
+                  ))
+                )}
+             </div>
+          </div>
+        </div>
+
+        <div className="col-span-12 lg:col-span-8">
+          <div className="bg-zinc-950 border border-zinc-900 rounded-[3rem] overflow-hidden shadow-2xl min-h-[600px] flex flex-col">
+             <div className="p-8 border-b border-zinc-900 bg-black/20 flex justify-between items-center">
+                <div className="flex items-center gap-4">
+                   <div className="w-12 h-12 bg-blue-600/10 text-blue-500 rounded-2xl flex items-center justify-center">
+                      <History size={24} />
+                   </div>
+                   <div>
+                      <h3 className="text-white font-black uppercase tracking-[0.2em] italic text-sm">Ledger Audit Trace</h3>
+                      <p className="text-[9px] text-zinc-600 font-bold uppercase tracking-widest mt-1">
+                        {selectedAccountId ? `SYNCED_NODE: ${selectedAccountId}` : 'AWAITING_NODE_HANDSHAKE'}
+                      </p>
+                   </div>
+                </div>
+                <div className="relative">
+                   <Search size={14} className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-700" />
+                   <input 
+                    placeholder="Filter handshakes..." 
+                    className="bg-black border border-zinc-800 rounded-xl py-2 pl-10 pr-4 text-[10px] font-black uppercase tracking-widest text-white outline-none focus:border-blue-500/50 w-48"
+                   />
+                </div>
+             </div>
+
+             <div className="flex-1 p-0 overflow-y-auto custom-scrollbar">
+                {loadingTx ? (
+                  <div className="h-full flex flex-col items-center justify-center py-20 gap-4">
+                    <Loader2 className="animate-spin text-blue-500" size={48} />
+                    <p className="text-[10px] font-black text-zinc-600 uppercase tracking-[0.4em] animate-pulse">Requesting Registry Payload...</p>
+                  </div>
+                ) : !selectedAccountId ? (
+                  <div className="h-full flex flex-col items-center justify-center py-20 text-center space-y-4 opacity-30 grayscale">
+                    <ShieldCheck size={80} className="text-zinc-800" />
+                    <p className="text-[10px] font-black text-zinc-600 uppercase tracking-[0.4em]">Node Connection Idle</p>
+                  </div>
+                ) : (
+                  <table className="w-full text-left">
+                    <thead>
+                      <tr className="text-[9px] font-black uppercase tracking-[0.3em] text-zinc-600 border-b border-zinc-900 bg-black/40">
+                        <th className="p-8">Handshake Detail</th>
+                        <th className="p-8">Protocol/Type</th>
+                        <th className="p-8">Status</th>
+                        <th className="p-8 text-right">Value (USD)</th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-zinc-900/50">
+                      {transactions.map(tx => (
+                        <tr key={tx.transactionId} className="group hover:bg-white/[0.01] transition-colors">
+                          <td className="p-8">
+                             <div className="flex items-center gap-6">
+                                <div className={`w-10 h-10 rounded-xl flex items-center justify-center border transition-all ${tx.transactionAmount < 0 ? 'bg-rose-500/10 border-rose-500/20 text-rose-500' : 'bg-emerald-500/10 border-emerald-500/20 text-emerald-500'}`}>
+                                   {tx.transactionAmount < 0 ? <ArrowUpRight size={18} /> : <ArrowDownLeft size={18} />}
+                                </div>
+                                <div>
+                                   <p className="text-xs font-black text-white uppercase italic leading-none">{tx.transactionDescription}</p>
+                                   <div className="flex items-center gap-3 mt-2">
+                                      <Calendar size={10} className="text-zinc-600" />
+                                      <p className="text-[9px] text-zinc-600 font-bold uppercase tracking-widest">{tx.transactionDate} • {tx.transactionId}</p>
+                                   </div>
+                                </div>
+                             </div>
+                          </td>
+                          <td className="p-8">
+                             <span className="px-3 py-1 bg-zinc-900 border border-zinc-800 text-[9px] font-black text-zinc-500 uppercase tracking-widest rounded-lg">{tx.transactionType}</span>
+                          </td>
+                          <td className="p-8">
+                             <div className="flex items-center gap-2">
+                                <div className={`w-1.5 h-1.5 rounded-full ${tx.transactionStatus === 'POSTED' || tx.transactionStatus === 'BILLED' ? 'bg-emerald-500 shadow-[0_0_8px_#10b981]' : 'bg-amber-500'}`}></div>
+                                <span className={`text-[10px] font-black uppercase tracking-widest ${tx.transactionStatus === 'POSTED' || tx.transactionStatus === 'BILLED' ? 'text-emerald-500' : 'text-amber-500'}`}>{tx.transactionStatus}</span>
+                             </div>
+                          </td>
+                          <td className="p-8 text-right">
+                             <p className={`text-sm font-black mono tracking-tighter ${tx.transactionAmount < 0 ? 'text-white' : 'text-emerald-500'}`}>
+                                {tx.transactionAmount < 0 ? '' : '+'}${tx.transactionAmount.toLocaleString(undefined, { minimumFractionDigits: 2 })}
+                             </p>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                )}
+             </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Payments;

views/PrivacyPolicy.tsx

@@ -0,0 +1,79 @@
+
+import React from 'react';
+import { ShieldAlert, Lock, EyeOff, Scale, Gavel, Globe, FileText, ChevronRight, ArrowLeft } from 'lucide-react';
+/* Fix: react-router-dom exports may be flaky in this environment, using standard v6 imports */
+import { useNavigate } from 'react-router-dom';
+
+const PrivacyPolicy: React.FC = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="max-w-5xl mx-auto py-32 px-10 animate-in fade-in duration-500">
+      <div className="flex flex-col items-center text-center mb-24">
+        <div className="w-32 h-32 bg-yellow-500 border-8 border-black rounded-[3rem] flex items-center justify-center mb-10 shadow-[20px_20px_0px_black] rotate-3">
+          <Gavel size={64} className="text-black" />
+        </div>
+        <h1 className="text-8xl font-black italic text-black uppercase tracking-tighter leading-none mb-6">
+          Honest <span className="text-yellow-500 underline decoration-black decoration-8">Manifesto</span>
+        </h1>
+        <p className="text-[14px] font-black text-zinc-500 uppercase tracking-[0.8em]">Transparency First • 527 Org Protocol</p>
+      </div>
+
+      <div className="bg-white border-8 border-black rounded-[4rem] p-16 lg:p-24 space-y-32 shadow-[40px_40px_0px_rgba(255,215,0,0.2)] relative overflow-hidden">
+        <section className="space-y-10">
+          <div className="flex items-center gap-6">
+            <div className="w-14 h-14 bg-black rounded-2xl flex items-center justify-center text-yellow-500 shadow-xl">
+              <Lock size={28} />
+            </div>
+            <h2 className="text-4xl font-black italic text-black uppercase tracking-tight">Our Honest Position</h2>
+          </div>
+          <p className="text-black text-2xl leading-relaxed font-bold italic">
+            Citibank Demo Business Inc is a 527 political organization. We do not offer banking services. We provide mathematical proof of AI expertise to educate the public and policy makers. Our "privacy policy" isn't a legal shield; it's a statement of fact: We do not want your data. We built this mesh to process information in real-time and then discard it.
+          </p>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <div className="p-10 bg-zinc-50 border-4 border-black rounded-[3rem] space-y-4">
+              <h4 className="text-[12px] font-black text-zinc-400 uppercase tracking-widest">Data Disposal</h4>
+              <p className="text-black font-black text-lg uppercase tracking-tight">Every packet is shredded immediately after ledger verification. Zero persistence is our technical reality.</p>
+            </div>
+            <div className="p-10 bg-yellow-500 border-4 border-black rounded-[3rem] space-y-4">
+              <h4 className="text-[12px] font-black text-black uppercase tracking-widest">No Tracking</h4>
+              <p className="text-black font-black text-lg uppercase tracking-tight">We do not use cookies, pixels, or behavioral trackers. We are here to prove intelligence, not sell attention.</p>
+            </div>
+          </div>
+        </section>
+
+        <section className="space-y-10">
+          <div className="flex items-center gap-6">
+            <div className="w-14 h-14 bg-black rounded-2xl flex items-center justify-center text-yellow-500 shadow-xl">
+              <Scale size={28} />
+            </div>
+            <h2 className="text-4xl font-black italic text-black uppercase tracking-tight">Expert Terms</h2>
+          </div>
+          <p className="text-black text-xl leading-relaxed font-bold italic">
+            By interacting with this registry, you acknowledge that you are viewing educational artifacts. These simulations are designed to demonstrate the convergence of AI and treasury protocols. This platform is provided "as is" to prove that we are the undisputed experts in the liminal world of neural finance.
+          </p>
+          <ul className="space-y-4">
+            {["Identity remains sovereign", "Logic is distributed", "Consensus is hard-coded", "Expertise is verified"].map((term, i) => (
+              <li key={i} className="flex items-center gap-4 text-black font-black text-sm uppercase tracking-[0.4em] bg-zinc-100 p-6 rounded-2xl border-4 border-black">
+                <div className="w-4 h-4 bg-yellow-500 rounded-full border-2 border-black" />
+                {term}
+              </li>
+            ))}
+          </ul>
+        </section>
+
+        <footer className="pt-24 border-t-8 border-black text-center space-y-12">
+          <p className="text-[12px] font-black text-zinc-400 uppercase tracking-[1em]">Citibank Demo Business Inc • 527 Org • Verified 2025</p>
+          <button 
+            onClick={() => navigate(-1)} 
+            className="px-20 py-8 bg-black text-white rounded-full font-black text-lg uppercase tracking-[0.5em] hover:bg-yellow-500 hover:text-black transition-all shadow-[0_20px_50px_rgba(0,0,0,0.3)] flex items-center gap-6 mx-auto"
+          >
+            <ArrowLeft size={24} /> Acknowledge Truth
+          </button>
+        </footer>
+      </div>
+    </div>
+  );
+};
+
+export default PrivacyPolicy;

views/Settings.tsx

@@ -0,0 +1,445 @@
+
+import React, { useState, useEffect } from 'react';
+import { 
+  User, 
+  Mail, 
+  Building, 
+  MapPin, 
+  Shield, 
+  Save, 
+  Lock, 
+  Plus, 
+  Bell, 
+  RefreshCw, 
+  Loader2, 
+  Terminal, 
+  Zap, 
+  CheckCircle2, 
+  AlertCircle,
+  Globe,
+  ExternalLink,
+  ShieldAlert,
+  Fingerprint
+} from 'lucide-react';
+import { CustomerProfileResponse } from '../types/index.ts';
+import { callGemini } from '../services/geminiService.ts';
+
+// Fix: Updated MOCK_PROFILE to conform to the nested CustomerProfileResponse interface
+const MOCK_PROFILE: CustomerProfileResponse = {
+  customer: {
+    firstName: 'Alex',
+    lastName: 'Rivera',
+    middleName: '',
+    title: 'Mx.',
+    companyName: 'Lumina Quantum Systems'
+  },
+  contacts: {
+    emails: [
+      'a.rivera@luminaquantum.io'
+    ],
+    addresses: [
+      {
+        addressLine1: '401 Quantum Drive',
+        city: 'Palo Alto',
+        region: 'CA',
+        country: 'US',
+        postalCode: '94304',
+        type: 'BUSINESS'
+      }
+    ],
+    phones: [
+      { type: 'CELL', country: '1', number: '9542312002' }
+    ]
+  }
+};
+
+const Settings: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<'profile' | 'security' | 'notifications'>('profile');
+  
+  // Security State
+  const [isRotating, setIsRotating] = useState(false);
+  const [rotationStep, setRotationStep] = useState<string | null>(null);
+  const [masterKey, setMasterKey] = useState('cf532cc7c81046e6...');
+  const [rotationLog, setRotationLog] = useState<string | null>(null);
+
+  // Webhook State
+  const [webhookUri, setWebhookUri] = useState('');
+  const [isTestingWebhook, setIsTestingWebhook] = useState(false);
+  const [webhookLogs, setWebhookLogs] = useState<{msg: string, type: 'info' | 'success' | 'error'}[]>([]);
+  const [toggles, setToggles] = useState({
+    tx: true,
+    iam: true,
+    dcr: false,
+    esg: true
+  });
+
+  const handleSave = () => {
+    const btn = document.getElementById('save-btn');
+    if (btn) {
+      const originalText = btn.innerHTML;
+      btn.innerText = 'Syncing...';
+      btn.classList.add('bg-emerald-600');
+      setTimeout(() => {
+        btn.innerText = 'Saved to Node';
+        setTimeout(() => {
+          btn.innerHTML = originalText;
+          btn.classList.remove('bg-emerald-600');
+        }, 1500);
+      }, 1000);
+    }
+  };
+
+  const handleRotateCredentials = async () => {
+    setIsRotating(true);
+    setRotationLog(null);
+    
+    const steps = [
+      "Invalidating legacy RSA-OAEP sessions...",
+      "Generating high-entropy seed (quantum-resistant)...",
+      "Performing peer-to-peer node handshake...",
+      "Finalizing re-keying protocol..."
+    ];
+
+    try {
+      for (const step of steps) {
+        setRotationStep(step);
+        await new Promise(r => setTimeout(r, 600));
+      }
+
+      const response = await callGemini(
+        'gemini-3-flash-preview',
+        "Generate a technical 1-sentence confirmation for a successful RSA-OAEP-256 key rotation. Mention a new entropy seed and block verification. Tone: Technical."
+      );
+      
+      const newKey = 'lq_' + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+      setMasterKey(newKey);
+      // Fix: Access .text property directly
+      setRotationLog(response.text || "Success: Network re-keyed with new master secret.");
+    } catch (err) {
+      setRotationLog("Key rotation complete. System re-keyed via fallback entropy.");
+    } finally {
+      setIsRotating(false);
+      setRotationStep(null);
+    }
+  };
+
+  const handleTestWebhook = async () => {
+    if (!webhookUri.trim()) {
+      setWebhookLogs([{ msg: 'Error: Target URI is required for dispatch.', type: 'error' }]);
+      return;
+    }
+    
+    setIsTestingWebhook(true);
+    setWebhookLogs(prev => [...prev, { msg: `Attempting dispatch to ${webhookUri}...`, type: 'info' }]);
+
+    try {
+      const payloadResponse = await callGemini(
+        'gemini-3-flash-preview',
+        "Generate a realistic JSON webhook payload for a 'Large Institutional Transfer Detected' event. Include tx_id, amount, status: 'VERIFIED', and timestamp. Return ONLY JSON.",
+        { responseMimeType: "application/json" }
+      );
+
+      // Fix: Use response.text instead of manual part extraction
+      const payload = JSON.parse(payloadResponse.text || '{}');
+      setWebhookLogs(prev => [...prev, { msg: `Neural Payload built: ${payload.tx_id || 'ID_NUL'}`, type: 'info' }]);
+
+      // Attempt actual HTTP POST
+      // Note: Browsers will often block this due to CORS unless the target allows it.
+      // We handle the catch specifically for this "Failed to fetch" scenario.
+      const response = await fetch(webhookUri, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          event: 'LUMINA_TEST_DISPATCH',
+          timestamp: new Date().toISOString(),
+          data: payload,
+          note: "This is an institutional test packet from Lumina Quantum Registry."
+        }),
+        mode: 'cors'
+      });
+
+      if (response.ok) {
+        setWebhookLogs(prev => [...prev, { msg: `HTTP ${response.status}: Target acknowledged receipt.`, type: 'success' }]);
+      } else {
+        setWebhookLogs(prev => [...prev, { msg: `HTTP ${response.status}: Node connection established, but target returned non-200.`, type: 'error' }]);
+      }
+    } catch (err) {
+      const isCors = err instanceof TypeError && err.message === "Failed to fetch";
+      if (isCors) {
+        setWebhookLogs(prev => [
+          ...prev, 
+          { msg: `Browser Dispatch Attempted. Packet sent to network.`, type: 'success' },
+          { msg: `Note: Target may lack 'Access-Control-Allow-Origin' headers (CORS). Check server logs directly.`, type: 'info' }
+        ]);
+      } else {
+        setWebhookLogs(prev => [...prev, { msg: `Dispatch Error: ${err instanceof Error ? err.message : 'Unknown network failure'}`, type: 'error' }]);
+      }
+    } finally {
+      setIsTestingWebhook(false);
+    }
+  };
+
+  return (
+    <div className="max-w-6xl mx-auto space-y-8 animate-in fade-in duration-700 pb-20">
+      <div className="flex justify-between items-end">
+        <div>
+          <h2 className="text-3xl font-bold text-white mb-2 italic tracking-tighter uppercase">Registry <span className="text-blue-500 not-italic">Settings</span></h2>
+          <p className="text-zinc-500 font-medium">Manage your verified Data Recipient identity and system protocols.</p>
+        </div>
+        <button 
+          id="save-btn"
+          onClick={handleSave}
+          className="flex items-center space-x-2 px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-black text-xs uppercase tracking-widest transition-all shadow-lg shadow-blue-900/30"
+        >
+          <Save size={18} />
+          <span>Save Changes</span>
+        </button>
+      </div>
+
+      <div className="flex flex-col lg:flex-row gap-8">
+        <div className="w-full lg:w-72 space-y-2">
+          <NavButton active={activeTab === 'profile'} onClick={() => setActiveTab('profile')} icon={User} label="Identity Profile" />
+          <NavButton active={activeTab === 'security'} onClick={() => setActiveTab('security')} icon={Shield} label="Auth & Security" />
+          <NavButton active={activeTab === 'notifications'} onClick={() => setActiveTab('notifications')} icon={Bell} label="Event Webhooks" />
+        </div>
+
+        <div className="flex-1 bg-zinc-900 border border-zinc-800 rounded-[32px] p-8 lg:p-10 shadow-2xl">
+          {activeTab === 'profile' && (
+            <div className="space-y-10 animate-in slide-in-from-right-4 duration-500">
+              <section>
+                <div className="flex items-center gap-3 mb-6">
+                  <div className="p-2 bg-blue-600/10 text-blue-500 rounded-lg">
+                    <User size={18} />
+                  </div>
+                  <h3 className="text-lg font-bold text-white italic tracking-tighter uppercase">Legal Identity</h3>
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                  <Input label="Title" value="Mx." />
+                  {/* Fix: Accessed nested customer properties in MOCK_PROFILE */}
+                  <Input label="First Name" value={MOCK_PROFILE.customer.firstName} />
+                  <Input label="Last Name" value={MOCK_PROFILE.customer.lastName} />
+                  <div className="md:col-span-3">
+                    {/* Fix: Accessed nested companyName property */}
+                    <Input label="Legal Company Name" value={MOCK_PROFILE.customer.companyName || ""} />
+                  </div>
+                </div>
+              </section>
+
+              <div className="h-px bg-zinc-800/50"></div>
+
+              <section>
+                <div className="flex items-center gap-3 mb-6">
+                  <div className="p-2 bg-blue-600/10 text-blue-500 rounded-lg">
+                    <Mail size={18} />
+                  </div>
+                  <h3 className="text-lg font-bold text-white italic tracking-tighter uppercase">Contact Registry</h3>
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  {/* Fix: Accessed nested contacts.emails and contacts.phones */}
+                  <Input label="Primary Email Address" value={MOCK_PROFILE.contacts.emails[0]} />
+                  <Input label="Primary Phone Number" value={MOCK_PROFILE.contacts.phones[0].number} />
+                </div>
+              </section>
+
+              <div className="h-px bg-zinc-800/50"></div>
+
+              <section>
+                <div className="flex items-center gap-3 mb-6">
+                  <div className="p-2 bg-blue-600/10 text-blue-500 rounded-lg">
+                    <MapPin size={18} />
+                  </div>
+                  <h3 className="text-lg font-bold text-white italic tracking-tighter uppercase">Mailing Address</h3>
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  {/* Fix: Use addresses property from nested contacts object */}
+                  {MOCK_PROFILE.contacts.addresses.map((addr, idx) => (
+                    <div key={idx} className="p-6 bg-black/40 border border-zinc-800 rounded-2xl group hover:border-blue-500/30 transition-all">
+                      <div className="flex justify-between items-start mb-4">
+                        <p className="text-[10px] font-black text-zinc-600 uppercase tracking-widest">{addr.type}</p>
+                        <Building size={14} className="text-zinc-700" />
+                      </div>
+                      <p className="text-white font-bold text-base">{addr.addressLine1}</p>
+                      {/* Fix: Used addr.country as per CustomerAddress type */}
+                      <p className="text-zinc-500 text-xs font-medium">{addr.city}, {addr.country} {addr.postalCode}</p>
+                    </div>
+                  ))}
+                  <button className="p-6 border-2 border-dashed border-zinc-800 rounded-2xl text-zinc-700 hover:text-zinc-500 hover:border-zinc-700 transition-all flex flex-col items-center justify-center gap-2 font-black text-[10px] uppercase tracking-widest">
+                    <Plus size={20} />
+                    Register New Address
+                  </button>
+                </div>
+              </section>
+            </div>
+          )}
+
+          {activeTab === 'security' && (
+            <div className="flex flex-col items-center justify-center min-h-[500px] text-center space-y-8 animate-in zoom-in-95 duration-500 px-4">
+              <div className="relative">
+                <div className={`p-10 bg-blue-600/10 text-blue-500 rounded-[32px] shadow-2xl shadow-blue-900/10 border border-blue-500/20 relative z-10 transition-transform duration-700 ${isRotating ? 'scale-110' : ''}`}>
+                  {isRotating ? <RefreshCw size={64} className="animate-spin" /> : <Lock size={64} />}
+                </div>
+                {isRotating && (
+                  <div className="absolute inset-0 bg-blue-500/20 blur-2xl rounded-full animate-pulse"></div>
+                )}
+              </div>
+              
+              <div className="max-w-md">
+                <h3 className="text-2xl font-black text-white tracking-tight uppercase italic mb-3">Quantum Authentication</h3>
+                <p className="text-zinc-500 font-medium leading-relaxed">Secure machine-to-machine session management via rotating RSA-OAEP-256 encrypted master secrets.</p>
+                
+                <div className="mt-8 p-6 bg-black border border-zinc-800 rounded-3xl relative overflow-hidden group">
+                   <div className="absolute top-0 right-0 p-4 opacity-5 pointer-events-none">
+                     <Fingerprint size={60} />
+                   </div>
+                   <p className="text-[9px] font-black text-zinc-600 uppercase tracking-widest mb-2 text-left">Active Session Secret</p>
+                   <div className="flex items-center justify-between">
+                     <span className="text-blue-400 font-mono text-xs break-all text-left">{masterKey}</span>
+                     <CheckCircle2 size={14} className="text-emerald-500 shrink-0 ml-4" />
+                   </div>
+                </div>
+
+                {rotationStep && (
+                  <p className="mt-6 text-[10px] font-black text-blue-500 uppercase tracking-[0.2em] animate-pulse">
+                    {rotationStep}
+                  </p>
+                )}
+
+                {rotationLog && !isRotating && (
+                  <div className="mt-6 p-4 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl text-[11px] font-medium text-emerald-400 italic animate-in slide-in-from-top-2">
+                    <CheckCircle2 size={12} className="inline mr-2" />
+                    "{rotationLog}"
+                  </div>
+                )}
+              </div>
+
+              <div className="flex flex-col sm:flex-row gap-4 w-full max-w-sm">
+                <button 
+                  onClick={handleRotateCredentials}
+                  disabled={isRotating}
+                  className="flex-1 py-4 bg-zinc-800 hover:bg-zinc-700 disabled:opacity-50 text-white rounded-2xl font-black text-xs uppercase tracking-widest border border-zinc-700 flex items-center justify-center gap-3 transition-all"
+                >
+                  {isRotating ? <Loader2 size={16} className="animate-spin" /> : <RefreshCw size={16} />}
+                  <span>{isRotating ? 'Rotating...' : 'Rotate Credentials'}</span>
+                </button>
+                <button className="flex-1 py-4 bg-rose-600/10 hover:bg-rose-600/20 text-rose-500 rounded-2xl font-black text-xs uppercase tracking-widest border border-rose-500/20 transition-all">
+                  Revoke Node
+                </button>
+              </div>
+            </div>
+          )}
+
+          {activeTab === 'notifications' && (
+            <div className="space-y-10 animate-in slide-in-from-left-4 duration-500">
+              <div className="flex items-center gap-3">
+                <div className="p-3 bg-blue-600/10 text-blue-500 rounded-xl">
+                  <Zap size={20} />
+                </div>
+                <h3 className="text-lg font-bold text-white uppercase italic tracking-tighter">Event Webhook Gateway</h3>
+              </div>
+              
+              <div className="space-y-4">
+                <ToggleItem label="Real-time Transaction Notifications" checked={toggles.tx} onChange={() => setToggles({...toggles, tx: !toggles.tx})} />
+                <ToggleItem label="IAM Token Expiry Warnings" checked={toggles.iam} onChange={() => setToggles({...toggles, iam: !toggles.iam})} />
+                <ToggleItem label="Dynamic Client Registry Updates" checked={toggles.dcr} onChange={() => setToggles({...toggles, dcr: !toggles.dcr})} />
+                <ToggleItem label="ESG Threshold Deviations" checked={toggles.esg} onChange={() => setToggles({...toggles, esg: !toggles.esg})} />
+              </div>
+
+              <div className="p-8 bg-zinc-950 rounded-[2.5rem] border border-zinc-800 space-y-6 shadow-xl">
+                <div className="space-y-2">
+                  <label className="text-[10px] font-black text-zinc-600 uppercase tracking-widest ml-1">Webhook Destination URI</label>
+                  <div className="flex flex-col sm:flex-row gap-4">
+                    <div className="flex-1 relative">
+                      <Globe className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-700" size={16} />
+                      <input 
+                        value={webhookUri}
+                        onChange={(e) => setWebhookUri(e.target.value)}
+                        placeholder="e.g. https://your-endpoint.io/webhook" 
+                        className="w-full bg-black border border-zinc-800 focus:border-blue-500/50 rounded-2xl pl-12 pr-5 py-4 text-zinc-200 font-mono text-xs outline-none transition-all placeholder:text-zinc-800" 
+                      />
+                    </div>
+                    <button 
+                      onClick={handleTestWebhook}
+                      disabled={isTestingWebhook || !webhookUri.trim()}
+                      className="px-8 py-4 bg-blue-600 hover:bg-blue-500 disabled:bg-zinc-800 disabled:text-zinc-700 text-white rounded-2xl text-xs font-black uppercase tracking-widest transition-all flex items-center justify-center gap-3"
+                    >
+                      {isTestingWebhook ? <Loader2 size={16} className="animate-spin" /> : <Zap size={16} />}
+                      Test Dispatch
+                    </button>
+                  </div>
+                </div>
+
+                {webhookLogs.length > 0 && (
+                  <div className="bg-black rounded-3xl border border-zinc-900 overflow-hidden animate-in fade-in slide-in-from-bottom-4">
+                    <div className="bg-zinc-900/50 px-6 py-3 border-b border-zinc-800 flex items-center justify-between">
+                      <span className="text-[9px] font-black uppercase text-zinc-500 tracking-widest flex items-center gap-2">
+                        <Terminal size={12} className="text-blue-500" />
+                        LQI Webhook Console
+                      </span>
+                      <button onClick={() => setWebhookLogs([])} className="text-[9px] font-black text-zinc-600 hover:text-white uppercase transition-colors">Flush Cache</button>
+                    </div>
+                    <div className="p-6 h-40 overflow-y-auto font-mono text-[10px] space-y-2 custom-scrollbar">
+                      {webhookLogs.map((log, i) => (
+                        <div key={i} className={`flex items-start gap-3 ${
+                          log.type === 'error' ? 'text-rose-500' : 
+                          log.type === 'success' ? 'text-emerald-500' : 
+                          'text-zinc-500'
+                        }`}>
+                          <span className="opacity-30 shrink-0">[{new Date().toLocaleTimeString([], { hour12: false })}]</span>
+                          <span className="flex-1">
+                            {log.type === 'error' && <ShieldAlert size={10} className="inline mr-1" />}
+                            {log.msg}
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const NavButton = ({ active, onClick, icon: Icon, label }: any) => (
+  <button 
+    onClick={onClick}
+    className={`w-full flex items-center space-x-3 px-6 py-5 rounded-[24px] transition-all group ${
+      active 
+        ? 'bg-blue-600 text-white shadow-2xl shadow-blue-900/30' 
+        : 'text-zinc-500 hover:bg-zinc-800/50 hover:text-zinc-300'
+    }`}
+  >
+    <Icon size={20} className={active ? 'text-white' : 'text-zinc-600 group-hover:text-blue-500 transition-colors'} />
+    <span className="font-black text-sm uppercase tracking-widest">{label}</span>
+  </button>
+);
+
+const Input = ({ label, value }: any) => (
+  <div className="space-y-2">
+    <label className="block text-[10px] font-black text-zinc-600 uppercase tracking-widest ml-1">{label}</label>
+    <input 
+      readOnly
+      defaultValue={value}
+      className="w-full bg-black border border-zinc-800 rounded-2xl px-5 py-3.5 text-white font-medium outline-none cursor-default focus:border-blue-500/30 transition-all"
+    />
+  </div>
+);
+
+const ToggleItem = ({ label, checked, onChange }: any) => {
+  return (
+    <div className="flex justify-between items-center p-5 bg-black/40 border border-zinc-800 rounded-2xl hover:border-zinc-700 transition-all group">
+      <span className="text-sm font-black text-zinc-300 uppercase tracking-tight group-hover:text-white transition-colors">{label}</span>
+      <button 
+        onClick={onChange}
+        className={`w-14 h-7 rounded-full relative transition-all duration-300 ${checked ? 'bg-blue-600 shadow-lg shadow-blue-900/30' : 'bg-zinc-800'}`}
+      >
+        <div className={`absolute top-1 w-5 h-5 rounded-full bg-white shadow-md transition-all duration-300 ${checked ? 'left-8' : 'left-1'}`}></div>
+      </button>
+    </div>
+  );
+};
+
+export default Settings;

views/Simulation.tsx

@@ -0,0 +1,149 @@
+
+import React, { useState } from 'react';
+import { Play, Sparkles, AlertCircle, CheckCircle2, ChevronRight, Loader2 } from 'lucide-react';
+import { runSimulationForecast } from '../services/geminiService.ts';
+import { SimulationResult } from '../types/index.ts';
+
+const ScenarioButton = ({ label, description, onClick }: any) => (
+  <button 
+    onClick={() => onClick(label)}
+    className="text-left p-5 rounded-2xl bg-zinc-900 border border-zinc-800 hover:border-blue-500/50 hover:bg-zinc-800/50 transition-all group"
+  >
+    <h4 className="text-white font-bold mb-1 group-hover:text-blue-400 transition-colors">{label}</h4>
+    <p className="text-zinc-500 text-xs leading-relaxed">{description}</p>
+  </button>
+);
+
+const Simulation: React.FC = () => {
+  const [prompt, setPrompt] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState<SimulationResult | null>(null);
+
+  const handleRun = async (overridePrompt?: string) => {
+    const finalPrompt = overridePrompt || prompt;
+    if (!finalPrompt) return;
+    
+    setLoading(true);
+    const data = await runSimulationForecast(finalPrompt);
+    setResult(data);
+    setLoading(false);
+  };
+
+  return (
+    <div className="max-w-5xl mx-auto space-y-8 animate-in slide-in-from-bottom-4 duration-500">
+      <div className="bg-gradient-to-br from-indigo-900/20 via-zinc-900 to-zinc-900 border border-zinc-800 rounded-3xl p-10 overflow-hidden relative">
+        <div className="absolute top-0 right-0 -mt-10 -mr-10 w-64 h-64 bg-indigo-600/10 blur-[80px] rounded-full"></div>
+        <div className="relative z-10">
+          <div className="flex items-center space-x-3 mb-4">
+            <div className="p-2 rounded-lg bg-indigo-500/20 text-indigo-400">
+              <Sparkles size={24} />
+            </div>
+            <h2 className="text-3xl font-bold text-white tracking-tight">Gemini Oracle Simulation</h2>
+          </div>
+          <p className="text-zinc-400 text-lg mb-8 max-w-2xl">
+            Simulate complex market shifts, regulatory shocks, or internal expenditure reallocations using neural financial forecasting.
+          </p>
+          
+          <div className="flex flex-col space-y-4">
+            <div className="relative">
+              <textarea 
+                value={prompt}
+                onChange={(e) => setPrompt(e.target.value)}
+                placeholder="e.g., 'Simulate a 5% inflation spike over 12 months with a focus on cloud compute costs'"
+                className="w-full bg-black border-2 border-zinc-800 focus:border-indigo-500/50 rounded-2xl p-6 text-white text-lg min-h-[160px] outline-none transition-all resize-none placeholder:text-zinc-700"
+              ></textarea>
+              <button 
+                onClick={() => handleRun()}
+                disabled={loading || !prompt}
+                className="absolute bottom-4 right-4 px-8 py-3 bg-indigo-600 hover:bg-indigo-500 disabled:bg-zinc-800 disabled:text-zinc-500 text-white rounded-xl font-bold flex items-center space-x-2 transition-all shadow-lg shadow-indigo-900/20"
+              >
+                {loading ? <Loader2 className="animate-spin" size={20} /> : <Play size={20} fill="currentColor" />}
+                <span>{loading ? 'Thinking...' : 'Run Simulation'}</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <ScenarioButton 
+          label="Market Crash" 
+          description="Simulate 2008-style housing collapse on commercial real estate portfolio." 
+          onClick={handleRun}
+        />
+        <ScenarioButton 
+          label="Hyperinflation" 
+          description="Model assets against 15%+ annual CPI growth over a 3-year horizon." 
+          onClick={handleRun}
+        />
+        <ScenarioButton 
+          label="AI Expansion" 
+          description="Forecast ROI on $2M compute spend increase vs reduced dev headcount." 
+          onClick={handleRun}
+        />
+      </div>
+
+      {result && (
+        <div className="bg-zinc-900 border border-zinc-800 rounded-3xl p-8 animate-in zoom-in-95 duration-300">
+          <div className="flex justify-between items-start mb-8 pb-8 border-b border-zinc-800">
+            <div className="flex items-center space-x-4">
+              <div className="w-12 h-12 rounded-2xl bg-emerald-500/10 text-emerald-500 flex items-center justify-center">
+                <CheckCircle2 size={28} />
+              </div>
+              <div>
+                <h3 className="text-xl font-bold text-white">Simulation Results</h3>
+                <p className="text-zinc-500 text-sm mono">REF: {result.simulationId}</p>
+              </div>
+            </div>
+            <div className="text-right">
+              <p className="text-[10px] uppercase tracking-widest text-zinc-500 font-bold mb-1">Confidence Score</p>
+              <div className="flex items-center space-x-2">
+                <div className="h-2 w-32 bg-zinc-800 rounded-full overflow-hidden">
+                  <div className="h-full bg-emerald-500" style={{ width: `${result.confidenceScore * 100}%` }}></div>
+                </div>
+                <span className="text-sm font-bold text-zinc-300">{Math.round(result.confidenceScore * 100)}%</span>
+              </div>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+            <div>
+              <h4 className="text-zinc-400 font-bold uppercase text-[10px] tracking-widest mb-4">Neural Narrative</h4>
+              <p className="text-zinc-200 leading-relaxed italic border-l-2 border-blue-500/30 pl-6 py-2">
+                "{result.outcomeNarrative}"
+              </p>
+            </div>
+            <div className="bg-black/40 rounded-2xl p-8 border border-zinc-800">
+              <div className="space-y-6">
+                <div>
+                  <p className="text-zinc-500 text-xs mb-1">Projected Portfolio Value (12M)</p>
+                  <p className="text-4xl font-bold text-white mono tracking-tighter">
+                    ${result.projectedValue?.toLocaleString()}
+                  </p>
+                </div>
+                <div className="flex space-x-4">
+                  <div className="flex-1 p-4 rounded-xl bg-zinc-800/50 border border-zinc-700">
+                    <p className="text-zinc-500 text-[10px] font-bold uppercase mb-1">Risk Exposure</p>
+                    <div className="flex items-center space-x-2 text-rose-500">
+                      <AlertCircle size={16} />
+                      <span className="font-bold">Elevated</span>
+                    </div>
+                  </div>
+                  <div className="flex-1 p-4 rounded-xl bg-zinc-800/50 border border-zinc-700">
+                    <p className="text-zinc-500 text-[10px] font-bold uppercase mb-1">Resilience Rating</p>
+                    <div className="flex items-center space-x-2 text-blue-400">
+                      <ChevronRight size={16} />
+                      <span className="font-bold">AA-</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Simulation;

views/Sustainability.tsx

@@ -0,0 +1,157 @@
+
+import React, { useState } from 'react';
+import { Leaf, Wind, Droplets, Factory, Info, ExternalLink, CheckCircle2, Loader2 } from 'lucide-react';
+import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts';
+/* Fix: react-router-dom exports may be flaky in this environment, using standard v6 imports */
+import { useNavigate } from 'react-router-dom';
+
+const MOCK_DATA = [
+  { name: 'Data Centers', value: 45, color: '#3b82f6' },
+  { name: 'Supply Chain', value: 25, color: '#10b981' },
+  { name: 'Office Logistics', value: 15, color: '#8b5cf6' },
+  { name: 'Business Travel', value: 15, color: '#f59e0b' },
+];
+
+const Sustainability: React.FC = () => {
+  const [buying, setBuying] = useState(false);
+  const isInitiallyNeutral = localStorage.getItem('esg_neutral') === 'true';
+  const [success, setSuccess] = useState(isInitiallyNeutral);
+  const navigate = useNavigate();
+
+  const handleBuyCredits = () => {
+    setBuying(true);
+    setTimeout(() => {
+      setBuying(false);
+      setSuccess(true);
+      localStorage.setItem('esg_neutral', 'true');
+      window.dispatchEvent(new Event('esg-update'));
+    }, 2000);
+  };
+
+  return (
+    <div className="space-y-8 animate-in fade-in slide-in-from-right-4 duration-700">
+      <div className="bg-zinc-900 border border-zinc-800 rounded-[32px] overflow-hidden">
+        <div className="grid grid-cols-1 lg:grid-cols-2">
+          <div className="p-10 border-r border-zinc-800 min-w-0">
+            <div className="flex items-center space-x-3 mb-6">
+              <div className={`p-3 rounded-2xl ${success ? 'bg-emerald-500/10 text-emerald-500' : 'bg-blue-500/10 text-blue-500'} transition-colors`}>
+                <Leaf size={32} />
+              </div>
+              <h2 className="text-3xl font-bold text-white">Carbon Ledger</h2>
+            </div>
+            
+            <div className="mb-10">
+              <p className="text-zinc-500 text-sm font-medium mb-2 uppercase tracking-widest">Aggregate Carbon Intensity</p>
+              <div className="flex items-baseline space-x-3">
+                <h3 className={`text-6xl font-bold tracking-tighter mono transition-colors ${success ? 'text-emerald-500' : 'text-white'}`}>
+                  {success ? '0' : '1,242'}
+                </h3>
+                <span className="text-zinc-400 font-bold text-xl uppercase">Kg CO2e</span>
+              </div>
+              {success && <p className="text-emerald-500 text-xs font-bold mt-2 uppercase tracking-[0.2em]">Net Zero Achieved</p>}
+            </div>
+
+            <div className="space-y-4">
+              <div className="flex items-center justify-between p-4 bg-black/50 rounded-2xl border border-zinc-800">
+                <div className="flex items-center space-x-4">
+                  <div className="p-2 bg-blue-500/10 text-blue-500 rounded-lg"><Wind size={20} /></div>
+                  <span className="font-semibold text-zinc-300">Renewable Energy</span>
+                </div>
+                <span className="text-emerald-500 font-bold">100% Offset</span>
+              </div>
+              <div className="flex items-center justify-between p-4 bg-black/50 rounded-2xl border border-zinc-800">
+                <div className="flex items-center space-x-4">
+                  <div className="p-2 bg-amber-500/10 text-amber-500 rounded-lg"><Factory size={20} /></div>
+                  <span className="font-semibold text-zinc-300">Verified Projects</span>
+                </div>
+                <span className="text-zinc-400 font-bold">{success ? '4 Active' : 'None'}</span>
+              </div>
+            </div>
+          </div>
+
+          <div className="p-10 bg-zinc-950/50 flex flex-col min-w-0">
+            <h4 className="text-white font-bold text-xl mb-2">Emission Matrix</h4>
+            <p className="text-zinc-500 text-sm mb-8">Quantum audit of environmental externalities</p>
+            
+            {/* Explicit container fix for Recharts dimension warning */}
+            <div className="flex-1 relative min-h-[300px] h-[300px]">
+              <ResponsiveContainer width="100%" height="100%">
+                <PieChart>
+                  <Pie
+                    data={MOCK_DATA}
+                    cx="50%"
+                    cy="50%"
+                    innerRadius={60}
+                    outerRadius={80}
+                    paddingAngle={8}
+                    dataKey="value"
+                  >
+                    {MOCK_DATA.map((entry, index) => (
+                      <Cell key={`cell-${index}`} fill={success ? '#10b981' : entry.color} stroke="none" />
+                    ))}
+                  </Pie>
+                  <Tooltip 
+                    contentStyle={{ backgroundColor: '#18181b', border: 'none', borderRadius: '12px', fontSize: '12px' }}
+                    itemStyle={{ color: '#fff' }}
+                  />
+                </PieChart>
+              </ResponsiveContainer>
+              <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+                <div className="text-center">
+                  <p className="text-[10px] text-zinc-500 uppercase font-bold tracking-widest">ESG Rating</p>
+                  <p className="text-emerald-500 font-bold text-sm">{success ? 'AAA' : 'AA-'}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className={`transition-all duration-500 ${success ? 'bg-emerald-600/10 border-emerald-500/30' : 'bg-blue-600/10 border-blue-500/20'} border rounded-[32px] p-10`}>
+        <div className="flex items-start space-x-6">
+          <div className={`p-4 ${success ? 'bg-emerald-600 shadow-emerald-900/40' : 'bg-blue-600 shadow-blue-900/40'} text-white rounded-2xl shadow-xl transition-all`}>
+            {success ? <CheckCircle2 size={32} /> : <Info size={32} />}
+          </div>
+          <div className="flex-1">
+            <h3 className="text-white font-bold text-2xl mb-2 tracking-tight">
+              {success ? 'Portfolio Neutrality Confirmed' : 'Action Required: Q3 Carbon Deficit'}
+            </h3>
+            <p className={`${success ? 'text-emerald-100/70' : 'text-blue-100/70'} text-lg leading-relaxed mb-8`}>
+              {success 
+                ? "Your corporate ledger is now verified Carbon Neutral. 25 Carbon Credits have been successfully retired. Certificate #QC-8841-B is available in your Audit Report."
+                : "Quantum analysis identifies 1,242Kg of unmitigated emissions. Purchase 25 verified credits to achieve neutrality."}
+            </p>
+            <div className="flex gap-4">
+              {!success ? (
+                <button 
+                  onClick={handleBuyCredits}
+                  disabled={buying}
+                  className="px-8 py-3.5 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-bold transition-all flex items-center gap-3 shadow-xl shadow-blue-900/30"
+                >
+                  {buying ? <Loader2 size={20} className="animate-spin" /> : <Leaf size={20} />}
+                  <span>{buying ? 'Executing Quantum Offset...' : 'Buy Carbon Credits'}</span>
+                </button>
+              ) : (
+                <button 
+                  onClick={() => navigate('/analytics')}
+                  className="px-8 py-3.5 bg-emerald-600 hover:bg-emerald-500 text-white rounded-2xl font-bold transition-all shadow-xl shadow-emerald-900/30"
+                >
+                  View ESG Audit Report
+                </button>
+              )}
+              <button 
+                onClick={() => navigate('/analytics')}
+                className="px-8 py-3.5 bg-zinc-800 hover:bg-zinc-700 text-zinc-200 rounded-2xl font-bold transition-all flex items-center gap-2"
+              >
+                <span>Full ESG Transparency</span>
+                <ExternalLink size={18} />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Sustainability;

views/Validations.tsx

@@ -0,0 +1,209 @@
+
+import React, { useState } from 'react';
+import { 
+  ShieldCheck, 
+  Search, 
+  Building2, 
+  Globe, 
+  AlertCircle, 
+  CheckCircle2, 
+  Loader2, 
+  Terminal,
+  ArrowRight,
+  Info,
+  Key,
+  MapPin,
+  ShieldAlert,
+  Zap
+} from 'lucide-react';
+
+const Validations: React.FC = () => {
+  const [routingNumber, setRoutingNumber] = useState('');
+  const [basicToken, setBasicToken] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState<any>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleValidate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!routingNumber || !basicToken) {
+      setError("Routing number and Basic Token are required.");
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    setResult(null);
+
+    try {
+      const response = await fetch(`https://try.readme.io/https://app.moderntreasury.com/api/validations/routing_numbers?routing_number=${routingNumber}&routing_number_type=aba`, {
+        method: "GET",
+        headers: {
+          "accept": "application/json",
+          "accept-language": "en-US,en;q=0.9",
+          "authorization": `Basic ${basicToken}`,
+          "cache-control": "no-cache",
+          "pragma": "no-cache",
+          "sec-fetch-dest": "empty",
+          "sec-fetch-mode": "cors",
+          "sec-fetch-site": "cross-site",
+          "x-readme-api-explorer": "5.590.0"
+        },
+        mode: "cors",
+        credentials: "include"
+      });
+
+      if (!response.ok) {
+        const errData = await response.json().catch(() => ({}));
+        throw new Error(errData?.errors?.[0]?.message || `HTTP ${response.status}: API Handshake Failed`);
+      }
+
+      const data = await response.json();
+      setResult(data);
+    } catch (err: any) {
+      setError(err.message || "Network Error: Failed to synchronize with validation node.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="max-w-5xl mx-auto space-y-10 animate-in slide-in-from-bottom-6 duration-700">
+      <div className="text-center space-y-4">
+        <div className="w-20 h-20 bg-blue-600/10 text-blue-500 rounded-3xl flex items-center justify-center mx-auto shadow-2xl">
+          <ShieldCheck size={40} />
+        </div>
+        <h2 className="text-4xl font-black text-white italic tracking-tighter uppercase">Registry <span className="text-blue-500 not-italic">Validator</span></h2>
+        <p className="text-zinc-500 text-sm max-w-md mx-auto font-medium">Modern Treasury Bridge: Live Routing Integrity Screening</p>
+      </div>
+
+      <div className="bg-zinc-950 border border-zinc-900 rounded-[3rem] p-12 shadow-2xl relative overflow-hidden group">
+        <div className="absolute top-0 right-0 p-10 opacity-5 group-hover:opacity-10 transition-opacity">
+          <Terminal size={140} />
+        </div>
+        
+        <form onSubmit={handleValidate} className="relative z-10 space-y-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="space-y-2">
+              <label className="text-[10px] font-black text-zinc-600 uppercase tracking-widest ml-1">ABA Routing Number</label>
+              <div className="relative">
+                <Search className="absolute left-6 top-1/2 -translate-y-1/2 text-zinc-600" size={18} />
+                <input 
+                  value={routingNumber}
+                  onChange={e => setRoutingNumber(e.target.value)}
+                  placeholder="e.g. 021000021"
+                  className="w-full bg-black border-2 border-zinc-900 focus:border-blue-500/50 rounded-2xl py-5 pl-16 pr-6 text-white text-sm outline-none transition-all placeholder:text-zinc-800 font-bold"
+                />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <label className="text-[10px] font-black text-zinc-600 uppercase tracking-widest ml-1">Basic Auth Token</label>
+              <div className="relative">
+                <Key className="absolute left-6 top-1/2 -translate-y-1/2 text-zinc-600" size={18} />
+                <input 
+                  type="password"
+                  value={basicToken}
+                  onChange={e => setBasicToken(e.target.value)}
+                  placeholder="Basic {token}"
+                  className="w-full bg-black border-2 border-zinc-900 focus:border-blue-500/50 rounded-2xl py-5 pl-16 pr-6 text-white text-sm outline-none transition-all placeholder:text-zinc-800 font-mono"
+                />
+              </div>
+            </div>
+          </div>
+          <button 
+            disabled={loading || !routingNumber || !basicToken}
+            className="w-full py-6 bg-blue-600 hover:bg-blue-500 disabled:bg-zinc-900 disabled:text-zinc-700 text-white rounded-2xl font-black text-xs uppercase tracking-[0.3em] transition-all flex items-center justify-center gap-3 shadow-xl shadow-blue-900/30"
+          >
+            {loading ? <Loader2 className="animate-spin" size={20} /> : <Zap size={20} />}
+            <span>{loading ? 'Performing Handshake...' : 'Synchronize Validator'}</span>
+          </button>
+        </form>
+      </div>
+
+      {error && (
+        <div className="p-8 bg-rose-600/10 border border-rose-500/20 rounded-[2rem] flex items-center gap-6 animate-in zoom-in-95">
+          <ShieldAlert className="text-rose-500 shrink-0" size={32} />
+          <div>
+            <h4 className="text-rose-500 font-black uppercase text-xs tracking-widest mb-1">Handshake Interrupted</h4>
+            <p className="text-zinc-400 text-sm font-medium">{error}</p>
+          </div>
+        </div>
+      )}
+
+      {result && (
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 animate-in slide-in-from-top-6 duration-700">
+          <div className="lg:col-span-1 bg-zinc-950 border border-zinc-900 rounded-[3rem] p-10 space-y-8 shadow-2xl relative overflow-hidden">
+            <div className="absolute top-0 right-0 p-8 opacity-5">
+               <Building2 size={80} />
+            </div>
+            <div className="flex items-center gap-4">
+              <div className="w-12 h-12 bg-emerald-500/10 text-emerald-500 rounded-2xl flex items-center justify-center">
+                <CheckCircle2 size={24} />
+              </div>
+              <div>
+                <h3 className="text-white font-black text-lg uppercase italic tracking-tighter">Verified Node</h3>
+                <p className="text-[10px] text-zinc-500 font-black uppercase tracking-widest">{result.routing_number}</p>
+              </div>
+            </div>
+            <div className="space-y-6">
+              <div className="p-6 bg-black rounded-2xl border border-zinc-900">
+                <p className="text-[10px] font-black text-zinc-600 uppercase tracking-widest mb-2">Legal Entity</p>
+                <p className="text-white font-bold text-sm uppercase leading-relaxed">{result.bank_name}</p>
+              </div>
+              <div className="p-6 bg-black rounded-2xl border border-zinc-900">
+                <p className="text-[10px] font-black text-zinc-600 uppercase tracking-widest mb-2">Node Type</p>
+                <p className="text-blue-500 font-black uppercase text-sm mono">{result.routing_number_type}</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="lg:col-span-2 bg-zinc-950 border border-zinc-900 rounded-[3rem] p-10 space-y-8 shadow-2xl relative overflow-hidden group">
+            <div className="absolute top-0 right-0 p-10 opacity-5 group-hover:scale-110 transition-transform duration-1000">
+               <MapPin size={120} className="text-blue-500" />
+            </div>
+            <div className="flex items-center gap-4">
+              <div className="p-3 bg-blue-600/10 text-blue-500 rounded-xl">
+                <Globe size={24} />
+              </div>
+              <h3 className="text-white font-black text-lg uppercase italic tracking-tighter">Geospatial Metadata</h3>
+            </div>
+            
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+               <div className="space-y-6">
+                 <div className="p-6 bg-black rounded-2xl border border-zinc-900">
+                   <p className="text-[10px] font-black text-zinc-600 uppercase tracking-widest mb-3">Host Address</p>
+                   <p className="text-zinc-200 text-sm font-medium leading-relaxed">
+                     {result.bank_address?.line1}<br />
+                     {result.bank_address?.locality}, {result.bank_address?.region} {result.bank_address?.postal_code}<br />
+                     {result.bank_address?.country}
+                   </p>
+                 </div>
+               </div>
+               <div className="space-y-6">
+                 <div className="p-6 bg-black rounded-2xl border border-zinc-900">
+                   <p className="text-[10px] font-black text-zinc-600 uppercase tracking-widest mb-3">Supported Protocols</p>
+                   <div className="flex flex-wrap gap-2">
+                     {result.supported_payment_types?.map((t: string) => (
+                       <span key={t} className="px-3 py-1 bg-blue-500/10 border border-blue-500/20 rounded-full text-[9px] font-black uppercase text-blue-500">
+                         {t} Optimized
+                       </span>
+                     ))}
+                   </div>
+                 </div>
+                 <div className="p-6 bg-black rounded-2xl border border-zinc-900">
+                   <p className="text-[10px] font-black text-zinc-600 uppercase tracking-widest mb-2">Sanctions Status</p>
+                   <div className="flex items-center gap-2">
+                     <CheckCircle2 size={12} className="text-emerald-500" />
+                     <span className="text-emerald-500 font-black uppercase text-[10px]">Zero Deviations</span>
+                   </div>
+                 </div>
+               </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Validations;

views/VirtualAccounts.tsx

@@ -0,0 +1,505 @@
+import React, { useState, useMemo } from 'react';
+import { 
+  Network, 
+  Layers, 
+  Search, 
+  RefreshCw, 
+  ArrowUpRight, 
+  Building,
+  ShieldCheck,
+  Plus,
+  Trash2,
+  ChevronRight,
+  MoreVertical,
+  X,
+  Loader2,
+  Terminal,
+  Activity,
+  Settings2,
+  CheckCircle2,
+  Cpu,
+  AlertCircle
+} from 'lucide-react';
+import { VirtualAccount } from '../types/index.ts';
+import { callGemini } from '../services/geminiService.ts';
+
+const INITIAL_MOCK_VA: VirtualAccount[] = [
+  {
+    id: 'VA-88021',
+    object: 'virtual_account',
+    live_mode: true,
+    created_at: '2024-02-15T10:00:00Z',
+    updated_at: '2024-03-31T14:20:00Z',
+    name: 'Q1 Sales Collection - UK',
+    description: 'Virtual account for routing Sterling sales to main treasury.',
+    counterparty_id: 'CP-8801',
+    internal_account_id: 'IA-4401',
+    account_details: [],
+    routing_details: [],
+    status: 'ACTIVE'
+  },
+  {
+    id: 'VA-90112',
+    object: 'virtual_account',
+    live_mode: true,
+    created_at: '2024-03-01T09:30:00Z',
+    updated_at: '2024-03-31T12:00:00Z',
+    name: 'EMEA Vendor Pass-through',
+    description: 'Temporary buffer for Eurozone contractor payments.',
+    counterparty_id: null,
+    internal_account_id: 'IA-9902',
+    account_details: [],
+    routing_details: [],
+    status: 'ACTIVE'
+  },
+  {
+    id: 'VA-11234',
+    object: 'virtual_account',
+    live_mode: true,
+    created_at: '2023-12-10T11:45:00Z',
+    updated_at: '2024-03-25T16:00:00Z',
+    name: 'Legacy APAC Bridge',
+    description: 'Deprecated node being phased out.',
+    counterparty_id: 'CP-1105',
+    internal_account_id: 'IA-4401',
+    account_details: [],
+    routing_details: [],
+    status: 'PENDING'
+  }
+];
+
+const VirtualAccounts: React.FC = () => {
+  const [loading, setLoading] = useState(false);
+  const [accounts, setAccounts] = useState<VirtualAccount[]>(INITIAL_MOCK_VA);
+  
+  // Modal States
+  const [isProvisionOpen, setIsProvisionOpen] = useState(false);
+  const [isConfigOpen, setIsConfigOpen] = useState(false);
+  const [isReconcilerOpen, setIsReconcilerOpen] = useState(false);
+  const [selectedVa, setSelectedVa] = useState<VirtualAccount | null>(null);
+  
+  // Provisioning State
+  const [provisioning, setProvisioning] = useState(false);
+  const [provisionError, setProvisionError] = useState<string | null>(null);
+  const [newVa, setNewVa] = useState({ name: '', description: '', parent: 'IA-4401' });
+
+  // Reconciler State
+  const [reconciling, setReconciling] = useState(false);
+  const [reconcileReport, setReconcileReport] = useState<string | null>(null);
+
+  const refreshNodes = () => {
+    setLoading(true);
+    setTimeout(() => setLoading(false), 1200);
+  };
+
+  const handleProvision = async () => {
+    setProvisionError(null);
+    const trimmedName = newVa.name.trim();
+    
+    // 1. Client-Side Parity Check: Duplicate Names
+    if (accounts.some(acc => acc.name.toLowerCase() === trimmedName.toLowerCase())) {
+      setProvisionError("Node identity collision: A node with this designation already exists in the virtual mesh.");
+      return;
+    }
+
+    setProvisioning(true);
+    
+    try {
+      // 2. Artificial neural network handshake simulation
+      await new Promise(r => setTimeout(r, 2000));
+      
+      // 3. Simulated Registry-Level Validation (e.g. invalid parent or system refusal)
+      if (trimmedName.toLowerCase() === 'fail') {
+        throw new Error("Registry Rejection: Parent Account ID " + newVa.parent + " refused handshake authorization.");
+      }
+
+      const node: VirtualAccount = {
+        id: `VA-${Math.floor(10000 + Math.random() * 90000)}`,
+        object: 'virtual_account',
+        live_mode: true,
+        created_at: new Date().toISOString(),
+        updated_at: new Date().toISOString(),
+        name: trimmedName || 'Untitled Node',
+        description: newVa.description || 'Provisioned via Quantum Foundry',
+        counterparty_id: null,
+        internal_account_id: newVa.parent,
+        account_details: [],
+        routing_details: [],
+        status: 'ACTIVE'
+      };
+      
+      setAccounts([node, ...accounts]);
+      setIsProvisionOpen(false);
+      setNewVa({ name: '', description: '', parent: 'IA-4401' });
+    } catch (err: any) {
+      setProvisionError(err.message || "Protocol Handshake Failure: The global registry node timed out.");
+    } finally {
+      setProvisioning(false);
+    }
+  };
+
+  const handleRunReconciler = async () => {
+    setReconciling(true);
+    setReconcileReport(null);
+    try {
+      const response = await callGemini(
+        'gemini-3-flash-preview',
+        "Generate a professional 2-sentence summary for a financial reconciliation process. Mention 99.9% match accuracy and the resolution of 12 incoming virtual node signals across UK and EMEA regions. Tone: Technical and secure."
+      );
+      setReconcileReport(response.candidates?.[0]?.content?.parts?.[0]?.text);
+    } catch (err) {
+      setReconcileReport("Neural reconciliation complete. Signal integrity verified at 99.9%. All ledger entries matched with zero drift.");
+    } finally {
+      setReconciling(false);
+    }
+  };
+
+  const deleteNode = (id: string) => {
+    if (confirm("De-provision node? This will sever all incoming signal routing.")) {
+      setAccounts(accounts.filter(a => a.id !== id));
+    }
+  };
+
+  const openProvisionModal = () => {
+    setProvisionError(null);
+    setIsProvisionOpen(true);
+  };
+
+  return (
+    <div className="space-y-10 animate-in fade-in duration-700">
+      <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
+        <div>
+          <h2 className="text-3xl font-black text-white italic tracking-tighter uppercase mb-2">Virtual <span className="text-blue-500 not-italic">Nodes</span></h2>
+          <p className="text-zinc-500 text-[10px] font-black uppercase tracking-[0.3em]">High-Volume Disbursement & Collection Layer</p>
+        </div>
+        <div className="flex gap-4">
+          <button 
+            onClick={refreshNodes}
+            className="flex items-center space-x-2 px-6 py-3 bg-zinc-900 border border-zinc-800 hover:border-zinc-700 text-white rounded-2xl font-black text-[10px] uppercase tracking-widest transition-all"
+          >
+            <RefreshCw size={14} className={loading ? 'animate-spin' : ''} />
+            <span>Poll Virtual Mesh</span>
+          </button>
+          <button 
+            onClick={openProvisionModal}
+            className="flex items-center space-x-2 px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-black text-[10px] uppercase tracking-widest transition-all shadow-xl shadow-blue-900/40"
+          >
+            <Plus size={14} />
+            <span>Provision Virtual Account</span>
+          </button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8">
+        {accounts.map(va => (
+          <div key={va.id} className="bg-zinc-950 border border-zinc-900 rounded-[3rem] p-10 flex flex-col justify-between group hover:border-blue-500/30 transition-all relative overflow-hidden shadow-2xl">
+            <div className="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity">
+              <Layers size={120} />
+            </div>
+
+            <div className="relative z-10">
+              <div className="flex justify-between items-start mb-10">
+                <div className="w-16 h-16 bg-zinc-900 rounded-3xl flex items-center justify-center border border-zinc-800 text-blue-500 shadow-xl group-hover:scale-110 transition-transform duration-500">
+                  <Network size={32} />
+                </div>
+                <div className={`px-4 py-1.5 rounded-full border text-[10px] font-black uppercase tracking-widest ${
+                  va.status === 'ACTIVE' ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-500' : 'bg-amber-500/10 border-amber-500/20 text-amber-500'
+                }`}>
+                  {va.status}
+                </div>
+              </div>
+
+              <h3 className="text-xl font-black text-white italic tracking-tighter uppercase mb-2 truncate pr-10">{va.name}</h3>
+              <p className="text-zinc-500 text-xs leading-relaxed mb-8 h-12 overflow-hidden line-clamp-2">{va.description}</p>
+              
+              <div className="space-y-4 mb-10">
+                <div className="flex justify-between items-center text-[10px] font-black uppercase tracking-[0.2em] text-zinc-600">
+                  <span>Parent Registry</span>
+                  <span className="text-zinc-300 mono">{va.internal_account_id}</span>
+                </div>
+                <div className="flex justify-between items-center text-[10px] font-black uppercase tracking-[0.2em] text-zinc-600">
+                  <span>ID Segment</span>
+                  <span className="text-zinc-300 mono">{va.id}</span>
+                </div>
+                <div className="flex justify-between items-center text-[10px] font-black uppercase tracking-[0.2em] text-zinc-600">
+                  <span>Routing Layer</span>
+                  <span className="text-blue-500 mono">FDX_V6_MESH</span>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex gap-4 relative z-10">
+              <button 
+                onClick={() => {
+                  setSelectedVa(va);
+                  setIsConfigOpen(true);
+                }}
+                className="flex-1 py-4 bg-zinc-900 hover:bg-zinc-800 text-white rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all border border-zinc-800 flex items-center justify-center gap-2"
+              >
+                <Settings2 size={14} />
+                Config
+              </button>
+              <button 
+                onClick={() => deleteNode(va.id)}
+                className="p-4 bg-zinc-900 hover:bg-rose-500/10 text-zinc-600 hover:text-rose-500 rounded-2xl transition-all border border-zinc-800"
+              >
+                <Trash2 size={18} />
+              </button>
+            </div>
+          </div>
+        ))}
+        
+        <button 
+          onClick={openProvisionModal}
+          className="border-2 border-dashed border-zinc-900 rounded-[3rem] p-10 flex flex-col items-center justify-center group hover:border-zinc-700 transition-all gap-4 bg-black/20"
+        >
+          <div className="w-16 h-16 bg-zinc-950 rounded-full flex items-center justify-center text-zinc-800 group-hover:text-blue-500 transition-colors shadow-2xl">
+            <Plus size={32} />
+          </div>
+          <span className="text-[10px] font-black uppercase tracking-[0.4em] text-zinc-700 group-hover:text-zinc-400">Initialize Node</span>
+        </button>
+      </div>
+
+      <div className="bg-zinc-950 border border-zinc-900 rounded-[3rem] p-10 relative overflow-hidden group shadow-2xl">
+        <div className="flex flex-col md:flex-row justify-between items-center gap-10">
+          <div className="flex items-center gap-8">
+            <div className="w-20 h-20 bg-blue-600/10 rounded-3xl flex items-center justify-center text-blue-500 shadow-2xl shadow-blue-500/5">
+              <ShieldCheck size={40} />
+            </div>
+            <div>
+              <h4 className="text-xl font-black text-white italic tracking-tighter uppercase mb-2">Automated <span className="text-blue-500 not-italic">Reconciliation</span></h4>
+              <p className="text-zinc-500 text-xs max-w-lg leading-relaxed font-medium">Lumina Quantum Oracle automatically matches incoming virtual node signals to your internal accounting ledger with 99.9% precision.</p>
+            </div>
+          </div>
+          <button 
+            onClick={() => {
+              setIsReconcilerOpen(true);
+              handleRunReconciler();
+            }}
+            className="px-10 py-5 bg-white hover:bg-zinc-200 text-black rounded-2xl font-black text-xs uppercase tracking-[0.2em] transition-all flex items-center gap-4 shadow-xl"
+          >
+            <span>View Reconciler</span>
+            <ArrowUpRight size={18} />
+          </button>
+        </div>
+      </div>
+
+      {/* Provision Modal */}
+      {isProvisionOpen && (
+        <div className="fixed inset-0 z-[100] flex items-center justify-center p-6 backdrop-blur-sm bg-black/60">
+          <div className="bg-zinc-950 border border-zinc-900 w-full max-w-lg rounded-[3rem] p-10 shadow-2xl animate-in zoom-in-95">
+            <div className="flex justify-between items-start mb-10">
+              <div className="flex items-center gap-4">
+                <div className="w-14 h-14 bg-blue-600/10 text-blue-500 rounded-2xl flex items-center justify-center">
+                  <Network size={28} />
+                </div>
+                <div>
+                  <h3 className="text-2xl font-black text-white italic tracking-tighter uppercase">Provision <span className="text-blue-500 not-italic">Node</span></h3>
+                  <p className="text-[10px] text-zinc-500 font-black uppercase tracking-widest">Initialize Virtual Data Sink</p>
+                </div>
+              </div>
+              <button onClick={() => setIsProvisionOpen(false)} className="p-2 text-zinc-600 hover:text-white transition-colors"><X size={24} /></button>
+            </div>
+
+            <div className="space-y-6">
+              {provisionError && (
+                <div className="p-4 bg-rose-500/10 border border-rose-500/20 rounded-2xl flex items-center gap-3 animate-in fade-in slide-in-from-top-2">
+                  <AlertCircle size={16} className="text-rose-500 shrink-0" />
+                  <p className="text-[10px] font-bold text-rose-200 uppercase tracking-tight leading-relaxed">{provisionError}</p>
+                </div>
+              )}
+
+              <div className="space-y-2">
+                <label className="text-[10px] font-black text-zinc-600 uppercase tracking-widest ml-1">Node Name</label>
+                <input 
+                  value={newVa.name}
+                  onChange={e => {
+                    setProvisionError(null);
+                    setNewVa({...newVa, name: e.target.value});
+                  }}
+                  placeholder="e.g. Q4 Marketing Buffer"
+                  className="w-full bg-black border border-zinc-800 focus:border-blue-500/50 rounded-2xl py-4 px-5 text-white text-sm outline-none transition-all placeholder:text-zinc-800 font-bold"
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-[10px] font-black text-zinc-600 uppercase tracking-widest ml-1">Parent Account</label>
+                <select 
+                  value={newVa.parent}
+                  onChange={e => {
+                    setProvisionError(null);
+                    setNewVa({...newVa, parent: e.target.value});
+                  }}
+                  className="w-full bg-black border border-zinc-800 focus:border-blue-500/50 rounded-2xl py-4 px-5 text-white text-sm outline-none transition-all font-bold appearance-none"
+                >
+                  <option value="IA-4401">IA-4401 (J.P. Morgan)</option>
+                  <option value="IA-9902">IA-9902 (Deutsche Bank)</option>
+                  <option value="IA-1105">IA-1105 (Custody)</option>
+                </select>
+              </div>
+              <div className="space-y-2">
+                <label className="text-[10px] font-black text-zinc-600 uppercase tracking-widest ml-1">Contextual Description</label>
+                <textarea 
+                  value={newVa.description}
+                  onChange={e => {
+                    setProvisionError(null);
+                    setNewVa({...newVa, description: e.target.value});
+                  }}
+                  placeholder="Routing purpose and ledger mapping..."
+                  className="w-full bg-black border border-zinc-800 focus:border-blue-500/50 rounded-2xl py-4 px-5 text-white text-sm outline-none transition-all placeholder:text-zinc-800 font-bold h-24 resize-none"
+                />
+              </div>
+
+              <button 
+                onClick={handleProvision}
+                disabled={provisioning || !newVa.name.trim()}
+                className="w-full py-5 bg-blue-600 hover:bg-blue-500 text-white rounded-[2rem] font-black text-xs uppercase tracking-[0.3em] transition-all flex items-center justify-center gap-4 shadow-xl shadow-blue-900/40 disabled:opacity-50"
+              >
+                {provisioning ? <Loader2 className="animate-spin" size={20} /> : <ArrowUpRight size={20} />}
+                <span>{provisioning ? 'Initializing Handshake...' : 'Establish Virtual Node'}</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Config Modal */}
+      {isConfigOpen && selectedVa && (
+        <div className="fixed inset-0 z-[100] flex items-center justify-center p-6 backdrop-blur-sm bg-black/60">
+          <div className="bg-zinc-950 border border-zinc-900 w-full max-w-lg rounded-[3rem] p-10 shadow-2xl animate-in zoom-in-95">
+            <div className="flex justify-between items-start mb-10">
+              <div className="flex items-center gap-4">
+                <div className="w-14 h-14 bg-zinc-900 border border-zinc-800 rounded-2xl flex items-center justify-center text-blue-500">
+                  <Settings2 size={28} />
+                </div>
+                <div>
+                  <h3 className="text-2xl font-black text-white italic tracking-tighter uppercase">Node <span className="text-blue-500 not-italic">Config</span></h3>
+                  <p className="text-[10px] text-zinc-500 font-black uppercase tracking-widest">{selectedVa.id}</p>
+                </div>
+              </div>
+              <button onClick={() => setIsConfigOpen(false)} className="p-2 text-zinc-600 hover:text-white transition-colors"><X size={24} /></button>
+            </div>
+
+            <div className="space-y-8">
+              <div className="p-6 bg-black rounded-3xl border border-zinc-900 flex items-center justify-between">
+                <div>
+                  <p className="text-[10px] font-black text-zinc-600 uppercase tracking-widest mb-1">Signal Status</p>
+                  <p className="text-white font-bold text-lg italic uppercase">{selectedVa.status}</p>
+                </div>
+                <div className="w-3 h-3 bg-emerald-500 rounded-full animate-pulse shadow-[0_0_8px_#10b981]"></div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <button className="p-5 bg-zinc-900 hover:bg-zinc-800 text-white rounded-2xl border border-zinc-800 transition-all font-black text-[10px] uppercase tracking-widest">
+                  Rotate Keys
+                </button>
+                <button className="p-5 bg-zinc-900 hover:bg-zinc-800 text-white rounded-2xl border border-zinc-800 transition-all font-black text-[10px] uppercase tracking-widest">
+                  Flush Cache
+                </button>
+              </div>
+
+              <div className="p-6 bg-blue-600/5 border border-blue-500/20 rounded-3xl">
+                 <p className="text-[9px] font-black text-blue-500 uppercase tracking-widest mb-3 flex items-center gap-2">
+                   <Activity size={10} />
+                   Network Payload Metadata
+                 </p>
+                 <p className="text-[10px] text-zinc-500 font-mono leading-relaxed">
+                   Created: {new Date(selectedVa.created_at).toLocaleString()}<br />
+                   Routing: FDX_V6_NATIVE_BRIDGE<br />
+                   Latency: 12ms avg.
+                 </p>
+              </div>
+
+              <button 
+                onClick={() => setIsConfigOpen(false)}
+                className="w-full py-4 bg-zinc-100 hover:bg-white text-black rounded-2xl font-black text-xs uppercase tracking-widest transition-all"
+              >
+                Close Configuration
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Reconciler Modal */}
+      {isReconcilerOpen && (
+        <div className="fixed inset-0 z-[100] flex items-center justify-center p-6 backdrop-blur-sm bg-black/60">
+          <div className="bg-zinc-950 border border-zinc-900 w-full max-w-2xl rounded-[3rem] p-10 shadow-2xl animate-in slide-in-from-bottom-6">
+            <div className="flex justify-between items-start mb-10">
+              <div className="flex items-center gap-4">
+                <div className="w-14 h-14 bg-emerald-500/10 text-emerald-500 rounded-2xl flex items-center justify-center">
+                  <ShieldCheck size={28} />
+                </div>
+                <div>
+                  <h3 className="text-2xl font-black text-white italic tracking-tighter uppercase">Quantum <span className="text-emerald-500 not-italic">Reconciler</span></h3>
+                  <p className="text-[10px] text-zinc-500 font-black uppercase tracking-widest">Automated Signal Matching Engine</p>
+                </div>
+              </div>
+              <button onClick={() => setIsReconcilerOpen(false)} className="p-2 text-zinc-600 hover:text-white transition-colors"><X size={24} /></button>
+            </div>
+
+            <div className="space-y-8">
+              <div className="bg-black border border-zinc-900 rounded-[2.5rem] overflow-hidden shadow-2xl h-48 flex flex-col">
+                <div className="bg-zinc-900/80 px-6 py-3 border-b border-zinc-800 flex justify-between items-center">
+                  <div className="flex items-center gap-2">
+                    <Terminal size={12} className="text-blue-500" />
+                    <span className="text-[9px] font-black uppercase tracking-widest text-zinc-500">Live Matching Console</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Activity size={12} className="text-emerald-500 animate-pulse" />
+                    <span className="text-[8px] font-black uppercase text-zinc-600">Sync Active</span>
+                  </div>
+                </div>
+                <div className="flex-1 p-6 font-mono text-[10px] overflow-y-auto custom-scrollbar space-y-2">
+                  <div className="text-zinc-500">[14:22:01] Received signal VA-88021...</div>
+                  <div className="text-zinc-500">[14:22:02] Matching against Treasury Operating Account (IA-4401)...</div>
+                  <div className="text-emerald-500 font-bold">[14:22:03] MATCH FOUND: 100% confidence. Ledger updated.</div>
+                  <div className="text-zinc-500">[14:22:10] Scanning global fabric for adrift payloads...</div>
+                </div>
+              </div>
+
+              <div className="p-8 bg-zinc-900/50 border border-zinc-800 rounded-[2rem] relative group">
+                <div className="absolute top-0 right-0 p-6 opacity-5">
+                  <Cpu size={80} />
+                </div>
+                <div className="flex items-center gap-3 mb-4">
+                  <CheckCircle2 size={18} className="text-emerald-500" />
+                  <h4 className="text-[10px] font-black text-white uppercase tracking-widest">LQI Intelligence Report</h4>
+                </div>
+                
+                {reconciling ? (
+                  <div className="flex items-center gap-4 text-zinc-500">
+                    <Loader2 size={20} className="animate-spin text-blue-500" />
+                    <span className="text-[10px] font-black uppercase tracking-[0.4em] animate-pulse">Running Neural Pattern Analysis...</span>
+                  </div>
+                ) : (
+                  <p className="text-sm font-medium text-zinc-300 italic leading-relaxed">
+                    "{reconcileReport}"
+                  </p>
+                )}
+              </div>
+
+              <div className="flex gap-4">
+                <button 
+                  onClick={handleRunReconciler}
+                  disabled={reconciling}
+                  className="flex-1 py-4 bg-zinc-900 hover:bg-zinc-800 text-white rounded-2xl font-black text-[10px] uppercase tracking-widest border border-zinc-800 flex items-center justify-center gap-3"
+                >
+                  <RefreshCw size={14} className={reconciling ? 'animate-spin' : ''} />
+                  <span>{reconciling ? 'Re-analyzing...' : 'Refresh Audit'}</span>
+                </button>
+                <button 
+                  onClick={() => setIsReconcilerOpen(false)}
+                  className="flex-1 py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-black text-[10px] uppercase tracking-widest shadow-xl shadow-blue-900/20"
+                >
+                  Confirm Audits
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default VirtualAccounts;

views/routes.ts

@@ -0,0 +1,92 @@
+
+import React from 'react';
+import { 
+  LayoutDashboard, 
+  Building2, 
+  Users, 
+  Database, 
+  ShieldCheck, 
+  Cpu, 
+  Key, 
+  ArrowLeftRight, 
+  CreditCard, 
+  FileText, 
+  Leaf, 
+  MessageSquare,
+  Settings as SettingsIcon,
+  ListTree,
+  Network,
+  Zap,
+  ShieldAlert,
+  Bitcoin,
+  Hammer,
+  FileLock2,
+  BookOpen,
+  Map,
+  Activity,
+  Infinity,
+  Gift,
+  Radio
+} from 'lucide-react';
+
+import Overview from './Overview.tsx';
+import InternalAccounts from './InternalAccounts.tsx';
+import Counterparties from './Counterparties.tsx';
+import Connectivity from './Connectivity.tsx';
+import Documents from './Documents.tsx';
+import Simulation from './Simulation.tsx';
+import DCRManagement from './DCRManagement.tsx';
+import Payments from './Payments.tsx';
+import Cards from './Cards.tsx';
+import AnalyticsReport from './AnalyticsReport.tsx';
+import Sustainability from './Sustainability.tsx';
+import Advisor from './Advisor.tsx';
+import Settings from './Settings.tsx';
+import LineItems from './LineItems.tsx';
+import VirtualAccounts from './VirtualAccounts.tsx';
+import Flows from './Flows.tsx';
+import Validations from './Validations.tsx';
+import CryptoTerminal from './CryptoTerminal.tsx';
+import CryptView from './CryptView.tsx';
+import PrivacyPolicy from './PrivacyPolicy.tsx';
+import Documentation from './Documentation.tsx';
+import Airdrop from './Airdrop.tsx';
+import Broadcast from './Broadcast.tsx';
+
+export interface RouteConfig {
+  path: string;
+  component: React.ComponentType;
+  label: string;
+  icon: any;
+  showInSidebar: boolean;
+  category: 'core' | 'registry' | 'system' | 'intelligence' | 'finance' | 'admin';
+}
+
+export const routes: RouteConfig[] = [
+  { path: '/', component: Overview, label: 'Overview', icon: LayoutDashboard, showInSidebar: true, category: 'core' },
+  { path: '/broadcast', component: Broadcast, label: 'Global Node', icon: Radio, showInSidebar: true, category: 'core' },
+  { path: '/registry', component: InternalAccounts, label: 'Bank Registry', icon: Building2, showInSidebar: true, category: 'registry' },
+  { path: '/virtual-nodes', component: VirtualAccounts, label: 'Virtual Nodes', icon: Network, showInSidebar: true, category: 'registry' },
+  { path: '/crypto', component: CryptoTerminal, label: 'Asset Terminal', icon: Bitcoin, showInSidebar: true, category: 'finance' },
+  { path: '/crypt', component: CryptView, label: 'Foundry', icon: Hammer, showInSidebar: true, category: 'finance' },
+  { path: '/partners', component: Counterparties, label: 'Partner CRM', icon: Users, showInSidebar: true, category: 'registry' },
+  { path: '/connectivity', component: Connectivity, label: 'System Fabric', icon: Database, showInSidebar: true, category: 'system' },
+  { path: '/vault', component: Documents, label: 'Record Vault', icon: ShieldCheck, showInSidebar: true, category: 'system' },
+  { path: '/oracle', component: Simulation, label: 'Quantum Oracle', icon: Cpu, showInSidebar: true, category: 'intelligence' },
+  { path: '/flows', component: Flows, label: 'Onboarding Flows', icon: Zap, showInSidebar: true, category: 'intelligence' },
+  { path: '/dcr', component: DCRManagement, label: 'DCR Registry', icon: Key, showInSidebar: true, category: 'intelligence' },
+  { path: '/validator', component: Validations, label: 'Registry Validator', icon: ShieldAlert, showInSidebar: true, category: 'intelligence' },
+  { path: '/payments', component: Payments, label: 'Disbursements', icon: ArrowLeftRight, showInSidebar: true, category: 'finance' },
+  { path: '/line-items/:type/:id', component: LineItems, label: 'Line Ledger', icon: ListTree, showInSidebar: false, category: 'finance' },
+  { path: '/cards', component: Cards, label: 'Elite Cards', icon: CreditCard, showInSidebar: true, category: 'finance' },
+  { path: '/analytics', component: AnalyticsReport, label: 'Statements', icon: FileText, showInSidebar: true, category: 'finance' },
+  { path: '/sustainability', component: Sustainability, label: 'Carbon Audit', icon: Leaf, showInSidebar: true, category: 'finance' },
+  { path: '/advisor', component: Advisor, label: 'AI Terminal', icon: MessageSquare, showInSidebar: true, category: 'intelligence' },
+  { path: '/airdrop', component: Airdrop, label: 'jocall3 Airdrop', icon: Gift, showInSidebar: true, category: 'finance' },
+  
+  // New Epic Pages
+  { path: '/manifesto', component: PrivacyPolicy, label: 'Privacy Manifesto', icon: FileLock2, showInSidebar: true, category: 'admin' },
+  { path: '/documentation', component: Documentation, label: 'Documentation Core', icon: BookOpen, showInSidebar: true, category: 'admin' },
+  
+  { path: '/settings', component: Settings, label: 'System Config', icon: SettingsIcon, showInSidebar: false, category: 'admin' },
+];