Skip to content

fix(audit): log cached streams and polish dashboard UI #241

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 3 commits into from
Apr 17, 2026
Merged

fix(audit): log cached streams and polish dashboard UI #241

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f9d10e6
fix(audit): log cached streams and polish dashboard UI
SantiagoDePolonia Apr 17, 2026
a8c922a
test(contract): update anthropic stream role golden
SantiagoDePolonia Apr 17, 2026
c7e7af3
fix: address audit dashboard review follow-ups
SantiagoDePolonia Apr 17, 2026
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
100 changes: 86 additions & 14 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 @@ -1324,7 +1324,7 @@ body {

.filter-input {
flex: 1;
max-width: 420px;
min-width: min(400px, 100%);
padding: 8px 12px;
background: var(--bg-surface);
border: 1px solid var(--border);
Expand All @@ -1334,12 +1334,33 @@ body {
outline: none;
}

.filter-input:focus {
border-color: var(--accent);
.filter-input-wrap {
position: relative;
display: flex;
flex: 1;
min-width: min(400px, 100%);
width: 100%;
}

.filter-input-wrap .filter-input {
min-width: 0;
width: 100%;
padding-left: 34px;
}

.filter-input-icon {
position: absolute;
left: 12px;
top: 50%;
width: 14px;
height: 14px;
color: var(--text-muted);
pointer-events: none;
transform: translateY(-50%);
}

.models-filter-input {
max-width: 840px;
.filter-input:focus {
border-color: var(--accent);
}

.table-wrapper {
Expand Down Expand Up @@ -2216,7 +2237,7 @@ td.col-price {
margin-bottom: 16px;
}

.usage-log-toolbar .filter-input {
.usage-log-toolbar .filter-input-wrap {
flex: 1;
max-width: none;
}
Expand Down Expand Up @@ -2284,7 +2305,7 @@ td.col-price {
min-width: 0;
}

.audit-filter-row-search .filter-input {
.audit-filter-row-search .filter-input-wrap {
grid-column: 1 / -1;
max-width: none;
}
Expand Down Expand Up @@ -2472,13 +2493,14 @@ td.col-price {

.audit-request-response {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 12px;
overflow-x: auto;
}

.audit-entry-metadata {
display: flex;
align-items: flex-start;
align-items: center;
gap: 10px;
margin-top: 12px;
padding-top: 12px;
Expand All @@ -2505,6 +2527,7 @@ td.col-price {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg);
min-width: 0;
padding: 12px;
}

Expand All @@ -2527,30 +2550,76 @@ td.col-price {
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--text-muted);
margin-bottom: 6px;
}

.audit-pane-block {
min-width: 0;
}

.audit-pane-block + .audit-pane-block {
margin-top: 10px;
}

.audit-pane-block > h5 {
margin-bottom: 6px;
}

.audit-pane-block-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 6px;
}

.audit-copy-btn {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
padding: 4px 8px;
background-color: var(--bg-surface);
border: 1px solid color-mix(in srgb, var(--border) 70%, var(--text) 30%);
border-radius: 6px;
color: var(--text);
cursor: pointer;
font-family: inherit;
font-size: 12px;
transition:
background-color 0.15s,
border-color 0.15s,
color 0.15s;
}

.audit-copy-btn:hover:not(:disabled) {
background: color-mix(in srgb, var(--bg-surface) 80%, var(--text) 20%);
border-color: color-mix(in srgb, var(--border) 45%, var(--text) 55%);
}

.audit-copy-btn.copy-feedback-btn-copied {
background: color-mix(in srgb, var(--success) 18%, var(--bg-surface));
}

.audit-json {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 6px;
box-sizing: border-box;
font-family: "SF Mono", Menlo, Consolas, monospace;
font-size: 12px;
line-height: 1.45;
max-width: 100%;
padding: 10px;
max-height: 220px;
overflow: auto;
overflow-x: auto;
overflow-y: auto;
white-space: pre;
color: var(--text);
}

.audit-json-body {
white-space: pre-wrap;
overflow-wrap: anywhere;
white-space: pre;
overflow-wrap: normal;
}

.conversation-body-highlight {
Expand Down Expand Up @@ -3666,6 +3735,7 @@ body.conversation-drawer-open {
.audit-filter-row {
grid-template-columns: 1fr;
}
.audit-filter-row .filter-input-wrap,
.audit-filter-row .filter-input,
.audit-filter-select,
.audit-filter-row .pagination-btn {
Expand All @@ -3681,10 +3751,11 @@ body.conversation-drawer-open {
}
.audit-entry-metadata {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.audit-request-response {
grid-template-columns: 1fr;
grid-template-columns: minmax(0, 1fr);
}
.conversation-drawer {
width: 100%;
Expand Down Expand Up @@ -3914,6 +3985,7 @@ body.conversation-drawer-open {
align-items: center;
width: 100%;
min-width: 0;
overflow-x: auto;
}

/* ─── Connectors ─── */
Expand Down
5 changes: 5 additions & 0 deletions internal/admin/dashboard/static/js/dashboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -604,6 +604,11 @@ function dashboard() {
);
},

runtimeRefreshSteps() {
const steps = this.runtimeRefreshReport && this.runtimeRefreshReport.steps;
return Array.isArray(steps) ? steps : [];
},

runtimeRefreshStepLabel(step) {
const name = String((step && step.name) || "").replace(/_/g, " ");
const status = String((step && step.status) || "").trim();
Expand Down
35 changes: 23 additions & 12 deletions internal/admin/dashboard/static/js/modules/audit-list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,7 @@
return {
title: 'Request',
entry,
copyHeaders: data && data.request_headers,
copyBody: data && data.request_body,
showErrorMessage: false,
errorMessage: null,
Expand All @@ -194,6 +195,7 @@
return {
title: 'Response',
entry,
copyHeaders: data && data.response_headers,
copyBody: data && data.response_body,
showErrorMessage: !!(data && data.error_message),
errorMessage: data && data.error_message,
Expand All @@ -213,25 +215,34 @@
const renderBody = typeof this.renderBodyWithConversationHighlights === 'function'
? this.renderBodyWithConversationHighlights.bind(this)
: (_entry, body) => formatJSON(body);
const createCopyState = () => clipboard
? clipboard.createClipboardButtonState({
logPrefix: 'Failed to copy audit payload:'
})
: {
copied: false,
error: false,
copy() {
return Promise.resolve();
}
};
const copyBodyState = createCopyState();
const copyHeadersState = createCopyState();

return {
pane,
formattedHeaders: pane && pane.showHeaders ? formatJSON(pane.headers) : '',
renderedBody: pane && pane.showBody ? renderBody(pane.entry, pane.body) : '',
copyState: clipboard
? clipboard.createClipboardButtonState({
logPrefix: 'Failed to copy audit payload:'
})
: {
copied: false,
error: false,
copy() {
return Promise.resolve();
}
},
copyBodyState,
copyHeadersState,
copyState: copyBodyState,

copyBody() {
return this.copyState.copy(this.pane.copyBody, formatJSON);
return this.copyBodyState.copy(this.pane.copyBody, formatJSON);
},

copyHeaders() {
return this.copyHeadersState.copy(this.pane.copyHeaders, formatJSON);
}
};
}
Expand Down
51 changes: 43 additions & 8 deletions internal/admin/dashboard/static/js/modules/audit-list.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ test('auditRequestPane returns the shared request-pane contract', () => {

assert.equal(pane.title, 'Request');
assert.equal(pane.entry, entry);
assert.equal(JSON.stringify(pane.copyHeaders), JSON.stringify(entry.data.request_headers));
assert.equal(JSON.stringify(pane.copyBody), JSON.stringify(entry.data.request_body));
assert.equal(pane.showErrorMessage, false);
assert.equal(pane.errorMessage, null);
Expand Down Expand Up @@ -68,6 +69,7 @@ test('auditResponsePane returns the shared response-pane contract', () => {

assert.equal(pane.title, 'Response');
assert.equal(pane.entry, entry);
assert.equal(JSON.stringify(pane.copyHeaders), JSON.stringify(entry.data.response_headers));
assert.equal(JSON.stringify(pane.copyBody), JSON.stringify(entry.data.response_body));
assert.equal(pane.showErrorMessage, true);
assert.equal(pane.errorMessage, 'provider timeout');
Expand Down Expand Up @@ -254,14 +256,47 @@ test('auditPaneState copies the formatted body and resets success feedback', asy
await paneState.copyBody();

assert.deepEqual(writes, ['{\n "model": "gpt-5",\n "stream": false\n}']);
assert.equal(paneState.copyState.copied, true);
assert.equal(paneState.copyState.error, false);
assert.equal(paneState.copyBodyState.copied, true);
assert.equal(paneState.copyBodyState.error, false);

assert.equal(typeof resetCallback, 'function');
resetCallback();

assert.equal(paneState.copyState.copied, false);
assert.equal(paneState.copyState.error, false);
assert.equal(paneState.copyBodyState.copied, false);
assert.equal(paneState.copyBodyState.error, false);
});

test('auditPaneState copies the formatted headers independently from body feedback', async () => {
const writes = [];
const module = createAuditListModule({
setTimeout() {
return 1;
},
clearTimeout() {},
window: {
navigator: {
clipboard: {
writeText(value) {
writes.push(value);
return Promise.resolve();
}
}
}
}
});

const paneState = module.auditPaneState({
copyHeaders: { 'x-request-id': 'req-123' },
copyBody: { id: 'body-1' }
});

await paneState.copyHeaders();

assert.deepEqual(writes, ['{\n "x-request-id": "req-123"\n}']);
assert.equal(paneState.copyHeadersState.copied, true);
assert.equal(paneState.copyHeadersState.error, false);
assert.equal(paneState.copyBodyState.copied, false);
assert.equal(paneState.copyBodyState.error, false);
});

test('auditPaneState marks copy failures and clears the error after reset', async () => {
Expand Down Expand Up @@ -292,12 +327,12 @@ test('auditPaneState marks copy failures and clears the error after reset', asyn

await paneState.copyBody();

assert.equal(paneState.copyState.copied, false);
assert.equal(paneState.copyState.error, true);
assert.equal(paneState.copyBodyState.copied, false);
assert.equal(paneState.copyBodyState.error, true);

assert.equal(typeof resetCallback, 'function');
resetCallback();

assert.equal(paneState.copyState.copied, false);
assert.equal(paneState.copyState.error, false);
assert.equal(paneState.copyBodyState.copied, false);
assert.equal(paneState.copyBodyState.error, false);
});
14 changes: 13 additions & 1 deletion internal/admin/dashboard/static/js/modules/charts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,6 +282,18 @@
return this._usageRowsBySelectedValue(this.userPathUsage || []);
},

userPathUsageChartVisible() {
const rows = Array.isArray(this.userPathUsage) ? this.userPathUsage : [];
if (rows.length === 0) {
return false;
}
if (rows.length !== 1) {
return true;
}
const onlyPath = String(rows[0] && rows[0].user_path || '').trim();
return onlyPath !== '' && onlyPath !== '/';
},

_barData() {
return this._barDataFrom(this.modelUsage, (m) => typeof this.qualifiedModelDisplay === 'function'
? this.qualifiedModelDisplay(m)
Expand Down Expand Up @@ -351,7 +363,7 @@
renderUserPathChart(retries) {
if (retries === undefined) retries = 3;
this.$nextTick(() => {
if (!this.userPathUsage || this.userPathUsage.length === 0 || this.page !== 'usage' || (this.userPathUsageView || 'chart') !== 'chart') {
if (!this.userPathUsageChartVisible() || this.page !== 'usage' || (this.userPathUsageView || 'chart') !== 'chart') {
if (this.usageUserPathChart) {
this.usageUserPathChart.destroy();
this.usageUserPathChart = null;
Expand Down
Loading
Loading