refactor(ui): document and reduce shell style overlap

apps/ui/src/styles/components.css

@@ -1301,24 +1301,7 @@ select:focus-visible {
   }
 }
 
-@media (max-width: 960px) {
-  .shell {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto minmax(0, 1fr);
-  }
-  .sidebar {
-    height: auto;
-    border-right: 0;
-    border-bottom: 1px solid var(--color-border-light);
-  }
-  .main-shell {
-    height: 100%;
-  }
-  .nav-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
-}
-
 @media (max-width: 720px) {
-  .main-shell, .sidebar { padding: var(--space-4); }
   .startup-overlay { padding: 18px; }
   .startup-overlay-panel { width: 100%; }
   .startup-overlay-copy { gap: 14px; margin-top: 6px; }

apps/ui/src/styles/shell.css

@@ -3,6 +3,7 @@
   isolation: isolate;
   height: 100vh;
   min-height: 100vh;
+  /* Desktop-first contract: keep the two-column app shell and allow horizontal overflow below 960px until a mobile layout is designed. */
   min-width: 960px;
   display: grid;
   grid-template-columns: clamp(232px, 19vw, 280px) minmax(0, 1fr);
@@ -1754,7 +1755,11 @@ button.secondary {
 
 @media (max-width: 960px) {
   .shell {
-    grid-template-columns: 1fr;
+    grid-template-columns: 224px minmax(0, 1fr);
+  }
+
+  .nav-list {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 }
 

apps/ui/src/styles/theme-openclaw.css

@@ -634,13 +634,10 @@
 }
 
 .shell.openclaw-theme .main-shell {
-  min-width: 0;
-  height: 100vh;
   background: var(--revamp-canvas);
 }
 
 .shell.openclaw-theme .content-area {
-  min-height: 0;
   background: transparent;
 }
 

docs/2026-05-25-client-ui-ux-execution-plan.md

@@ -8,6 +8,14 @@
 
 **Tech Stack:** Electron renderer, Vite, React 19, TypeScript, plain CSS modules via `apps/ui/src/styles.css`, existing smoke hooks.
 
+## Progress Sync - 2026-05-25
+
+- Current committed progress: `4c81b90 style(ui): calm renderer shell visuals`.
+- Validation passed after the CSS work: `corepack pnpm --filter @qjclaw/ui typecheck`; `corepack pnpm build`.
+- Phase 1 is complete except baseline screenshots.
+- Phase 2 has completed token cleanup, visual-noise reduction, and validation; duplicate layout ownership still needs a dedicated review pass.
+- Phase 3, Phase 4, and Phase 5 have not started.
+
 ---
 
 ## 1. 当前事实基线
@@ -48,7 +56,7 @@
 - Read-only reference: `apps/ui/src/styles/*.css`
 - Read-only reference: `apps/ui/test/*.test.ts`
 
-- [ ] **Step 1: 记录当前核心文件规模**
+- [x] **Step 1: 记录当前核心文件规模**
 
   Run:
 
@@ -62,7 +70,12 @@
   - 记录每个 CSS 文件行数。
   - 如果 `theme-openclaw.css`、`shell.css`、`components.css` 仍是最大样式文件，后续 CSS 收口优先从这三处开始。
 
-- [ ] **Step 2: 记录核心布局类定义位置**
+  Progress note:
+
+  - `App.tsx`: 1674 lines.
+  - Largest CSS files remain `shell.css` 1782, `theme-openclaw.css` 1600, `components.css` 1521.
+
+- [x] **Step 2: 记录核心布局类定义位置**
 
   Run:
 
@@ -76,7 +89,13 @@
   - 标出基础定义、聊天覆盖、主题覆盖三类来源。
   - 不在本阶段删除样式，只形成清单。
 
-- [ ] **Step 3: 跑基础验证**
+  Progress note:
+
+  - Base/core definitions: `components.css` (`content-area`, `message-list`, `composer-shell`), `shell.css` (`shell`, `sidebar`, `main-shell`).
+  - Conversation overrides: `chat.css` under `.conversation-shell ...`.
+  - Theme skin overrides: `theme-openclaw.css` under `.shell.openclaw-theme ...` and `.conversation-shell ...`.
+
+- [x] **Step 3: 跑基础验证**
 
   Run:
 
@@ -90,7 +109,12 @@
   - 两个命令通过。
   - 如果失败，先修复当前失败，不进入 Phase 2。
 
-- [ ] **Step 4: 保存基线截图**
+  Progress note:
+
+  - Passed on 2026-05-25: `corepack pnpm --filter @qjclaw/ui typecheck`.
+  - Passed on 2026-05-25: `corepack pnpm build`.
+
+- [x] **Step 4: 保存基线截图**
 
   Start app:
 
@@ -112,6 +136,12 @@
   - 每个页面有桌面宽度截图。
   - 至少补一张窄宽度截图，确认 `min-width: 960px` 的实际行为。
 
+  Progress note:
+
+  - Saved on 2026-05-25 under `docs/artifacts/2026-05-25-client-ui-ux-baseline/`.
+  - Desktop screenshots: `chat-home.png`, `expert-chat.png`, `task-panel.png`, `automation-tasks.png`, `knowledge.png`, `settings.png`.
+  - Narrow screenshot: `narrow-720-settings-min-width.png`, confirming the current desktop-first `min-width: 960px` contract creates horizontal overflow below that width.
+
 ## 4. Phase 2 - 收敛 CSS 骨架和视觉 token
 
 **目标:** 让核心布局类只有清晰的基础层和主题层，减少后续 UI 回归。
@@ -124,7 +154,7 @@
 - Modify: `apps/ui/src/styles/chat.css`
 - Modify: `apps/ui/src/styles/theme-openclaw.css`
 
-- [ ] **Step 1: 建立 token 边界**
+- [x] **Step 1: 建立 token 边界**
 
   In `apps/ui/src/styles/theme-openclaw.css`, keep all product-level theme variables under:
 
@@ -151,7 +181,12 @@
   - Purple variables may remain only where still referenced by legacy expert-specific styles.
   - New or touched styles use the gray/blue token set above.
 
-- [ ] **Step 2: Reduce duplicate core layout definitions**
+  Progress note:
+
+  - Completed by `4c81b90`; product-level `--revamp-*` variables now live under `.shell.openclaw-theme`.
+  - Touched visual styles were moved toward gray/blue tokens and reduced purple usage.
+
+- [x] **Step 2: Reduce duplicate core layout definitions**
 
   Keep responsibilities:
 
@@ -166,7 +201,14 @@
   - No new global `.message-list` or `.composer-shell` visual overrides outside the intended layer.
   - Conversation-only changes remain scoped under `.conversation-shell ...`.
 
-- [ ] **Step 3: Remove obvious visual noise**
+  Progress note:
+
+  - Partially addressed by `4c81b90`.
+  - Still open: dedicated review of ownership overlap across `components.css`, `shell.css`, `chat.css`, and `theme-openclaw.css`.
+  - Completed on 2026-05-25: removed shell/sidebar/main-shell responsive overrides from `components.css`, kept shell responsive ownership in `shell.css`, and removed structural `main-shell`/`content-area` overrides from `theme-openclaw.css`.
+  - Documented the desktop-first `min-width: 960px` shell contract in `shell.css`.
+
+- [x] **Step 3: Remove obvious visual noise**
 
   In touched rules:
 
@@ -180,7 +222,11 @@
   - Left sidebar and workspace feel calmer.
   - Active/hover/focus states remain visible.
 
-- [ ] **Step 4: Validate after CSS edits**
+  Progress note:
+
+  - Completed by `4c81b90`; removed several `translateY` hover effects, softened shadows, reduced decorative gradients, and replaced purple scrollbar/drag states with blue/gray variants.
+
+- [x] **Step 4: Validate after CSS edits**
 
   Run:
 
@@ -194,6 +240,13 @@
   - Both pass.
   - `git diff -- apps/ui/src/styles.css apps/ui/src/styles/*.css` shows targeted CSS changes only.
 
+  Progress note:
+
+  - Passed on 2026-05-25: `corepack pnpm --filter @qjclaw/ui typecheck`.
+  - Passed on 2026-05-25: `corepack pnpm build`.
+  - CSS work was committed as `4c81b90 style(ui): calm renderer shell visuals`.
+  - Re-ran after ownership cleanup on 2026-05-25: `corepack pnpm --filter @qjclaw/ui typecheck`; `corepack pnpm build`.
+
 ## 5. Phase 3 - 压薄 App.tsx 的 UI 编排
 
 **目标:** 降低 `App.tsx` 的维护风险，但不碰 stream 主链路和 smoke action 协议。