feat(web): add icons next to token and duration metrics in events feed

Tool/command rows show a clock icon next to the duration; agent rows
show a tokens icon next to the input/output token count. Adds left
padding between the metric column and the elapsed timestamp column so
the two values read as separate fields.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Bryan Helmkamp 2026-05-07 16:14:39 -07:00
parent 089f6befe8
commit 7f659df9ac
No known key found for this signature in database

View file

@ -14,6 +14,7 @@ import {
FunnelIcon,
MagnifyingGlassIcon,
} from "@heroicons/react/16/solid";
import { CircleStackIcon, ClockIcon } from "@heroicons/react/20/solid";
import { Marked } from "marked";
import { StageSidebar } from "../components/stage-sidebar";
@ -401,6 +402,7 @@ function EventRow({
onSelect: () => void;
}) {
const metric = turnMetric(turn);
const MetricIcon = metric == null ? null : turn.kind === "assistant" ? CircleStackIcon : ClockIcon;
return (
<button
type="button"
@ -418,10 +420,11 @@ function EventRow({
<span className="min-w-0 truncate text-sm text-fg-3">
{turnSummary(turn)}
</span>
<span className="text-right font-mono text-xs tabular-nums text-fg-muted">
<span className="inline-flex items-center justify-end gap-1.5 font-mono text-xs tabular-nums text-fg-muted">
{MetricIcon && <MetricIcon className="size-3" aria-hidden="true" />}
{metric ?? ""}
</span>
<span className="font-mono text-xs tabular-nums text-fg-muted">
<span className="pl-3 font-mono text-xs tabular-nums text-fg-muted">
{formatElapsed(turn.ts, runStart)}
</span>
</button>