Refine sidebar control spacing and Works Square surface

.project-docs/30-worklog/tasks/20260929-code-back-entry-33d87a81.md

@@ -8,7 +8,7 @@
 - Worktree: /Users/chillishark/Makelore 麦洛/.codex-worktrees/makelore/20260929-empty-work-merge-39c633d0
 - Base commit: a77ddbd6813bb71d490544edfef6e1f35240070f
 - Owner: codex
-- Status: Ready for Integration
+- Status: Planning
 
 ## Scope
 
@@ -113,3 +113,12 @@
 - Final temporary publication preserves the newer colored-shortcut update b934945 (including depth update 83a19fb). A second publication precondition correctly rejected finalization after the peer replaced the served entry; rebuilt from its actual published source and only reapplied Sidebar + ModuleSwitcher. Final generated source is `sidebar-icon-top-33d87a81/source-with-text-colors` under the trial root, running/next JS `index-CKAsiRqM.js`, common CSS `index-CA1PKQZ_.css`, route CSS `index-D03AC39p.css`. Composite typecheck/lint/build and full source comparison passed. Launch/guidance now consistently point at this source and include 19d55e8 plus the preserved style overlays.
 - Live geometry verifies icon-only 32px return above branding at the Sidebar top, accessible name/tooltip “返回首页”, one right collapse control with equal horizontal centers and a 13px right inset, Works Square beneath branding, and the unchanged 20px separation before New Project/My Projects. Current account, active conversation, 14 consultation drafts, teacher panel/content and Work tab match the pre-refresh snapshot. Virtualization renders the last 14 of the previous 22 message elements; that suffix is exactly equal and all 34 persisted data-file hashes are unchanged. No alert or model request. Main PID 32583, isolated profile, native visibility/focus and formal installation are unchanged. Refresh lease released, original background throttling restored, task-opened inspector closed.
 - Coordination lesson / promotion candidate: future temporary-app publishing should validate both served index and manifest before replacing either, then finalize their provenance together. A peer can hot-swap CSS and overwrite next-load assets while leaving running-asset metadata stale; candidate preparation must use the actual served source and preserve all published overlays. Evidence: both guarded finalization attempts in this follow-up and the final successful composite; impacts only future deployment tooling, no canonical write or policy change performed here.
+
+
+## Follow-up: Sidebar Spacing And Works Square Surface
+
+- User accepts icon-only ordering and asks to move the control row upward without moving the Makelore brand, then add a filled Works Square entry and place it centrally between the brand and New Project. Temporary-app authorization continues from this UI iteration.
+- Project Context Loaded / Planning Gate: Passed. Task 20260929-code-back-entry-33d87a81, feature mode, same branch/worktree/base as Identity; official resume and matching status verified. Entry, memory index, active task and peer scopes read; positioning, integrated state, decisions, architecture/domain, evidence/reflection and commitments unchanged from 7830b7f. The retired shortcut task has an unreadable record but its replacement merge task confirms source b934945 and no live-app edits; coordination state is provisional and unrelated to sidebar decisions. Composer-height task may update the trial, so preserve the newest served source and compare entry/manifest before publishing. No shared canonical writes.
+- Existing product remains the single light classroom system. The design skill database's dark-theme suggestion conflicts with the current product and is not adopted; retain established green community tokens and native controls. Review confirms double overflow clipping permits a 4px upward move of the full 32px controls within the existing 40px slot. Keep that slot and the brand fixed, align controls to its top. Add 10px above Works Square and reduce project-content top padding from 20px to 10px, keeping New Project fixed with equal gaps around the entry. Only scoped classroom CSS and existing E2E/README need changes. All presentation changes can be applied through the existing route stylesheet, enabling a state-preserving live stylesheet swap. No navigation, prompt, data, main-merge or formal-install changes.
+
+- Implementation is one scoped CSS change: top-align the existing 32px controls in the unchanged 40px slot; use a pale-green filled/bordered Works Square button with 10px above and below. Brand and New Project coordinates stay fixed. Typecheck, changed-file lint and production build passed. The existing Electron navigation scenario passed (1/1), checking exact top/brand coordinates, equal 10px gaps, fill color, 128px no-overflow, configuration exclusion and collapsed return; default and narrow screenshots inspected. No new tests added. Preparing the same CSS-only change against the now-published composer-height trial source.

README.md

