From 667017d9ada2567b07fa9bc4bed9ef8bc20d61a7 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 10 Jun 2026 02:21:09 -0700
Subject: [PATCH] [eric] frontend: status reads as a colored dot + word, the
 filled chip box is gone from card and chat headers

---
 .../src/app/pages/AgentChat/AgentChat.tsx     | 19 +++++++------------
 .../app/pages/Dashboard/cards/AgentCard.tsx   | 19 +++++++------------
 2 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/frontend/src/app/pages/AgentChat/AgentChat.tsx b/frontend/src/app/pages/AgentChat/AgentChat.tsx
index ed3df1dd..38586457 100644
--- a/frontend/src/app/pages/AgentChat/AgentChat.tsx
+++ b/frontend/src/app/pages/AgentChat/AgentChat.tsx
@@ -2,7 +2,6 @@ import React, { useEffect, useRef, useMemo, useState, useCallback } from 'react'
 import { useNavigate, useParams } from 'react-router-dom';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
-import Chip from '@mui/material/Chip';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import TextField from '@mui/material/TextField';
@@ -970,17 +969,13 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
               <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                 <Typography noWrap sx={{ color: c.text.primary, fontWeight: 600 }}>{session.name}</Typography>
                 {!isDraft && statusStyle && (
-                  <Chip
-                    label={friendlyStatusLabel(session.status)}
-                    size="small"
-                    sx={{
-                      bgcolor: statusStyle.bg,
-                      color: statusStyle.color,
-                      fontWeight: 600,
-                      fontSize: '0.7rem',
-                      height: 20,
-                    }}
-                  />
+                  // Dot + word instead of a filled chip: one color cue, zero chrome.
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.6, flexShrink: 0 }}>
+                    <Box sx={{ width: 6, height: 6, borderRadius: '50%', bgcolor: statusStyle.color, flexShrink: 0 }} />
+                    <Typography sx={{ fontSize: '0.75rem', fontWeight: 500, color: c.text.secondary, whiteSpace: 'nowrap' }}>
+                      {friendlyStatusLabel(session.status)}
+                    </Typography>
+                  </Box>
                 )}
               </Box>
               {!isDraft && (
diff --git a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
index f693636c..008ed017 100644
--- a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
@@ -757,18 +757,13 @@ const AgentCard: React.FC<Props> = ({
             <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.95rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
               {session.name}
             </Typography>
-            <Chip
-              label={friendlyStatusLabel(session.status)}
-              size="small"
-              sx={{
-                bgcolor: statusStyle.bg,
-                color: statusStyle.color,
-                fontWeight: 600,
-                fontSize: '0.7rem',
-                height: 22,
-                flexShrink: 0,
-              }}
-            />
+            {/* Dot + word instead of a filled chip: one color cue, zero chrome. */}
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.6, flexShrink: 0 }}>
+              <Box sx={{ width: 6, height: 6, borderRadius: '50%', bgcolor: statusStyle.color, flexShrink: 0 }} />
+              <Typography sx={{ fontSize: '0.75rem', fontWeight: 500, color: c.text.secondary, whiteSpace: 'nowrap' }}>
+                {friendlyStatusLabel(session.status)}
+              </Typography>
+            </Box>
             {/* Calm, zero-click signal: the agent recalled or built up memory of
                 this site, so the user feels it getting smarter on its own. */}
             <Fade in={session.memory_recalled || session.memory_learned} timeout={{ enter: 200, exit: 220 }} unmountOnExit>