From 707054b70f3701c2c3ef7ecb99748cea65212481 Mon Sep 17 00:00:00 2001
From: AnrokX <192667251+AnrokX@users.noreply.github.com>
Date: Thu, 12 Mar 2026 12:18:51 -0600
Subject: [PATCH 01/16] fix: remove max-width cap on dashboard so it fills
 ultrawide screens

The dashboard-wrapper had max-width: 1800px with margin: 0 auto,
causing large gaps on both sides of ultrawide displays.
---
 client/styles.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/styles.css b/client/styles.css
index 7ba0e134..1f4c9df4 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -14478,8 +14478,8 @@ body.dependency-onboarding-active #dependency-setup-modal {
 
 /* Dashboard Layout */
 .dashboard-wrapper {
-  max-width: 1800px;
-  margin: 0 auto;
+  max-width: none;
+  margin: 0;
   padding: 0 var(--space-lg) var(--space-lg);
   display: flex;
   flex-direction: column;

From 9b812c0055d1e17c8da8fda804a148ac03e50c26 Mon Sep 17 00:00:00 2001
From: AnrokX <192667251+AnrokX@users.noreply.github.com>
Date: Thu, 12 Mar 2026 12:22:06 -0600
Subject: [PATCH 02/16] fix: make dashboard components adapt to viewport with
 no scrolling

- Remove overflow-y: auto from left and right content columns
- Make bento sections and workspace grid flexible/shrinkable
- Right sidebar shrinks from 420px down to 200px on smaller screens
- Workspace cards use min() to shrink below 260px when needed
- Running services grid no longer scrolls independently
- Responsive breakpoints keep two-column layout longer
---
 client/styles.css | 34 ++++++++++++++++++++++++++--------
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/client/styles.css b/client/styles.css
index 1f4c9df4..0e21a6f2 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -14497,7 +14497,7 @@ body.dependency-onboarding-active #dependency-setup-modal {
 
 .dashboard-main-content {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 420px;
+  grid-template-columns: minmax(0, 1fr) minmax(200px, 420px);
   gap: var(--space-lg);
   flex: 1;
   min-height: 0;
@@ -14509,8 +14509,8 @@ body.dependency-onboarding-active #dependency-setup-modal {
   flex-direction: column;
   gap: var(--space-md);
   height: 100%;
-  overflow-y: auto;
-  scrollbar-width: thin;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .dashboard-content-right {
@@ -14518,8 +14518,8 @@ body.dependency-onboarding-active #dependency-setup-modal {
   flex-direction: column;
   gap: var(--space-md);
   height: 100%;
-  overflow-y: auto;
-  scrollbar-width: thin;
+  min-height: 0;
+  overflow: hidden;
 }
 
 /* Create Workspace Banner */
@@ -14577,7 +14577,7 @@ body.dependency-onboarding-active #dependency-setup-modal {
 /* Workspace Grid */
 .bento-workspace-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
   gap: var(--space-md);
 }
 
@@ -14678,8 +14678,8 @@ body.dependency-onboarding-active #dependency-setup-modal {
   flex-direction: column;
   gap: var(--space-sm);
   flex: 1;
-  overflow-y: auto;
-  scrollbar-width: thin;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .port-dashboard-card {
@@ -14741,8 +14741,26 @@ body.dependency-onboarding-active #dependency-setup-modal {
   border: 1px solid var(--border-color);
 }
 
+.dashboard-bento-section {
+  min-height: 0;
+  overflow: hidden;
+  flex: 1;
+}
+
+.dashboard-bento-section .bento-workspace-grid {
+  min-height: 0;
+  overflow: hidden;
+}
+
 @media (max-width: 1200px) {
+  .dashboard-main-content {
+    grid-template-columns: minmax(0, 1fr) minmax(160px, 280px);
+  }
+}
+
+@media (max-width: 768px) {
   .dashboard-main-content {
     grid-template-columns: 1fr;
+    grid-template-rows: 1fr auto;
   }
 }

From 7bc21cae27cb1d72068f26cb8a2ead14acafaf76 Mon Sep 17 00:00:00 2001
From: AnrokX <192667251+AnrokX@users.noreply.github.com>
Date: Thu, 12 Mar 2026 12:31:12 -0600
Subject: [PATCH 03/16] fix: make dashboard components shrink to fit viewport
 instead of clipping

Apply proper CSS flex/grid shrinking chain so all dashboard sections
resize proportionally to fit the screen:

- Use flex: 1 1 0% (not flex: 1) so flex-basis starts at 0
- Add min-height: 0 at every nesting level to allow shrinking
- Use grid-auto-rows: minmax(0, 1fr) so grid rows shrink
- Remove overflow: hidden from structural containers (only on leaf cards)
- Make bento sections, workspace grid, and port cards all shrinkable
---
 client/styles.css | 34 ++++++++++++++++++++--------------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/client/styles.css b/client/styles.css
index 0e21a6f2..00b485db 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -14499,27 +14499,22 @@ body.dependency-onboarding-active #dependency-setup-modal {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(200px, 420px);
   gap: var(--space-lg);
-  flex: 1;
+  flex: 1 1 0%;
   min-height: 0;
-  overflow: hidden;
 }
 
 .dashboard-content-left {
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
-  height: 100%;
   min-height: 0;
-  overflow: hidden;
 }
 
 .dashboard-content-right {
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
-  height: 100%;
   min-height: 0;
-  overflow: hidden;
 }
 
 /* Create Workspace Banner */
@@ -14532,8 +14527,9 @@ body.dependency-onboarding-active #dependency-setup-modal {
   border: 1px solid var(--border-color);
   border-radius: 10px;
   padding: 14px 16px;
-  flex-shrink: 0;
+  flex-shrink: 1;
   align-self: flex-start;
+  min-height: 0;
 }
 
 .dashboard-create-title {
@@ -14566,6 +14562,8 @@ body.dependency-onboarding-active #dependency-setup-modal {
   padding: var(--space-md);
   box-shadow: var(--shadow-soft);
   transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .dashboard-bento-card:hover {
@@ -14578,7 +14576,9 @@ body.dependency-onboarding-active #dependency-setup-modal {
 .bento-workspace-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
+  grid-auto-rows: minmax(0, 1fr);
   gap: var(--space-md);
+  min-height: 0;
 }
 
 /* Workspace Cards */
@@ -14589,6 +14589,7 @@ body.dependency-onboarding-active #dependency-setup-modal {
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  min-height: 0;
   transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
 }
 
