From e4fbe4482a97cedffce37a97241e16aa8fad5ba8 Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Thu, 7 May 2026 08:57:49 -0700
Subject: [PATCH] feat(web): icon + workflow in run header metadata

Prefix each run header chip with its icon (folder for repo, stack for
workflow, clock for elapsed) and surface the workflow name alongside
the repo so it's discoverable from the detail header.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/fabro-web/app/routes/run-detail.tsx | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/apps/fabro-web/app/routes/run-detail.tsx b/apps/fabro-web/app/routes/run-detail.tsx
index cdd63525d..a718eac52 100644
--- a/apps/fabro-web/app/routes/run-detail.tsx
+++ b/apps/fabro-web/app/routes/run-detail.tsx
@@ -4,7 +4,14 @@ import {
   useState,
   type CSSProperties,
 } from "react";
-import { ArrowPathIcon, ChevronDownIcon, ChevronRightIcon } from "@heroicons/react/20/solid";
+import {
+  ArrowPathIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  ClockIcon,
+  FolderIcon,
+  RectangleStackIcon,
+} from "@heroicons/react/20/solid";
 import { Link, Outlet, useLocation, useMatches } from "react-router";
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
 
@@ -234,9 +241,19 @@ export default function RunDetail({ params }: { params: { id: string } }) {
               <span className={`size-2 rounded-full ${run.statusDot}`} />
               <span className={`font-medium ${run.statusText}`}>{run.statusLabel}</span>
             </span>
-            <span className="font-mono text-xs text-fg-muted">{run.repo}</span>
+            <span className="flex items-center gap-1 font-mono text-xs text-fg-muted">
+              <FolderIcon className="size-3" aria-hidden="true" />
+              {run.repo}
+            </span>
+            <span className="flex items-center gap-1 font-mono text-xs text-fg-muted">
+              <RectangleStackIcon className="size-3" aria-hidden="true" />
+              {run.workflow}
+            </span>
             {run.elapsed && (
-              <span className="font-mono text-xs text-fg-muted">{run.elapsed}</span>
+              <span className="flex items-center gap-1 font-mono text-xs text-fg-muted">
+                <ClockIcon className="size-3" aria-hidden="true" />
+                {run.elapsed}
+              </span>
             )}
           </div>
         </div>