From f4f9ce1c12c34b89eccccf4a808d0fa70a653ce6 Mon Sep 17 00:00:00 2001
From: yanweidong <david.yan@qq.com>
Date: Mon, 20 Jul 2026 11:03:27 +0800
Subject: [PATCH] Fix React project layout regression

---
 apps/senlinai-acro-react/.gitignore           |  1 +
 .../scripts/visual-check.mjs                  | 36 +++++++++++++++++++
 .../senlinai-acro-react/src/pages/project.tsx |  2 +-
 3 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/apps/senlinai-acro-react/.gitignore b/apps/senlinai-acro-react/.gitignore
index 07f1090..27dbff2 100644
--- a/apps/senlinai-acro-react/.gitignore
+++ b/apps/senlinai-acro-react/.gitignore
@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 test-results
+audit-results
 *.local
 
 # Editor directories and files
diff --git a/apps/senlinai-acro-react/scripts/visual-check.mjs b/apps/senlinai-acro-react/scripts/visual-check.mjs
index c42d844..0ba035d 100644
--- a/apps/senlinai-acro-react/scripts/visual-check.mjs
+++ b/apps/senlinai-acro-react/scripts/visual-check.mjs
@@ -33,8 +33,12 @@ await page.screenshot({ path: 'test-results/workbench-react-acro-dark.png', full
 const metrics = await page.evaluate(() => {
   const statusbar = document.querySelector('.statusbar')
   const search = document.querySelector('.global-search')
+  const main = document.querySelector('.workbench-main')
   const rail = document.querySelector('.project-rail')
   const railChildren = rail?.querySelector('.arco-layout-sider-children')
+  const sidebar = document.querySelector('.channel-sidebar')
+  const stage = document.querySelector('.stage')
+  const inspector = document.querySelector('.inspector')
   const dashboard = document.querySelector('.dashboard-button')
   const project = document.querySelector('.project-button')
   const create = document.querySelector('.create-project')
@@ -67,7 +71,12 @@ const metrics = await page.evaluate(() => {
   return {
     statusbarHeight: statusbar?.getBoundingClientRect().height,
     searchHeight: search?.getBoundingClientRect().height,
+    workbenchMain: rect(main),
     projectRailWidth: rail?.getBoundingClientRect().width,
+    projectRail: rect(rail),
+    channelSidebar: rect(sidebar),
+    stage: rect(stage),
+    inspector: rect(inspector),
     dashboardButton: rect(dashboard),
     projectButton: rect(project),
     createProjectButton: rect(create),
@@ -77,6 +86,7 @@ const metrics = await page.evaluate(() => {
     projectRailOverflow: overflowState(rail),
     projectRailChildrenOverflow: overflowState(railChildren),
     overflowX: document.documentElement.scrollWidth > document.documentElement.clientWidth,
+    viewportWidth: window.innerWidth,
   }
 })
 
@@ -90,6 +100,32 @@ if (errors.length) failures.push(`console errors: ${errors.join('; ')}`)
 if (metrics.statusbarHeight !== 32) failures.push(`expected statusbar height 32, got ${metrics.statusbarHeight}`)
 if (metrics.searchHeight !== 42) failures.push(`expected search height 42, got ${metrics.searchHeight}`)
 if (metrics.overflowX) failures.push('expected no horizontal overflow')
+if (!metrics.workbenchMain) failures.push('missing workbench main')
+if (!metrics.projectRail || !metrics.channelSidebar || !metrics.stage || !metrics.inspector) {
+  failures.push(
+    `missing main layout regions: rail=${JSON.stringify(metrics.projectRail)}, sidebar=${JSON.stringify(metrics.channelSidebar)}, stage=${JSON.stringify(metrics.stage)}, inspector=${JSON.stringify(metrics.inspector)}`,
+  )
+} else {
+  const sameTop = [metrics.projectRail, metrics.channelSidebar, metrics.stage, metrics.inspector]
+    .every((region) => Math.abs(region.top - metrics.projectRail.top) <= 1)
+  if (!sameTop) {
+    failures.push(
+      `expected project rail, channel sidebar, stage, and inspector to share the same top edge, got rail=${metrics.projectRail.top}, sidebar=${metrics.channelSidebar.top}, stage=${metrics.stage.top}, inspector=${metrics.inspector.top}`,
+    )
+  }
+  if (Math.abs(metrics.channelSidebar.left - metrics.projectRail.right) > 1) {
+    failures.push(`expected channel sidebar to sit after project rail, got sidebar.left=${metrics.channelSidebar.left}, rail.right=${metrics.projectRail.right}`)
+  }
+  if (Math.abs(metrics.stage.left - metrics.channelSidebar.right) > 1) {
+    failures.push(`expected stage to sit after channel sidebar, got stage.left=${metrics.stage.left}, sidebar.right=${metrics.channelSidebar.right}`)
+  }
+  if (Math.abs(metrics.inspector.left - metrics.stage.right) > 1) {
+    failures.push(`expected inspector to sit after stage, got inspector.left=${metrics.inspector.left}, stage.right=${metrics.stage.right}`)
+  }
+  if (Math.abs(metrics.inspector.right - metrics.viewportWidth) > 1) {
+    failures.push(`expected inspector to end at viewport right edge, got inspector.right=${metrics.inspector.right}, viewport=${metrics.viewportWidth}`)
+  }
+}
 if (!metrics.projectRailWidth || metrics.projectRailWidth < 88) {
   failures.push(`expected project rail at least 88px wide, got ${metrics.projectRailWidth}`)
 }
diff --git a/apps/senlinai-acro-react/src/pages/project.tsx b/apps/senlinai-acro-react/src/pages/project.tsx
index 9dc16bf..217823a 100644
--- a/apps/senlinai-acro-react/src/pages/project.tsx
+++ b/apps/senlinai-acro-react/src/pages/project.tsx
@@ -32,7 +32,7 @@ export function ProjectPage({
     <Layout className="workbench-shell">
       <ProjectTopbar theme={theme} onToggleTheme={onToggleTheme} />
 
-      <Layout className="workbench-main">
+      <Layout className="workbench-main" hasSider>
         <ProjectRail activeProject={activeProject} onSelectProject={onSelectProject} />
 
         <ProjectSidebar