@@ -14619,7 +14620,9 @@ body.dependency-onboarding-active #dependency-setup-modal {
 
 .bento-workspace-card .workspace-card-body {
   padding: 4px 14px 10px 14px;
-  flex: 1;
+  flex: 1 1 0%;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .bento-workspace-card .workspace-info h3 {
@@ -14669,7 +14672,7 @@ body.dependency-onboarding-active #dependency-setup-modal {
 
 /* Running Services - bigger container */
 .ports-dashboard-section {
-  flex: 1;
+  flex: 1 1 0%;
   min-height: 0;
 }
 
@@ -14677,9 +14680,8 @@ body.dependency-onboarding-active #dependency-setup-modal {
   display: flex;
   flex-direction: column;
   gap: var(--space-sm);
-  flex: 1;
+  flex: 1 1 0%;
   min-height: 0;
-  overflow: hidden;
 }
 
 .port-dashboard-card {
@@ -14692,6 +14694,9 @@ body.dependency-onboarding-active #dependency-setup-modal {
   border-left: 4px solid var(--border-color);
   cursor: pointer;
   transition: all 0.2s;
+  flex-shrink: 1;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .port-dashboard-card:hover {
@@ -14742,14 +14747,15 @@ body.dependency-onboarding-active #dependency-setup-modal {
 }
 
 .dashboard-bento-section {
+  flex: 1 1 0%;
   min-height: 0;
-  overflow: hidden;
-  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 .dashboard-bento-section .bento-workspace-grid {
+  flex: 1 1 0%;
   min-height: 0;
-  overflow: hidden;
 }
 
 @media (max-width: 1200px) {

From 884c7712bd21c6c69ddf8f00240c5abb561d00f1 Mon Sep 17 00:00:00 2001
From: AnrokX <192667251+AnrokX@users.noreply.github.com>
Date: Thu, 12 Mar 2026 12:36:25 -0600
Subject: [PATCH 04/16] fix: simplify dashboard responsive layout - zoom to
 shrink on smaller screens

Revert the overcomplicated flex/grid shrinking approach. Instead:
- Restore original layout styles that work well at full size
- Use CSS zoom to scale down the entire dashboard on smaller screens
- 85% at <=1200px, 75% at <=900px, 60% at <=600px
- No clipping, no hidden content, everything just gets smaller
---
 client/styles.css | 69 +++++++++++++++++++++--------------------------
 1 file changed, 30 insertions(+), 39 deletions(-)

diff --git a/client/styles.css b/client/styles.css
index 00b485db..2bd4c7e8 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -14486,7 +14486,7 @@ body.dependency-onboarding-active #dependency-setup-modal {
   color: #fff;
   gap: var(--space-sm);
   height: 100%;
-  overflow: hidden;
+  overflow: auto;
 }
 
 .dashboard-header-modern {
@@ -14497,9 +14497,9 @@ body.dependency-onboarding-active #dependency-setup-modal {
 
 .dashboard-main-content {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(200px, 420px);
+  grid-template-columns: minmax(0, 1fr) 420px;
   gap: var(--space-lg);
-  flex: 1 1 0%;
+  flex: 1;
   min-height: 0;
 }
 
@@ -14507,14 +14507,18 @@ body.dependency-onboarding-active #dependency-setup-modal {
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
-  min-height: 0;
+  height: 100%;
+  overflow-y: auto;
+  scrollbar-width: thin;
 }
 
 .dashboard-content-right {
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
-  min-height: 0;
+  height: 100%;
+  overflow-y: auto;
+  scrollbar-width: thin;
 }
 
 /* Create Workspace Banner */
@@ -14527,9 +14531,8 @@ body.dependency-onboarding-active #dependency-setup-modal {
   border: 1px solid var(--border-color);
   border-radius: 10px;
   padding: 14px 16px;
-  flex-shrink: 1;
+  flex-shrink: 0;
   align-self: flex-start;
-  min-height: 0;
 }
 
 .dashboard-create-title {
@@ -14562,8 +14565,6 @@ body.dependency-onboarding-active #dependency-setup-modal {
   padding: var(--space-md);
   box-shadow: var(--shadow-soft);
   transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
-  min-height: 0;
-  overflow: hidden;
 }
 
 .dashboard-bento-card:hover {
@@ -14575,10 +14576,8 @@ body.dependency-onboarding-active #dependency-setup-modal {
 /* Workspace Grid */
 .bento-workspace-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
-  grid-auto-rows: minmax(0, 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
   gap: var(--space-md);
-  min-height: 0;
 }
 
 /* Workspace Cards */
@@ -14589,7 +14588,6 @@ body.dependency-onboarding-active #dependency-setup-modal {
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  min-height: 0;
   transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
 }
 
@@ -14620,9 +14618,7 @@ body.dependency-onboarding-active #dependency-setup-modal {
 
 .bento-workspace-card .workspace-card-body {
   padding: 4px 14px 10px 14px;
-  flex: 1 1 0%;
-  min-height: 0;
-  overflow: hidden;
+  flex: 1;
 }
 
 .bento-workspace-card .workspace-info h3 {
@@ -14672,7 +14668,7 @@ body.dependency-onboarding-active #dependency-setup-modal {
 
 /* Running Services - bigger container */
 .ports-dashboard-section {
-  flex: 1 1 0%;
+  flex: 1;
   min-height: 0;
 }
 
@@ -14680,8 +14676,9 @@ body.dependency-onboarding-active #dependency-setup-modal {
   display: flex;
   flex-direction: column;
   gap: var(--space-sm);
-  flex: 1 1 0%;
-  min-height: 0;
+  flex: 1;
+  overflow-y: auto;
+  scrollbar-width: thin;
 }
 
 .port-dashboard-card {
@@ -14694,9 +14691,6 @@ body.dependency-onboarding-active #dependency-setup-modal {
   border-left: 4px solid var(--border-color);
   cursor: pointer;
   transition: all 0.2s;
-  flex-shrink: 1;
-  min-height: 0;
-  overflow: hidden;
 }
 
 .port-dashboard-card:hover {
@@ -14746,27 +14740,24 @@ body.dependency-onboarding-active #dependency-setup-modal {
   border: 1px solid var(--border-color);
 }
 
-.dashboard-bento-section {
-  flex: 1 1 0%;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.dashboard-bento-section .bento-workspace-grid {
-  flex: 1 1 0%;
-  min-height: 0;
-}
-
+/* Scale down dashboard on smaller screens */
 @media (max-width: 1200px) {
   .dashboard-main-content {
-    grid-template-columns: minmax(0, 1fr) minmax(160px, 280px);
+    grid-template-columns: 1fr;
+  }
+  .dashboard-wrapper {
+    zoom: 0.85;
   }
 }
 
-@media (max-width: 768px) {
-  .dashboard-main-content {
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr auto;
+@media (max-width: 900px) {
+  .dashboard-wrapper {
+    zoom: 0.75;
+  }
+}
+
+@media (max-width: 600px) {
+  .dashboard-wrapper {
+    zoom: 0.6;
   }
 }

From 745c4685fe4bd9303ae4a238cde34a3eac2d032d Mon Sep 17 00:00:00 2001
From: AnrokX <192667251+AnrokX@users.noreply.github.com>
Date: Thu, 12 Mar 2026 12:50:57 -0600
Subject: [PATCH 05/16] fix: improve dashboard modal responsiveness

---
 client/styles.css | 86 +++++++++++++++++++++++++++++++----------------
 1 file changed, 57 insertions(+), 29 deletions(-)

diff --git a/client/styles.css b/client/styles.css
index 2bd4c7e8..40a02580 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -7681,8 +7681,10 @@ body.dependency-onboarding-active #dependency-setup-modal {
   bottom: 0;
   background: var(--bg-primary);
   z-index: 1000;
-  padding: 2rem;
+  padding: clamp(0.75rem, 2vw, 2rem);
+  box-sizing: border-box;
   overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .dashboard-topbar {
@@ -14317,7 +14319,7 @@ body.dependency-onboarding-active #dependency-setup-modal {
 
 .bento-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
   gap: var(--space-md);
 }
 
@@ -14478,15 +14480,16 @@ body.dependency-onboarding-active #dependency-setup-modal {
 
 /* Dashboard Layout */
 .dashboard-wrapper {
-  max-width: none;
-  margin: 0;
-  padding: 0 var(--space-lg) var(--space-lg);
+  width: 100%;
+  max-width: 1520px;
+  margin: 0 auto;
+  padding: 0 0 var(--space-lg);
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   color: #fff;
-  gap: var(--space-sm);
-  height: 100%;
-  overflow: auto;
+  gap: var(--space-md);
+  min-height: 100%;
 }
 
 .dashboard-header-modern {
@@ -14497,28 +14500,23 @@ body.dependency-onboarding-active #dependency-setup-modal {
 
 .dashboard-main-content {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 420px;
+  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
   gap: var(--space-lg);
-  flex: 1;
-  min-height: 0;
+  align-items: start;
 }
 
 .dashboard-content-left {
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
-  height: 100%;
-  overflow-y: auto;
-  scrollbar-width: thin;
+  min-width: 0;
 }
 
 .dashboard-content-right {
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
-  height: 100%;
-  overflow-y: auto;
-  scrollbar-width: thin;
+  min-width: 0;
 }
 
 /* Create Workspace Banner */
@@ -14576,7 +14574,7 @@ body.dependency-onboarding-active #dependency-setup-modal {
 /* Workspace Grid */
 .bento-workspace-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
   gap: var(--space-md);
 }
 
@@ -14676,9 +14674,6 @@ body.dependency-onboarding-active #dependency-setup-modal {
   display: flex;
   flex-direction: column;
   gap: var(--space-sm);
-  flex: 1;
-  overflow-y: auto;
-  scrollbar-width: thin;
 }
 
 .port-dashboard-card {
@@ -14740,24 +14735,57 @@ body.dependency-onboarding-active #dependency-setup-modal {
   border: 1px solid var(--border-color);
 }
 
-/* Scale down dashboard on smaller screens */
+/* Reflow dashboard on smaller screens instead of shrinking everything */
 @media (max-width: 1200px) {
   .dashboard-main-content {
-    grid-template-columns: 1fr;
-  }
-  .dashboard-wrapper {
-    zoom: 0.85;
+    grid-template-columns: minmax(0, 1fr);
   }
 }
 
 @media (max-width: 900px) {
-  .dashboard-wrapper {
-    zoom: 0.75;
+  .dashboard-title-group {
+    align-items: flex-start;
+  }
+
+  .dashboard-title-group h1 {
+    font-size: 1.4rem;
+  }
+
+  .dashboard-topbar {
+    flex-wrap: wrap;
+    align-items: flex-start;
   }
 }
 
 @media (max-width: 600px) {
   .dashboard-wrapper {
-    zoom: 0.6;
+    padding-bottom: var(--space-md);
+  }
+
+  .dashboard-title-group {
+    gap: var(--space-sm);
+  }
+
+  .dashboard-title-icon {
+    width: 40px;
+    height: 40px;
+  }
+
+  .dashboard-title-group h1 {
+    font-size: 1.25rem;
+  }
+
+  .dashboard-title-group p {
+    font-size: 0.9rem;
+  }
+
+  .bento-grid,
+  .bento-workspace-grid,
+  .workspace-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .dashboard-wrapper {
+    gap: var(--space-sm);
   }
 }

From a0263fd4db876614496dff52ba5bc50b07087f04 Mon Sep 17 00:00:00 2001
From: AnrokX <192667251+AnrokX@users.noreply.github.com>
Date: Thu, 12 Mar 2026 13:21:29 -0600
Subject: [PATCH 06/16] fix: make dashboard adapt without overflow

---
 client/dashboard.js | 177 +++++++++++++++++++++------
 client/styles.css   | 289 ++++++++++++++++++++++++++++++++++++++------
 2 files changed, 393 insertions(+), 73 deletions(-)

diff --git a/client/dashboard.js b/client/dashboard.js
index 5f21d6c5..7258796f 100644
--- a/client/dashboard.js
+++ b/client/dashboard.js
@@ -9,6 +9,9 @@ class Dashboard {
     this.quickLinks = null;
     this._escHandler = null;
     this._projectLaunchInFlight = false;
+    this._resizeHandler = null;
+    this._layoutMode = 'desktop';
+    this.compactTab = 'workspaces';
   }
 
 	  async show() {
@@ -64,6 +67,16 @@ class Dashboard {
       document.removeEventListener('keydown', this._escHandler);
       this._escHandler = null;
     }
+
+    if (this._resizeHandler) {
+      window.removeEventListener('resize', this._resizeHandler);
+      this._resizeHandler = null;
+    }
+  }
+
+  getLayoutMode() {
+    if (typeof window === 'undefined') return 'desktop';
+    return window.innerWidth <= 1100 ? 'compact' : 'desktop';
   }
 
   render() {
@@ -112,11 +125,18 @@ class Dashboard {
       const bTime = b.lastAccess ? new Date(b.lastAccess).getTime() : 0;
       return bTime - aTime;
     };
+    const escapeHtml = (value) => String(value ?? '')
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
     const activeWorkspaces = this.workspaces.filter(ws => this.isWorkspaceActive(ws)).sort(sortByLastAccess);
     const inactiveWorkspaces = this.workspaces.filter(ws => !this.isWorkspaceActive(ws)).sort(sortByLastAccess);
     const canReturnToWorkspaces = !!(this.orchestrator.tabManager?.tabs?.size);
     const visibility = this.orchestrator.getUiVisibilityConfig()?.dashboard || {};
     const showProcessBanner = visibility.processBanner !== false;
+    const layoutMode = this.getLayoutMode();
+    const isCompactLayout = layoutMode === 'compact';
+    this._layoutMode = layoutMode;
 
     // SVG Icons replacing Emojis
     const svgIcon = (path, cls="dashboard-svg-icon") => `<svg class="${cls}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${path}</svg>`;
@@ -254,18 +274,6 @@ class Dashboard {
       </div>
     ` : '';
 
-    const createSection = (visibility.createSection !== false) ? `
-      <div class="dashboard-create-banner">
-        <div class="dashboard-create-info">
-          <div class="dashboard-create-title">✨ Get Started</div>
-          <div class="dashboard-create-desc">Set up a new workspace environment to begin building.</div>
-        </div>
-        <button id="dashboard-add-workspace-btn" class="btn-primary workspace-create-empty-btn dashboard-create-btn">
-          ➕ Create Workspace
-        </button>
-      </div>
-    ` : '';
-
     const quickLinksSection = (visibility.quickLinks !== false) ? `
       <div class="dashboard-bento-card dashboard-quick-links">
         <div class="dashboard-bento-header">
@@ -288,26 +296,95 @@ class Dashboard {
       </div>
     ` : '';
 
-    const activeSection = (visibility.workspacesActive !== false && activeWorkspaces.length > 0) ? `
-      <div class="dashboard-bento-section">
-        <h2 class="dashboard-section-title">Active Workspaces</h2>
-        <div class="workspace-grid bento-workspace-grid">
-          ${activeWorkspaces.map(ws => this.generateWorkspaceCard(ws, true)).join('')}
+    const workspaceCards = [];
+    if (visibility.createSection !== false) {
+      workspaceCards.push(this.generateCreateWorkspaceCard(), this.generateCreateProjectCard());
+    }
+    if (visibility.workspacesActive !== false) {
+      workspaceCards.push(...activeWorkspaces.map((ws) => this.generateWorkspaceCard(ws, true)));
+    }
+    if (visibility.workspacesAll !== false) {
+      workspaceCards.push(...inactiveWorkspaces.map((ws) => this.generateWorkspaceCard(ws, false)));
+    }
+
+    const workspaceMeta = [
+      visibility.workspacesActive !== false ? `${activeWorkspaces.length} active` : '',
+      visibility.workspacesAll !== false ? `${inactiveWorkspaces.length} more` : ''
+    ].filter(Boolean).join(' • ');
+
+    const workspaceSection = workspaceCards.length ? `
+      <div class="dashboard-bento-section dashboard-workspaces-section">
+        <h2 class="dashboard-section-title">
+          Workspaces
+          ${workspaceMeta ? `<span class="dashboard-section-meta">${escapeHtml(workspaceMeta)}</span>` : ''}
+        </h2>
+        <div class="workspace-grid bento-workspace-grid dashboard-workspaces-grid">
+          ${workspaceCards.join('')}
         </div>
       </div>
     ` : '';
 
-    const allSection = (visibility.workspacesAll !== false) ? `
-      <div class="dashboard-bento-section">
-        <h2 class="dashboard-section-title">All Workspaces</h2>
-        <div class="workspace-grid bento-workspace-grid">
-          ${inactiveWorkspaces.map(ws => this.generateWorkspaceCard(ws, false)).join('')}
+    const resourcesSection = [quickLinksSection, runningServicesSection].filter(Boolean).join('');
+
+    const compactTabs = [
+      workspaceSection ? { id: 'workspaces', label: 'Workspaces', content: workspaceSection } : null,
+      processSection ? { id: 'process', label: 'Process', content: processSection } : null,
+      resourcesSection ? { id: 'resources', label: 'Resources', content: resourcesSection } : null
+    ].filter(Boolean);
+
+    if (!compactTabs.some((tab) => tab.id === this.compactTab)) {
+      this.compactTab = compactTabs[0]?.id || 'workspaces';
+    }
+
+    const desktopTopSection = processSection && resourcesSection
+      ? `
+        <div class="dashboard-main-content">
+          <div class="dashboard-content-left">
+            ${processSection}
+          </div>
+          <div class="dashboard-content-right">
+            ${resourcesSection}
+          </div>
+        </div>
+      `
+      : (processSection || resourcesSection);
+
+    const desktopLayout = `
+      ${desktopTopSection}
+      ${workspaceSection}
+    `;
+
+    const compactLayout = `
+      <div class="dashboard-compact-shell">
+        <div class="dashboard-compact-tabs" role="tablist" aria-label="Dashboard sections">
+          ${compactTabs.map((tab) => `
+            <button
+              type="button"
+              class="dashboard-compact-tab ${tab.id === this.compactTab ? 'is-active' : ''}"
+              data-dashboard-tab="${tab.id}"
+              role="tab"
+              aria-selected="${tab.id === this.compactTab ? 'true' : 'false'}"
+            >
+              ${escapeHtml(tab.label)}
+            </button>
+          `).join('')}
+        </div>
+        <div class="dashboard-compact-panel-shell">
+          ${compactTabs.map((tab) => `
+            <section
+              class="dashboard-compact-panel ${tab.id === this.compactTab ? 'is-active' : ''}"
+              data-dashboard-panel="${tab.id}"
+              role="tabpanel"
+            >
+              ${tab.content}
+            </section>
+          `).join('')}
         </div>
       </div>
-    ` : '';
+    `;
 
     return `
-      <div class="dashboard-wrapper">
+      <div class="dashboard-wrapper dashboard-layout-${layoutMode}">
         <div class="dashboard-topbar">
           ${canReturnToWorkspaces ? `<button class="dashboard-topbar-btn" id="dashboard-back-btn" title="Back to workspaces">← Back</button>` : '<div></div>'}
           ${showProcessBanner ? `<div id="dashboard-process-banner" class="process-banner" title="WIP and queue status"></div>` : '<div></div>'}
@@ -323,18 +400,7 @@ class Dashboard {
           </div>
         </div>
 
-        <div class="dashboard-main-content">
-          <div class="dashboard-content-left">
-            ${createSection}
-            ${processSection}
-            ${activeSection}
-            ${allSection}
-          </div>
-          <div class="dashboard-content-right">
-            ${quickLinksSection}
-            ${runningServicesSection}
-          </div>
-        </div>
+        ${isCompactLayout ? compactLayout : desktopLayout}
       </div>
     `;
   }
@@ -3644,6 +3710,45 @@ class Dashboard {
       });
     });
 
+    document.querySelectorAll('.workspace-create-btn').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        this.showCreateWorkspaceWizard();
+      });
+    });
+
+    document.querySelectorAll('.workspace-import-btn').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        this.importWorkspaceFromFile();
+      });
+    });
+
+    document.querySelectorAll('.workspace-create-project-btn').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        this.showCreateProjectWizard();
+      });
+    });
+
+    document.querySelectorAll('[data-dashboard-tab]').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const nextTab = String(btn.dataset.dashboardTab || '').trim();
+        if (!nextTab || nextTab === this.compactTab) return;
+        this.compactTab = nextTab;
+        this.render();
+      });
+    });
+
+    if (this._resizeHandler) {
+      window.removeEventListener('resize', this._resizeHandler);
+    }
+    this._resizeHandler = () => {
+      if (!this.isVisible) return;
+      const nextLayoutMode = this.getLayoutMode();
+      if (nextLayoutMode !== this._layoutMode) {
+        this.render();
+      }
+    };
+    window.addEventListener('resize', this._resizeHandler);
+
     // ESC: return to tabbed workspaces if dashboard was opened from there
     if (this._escHandler) {
       document.removeEventListener('keydown', this._escHandler);
diff --git a/client/styles.css b/client/styles.css
index 40a02580..a93c904b 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -7681,10 +7681,9 @@ body.dependency-onboarding-active #dependency-setup-modal {
   bottom: 0;
   background: var(--bg-primary);
   z-index: 1000;
-  padding: clamp(0.75rem, 2vw, 2rem);
+  padding: 0;
   box-sizing: border-box;
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden;
 }
 
 .dashboard-topbar {
@@ -14314,15 +14313,30 @@ body.dependency-onboarding-active #dependency-setup-modal {
   color: var(--text-primary);
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 8px;
+  flex-wrap: wrap;
+}
+
+.dashboard-section-meta {
+  font-size: 0.82rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  opacity: 0.65;
 }
 
 .bento-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
   gap: var(--space-md);
 }
 
+.dashboard-bento-section {
+  display: grid;
+  gap: var(--space-sm);
+  min-width: 0;
+}
+
 .dashboard-bento-header {
   display: flex;
   align-items: center;
@@ -14481,44 +14495,58 @@ body.dependency-onboarding-active #dependency-setup-modal {
 /* Dashboard Layout */
 .dashboard-wrapper {
   width: 100%;
-  max-width: 1520px;
-  margin: 0 auto;
-  padding: 0 0 var(--space-lg);
+  margin: 0;
+  padding: clamp(0.75rem, 1.4vw, 1.5rem);
   box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  color: #fff;
+  display: grid;
+  grid-template-rows: auto auto 1fr;
+  color: var(--text-primary);
   gap: var(--space-md);
-  min-height: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .dashboard-header-modern {
   padding: var(--space-sm) 0 0 0;
   margin-bottom: 0;
-  flex-shrink: 0;
+  min-width: 0;
 }
 
 .dashboard-main-content {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
-  gap: var(--space-lg);
+  grid-template-columns: minmax(0, 1.45fr) minmax(24rem, 1.05fr);
+  gap: var(--space-md);
   align-items: start;
+  min-height: 0;
 }
 
 .dashboard-content-left {
-  display: flex;
-  flex-direction: column;
+  display: grid;
   gap: var(--space-md);
   min-width: 0;
+  align-content: start;
+  min-height: 0;
 }
 
 .dashboard-content-right {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  gap: var(--space-md);
+  min-width: 0;
+  align-content: start;
+  min-height: 0;
+}
+
+.dashboard-resource-stack {
+  display: grid;
   gap: var(--space-md);
   min-width: 0;
 }
 
+.dashboard-workspaces-grid {
+  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
+}
+
 /* Create Workspace Banner */
 .dashboard-create-banner {
   display: flex;
@@ -14563,6 +14591,8 @@ body.dependency-onboarding-active #dependency-setup-modal {
   padding: var(--space-md);
   box-shadow: var(--shadow-soft);
   transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
+  min-width: 0;
+  min-height: 0;
 }
 
 .dashboard-bento-card:hover {
@@ -14574,7 +14604,7 @@ body.dependency-onboarding-active #dependency-setup-modal {
 /* Workspace Grid */
 .bento-workspace-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
   gap: var(--space-md);
 }
 
@@ -14671,14 +14701,14 @@ body.dependency-onboarding-active #dependency-setup-modal {
 }
 
 .ports-dashboard-grid {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
   gap: var(--space-sm);
 }
 
 .port-dashboard-card {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--space-sm);
   padding: 10px 12px;
   background: var(--bg-tertiary);
@@ -14733,16 +14763,183 @@ body.dependency-onboarding-active #dependency-setup-modal {
   border-radius: 6px;
   color: var(--text-primary);
   border: 1px solid var(--border-color);
+  margin-left: auto;
 }
 
-/* Reflow dashboard on smaller screens instead of shrinking everything */
-@media (max-width: 1200px) {
-  .dashboard-main-content {
-    grid-template-columns: minmax(0, 1fr);
-  }
+.dashboard-quick-links .quick-links-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(132px, 100%), 1fr));
+  gap: var(--space-sm);
 }
 
