diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx index 99a6135a..6e5badb5 100644 --- a/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx +++ b/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx @@ -1,5 +1,6 @@ import React, { type RefObject } from 'react'; import Box from '@mui/material/Box'; +import { useAppSelector } from '@/shared/hooks'; import DashboardToolbar from '../DashboardToolbar'; import CanvasControls from '../controls/CanvasControls'; import CardSearchPalette from '../controls/CardSearchPalette'; @@ -80,6 +81,7 @@ const DashboardOverlays: React.FC = ({ toolbarPrefill, toolbarPrefillMode, }) => { + const missedRunsCard = useAppSelector((s) => s.dashboardLayout.missedRunsCard); return ( <> {/* Floating bottom toolbar */} @@ -130,6 +132,7 @@ const DashboardOverlays: React.FC = ({ browserCards, workflowCards, workflowsHub, + missedRunsCard, }} onMinimapPan={(px, py) => canvas.actions.setState({ panX: px, panY: py, zoom: canvas.zoom })} /> diff --git a/frontend/src/app/pages/Dashboard/controls/Minimap.tsx b/frontend/src/app/pages/Dashboard/controls/Minimap.tsx index 4bdee3b1..3b2b64eb 100644 --- a/frontend/src/app/pages/Dashboard/controls/Minimap.tsx +++ b/frontend/src/app/pages/Dashboard/controls/Minimap.tsx @@ -1,6 +1,6 @@ import React, { useRef, useCallback, useMemo } from 'react'; import { useClaudeTokens } from '@/shared/styles/ThemeContext'; -import type { CardPosition, ViewCardPosition, BrowserCardPosition, WorkflowCardPosition, WorkflowsHubPosition } from '@/shared/state/dashboardLayoutSlice'; +import type { CardPosition, ViewCardPosition, BrowserCardPosition, WorkflowCardPosition, WorkflowsHubPosition, MissedRunsCardPosition } from '@/shared/state/dashboardLayoutSlice'; const MINIMAP_W = 200; const MINIMAP_H = 140; @@ -16,6 +16,7 @@ export interface MinimapProps { browserCards: Record; workflowCards: Record; workflowsHub: WorkflowsHubPosition | null; + missedRunsCard: MissedRunsCardPosition | null; onPan: (panX: number, panY: number) => void; } @@ -24,12 +25,12 @@ interface CardRect { y: number; width: number; height: number; - type: 'agent' | 'view' | 'browser' | 'workflow' | 'workflows-hub'; + type: 'agent' | 'view' | 'browser' | 'workflow' | 'workflows-hub' | 'missed-runs'; } const Minimap: React.FC = ({ panX, panY, zoom, viewportRef, - cards, viewCards, browserCards, workflowCards, workflowsHub, + cards, viewCards, browserCards, workflowCards, workflowsHub, missedRunsCard, onPan, }) => { const c = useClaudeTokens(); @@ -59,8 +60,17 @@ const Minimap: React.FC = ({ type: 'workflows-hub', }); } + if (missedRunsCard) { + result.push({ + x: missedRunsCard.x, + y: missedRunsCard.y, + width: missedRunsCard.width, + height: missedRunsCard.height, + type: 'missed-runs', + }); + } return result; - }, [cards, viewCards, browserCards, workflowCards, workflowsHub]); + }, [cards, viewCards, browserCards, workflowCards, workflowsHub, missedRunsCard]); const layout = useMemo(() => { const vp = viewportRef.current; @@ -149,6 +159,7 @@ const Minimap: React.FC = ({ case 'browser': return c.status.success; case 'workflow': return c.status.warning; case 'workflows-hub': return c.status.warning; + case 'missed-runs': return c.status.warning; } };