From dcd8df0570bf5b4e91753f932c63754bccd9bc72 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 6 May 2026 18:17:47 +0000
Subject: [PATCH] refactor(web): consolidate StatusBadge import path + flatten
 color ternary (BEN-56)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`Dashboard.tsx` re-exported `StatusBadge` from `./shared.js` solely to support
RunDetail.tsx + Search.tsx importing it from there. Two import paths for one
helper is a DRY hazard. Make every consumer import from `./shared.js` and
drop the re-export.

While in `shared.tsx`, replace the 7-deep nested ternary in StatusBadge with
a `STATUS_BADGE_COLORS` lookup map + default — same behaviour, easier to
extend with a new run status.
---
 src/web/Dashboard.tsx |  2 --
 src/web/RunDetail.tsx |  2 +-
 src/web/Search.tsx    |  2 +-
 src/web/shared.tsx    | 26 ++++++++++++--------------
 4 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/src/web/Dashboard.tsx b/src/web/Dashboard.tsx
index f22b71c..94316c4 100644
--- a/src/web/Dashboard.tsx
+++ b/src/web/Dashboard.tsx
@@ -20,8 +20,6 @@ import { ErrorFeed } from "./ErrorFeed.js";
 import { SettingsPanel } from "./SettingsPanel.js";
 import { StatusBadge, formatTs } from "./shared.js";
 
-export { StatusBadge } from "./shared.js";
-
 type LoadState = { tag: "loading" } | { tag: "ready" } | { tag: "error"; message: string };
 
 export function Dashboard() {
diff --git a/src/web/RunDetail.tsx b/src/web/RunDetail.tsx
index 8ea575a..72ab018 100644
--- a/src/web/RunDetail.tsx
+++ b/src/web/RunDetail.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { fetchRun, type ApiEvent, type ApiRun, type ApiRunDetail, type ApiTurn } from "./api.js";
-import { StatusBadge } from "./Dashboard.js";
+import { StatusBadge } from "./shared.js";
 import { useEventStream } from "./useEventStream.js";
 import {
   ASSISTANT_LINE_THRESHOLD,
diff --git a/src/web/Search.tsx b/src/web/Search.tsx
index 2b9d8a5..74a9beb 100644
--- a/src/web/Search.tsx
+++ b/src/web/Search.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { searchRuns, type ApiSearchMatch } from "./api.js";
-import { StatusBadge } from "./Dashboard.js";
+import { StatusBadge } from "./shared.js";
 
 export function Search({ query }: { query: string }) {
   const [input, setInput] = useState(query);
diff --git a/src/web/shared.tsx b/src/web/shared.tsx
index 7ed7747..1d35eff 100644
--- a/src/web/shared.tsx
+++ b/src/web/shared.tsx
@@ -1,18 +1,16 @@
+const STATUS_BADGE_COLORS: Record<string, string> = {
+  completed: "bg-emerald-500/10 text-emerald-300",
+  running: "bg-cyan-500/10 text-cyan-300",
+  max_turns: "bg-amber-500/10 text-amber-300",
+  failed: "bg-rose-500/10 text-rose-300",
+  rate_limited: "bg-fuchsia-500/10 text-fuchsia-300",
+  cancelled: "bg-slate-500/10 text-slate-300",
+};
+
+const STATUS_BADGE_DEFAULT_COLOR = "bg-slate-500/10 text-slate-300";
+
 export function StatusBadge({ status }: { status: string }) {
-  const color =
-    status === "completed"
-      ? "bg-emerald-500/10 text-emerald-300"
-      : status === "running"
-        ? "bg-cyan-500/10 text-cyan-300"
-        : status === "max_turns"
-          ? "bg-amber-500/10 text-amber-300"
-          : status === "failed"
-            ? "bg-rose-500/10 text-rose-300"
-            : status === "rate_limited"
-              ? "bg-fuchsia-500/10 text-fuchsia-300"
-              : status === "cancelled"
-                ? "bg-slate-500/10 text-slate-300"
-                : "bg-slate-500/10 text-slate-300";
+  const color = STATUS_BADGE_COLORS[status] ?? STATUS_BADGE_DEFAULT_COLOR;
   return (
     <span
       className={`inline-flex items-center gap-1 rounded px-2 py-0.5 text-xs font-medium ${color}`}