From fbe22ae1d036fbfc1ee9766ea29fcebee199521c Mon Sep 17 00:00:00 2001
From: abccodes <abayercalvert@gmail.com>
Date: Fri, 19 Jun 2026 19:42:20 -0700
Subject: [PATCH] [aidan] fix/tidy-layout: include workflows hub in tidy and
 fit-to-view

---
 .../Dashboard/hooks/lifecycle/useDashboardCardActions.ts   | 7 ++++++-
 frontend/src/shared/state/dashboardLayoutSlice.ts          | 6 +++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useDashboardCardActions.ts b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useDashboardCardActions.ts
index 6a4a5ea3..c6f96a97 100644
--- a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useDashboardCardActions.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useDashboardCardActions.ts
@@ -123,7 +123,10 @@ export function useDashboardCardActions({
     dispatch(tidyLayout({ expandedSessionIds: currentExpanded }));
 
     const expandedSet = new Set(currentExpanded);
-    const { cards: tidied, viewCards: tidiedViews, browserCards: tidiedBrowsers } = store.getState().dashboardLayout;
+    const {
+      cards: tidied, viewCards: tidiedViews, browserCards: tidiedBrowsers,
+      workflowCards: tidiedWorkflows, workflowsHub: tidiedHub,
+    } = store.getState().dashboardLayout;
     const allRects = [
       ...Object.values(tidied).map((c) => ({
         x: c.x, y: c.y, width: c.width,
@@ -131,6 +134,8 @@ export function useDashboardCardActions({
       })),
       ...Object.values(tidiedViews).map((c) => ({ x: c.x, y: c.y, width: c.width, height: c.height })),
       ...Object.values(tidiedBrowsers).map((c) => ({ x: c.x, y: c.y, width: c.width, height: c.height })),
+      ...Object.values(tidiedWorkflows).map((c) => ({ x: c.x, y: c.y, width: c.width, height: c.height })),
+      ...(tidiedHub ? [{ x: tidiedHub.x, y: tidiedHub.y, width: tidiedHub.width, height: tidiedHub.height }] : []),
     ];
     canvasActions.fitToCards(allRects);
   }, [dispatch, canvasActions]);
diff --git a/frontend/src/shared/state/dashboardLayoutSlice.ts b/frontend/src/shared/state/dashboardLayoutSlice.ts
index e6c207a8..a51c70bf 100644
--- a/frontend/src/shared/state/dashboardLayoutSlice.ts
+++ b/frontend/src/shared/state/dashboardLayoutSlice.ts
@@ -577,7 +577,8 @@ const dashboardLayoutSlice = createSlice({
       const viewCards = Object.values(state.viewCards);
       const bCards = Object.values(state.browserCards);
       const wCards = Object.values(state.workflowCards);
-      const total = agentCards.length + viewCards.length + bCards.length + wCards.length;
+      const hub = state.workflowsHub;
+      const total = agentCards.length + viewCards.length + bCards.length + wCards.length + (hub ? 1 : 0);
       if (total === 0) return;
 
       const allItems = [
@@ -585,6 +586,7 @@ const dashboardLayoutSlice = createSlice({
         ...viewCards.map((c) => ({ kind: 'view' as const, id: c.output_id, x: c.x, y: c.y, storedW: c.width, storedH: c.height })),
         ...bCards.map((c) => ({ kind: 'browser' as const, id: c.browser_id, x: c.x, y: c.y, storedW: c.width, storedH: c.height })),
         ...wCards.map((c) => ({ kind: 'workflow' as const, id: c.workflow_id, x: c.x, y: c.y, storedW: c.width, storedH: c.height })),
+        ...(hub ? [{ kind: 'workflows-hub' as const, id: 'workflows-hub', x: hub.x, y: hub.y, storedW: hub.width, storedH: hub.height }] : []),
       ];
       allItems.sort((a, b) => a.y - b.y || a.x - b.x);
 
@@ -612,6 +614,8 @@ const dashboardLayoutSlice = createSlice({
         } else if (item.kind === 'workflow') {
           const card = state.workflowCards[item.id];
           if (card) { card.x = pos.x; card.y = pos.y; }
+        } else if (item.kind === 'workflows-hub') {
+          if (state.workflowsHub) { state.workflowsHub.x = pos.x; state.workflowsHub.y = pos.y; }
         } else {
           const card = state.browserCards[item.id];
           if (card) { card.x = pos.x; card.y = pos.y; }