@@ -31,7 +31,7 @@ Makelore 是一个面向软件、视觉创作、智能机器人与个人云智
 - macOS 窗口按钮：红色关闭当前窗口，全屏时先退出全屏再关闭；黄色最小化，绿色保留原生缩放/全屏行为。关窗后应用和进行中的后台任务继续运行，点击 Dock、托盘或菜单可重新打开窗口；`Cmd+Q` 退出应用。
 - 桌面文本右键菜单：主 Renderer 窗口由 Electron Main 提供原生“剪切、复制、粘贴、全选”操作；菜单只在可编辑区域或已有文本选择时出现，普通空白区域不显示，也不向 Renderer 暴露剪贴板 IPC。
 - AI 编程核心对话运行时：Electron Main 按需启动一个长驻 Pi Agent Server，同一进程内为每条 Conversation 建立独立的 Runtime、Session、凭证视图、扩展上下文和 JSONL 通道，同时复用 Pi 模块与进程启动成本；Server 异常退出时所有旧通道统一失效，下一次恢复只重启一个 Server。正式包中的 Agent Server 从明确传入的 `resources/pi-runtime` 根定位依赖清单与包入口，不从脚本所在目录或应用 `node_modules` 猜测解析。Renderer 不直接启动或调用 Pi，也不读取其 wire 类型。项目与 Conversation 元数据先从本地读取，选中对话后才按需准备对应逻辑线程；输入框不等待运行时准备完成。同一助手工具批次中，会取得项目写租约的 `bash`、`edit`、`write` 与动态产品工具按顺序执行，避免批次在命令启动前自锁；纯只读工具仍可并行。子 Agent 仍使用独立的短生命周期进程，以保留并发配额、故障和写入边界；macOS 上两类后台进程都使用 Electron 自带的 Helper，不在 Dock 中创建额外应用图标。
-- AI 编程默认入口：进入 Code 后保持在 `/chat`。左侧栏顶部提供同排图标：左侧仅显示返回箭头，点击返回模块选择首页，右侧收起侧栏；返回按钮保留“返回首页”提示，折叠后的展开入口保持在标题栏。图标行下方依次显示麦洛品牌区与“作品广场”；与其留出分组间距后，依次为“新建项目”“我的项目”和项目列表，将公共导航与个人项目操作分组；项目配置及其资源子页不再重复显示此侧栏入口，保留配置页自身的返回操作。尚未选择本地项目时，页面以麦洛 M 标识和居中引导语建立焦点，下方提供独立的“新增项目”主操作以及可横向浏览、直接进入的已有项目卡片；项目创建和进入仍复用侧栏现有流程。已有项目的新 Conversation 在可编辑 Composer 上方沿用同一品牌引导，第一条消息出现后切换为正常时间线。
+- AI 编程默认入口：进入 Code 后保持在 `/chat`。左侧栏顶部提供同排图标：左侧仅显示返回箭头，点击返回模块选择首页，右侧收起侧栏；返回按钮保留“返回首页”提示，折叠后的展开入口保持在标题栏。图标行向上对齐，麦洛品牌位置保持不变；浅绿色底的“作品广场”位于品牌与“新建项目”之间，上下各留 10px；“我的项目”和项目列表紧接“新建项目”，将公共导航与个人项目操作分组；项目配置及其资源子页不再重复显示此侧栏入口，保留配置页自身的返回操作。尚未选择本地项目时，页面以麦洛 M 标识和居中引导语建立焦点，下方提供独立的“新增项目”主操作以及可横向浏览、直接进入的已有项目卡片；项目创建和进入仍复用侧栏现有流程。已有项目的新 Conversation 在可编辑 Composer 上方沿用同一品牌引导，第一条消息出现后切换为正常时间线。
 - AI 编程历史与配额反馈：Pi 上下文压缩不删除用户可见的 active-branch 历史，压缩摘要保持 Main-private；Renderer 首次渲染最近 120 个节点，向上滚动时按 100 个节点追加更早内容并保持阅读位置。Main 精确识别 `token_point_balance_exhausted` / `词元点数余额不足`，只向 Renderer 投影不可重试的稳定配额错误和安全中文提示，重开会话后仍可见且不暴露上游原始错误或 request id。
 - 账号词元点数：左下角账户菜单显示本人永久余额和预占，提供充值、充值订单与分页收支记录。真正新注册赠送 100 点，1 元充值 50 点，永久有效；旧账户不补送，旧会员/订阅/周额度/重置卡入口已移除。家长充值始终进入自己的钱包，青少年可查看自己的精确余额；使用他人共享钱包时仅显示可用状态，不显示付款人的余额或记录。Main 持有凭据并转发充值请求；付款结果未知时沿用原请求并核查原订单，只有服务端确认才显示到账。扫码信息缺失时可到网页账户页继续原订单，付款来源也由网页账户页管理。需配套部署 Works Square 永久点数 API 与 0094 迁移；本地模拟验收不代表真实支付通过。
 - 桌面性能策略：应用窗口使用不透明浅色表面并默认保留硬件合成；仅在显式安全模式或短时间内重复 GPU 进程崩溃时启用软件渲染，并把故障原因保存在用户数据目录。启动关键路径只创建本地应用壳，认证、代理、同步、更新和遥测在首帧后延迟初始化；开发版可通过 `app:performance` 快照观察 GPU、进程、WebContents、事件循环与 Renderer Long Task 聚合指标。

src/pages/Chat/classroom-workspace.css

