refactor(web): consolidate StatusBadge import path + flatten color ternary (BEN-56)

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() {

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,

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);

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}`}