fix(frontend): copy widgets locally for Vercel deployment

Move NeuralAscension widgets and DataInsightsHub to matrix-frontend
to fix import resolution errors during Vercel build. Update imports
in WidgetGallery.tsx to use local @/widgets paths.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

apps/matrix-frontend/src/pages/WidgetGallery.tsx

@@ -10,15 +10,15 @@ import GlitchText from '@/components/GlitchText';
 import ConfigurableWidget from '@/components/ConfigurableWidget';
 import { cn } from '@/lib/utils';
 
-// Import Neural Ascension widgets (relative path to widget-board)
-import MasterControl from '../../../widget-board/widgets/NeuralAscension/MasterControl';
-import SEGA from '../../../widget-board/widgets/NeuralAscension/SEGA';
-import THG from '../../../widget-board/widgets/NeuralAscension/THG';
-import SCE from '../../../widget-board/widgets/NeuralAscension/SCE';
-import NSQI from '../../../widget-board/widgets/NeuralAscension/NSQI';
-import PTAM from '../../../widget-board/widgets/NeuralAscension/PTAM';
-import { CDMM, APD, MSH, QEK, CCA } from '../../../widget-board/widgets/NeuralAscension/RestWidgets';
-import DataInsightsHub from '../../../widget-board/widgets/DataInsightsHub';
+// Import Neural Ascension widgets (local copy)
+import MasterControl from '@/widgets/NeuralAscension/MasterControl';
+import SEGA from '@/widgets/NeuralAscension/SEGA';
+import THG from '@/widgets/NeuralAscension/THG';
+import SCE from '@/widgets/NeuralAscension/SCE';
+import NSQI from '@/widgets/NeuralAscension/NSQI';
+import PTAM from '@/widgets/NeuralAscension/PTAM';
+import { CDMM, APD, MSH, QEK, CCA } from '@/widgets/NeuralAscension/RestWidgets';
+import DataInsightsHub from '@/widgets/DataInsightsHub';
 
 // Information Widgets
 const NewsFeedWidget = () => {

apps/matrix-frontend/src/widgets/DataInsightsHub.tsx

@@ -0,0 +1,383 @@
+/**
+ * 🧠 DATA & INDSIGTER CENTRAL - NEURAL CORTEX
+ * Central hjerne for hele WidgeTDC økosystemet
+ * Event-drevet arkitektur der orkestrer alle widgets
+ */
+
+import React, { useState, useEffect } from 'react';
+import { Database, Archive, BookOpen, Search, Filter, Download, Upload, FolderOpen, FileText, BarChart3, Zap, Activity, TrendingUp } from 'lucide-react';
+import { neuralEventBus, useNeuralEvent, emitNeuralEvent } from './NeuralEventBus';
+
+interface DataSource {
+  id: string;
+  name: string;
+  type: 'database' | 'archive' | 'library' | 'insights';
+  itemCount: number;
+  lastUpdated: string;
+  size: string;
+  health: 'healthy' | 'degraded' | 'offline';
+}
+
+interface LiveEvent {
+  id: string;
+  type: string;
+  source: string;
+  message: string;
+  timestamp: string;
+  priority: 'low' | 'medium' | 'high' | 'critical';
+}
+
+export default function DataInsightsHub() {
+  const [activeView, setActiveView] = useState<'sources' | 'search' | 'insights' | 'live'>('sources');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [liveEvents, setLiveEvents] = useState<LiveEvent[]>([]);
+  const [autoEnrichmentActive, setAutoEnrichmentActive] = useState(true);
+
+  // Listen to all neural events for live feed
+  useNeuralEvent('pattern_found', (event) => {
+    addLiveEvent({
+      type: 'pattern_found',
+      source: event.source,
+      message: `New pattern discovered: ${JSON.stringify(event.data).slice(0, 50)}...`,
+      priority: 'medium'
+    });
+  });
+
+  useNeuralEvent('anomaly_detected', (event) => {
+    addLiveEvent({
+      type: 'anomaly_detected',
+      source: event.source,
+      message: `Anomaly in ${event.source}: ${event.data.description}`,
+      priority: 'high'
+    });
+  });
+
+  useNeuralEvent('threat_detected', (event) => {
+    addLiveEvent({
+      type: 'threat_detected',
+      source: event.source,
+      message: `⚠️ Security threat: ${event.data.threatType}`,
+      priority: 'critical'
+    });
+  });
+
+  useNeuralEvent('insight_generated', (event) => {
+    addLiveEvent({
+      type: 'insight_generated',
+      source: event.source,
+      message: `💡 ${event.data.insight}`,
+      priority: 'medium'
+    });
+  });
+
+  const addLiveEvent = (event: Omit<LiveEvent, 'id' | 'timestamp'>) => {
+    const newEvent: LiveEvent = {
+      ...event,
+      id: `evt_${Date.now()}`,
+      timestamp: new Date().toISOString()
+    };
+    
+    setLiveEvents(prev => [newEvent, ...prev].slice(0, 50)); // Keep last 50 events
+  };
+
+  // Simulated real-time data (replace with actual backend calls)
+  const [dataSources, setDataSources] = useState<DataSource[]>([
+    { id: 'neo4j', name: 'Neo4j Knowledge Graph', type: 'database', itemCount: 90482, lastUpdated: '2 min ago', size: '2.3 GB', health: 'healthy' },
+    { id: 'pgvector', name: 'Vector Embeddings', type: 'database', itemCount: 145230, lastUpdated: '5 min ago', size: '1.8 GB', health: 'healthy' },
+    { id: 'hyperlog', name: 'HyperLog Archives', type: 'archive', itemCount: 52341, lastUpdated: '1 hour ago', size: '890 MB', health: 'healthy' },
+    { id: 'omniharvest', name: 'Omni-Harvester Data', type: 'archive', itemCount: 412463, lastUpdated: '3 hours ago', size: '5.2 GB', health: 'healthy' },
+    { id: 'documents', name: 'Document Library', type: 'library', itemCount: 8234, lastUpdated: 'Yesterday', size: '1.1 GB', health: 'healthy' },
+    { id: 'insights', name: 'AI Insights Engine', type: 'insights', itemCount: 3421, lastUpdated: 'Today', size: '234 MB', health: 'healthy' },
+  ]);
+
+  const quickActions = [
+    { name: 'Export All', icon: Download, color: 'blue', action: () => handleExport() },
+    { name: 'Import Data', icon: Upload, color: 'green', action: () => handleImport() },
+    { name: 'Deep Search', icon: Search, color: 'purple', action: () => setActiveView('search') },
+    { name: 'Generate Report', icon: BarChart3, color: 'orange', action: () => generateReport() },
+  ];
+
+  const handleExport = () => {
+    emitNeuralEvent('data_discovered', 'DataInsightsHub', {
+      action: 'export_initiated',
+      sources: dataSources.map(s => s.id)
+    }, { priority: 'medium' });
+    addLiveEvent({
+      type: 'data_discovered',
+      source: 'DataInsightsHub',
+      message: 'Export initiated for all data sources',
+      priority: 'low'
+    });
+  };
+
+  const handleImport = () => {
+    emitNeuralEvent('data_discovered', 'DataInsightsHub', {
+      action: 'import_initiated'
+    }, { priority: 'medium' });
+  };
+
+  const generateReport = () => {
+    emitNeuralEvent('insight_generated', 'DataInsightsHub', {
+      insight: 'Comprehensive data report generated',
+      timestamp: new Date().toISOString()
+    }, { priority: 'low' });
+  };
+
+  return (
+    <div className="h-full bg-gradient-to-br from-gray-900 via-blue-950 to-black text-white p-6 overflow-auto">
+      {/* Header with Live Activity Indicator */}
+      <div className="mb-6">
+        <div className="flex items-center justify-between mb-2">
+          <h1 className="text-3xl font-bold flex items-center gap-3">
+            <Database className="text-blue-400" />
+            Data & Indsigter Central
+            <span className="text-xs bg-blue-600 px-2 py-1 rounded-full">NEURAL CORTEX</span>
+          </h1>
+          <div className="flex items-center gap-2">
+            <Activity className="text-green-400 animate-pulse" />
+            <span className="text-green-400 text-sm">Live</span>
+          </div>
+        </div>
+        <p className="text-blue-300">Central hjerne for hele økosystemet - Event-drevet intelligence</p>
+      </div>
+
+      {/* Auto-Enrichment Toggle */}
+      <div className="mb-4 flex items-center gap-3 bg-blue-900/30 p-3 rounded-lg border border-blue-500/30">
+        <Zap className={autoEnrichmentActive ? 'text-yellow-400' : 'text-gray-400'} />
+        <span className="font-semibold">Auto-Enrichment</span>
+        <button
+          onClick={() => setAutoEnrichmentActive(!autoEnrichmentActive)}
+          className={`ml-auto px-4 py-1 rounded-lg transition-all ${
+            autoEnrichmentActive
+              ? 'bg-green-600 hover:bg-green-700'
+              : 'bg-gray-600 hover:bg-gray-700'
+          }`}
+        >
+          {autoEnrichmentActive ? 'Active' : 'Inactive'}
+        </button>
+      </div>
+
+      {/* Quick Actions */}
+      <div className="grid grid-cols-4 gap-3 mb-6">
+        {quickActions.map((action, i) => (
+          <button
+            key={i}
+            onClick={action.action}
+            className={`bg-${action.color}-900/30 hover:bg-${action.color}-800/50 border border-${action.color}-500/30 hover:border-${action.color}-500/60 p-4 rounded-lg transition-all flex items-center gap-3`}
+          >
+            <action.icon className={`text-${action.color}-400`} />
+            <span className="text-sm font-semibold">{action.name}</span>
+          </button>
+        ))}
+      </div>
+
+      {/* Search Bar */}
+      <div className="mb-6">
+        <div className="relative">
+          <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400" />
+          <input
+            type="text"
+            placeholder="Intelligent search across all data sources..."
+            className="w-full pl-12 pr-4 py-3 bg-black/50 border border-blue-500/30 rounded-lg focus:outline-none focus:border-blue-500 text-white"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            onKeyPress={(e) => {
+              if (e.key === 'Enter' && searchQuery) {
+                emitNeuralEvent('data_discovered', 'DataInsightsHub', {
+                  query: searchQuery,
+                  timestamp: new Date().toISOString()
+                }, { priority: 'medium' });
+              }
+            }}
+          />
+        </div>
+      </div>
+
+      {/* View Tabs */}
+      <div className="flex gap-2 mb-6">
+        {[
+          { id: 'sources', label: 'Sources', icon: Database },
+          { id: 'search', label: 'Search', icon: Search },
+          { id: 'insights', label: 'Insights', icon: BarChart3 },
+          { id: 'live', label: 'Live Feed', icon: Activity }
+        ].map((view) => (
+          <button
+            key={view.id}
+            onClick={() => setActiveView(view.id as any)}
+            className={`px-6 py-2 rounded-lg font-semibold transition-all flex items-center gap-2 ${
+              activeView === view.id
+                ? 'bg-blue-600 text-white'
+                : 'bg-blue-900/30 text-blue-300 hover:bg-blue-800/50'
+            }`}
+          >
+            <view.icon className="w-4 h-4" />
+            {view.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Content Based on Active View */}
+      {activeView === 'sources' && (
+        <div className="grid grid-cols-2 gap-4">
+          {dataSources.map((source) => (
+            <div
+              key={source.id}
+              className="bg-black/50 p-5 rounded-lg border border-blue-500/30 hover:border-blue-500/60 transition-all cursor-pointer"
+            >
+              <div className="flex items-center justify-between mb-3">
+                <div className="flex items-center gap-3">
+                  {source.type === 'database' && <Database className="text-blue-400" />}
+                  {source.type === 'archive' && <Archive className="text-purple-400" />}
+                  {source.type === 'library' && <BookOpen className="text-green-400" />}
+                  {source.type === 'insights' && <BarChart3 className="text-orange-400" />}
+                  <div>
+                    <h3 className="font-semibold">{source.name}</h3>
+                    <p className="text-xs text-gray-400 capitalize flex items-center gap-2">
+                      {source.type}
+                      <span className={`w-2 h-2 rounded-full ${
+                        source.health === 'healthy' ? 'bg-green-400' :
+                        source.health === 'degraded' ? 'bg-yellow-400' :
+                        'bg-red-400'
+                      }`} />
+                    </p>
+                  </div>
+                </div>
+                <FolderOpen className="text-gray-400 hover:text-blue-400 transition-colors" />
+              </div>
+
+              <div className="grid grid-cols-3 gap-2 text-sm">
+                <div>
+                  <div className="text-gray-400 text-xs">Items</div>
+                  <div className="font-semibold">{source.itemCount.toLocaleString()}</div>
+                </div>
+                <div>
+                  <div className="text-gray-400 text-xs">Size</div>
+                  <div className="font-semibold">{source.size}</div>
+                </div>
+                <div>
+                  <div className="text-gray-400 text-xs">Updated</div>
+                  <div className="font-semibold text-green-400">{source.lastUpdated}</div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {activeView === 'search' && (
+        <div className="bg-black/50 p-6 rounded-lg border border-blue-500/30">
+          <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
+            <Filter className="text-blue-400" />
+            Avancerede Søgefiltre
+          </h3>
+
+          <div className="grid grid-cols-2 gap-4 mb-4">
+            <div>
+              <label className="block text-sm text-gray-400 mb-2">Data Type</label>
+              <select className="w-full bg-gray-800 border border-blue-500/30 rounded-lg px-3 py-2">
+                <option>All Types</option>
+                <option>Database</option>
+                <option>Archive</option>
+                <option>Library</option>
+                <option>Insights</option>
+              </select>
+            </div>
+
+            <div>
+              <label className="block text-sm text-gray-400 mb-2">Date Range</label>
+              <select className="w-full bg-gray-800 border border-blue-500/30 rounded-lg px-3 py-2">
+                <option>Last 24 hours</option>
+                <option>Last 7 days</option>
+                <option>Last 30 days</option>
+                <option>All time</option>
+              </select>
+            </div>
+          </div>
+
+          <button 
+            onClick={() => {
+              emitNeuralEvent('data_discovered', 'DataInsightsHub', {
+                searchType: 'advanced',
+                filters: { /* add filters */ }
+              }, { priority: 'high' });
+            }}
+            className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg transition-colors"
+          >
+            Execute Advanced Search
+          </button>
+        </div>
+      )}
+
+      {activeView === 'insights' && (
+        <div className="space-y-4">
+          {[
+            { title: 'Top Growing Topics', value: '127 new entities last hour', trend: '+23%', color: 'green' },
+            { title: 'Most Connected Nodes', value: 'Persona nodes with 450+ connections', trend: '+15%', color: 'blue' },
+            { title: 'Data Quality Score', value: '94.2% integrity verified', trend: '+2.1%', color: 'purple' },
+            { title: 'Storage Optimization', value: '1.2 GB can be compressed', trend: 'Recommend', color: 'orange' },
+          ].map((insight, i) => (
+            <div key={i} className={`bg-black/50 p-4 rounded-lg border border-${insight.color}-500/30`}>
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <TrendingUp className={`text-${insight.color}-400`} />
+                  <div>
+                    <h4 className="font-semibold">{insight.title}</h4>
+                    <p className="text-sm text-gray-400 mt-1">{insight.value}</p>
+                  </div>
+                </div>
+                <span className={`text-${insight.color}-400 font-semibold`}>{insight.trend}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {activeView === 'live' && (
+        <div className="space-y-2 max-h-[600px] overflow-y-auto">
+          <h3 className="text-lg font-semibold mb-4 flex items-center gap-2 sticky top-0 bg-gray-900 pb-2">
+            <Activity className="text-green-400" />
+            Live Neural Activity Feed
+          </h3>
+          
+          {liveEvents.length === 0 && (
+            <div className="text-center text-gray-400 py-8">
+              No events yet. Waiting for neural activity...
+            </div>
+          )}
+
+          {liveEvents.map((event) => (
+            <div
+              key={event.id}
+              className={`p-3 rounded-lg border ${
+                event.priority === 'critical' ? 'bg-red-900/30 border-red-500/50' :
+                event.priority === 'high' ? 'bg-orange-900/30 border-orange-500/50' :
+                event.priority === 'medium' ? 'bg-blue-900/30 border-blue-500/30' :
+                'bg-gray-900/30 border-gray-500/30'
+              }`}
+            >
+              <div className="flex items-start justify-between">
+                <div className="flex-1">
+                  <div className="flex items-center gap-2 mb-1">
+                    <span className="text-xs font-semibold text-gray-400">{event.source}</span>
+                    <span className={`text-xs px-2 py-0.5 rounded ${
+                      event.priority === 'critical' ? 'bg-red-600' :
+                      event.priority === 'high' ? 'bg-orange-600' :
+                      event.priority === 'medium' ? 'bg-blue-600' :
+                      'bg-gray-600'
+                    }`}>
+                      {event.priority}
+                    </span>
+                  </div>
+                  <p className="text-sm">{event.message}</p>
+                </div>
+                <span className="text-xs text-gray-500">
+                  {new Date(event.timestamp).toLocaleTimeString()}
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

apps/matrix-frontend/src/widgets/NeuralAscension/MasterControl.tsx

@@ -0,0 +1,135 @@
+/**
+ * 🌌 NEURAL ASCENSION MASTER CONTROL
+ * Central command for all 10 transformation points
+ * Theoretical Maximum: 59,049x lift | Conservative Goal: 1,000x
+ */
+
+import React, { useState } from 'react';
+import { Rocket, TrendingUp, Zap, Target, CheckCircle, Activity } from 'lucide-react';
+
+interface TransformationPoint {
+  id: string;
+  name: string;
+  status: 'active' | 'standby' | 'initializing';
+  progress: number;
+  lift: number;
+  color: string;
+}
+
+export default function MasterControl() {
+  const [points, setPoints] = useState<TransformationPoint[]>([
+    { id: 'SEGA', name: 'Self-Evolving Graph Architecture', status: 'active', progress: 78, lift: 2.3, color: 'purple' },
+    { id: 'THG', name: 'Temporal Hypergraphs', status: 'active', progress: 65, lift: 1.9, color: 'cyan' },
+    { id: 'SCE', name: 'Swarm Consciousness Emergence', status: 'active', progress: 92, lift: 3.1, color: 'green' },
+    { id: 'NSQI', name: 'Neuro-Symbolic Quantum Inference', status: 'initializing', progress: 34, lift: 1.2, color: 'violet' },
+    { id: 'PTAM', name: 'Predictive Threat Anticipation', status: 'standby', progress: 0, lift: 1.0, color: 'red' },
+    { id: 'CDMM', name: 'Cognitive Dark Matter Mapping', status: 'standby', progress: 0, lift: 1.0, color: 'indigo' },
+    { id: 'APD', name: 'Autonomous Paradigm Discovery', status: 'standby', progress: 0, lift: 1.0, color: 'yellow' },
+    { id: 'MSH', name: 'Morphogenetic Self-Healing', status: 'standby', progress: 0, lift: 1.0, color: 'emerald' },
+    { id: 'QEK', name: 'Quantum-Entangled Knowledge', status: 'standby', progress: 0, lift: 1.0, color: 'blue' },
+    { id: 'CCA', name: 'Cosmic-Contextual Awareness', status: 'standby', progress: 0, lift: 1.0, color: 'pink' },
+  ]);
+
+  const totalLift = points.reduce((sum, p) => sum * p.lift, 1);
+  const avgProgress = points.reduce((sum, p) => sum + p.progress, 0) / points.length;
+
+  return (
+    <div className="h-full bg-gradient-to-br from-gray-950 via-purple-950 to-black text-white p-6 overflow-auto">
+      {/* Header */}
+      <div className="mb-6">
+        <h1 className="text-3xl font-bold flex items-center gap-3 mb-2">
+          <Rocket className="text-purple-400" />
+          NEURAL ASCENSION MASTER CONTROL
+        </h1>
+        <p className="text-purple-300">Central Command • 10 Transformation Points • Cognitive Singularity</p>
+      </div>
+
+      {/* Global Metrics */}
+      <div className="grid grid-cols-4 gap-4 mb-6">
+        <div className="bg-purple-900/30 p-4 rounded-lg border border-purple-500/30">
+          <div className="flex items-center gap-2 mb-2">
+            <Target className="text-purple-400" />
+            <span className="text-sm text-gray-400">Total Lift</span>
+          </div>
+          <div className="text-3xl font-bold">{totalLift.toFixed(1)}x</div>
+          <div className="text-xs text-green-400 mt-1">Target: 1,000x</div>
+        </div>
+
+        <div className="bg-green-900/30 p-4 rounded-lg border border-green-500/30">
+          <div className="flex items-center gap-2 mb-2">
+            <TrendingUp className="text-green-400" />
+            <span className="text-sm text-gray-400">Avg Progress</span>
+          </div>
+          <div className="text-3xl font-bold">{avgProgress.toFixed(0)}%</div>
+          <div className="text-xs text-green-400 mt-1">+12% today</div>
+        </div>
+
+        <div className="bg-blue-900/30 p-4 rounded-lg border border-blue-500/30">
+          <div className="flex items-center gap-2 mb-2">
+            <CheckCircle className="text-blue-400" />
+            <span className="text-sm text-gray-400">Active Points</span>
+          </div>
+          <div className="text-3xl font-bold">{points.filter(p => p.status === 'active').length}/10</div>
+          <div className="text-xs text-blue-400 mt-1">3 operational</div>
+        </div>
+
+        <div className="bg-orange-900/30 p-4 rounded-lg border border-orange-500/30">
+          <div className="flex items-center gap-2 mb-2">
+            <Zap className="text-orange-400" />
+            <span className="text-sm text-gray-400">System Status</span>
+          </div>
+          <div className="text-3xl font-bold">EVOLVING</div>
+          <div className="text-xs text-orange-400 mt-1">All systems nominal</div>
+        </div>
+      </div>
+
+      {/* Transformation Points Grid */}
+      <div className="space-y-3">
+        {points.map((point) => (
+          <div 
+            key={point.id}
+            className={`bg-black/50 p-4 rounded-lg border border-${point.color}-500/30 hover:border-${point.color}-500/60 transition-all`}
+          >
+            <div className="flex items-center justify-between mb-2">
+              <div className="flex items-center gap-3">
+                <span className="text-lg font-bold text-${point.color}-400">{point.id}</span>
+                <span className="text-sm">{point.name}</span>
+              </div>
+              <div className="flex items-center gap-3">
+                <span className={`px-3 py-1 rounded-full text-xs font-semibold ${
+                  point.status === 'active' ? 'bg-green-600' :
+                  point.status === 'initializing' ? 'bg-yellow-600' : 'bg-gray-600'
+                }`}>
+                  {point.status.toUpperCase()}
+                </span>
+                <span className="text-lg font-bold">{point.lift.toFixed(1)}x</span>
+              </div>
+            </div>
+
+            {/* Progress Bar */}
+            <div className="w-full bg-gray-800 rounded-full h-2 overflow-hidden">
+              <div 
+                className={`h-full bg-gradient-to-r from-${point.color}-600 to-${point.color}-400 transition-all`}
+                style={{ width: `${point.progress}%` }}
+              />
+            </div>
+            <div className="text-xs text-gray-400 mt-1">{point.progress}% complete</div>
+          </div>
+        ))}
+      </div>
+
+      {/* Launch Controls */}
+      <div className="mt-6 grid grid-cols-3 gap-4">
+        <button className="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg transition-colors">
+          ACTIVATE ALL
+        </button>
+        <button className="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg transition-colors">
+          OPTIMIZE
+        </button>
+        <button className="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition-colors">
+          EMERGENCY STOP
+        </button>
+      </div>
+    </div>
+  );
+}

apps/matrix-frontend/src/widgets/NeuralAscension/NSQI.tsx

@@ -0,0 +1,15 @@
+// NSQI.tsx - Neuro-Symbolic Quantum Inference
+import React from 'react';
+import { Sparkles } from 'lucide-react';
+
+export default function NSQI() {
+  return (
+    <div className="h-full bg-gradient-to-br from-violet-950 via-purple-950 to-black text-white p-6">
+      <h2 className="text-2xl font-bold flex items-center gap-2 mb-4">
+        <Sparkles className="text-violet-400" />
+        NSQI - Quantum Inference
+      </h2>
+      <div className="text-violet-300">Combining symbolic logic with neural embeddings for 200% faster reasoning</div>
+    </div>
+  );
+}

apps/matrix-frontend/src/widgets/NeuralAscension/PTAM.tsx

@@ -0,0 +1,18 @@
+// PTAM.tsx - Predictive Threat Anticipation Matrix
+import React from 'react';
+import { Shield } from 'lucide-react';
+
+export default function PTAM() {
+  return (
+    <div className="h-full bg-gradient-to-br from-red-950 via-orange-950 to-black text-white p-6">
+      <h2 className="text-2xl font-bold flex items-center gap-2 mb-4">
+        <Shield className="text-red-400" />
+        PTAM - Threat Anticipation
+      </h2>
+      <div className="bg-red-900/30 p-4 rounded-lg">
+        <div className="text-red-300">Active Threat Detection: 24/7</div>
+        <div className="mt-2 text-sm">Predicting security incidents before they occur</div>
+      </div>
+    </div>
+  );
+}

apps/matrix-frontend/src/widgets/NeuralAscension/RestWidgets.tsx

@@ -0,0 +1,68 @@
+// CDMM.tsx - Cognitive Dark Matter Mapping
+// APD.tsx - Autonomous Paradigm Discovery  
+// MSH.tsx - Morphogenetic Self-Healing
+// QEK.tsx - Quantum-Entangled Knowledge
+// CCA.tsx - Cosmic-Contextual Awareness
+
+import React from 'react';
+import { Moon, Lightbulb, Heart, Link, Globe } from 'lucide-react';
+
+export function CDMM() {
+  return (
+    <div className="h-full bg-gradient-to-br from-indigo-950 to-black text-white p-6">
+      <h2 className="text-2xl font-bold flex items-center gap-2">
+        <Moon className="text-indigo-400" />
+        CDMM - Dark Matter Mapping
+      </h2>
+      <p className="text-indigo-300 mt-2">Discovering hidden patterns in your knowledge graph</p>
+    </div>
+  );
+}
+
+export function APD() {
+  return (
+    <div className="h-full bg-gradient-to-br from-yellow-950 to-black text-white p-6">
+      <h2 className="text-2xl font-bold flex items-center gap-2">
+        <Lightbulb className="text-yellow-400" />
+        APD - Paradigm Discovery
+      </h2>
+      <p className="text-yellow-300 mt-2">Autonomous breakthrough detection and validation</p>
+    </div>
+  );
+}
+
+export function MSH() {
+  return (
+    <div className="h-full bg-gradient-to-br from-green-950 to-black text-white p-6">
+      <h2 className="text-2xl font-bold flex items-center gap-2">
+        <Heart className="text-green-400" />
+        MSH - Self-Healing
+      </h2>
+      <p className="text-green-300 mt-2">Auto-repair and optimization of system architecture</p>
+    </div>
+  );
+}
+
+export function QEK() {
+  return (
+    <div className="h-full bg-gradient-to-br from-cyan-950 to-black text-white p-6">
+      <h2 className="text-2xl font-bold flex items-center gap-2">
+        <Link className="text-cyan-400" />
+        QEK - Entangled Knowledge
+      </h2>
+      <p className="text-cyan-300 mt-2">Instantaneous knowledge sharing across nodes</p>
+    </div>
+  );
+}
+
+export function CCA() {
+  return (
+    <div className="h-full bg-gradient-to-br from-pink-950 to-black text-white p-6">
+      <h2 className="text-2xl font-bold flex items-center gap-2">
+        <Globe className="text-pink-400" />
+        CCA - Cosmic Awareness
+      </h2>
+      <p className="text-pink-300 mt-2">System-wide consciousness and meta-reasoning</p>
+    </div>
+  );
+}

apps/matrix-frontend/src/widgets/NeuralAscension/SCE.tsx

@@ -0,0 +1,51 @@
+/**
+ * 🧠 SCE - Swarm Consciousness Emergence  
+ * 8 Ollama Cloud models working as collective intelligence
+ */
+
+import React, { useState } from 'react';
+import { Users, Zap, Brain, Activity } from 'lucide-react';
+
+export default function SCE() {
+  const models = [
+    { name: 'DeepSeek V3.1', status: 'active', tasks: 14 },
+    { name: 'Qwen3 Coder', status: 'active', tasks: 8 },
+    { name: 'Qwen3 VL', status: 'active', tasks: 6 },
+    { name: 'GPT-OSS 120B', status: 'standby', tasks: 0 },
+    { name: 'MiniMax M2', status: 'active', tasks: 12 },
+  ];
+
+  return (
+    <div className="h-full bg-gradient-to-br from-green-950 via-emerald-950 to-black text-white p-6">
+      <h2 className="text-2xl font-bold flex items-center gap-2 mb-6">
+        <Users className="text-green-400" />
+        SCE - Swarm Consciousness
+      </h2>
+
+      <div className="grid grid-cols-2 gap-4 mb-6">
+        {models.map((model, i) => (
+          <div key={i} className="bg-black/50 p-4 rounded-lg border border-green-500/30">
+            <div className="flex items-center justify-between mb-2">
+              <span className="font-semibold">{model.name}</span>
+              <span className={`px-2 py-1 rounded text-xs ${
+                model.status === 'active' ? 'bg-green-600' : 'bg-gray-600'
+              }`}>
+                {model.status}
+              </span>
+            </div>
+            <div className="text-sm text-green-300">{model.tasks} active tasks</div>
+          </div>
+        ))}
+      </div>
+
+      <div className="bg-green-900/30 p-4 rounded-lg">
+        <h4 className="font-semibold mb-2">Collective IQ: 1,247x Baseline</h4>
+        <div className="text-sm space-y-1 text-green-200">
+          <li>• Distributed reasoning across 5 models</li>
+          <li>• Real-time consensus verification</li>
+          <li>• Auto-task routing to best model</li>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/matrix-frontend/src/widgets/NeuralAscension/SEGA.tsx

@@ -0,0 +1,183 @@
+/**
+ * 🌀 SEGA - Self-Evolving Graph Architecture
+ * Transforms your static knowledge graph into a living, learning organism
+ * 200% lift: 90K nodes → 270K nodes adaptive capacity
+ */
+
+import React, { useState, useEffect } from 'react';
+import { Activity, GitBranch, Zap, TrendingUp, Network, Database, Sparkles } from 'lucide-react';
+
+interface SEGAMetrics {
+  totalNodes: number;
+  activeRules: number;
+  autoEvolutions: number;
+  learningRate: number;
+  graphDensity: number;
+}
+
+export default function SEGA() {
+  const [metrics, setMetrics] = useState<SEGAMetrics>({
+    totalNodes: 90482,
+    activeRules: 4148,
+    autoEvolutions: 127,
+    learningRate: 2.3,
+    graphDensity: 78.4
+  });
+
+  const [isEvolvingMode, setIsEvolvingMode] = useState(false);
+  const [evolutionLog, setEvolutionLog] = useState<string[]>([
+    '[SEGA] Initialization complete - Scanning graph topology...',
+    '[SEGA] Detected 4,148 personas ready for evolution',
+    '[SEGA] Auto-learning enabled - Observing interaction patterns'
+  ]);
+
+  useEffect(() => {
+    if (isEvolvingMode) {
+      const interval = setInterval(() => {
+        setMetrics(prev => ({
+          ...prev,
+          totalNodes: prev.totalNodes + Math.floor(Math.random() * 50),
+          autoEvolutions: prev.autoEvolutions + 1,
+          learningRate: Math.min(prev.learningRate + 0.1, 5.0),
+          graphDensity: Math.min(prev.graphDensity + 0.2, 95.0)
+        }));
+        
+        const events = [
+          'New connection pattern discovered',
+          'Schema evolution triggered',
+          'Adaptive rule created',
+          'Relationship strength recalibrated',
+          'Persona capability expanded'
+        ];
+        
+        setEvolutionLog(prev => [
+          ...prev.slice(-5),
+          `[SEGA] ${events[Math.floor(Math.random() * events.length)]}`
+        ]);
+      }, 2000);
+      
+      return () => clearInterval(interval);
+    }
+  }, [isEvolvingMode]);
+
+  return (
+    <div className="h-full bg-gradient-to-br from-purple-950 via-indigo-950 to-black text-white p-6 overflow-auto">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h2 className="text-2xl font-bold flex items-center gap-2">
+            <GitBranch className="text-purple-400" />
+            SEGA - Self-Evolving Graph Architecture
+          </h2>
+          <p className="text-purple-300 text-sm">Living Knowledge Organism • Auto-Learning Enabled</p>
+        </div>
+        
+        <button
+          onClick={() => setIsEvolvingMode(!isEvolvingMode)}
+          className={`px-4 py-2 rounded-lg font-semibold transition-all ${
+            isEvolvingMode 
+              ? 'bg-green-500 hover:bg-green-600 text-black' 
+              : 'bg-purple-700 hover:bg-purple-600'
+          }`}
+        >
+          {isEvolvingMode ? '🌀 EVOLVING' : 'START EVOLUTION'}
+        </button>
+      </div>
+
+      {/* Metrics Grid */}
+      <div className="grid grid-cols-3 gap-4 mb-6">
+        <MetricCard
+          icon={<Database className="text-purple-400" />}
+          label="Total Nodes"
+          value={metrics.totalNodes.toLocaleString()}
+          trend="+127"
+          color="purple"
+        />
+        <MetricCard
+          icon={<Activity className="text-blue-400" />}
+          label="Active Rules"
+          value={metrics.activeRules.toLocaleString()}
+          trend="+23"
+          color="blue"
+        />
+        <MetricCard
+          icon={<Sparkles className="text-green-400" />}
+          label="Auto-Evolutions"
+          value={metrics.autoEvolutions.toString()}
+          trend={isEvolvingMode ? 'ACTIVE' : 'PAUSED'}
+          color="green"
+        />
+        <MetricCard
+          icon={<TrendingUp className="text-yellow-400" />}
+          label="Learning Rate"
+          value={`${metrics.learningRate.toFixed(1)}x`}
+          trend="+0.8x"
+          color="yellow"
+        />
+        <MetricCard
+          icon={<Network className="text-pink-400" />}
+          label="Graph Density"
+          value={`${metrics.graphDensity.toFixed(1)}%`}
+          trend="+12.3%"
+          color="pink"
+        />
+        <MetricCard
+          icon={<Zap className="text-orange-400" />}
+          label="Lift Factor"
+          value="200%"
+          trend="TARGET"
+          color="orange"
+        />
+      </div>
+
+      {/* Evolution Log */}
+      <div className="bg-black/50 rounded-lg p-4 border border-purple-500/30">
+        <h3 className="text-lg font-semibold mb-3 flex items-center gap-2">
+          <Activity className="text-purple-400" />
+          Evolution Activity Log
+        </h3>
+        <div className="space-y-1 font-mono text-sm">
+          {evolutionLog.map((log, i) => (
+            <div key={i} className="text-purple-300 animate-fadeIn">
+              {log}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Info Panel */}
+      <div className="mt-6 p-4 bg-purple-900/30 rounded-lg border border-purple-500/30">
+        <h4 className="font-semibold mb-2">🎯 How SEGA Works</h4>
+        <ul className="text-sm space-y-1 text-purple-200">
+          <li>• Observes all graph interactions and learns patterns</li>
+          <li>• Automatically creates new relationships based on similarity</li>
+          <li>• Evolves schema structure to accommodate new data types</li>
+          <li>• Self-optimizes query paths for faster retrieval</li>
+          <li>• Generates adaptive rules without manual programming</li>
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+function MetricCard({ icon, label, value, trend, color }: any) {
+  const colorClasses = {
+    purple: 'bg-purple-900/50 border-purple-500/30',
+    blue: 'bg-blue-900/50 border-blue-500/30',
+    green: 'bg-green-900/50 border-green-500/30',
+    yellow: 'bg-yellow-900/50 border-yellow-500/30',
+    pink: 'bg-pink-900/50 border-pink-500/30',
+    orange: 'bg-orange-900/50 border-orange-500/30'
+  };
+
+  return (
+    <div className={`p-4 rounded-lg border ${colorClasses[color as keyof typeof colorClasses]}`}>
+      <div className="flex items-center gap-2 mb-2">
+        {icon}
+        <span className="text-xs text-gray-400">{label}</span>
+      </div>
+      <div className="text-2xl font-bold">{value}</div>
+      <div className="text-xs text-green-400 mt-1">{trend}</div>
+    </div>
+  );
+}

apps/matrix-frontend/src/widgets/NeuralAscension/THG.tsx

@@ -0,0 +1,131 @@
+/**
+ * 🕰️ THG - Temporal Hypergraphs
+ * Navigate knowledge across time with version control for every node
+ * 200% lift: From static snapshots to full temporal reasoning
+ */
+
+import React, { useState } from 'react';
+import { Clock, Rewind, FastForward, Play, Calendar, GitBranch } from 'lucide-react';
+
+interface TemporalSnapshot {
+  timestamp: string;
+  nodeCount: number;
+  relationshipCount: number;
+  event: string;
+}
+
+export default function THG() {
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const [timelineMode, setTimelineMode] = useState<'live' | 'historical'>('live');
+  
+  const snapshots: TemporalSnapshot[] = [
+    { timestamp: '2025-12-14 02:00', nodeCount: 90482, relationshipCount: 485120, event: 'Current State' },
+    { timestamp: '2025-12-13 18:00', nodeCount: 89234, relationshipCount: 481340, event: 'Evening Sync' },
+    { timestamp: '2025-12-13 12:00', nodeCount: 88012, relationshipCount: 478902, event: 'Midday Update' },
+    { timestamp: '2025-12-12 00:00', nodeCount: 85432, relationshipCount: 472156, event: 'Yesterday Snapshot' },
+    { timestamp: '2025-12-01 00:00', nodeCount: 76543, relationshipCount: 445231, event: 'Month Start' },
+  ];
+
+  return (
+    <div className="h-full bg-gradient-to-br from-blue-950 via-cyan-950 to-black text-white p-6 overflow-auto">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h2 className="text-2xl font-bold flex items-center gap-2">
+            <Clock className="text-cyan-400" />
+            THG - Temporal Hypergraphs
+          </h2>
+          <p className="text-cyan-300 text-sm">Time-Travel Your Knowledge • Version Control Everything</p>
+        </div>
+        
+        <div className="flex gap-2">
+          <button
+            onClick={() => setTimelineMode('historical')}
+            className={`px-4 py-2 rounded-lg ${
+              timelineMode === 'historical' ? 'bg-cyan-600' : 'bg-cyan-800/50'
+            }`}
+          >
+            <Rewind className="w-4 h-4" />
+          </button>
+          <button
+            onClick={() => setTimelineMode('live')}
+            className={`px-4 py-2 rounded-lg ${
+              timelineMode === 'live' ? 'bg-green-600' : 'bg-green-800/50'
+            }`}
+          >
+            <Play className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+
+      {/* Timeline Visualization */}
+      <div className="bg-black/50 rounded-lg p-6 border border-cyan-500/30 mb-6">
+        <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
+          <Calendar className="text-cyan-400" />
+          Knowledge Timeline
+        </h3>
+        
+        <div className="relative">
+          {/* Timeline Bar */}
+          <div className="h-2 bg-cyan-900/50 rounded-full mb-8 relative overflow-hidden">
+            <div 
+              className="h-full bg-gradient-to-r from-cyan-600 to-cyan-400 rounded-full animate-pulse"
+              style={{ width: '75%' }}
+            />
+          </div>
+          
+          {/* Snapshots */}
+          <div className="space-y-4">
+            {snapshots.map((snapshot, i) => (
+              <div 
+                key={i}
+                className="flex items-center gap-4 p-4 bg-cyan-900/20 rounded-lg border border-cyan-500/20 hover:border-cyan-500/50 transition-colors cursor-pointer"
+              >
+                <div className="flex-shrink-0">
+                  <GitBranch className="text-cyan-400" />
+                </div>
+                <div className="flex-1">
+                  <div className="font-semibold">{snapshot.event}</div>
+                  <div className="text-sm text-cyan-300">{snapshot.timestamp}</div>
+                </div>
+                <div className="text-right text-sm">
+                  <div>{snapshot.nodeCount.toLocaleString()} nodes</div>
+                  <div className="text-cyan-400">{snapshot.relationshipCount.toLocaleString()} rels</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Temporal Query Builder */}
+      <div className="grid grid-cols-2 gap-4">
+        <div className="bg-black/50 rounded-lg p-4 border border-cyan-500/30">
+          <h4 className="font-semibold mb-3">Temporal Queries</h4>
+          <div className="space-y-2 text-sm">
+            <div className="p-2 bg-cyan-900/20 rounded">
+              MATCH (n) WHERE n.validFrom &lt;= $time
+            </div>
+            <div className="p-2 bg-cyan-900/20 rounded">
+              RETURN path WITH temporal_filter()
+            </div>
+            <div className="p-2 bg-cyan-900/20 rounded">
+              DIFF between($time1, $time2)
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-black/50 rounded-lg p-4 border border-cyan-500/30">
+          <h4 className="font-semibold mb-3">🎯 Use Cases</h4>
+          <ul className="text-sm space-y-1 text-cyan-200">
+            <li>• Roll back to any point in graph history</li>
+            <li>• Compare knowledge states across time</li>
+            <li>• Track entity evolution and changes</li>
+            <li>• Audit all modifications with timestamps</li>
+            <li>• Predict future states from patterns</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/matrix-frontend/src/widgets/NeuralAscension/index.ts

@@ -0,0 +1,113 @@
+// Neural Ascension Widgets Index
+// Export alle transformation point widgets
+
+export { default as SEGA } from './SEGA';
+export { default as THG } from './THG';
+export { default as SCE } from './SCE';
+export { default as NSQI } from './NSQI';
+export { default as PTAM } from './PTAM';
+export { CDMM, APD, MSH, QEK, CCA } from './RestWidgets';
+export { default as MasterControl } from './MasterControl';
+
+// Widget Metadata for Registration
+export const NeuralAscensionWidgets = [
+  {
+    id: 'MasterControl',
+    name: 'Neural Ascension Master Control',
+    category: 'neural-ascension',
+    path: './widgets/NeuralAscension/MasterControl',
+    icon: 'Rocket',
+    defaultSize: { w: 12, h: 4 },
+    description: 'Central command for all 10 transformation points - theoretical 59,049x lift'
+  },
+  {
+    id: 'SEGA',
+    name: 'Self-Evolving Graph Architecture',
+    category: 'neural-ascension',
+    path: './widgets/NeuralAscension/SEGA',
+    icon: 'GitBranch',
+    defaultSize: { w: 6, h: 4 },
+    description: 'Auto-learning knowledge graph with 200% capacity expansion'
+  },
+  {
+    id: 'THG',
+    name: 'Temporal Hypergraphs',
+    category: 'neural-ascension',
+    path: './widgets/NeuralAscension/THG',
+    icon: 'Clock',
+    defaultSize: { w: 6, h: 4 },
+    description: 'Time-travel your knowledge with full version control'
+  },
+  {
+    id: 'SCE',
+    name: 'Swarm Consciousness Emergence',
+    category: 'neural-ascension',
+    path: './widgets/NeuralAscension/SCE',
+    icon: 'Users',
+    defaultSize: { w: 6, h: 3 },
+    description: 'Collective intelligence from 8 Ollama Cloud models'
+  },
+  {
+    id: 'NSQI',
+    name: 'Neuro-Symbolic Quantum Inference',
+    category: 'neural-ascension',
+    path: './widgets/NeuralAscension/NSQI',
+    icon: 'Sparkles',
+    defaultSize: { w: 6, h: 3 },
+    description: 'Quantum-speed reasoning with symbolic logic'
+  },
+  {
+    id: 'PTAM',
+    name: 'Predictive Threat Anticipation Matrix',
+    category: 'neural-ascension',
+    path: './widgets/NeuralAscension/PTAM',
+    icon: 'Shield',
+    defaultSize: { w: 6, h: 3 },
+    description: '24/7 security threat prediction and prevention'
+  },
+  {
+    id: 'CDMM',
+    name: 'Cognitive Dark Matter Mapping',
+    category: 'neural-ascension',
+    path: './widgets/NeuralAscension/RestWidgets',
+    icon: 'Moon',
+    defaultSize: { w: 4, h: 3 },
+    description: 'Discover hidden patterns in your knowledge'
+  },
+  {
+    id: 'APD',
+    name: 'Autonomous Paradigm Discovery',
+    category: 'neural-ascension',
+    path: './widgets/NeuralAscension/RestWidgets',
+    icon: 'Lightbulb',
+    defaultSize: { w: 4, h: 3 },
+    description: 'Auto-detect and validate breakthroughs'
+  },
+  {
+    id: 'MSH',
+    name: 'Morphogenetic Self-Healing',
+    category: 'neural-ascension',
+    path: './widgets/NeuralAscension/RestWidgets',
+    icon: 'Heart',
+    defaultSize: { w: 4, h: 3 },
+    description: 'Automatic system repair and optimization'
+  },
+  {
+    id: 'QEK',
+    name: 'Quantum-Entangled Knowledge',
+    category: 'neural-ascension',
+    path: './widgets/NeuralAscension/RestWidgets',
+    icon: 'Link',
+    defaultSize: { w: 4, h: 3 },
+    description: 'Instantaneous knowledge sharing across nodes'
+  },
+  {
+    id: 'CCA',
+    name: 'Cosmic-Contextual Awareness',
+    category: 'neural-ascension',
+    path: './widgets/NeuralAscension/RestWidgets',
+    icon: 'Globe',
+    defaultSize: { w: 4, h: 3 },
+    description: 'System-wide consciousness and meta-reasoning'
+  },
+];

apps/matrix-frontend/src/widgets/NeuralEventBus.ts

@@ -0,0 +1,56 @@
+import { useEffect, useCallback } from 'react';
+
+interface NeuralEvent {
+  source: string;
+  data: any;
+  options?: { priority?: 'low' | 'medium' | 'high' | 'critical' };
+}
+
+type EventHandler = (event: NeuralEvent) => void;
+
+class NeuralEventBus {
+  private listeners: Map<string, EventHandler[]> = new Map();
+
+  on(event: string, handler: EventHandler) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, []);
+    }
+    this.listeners.get(event)?.push(handler);
+  }
+
+  off(event: string, handler: EventHandler) {
+    const handlers = this.listeners.get(event);
+    if (handlers) {
+      this.listeners.set(event, handlers.filter(h => h !== handler));
+    }
+  }
+
+  emit(event: string, neuralEvent: NeuralEvent) {
+    const handlers = this.listeners.get(event);
+    if (handlers) {
+      handlers.forEach(h => h(neuralEvent));
+    }
+  }
+}
+
+export const neuralEventBus = new NeuralEventBus();
+
+export const emitNeuralEvent = (
+  event: string,
+  source: string,
+  data: any,
+  options?: { priority?: 'low' | 'medium' | 'high' | 'critical' }
+) => {
+  neuralEventBus.emit(event, { source, data, options });
+};
+
+export const useNeuralEvent = (event: string, handler: (event: NeuralEvent) => void) => {
+  const stableHandler = useCallback(handler, []);
+
+  useEffect(() => {
+    neuralEventBus.on(event, stableHandler);
+    return () => {
+      neuralEventBus.off(event, stableHandler);
+    };
+  }, [event, stableHandler]);
+};