File size: 3,146 Bytes
d8bad25 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | import { useRef, useEffect } from 'react';
import { Cpu, Activity } from 'lucide-react';
export default function ReasoningSidebar({ logs, status }) {
const bottomRef = useRef(null);
useEffect(() => {
bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [logs]);
return (
<>
{/* Header */}
<div className="sidebar-header">
<div className="sidebar-header-left">
<Cpu size={16} className={status === 'running' ? 'color-green anim-pulse' : 'color-muted'} />
<span className="sidebar-header-title">GEMINI 3 FLASH</span>
</div>
<div className={`badge ${status === 'running' ? 'badge-green' : 'badge-red'}`}>
{status.toUpperCase()}
</div>
</div>
{/* Log Stream */}
<div className="sidebar-body">
{(!logs || logs.length === 0) && (
<div className="sidebar-empty">
<Activity size={28} strokeWidth={1} />
<span>Waiting for agent thoughts...</span>
</div>
)}
{logs && [...logs].reverse().map((log, i) => (
<div key={i} className="log-entry fade-in">
<div className="log-entry-header">
<span className={`badge ${log.action === 'BUY' ? 'badge-green' :
log.action === 'SELL' ? 'badge-red' :
log.action === 'CLOSE' ? 'badge-blue' :
'badge-neutral'
}`}>
{log.action}
</span>
<div className="confidence-info">
<div className="confidence-bar-track">
<div
className={`confidence-bar-fill ${log.confidence > 0.7 ? 'confidence-bar-high' : 'confidence-bar-low'}`}
style={{ width: `${log.confidence * 100}%` }}
/>
</div>
<span>{(log.confidence * 100).toFixed(0)}%</span>
</div>
</div>
<p className="log-entry-body">{log.reasoning}</p>
<div className="log-entry-footer">
<span>{new Date(log.timestamp).toLocaleTimeString()}</span>
<span>GEMINI-2.0-FLASH</span>
</div>
</div>
))}
<div ref={bottomRef} />
</div>
{/* Footer */}
<div className="sidebar-footer">
<span className="live-dot" />
<span>Live connection established</span>
</div>
</>
);
}
|