hanh.tonguyen/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): standardize status/priority colors and improve text legibility

Browse Source 
Create shared status-colors.ts module as single source of truth for all
status and priority color definitions. Replace hardcoded color classes in
StatusIcon, StatusBadge, PriorityIcon, NewIssueDialog, Agents, AgentDetail,
and DesignGuide. Fix inconsistent hues (in_progress was yellow in StatusIcon
but indigo in StatusBadge, blocked was red vs amber). Bump identifier text
from text-xs to text-sm and improve MetricCard label legibility.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Forgotten
2026-02-23 19:52:43 -06:00
parent f484d454c5
commit ab9828ae95
11 changed files with 198 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
ui/src/pages/Agents.tsx
View File

@@ -9,6 +9,7 @@ import { useBreadcrumbs } from "../context/BreadcrumbContext";
import { useSidebar } from "../context/SidebarContext";
import { queryKeys } from "../lib/queryKeys";
import { StatusBadge } from "../components/StatusBadge";
import { agentStatusDot, agentStatusDotDefault } from "../lib/status-colors";
import { EntityRow } from "../components/EntityRow";
import { EmptyState } from "../components/EmptyState";
import { relativeTime, cn } from "../lib/utils";
@@ -227,19 +228,7 @@ export function Agents() {
leading={
<span className="relative flex h-2.5 w-2.5">
<span
className={`absolute inline-flex h-full w-full rounded-full ${
agent.status === "running"
? "bg-cyan-400 animate-pulse"
: agent.status === "active"
? "bg-green-400"
: agent.status === "paused"
? "bg-yellow-400"
: agent.status === "pending_approval"
? "bg-amber-400"
: agent.status === "error"
? "bg-red-400"
: "bg-neutral-400"
}`}
className={`absolute inline-flex h-full w-full rounded-full ${agentStatusDot[agent.status] ?? agentStatusDotDefault}`}
/>
</span>
}
@@ -325,18 +314,7 @@ function OrgTreeNode({
}) {
const agent = agentMap.get(node.id);
const statusColor =
node.status === "running"
? "bg-cyan-400 animate-pulse"
: node.status === "active"
? "bg-green-400"
: node.status === "paused"
? "bg-yellow-400"
: node.status === "pending_approval"
? "bg-amber-400"
: node.status === "error"
? "bg-red-400"
: "bg-neutral-400";
const statusColor = agentStatusDot[node.status] ?? agentStatusDotDefault;
return (
<div style={{ paddingLeft: depth * 24 }}>