Yashas
49c51c24d7
The lead file listed the current field values and nothing about how they got there. On an app whose whole claim is that agents do the work, that is the wrong thing to show: you could see the outcome and not whether a machine or a person produced it. Adds a timeline from the audit trail — every activity in order, badged by actor, carrying the reasoning the agent actually wrote (attribution, eligibility, call notes, recommendation rationale, the premium breakup) rather than the raw field dump that is already below it. Colour encodes something real: machine work is blue, people amber, the platform grey, so a file reads at a glance for how much of it was done by hand. Also fixes the audit path — the bare /view/audit is not an API route and falls through to the SPA, returning HTML with a 200 that parses as a JSON error rather than an HTTP one. It has to be app-scoped. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
40 lines
2.2 KiB
CSS
40 lines
2.2 KiB
CSS
.tl { list-style: none; margin: 0; padding: 0 0 0 4px; }
|
|
.tl__loading, .tl__err { color: var(--zk-muted); font-size: .86rem; padding: 14px 2px; }
|
|
.tl__err { color: var(--zk-danger); }
|
|
|
|
.tl__item { position: relative; padding: 0 0 20px 26px; border-left: 2px solid var(--zk-line); }
|
|
.tl__item:last-child { border-left-color: transparent; padding-bottom: 4px; }
|
|
|
|
.tl__dot {
|
|
position: absolute; left: -7px; top: 3px; width: 12px; height: 12px;
|
|
border-radius: 50%; background: var(--zk-white); border: 2px solid var(--zk-grey);
|
|
}
|
|
/* Machine work is blue, people are amber, the platform itself is grey — so a
|
|
file can be read at a glance for how much of it was done by hand. */
|
|
.tl__item--ai .tl__dot { border-color: var(--zk-blue); background: var(--zk-blue); }
|
|
.tl__item--human .tl__dot { border-color: #b5761f; background: var(--zk-white); }
|
|
.tl__item--sys .tl__dot { border-color: var(--zk-line); background: var(--zk-line); }
|
|
|
|
.tl__body { display: flex; flex-direction: column; gap: 3px; }
|
|
.tl__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; }
|
|
.tl__what { font-size: .93rem; font-weight: 500; color: var(--zk-ink); }
|
|
.tl__who {
|
|
font-size: .68rem; letter-spacing: .04em; padding: 2px 7px; border-radius: 3px; white-space: nowrap;
|
|
}
|
|
.tl__who--ai { background: var(--zk-tint-blue); color: var(--zk-blue-dark); }
|
|
.tl__who--human { background: #f7efe2; color: #7a5a12; }
|
|
.tl__who--sys { background: var(--zk-tint); color: var(--zk-muted); }
|
|
.tl__stage { font-size: .78rem; color: var(--zk-blue); }
|
|
.tl__when { font-size: .72rem; color: var(--zk-grey); }
|
|
|
|
.tl__say { margin-top: 7px; padding-left: 10px; border-left: 2px solid var(--zk-line-soft); }
|
|
.tl__saylabel {
|
|
display: block; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase;
|
|
color: var(--zk-grey); margin-bottom: 2px;
|
|
}
|
|
.tl__say p { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--zk-muted); max-width: 78ch; }
|
|
|
|
.tl__figs { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 7px; }
|
|
.tl__figs span { font-size: .8rem; color: var(--zk-ink); font-variant-numeric: tabular-nums; }
|
|
.tl__figs em { font-style: normal; font-size: .68rem; color: var(--zk-grey); text-transform: capitalize; margin-right: 4px; }
|