From bcd4337e14d1f5c8dd52cb6174c5019bada76245 Mon Sep 17 00:00:00 2001
From: abccodes <abayercalvert@gmail.com>
Date: Tue, 23 Jun 2026 03:03:54 -0700
Subject: [PATCH] [aidan] ui/workflows: close buttons turn red on hover,
 matching the chat card

---
 .../src/app/pages/Workflows/app/RunMonitor.tsx     |  8 +++++---
 .../app/pages/Workflows/app/WorkflowsAppCard.tsx   | 14 +++++++++-----
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/pages/Workflows/app/RunMonitor.tsx b/frontend/src/app/pages/Workflows/app/RunMonitor.tsx
index 651f92f6..58cde565 100644
--- a/frontend/src/app/pages/Workflows/app/RunMonitor.tsx
+++ b/frontend/src/app/pages/Workflows/app/RunMonitor.tsx
@@ -1,6 +1,8 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
 import AgentChat from '@/app/pages/AgentChat/AgentChat';
 import { fetchRuns, controlWorkflowRun } from '@/shared/state/workflowsSlice';
 import type { Workflow, WorkflowRun } from '@/shared/state/workflowsSlice';
@@ -183,9 +185,9 @@ const RunMonitor: React.FC<Props> = ({ workflow, cardX, cardY, cardWidth, cardHe
         <span style={{ fontSize: 11, fontWeight: 600, color: headColor, background: headBg, padding: '2px 9px', borderRadius: 999, flex: 'none' }}>{headStatus}</span>
         <div style={{ flex: 1 }} />
         <span style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11.5, color: c.text.tertiary, flex: 'none' }}>{clock}</span>
-        <button onClick={close} aria-label="Close" style={{ width: 26, height: 26, borderRadius: 7, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: c.text.tertiary, background: 'transparent', border: 'none', flex: 'none' }}>
-          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 6l12 12M18 6L6 18" /></svg>
-        </button>
+        <IconButton onClick={close} aria-label="Close" size="small" sx={{ flex: 'none', color: c.text.tertiary, '&:hover': { color: c.status.error, bgcolor: `${c.status.error}14` } }}>
+          <CloseIcon fontSize="small" />
+        </IconButton>
       </div>
 
       {/* progress subhead */}
diff --git a/frontend/src/app/pages/Workflows/app/WorkflowsAppCard.tsx b/frontend/src/app/pages/Workflows/app/WorkflowsAppCard.tsx
index 4b727cd7..e4b5a32c 100644
--- a/frontend/src/app/pages/Workflows/app/WorkflowsAppCard.tsx
+++ b/frontend/src/app/pages/Workflows/app/WorkflowsAppCard.tsx
@@ -2,6 +2,9 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useAppDispatch } from '@/shared/hooks';
 import { closeWorkflowsApp, setWorkflowsHubPosition, setWorkflowsHubSize } from '@/shared/state/dashboardLayoutSlice';
 import EventRepeatIcon from '@mui/icons-material/EventRepeat';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import { useClaudeTokens } from '@/shared/styles/ThemeContext';
 import { useWC, FONT_SERIF } from './uiKit';
 import WorkflowsAppContent from './WorkflowsAppContent';
 
@@ -55,6 +58,7 @@ const WorkflowsAppCard: React.FC<Props> = ({
   onCardSelect, onDragStart, onDragMove, onDragEnd, onBringToFront,
 }) => {
   const WC = useWC();
+  const c = useClaudeTokens();
   const dispatch = useAppDispatch();
 
   const panRef = useRef({ panX, panY });
@@ -224,16 +228,16 @@ const WorkflowsAppCard: React.FC<Props> = ({
           <span style={{ fontFamily: FONT_SERIF, fontSize: 14.5, fontWeight: 500, color: WC.ink, letterSpacing: '-0.01em', lineHeight: 1, transform: 'translateY(2.5px)' }}>Workflows</span>
         </div>
         <div style={{ flex: 1 }} />
-        <div
-          role="button"
+        <IconButton
           aria-label="Close"
           data-no-drag
+          size="small"
           onClick={(e) => { e.stopPropagation(); dispatch(closeWorkflowsApp()); }}
           onPointerDown={(e) => e.stopPropagation()}
-          style={{ width: 24, height: 24, borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: WC.muted }}
+          sx={{ color: c.text.tertiary, '&:hover': { color: c.status.error, bgcolor: `${c.status.error}14` } }}
         >
-          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 6l12 12M18 6L6 18" /></svg>
-        </div>
+          <CloseIcon fontSize="small" />
+        </IconButton>
       </div>
 
       <WorkflowsAppContent />