From 300a12a4ebfc63efeea7c29a732c11e74ff4b0f8 Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Sat, 28 Feb 2026 14:10:50 -0500
Subject: [PATCH] Refine workflow runs list: grid layout, search, CI dots,
 spacing

Use CSS grid with subgrid for guaranteed column alignment. Remove repo
name, add PR icon, move duration next to status, show CI as dot next
to PR number, add typeahead search. Reverse sort (Merge first).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/arc-web/app/data/runs.ts             |   2 +-
 apps/arc-web/app/routes/workflow-runs.tsx | 103 +++++++++++++---------
 2 files changed, 62 insertions(+), 43 deletions(-)

diff --git a/apps/arc-web/app/data/runs.ts b/apps/arc-web/app/data/runs.ts
index 0348a812f..875c7cff9 100644
--- a/apps/arc-web/app/data/runs.ts
+++ b/apps/arc-web/app/data/runs.ts
@@ -157,7 +157,7 @@ export const columns: {
 ];
 
 export function allRunsFlat(): RunWithStatus[] {
-  return columns.flatMap((col) =>
+  return [...columns].reverse().flatMap((col) =>
     col.items.map((item) => ({
       ...item,
       status: col.id,
diff --git a/apps/arc-web/app/routes/workflow-runs.tsx b/apps/arc-web/app/routes/workflow-runs.tsx
index bca224957..9666310a0 100644
--- a/apps/arc-web/app/routes/workflow-runs.tsx
+++ b/apps/arc-web/app/routes/workflow-runs.tsx
@@ -1,71 +1,90 @@
+import { useState } from "react";
+import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { allRunsFlat, ciConfig, statusColors } from "../data/runs";
-import type { CiStatus, RunWithStatus } from "../data/runs";
+import type { RunWithStatus } from "../data/runs";
 
 const runs = allRunsFlat();
 
-function CiBadge({ status }: { status: CiStatus }) {
-  const config = ciConfig[status];
+function GitPullRequestIcon({ className }: { className?: string }) {
   return (
-    <span className={`inline-flex items-center gap-1.5 font-mono text-xs ${config.text}`}>
-      <span className={`size-1.5 rounded-full ${config.dot}`} />
-      {config.label}
-    </span>
+    <svg viewBox="0 0 16 16" fill="currentColor" className={className} aria-hidden="true">
+      <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z" />
+    </svg>
   );
 }
 
 function RunRow({ run }: { run: RunWithStatus }) {
   const colors = statusColors[run.status];
   return (
-    <div className="flex items-center gap-4 rounded-lg border border-white/[0.06] bg-navy-800/80 px-4 py-3 transition-all duration-200 hover:border-white/[0.12] hover:bg-navy-800">
-      <span className="flex items-center gap-2 min-w-[80px]">
+    <div className="grid items-center rounded-lg border border-white/[0.06] bg-navy-800/80 px-4 py-3 transition-all duration-200 hover:border-white/[0.12] hover:bg-navy-800" style={{ gridColumn: "1 / -1", gridTemplateColumns: "subgrid" }}>
+      <span className="flex items-center gap-2 pr-2">
         <span className={`size-2 shrink-0 rounded-full ${colors.dot}`} />
         <span className={`text-xs font-medium ${colors.text}`}>{run.statusLabel}</span>
       </span>
 
-      <span className="font-mono text-xs font-medium text-teal-500 min-w-[110px]">
-        {run.repo}
-        {run.number != null && (
-          <span className="text-navy-600"> #{run.number}</span>
+      <span className={`font-mono text-xs pr-2 ${run.elapsedWarning ? "text-amber" : "text-navy-600"}`}>
+        {run.elapsed}
+      </span>
+
+      <span className="flex items-center gap-2 min-w-0">
+        <span className="truncate text-sm text-ice-100">{run.title}</span>
+        {run.comments != null && run.comments > 0 && (
+          <span className="inline-flex shrink-0 items-center gap-1 font-mono text-xs text-navy-600">
+            <svg viewBox="0 0 16 16" fill="currentColor" className="size-3" aria-hidden="true">
+              <path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z" />
+            </svg>
+            {run.comments}
+          </span>
         )}
       </span>
 
-      <span className="flex-1 truncate text-sm text-ice-100">{run.title}</span>
+      <span className="flex items-center justify-end gap-2 pr-4 font-mono text-xs tabular-nums">
+        {run.additions != null && <span className="text-mint">+{run.additions.toLocaleString()}</span>}
+        {run.deletions != null && <span className="text-coral">-{run.deletions.toLocaleString()}</span>}
+      </span>
 
-      {run.additions != null && run.deletions != null && (
-        <span className="hidden sm:flex items-center gap-2 font-mono text-xs">
-          <span className="text-mint">+{run.additions.toLocaleString()}</span>
-          <span className="text-coral">-{run.deletions.toLocaleString()}</span>
-        </span>
-      )}
-
-      {run.ci != null && (
-        <span className="hidden md:block min-w-[120px]">
-          <CiBadge status={run.ci} />
-        </span>
-      )}
-
-      {run.comments != null && run.comments > 0 && (
-        <span className="hidden sm:inline-flex items-center gap-1 font-mono text-xs text-navy-600">
-          <svg viewBox="0 0 16 16" fill="currentColor" className="size-3" aria-hidden="true">
-            <path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z" />
-          </svg>
-          {run.comments}
-        </span>
-      )}
-
-      <span className={`font-mono text-xs min-w-[60px] text-right ${run.elapsedWarning ? "text-amber" : "text-navy-600"}`}>
-        {run.elapsed}
+      <span className="inline-flex items-center justify-end gap-1.5 font-mono text-xs text-navy-600">
+        {run.number != null && (
+          <>
+            <GitPullRequestIcon className="size-3" />
+            #{run.number}
+            {run.ci != null && <span className={`size-1.5 rounded-full ${ciConfig[run.ci].dot}`} />}
+          </>
+        )}
       </span>
     </div>
   );
 }
 
 export default function WorkflowRuns() {
+  const [query, setQuery] = useState("");
+  const filtered = runs.filter(
+    (r) =>
+      r.title.toLowerCase().includes(query.toLowerCase()) ||
+      r.statusLabel.toLowerCase().includes(query.toLowerCase()) ||
+      (r.number != null && `#${r.number}`.includes(query)),
+  );
+
   return (
-    <div className="space-y-2">
-      {runs.map((run) => (
-        <RunRow key={`${run.repo}-${run.number ?? run.title}`} run={run} />
-      ))}
+    <div className="space-y-4">
+      <div className="relative">
+        <MagnifyingGlassIcon className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-navy-600" />
+        <input
+          type="text"
+          placeholder="Search runs..."
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          className="w-full rounded-lg border border-white/[0.06] bg-navy-800/80 py-2 pl-9 pr-3 text-sm text-ice-100 placeholder-navy-600 outline-none transition-colors focus:border-teal-500/40 focus:ring-0"
+        />
+      </div>
+      <div className="grid gap-2" style={{ gridTemplateColumns: "auto 5rem 1fr 8rem auto" }}>
+        {filtered.map((run) => (
+          <RunRow key={`${run.repo}-${run.number ?? run.title}`} run={run} />
+        ))}
+        {filtered.length === 0 && (
+          <p className="py-8 text-center text-sm text-navy-600">No runs match "{query}"</p>
+        )}
+      </div>
     </div>
   );
 }