From 7f659df9acdb2eb33735a4de04f7062dffa0345e Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Thu, 7 May 2026 16:14:39 -0700
Subject: [PATCH] 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>
---
 apps/fabro-web/app/routes/run-stages.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/fabro-web/app/routes/run-stages.tsx b/apps/fabro-web/app/routes/run-stages.tsx
index d8991a604..b3396d01d 100644
--- a/apps/fabro-web/app/routes/run-stages.tsx
+++ b/apps/fabro-web/app/routes/run-stages.tsx
@@ -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>