-@media (max-width: 900px) {
+.dashboard-quick-links > .quick-links-grid {
+  display: block;
+}
+
+.dashboard-quick-links .quick-links-container {
+  gap: 0.65rem;
+}
+
+.dashboard-quick-links .quick-links-section {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.dashboard-quick-links .quick-links-section h3 {
+  margin: 0;
+  font-size: 0.8rem;
+  color: var(--text-primary);
+  opacity: 0.7;
+}
+
+.dashboard-quick-links .quick-links-section .quick-links-grid {
+  grid-template-columns: repeat(auto-fit, minmax(min(132px, 100%), 1fr));
+  gap: 0.45rem;
+}
+
+.dashboard-quick-links .bento-quick-link {
+  width: 100%;
+  min-width: 0;
+  padding: 0.6rem 0.7rem !important;
+  font-size: 0.78rem;
+  gap: 0.45rem;
+}
+
+.dashboard-quick-links .quick-link-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dashboard-compact-shell {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  gap: var(--space-sm);
+  min-height: 0;
+}
+
+.dashboard-compact-tabs {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 8px;
+}
+
+.dashboard-compact-tab {
+  appearance: none;
+  border: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  border-radius: 10px;
+  padding: 0.65rem 0.8rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s, border-color 0.2s, transform 0.2s;
+}
+
+.dashboard-compact-tab:hover {
+  border-color: var(--accent-primary);
+  background: var(--bg-hover);
+}
+
+.dashboard-compact-tab.is-active {
+  background: color-mix(in srgb, var(--accent-primary) 18%, var(--bg-secondary));
+  border-color: color-mix(in srgb, var(--accent-primary) 50%, var(--border-color));
+  color: var(--text-primary);
+}
+
+.dashboard-compact-panel-shell {
+  min-height: 0;
+}
+
+.dashboard-compact-panel {
+  display: none;
+  min-height: 0;
+}
+
+.dashboard-compact-panel.is-active {
+  display: grid;
+  gap: var(--space-md);
+}
+
+.dashboard-layout-compact .dashboard-bento-card {
+  padding: 12px;
+  border-radius: 12px;
+}
+
+.dashboard-layout-compact .dashboard-bento-header {
+  margin-bottom: 8px;
+  font-size: 0.98rem;
+}
+
+.dashboard-layout-compact .dashboard-bento-body {
+  font-size: 0.84rem;
+  margin-bottom: 8px;
+}
+
+.dashboard-layout-compact .dashboard-bento-actions {
+  gap: 5px;
+}
+
+.dashboard-layout-compact .bento-btn,
+.dashboard-layout-compact .bento-checkbox-label {
+  padding: 5px 8px;
+  font-size: 0.74rem;
+}
+
+.dashboard-layout-compact .bento-workspace-grid {
+  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
+  gap: 10px;
+}
+
+.dashboard-layout-compact .bento-workspace-icon {
+  width: 34px;
+  height: 34px;
+  font-size: 17px;
+}
+
+.dashboard-layout-compact .bento-workspace-card .workspace-card-header {
+  padding: 10px 12px 2px;
+  gap: 10px;
+}
+
+.dashboard-layout-compact .bento-workspace-card .workspace-card-body {
+  padding: 2px 12px 8px;
+}
+
+.dashboard-layout-compact .bento-workspace-card .workspace-info h3 {
+  font-size: 0.92rem;
+}
+
+.dashboard-layout-compact .bento-workspace-card .workspace-type,
+.dashboard-layout-compact .bento-workspace-card .last-used {
+  font-size: 0.68rem;
+}
+
+.dashboard-layout-compact .bento-card-footer {
+  padding: 8px 12px;
+}
+
+.dashboard-layout-compact .workspace-card-footer .btn-primary,
+.dashboard-layout-compact .workspace-card-footer .btn-secondary,
+.dashboard-layout-compact .btn-cta-empty,
+.dashboard-layout-compact .bento-btn-primary {
+  padding: 0.4rem 0.55rem;
+  font-size: 0.72rem;
+}
+
+.dashboard-layout-compact .btn-icon,
+.dashboard-layout-compact .bento-action-group .btn-icon {
+  width: 26px;
+  height: 26px;
+  font-size: 12px;
+}
+
+@media (max-width: 1100px) {
+  .dashboard-wrapper {
+    gap: var(--space-sm);
+  }
+
   .dashboard-title-group {
     align-items: flex-start;
   }
@@ -14758,10 +14955,6 @@ body.dependency-onboarding-active #dependency-setup-modal {
 }
 
 @media (max-width: 600px) {
-  .dashboard-wrapper {
-    padding-bottom: var(--space-md);
-  }
-
   .dashboard-title-group {
     gap: var(--space-sm);
   }
@@ -14779,13 +14972,35 @@ body.dependency-onboarding-active #dependency-setup-modal {
     font-size: 0.9rem;
   }
 
-  .bento-grid,
-  .bento-workspace-grid,
-  .workspace-grid {
-    grid-template-columns: minmax(0, 1fr);
+  .dashboard-compact-tabs {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .dashboard-layout-compact .bento-grid,
+  .dashboard-layout-compact .bento-workspace-grid,
+  .dashboard-layout-compact .ports-dashboard-grid,
+  .dashboard-layout-compact .quick-links-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .dashboard-layout-compact .port-dashboard-card {
+    padding: 9px 10px;
   }
+}
 
+@media (max-width: 460px) {
   .dashboard-wrapper {
-    gap: var(--space-sm);
+    padding: 0.7rem;
+  }
+
+  .dashboard-compact-tabs {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .dashboard-layout-compact .bento-grid,
+  .dashboard-layout-compact .bento-workspace-grid,
+  .dashboard-layout-compact .ports-dashboard-grid,
+  .dashboard-layout-compact .quick-links-grid {
+    grid-template-columns: minmax(0, 1fr);
   }
 }

From b4a0c9bf78e0af9da29fc5127bbff4dfa17df466 Mon Sep 17 00:00:00 2001
From: AnrokX <192667251+AnrokX@users.noreply.github.com>
Date: Thu, 12 Mar 2026 13:27:46 -0600
Subject: [PATCH 07/16] fix: align dashboard workspace and resource columns

---
 client/dashboard.js | 26 +++++++++--------
 client/styles.css   | 69 +++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 79 insertions(+), 16 deletions(-)

diff --git a/client/dashboard.js b/client/dashboard.js
index 7258796f..1659c89f 100644
--- a/client/dashboard.js
+++ b/client/dashboard.js
@@ -324,7 +324,8 @@ class Dashboard {
       </div>
     ` : '';
 
-    const resourcesSection = [quickLinksSection, runningServicesSection].filter(Boolean).join('');
+    const resourcesCards = [quickLinksSection, runningServicesSection].filter(Boolean);
+    const resourcesSection = resourcesCards.join('');
 
     const compactTabs = [
       workspaceSection ? { id: 'workspaces', label: 'Workspaces', content: workspaceSection } : null,
@@ -336,23 +337,26 @@ class Dashboard {
       this.compactTab = compactTabs[0]?.id || 'workspaces';
     }
 
-    const desktopTopSection = processSection && resourcesSection
+    const desktopResourcesGrid = resourcesCards.length
+      ? `
+        <div class="dashboard-resource-cards">
+          ${resourcesCards.join('')}
+        </div>
+      `
+      : '';
+    const desktopResourceStack = [processSection, desktopResourcesGrid].filter(Boolean).join('');
+    const desktopLayout = (workspaceSection && desktopResourceStack)
       ? `
         <div class="dashboard-main-content">
           <div class="dashboard-content-left">
-            ${processSection}
+            ${workspaceSection}
           </div>
-          <div class="dashboard-content-right">
-            ${resourcesSection}
+          <div class="dashboard-content-right dashboard-resource-stack">
+            ${desktopResourceStack}
           </div>
         </div>
       `
-      : (processSection || resourcesSection);
-
-    const desktopLayout = `
-      ${desktopTopSection}
-      ${workspaceSection}
-    `;
+      : (workspaceSection || desktopResourceStack);
 
     const compactLayout = `
       <div class="dashboard-compact-shell">
diff --git a/client/styles.css b/client/styles.css
index a93c904b..44fd825e 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -14515,7 +14515,7 @@ body.dependency-onboarding-active #dependency-setup-modal {
 
 .dashboard-main-content {
   display: grid;
-  grid-template-columns: minmax(0, 1.45fr) minmax(24rem, 1.05fr);
+  grid-template-columns: minmax(0, 1.7fr) minmax(25rem, 1fr);
   gap: var(--space-md);
   align-items: start;
   min-height: 0;
@@ -14539,12 +14539,20 @@ body.dependency-onboarding-active #dependency-setup-modal {
 
 .dashboard-resource-stack {
   display: grid;
-  gap: var(--space-md);
+  gap: 0.8rem;
+  min-width: 0;
+}
+
+.dashboard-resource-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
+  gap: 0.75rem;
   min-width: 0;
+  align-items: start;
 }
 
 .dashboard-workspaces-grid {
-  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(185px, 100%), 1fr));
 }
 
 /* Create Workspace Banner */
@@ -14768,7 +14776,7 @@ body.dependency-onboarding-active #dependency-setup-modal {
 
 .dashboard-quick-links .quick-links-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(132px, 100%), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(124px, 100%), 1fr));
   gap: var(--space-sm);
 }
 
@@ -14793,7 +14801,7 @@ body.dependency-onboarding-active #dependency-setup-modal {
 }
 
 .dashboard-quick-links .quick-links-section .quick-links-grid {
-  grid-template-columns: repeat(auto-fit, minmax(min(132px, 100%), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(124px, 100%), 1fr));
   gap: 0.45rem;
 }
 
@@ -14862,6 +14870,57 @@ body.dependency-onboarding-active #dependency-setup-modal {
   gap: var(--space-md);
 }
 
+.dashboard-layout-desktop .dashboard-content-right .dashboard-bento-section {
+  gap: 0.55rem;
+}
+
+.dashboard-layout-desktop .dashboard-content-right .dashboard-section-title {
+  font-size: 1rem;
+  margin-bottom: 0;
+}
+
+.dashboard-layout-desktop .dashboard-content-right .bento-grid {
+  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
+  gap: 0.75rem;
+}
+
+.dashboard-layout-desktop .dashboard-content-right .dashboard-bento-card {
+  padding: 12px;
+  border-radius: 12px;
+}
+
+.dashboard-layout-desktop .dashboard-resource-cards .dashboard-bento-card {
+  height: 100%;
+}
+
+.dashboard-layout-desktop .dashboard-content-right .dashboard-bento-header {
+  margin-bottom: 8px;
+  font-size: 0.98rem;
+}
+
+.dashboard-layout-desktop .dashboard-content-right .dashboard-bento-body {
+  font-size: 0.84rem;
+  margin-bottom: 8px;
+}
+
+.dashboard-layout-desktop .dashboard-content-right .dashboard-bento-actions {
+  gap: 5px;
+}
+
+.dashboard-layout-desktop .dashboard-content-right .bento-btn,
+.dashboard-layout-desktop .dashboard-content-right .bento-checkbox-label {
+  padding: 5px 8px;
+  font-size: 0.74rem;
+}
+
+.dashboard-layout-desktop .dashboard-content-right .ports-dashboard-grid {
+  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
+}
+
+.dashboard-layout-desktop .dashboard-content-right .port-dashboard-card {
+  padding: 9px 10px;
+}
+
 .dashboard-layout-compact .dashboard-bento-card {
   padding: 12px;
   border-radius: 12px;

From 24a8ea52653cc737650e576f0bba2bf583dba04b Mon Sep 17 00:00:00 2001
From: AnrokX <192667251+AnrokX@users.noreply.github.com>
Date: Thu, 12 Mar 2026 13:31:48 -0600
Subject: [PATCH 08/16] fix: restore previous dashboard create visibility

---
 client/dashboard.js | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/client/dashboard.js b/client/dashboard.js
index 1659c89f..b45b9947 100644
--- a/client/dashboard.js
+++ b/client/dashboard.js
@@ -274,6 +274,18 @@ class Dashboard {
       </div>
     ` : '';
 
+    const createSection = (visibility.createSection !== false) ? `
+      <div class="dashboard-create-banner">
+        <div class="dashboard-create-info">
+          <div class="dashboard-create-title">✨ Get Started</div>
+          <div class="dashboard-create-desc">Set up a new workspace environment to begin building.</div>
+        </div>
+        <button id="dashboard-add-workspace-btn" class="btn-primary workspace-create-empty-btn dashboard-create-btn">
+          ➕ Create Workspace
+        </button>
+      </div>
+    ` : '';
+
     const quickLinksSection = (visibility.quickLinks !== false) ? `
       <div class="dashboard-bento-card dashboard-quick-links">
         <div class="dashboard-bento-header">
@@ -297,9 +309,6 @@ class Dashboard {
     ` : '';
 
     const workspaceCards = [];
-    if (visibility.createSection !== false) {
-      workspaceCards.push(this.generateCreateWorkspaceCard(), this.generateCreateProjectCard());
-    }
     if (visibility.workspacesActive !== false) {
       workspaceCards.push(...activeWorkspaces.map((ws) => this.generateWorkspaceCard(ws, true)));
     }
@@ -328,7 +337,7 @@ class Dashboard {
     const resourcesSection = resourcesCards.join('');
 
     const compactTabs = [
-      workspaceSection ? { id: 'workspaces', label: 'Workspaces', content: workspaceSection } : null,
+      (createSection || workspaceSection) ? { id: 'workspaces', label: 'Workspaces', content: `${createSection}${workspaceSection}` } : null,
       processSection ? { id: 'process', label: 'Process', content: processSection } : null,
       resourcesSection ? { id: 'resources', label: 'Resources', content: resourcesSection } : null
     ].filter(Boolean);
@@ -349,6 +358,7 @@ class Dashboard {
       ? `
         <div class="dashboard-main-content">
           <div class="dashboard-content-left">
+            ${createSection}
             ${workspaceSection}
           </div>
           <div class="dashboard-content-right dashboard-resource-stack">
@@ -356,7 +366,7 @@ class Dashboard {
           </div>
         </div>
       `
-      : (workspaceSection || desktopResourceStack);
+      : ([createSection, workspaceSection, desktopResourceStack].filter(Boolean).join(''));
 
     const compactLayout = `
       <div class="dashboard-compact-shell">

From 8f58b558a91638d0017b371ec16470cb611f599a Mon Sep 17 00:00:00 2001
From: AnrokX <192667251+AnrokX@users.noreply.github.com>
Date: Thu, 12 Mar 2026 13:35:18 -0600
Subject: [PATCH 09/16] fix: simplify dashboard create banner

---
 client/styles.css | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/client/styles.css b/client/styles.css
index 44fd825e..eff72ed9 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -14557,16 +14557,17 @@ body.dependency-onboarding-active #dependency-setup-modal {
 
 /* Create Workspace Banner */
 .dashboard-create-banner {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 10px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: 10px;
-  padding: 14px 16px;
-  flex-shrink: 0;
-  align-self: flex-start;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.85rem;
+  padding: 0;
+  margin: 0;
+  min-width: 0;
+}
+
+.dashboard-create-info {
+  min-width: 0;
 }
 
 .dashboard-create-title {
@@ -14589,6 +14590,13 @@ body.dependency-onboarding-active #dependency-setup-modal {
   white-space: nowrap;
 }
 
+@media (max-width: 720px) {
+  .dashboard-create-banner {
+    grid-template-columns: minmax(0, 1fr);
+    align-items: flex-start;
+  }
+}
+
 /* Bento Cards */
 .dashboard-bento-card {
   display: flex;

From 42d66c82e648da5c519ae5bf74067a98077f6b45 Mon Sep 17 00:00:00 2001
From: AnrokX <192667251+AnrokX@users.noreply.github.com>
Date: Thu, 12 Mar 2026 13:38:43 -0600
Subject: [PATCH 10/16] fix: tighten dashboard create action spacing

---
 client/styles.css | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/client/styles.css b/client/styles.css
index eff72ed9..974d1291 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -14557,17 +14557,23 @@ body.dependency-onboarding-active #dependency-setup-modal {
 
 /* Create Workspace Banner */
 .dashboard-create-banner {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 0.85rem;
+  justify-content: flex-start;
+  gap: 0.65rem;
   padding: 0;
   margin: 0;
   min-width: 0;
+  width: fit-content;
+  max-width: 100%;
+  justify-self: start;
 }
 
 .dashboard-create-info {
   min-width: 0;
+  display: grid;
+  gap: 0.15rem;
 }
 
 .dashboard-create-title {
@@ -14592,7 +14598,8 @@ body.dependency-onboarding-active #dependency-setup-modal {
 
 @media (max-width: 720px) {
   .dashboard-create-banner {
-    grid-template-columns: minmax(0, 1fr);
+    width: 100%;
+    justify-self: stretch;
     align-items: flex-start;
   }
 }

From 784699afebc37227ccdc0447965cb7c2f3c11304 Mon Sep 17 00:00:00 2001
From: AnrokX <192667251+AnrokX@users.noreply.github.com>
Date: Thu, 12 Mar 2026 13:59:46 -0600
Subject: [PATCH 11/16] fix: polish dashboard shell layout

---
 client/styles.css | 618 ++++++++++++++++++++++++++++++++++++----------
 1 file changed, 487 insertions(+), 131 deletions(-)

diff --git a/client/styles.css b/client/styles.css
index 974d1291..a8bb5369 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -14270,70 +14270,117 @@ body.dependency-onboarding-active #dependency-setup-modal {
 
 /* Dashboard Bento Design Updates */
 
+.dashboard-container {
+  background:
+    radial-gradient(1100px 680px at -10% -20%, color-mix(in srgb, var(--accent-primary) 22%, transparent), transparent 60%),
+    radial-gradient(820px 560px at 110% 0%, rgba(56, 189, 248, 0.12), transparent 58%),
+    linear-gradient(155deg, color-mix(in srgb, var(--bg-primary) 90%, #08111d) 0%, color-mix(in srgb, var(--bg-primary) 96%, #0b1320) 50%, var(--bg-primary) 100%);
+}
+
+.dashboard-container::before,
+.dashboard-container::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.dashboard-container::before {
+  background:
+    radial-gradient(420px 260px at 12% 18%, rgba(255, 255, 255, 0.05), transparent 72%),
+    radial-gradient(540px 320px at 78% 86%, rgba(255, 255, 255, 0.04), transparent 74%);
+  opacity: 0.9;
+}
+
+.dashboard-container::after {
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 22%),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.02), transparent 28%, transparent 72%, rgba(255, 255, 255, 0.02));
+}
+
 .dashboard-title-group {
   display: flex;
   align-items: center;
-  gap: var(--space-md);
+  gap: 0.9rem;
+  min-width: 0;
 }
 
 .dashboard-title-icon {
-  width: 44px;
-  height: 44px;
-  border-radius: 12px;
-  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary-pressed) 100%);
+  width: 50px;
+  height: 50px;
+  border-radius: 16px;
+  background:
+    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.32), transparent 40%),
+    linear-gradient(145deg, color-mix(in srgb, var(--accent-primary) 82%, white 18%) 0%, color-mix(in srgb, var(--accent-primary-pressed) 78%, #07111c) 100%);
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 8px 16px rgba(31, 111, 235, 0.25);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: 0 16px 32px rgba(2, 6, 23, 0.22);
+  flex-shrink: 0;
 }
 
 .dashboard-title-group h1 {
-  font-size: 1.6rem;
-  font-weight: 700;
+  font-size: 1.72rem;
+  font-weight: 760;
   margin: 0;
-  letter-spacing: -0.02em;
-  color: var(--text-primary);
+  letter-spacing: -0.035em;
+  color: color-mix(in srgb, var(--text-primary) 96%, white 4%);
 }
 
 .dashboard-title-group p {
-  margin: 2px 0 0;
-  color: var(--text-primary);
+  margin: 0.2rem 0 0;
+  color: color-mix(in srgb, var(--text-primary) 74%, transparent);
   font-size: 0.95rem;
-  opacity: 0.7;
+  line-height: 1.35;
 }
 
 
 
 
 .dashboard-section-title {
-  font-size: 1.15rem;
-  font-weight: 600;
-  margin: 0 0 var(--space-sm) 0;
-  color: var(--text-primary);
+  font-size: 1rem;
+  font-weight: 680;
+  margin: 0 0 0.15rem 0;
+  color: color-mix(in srgb, var(--text-primary) 92%, white 8%);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   flex-wrap: wrap;
+  letter-spacing: -0.018em;
+}
+
+.dashboard-section-title::after {
+  content: "";
+  flex: 1 1 56px;
+  height: 1px;
+  min-width: 36px;
+  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-primary) 38%, transparent), transparent);
+  opacity: 0.8;
 }
 
 .dashboard-section-meta {
-  font-size: 0.82rem;
+  font-size: 0.76rem;
   font-weight: 500;
-  color: var(--text-primary);
-  opacity: 0.65;
+  color: color-mix(in srgb, var(--text-primary) 82%, transparent);
+  opacity: 1;
+  padding: 0.22rem 0.55rem;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
 }
 
 .bento-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
