Lars/mitai-jinkendo
1
0
Fork 0
Code Issues 33 Pull Requests Actions Packages Projects Releases 5 Wiki Activity

feat: Show debug info in WorkflowResultViewer
All checks were successful
Deploy Development / deploy (push) Successful in 59s
Details
Build Test / pytest-backend (push) Successful in 8s
Details
Build Test / lint-backend (push) Successful in 1s
Details
Build Test / build-frontend (push) Successful in 16s
Details

Browse Source 
Display per node:
- debug_prompt (prompt sent to AI)
- debug_raw_response (raw AI response)
- analysis_core (parsed results)
- normalized_signals (decision signals with status)
- Failed nodes: red border + red background

NO other changes - executeWorkflow still used
This commit is contained in:
Lars 2026-04-13 15:31:37 +02:00
parent 0a27533262
commit 736dc58d81
1 changed files with 59 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
frontend/src/components/workflow/panels/WorkflowResultViewer.jsx
View File

@ -192,13 +192,17 @@ export function WorkflowResultViewer({ result, onClose }) {
Node States (Debug)
</h3>
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
{nodeStates.map((node) => (
{nodeStates.map((node) => {
const hasFailed = node.status === 'failed'
return (
<div
key={node.node_id}
style={{
border: '1px solid var(--border)',
border: hasFailed ? '2px solid #D85A30' : '1px solid var(--border)',
borderRadius: '8px',
overflow: 'hidden'
background: hasFailed ? '#D85A3010' : 'transparent',
overflow: 'hidden',
boxShadow: hasFailed ? '0 0 0 2px #D85A3020' : 'none'
}}
>
{/* Node Header */}
@ -237,45 +241,65 @@ export function WorkflowResultViewer({ result, onClose }) {
{/* Node Details */}
{expandedNodes[node.node_id] && (
<div style={{ padding: '12px', fontSize: '12px' }}>
{node.output && (
{/* Error (show first) */}
{node.error && (
<div style={{ marginBottom: '12px', padding: '12px', background: '#D85A3015', border: '1px solid #D85A30', borderRadius: '6px' }}>
<div style={{ fontSize: '12px', fontWeight: 600, color: '#D85A30', marginBottom: '6px' }}>Error:</div>
<pre style={{ margin: 0, fontSize: '12px', color: '#D85A30', whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>{node.error}</pre>
</div>
)}
{/* Debug Prompt */}
{node.debug_prompt && (
<div style={{ marginBottom: '12px' }}>
<div style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text2)', marginBottom: '6px', textTransform: 'uppercase' }}>Prompt:</div>
<pre style={{ margin: 0, padding: '12px', background: 'var(--surface2)', borderRadius: '6px', fontSize: '11px', color: 'var(--text1)', whiteSpace: 'pre-wrap', maxHeight: '300px', overflowY: 'auto', border: '1px solid var(--border)' }}>{node.debug_prompt}</pre>
</div>
)}
{/* Debug Raw Response */}
{node.debug_raw_response && (
<div style={{ marginBottom: '12px' }}>
<div style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text2)', marginBottom: '6px', textTransform: 'uppercase' }}>Rohe Antwort:</div>
<pre style={{ margin: 0, padding: '12px', background: 'var(--surface2)', borderRadius: '6px', fontSize: '11px', color: 'var(--text1)', whiteSpace: 'pre-wrap', maxHeight: '300px', overflowY: 'auto', border: '1px solid var(--border)' }}>{node.debug_raw_response}</pre>
</div>
)}
{/* Analysis Core */}
{node.analysis_core && (
<div style={{ marginBottom: '12px' }}>
<div style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text2)', marginBottom: '6px', textTransform: 'uppercase' }}>Ergebnis:</div>
<pre style={{ margin: 0, padding: '12px', background: 'var(--surface2)', borderRadius: '6px', fontSize: '11px', color: 'var(--text1)', whiteSpace: 'pre-wrap', maxHeight: '300px', overflowY: 'auto', border: '1px solid var(--border)' }}>{node.analysis_core}</pre>
</div>
)}
{/* Normalized Signals */}
{node.normalized_signals && node.normalized_signals.length > 0 && (
<div style={{ marginBottom: '12px' }}>
<div style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text2)', marginBottom: '6px', textTransform: 'uppercase' }}>Signale ({node.normalized_signals.length}):</div>
{node.normalized_signals.map((sig, i) => (
<div key={i} style={{ padding: '6px', background: 'var(--surface2)', borderRadius: '4px', fontSize: '11px', marginBottom: '4px', border: '1px solid var(--border)' }}>
<span style={{ color: 'var(--text2)' }}>{sig.question_type}:</span> <span style={{ fontWeight: 500 }}>"{sig.raw_value}" → "{sig.normalized_value}"</span> <span style={{ fontSize: '10px', padding: '2px 4px', borderRadius: '2px', background: sig.status === 'valid' ? '#1D9E7520' : '#D85A3020', color: sig.status === 'valid' ? '#1D9E75' : '#D85A30' }}>{sig.status}</span>
</div>
))}
</div>
)}
{/* Output (fallback) */}
{node.output && !node.analysis_core && (
<div style={{ marginBottom: '8px' }}>
<strong>Output:</strong>
<pre
style={{
marginTop: '4px',
padding: '8px',
background: 'var(--bg)',
borderRadius: '4px',
fontSize: '11px',
overflowX: 'auto',
maxHeight: '200px',
overflowY: 'auto'
}}
>
{typeof node.output === 'string'
? node.output
: JSON.stringify(node.output, null, 2)}
<pre style={{ marginTop: '4px', padding: '8px', background: 'var(--bg)', borderRadius: '4px', fontSize: '11px', overflowX: 'auto', maxHeight: '200px', overflowY: 'auto' }}>
{typeof node.output === 'string' ? node.output : JSON.stringify(node.output, null, 2)}
</pre>
</div>
)}
{node.error && (
<div style={{ color: 'var(--danger)', marginBottom: '8px' }}>
<strong>Error:</strong> {node.error}
</div>
)}
{/* Metadata */}
{node.metadata && (
<div style={{ marginTop: '8px' }}>
<strong>Metadata:</strong>
<pre
style={{
marginTop: '4px',
padding: '8px',
background: 'var(--bg)',
borderRadius: '4px',
fontSize: '11px',
overflowX: 'auto'
}}
>
<pre style={{ marginTop: '4px', padding: '8px', background: 'var(--bg)', borderRadius: '4px', fontSize: '11px', overflowX: 'auto' }}>
{JSON.stringify(node.metadata, null, 2)}
</pre>
</div>
@ -283,7 +307,7 @@ export function WorkflowResultViewer({ result, onClose }) {
</div>
)}
</div>
))}
)})}
</div>
</div>
)}