From ed43937a5eb0c6b1af5d06f710a27583e73d0652 Mon Sep 17 00:00:00 2001
From: abccodes <abayercalvert@gmail.com>
Date: Fri, 19 Jun 2026 18:55:20 -0700
Subject: [PATCH] [aidan] fix/workflows-hub: load workflows on hub mount so
 calendar fills at launch

---
 .../src/app/pages/Dashboard/canvas/DashboardCanvas.tsx   | 1 +
 .../app/pages/Dashboard/canvas/DashboardCardLayer.tsx    | 3 +++
 frontend/src/app/pages/Workflows/WorkflowsHubCard.tsx    | 9 ++++++++-
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
index a449a853..06821c35 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
@@ -244,6 +244,7 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
             {/* Tether lines between branched cards */}
             <TetherLayer tethers={tethers} c={c} />
             <DashboardCardLayer
+              dashboardId={dashboardId}
               cards={cards}
               viewCards={viewCards}
               browserCards={browserCards}
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCardLayer.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCardLayer.tsx
index 32028713..2bcf6641 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCardLayer.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCardLayer.tsx
@@ -30,6 +30,7 @@ type GlowingAgentCard = { sourceId: string; fading: boolean; sourceYRatio?: numb
 type Direction = 'left' | 'right' | 'up' | 'down';
 
 interface DashboardCardLayerProps {
+  dashboardId: string;
   cards: Record<string, CardPosition>;
   viewCards: Record<string, ViewCardPosition>;
   browserCards: Record<string, BrowserCardPosition>;
@@ -66,6 +67,7 @@ interface DashboardCardLayerProps {
 }
 
 const DashboardCardLayer: React.FC<DashboardCardLayerProps> = ({
+  dashboardId,
   cards,
   viewCards,
   browserCards,
@@ -270,6 +272,7 @@ const DashboardCardLayer: React.FC<DashboardCardLayerProps> = ({
       ))}
       {workflowsHub && (
         <WorkflowsHubCard
+          dashboardId={dashboardId}
           cardX={workflowsHub.x}
           cardY={workflowsHub.y}
           cardWidth={workflowsHub.width}
diff --git a/frontend/src/app/pages/Workflows/WorkflowsHubCard.tsx b/frontend/src/app/pages/Workflows/WorkflowsHubCard.tsx
index e2bef8dd..db6a9bc2 100644
--- a/frontend/src/app/pages/Workflows/WorkflowsHubCard.tsx
+++ b/frontend/src/app/pages/Workflows/WorkflowsHubCard.tsx
@@ -20,7 +20,7 @@ import {
   setWorkflowsHubPosition,
   setWorkflowsHubSize,
 } from '@/shared/state/dashboardLayoutSlice';
-import { openWorkflowCard, createWorkflow, fetchPausedState, setPausedAll, updateWorkflow, deleteWorkflow, runWorkflowNow } from '@/shared/state/workflowsSlice';
+import { openWorkflowCard, createWorkflow, fetchWorkflows, fetchPausedState, setPausedAll, updateWorkflow, deleteWorkflow, runWorkflowNow } from '@/shared/state/workflowsSlice';
 import type { Workflow } from '@/shared/state/workflowsSlice';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
@@ -57,6 +57,7 @@ const HANDLE_DEFS: { dir: ResizeDir; sx: Record<string, any> }[] = [
 ];
 
 interface Props {
+  dashboardId: string;
   cardX: number;
   cardY: number;
   cardWidth: number;
@@ -126,6 +127,7 @@ function TimeSavedBadge() {
 }
 
 const WorkflowsHubCard: React.FC<Props> = ({
+  dashboardId,
   cardX, cardY, cardWidth, cardHeight, cardZOrder = 0,
   zoom = 1, panX = 0, panY = 0,
   isSelected = false, isHighlighted = false, multiDragDelta = null,
@@ -138,6 +140,11 @@ const WorkflowsHubCard: React.FC<Props> = ({
   const defaultModel = useAppSelector((s) => s.settings.data.default_model);
 
   useEffect(() => { dispatch(fetchPausedState()); }, [dispatch]);
+  // The hub is the signal "user is looking at workflows now", so load them
+  // eagerly here instead of waiting on the dashboard's deferred idle fetch
+  // (which left the calendar blank for ~2s). The thunk's !loading condition
+  // dedups against that idle dispatch.
+  useEffect(() => { dispatch(fetchWorkflows(dashboardId)); }, [dashboardId, dispatch]);
 
   const togglePaused = useCallback(() => {
     dispatch(setPausedAll(!paused));