feat: Add Reasoning Trace HUD Component
Closes #875 - Added new ReasoningTrace component for real-time reasoning visualization - Shows agent's reasoning steps during complex task execution - Supports step types: THINK, DECIDE, RECALL, PLAN, EXECUTE, VERIFY, DOUBT, MEMORY - Includes confidence visualization, task tracking, and export functionality - Integrated into existing GOFAI HUD system
This commit is contained in:
Alexander Whitestone
249
style.css
249
style.css
@@ -2685,3 +2685,252 @@ body.operator-mode #mode-label {
|
||||
color: #ffd700;
|
||||
}
|
||||
|
||||
/* ═══ REASONING TRACE COMPONENT ═══ */
|
||||
|
||||
.reasoning-trace {
|
||||
width: 320px;
|
||||
max-height: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.trace-header-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.trace-header-container .panel-header {
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.trace-icon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.trace-controls {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.trace-btn {
|
||||
background: rgba(74, 240, 192, 0.1);
|
||||
border: 1px solid rgba(74, 240, 192, 0.2);
|
||||
color: #4af0c0;
|
||||
padding: 2px 6px;
|
||||
font-size: 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.trace-btn:hover {
|
||||
background: rgba(74, 240, 192, 0.2);
|
||||
border-color: #4af0c0;
|
||||
}
|
||||
|
||||
.trace-task {
|
||||
font-size: 9px;
|
||||
color: #8899aa;
|
||||
margin-bottom: 4px;
|
||||
padding: 2px 6px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 2px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
.trace-task.active {
|
||||
color: #4af0c0;
|
||||
background: rgba(74, 240, 192, 0.1);
|
||||
border-left: 2px solid #4af0c0;
|
||||
}
|
||||
|
||||
.trace-counter {
|
||||
font-size: 9px;
|
||||
color: #667788;
|
||||
margin-bottom: 6px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
.trace-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
.trace-step {
|
||||
margin-bottom: 8px;
|
||||
padding: 6px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 3px;
|
||||
border-left: 3px solid #4af0c0;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.trace-step-think {
|
||||
border-left-color: #4af0c0;
|
||||
}
|
||||
|
||||
.trace-step-decide {
|
||||
border-left-color: #ffd700;
|
||||
}
|
||||
|
||||
.trace-step-recall {
|
||||
border-left-color: #7b5cff;
|
||||
}
|
||||
|
||||
.trace-step-plan {
|
||||
border-left-color: #ff8c42;
|
||||
}
|
||||
|
||||
.trace-step-execute {
|
||||
border-left-color: #ff4466;
|
||||
}
|
||||
|
||||
.trace-step-verify {
|
||||
border-left-color: #4af0c0;
|
||||
}
|
||||
|
||||
.trace-step-doubt {
|
||||
border-left-color: #ff8c42;
|
||||
}
|
||||
|
||||
.trace-step-memory {
|
||||
border-left-color: #7b5cff;
|
||||
}
|
||||
|
||||
.trace-step-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 4px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.step-icon {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.step-type {
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
.step-time {
|
||||
color: #667788;
|
||||
font-size: 9px;
|
||||
margin-left: auto;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
.confidence-bar {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 9px;
|
||||
color: #4af0c0;
|
||||
letter-spacing: -1px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.trace-step-content {
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
color: #d9f7ff;
|
||||
}
|
||||
|
||||
.step-thought {
|
||||
margin-bottom: 4px;
|
||||
font-style: italic;
|
||||
color: #e0f0ff;
|
||||
}
|
||||
|
||||
.step-reasoning {
|
||||
margin-bottom: 4px;
|
||||
color: #aabbcc;
|
||||
font-size: 10px;
|
||||
padding-left: 8px;
|
||||
border-left: 1px solid rgba(74, 240, 192, 0.2);
|
||||
}
|
||||
|
||||
.step-decision {
|
||||
margin-bottom: 4px;
|
||||
color: #ffd700;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.step-alternatives {
|
||||
margin-bottom: 4px;
|
||||
color: #8899aa;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.step-source {
|
||||
margin-bottom: 4px;
|
||||
color: #7b5cff;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.trace-separator {
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(74, 240, 192, 0.2), transparent);
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.trace-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
color: #667788;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 8px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 11px;
|
||||
margin-bottom: 4px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
font-size: 9px;
|
||||
color: #445566;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
/* Animation for new steps */
|
||||
@keyframes trace-step-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.trace-step {
|
||||
animation: trace-step-in 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.reasoning-trace {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.trace-content {
|
||||
max-height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user