@@ -6,12 +6,14 @@
 [data-testid="main-layout"][data-classroom="true"] [data-testid="titlebar-sidebar-surface"] { background: #f3f7fb; border-color: #dde5ee; box-shadow: none; backdrop-filter: none; }
 [data-testid="sidebar"][data-classroom="true"] { background: #f3f7fb; border-color: #dde5ee; box-shadow: none; backdrop-filter: none; color: #26384d; }
 [data-testid="sidebar"][data-classroom="true"] .classroom-sidebar-header { padding-top: 0; padding-bottom: 0; }
+[data-testid="sidebar"][data-classroom="true"] [data-testid="classroom-sidebar-navigation"] { align-items: flex-start; }
 [data-testid="sidebar"][data-classroom="true"] .classroom-brand { gap: 10px; padding: 0 2px 8px; }
-[data-testid="sidebar"][data-classroom="true"] .classroom-sidebar-header .community-link[data-variant="sidebar"] { min-height: 36px; margin-top: 0; gap: 4px; padding: 6px 4px; }
+[data-testid="sidebar"][data-classroom="true"] .classroom-sidebar-header .community-link[data-variant="sidebar"] { min-height: 36px; margin-top: 10px; gap: 4px; padding: 6px 4px; border-color: #cfddc3; border-radius: 11px; background: #e8f0df; }
+[data-testid="sidebar"][data-classroom="true"] .classroom-sidebar-header .community-link[data-variant="sidebar"]:hover:not(:disabled) { background: #dfeacf; border-color: #b7c6a4; }
 [data-testid="sidebar"][data-classroom="true"] .classroom-brand:hover { background: #eaf1f8; }
 .classroom-brand-mark { display: grid; place-items: center; width: 40px; height: 42px; flex-shrink: 0; border: 1px solid #f1d1aa; border-radius: 12px; background: #fff0dd; box-shadow: 0 3px 0 #ecdbc5; }
 .classroom-brand-caption { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: #64758a; }
-[data-testid="sidebar"][data-classroom="true"] .classroom-sidebar-content { padding: 20px 12px 14px; }
+[data-testid="sidebar"][data-classroom="true"] .classroom-sidebar-content { padding: 10px 12px 14px; }
 [data-testid="sidebar"][data-classroom="true"] [data-testid="sidebar-create-project"] { min-height: 41px; gap: 9px; padding: 8px 11px; border: 1px solid #d5e1ed; border-radius: 11px; background: #fff; color: #304968; box-shadow: 0 3px 0 #e3eaf3; }
 [data-testid="sidebar"][data-classroom="true"] [data-testid="sidebar-create-project"] svg { color: #c44b23; }
 [data-testid="sidebar"][data-classroom="true"] [data-testid="sidebar-create-project"]:hover { background: #fff7ef; border-color: #ecc5a5; }

tests/e2e/main-navigation.spec.ts

@@ -92,7 +92,8 @@ test.describe('Makelore module navigation without setup flow', () => {
       expect(returnBox).not.toBeNull();
       expect(collapseBox).not.toBeNull();
       expect(returnBox!.y + returnBox!.height).toBeLessThanOrEqual(brandBox!.y);
-      expect(returnBox!.y - sidebarBox!.y).toBeLessThanOrEqual(4);
+      expect(returnBox!.y - sidebarBox!.y).toBe(0);
+      expect(brandBox!.y - sidebarBox!.y).toBe(40);
       expect(returnBox!.width).toBe(32);
       expect(Math.abs(returnBox!.y + returnBox!.height / 2 - collapseBox!.y - collapseBox!.height / 2)).toBeLessThan(1);
       expect(returnBox!.x + returnBox!.width).toBeLessThanOrEqual(collapseBox!.x);
@@ -104,8 +105,10 @@ test.describe('Makelore module navigation without setup flow', () => {
       const createBox = await sidebar.getByTestId('sidebar-create-project').boundingBox();
       const headingBox = await sidebar.locator('.classroom-projects-heading').boundingBox();
       expect(communityBox!.y).toBeGreaterThanOrEqual(brandBox!.y + brandBox!.height);
-      expect(communityBox!.y - brandBox!.y - brandBox!.height).toBeLessThanOrEqual(8);
-      expect(createBox!.y - communityBox!.y - communityBox!.height).toBeGreaterThanOrEqual(16);
+      expect(communityBox!.y - brandBox!.y - brandBox!.height).toBe(10);
+      expect(createBox!.y - communityBox!.y - communityBox!.height).toBe(10);
+      expect(createBox!.y - brandBox!.y - brandBox!.height).toBe(56);
+      await expect(community).toHaveCSS('background-color', 'rgb(232, 240, 223)');
       expect(headingBox!.y).toBeGreaterThanOrEqual(createBox!.y + createBox!.height);
       expect(headingBox!.y - createBox!.y - createBox!.height).toBeLessThanOrEqual(14);
       await page.screenshot({ path: test.info().outputPath('chat-code-return-entry.png') });