-  gap: var(--space-md);
+  gap: 0.75rem;
 }
 
 .dashboard-bento-section {
   display: grid;
-  gap: var(--space-sm);
+  gap: 0.55rem;
   min-width: 0;
 }
 
@@ -14341,10 +14388,12 @@ body.dependency-onboarding-active #dependency-setup-modal {
   display: flex;
   align-items: center;
   gap: 8px;
-  margin-bottom: var(--space-sm);
+  margin-bottom: 0.55rem;
   font-size: 1.05rem;
   font-weight: 600;
   color: var(--text-primary);
+  position: relative;
+  z-index: 1;
 }
 
 .dashboard-bento-header svg {
@@ -14356,9 +14405,11 @@ body.dependency-onboarding-active #dependency-setup-modal {
 .dashboard-bento-body {
   flex: 1;
   color: var(--text-primary);
-  font-size: 0.9rem;
-  margin-bottom: var(--space-sm);
-  opacity: 0.85;
+  font-size: 0.88rem;
+  margin-bottom: 0.65rem;
+  opacity: 0.88;
+  position: relative;
+  z-index: 1;
 }
 
 .dashboard-bento-actions {
@@ -14366,6 +14417,8 @@ body.dependency-onboarding-active #dependency-setup-modal {
   flex-wrap: wrap;
   gap: 6px;
   margin-top: auto;
+  position: relative;
+  z-index: 1;
 }
 
 .bento-btn {
@@ -14373,14 +14426,15 @@ body.dependency-onboarding-active #dependency-setup-modal {
   align-items: center;
   gap: 6px;
   padding: 6px 10px;
-  border-radius: 8px;
-  background: var(--bg-tertiary);
-  border: 1px solid var(--border-color);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.08);
   color: var(--text-primary);
   font-size: 0.8rem;
-  font-weight: 500;
+  font-weight: 560;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: transform 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
+  backdrop-filter: blur(12px);
 }
 
 .bento-btn svg {
@@ -14390,9 +14444,11 @@ body.dependency-onboarding-active #dependency-setup-modal {
 }
 
 .bento-btn:hover {
-  background: var(--accent-primary);
-  color: var(--text-on-accent);
-  border-color: var(--accent-primary);
+  background: color-mix(in srgb, var(--accent-primary) 18%, rgba(255, 255, 255, 0.06));
+  color: var(--text-primary);
+  border-color: color-mix(in srgb, var(--accent-primary) 60%, rgba(255, 255, 255, 0.16));
+  transform: translateY(-1px);
+  box-shadow: 0 12px 24px rgba(2, 6, 23, 0.12);
 }
 
 .bento-btn:hover svg {
@@ -14405,12 +14461,13 @@ body.dependency-onboarding-active #dependency-setup-modal {
   gap: 6px;
   font-size: 0.8rem;
   padding: 6px 10px;
-  border-radius: 8px;
-  background: var(--bg-tertiary);
-  border: 1px solid var(--border-color);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.08);
   cursor: pointer;
   color: var(--text-primary);
-  font-weight: 500;
+  font-weight: 560;
+  backdrop-filter: blur(12px);
 }
 
 
@@ -14425,17 +14482,19 @@ body.dependency-onboarding-active #dependency-setup-modal {
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 8px;
-  background: var(--bg-primary);
-  border: 1px solid var(--border-color);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.08);
   color: var(--text-primary);
-  opacity: 0.7;
+  opacity: 0.82;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: transform 0.2s, background 0.2s, border-color 0.2s, opacity 0.2s;
 }
 
 .btn-icon:hover {
-  background: var(--bg-hover);
+  background: rgba(255, 255, 255, 0.1);
+  border-color: color-mix(in srgb, var(--accent-primary) 44%, rgba(255, 255, 255, 0.08));
+  transform: translateY(-1px);
   opacity: 1;
 }
 
@@ -14449,9 +14508,9 @@ body.dependency-onboarding-active #dependency-setup-modal {
 .bento-workspace-health {
   margin-top: 8px;
   padding: 10px;
-  border-radius: 10px;
-  background: rgba(245, 158, 11, 0.08);
-  border: 1px solid rgba(245, 158, 11, 0.15);
+  border-radius: 12px;
+  background: rgba(245, 158, 11, 0.1);
+  border: 1px solid rgba(245, 158, 11, 0.2);
 }
 
 .health-info-row {
@@ -14473,19 +14532,20 @@ body.dependency-onboarding-active #dependency-setup-modal {
 }
 
 .bento-quick-link {
-  border-radius: 10px !important;
-  background: var(--bg-tertiary) !important;
-  border: 1px solid var(--border-color) !important;
+  border-radius: 12px !important;
+  background: rgba(255, 255, 255, 0.05) !important;
+  border: 1px solid rgba(255, 255, 255, 0.08) !important;
   padding: var(--space-sm) var(--space-md) !important;
   display: flex;
   align-items: center;
   gap: var(--space-sm);
   color: var(--text-primary) !important;
+  backdrop-filter: blur(12px);
 }
 
 .bento-quick-link:hover {
-  background: var(--bg-hover) !important;
-  border-color: var(--accent-primary) !important;
+  background: color-mix(in srgb, var(--accent-primary) 16%, rgba(255, 255, 255, 0.06)) !important;
+  border-color: color-mix(in srgb, var(--accent-primary) 60%, rgba(255, 255, 255, 0.08)) !important;
   transform: translateY(-1px) !important;
 }
 
@@ -14494,47 +14554,109 @@ body.dependency-onboarding-active #dependency-setup-modal {
 
 /* Dashboard Layout */
 .dashboard-wrapper {
+  --dashboard-window-fill:
+    linear-gradient(165deg, rgba(7, 13, 24, 0.94) 0%, rgba(8, 16, 28, 0.88) 48%, rgba(6, 12, 24, 0.96) 100%);
+  --dashboard-panel-fill: linear-gradient(180deg, rgba(9, 16, 28, 0.68), rgba(8, 13, 24, 0.34));
+  --dashboard-panel-border: rgba(255, 255, 255, 0.1);
+  --dashboard-panel-shadow: 0 24px 60px rgba(2, 6, 23, 0.2);
+  --dashboard-card-fill: linear-gradient(180deg, rgba(18, 27, 43, 0.84), rgba(10, 16, 28, 0.86));
+  --dashboard-card-border: rgba(255, 255, 255, 0.08);
+  --dashboard-card-accent: color-mix(in srgb, var(--accent-primary) 80%, white 20%);
   width: 100%;
   margin: 0;
-  padding: clamp(0.75rem, 1.4vw, 1.5rem);
+  padding: clamp(0.85rem, 1.2vw, 1.3rem);
   box-sizing: border-box;
   display: grid;
   grid-template-rows: auto auto 1fr;
   color: var(--text-primary);
-  gap: var(--space-md);
+  gap: 0.95rem;
   height: 100%;
   min-height: 0;
   overflow: hidden;
+  position: relative;
+  isolation: isolate;
+  border-radius: 34px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 14%),
+    var(--dashboard-window-fill);
+  box-shadow:
+    0 32px 90px rgba(2, 6, 23, 0.32),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  backdrop-filter: blur(20px);
+}
+
+.dashboard-wrapper::before,
+.dashboard-wrapper::after {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+}
+
+.dashboard-wrapper::before {
+  inset: 0;
+  border-radius: inherit;
+  background:
+    radial-gradient(640px 260px at 16% 0%, color-mix(in srgb, var(--accent-primary) 18%, transparent), transparent 70%),
+    radial-gradient(480px 360px at 100% 100%, rgba(255, 255, 255, 0.04), transparent 72%);
+  opacity: 0.9;
+}
+
+.dashboard-wrapper::after {
+  inset: 14px;
+  border-radius: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.03);
 }
 
 .dashboard-header-modern {
-  padding: var(--space-sm) 0 0 0;
+  padding: 0.15rem 0.2rem 0;
   margin-bottom: 0;
   min-width: 0;
+  position: relative;
+  border-radius: 0;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  overflow: visible;
+  z-index: 1;
+}
+
+.dashboard-header-modern::before {
+  display: none;
 }
 
 .dashboard-main-content {
   display: grid;
-  grid-template-columns: minmax(0, 1.7fr) minmax(25rem, 1fr);
-  gap: var(--space-md);
-  align-items: start;
+  grid-template-columns: minmax(0, 1.7fr) minmax(22rem, 0.95fr);
+  gap: 1rem;
+  align-items: stretch;
   min-height: 0;
+  position: relative;
+  z-index: 1;
 }
 
 .dashboard-content-left {
   display: grid;
-  gap: var(--space-md);
+  gap: 0.9rem;
   min-width: 0;
   align-content: start;
   min-height: 0;
+  position: relative;
+  isolation: isolate;
+  padding: 1.05rem 1.05rem 1.1rem;
+  overflow: hidden;
 }
 
 .dashboard-content-right {
   display: grid;
-  gap: var(--space-md);
+  gap: 0.9rem;
   min-width: 0;
   align-content: start;
   min-height: 0;
+  position: relative;
+  isolation: isolate;
+  padding: 1.05rem 1.05rem 1.1rem;
+  overflow: hidden;
 }
 
 .dashboard-resource-stack {
@@ -14543,12 +14665,54 @@ body.dependency-onboarding-active #dependency-setup-modal {
   min-width: 0;
 }
 
+.dashboard-content-left::before,
+.dashboard-content-right::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 28px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 18%),
+    var(--dashboard-panel-fill);
+  border: 1px solid var(--dashboard-panel-border);
+  box-shadow: var(--dashboard-panel-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.03);
+  z-index: -1;
+  pointer-events: none;
+}
+
+.dashboard-content-left::after,
+.dashboard-content-right::after {
+  content: "";
+  position: absolute;
+  left: 22px;
+  right: 22px;
+  top: 0;
+  height: 1px;
+  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-primary) 36%, transparent), transparent 72%);
+  opacity: 0.8;
+  z-index: -1;
+  pointer-events: none;
+}
+
+.dashboard-content-left::before {
+  background:
+    linear-gradient(130deg, color-mix(in srgb, var(--accent-primary) 10%, transparent), transparent 42%),
+    linear-gradient(180deg, rgba(8, 15, 28, 0.86), rgba(6, 12, 22, 0.78));
+}
+
+.dashboard-content-right::before {
+  background:
+    linear-gradient(130deg, rgba(255, 255, 255, 0.04), transparent 40%),
+    linear-gradient(180deg, rgba(12, 21, 36, 0.86), rgba(7, 13, 24, 0.84));
+}
+
 .dashboard-resource-cards {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
   gap: 0.75rem;
   min-width: 0;
   align-items: start;
+  min-height: 0;
 }
 
 .dashboard-workspaces-grid {
@@ -14561,7 +14725,7 @@ body.dependency-onboarding-active #dependency-setup-modal {
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-start;
-  gap: 0.65rem;
+  gap: 0.55rem 0.8rem;
   padding: 0;
   margin: 0;
   min-width: 0;
@@ -14573,29 +14737,41 @@ body.dependency-onboarding-active #dependency-setup-modal {
 .dashboard-create-info {
   min-width: 0;
   display: grid;
-  gap: 0.15rem;
+  gap: 0.18rem;
 }
 
 .dashboard-create-title {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--text-primary);
+  font-size: 0.82rem;
+  font-weight: 680;
+  letter-spacing: -0.012em;
+  color: color-mix(in srgb, var(--text-primary) 96%, white 4%);
 }
 
 .dashboard-create-desc {
-  color: inherit;
-  font-size: 0.78rem;
-  opacity: 0.6;
+  color: color-mix(in srgb, var(--text-primary) 70%, transparent);
+  font-size: 0.76rem;
+  line-height: 1.35;
+  opacity: 1;
+  max-width: 30rem;
 }
 
 .dashboard-create-btn {
-  padding: 6px 14px !important;
-  border-radius: 8px !important;
-  font-weight: 600 !important;
-  font-size: 0.82rem !important;
+  padding: 0.45rem 0.85rem !important;
+  border-radius: 999px !important;
+  border: 1px solid color-mix(in srgb, var(--accent-primary) 62%, rgba(255, 255, 255, 0.08)) !important;
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 72%, white 14%), color-mix(in srgb, var(--accent-primary-pressed) 86%, #08111d 14%)) !important;
+  box-shadow: 0 14px 26px rgba(2, 6, 23, 0.16) !important;
+  font-weight: 640 !important;
+  font-size: 0.79rem !important;
   white-space: nowrap;
 }
 
