Skip to content

fix(audit): color workflow response node by status code #252

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SantiagoDePolonia merged 1 commit into from
Apr 21, 2026
Merged

fix(audit): color workflow response node by status code #252

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 56 additions & 0 deletions internal/admin/dashboard/static/css/dashboard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4202,6 +4202,34 @@ body.conversation-drawer-open {
color: var(--success);
}

.workflow-node-warning {
border-color: color-mix(in srgb, var(--warning) 52%, var(--border));
background: color-mix(in srgb, var(--warning) 9%, var(--bg-surface));
}

.workflow-node-warning .workflow-node-icon {
background: color-mix(in srgb, var(--warning) 14%, var(--bg));
color: var(--warning);
}

.workflow-node-warning .workflow-node-icon-endpoint {
color: var(--warning);
}

.workflow-node-warning .workflow-node-label {
color: color-mix(in srgb, var(--warning) 85%, var(--text));
}

.workflow-node-warning .workflow-node-sub {
color: color-mix(in srgb, var(--warning) 72%, var(--text-muted));
}

.workflow-node-warning .workflow-node-badge {
background: color-mix(in srgb, var(--warning) 14%, var(--bg));
border-color: color-mix(in srgb, var(--warning) 38%, var(--border));
color: var(--warning);
}

.workflow-node-error {
border-color: color-mix(in srgb, var(--danger) 52%, var(--border));
background: color-mix(in srgb, var(--danger) 9%, var(--bg-surface));
Expand All @@ -4224,6 +4252,34 @@ body.conversation-drawer-open {
color: color-mix(in srgb, var(--danger) 72%, var(--text-muted));
}

.workflow-node-neutral {
border-color: color-mix(in srgb, var(--text-muted) 40%, var(--border));
background: color-mix(in srgb, var(--text-muted) 8%, var(--bg-surface));
}

.workflow-node-neutral .workflow-node-icon {
background: color-mix(in srgb, var(--text-muted) 12%, var(--bg));
color: var(--text-muted);
}

.workflow-node-neutral .workflow-node-icon-endpoint {
color: var(--text-muted);
}

.workflow-node-neutral .workflow-node-label {
color: var(--text-muted);
}

.workflow-node-neutral .workflow-node-sub {
color: color-mix(in srgb, var(--text-muted) 84%, var(--border));
}

.workflow-node-neutral .workflow-node-badge {
background: color-mix(in srgb, var(--text-muted) 10%, var(--bg));
border-color: color-mix(in srgb, var(--text-muted) 28%, var(--border));
color: var(--text-muted);
}

.workflow-node-skipped {
position: relative;
opacity: 0.28;
Expand Down
14 changes: 13 additions & 1 deletion internal/admin/dashboard/static/js/modules/workflows.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1234,6 +1234,7 @@
aiNodeClass: this.workflowAiNodeClass(runtime),
responseConnClass: this.workflowResponseConnClass(runtime),
responseNodeClass: this.workflowResponseNodeClass(runtime),
responseNodeSublabel: this.workflowResponseNodeSublabel(runtime),
authNodeClass: this.workflowAuthNodeClass(runtime),
authNodeSublabel: this.workflowAuthNodeSublabel(runtime),
usageNodeClass: this.workflowAsyncNodeClass(showUsage, highlightAsyncPresent),
Expand Down Expand Up @@ -1345,7 +1346,18 @@

workflowResponseNodeClass(runtime) {
if (!runtime) return '';
return runtime.responseSuccess ? 'workflow-node-success' : '';
const statusCode = runtime.statusCode;
if (!Number.isFinite(statusCode)) return '';
if (statusCode >= 500) return 'workflow-node-error';
if (statusCode >= 400) return 'workflow-node-warning';
if (statusCode >= 300) return 'workflow-node-neutral';
if (statusCode >= 200) return 'workflow-node-success';
return '';
},

workflowResponseNodeSublabel(runtime) {
if (!runtime || !Number.isFinite(runtime.statusCode)) return null;
return String(runtime.statusCode);
Comment on lines 1347 to +1360
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Apr 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Reject malformed finite status codes before coloring or displaying them.

Number.isFinite still accepts non-HTTP values like 99, 200.5, or 600; these can be rendered as real response statuses, and 600 would be colored as an error. Normalize to integer HTTP status codes before both class and sublabel computation.

Proposed fix 
+            workflowResponseStatusCode(runtime) {
+                if (!runtime) return null;
+                const statusCode = Number(runtime.statusCode);
+                if (!Number.isInteger(statusCode) || statusCode < 100 || statusCode > 599) return null;
+                return statusCode;
+            },
+
             workflowResponseNodeClass(runtime) {
-                if (!runtime) return '';
-                const statusCode = runtime.statusCode;
-                if (!Number.isFinite(statusCode)) return '';
+                const statusCode = this.workflowResponseStatusCode(runtime);
+                if (statusCode === null) return '';
                 if (statusCode >= 500) return 'workflow-node-error';
                 if (statusCode >= 400) return 'workflow-node-warning';
                 if (statusCode >= 300) return 'workflow-node-neutral';
                 if (statusCode >= 200) return 'workflow-node-success';
                 return '';
             },
 
             workflowResponseNodeSublabel(runtime) {
-                if (!runtime || !Number.isFinite(runtime.statusCode)) return null;
-                return String(runtime.statusCode);
+                const statusCode = this.workflowResponseStatusCode(runtime);
+                return statusCode === null ? null : String(statusCode);
             },
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@internal/admin/dashboard/static/js/modules/workflows.js` around lines 1347 -
1360, The code accepts non-integer or out-of-range status codes; update
workflowResponseNodeClass and workflowResponseNodeSublabel to first
coerce/validate an integer HTTP status (e.g., use Math.floor or parseInt then
Number.isInteger) and only proceed if the integer is within the 100–599 range;
otherwise return '' for class and null for sublabel. Ensure you reference
runtime.statusCode when validating so both methods reject values like 99, 200.5,
or 600 before computing classes or labels.

},

workflowAuthNodeClass(runtime) {
Expand Down
40 changes: 40 additions & 0 deletions internal/admin/dashboard/static/js/modules/workflows.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,7 @@ test('workflowChart returns the shared chart contract for workflow sources', ()
aiNodeClass: '',
responseConnClass: '',
responseNodeClass: '',
responseNodeSublabel: null,
authNodeClass: '',
authNodeSublabel: null,
usageNodeClass: '',
Expand Down Expand Up @@ -290,6 +291,7 @@ test('workflowChart masks globally disabled workflow features from persisted wor
aiNodeClass: '',
responseConnClass: '',
responseNodeClass: '',
responseNodeSublabel: null,
authNodeClass: '',
authNodeSublabel: null,
usageNodeClass: '',
Expand Down Expand Up @@ -439,6 +441,7 @@ test('workflowAuditChart returns the shared chart contract for audit runtime ent
aiNodeClass: 'workflow-node-skipped',
responseConnClass: 'workflow-conn-dim',
responseNodeClass: 'workflow-node-success',
responseNodeSublabel: '200',
authNodeClass: '',
authNodeSublabel: null,
usageNodeClass: 'workflow-node-success',
Expand Down Expand Up @@ -480,6 +483,7 @@ test('workflowAuditChart forces audit nodes even when the workflow version canno
aiNodeClass: 'workflow-node-skipped',
responseConnClass: 'workflow-conn-dim',
responseNodeClass: 'workflow-node-success',
responseNodeSublabel: '200',
authNodeClass: '',
authNodeSublabel: null,
usageNodeClass: '',
Expand Down Expand Up @@ -550,6 +554,7 @@ test('workflowAuditChart prefers request-time workflow features over current wor
aiNodeClass: 'workflow-node-success',
responseConnClass: '',
responseNodeClass: 'workflow-node-success',
responseNodeSublabel: '200',
authNodeClass: '',
authNodeSublabel: null,
usageNodeClass: '',
Expand Down Expand Up @@ -621,6 +626,7 @@ test('workflowAuditChart highlights configured failover redirects and exposes th
aiNodeClass: 'workflow-node-success',
responseConnClass: '',
responseNodeClass: 'workflow-node-success',
responseNodeSublabel: '200',
authNodeClass: '',
authNodeSublabel: null,
usageNodeClass: 'workflow-node-success',
Expand Down Expand Up @@ -1900,6 +1906,7 @@ test('audit runtime uses explicit cache-hit labels and highlights the uncached 2
assert.equal(module.workflowAiNodeClass(semanticHit), 'workflow-node-skipped');
assert.equal(module.workflowResponseConnClass(semanticHit), 'workflow-conn-dim');
assert.equal(module.workflowResponseNodeClass(semanticHit), 'workflow-node-success');
assert.equal(module.workflowResponseNodeSublabel(semanticHit), '200');

const uncachedSuccess = module.workflowRuntimeFromEntry({
provider: 'openai',
Expand All @@ -1913,6 +1920,39 @@ test('audit runtime uses explicit cache-hit labels and highlights the uncached 2
assert.equal(module.workflowAiNodeClass(uncachedSuccess), 'workflow-node-success');
assert.equal(module.workflowResponseConnClass(uncachedSuccess), '');
assert.equal(module.workflowResponseNodeClass(uncachedSuccess), 'workflow-node-success');
assert.equal(module.workflowResponseNodeSublabel(uncachedSuccess), '200');
});

test('response runtime maps 3xx and 4xx statuses to neutral and warning chart colors', () => {
const module = createWorkflowsModule();

const redirect = module.workflowRuntimeFromEntry({
provider: 'openai',
model: 'gpt-5',
status_code: 304
});
assert.equal(module.workflowResponseNodeClass(redirect), 'workflow-node-neutral');
assert.equal(module.workflowResponseNodeSublabel(redirect), '304');

const clientError = module.workflowRuntimeFromEntry({
provider: 'openai',
model: 'gpt-5',
status_code: 429
});
assert.equal(module.workflowResponseNodeClass(clientError), 'workflow-node-warning');
assert.equal(module.workflowResponseNodeSublabel(clientError), '429');
});

test('response runtime maps 5xx statuses to the error chart color', () => {
const module = createWorkflowsModule();

const serverError = module.workflowRuntimeFromEntry({
provider: 'openai',
model: 'gpt-5',
status_code: 503
});
assert.equal(module.workflowResponseNodeClass(serverError), 'workflow-node-error');
assert.equal(module.workflowResponseNodeSublabel(serverError), '503');
});

test('workflowRuntimeFromEntry treats any uncached 2xx status as a successful AI and response path', () => {
Expand Down
1 change: 1 addition & 0 deletions internal/admin/dashboard/templates/workflow-chart.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@
<svg viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
</div>
<span class="workflow-node-label">Response</span>
<span class="workflow-node-sub" x-show="workflow.responseNodeSublabel" x-text="workflow.responseNodeSublabel"></span>
</div>
</div>

Expand Down
Loading