From b0c3b8de19c73a459171ce557e4e73e2f3918ad1 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 10 Jun 2026 00:56:43 -0700
Subject: [PATCH] [eric] frontend: status chips speak plain english, working /
 needs your OK / done instead of enum values

---
 .../app/components/overlays/GlobalSearchPalette.tsx    |  3 ++-
 frontend/src/app/pages/AgentChat/AgentChat.tsx         |  3 ++-
 .../src/app/pages/Dashboard/canvas/DashboardHeader.tsx |  3 ++-
 frontend/src/app/pages/Dashboard/cards/AgentCard.tsx   |  3 ++-
 frontend/src/shared/statusLabel.ts                     | 10 ++++++++++
 5 files changed, 18 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/shared/statusLabel.ts

diff --git a/frontend/src/app/components/overlays/GlobalSearchPalette.tsx b/frontend/src/app/components/overlays/GlobalSearchPalette.tsx
index c685aff0..b9c67482 100644
--- a/frontend/src/app/components/overlays/GlobalSearchPalette.tsx
+++ b/frontend/src/app/components/overlays/GlobalSearchPalette.tsx
@@ -14,6 +14,7 @@ import { setPendingFocusAgentId } from '@/shared/state/tempStateSlice';
 import { createDashboard } from '@/shared/state/dashboardsSlice';
 import { openSettingsModal } from '@/shared/state/settingsSlice';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
+import { friendlyStatusLabel } from '@/shared/statusLabel';
 
 interface Props {
   open: boolean;
@@ -301,7 +302,7 @@ const GlobalSearchPalette: React.FC<Props> = ({ open, onClose }) => {
                 const dashName = r.dashboardId ? dashboards[r.dashboardId]?.name : null;
                 const subtitle = [
                   dashName && `in ${dashName}`,
-                  r.closedAt ? 'closed' : r.status,
+                  r.closedAt ? 'closed' : friendlyStatusLabel(r.status),
                 ].filter(Boolean).join(' · ');
                 return (
                   <ResultRow
diff --git a/frontend/src/app/pages/AgentChat/AgentChat.tsx b/frontend/src/app/pages/AgentChat/AgentChat.tsx
index b0925caf..ed3df1dd 100644
--- a/frontend/src/app/pages/AgentChat/AgentChat.tsx
+++ b/frontend/src/app/pages/AgentChat/AgentChat.tsx
@@ -17,6 +17,7 @@ import CheckIcon from '@mui/icons-material/Check';
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 import RestartAltIcon from '@mui/icons-material/RestartAlt';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
+import { friendlyStatusLabel } from '@/shared/statusLabel';
 import { openSettingsModal } from '@/shared/state/settingsSlice';
 import { API_BASE, getAuthToken } from '@/shared/config';
 import {
@@ -970,7 +971,7 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
                 <Typography noWrap sx={{ color: c.text.primary, fontWeight: 600 }}>{session.name}</Typography>
                 {!isDraft && statusStyle && (
                   <Chip
-                    label={session.status.replace('_', ' ')}
+                    label={friendlyStatusLabel(session.status)}
                     size="small"
                     sx={{
                       bgcolor: statusStyle.bg,
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardHeader.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardHeader.tsx
index b95c8ee4..8c1b4902 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardHeader.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardHeader.tsx
@@ -11,6 +11,7 @@ import type { AgentSession } from '@/shared/state/agentsSlice';
 import type { CardPosition, ViewCardPosition, BrowserCardPosition } from '@/shared/state/dashboardLayoutSlice';
 import type { Output } from '@/shared/state/outputsSlice';
 import type { CanvasActions } from '../hooks/interaction/useCanvasControls';
+import { friendlyStatusLabel } from '@/shared/statusLabel';
 
 interface DashboardHeaderProps {
   dashboardName: string | undefined;
@@ -199,7 +200,7 @@ const DashboardHeader: React.FC<DashboardHeaderProps> = ({
                     <Typography
                       sx={{ fontSize: '0.7rem', color: c.text.ghost, flexShrink: 0 }}
                     >
-                      {item.status.replace('_', ' ')}
+                      {friendlyStatusLabel(item.status)}
                     </Typography>
                   </ItemRow>
                 ))}
diff --git a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
index 8b8c19ca..f693636c 100644
--- a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
@@ -37,6 +37,7 @@ import { useOverlayScrollPassthrough } from '../hooks/interaction/useOverlayScro
 import { useStreamingMessage } from '@/shared/state/streamingSlice';
 import { isCanvasInteractionActive, onCanvasInteractionEnd } from '@/shared/canvasInteractionState';
 import { getAgentWorkTime, fmtSeconds } from '@/shared/agentWorkTime';
+import { friendlyStatusLabel } from '@/shared/statusLabel';
 
 const GoogleServiceIcon: React.FC<{ service: string; size?: number }> = ({ service, size = 16 }) => {
   if (service === 'gmail') {
@@ -757,7 +758,7 @@ const AgentCard: React.FC<Props> = ({
               {session.name}
             </Typography>
             <Chip
-              label={session.status.replace('_', ' ')}
+              label={friendlyStatusLabel(session.status)}
               size="small"
               sx={{
                 bgcolor: statusStyle.bg,
diff --git a/frontend/src/shared/statusLabel.ts b/frontend/src/shared/statusLabel.ts
new file mode 100644
index 00000000..f7a98669
--- /dev/null
+++ b/frontend/src/shared/statusLabel.ts
@@ -0,0 +1,10 @@
+/** Plain-English session status for user-facing chips; the raw enum values read as dev-speak. */
+export function friendlyStatusLabel(status: string): string {
+  switch (status) {
+    case 'running': return 'working';
+    case 'waiting_approval': return 'needs your OK';
+    case 'completed': return 'done';
+    case 'error': return 'needs attention';
+    default: return status.replace(/_/g, ' ');
+  }
+}