Jyotisha/docs/tasks/PROGRESS-ui-kit-1-shell-20261023.md

PROGRESS · 组件库 K1 外壳（2026-10-25）

工单 #105。分支 codex/ui-kit-1-shell-20261023。基线 origin/staging 8f7c0f7db42f8cca6122ae39498435f59d63a483（#97 已在这个提交里）。只做任务书 K1 外壳。K0 已完成，K2 及之后没做。

结论

桌面侧栏可以在 200 到 360 像素之间拖宽。拖到最左边收成窄轨，再拉开回到刚才的宽度，这个宽度记在这台浏览器里。手机上侧栏从左边滑出。会话可以在同一组里拖动排序，键盘也可以排；换一台登录的设备，顺序还在。收藏的会话仍然整组排在最前。星盘档案这次不排序。账户菜单和设置换成组件库。顶栏点数只显示硬币图标和数字。右上角启程清单还在。

做了什么

• 桌面侧栏放进可拖分栏。宽度 200–360，默认 288，记在本机 sidebar_width。拖到最左收成 64 像素窄轨；64 不写进记住的宽度。手机用组件库 Sheet，从左边滑出，宽 min(86vw, 320px)。
• 当前页高亮在动效库载入之后用已有的 layoutId 滑动。在那之前是一块静止的底色，不另写时长。
• 翻页在动效库载入之后用已有的页面进入 280ms、离开 150ms，方向跟着侧栏顺序：新对话、星盘、星历、报告、合盘、人物。路由不等待动效。连点五项时停在最后一项。动效库还没到时，页面就是普通容器，首页不会因为库到了再挂载一次。库到达之后的第一次切换可能看不到离开的那一页叠在上面，之后的切换按规范重叠。
• 会话行的更多菜单是收藏或取消收藏、重命名、转发、删除。删除前用确认框。拖动排序用 dnd-kit，只在收藏组内或最近的一组内移动。顺序写入新列 sidebar_order。没保存过的空会话只改本机顺序，不发请求。保存失败的几条退回原位，并提示「排序没有保存」。只改顺序时不改会话的更新时间。列表查询仍按更新时间取，收藏仍先列出，组内再按这个顺序。
• 左下角账户按钮只显示头像和名字。主题在菜单里用单选组。点数不在这个按钮上重复。
• 设置是对话框加三个页签，名字仍是个人资料、账户与点数、通用设置。主题用分段页签。退出登录要再确认一次。反馈与投诉仍是对话框。注销账号的确认还在。
• 顶栏点数是正常大小的描边按钮，硬币图标加数字，44px。「点」只在读屏名称「余额 N 点，会员与充值」里。数字变少往下滚，变多往上滚，360ms；系统要求减少动态时立刻换数字。启程清单胶囊仍是 32px，仍在点数左边。
• 菜单、可拖分栏、拖动排序和翻页用的库在页面出来后再载入，不进首屏同步包。Motion 仍走已有的按需 domAnimation，没有把整页包进动效提供者。手机抽屉的 Sheet 留在侧栏零件里，打开抽屉的测试要当场看见它。
• Home() 的 useState / useRef 没有增加。增长合同通过。白名单去掉 8 个已经不再违规的文件，没有加长，也没有改测试里写死的基线名单。page.tsx 仍在白名单里。
• 删掉迁移后不再使用的手写类：.session-row、.session-actions、.profile-trigger、.new-chat、.report-nav-button、.sidebar-scrim，以及手机抽屉的位移。对应合同测试同一轮改了，见下表。
• 新出现的一句是「排序没有保存」。对照文案口径：短句，不另加解释。frontend/docs/VOICE.md 没有改，它不是这句的清单。
• 没有改 .gitea/**，没有改生产部署配置，没有给 scripts/jyotish_api_server.py 加方法。

数据库

只加列：chat_sessions.sidebar_order integer null default null，并授权已登录用户更新这一列。迁移文件 frontend/supabase/migrations/20261025010000_chat_session_sidebar_order.sql。没有放进 frontend/db/migrations。没有删列，没有改类型，没有收紧 NOT NULL。

npm run test:db（frontend，Docker 29.8.0）退出码 1。92 项，通过 79，失败 13。失败的 13 个名字与 tools/agent-loop/windows-known-failures.txt 逐条一致（备份目录 7 项、环境文件权限 3 项、个人报告任务权限 2 项）。含排序列的那一项通过：ok 37 - local PostgreSQL applies the reviewed business schema and serves authenticated business calls。它核对迁移已应用，列是可空 integer，并且没有复制到 frontend/db/migrations。不把整套写成通过，也不记入 BLOCKED.md。

断言改动（原值 / 新值 / 原因）

位置	原值	新值	原因
账户按钮	profile-trigger	sidebar-account-trigger	去掉手写类。仍是按钮，不是回首页的链接
账户菜单	Menu.Item / Menu.Root	DropdownMenu / DropdownMenuItem	改用组件库。站外页仍链到 /?account=
设置弹窗	renderToString 看到分区名和表单类	这些字符串锁在源码里	组件库对话框在这个测试环境里不输出 HTML。三个分区名不变
注销确认	role="dialog"	组件库根是 alert-dialog	确认框改用 AlertDialog。页面仍被 inert 盖住
侧栏导航类	.new-chat、.report-nav-button	.sidebar-nav-link，新建对话再加 data-nav="new"	导航合成一套菜单行。左对齐、行动色和图标尺寸不变
手机抽屉	手写遮罩、translateX、禁止出现 Sheet	Sheet，side="left"，桌面直接渲染同一棵侧栏	手机从左边滑出。内容仍是同一个侧栏变量
会话行	.session-row	.sidebar-session；收藏用 renderSortableGroup	行改名，组内可拖。收藏整组仍在最前
顶栏点数	.credit-button，与校正窥视同为 40px	.credit-balance 高 44px；窥视仍 40px	点数是正常大小的描边按钮
外壳孩子	SidebarInset 直接包 {children}	中间是 PageSwitch，再原样放 {children}	翻页包在外壳上。首页内容没有被复制
侧栏宽度	.chat-app 网格列 288 / 240 / 64	纵向 flex，宽度由可拖面板记住	桌面可以拖宽，不再写死三档
列表列	到 pinned,archived_at	末尾加 sidebar_order，仍不含 created_at 与 messages	只加排序列。查询仍按更新时间
人物切换	直接写 base-ui Popover.Root	shadcn Popover	改用组件库。关合和 Escape 不变
反馈表单	渲染整个 FeedbackDialog，类型是 radio	渲染 FeedbackDialogBody，类型是 tab	对话框要等浏览器挂上。提交字段不变
手机测试找侧栏	只在页面容器里找	容器和 document.body 都找	Sheet 打开后挂在 body 上
测试替身 self	self: window	self: globalThis	残缺的 window 让 cn 解析失败。真实全局才有 setTimeout
白名单	含设置、反馈、账户、主题等 8 个文件	这 8 个移出	它们已经改用组件库。名单只许变短
加号入口	字符「＋ 添加一个人」	Lucide Plus 加「添加一个人」	去掉当图标用的字符。入口和人数上限不变
头像说明	必须出现「刷新和换设备后保持一致」	这句不再出现	去掉重复解释布局的小字。配色和尺寸仍在

白名单移出的 8 个文件：account-deletion-gate.tsx、account-deletion-section.tsx、account-dialog-overlay.tsx、billing-panel.tsx、feedback-dialog.tsx、profile-panel.tsx、subject-switcher.tsx、theme-preference-menu.tsx。

自测

检查	命令	结果
类型	仓库根 frontend\node_modules\.bin\tsc.cmd --noEmit -p frontend	退出码 0
检查	在 frontend 下 npm run lint	退出码 0。0 error，121 warning。与 #96、#97 记下的 121 条相同。没有去修无关警告
定向测试	在 frontend 下 node node_modules/tsx/dist/cli.mjs --test 下面列出的文件	205 项，pass 205，fail 0，cancelled 0，skipped 0，todo 0，退出码 0
数据库	在 frontend 下 npm run test:db	退出码 1。92 项，通过 79，失败 13，名字与 Windows 已知清单一致。排序列在通过的 ok 37 里
构建	在 frontend 下 npm run build	退出码 0。/ 在 .next/prerender-manifest.json 里 compute 为 static。skill-package-registry.ts 的 Turbopack 追踪警告是改前就有的，没有改
首屏体积	首页 HTML 引用的 /_next/static/**.js，gzip-9 相加，不含 CSS	基线 8f7c0f7d：32 个文件，缺失 0，621226 字节。这一张：36 个文件，缺失 0，630350 字节。+9124 字节，+1.47%。621226 × 1.02 = 633650.52，留约 3300 字节

定向测试文件：account-dialog-inert-20260918、account-dialog-overlay、account-menu-every-page-20260928、beam-avatar、chart-birth-editor-and-report-table、chat-navigation-a11y-contract、chat-profile-picker、chat-session-authority、consultation-session-capacity、feedback-complaints-20260930、home-sidebar-rerender、home-shell-growth-contract、mobile-viewport-scroll-lock-20260917、motion-presets、new-chat-from-people-lifecycle、personal-report-entry、session-list-lifecycle、session-list-provider、sidebar-contract、starter-questions、synastry-report-surface、ui-kit-whitelist。

首屏里没有 ProjectionNode、DndContext、dropdown-menu、resizable（这四项在首屏脚本中都是 0，在其余产物里分别是 3、1、2、2）。动效、拖动排序、菜单和可拖分栏都在页面出来之后再载入。

没有跑前端全量 npm test，没有跑 Python 快速门。Python 入口和 scripts/jyotish_api_server.py 没有改。

偏离

• 为了停在 ±2% 以内，翻页、高亮、拖宽、拖动排序和账户菜单都改成页面出来后再载入。没有为了体积去改启程清单，也没有删无关页面。
• 菜单库还没到时，账户按钮和会话「更多」先是普通按钮，点不开菜单。库到了之后才是真正的菜单。账户按钮的焦点引用也在这时接上。
• 手机 Sheet 没有再拆出首屏。拆掉会让「打开抽屉」的测试和源码锁对不上，而体积已经在限额内。

环境缺口

• 没有登录态。没有在浏览器里拖过侧栏，没有点过菜单，没有用键盘排过会话。不能写成已经在真机上看过。可照做的步骤在 docs/testing/ui-kit-migration-20261023.md。
• 排序跨设备保留，靠上面的数据库测试核对列已经加上、可空、类型是 integer。没有第二台登录设备可看。

记录

• BUG-1433，状态 enhancement。不是缺陷。编号接在 BUG-1432 之后。
• CHANGELOG.md（条目日期 2026-10-24）、frontend/DESIGN.md、docs/testing/ui-kit-migration-20261023.md。
• Skill 版本不变。