+.dashboard-create-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 18px 28px rgba(2, 6, 23, 0.2) !important;
+}
+
 @media (max-width: 720px) {
   .dashboard-create-banner {
     width: 100%;
@@ -14608,20 +14784,44 @@ body.dependency-onboarding-active #dependency-setup-modal {
 .dashboard-bento-card {
   display: flex;
   flex-direction: column;
-  background: var(--bg-secondary);
-  border-radius: 14px;
-  border: 1px solid var(--border-color);
+  background: var(--dashboard-card-fill);
+  border-radius: 20px;
+  border: 1px solid var(--dashboard-card-border);
   padding: var(--space-md);
-  box-shadow: var(--shadow-soft);
+  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.04);
   transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
   min-width: 0;
   min-height: 0;
+  position: relative;
+  overflow: hidden;
 }
 
 .dashboard-bento-card:hover {
   transform: translateY(-2px);
-  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
-  border-color: var(--accent-primary);
+  box-shadow: 0 22px 44px rgba(2, 6, 23, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  border-color: color-mix(in srgb, var(--dashboard-card-accent) 54%, rgba(255, 255, 255, 0.08));
+}
+
+.dashboard-bento-card::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto auto 0;
+  width: min(42%, 180px);
+  height: 3px;
+  background: linear-gradient(90deg, var(--dashboard-card-accent), transparent);
+  opacity: 0.95;
+}
+
+.dashboard-bento-card::after {
+  content: "";
+  position: absolute;
+  width: 220px;
+  height: 220px;
+  right: -92px;
+  top: -118px;
+  background: radial-gradient(circle, color-mix(in srgb, var(--dashboard-card-accent) 16%, transparent), transparent 70%);
+  pointer-events: none;
+  opacity: 0.82;
 }
 
 /* Workspace Grid */
@@ -14633,31 +14833,56 @@ body.dependency-onboarding-active #dependency-setup-modal {
 
 /* Workspace Cards */
 .bento-workspace-card {
-  border-radius: 12px;
-  border: 1px solid var(--border-color);
-  background: var(--bg-secondary);
+  border-radius: 18px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.045), transparent 48%),
+    linear-gradient(180deg, rgba(17, 26, 41, 0.88), rgba(10, 16, 28, 0.9));
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
+  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, background 0.2s;
+  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.16);
+  position: relative;
 }
 
 .bento-workspace-card:hover {
   transform: translateY(-2px);
-  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
-  border-color: var(--accent-primary);
+  box-shadow: 0 20px 40px rgba(2, 6, 23, 0.22);
+  border-color: color-mix(in srgb, var(--accent-primary) 40%, rgba(255, 255, 255, 0.08));
+}
+
+.bento-workspace-card::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 4px;
+  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 90%, white 10%), transparent 80%);
+  opacity: 0.9;
+}
+
+.bento-workspace-card::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-primary) 7%, transparent), transparent 42%);
+  opacity: 0.6;
+  pointer-events: none;
 }
 
 .bento-workspace-icon {
-  width: 40px;
-  height: 40px;
-  background: var(--bg-tertiary);
-  border-radius: 10px;
+  width: 42px;
+  height: 42px;
+  background:
+    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.24), transparent 42%),
+    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(148, 163, 184, 0.04));
+  border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
-  border: 1px solid var(--border-color);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
 }
 
 .bento-workspace-card .workspace-card-header {
@@ -14675,24 +14900,25 @@ body.dependency-onboarding-active #dependency-setup-modal {
 .bento-workspace-card .workspace-info h3 {
   font-size: 1rem;
   margin: 0;
-  color: var(--text-primary);
+  color: color-mix(in srgb, var(--text-primary) 98%, white 2%);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  letter-spacing: -0.02em;
 }
 
 .bento-workspace-card .workspace-type {
-  font-size: 0.75rem;
+  font-size: 0.74rem;
   margin: 2px 0 0 0;
-  color: var(--text-primary);
-  opacity: 0.6;
+  color: color-mix(in srgb, var(--text-primary) 72%, transparent);
+  opacity: 1;
 }
 
 .bento-workspace-card .last-used {
   font-size: 0.75rem;
   margin: 0;
-  color: var(--text-primary);
-  opacity: 0.6;
+  color: color-mix(in srgb, var(--text-primary) 72%, transparent);
+  opacity: 1;
 }
 
 .bento-card-footer {
@@ -14700,8 +14926,8 @@ body.dependency-onboarding-active #dependency-setup-modal {
   justify-content: space-between;
   align-items: center;
   padding: 8px 14px;
-  background: var(--bg-tertiary);
-  border-top: 1px solid var(--border-color);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.02));
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
   gap: 8px;
   margin-top: auto;
 }
@@ -14726,31 +14952,44 @@ body.dependency-onboarding-active #dependency-setup-modal {
 .ports-dashboard-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
