Spaces:
Running
Running
Deploy Aureon OS (deploy/selfhost stack: nginx edge + fusion API x2 + console + HNC organ + redis + postgres; paper mode) (part 18)
f568a4f verified | import React from 'react'; | |
| import { Card } from '@/components/ui/card'; | |
| import { Progress } from '@/components/ui/progress'; | |
| import { Blend, Target, TrendingUp, TrendingDown, Minus } from 'lucide-react'; | |
| import type { ProbabilityFusion } from '@/core/enhanced6DProbabilityMatrix'; | |
| interface ProbabilityMatrixDisplayProps { | |
| fusion: ProbabilityFusion | null; | |
| } | |
| export function ProbabilityMatrixDisplay({ fusion }: ProbabilityMatrixDisplayProps) { | |
| if (!fusion) { | |
| return ( | |
| <Card className="p-4 bg-card/50 border-border/50"> | |
| <div className="text-muted-foreground text-sm">Awaiting probability fusion...</div> | |
| </Card> | |
| ); | |
| } | |
| const ActionIcon = fusion.action.includes('BUY') ? TrendingUp : | |
| fusion.action.includes('SELL') ? TrendingDown : Minus; | |
| const actionColor = fusion.action.includes('BUY') ? 'text-success' : | |
| fusion.action.includes('SELL') ? 'text-destructive' : 'text-muted-foreground'; | |
| return ( | |
| <Card className="p-4 bg-card/50 border-border/50"> | |
| <div className="flex items-center gap-2 mb-4"> | |
| <Blend className="w-4 h-4 text-primary" /> | |
| <h3 className="text-sm font-semibold text-foreground">Probability Matrix Fusion</h3> | |
| </div> | |
| {/* Input Probabilities */} | |
| <div className="space-y-3 mb-4"> | |
| <ProbabilityBar | |
| label="6D Harmonic" | |
| value={fusion.probability6D} | |
| weight={fusion.weight6D} | |
| color="bg-primary" | |
| /> | |
| <ProbabilityBar | |
| label="HNC" | |
| value={fusion.probabilityHNC} | |
| weight={fusion.weightHNC} | |
| color="bg-primary" | |
| /> | |
| <ProbabilityBar | |
| label="Lighthouse" | |
| value={fusion.probabilityLighthouse} | |
| weight={fusion.weightLighthouse} | |
| color="bg-warning" | |
| /> | |
| </div> | |
| {/* Fusion Result */} | |
| <div className="border-t border-border/30 pt-3"> | |
| <div className="flex items-center justify-between mb-2"> | |
| <span className="text-xs text-muted-foreground">Fused Probability</span> | |
| <span className="text-xs text-muted-foreground"> | |
| Resonance Boost: +{(fusion.resonanceBoost * 100).toFixed(1)}% | |
| </span> | |
| </div> | |
| <div className="relative h-6 bg-muted/30 rounded-full overflow-hidden mb-3"> | |
| {/* Gradient bar */} | |
| <div className="absolute inset-0 bg-gradient-to-r from-destructive via-warning to-success opacity-30" /> | |
| {/* Indicator */} | |
| <div | |
| className="absolute top-0 bottom-0 w-1 bg-white shadow-lg transition-all duration-500" | |
| style={{ left: `${fusion.fusedProbability * 100}%` }} | |
| /> | |
| {/* Value label */} | |
| <div | |
| className="absolute top-0 bottom-0 flex items-center transition-all duration-500" | |
| style={{ left: `${fusion.fusedProbability * 100}%`, transform: 'translateX(-50%)' }} | |
| > | |
| <span className="text-xs font-mono font-bold text-foreground bg-background/80 px-1 rounded"> | |
| {(fusion.fusedProbability * 100).toFixed(1)}% | |
| </span> | |
| </div> | |
| </div> | |
| {/* Action & Confidence */} | |
| <div className="flex items-center justify-between"> | |
| <div className="flex items-center gap-2"> | |
| <ActionIcon className={`w-5 h-5 ${actionColor}`} /> | |
| <span className={`text-lg font-bold ${actionColor}`}> | |
| {fusion.action.replace('_', ' ')} | |
| </span> | |
| </div> | |
| <div className="text-right"> | |
| <div className="text-[10px] text-muted-foreground">Confidence</div> | |
| <div className="flex items-center gap-1"> | |
| <Target className="w-3 h-3 text-muted-foreground" /> | |
| <span className="text-sm font-mono font-bold text-foreground"> | |
| {(fusion.confidence * 100).toFixed(0)}% | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| {/* Harmonic Lock Indicator */} | |
| {fusion.harmonicLock && ( | |
| <div className="mt-2 flex items-center justify-center gap-2 py-1.5 rounded bg-success/10 border border-success/30"> | |
| <div className="w-2 h-2 rounded-full bg-success animate-pulse" /> | |
| <span className="text-xs font-medium text-success">HARMONIC LOCK ACTIVE</span> | |
| </div> | |
| )} | |
| </div> | |
| </Card> | |
| ); | |
| } | |
| function ProbabilityBar({ | |
| label, | |
| value, | |
| weight, | |
| color | |
| }: { | |
| label: string; | |
| value: number; | |
| weight: number; | |
| color: string; | |
| }) { | |
| const direction = value >= 0.5 ? 'BULL' : 'BEAR'; | |
| const directionColor = value >= 0.5 ? 'text-success' : 'text-destructive'; | |
| return ( | |
| <div> | |
| <div className="flex items-center justify-between mb-1"> | |
| <div className="flex items-center gap-2"> | |
| <span className="text-xs text-foreground">{label}</span> | |
| <span className="text-[10px] text-muted-foreground"> | |
| ({(weight * 100).toFixed(0)}% weight) | |
| </span> | |
| </div> | |
| <div className="flex items-center gap-2"> | |
| <span className={`text-[10px] ${directionColor}`}>{direction}</span> | |
| <span className="text-xs font-mono text-foreground"> | |
| {(value * 100).toFixed(1)}% | |
| </span> | |
| </div> | |
| </div> | |
| <div className="h-2 bg-muted/30 rounded-full overflow-hidden"> | |
| <div | |
| className={`h-full ${color} transition-all duration-500`} | |
| style={{ width: `${value * 100}%` }} | |
| /> | |
| </div> | |
| </div> | |
| ); | |
| } | |