-  gap: var(--space-sm);
+  gap: 0.55rem;
+  align-content: start;
+  flex: 1;
 }
 
 .port-dashboard-card {
   display: flex;
-  align-items: flex-start;
-  gap: var(--space-sm);
-  padding: 10px 12px;
-  background: var(--bg-tertiary);
-  border-radius: 8px;
-  border-left: 4px solid var(--border-color);
+  align-items: center;
+  gap: 0.65rem;
+  padding: 0.75rem 0.8rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
   cursor: pointer;
-  transition: all 0.2s;
+  transition: transform 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
+  backdrop-filter: blur(12px);
 }
 
 .port-dashboard-card:hover {
-  background: var(--bg-hover);
-  transform: translateX(4px);
-  border-color: var(--accent-primary);
+  background: rgba(255, 255, 255, 0.08);
+  transform: translateY(-1px);
+  border-color: color-mix(in srgb, var(--accent-primary) 44%, rgba(255, 255, 255, 0.08));
+  box-shadow: 0 14px 24px rgba(2, 6, 23, 0.12);
 }
 
 .port-card-icon {
-  font-size: 1.3rem;
-  min-width: 28px;
+  width: 2.15rem;
+  height: 2.15rem;
+  min-width: 2.15rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.05rem;
   text-align: center;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
 }
 
 .port-card-info {
@@ -14763,16 +15002,17 @@ body.dependency-onboarding-active #dependency-setup-modal {
 .port-card-name {
   font-weight: 600;
   color: var(--text-primary);
-  font-size: 0.9rem;
+  font-size: 0.84rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  letter-spacing: -0.015em;
 }
 
 .port-card-context {
-  font-size: 0.75rem;
-  color: var(--text-primary);
-  opacity: 0.6;
+  font-size: 0.7rem;
+  color: color-mix(in srgb, var(--text-primary) 70%, transparent);
+  opacity: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -14780,12 +15020,12 @@ body.dependency-onboarding-active #dependency-setup-modal {
 
 .port-card-port {
   font-family: var(--font-mono);
-  font-size: 0.8rem;
-  background: var(--bg-primary);
-  padding: 3px 7px;
-  border-radius: 6px;
-  color: var(--text-primary);
-  border: 1px solid var(--border-color);
+  font-size: 0.74rem;
+  background: rgba(255, 255, 255, 0.06);
+  padding: 0.22rem 0.52rem;
+  border-radius: 999px;
+  color: color-mix(in srgb, var(--text-primary) 90%, white 10%);
+  border: 1px solid rgba(255, 255, 255, 0.08);
   margin-left: auto;
 }
 
@@ -14849,26 +15089,132 @@ body.dependency-onboarding-active #dependency-setup-modal {
 
 .dashboard-compact-tab {
   appearance: none;
-  border: 1px solid var(--border-color);
-  background: var(--bg-secondary);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.05);
   color: var(--text-primary);
-  border-radius: 10px;
+  border-radius: 12px;
   padding: 0.65rem 0.8rem;
   font-size: 0.85rem;
   font-weight: 600;
   cursor: pointer;
-  transition: background 0.2s, border-color 0.2s, transform 0.2s;
+  transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
+  backdrop-filter: blur(12px);
 }
 
 .dashboard-compact-tab:hover {
-  border-color: var(--accent-primary);
-  background: var(--bg-hover);
+  border-color: color-mix(in srgb, var(--accent-primary) 50%, rgba(255, 255, 255, 0.08));
+  background: rgba(255, 255, 255, 0.08);
+  box-shadow: 0 10px 20px rgba(2, 6, 23, 0.1);
 }
 
 .dashboard-compact-tab.is-active {
-  background: color-mix(in srgb, var(--accent-primary) 18%, var(--bg-secondary));
-  border-color: color-mix(in srgb, var(--accent-primary) 50%, var(--border-color));
+  background: color-mix(in srgb, var(--accent-primary) 20%, rgba(255, 255, 255, 0.08));
+  border-color: color-mix(in srgb, var(--accent-primary) 56%, rgba(255, 255, 255, 0.08));
   color: var(--text-primary);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+.dashboard-status { --dashboard-card-accent: color-mix(in srgb, var(--accent-primary) 78%, white 22%); }
+.dashboard-telemetry { --dashboard-card-accent: color-mix(in srgb, var(--accent-primary-hover) 76%, white 16%); }
+.dashboard-polecats { --dashboard-card-accent: var(--accent-warning); }
+.dashboard-discord { --dashboard-card-accent: color-mix(in srgb, var(--accent-warning) 55%, var(--accent-danger) 45%); }
+.dashboard-projects { --dashboard-card-accent: var(--accent-success); }
+.dashboard-advice { --dashboard-card-accent: color-mix(in srgb, var(--accent-primary) 62%, var(--accent-success) 38%); }
+.dashboard-readiness { --dashboard-card-accent: color-mix(in srgb, var(--accent-success) 74%, white 26%); }
+.dashboard-quick-links { --dashboard-card-accent: color-mix(in srgb, var(--accent-primary) 84%, white 16%); }
+.ports-dashboard-section { --dashboard-card-accent: color-mix(in srgb, var(--accent-success) 58%, var(--accent-primary) 42%); }
+
+.dashboard-layout-desktop .dashboard-workspaces-grid {
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0.7rem;
+}
+
+.dashboard-layout-desktop .bento-workspace-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1.4fr) auto auto;
+  grid-template-areas: "header body footer";
+  align-items: center;
+  gap: 0.95rem;
+  min-height: 84px;
+  padding: 0.95rem 1rem 0.95rem 1.05rem;
+  background:
+    linear-gradient(90deg, color-mix(in srgb, var(--accent-primary) 6%, transparent), transparent 35%),
+    linear-gradient(180deg, rgba(12, 19, 32, 0.9), rgba(9, 15, 25, 0.94));
+}
+
+.dashboard-layout-desktop .bento-workspace-card .workspace-card-header {
+  grid-area: header;
+  padding: 0;
+  margin: 0;
+  min-width: 0;
+  gap: 0.85rem;
+}
+
+.dashboard-layout-desktop .bento-workspace-card .workspace-card-body {
+  grid-area: body;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  min-width: 0;
+}
+
+.dashboard-layout-desktop .bento-workspace-card .workspace-meta {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  padding: 0.42rem 0.68rem;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.dashboard-layout-desktop .bento-workspace-card .workspace-card-footer {
+  grid-area: footer;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  justify-content: flex-end;
+}
+
+.dashboard-layout-desktop .bento-workspace-card .workspace-health {
+  margin-top: 0;
+  padding: 0.5rem 0.65rem;
+}
+
+.dashboard-layout-desktop .bento-workspace-card .health-subtext {
+  display: none;
+}
+
+.dashboard-layout-desktop .bento-workspace-card.active {
+  border-color: color-mix(in srgb, var(--accent-primary) 54%, rgba(255, 255, 255, 0.08));
+  box-shadow: 0 22px 44px rgba(2, 6, 23, 0.24);
+  background:
+    linear-gradient(90deg, color-mix(in srgb, var(--accent-primary) 12%, transparent), transparent 40%),
+    linear-gradient(180deg, rgba(10, 28, 32, 0.92), rgba(9, 15, 25, 0.94));
+}
+
+.dashboard-layout-desktop .bento-workspace-card .workspace-info h3 {
+  font-size: 1.02rem;
+  font-weight: 690;
+}
+
+.dashboard-layout-desktop .bento-workspace-card .workspace-type {
+  font-size: 0.72rem;
+}
+
+.dashboard-layout-desktop .bento-workspace-card .last-used {
+  font-size: 0.72rem;
+}
+
+.dashboard-layout-desktop .workspace-open-btn {
+  padding: 0.48rem 0.82rem;
+  border-radius: 999px;
+  font-size: 0.78rem;
+  font-weight: 620;
+  box-shadow: 0 10px 20px rgba(2, 6, 23, 0.12);
 }
 
 .dashboard-compact-panel-shell {
@@ -14900,14 +15246,22 @@ body.dependency-onboarding-active #dependency-setup-modal {
 }
 
 .dashboard-layout-desktop .dashboard-content-right .dashboard-bento-card {
-  padding: 12px;
-  border-radius: 12px;
+  padding: 0.9rem;
+  border-radius: 18px;
 }
 
 .dashboard-layout-desktop .dashboard-resource-cards .dashboard-bento-card {
   height: 100%;
 }
 
+.dashboard-layout-desktop .dashboard-content-right > .dashboard-resource-cards:only-child {
+  height: 100%;
+}
+
+.dashboard-layout-desktop .dashboard-content-right > .dashboard-resource-cards:only-child > .dashboard-bento-card:only-child {
+  min-height: 100%;
+}
+
 .dashboard-layout-desktop .dashboard-content-right .dashboard-bento-header {
   margin-bottom: 8px;
   font-size: 0.98rem;
@@ -14933,7 +15287,7 @@ body.dependency-onboarding-active #dependency-setup-modal {
 }
 
 .dashboard-layout-desktop .dashboard-content-right .port-dashboard-card {
-  padding: 9px 10px;
+  padding: 0.72rem 0.76rem;
 }
 
 .dashboard-layout-compact .dashboard-bento-card {
@@ -15012,6 +15366,7 @@ body.dependency-onboarding-active #dependency-setup-modal {
 @media (max-width: 1100px) {
   .dashboard-wrapper {
     gap: var(--space-sm);
+    border-radius: 26px;
   }
 
   .dashboard-title-group {
@@ -15065,6 +15420,7 @@ body.dependency-onboarding-active #dependency-setup-modal {
 @media (max-width: 460px) {
   .dashboard-wrapper {
     padding: 0.7rem;
+    border-radius: 22px;
   }
 
   .dashboard-compact-tabs {

From feb616d12d0fcf70254bd2283a4c78ce87d313fc Mon Sep 17 00:00:00 2001
From: AnrokX <192667251+AnrokX@users.noreply.github.com>
Date: Thu, 12 Mar 2026 14:19:28 -0600
Subject: [PATCH 12/16] fix: add dashboard side rail

---
 client/dashboard.js |  98 +++++++++++--
 client/styles.css   | 342 +++++++++++++++++++++++++++++++++++++-------
 2 files changed, 377 insertions(+), 63 deletions(-)

diff --git a/client/dashboard.js b/client/dashboard.js
index b45b9947..c60281f5 100644
--- a/client/dashboard.js
+++ b/client/dashboard.js
@@ -315,6 +315,7 @@ class Dashboard {
     if (visibility.workspacesAll !== false) {
       workspaceCards.push(...inactiveWorkspaces.map((ws) => this.generateWorkspaceCard(ws, false)));
     }
+    const totalWorkspaceCount = workspaceCards.length;
 
     const workspaceMeta = [
       visibility.workspacesActive !== false ? `${activeWorkspaces.length} active` : '',
@@ -354,11 +355,65 @@ class Dashboard {
       `
       : '';
     const desktopResourceStack = [processSection, desktopResourcesGrid].filter(Boolean).join('');
-    const desktopLayout = (workspaceSection && desktopResourceStack)
+    const desktopSidebar = `
+      <aside class="dashboard-side-panel">
+        <div class="dashboard-side-brand">
+          <div class="dashboard-side-title-group">
+            <div class="dashboard-side-title-icon" style="font-size:24px;">🏠</div>
+            <div class="dashboard-side-title-copy">
+              <h1>Agent Workspace</h1>
+              <p>${escapeHtml(totalWorkspaceCount)} workspace${totalWorkspaceCount === 1 ? '' : 's'} ready to open</p>
+            </div>
+          </div>
+          <div class="dashboard-side-stats">
+            <div class="dashboard-side-stat">
+              <strong>${escapeHtml(activeWorkspaces.length)}</strong>
+              <span>Active</span>
+            </div>
+            <div class="dashboard-side-stat">
+              <strong>${escapeHtml(inactiveWorkspaces.length)}</strong>
+              <span>Standby</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="dashboard-side-stack">
+          <div class="dashboard-side-section-label">Visible Panels</div>
+          <div class="dashboard-side-pill is-active">
+            <span>Workspaces</span>
+            <strong>${escapeHtml(totalWorkspaceCount)}</strong>
+          </div>
+          ${desktopResourceStack ? `
+            <div class="dashboard-side-pill">
+              <span>Resources</span>
+              <strong>${escapeHtml(resourcesCards.length)}</strong>
+            </div>
+          ` : ''}
+          ${processSection ? `
+            <div class="dashboard-side-pill">
+              <span>Process</span>
+              <strong>Live</strong>
+            </div>
+          ` : ''}
+        </div>
+
+        ${(visibility.createSection !== false) ? `
+          <div class="dashboard-side-action">
+            <div class="dashboard-side-action-copy">
+              <strong>New Workspace</strong>
+              <span>Start another environment without leaving the dashboard.</span>
+            </div>
+            <button class="btn-primary workspace-create-empty-btn dashboard-side-create-btn">
+              ➕ New Workspace
+            </button>
+          </div>
+        ` : ''}
+      </aside>
+    `;
+    const desktopBody = (workspaceSection && desktopResourceStack)
       ? `
         <div class="dashboard-main-content">
           <div class="dashboard-content-left">
-            ${createSection}
             ${workspaceSection}
           </div>
           <div class="dashboard-content-right dashboard-resource-stack">
@@ -366,7 +421,28 @@ class Dashboard {
           </div>
         </div>
       `
-      : ([createSection, workspaceSection, desktopResourceStack].filter(Boolean).join(''));
+      : `
+        <div class="dashboard-main-content dashboard-main-content-single">
+          ${workspaceSection ? `
+            <div class="dashboard-content-left">
+              ${workspaceSection}
+            </div>
+          ` : ''}
+          ${desktopResourceStack ? `
+            <div class="dashboard-content-right dashboard-resource-stack">
+              ${desktopResourceStack}
+            </div>
+          ` : ''}
+        </div>
+      `;
+    const desktopLayout = `
+      <div class="dashboard-desktop-shell">
+        ${desktopSidebar}
+        <div class="dashboard-desktop-body">
+          ${desktopBody}
+        </div>
+      </div>
+    `;
 
     const compactLayout = `
       <div class="dashboard-compact-shell">
@@ -404,15 +480,17 @@ class Dashboard {
           ${showProcessBanner ? `<div id="dashboard-process-banner" class="process-banner" title="WIP and queue status"></div>` : '<div></div>'}
         </div>
         
-        <div class="dashboard-header-modern">
-          <div class="dashboard-title-group">
-            <div class="dashboard-title-icon" style="font-size:24px;">🏠</div>
-            <div>
-              <h1>Agent Workspace</h1>
-              <p>Select a workspace to begin development</p>
+        ${isCompactLayout ? `
+          <div class="dashboard-header-modern">
+            <div class="dashboard-title-group">
+              <div class="dashboard-title-icon" style="font-size:24px;">🏠</div>
+              <div>
+                <h1>Agent Workspace</h1>
+                <p>Select a workspace to begin development</p>
+              </div>
             </div>
           </div>
-        </div>
+        ` : ''}
 
         ${isCompactLayout ? compactLayout : desktopLayout}
       </div>
diff --git a/client/styles.css b/client/styles.css
index a8bb5369..e518e10a 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -14586,6 +14586,10 @@ body.dependency-onboarding-active #dependency-setup-modal {
   backdrop-filter: blur(20px);
 }
 
+.dashboard-layout-desktop {
+  grid-template-rows: auto 1fr;
+}
+
 .dashboard-wrapper::before,
 .dashboard-wrapper::after {
   content: "";
@@ -14625,37 +14629,255 @@ body.dependency-onboarding-active #dependency-setup-modal {
   display: none;
 }
 
+.dashboard-desktop-shell {
+  display: grid;
+  grid-template-columns: 220px minmax(0, 1fr);
+  gap: 0.9rem;
+  min-height: 0;
+  position: relative;
+  z-index: 1;
+}
+
+.dashboard-desktop-body {
+  min-width: 0;
+  min-height: 0;
+  display: grid;
+}
+
+.dashboard-side-panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+  min-width: 0;
+  min-height: 0;
+  padding: 0.9rem;
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 18%),
+    linear-gradient(180deg, rgba(12, 21, 36, 0.88), rgba(7, 13, 24, 0.9));
+  box-shadow: 0 22px 50px rgba(2, 6, 23, 0.18);
+  overflow: hidden;
+}
+
+.dashboard-side-panel::before,
+.dashboard-side-panel::after {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+}
+
+.dashboard-side-panel::before {
+  inset: 0;
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 14%, transparent), transparent 24%),
+    radial-gradient(220px 220px at 18% 12%, rgba(255, 255, 255, 0.07), transparent 72%);
+  opacity: 0.9;
+}
+
+.dashboard-side-panel::after {
+  inset: 0 auto 0 0;
+  width: 2px;
+  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 54%, transparent), transparent 85%);
+  opacity: 0.9;
+}
+
+.dashboard-side-brand,
+.dashboard-side-stack,
+.dashboard-side-action {
+  position: relative;
+  z-index: 1;
+}
+
+.dashboard-side-brand {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.dashboard-side-title-group {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-width: 0;
+}
+
+.dashboard-side-title-icon {
+  width: 46px;
+  height: 46px;
+  border-radius: 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--text-on-accent);
+  background:
+    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.28), transparent 38%),
+    linear-gradient(145deg, color-mix(in srgb, var(--accent-primary) 84%, white 16%), color-mix(in srgb, var(--accent-primary-pressed) 88%, #08111d 12%));
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: 0 14px 28px rgba(2, 6, 23, 0.2);
+}
+
+.dashboard-side-title-copy {
+  min-width: 0;
+}
+
+.dashboard-side-title-copy h1 {
+  margin: 0;
+  font-size: 1.02rem;
+  font-weight: 720;
+  letter-spacing: -0.024em;
+  color: color-mix(in srgb, var(--text-primary) 98%, white 2%);
+}
+
+.dashboard-side-title-copy p {
+  margin: 0.18rem 0 0;
+  font-size: 0.75rem;
+  line-height: 1.35;
+  color: color-mix(in srgb, var(--text-primary) 72%, transparent);
+}
+
+.dashboard-side-stats {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.5rem;
+}
+
+.dashboard-side-stat {
+  display: grid;
+  gap: 0.18rem;
+  padding: 0.65rem 0.55rem;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(255, 255, 255, 0.045);
+}
+
+.dashboard-side-stat strong {
+  font-size: 1rem;
+  font-weight: 720;
+  letter-spacing: -0.03em;
+}
+
+.dashboard-side-stat span {
+  font-size: 0.67rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: color-mix(in srgb, var(--text-primary) 66%, transparent);
+}
+
+.dashboard-side-stack {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.dashboard-side-section-label {
+  font-size: 0.68rem;
+  font-weight: 680;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--text-primary) 58%, transparent);
+}
+
+.dashboard-side-pill {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.55rem;
+  min-width: 0;
+  padding: 0.62rem 0.7rem;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(255, 255, 255, 0.04);
+  color: color-mix(in srgb, var(--text-primary) 92%, white 8%);
+  font-size: 0.8rem;
+}
+
+.dashboard-side-pill span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dashboard-side-pill strong {
+  font-size: 0.74rem;
+  font-weight: 700;
+  padding: 0.18rem 0.42rem;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.dashboard-side-pill.is-active {
+  border-color: color-mix(in srgb, var(--accent-primary) 42%, rgba(255, 255, 255, 0.08));
+  background: color-mix(in srgb, var(--accent-primary) 16%, rgba(255, 255, 255, 0.04));
+}
+
+.dashboard-side-action {
+  margin-top: auto;
+  display: grid;
+  gap: 0.55rem;
+}
+
+.dashboard-side-action-copy {
+  display: grid;
+  gap: 0.22rem;
+}
+
+.dashboard-side-action-copy strong {
+  font-size: 0.82rem;
+  font-weight: 680;
+  color: color-mix(in srgb, var(--text-primary) 95%, white 5%);
+}
+
+.dashboard-side-action-copy span {
+  font-size: 0.74rem;
+  line-height: 1.35;
+  color: color-mix(in srgb, var(--text-primary) 68%, transparent);
+}
+
+.dashboard-side-create-btn {
+  width: 100%;
+  justify-content: center;
+  padding: 0.62rem 0.78rem !important;
+  border-radius: 12px !important;
+  font-size: 0.8rem !important;
+  font-weight: 660 !important;
+}
+
 .dashboard-main-content {
   display: grid;
-  grid-template-columns: minmax(0, 1.7fr) minmax(22rem, 0.95fr);
-  gap: 1rem;
+  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.92fr);
+  gap: 0.85rem;
   align-items: stretch;
   min-height: 0;
   position: relative;
   z-index: 1;
 }
 
+.dashboard-main-content-single {
+  grid-template-columns: minmax(0, 1fr);
+}
+
 .dashboard-content-left {
   display: grid;
-  gap: 0.9rem;
+  gap: 0.72rem;
   min-width: 0;
   align-content: start;
   min-height: 0;
   position: relative;
   isolation: isolate;
-  padding: 1.05rem 1.05rem 1.1rem;
+  padding: 0.85rem 0.9rem 0.92rem;
   overflow: hidden;
 }
 
 .dashboard-content-right {
   display: grid;
-  gap: 0.9rem;
+  gap: 0.72rem;
   min-width: 0;
   align-content: start;
   min-height: 0;
   position: relative;
   isolation: isolate;
-  padding: 1.05rem 1.05rem 1.1rem;
+  padding: 0.85rem 0.9rem 0.92rem;
   overflow: hidden;
 }
 
@@ -14670,7 +14892,7 @@ body.dependency-onboarding-active #dependency-setup-modal {
   content: "";
   position: absolute;
   inset: 0;
-  border-radius: 28px;
+  border-radius: 18px;
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 18%),
     var(--dashboard-panel-fill);
@@ -14684,8 +14906,8 @@ body.dependency-onboarding-active #dependency-setup-modal {
 .dashboard-content-right::after {
   content: "";
   position: absolute;
-  left: 22px;
-  right: 22px;
+  left: 18px;
+  right: 18px;
   top: 0;
   height: 1px;
   background: linear-gradient(90deg, color-mix(in srgb, var(--accent-primary) 36%, transparent), transparent 72%);
@@ -14785,9 +15007,9 @@ body.dependency-onboarding-active #dependency-setup-modal {
   display: flex;
   flex-direction: column;
   background: var(--dashboard-card-fill);
-  border-radius: 20px;
+  border-radius: 16px;
   border: 1px solid var(--dashboard-card-border);
-  padding: var(--space-md);
+  padding: 0.9rem;
   box-shadow: 0 18px 40px rgba(2, 6, 23, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.04);
   transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
   min-width: 0;
@@ -15125,63 +15347,56 @@ body.dependency-onboarding-active #dependency-setup-modal {
 .ports-dashboard-section { --dashboard-card-accent: color-mix(in srgb, var(--accent-success) 58%, var(--accent-primary) 42%); }
 
 .dashboard-layout-desktop .dashboard-workspaces-grid {
-  grid-template-columns: minmax(0, 1fr);
-  gap: 0.7rem;
+  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
+  gap: 0.72rem;
 }
 
 .dashboard-layout-desktop .bento-workspace-card {
-  display: grid;
-  grid-template-columns: minmax(0, 1.4fr) auto auto;
-  grid-template-areas: "header body footer";
-  align-items: center;
-  gap: 0.95rem;
-  min-height: 84px;
-  padding: 0.95rem 1rem 0.95rem 1.05rem;
+  display: flex;
+  gap: 0;
+  min-height: 132px;
+  padding: 0;
+  border-radius: 12px;
   background:
-    linear-gradient(90deg, color-mix(in srgb, var(--accent-primary) 6%, transparent), transparent 35%),
-    linear-gradient(180deg, rgba(12, 19, 32, 0.9), rgba(9, 15, 25, 0.94));
+    linear-gradient(125deg, color-mix(in srgb, var(--accent-primary) 7%, transparent), transparent 42%),
+    linear-gradient(180deg, rgba(12, 19, 32, 0.9), rgba(9, 15, 25, 0.95));
 }
 
 .dashboard-layout-desktop .bento-workspace-card .workspace-card-header {
-  grid-area: header;
-  padding: 0;
+  padding: 0.8rem 0.84rem 0.2rem;
   margin: 0;
   min-width: 0;
-  gap: 0.85rem;
+  gap: 0.68rem;
+  align-items: flex-start;
 }
 
 .dashboard-layout-desktop .bento-workspace-card .workspace-card-body {
-  grid-area: body;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 0.75rem;
+  padding: 0 0.84rem 0.58rem;
+  display: block;
   min-width: 0;
 }
 
 .dashboard-layout-desktop .bento-workspace-card .workspace-meta {
-  display: inline-flex;
-  align-items: center;
-  white-space: nowrap;
-  padding: 0.42rem 0.68rem;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  display: block;
+  white-space: normal;
+  padding: 0;
+  background: transparent;
+  border: 0;
 }
 
 .dashboard-layout-desktop .bento-workspace-card .workspace-card-footer {
-  grid-area: footer;
-  padding: 0;
+  padding: 0 0.84rem 0.84rem;
   margin: 0;
   background: transparent;
   border: 0;
-  justify-content: flex-end;
+  justify-content: space-between;
+  gap: 0.5rem;
 }
 
 .dashboard-layout-desktop .bento-workspace-card .workspace-health {
-  margin-top: 0;
-  padding: 0.5rem 0.65rem;
+  margin-top: 0.45rem;
+  padding: 0.45rem 0.55rem;
+  border-radius: 10px;
 }
 
 .dashboard-layout-desktop .bento-workspace-card .health-subtext {
@@ -15192,31 +15407,51 @@ body.dependency-onboarding-active #dependency-setup-modal {
   border-color: color-mix(in srgb, var(--accent-primary) 54%, rgba(255, 255, 255, 0.08));
   box-shadow: 0 22px 44px rgba(2, 6, 23, 0.24);
   background:
-    linear-gradient(90deg, color-mix(in srgb, var(--accent-primary) 12%, transparent), transparent 40%),
+    linear-gradient(125deg, color-mix(in srgb, var(--accent-primary) 13%, transparent), transparent 45%),
     linear-gradient(180deg, rgba(10, 28, 32, 0.92), rgba(9, 15, 25, 0.94));
 }
 
 .dashboard-layout-desktop .bento-workspace-card .workspace-info h3 {
-  font-size: 1.02rem;
+  font-size: 0.98rem;
   font-weight: 690;
+  line-height: 1.18;
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
 }
 
 .dashboard-layout-desktop .bento-workspace-card .workspace-type {
-  font-size: 0.72rem;
+  font-size: 0.68rem;
+  margin-top: 0.15rem;
 }
 
 .dashboard-layout-desktop .bento-workspace-card .last-used {
-  font-size: 0.72rem;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.28rem 0.48rem;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  font-size: 0.68rem;
 }
 
 .dashboard-layout-desktop .workspace-open-btn {
-  padding: 0.48rem 0.82rem;
-  border-radius: 999px;
-  font-size: 0.78rem;
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0.48rem 0.64rem;
+  border-radius: 10px;
+  font-size: 0.74rem;
   font-weight: 620;
   box-shadow: 0 10px 20px rgba(2, 6, 23, 0.12);
 }
 
+.dashboard-layout-desktop .bento-action-group .btn-icon {
+  width: 26px;
+  height: 26px;
+  border-radius: 8px;
+}
+
 .dashboard-compact-panel-shell {
   min-height: 0;
 }
@@ -15246,8 +15481,8 @@ body.dependency-onboarding-active #dependency-setup-modal {
 }
 
 .dashboard-layout-desktop .dashboard-content-right .dashboard-bento-card {
-  padding: 0.9rem;
-  border-radius: 18px;
+  padding: 0.8rem;
+  border-radius: 12px;
 }
 
 .dashboard-layout-desktop .dashboard-resource-cards .dashboard-bento-card {
@@ -15287,7 +15522,8 @@ body.dependency-onboarding-active #dependency-setup-modal {
 }
 
 .dashboard-layout-desktop .dashboard-content-right .port-dashboard-card {
-  padding: 0.72rem 0.76rem;
+  padding: 0.66rem 0.7rem;
+  border-radius: 10px;
 }
 
 .dashboard-layout-compact .dashboard-bento-card {

From 7c3a8f5cd620e99147a0d6c92420d27a2b4ce7dd Mon Sep 17 00:00:00 2001
From: AnrokX <192667251+AnrokX@users.noreply.github.com>
Date: Thu, 12 Mar 2026 14:34:26 -0600
Subject: [PATCH 13/16] fix: refine dashboard rail layout

---
 client/dashboard.js |  39 ++----------
 client/styles.css   | 151 +++++++++++++++++---------------------------
 2 files changed, 64 insertions(+), 126 deletions(-)

diff --git a/client/dashboard.js b/client/dashboard.js
index c60281f5..203b9a0f 100644
--- a/client/dashboard.js
+++ b/client/dashboard.js
@@ -317,17 +317,9 @@ class Dashboard {
     }
     const totalWorkspaceCount = workspaceCards.length;
 
-    const workspaceMeta = [
-      visibility.workspacesActive !== false ? `${activeWorkspaces.length} active` : '',
-      visibility.workspacesAll !== false ? `${inactiveWorkspaces.length} more` : ''
-    ].filter(Boolean).join(' • ');
-
     const workspaceSection = workspaceCards.length ? `
       <div class="dashboard-bento-section dashboard-workspaces-section">
-        <h2 class="dashboard-section-title">
-          Workspaces
-          ${workspaceMeta ? `<span class="dashboard-section-meta">${escapeHtml(workspaceMeta)}</span>` : ''}
-        </h2>
+        <h2 class="dashboard-section-title">Workspaces</h2>
         <div class="workspace-grid bento-workspace-grid dashboard-workspaces-grid">
           ${workspaceCards.join('')}
         </div>
@@ -357,14 +349,7 @@ class Dashboard {
     const desktopResourceStack = [processSection, desktopResourcesGrid].filter(Boolean).join('');
     const desktopSidebar = `
       <aside class="dashboard-side-panel">
-        <div class="dashboard-side-brand">
-          <div class="dashboard-side-title-group">
-            <div class="dashboard-side-title-icon" style="font-size:24px;">🏠</div>
-            <div class="dashboard-side-title-copy">
-              <h1>Agent Workspace</h1>
-              <p>${escapeHtml(totalWorkspaceCount)} workspace${totalWorkspaceCount === 1 ? '' : 's'} ready to open</p>
-            </div>
-          </div>
+        <div class="dashboard-side-overview">
           <div class="dashboard-side-stats">
             <div class="dashboard-side-stat">
               <strong>${escapeHtml(activeWorkspaces.length)}</strong>
@@ -378,31 +363,14 @@ class Dashboard {
         </div>
 
         <div class="dashboard-side-stack">
-          <div class="dashboard-side-section-label">Visible Panels</div>
           <div class="dashboard-side-pill is-active">
             <span>Workspaces</span>
             <strong>${escapeHtml(totalWorkspaceCount)}</strong>
           </div>
-          ${desktopResourceStack ? `
-            <div class="dashboard-side-pill">
-              <span>Resources</span>
-              <strong>${escapeHtml(resourcesCards.length)}</strong>
-            </div>
-          ` : ''}
-          ${processSection ? `
-            <div class="dashboard-side-pill">
-              <span>Process</span>
-              <strong>Live</strong>
-            </div>
-          ` : ''}
         </div>
 
         ${(visibility.createSection !== false) ? `
           <div class="dashboard-side-action">
-            <div class="dashboard-side-action-copy">
-              <strong>New Workspace</strong>
-              <span>Start another environment without leaving the dashboard.</span>
-            </div>
             <button class="btn-primary workspace-create-empty-btn dashboard-side-create-btn">
               ➕ New Workspace
             </button>
@@ -439,6 +407,9 @@ class Dashboard {
       <div class="dashboard-desktop-shell">
         ${desktopSidebar}
         <div class="dashboard-desktop-body">
+          <div class="dashboard-desktop-header">
+            <h1>Agent Workspace</h1>
+          </div>
           ${desktopBody}
         </div>
       </div>
diff --git a/client/styles.css b/client/styles.css
index e518e10a..9e966a45 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -14554,6 +14554,7 @@ body.dependency-onboarding-active #dependency-setup-modal {
 
 /* Dashboard Layout */
 .dashboard-wrapper {
+  --dashboard-shell-pad: clamp(0.85rem, 1.2vw, 1.3rem);
   --dashboard-window-fill:
     linear-gradient(165deg, rgba(7, 13, 24, 0.94) 0%, rgba(8, 16, 28, 0.88) 48%, rgba(6, 12, 24, 0.96) 100%);
   --dashboard-panel-fill: linear-gradient(180deg, rgba(9, 16, 28, 0.68), rgba(8, 13, 24, 0.34));
@@ -14564,7 +14565,7 @@ body.dependency-onboarding-active #dependency-setup-modal {
   --dashboard-card-accent: color-mix(in srgb, var(--accent-primary) 80%, white 20%);
   width: 100%;
   margin: 0;
-  padding: clamp(0.85rem, 1.2vw, 1.3rem);
+  padding: var(--dashboard-shell-pad);
   box-sizing: border-box;
   display: grid;
   grid-template-rows: auto auto 1fr;
@@ -14631,33 +14632,38 @@ body.dependency-onboarding-active #dependency-setup-modal {
 
 .dashboard-desktop-shell {
   display: grid;
-  grid-template-columns: 220px minmax(0, 1fr);
-  gap: 0.9rem;
+  grid-template-columns: 196px minmax(0, 1fr);
+  gap: 0;
   min-height: 0;
   position: relative;
   z-index: 1;
+  margin: 0 calc(var(--dashboard-shell-pad) * -1) calc(var(--dashboard-shell-pad) * -1);
 }
 
 .dashboard-desktop-body {
+  padding: 0.1rem var(--dashboard-shell-pad) var(--dashboard-shell-pad) 0.95rem;
   min-width: 0;
   min-height: 0;
   display: grid;
+  grid-template-rows: auto 1fr;
+  gap: 0.55rem;
 }
 
 .dashboard-side-panel {
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: 0.85rem;
+  gap: 0.8rem;
   min-width: 0;
   min-height: 0;
-  padding: 0.9rem;
-  border-radius: 16px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  padding: 0.95rem 0.75rem 0.95rem calc(var(--dashboard-shell-pad) + 0.75rem);
+  border: 0;
+  border-right: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 0;
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 18%),
     linear-gradient(180deg, rgba(12, 21, 36, 0.88), rgba(7, 13, 24, 0.9));
-  box-shadow: 0 22px 50px rgba(2, 6, 23, 0.18);
+  box-shadow: 18px 0 38px rgba(2, 6, 23, 0.14);
   overflow: hidden;
 }
 
@@ -14677,66 +14683,19 @@ body.dependency-onboarding-active #dependency-setup-modal {
 }
 
 .dashboard-side-panel::after {
-  inset: 0 auto 0 0;
+  inset: 0 0 0 auto;
   width: 2px;
   background: linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 54%, transparent), transparent 85%);
   opacity: 0.9;
 }
 
-.dashboard-side-brand,
+.dashboard-side-overview,
 .dashboard-side-stack,
 .dashboard-side-action {
   position: relative;
   z-index: 1;
 }
 
-.dashboard-side-brand {
-  display: grid;
-  gap: 0.75rem;
-}
-
-.dashboard-side-title-group {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  min-width: 0;
-}
-
-.dashboard-side-title-icon {
-  width: 46px;
-  height: 46px;
-  border-radius: 12px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  color: var(--text-on-accent);
-  background:
-    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.28), transparent 38%),
-    linear-gradient(145deg, color-mix(in srgb, var(--accent-primary) 84%, white 16%), color-mix(in srgb, var(--accent-primary-pressed) 88%, #08111d 12%));
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  box-shadow: 0 14px 28px rgba(2, 6, 23, 0.2);
-}
-
-.dashboard-side-title-copy {
-  min-width: 0;
-}
-
-.dashboard-side-title-copy h1 {
-  margin: 0;
-  font-size: 1.02rem;
-  font-weight: 720;
-  letter-spacing: -0.024em;
-  color: color-mix(in srgb, var(--text-primary) 98%, white 2%);
-}
-
-.dashboard-side-title-copy p {
-  margin: 0.18rem 0 0;
-  font-size: 0.75rem;
-  line-height: 1.35;
-  color: color-mix(in srgb, var(--text-primary) 72%, transparent);
-}
-
 .dashboard-side-stats {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -14747,7 +14706,7 @@ body.dependency-onboarding-active #dependency-setup-modal {
   display: grid;
   gap: 0.18rem;
   padding: 0.65rem 0.55rem;
-  border-radius: 10px;
+  border-radius: 3px;
   border: 1px solid rgba(255, 255, 255, 0.06);
   background: rgba(255, 255, 255, 0.045);
 }
@@ -14770,26 +14729,18 @@ body.dependency-onboarding-active #dependency-setup-modal {
   gap: 0.45rem;
 }
 
-.dashboard-side-section-label {
-  font-size: 0.68rem;
-  font-weight: 680;
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
-  color: color-mix(in srgb, var(--text-primary) 58%, transparent);
-}
-
 .dashboard-side-pill {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.55rem;
   min-width: 0;
-  padding: 0.62rem 0.7rem;
-  border-radius: 10px;
+  padding: 0.58rem 0.62rem;
+  border-radius: 0;
   border: 1px solid rgba(255, 255, 255, 0.06);
   background: rgba(255, 255, 255, 0.04);
   color: color-mix(in srgb, var(--text-primary) 92%, white 8%);
-  font-size: 0.8rem;
+  font-size: 0.74rem;
 }
 
 .dashboard-side-pill span {
@@ -14799,10 +14750,10 @@ body.dependency-onboarding-active #dependency-setup-modal {
 }
 
 .dashboard-side-pill strong {
-  font-size: 0.74rem;
+  font-size: 0.7rem;
   font-weight: 700;
   padding: 0.18rem 0.42rem;
-  border-radius: 8px;
+  border-radius: 0;
   background: rgba(255, 255, 255, 0.06);
 }
 
@@ -14813,34 +14764,49 @@ body.dependency-onboarding-active #dependency-setup-modal {
 
 .dashboard-side-action {
   margin-top: auto;
-  display: grid;
-  gap: 0.55rem;
+  display: block;
 }
 
-.dashboard-side-action-copy {
-  display: grid;
-  gap: 0.22rem;
+.dashboard-side-create-btn {
+  width: 100%;
+  justify-content: center;
+  padding: 0.7rem 0.78rem !important;
+  border-radius: 4px !important;
+  color: #09110b !important;
+  border: 1px solid color-mix(in srgb, var(--accent-success) 66%, rgba(255, 255, 255, 0.12)) !important;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 42%),
+    linear-gradient(180deg, color-mix(in srgb, var(--accent-success) 66%, white 34%) 0%, color-mix(in srgb, var(--accent-success) 86%, #08111d 14%) 100%) !important;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.44),
+    0 14px 24px rgba(2, 6, 23, 0.16) !important;
+  font-size: 0.8rem !important;
+  font-weight: 660 !important;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.16);
 }
 
-.dashboard-side-action-copy strong {
-  font-size: 0.82rem;
-  font-weight: 680;
-  color: color-mix(in srgb, var(--text-primary) 95%, white 5%);
+.dashboard-side-create-btn:hover {
+  transform: translateY(-1px);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.44),
+    0 18px 28px rgba(2, 6, 23, 0.2) !important;
 }
 
-.dashboard-side-action-copy span {
-  font-size: 0.74rem;
-  line-height: 1.35;
-  color: color-mix(in srgb, var(--text-primary) 68%, transparent);
+.dashboard-desktop-header {
+  display: grid;
+  justify-items: center;
+  align-items: center;
+  min-width: 0;
+  text-align: center;
+  padding: 0.15rem 0 0.1rem;
 }
 
-.dashboard-side-create-btn {
-  width: 100%;
-  justify-content: center;
-  padding: 0.62rem 0.78rem !important;
-  border-radius: 12px !important;
-  font-size: 0.8rem !important;
-  font-weight: 660 !important;
+.dashboard-desktop-header h1 {
+  margin: 0;
+  font-size: 1.28rem;
+  font-weight: 760;
+  letter-spacing: -0.035em;
+  color: color-mix(in srgb, var(--text-primary) 97%, white 3%);
 }
 
 .dashboard-main-content {
@@ -15655,7 +15621,8 @@ body.dependency-onboarding-active #dependency-setup-modal {
 
 @media (max-width: 460px) {
   .dashboard-wrapper {
-    padding: 0.7rem;
+    --dashboard-shell-pad: 0.7rem;
+    padding: var(--dashboard-shell-pad);
     border-radius: 22px;
   }
 

From f1428a06e964cce773b939096cbd27cb10ea9197 Mon Sep 17 00:00:00 2001
From: AnrokX <192667251+AnrokX@users.noreply.github.com>
Date: Thu, 12 Mar 2026 14:43:31 -0600
Subject: [PATCH 14/16] fix: align dashboard header chrome

---
 client/dashboard.js | 11 ++++++---
 client/styles.css   | 59 +++++++++++++++++++++++++++++++++++----------
 2 files changed, 53 insertions(+), 17 deletions(-)

diff --git a/client/dashboard.js b/client/dashboard.js
index 203b9a0f..01cdcfc4 100644
--- a/client/dashboard.js
+++ b/client/dashboard.js
@@ -408,7 +408,10 @@ class Dashboard {
         ${desktopSidebar}
         <div class="dashboard-desktop-body">
           <div class="dashboard-desktop-header">
-            <h1>Agent Workspace</h1>
+            <div class="dashboard-desktop-title-group">
+              <div class="brand-orb dashboard-brand-orb" aria-hidden="true"></div>
+              <h1>Agent Workspace</h1>
+            </div>
           </div>
           ${desktopBody}
         </div>
@@ -447,14 +450,14 @@ class Dashboard {
     return `
       <div class="dashboard-wrapper dashboard-layout-${layoutMode}">
         <div class="dashboard-topbar">
-          ${canReturnToWorkspaces ? `<button class="dashboard-topbar-btn" id="dashboard-back-btn" title="Back to workspaces">← Back</button>` : '<div></div>'}
-          ${showProcessBanner ? `<div id="dashboard-process-banner" class="process-banner" title="WIP and queue status"></div>` : '<div></div>'}
+          ${showProcessBanner ? `<div id="dashboard-process-banner" class="process-banner" title="WIP and queue status"></div>` : ''}
+          ${canReturnToWorkspaces ? `<button class="dashboard-topbar-btn" id="dashboard-back-btn" title="Back to workspaces">← Back</button>` : ''}
         </div>
         
         ${isCompactLayout ? `
           <div class="dashboard-header-modern">
             <div class="dashboard-title-group">
-              <div class="dashboard-title-icon" style="font-size:24px;">🏠</div>
+              <div class="brand-orb dashboard-brand-orb" aria-hidden="true"></div>
               <div>
                 <h1>Agent Workspace</h1>
                 <p>Select a workspace to begin development</p>
diff --git a/client/styles.css b/client/styles.css
index 9e966a45..307752c5 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -14305,6 +14305,26 @@ body.dependency-onboarding-active #dependency-setup-modal {
   min-width: 0;
 }
 
+.dashboard-brand-orb {
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  background:
+    conic-gradient(
+      from 180deg at 50% 50%,
+      color-mix(in srgb, var(--accent-primary-hover) 88%, white 12%) 0deg,
+      color-mix(in srgb, var(--accent-primary-pressed) 86%, #08111d 14%) 180deg,
+      color-mix(in srgb, var(--accent-primary-hover) 88%, white 12%) 360deg
+    );
+  box-shadow: 0 0 18px color-mix(in srgb, var(--accent-primary) 48%, transparent);
+  animation: dashboard-brand-orb-spin 4s linear infinite;
+}
+
+@keyframes dashboard-brand-orb-spin {
+  100% { transform: rotate(360deg); }
+}
+
 .dashboard-title-icon {
   width: 50px;
   height: 50px;
@@ -14322,7 +14342,7 @@ body.dependency-onboarding-active #dependency-setup-modal {
 }
 
 .dashboard-title-group h1 {
-  font-size: 1.72rem;
+  font-size: 1.94rem;
   font-weight: 760;
   margin: 0;
   letter-spacing: -0.035em;
@@ -14630,6 +14650,22 @@ body.dependency-onboarding-active #dependency-setup-modal {
   display: none;
 }
 
+.dashboard-wrapper .dashboard-topbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  margin: 0;
+  position: relative;
+  z-index: 4;
+}
+
+.dashboard-layout-desktop .dashboard-topbar {
+  position: absolute;
+  top: var(--dashboard-shell-pad);
+  right: var(--dashboard-shell-pad);
+}
+
 .dashboard-desktop-shell {
   display: grid;
   grid-template-columns: 196px minmax(0, 1fr);
@@ -14798,12 +14834,19 @@ body.dependency-onboarding-active #dependency-setup-modal {
   align-items: center;
   min-width: 0;
   text-align: center;
-  padding: 0.15rem 0 0.1rem;
+  padding: 0.35rem 0 0.15rem;
+}
+
+.dashboard-desktop-title-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.8rem;
+  min-width: 0;
 }
 
 .dashboard-desktop-header h1 {
   margin: 0;
-  font-size: 1.28rem;
+  font-size: 1.72rem;
   font-weight: 760;
   letter-spacing: -0.035em;
   color: color-mix(in srgb, var(--text-primary) 97%, white 3%);
@@ -15578,11 +15621,6 @@ body.dependency-onboarding-active #dependency-setup-modal {
   .dashboard-title-group h1 {
     font-size: 1.4rem;
   }
-
-  .dashboard-topbar {
-    flex-wrap: wrap;
-    align-items: flex-start;
-  }
 }
 
 @media (max-width: 600px) {
@@ -15590,11 +15628,6 @@ body.dependency-onboarding-active #dependency-setup-modal {
     gap: var(--space-sm);
   }
 
-  .dashboard-title-icon {
-    width: 40px;
-    height: 40px;
-  }
-
   .dashboard-title-group h1 {
     font-size: 1.25rem;
   }

From d4ab3189dfa5f98ef61f99b6b931dab41b772f03 Mon Sep 17 00:00:00 2001
From: AnrokX <192667251+AnrokX@users.noreply.github.com>
Date: Thu, 12 Mar 2026 14:50:16 -0600
Subject: [PATCH 15/16] fix: align dashboard rail to top edge

---
 client/dashboard.js |  2 +-
 client/styles.css   | 15 +++++++++------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/client/dashboard.js b/client/dashboard.js
index 01cdcfc4..bc42faae 100644
--- a/client/dashboard.js
+++ b/client/dashboard.js
@@ -450,8 +450,8 @@ class Dashboard {
     return `
       <div class="dashboard-wrapper dashboard-layout-${layoutMode}">
         <div class="dashboard-topbar">
-          ${showProcessBanner ? `<div id="dashboard-process-banner" class="process-banner" title="WIP and queue status"></div>` : ''}
           ${canReturnToWorkspaces ? `<button class="dashboard-topbar-btn" id="dashboard-back-btn" title="Back to workspaces">← Back</button>` : ''}
+          ${showProcessBanner ? `<div id="dashboard-process-banner" class="process-banner" title="WIP and queue status"></div>` : ''}
         </div>
         
         ${isCompactLayout ? `
diff --git a/client/styles.css b/client/styles.css
index 307752c5..00219aea 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -14575,6 +14575,7 @@ body.dependency-onboarding-active #dependency-setup-modal {
 /* Dashboard Layout */
 .dashboard-wrapper {
   --dashboard-shell-pad: clamp(0.85rem, 1.2vw, 1.3rem);
+  --dashboard-rail-width: 196px;
   --dashboard-window-fill:
     linear-gradient(165deg, rgba(7, 13, 24, 0.94) 0%, rgba(8, 16, 28, 0.88) 48%, rgba(6, 12, 24, 0.96) 100%);
   --dashboard-panel-fill: linear-gradient(180deg, rgba(9, 16, 28, 0.68), rgba(8, 13, 24, 0.34));
@@ -14662,22 +14663,24 @@ body.dependency-onboarding-active #dependency-setup-modal {
 
 .dashboard-layout-desktop .dashboard-topbar {
   position: absolute;
-  top: var(--dashboard-shell-pad);
-  right: var(--dashboard-shell-pad);
+  top: 0.9rem;
+  left: calc(var(--dashboard-rail-width) + 0.9rem);
+  right: auto;
+  justify-content: flex-start;
 }
 
 .dashboard-desktop-shell {
   display: grid;
-  grid-template-columns: 196px minmax(0, 1fr);
+  grid-template-columns: var(--dashboard-rail-width) minmax(0, 1fr);
   gap: 0;
   min-height: 0;
   position: relative;
   z-index: 1;
-  margin: 0 calc(var(--dashboard-shell-pad) * -1) calc(var(--dashboard-shell-pad) * -1);
+  margin: calc(var(--dashboard-shell-pad) * -1) calc(var(--dashboard-shell-pad) * -1) calc(var(--dashboard-shell-pad) * -1);
 }
 
 .dashboard-desktop-body {
-  padding: 0.1rem var(--dashboard-shell-pad) var(--dashboard-shell-pad) 0.95rem;
+  padding: 1rem var(--dashboard-shell-pad) var(--dashboard-shell-pad) 0.95rem;
   min-width: 0;
   min-height: 0;
   display: grid;
@@ -14846,7 +14849,7 @@ body.dependency-onboarding-active #dependency-setup-modal {
 
 .dashboard-desktop-header h1 {
   margin: 0;
-  font-size: 1.72rem;
+  font-size: 2rem;
   font-weight: 760;
   letter-spacing: -0.035em;
   color: color-mix(in srgb, var(--text-primary) 97%, white 3%);

From 919bfc8dd403b73d8887464fc83637ec0d7c8ece Mon Sep 17 00:00:00 2001
From: AnrokX <192667251+AnrokX@users.noreply.github.com>
Date: Thu, 12 Mar 2026 15:05:24 -0600
Subject: [PATCH 16/16] fix: match dashboard rail to workspace sidebar

---
 client/dashboard.js |  37 ++++++++-------
 client/styles.css   | 112 ++++++++++++++++++++++++--------------------
 2 files changed, 81 insertions(+), 68 deletions(-)

diff --git a/client/dashboard.js b/client/dashboard.js
index bc42faae..55392110 100644
--- a/client/dashboard.js
+++ b/client/dashboard.js
@@ -349,30 +349,33 @@ class Dashboard {
     const desktopResourceStack = [processSection, desktopResourcesGrid].filter(Boolean).join('');
     const desktopSidebar = `
       <aside class="dashboard-side-panel">
-        <div class="dashboard-side-overview">
-          <div class="dashboard-side-stats">
-            <div class="dashboard-side-stat">
-              <strong>${escapeHtml(activeWorkspaces.length)}</strong>
-              <span>Active</span>
-            </div>
-            <div class="dashboard-side-stat">
-              <strong>${escapeHtml(inactiveWorkspaces.length)}</strong>
-              <span>Standby</span>
+        <div class="dashboard-side-header">
+          <div class="dashboard-side-overview">
+            <div class="dashboard-side-stats">
+              <div class="dashboard-side-stat">
+                <strong>${escapeHtml(activeWorkspaces.length)}</strong>
+                <span>Active</span>
+              </div>
+              <div class="dashboard-side-stat">
+                <strong>${escapeHtml(inactiveWorkspaces.length)}</strong>
+                <span>Standby</span>
+              </div>
             </div>
           </div>
-        </div>
-
-        <div class="dashboard-side-stack">
-          <div class="dashboard-side-pill is-active">
-            <span>Workspaces</span>
-            <strong>${escapeHtml(totalWorkspaceCount)}</strong>
+          <div class="dashboard-side-divider" aria-hidden="true"></div>
+          <div class="dashboard-side-stack">
+            <div class="dashboard-side-pill is-active">
+              <span>Workspaces</span>
+              <strong>${escapeHtml(totalWorkspaceCount)}</strong>
+            </div>
           </div>
         </div>
+        <div class="dashboard-side-scroll" aria-hidden="true"></div>
 
         ${(visibility.createSection !== false) ? `
-          <div class="dashboard-side-action">
+          <div class="dashboard-side-footer">
             <button class="btn-primary workspace-create-empty-btn dashboard-side-create-btn">
-              ➕ New Workspace
+              ✚ New Workspace
             </button>
           </div>
         ` : ''}
diff --git a/client/styles.css b/client/styles.css
index 00219aea..6140c15a 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -14575,7 +14575,7 @@ body.dependency-onboarding-active #dependency-setup-modal {
 /* Dashboard Layout */
 .dashboard-wrapper {
   --dashboard-shell-pad: clamp(0.85rem, 1.2vw, 1.3rem);
-  --dashboard-rail-width: 196px;
+  --dashboard-rail-width: var(--sidebar-width);
   --dashboard-window-fill:
     linear-gradient(165deg, rgba(7, 13, 24, 0.94) 0%, rgba(8, 16, 28, 0.88) 48%, rgba(6, 12, 24, 0.96) 100%);
   --dashboard-panel-fill: linear-gradient(180deg, rgba(9, 16, 28, 0.68), rgba(8, 13, 24, 0.34));
@@ -14609,7 +14609,20 @@ body.dependency-onboarding-active #dependency-setup-modal {
 }
 
 .dashboard-layout-desktop {
-  grid-template-rows: auto 1fr;
+  grid-template-rows: minmax(0, 1fr);
+  padding: 0 var(--dashboard-shell-pad) var(--dashboard-shell-pad) 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.dashboard-layout-desktop::before {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.dashboard-layout-desktop::after {
+  inset: 14px 14px 14px 0;
+  border-radius: 0 24px 24px 0;
 }
 
 .dashboard-wrapper::before,
@@ -14663,8 +14676,8 @@ body.dependency-onboarding-active #dependency-setup-modal {
 
 .dashboard-layout-desktop .dashboard-topbar {
   position: absolute;
-  top: 0.9rem;
-  left: calc(var(--dashboard-rail-width) + 0.9rem);
+  top: 0.95rem;
+  left: calc(var(--dashboard-rail-width) + 0.95rem);
   right: auto;
   justify-content: flex-start;
 }
@@ -14673,10 +14686,11 @@ body.dependency-onboarding-active #dependency-setup-modal {
   display: grid;
   grid-template-columns: var(--dashboard-rail-width) minmax(0, 1fr);
   gap: 0;
+  height: 100%;
   min-height: 0;
   position: relative;
   z-index: 1;
-  margin: calc(var(--dashboard-shell-pad) * -1) calc(var(--dashboard-shell-pad) * -1) calc(var(--dashboard-shell-pad) * -1);
+  margin: 0 calc(var(--dashboard-shell-pad) * -1) calc(var(--dashboard-shell-pad) * -1) 0;
 }
 
 .dashboard-desktop-body {
@@ -14689,65 +14703,58 @@ body.dependency-onboarding-active #dependency-setup-modal {
 }
 
 .dashboard-side-panel {
-  position: relative;
   display: flex;
   flex-direction: column;
-  gap: 0.8rem;
+  gap: 0;
   min-width: 0;
   min-height: 0;
-  padding: 0.95rem 0.75rem 0.95rem calc(var(--dashboard-shell-pad) + 0.75rem);
+  padding: 0;
   border: 0;
-  border-right: 1px solid rgba(255, 255, 255, 0.08);
+  border-right: 1px solid var(--border-color);
   border-radius: 0;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 18%),
-    linear-gradient(180deg, rgba(12, 21, 36, 0.88), rgba(7, 13, 24, 0.9));
-  box-shadow: 18px 0 38px rgba(2, 6, 23, 0.14);
+  background: var(--bg-secondary);
   overflow: hidden;
 }
 
 .dashboard-side-panel::before,
 .dashboard-side-panel::after {
-  content: "";
-  position: absolute;
-  pointer-events: none;
+  display: none;
 }
 
-.dashboard-side-panel::before {
-  inset: 0;
-  background:
-    linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 14%, transparent), transparent 24%),
-    radial-gradient(220px 220px at 18% 12%, rgba(255, 255, 255, 0.07), transparent 72%);
-  opacity: 0.9;
+.dashboard-side-header {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid var(--border-color);
 }
 
-.dashboard-side-panel::after {
-  inset: 0 0 0 auto;
-  width: 2px;
-  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 54%, transparent), transparent 85%);
-  opacity: 0.9;
+.dashboard-side-footer {
+  padding: var(--space-md);
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
 }
 
-.dashboard-side-overview,
-.dashboard-side-stack,
-.dashboard-side-action {
-  position: relative;
-  z-index: 1;
+.dashboard-side-scroll {
+  flex: 1;
+  min-height: 0;
 }
 
 .dashboard-side-stats {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0.5rem;
+  padding: var(--space-md);
 }
 
 .dashboard-side-stat {
   display: grid;
   gap: 0.18rem;
-  padding: 0.65rem 0.55rem;
-  border-radius: 3px;
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  background: rgba(255, 255, 255, 0.045);
+  padding: 0.7rem 0.6rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-color);
+  background: var(--bg-tertiary);
 }
 
 .dashboard-side-stat strong {
@@ -14766,6 +14773,13 @@ body.dependency-onboarding-active #dependency-setup-modal {
 .dashboard-side-stack {
   display: grid;
   gap: 0.45rem;
+  padding: 0.75rem var(--space-md) var(--space-md);
+}
+
+.dashboard-side-divider {
+  height: 1px;
+  background: var(--border-color);
+  opacity: 0.6;
 }
 
 .dashboard-side-pill {
@@ -14774,12 +14788,12 @@ body.dependency-onboarding-active #dependency-setup-modal {
   justify-content: space-between;
   gap: 0.55rem;
   min-width: 0;
-  padding: 0.58rem 0.62rem;
-  border-radius: 0;
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  background: rgba(255, 255, 255, 0.04);
+  padding: 0.68rem 0.72rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-color);
+  background: var(--bg-tertiary);
   color: color-mix(in srgb, var(--text-primary) 92%, white 8%);
-  font-size: 0.74rem;
+  font-size: 0.76rem;
 }
 
 .dashboard-side-pill span {
@@ -14792,25 +14806,20 @@ body.dependency-onboarding-active #dependency-setup-modal {
   font-size: 0.7rem;
   font-weight: 700;
   padding: 0.18rem 0.42rem;
-  border-radius: 0;
+  border-radius: 999px;
   background: rgba(255, 255, 255, 0.06);
 }
 
 .dashboard-side-pill.is-active {
-  border-color: color-mix(in srgb, var(--accent-primary) 42%, rgba(255, 255, 255, 0.08));
-  background: color-mix(in srgb, var(--accent-primary) 16%, rgba(255, 255, 255, 0.04));
-}
-
-.dashboard-side-action {
-  margin-top: auto;
-  display: block;
+  border-color: color-mix(in srgb, var(--accent-primary) 48%, var(--border-color));
+  background: color-mix(in srgb, var(--accent-primary) 18%, var(--bg-tertiary));
 }
 
 .dashboard-side-create-btn {
   width: 100%;
   justify-content: center;
-  padding: 0.7rem 0.78rem !important;
-  border-radius: 4px !important;
+  padding: 0.76rem 0.95rem !important;
+  border-radius: var(--radius-sm) !important;
   color: #09110b !important;
   border: 1px solid color-mix(in srgb, var(--accent-success) 66%, rgba(255, 255, 255, 0.12)) !important;
   background:
@@ -14860,6 +14869,7 @@ body.dependency-onboarding-active #dependency-setup-modal {
   grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.92fr);
   gap: 0.85rem;
   align-items: stretch;
+  height: 100%;
   min-height: 0;
   position: relative;
   z-index: 1;