#dsh-console 前端（rabbita + precss）

#30 秒上手

./check.sh            # 类型检查 + 构建（单退出码）
./check.sh --fast     # 只做类型检查，几秒
./build.sh            # 只构建：样式 → js → 拷 dist

DSH_CONSOLE_DIST="$PWD/dsh-console/frontend/dist" \
  dsh-console/backend/_build/native/debug/build/dsh-console-backend.exe
# http://127.0.0.1:5390/

#验收怎么跑

# 独立验证器：横向溢出 / 控制台报错 / 真数据到位（不依赖任何自证）
node ../design/verify-frontend.mjs http://127.0.0.1:5391

# 逐条对账：清单第五节的 12 条几何不变量 + 菜单 / 对话框 / 日志页 / 派生等行为
node ../design/measure-parity.mjs http://127.0.0.1:5391

#目标平台为什么是 js

1. 这一侧的运行期就是浏览器。页面要自己 fetch 五个只读接口、自己渲染， native 目标给不了这件事。
2. native 那一侧已经被后端占了。../backend/（MoonBit + moonback）已经是同端口 服务静态与 JSON 的进程，前端再出一个 native 服务就是两个进程抢同一件事。
3. 构建期的样式编译（cmd/build-styles）要读文件、写产物，只有 native 给得了； 它由 build.sh 用 --target native 单独跑，不进浏览器产物。

#依赖：只剩 rabbita 与 precss

#另一个坑：本模块根包的别名要显式给

import {
  "conglinyizhi/dsh-console-frontend" @frontend,
}

#目录

.
├── moon.mod / moon.pkg                模块定义（依赖只有 rabbita / precss / async）
├── icons.mbt                          26 个图标的内联 SVG：路径常量 + icon() 助手
├── model.mbt                          五个只读接口的数据模型与解析（外壳 → 字段，不做业务推导）
├── settings.mbt                       设置键表（9 个键 5 个分组）、取值模型、PUT 请求体
├── api.mbt                            写接口的传输层：fetch + 状态码/响应体，POST action / GET+PUT settings
├── state.mbt                          Model / Msg / 行模型 / 演示数据 / 工作流文案
├── app.mbt                            update 循环：拉取、写动作、设置页状态转移、对话框、日志
├── clock.mbt                          浏览器本地时刻（页脚灯的「检查于 <时刻>」/ 归档时间戳）
├── dom.mbt                            浏览器副作用 FFI：焦点、滚动、短时刻、控件值回写、减少动效判定
├── route.mbt                          URL 路由：pushState / popstate、地址 ↔ 页面状态、回落说明
├── view_shell.mbt                     外壳：左导航 / 内容区（顶栏已取消）+ 地址回落提示条
├── view_overview.mbt                  实例总览：卡片（三样）、详情抽屉、归档区、三个对话框
├── view_settings.mbt                  设置页：左索引 + 右条目（数字 / 开关 / 下拉）
├── view_logs.mbt                      日志页：原生 select 来源、元信息行、日志区
├── view_about.mbt                     关于页：简介 + 版本表 + 「这台的 dsh 版本」（可切版本）
├── view_parts.mbt                     共用小件：徽标、分组头、空态、字段行（抽屉里那六格）、对话框外壳
├── cmd/app/                           js 可执行：把 app() 挂到 #dsh-console-root
├── cmd/build-styles/                  native 可执行：precss 编 SCSS
├── styles/app.scss                    全部样式：reset + 设计 token + 版式
├── web/index.html                     页面外壳
├── vendor/licenses/mdi-NOTICE.md      图标路径数据的第三方声明（不再分发字体文件）
└── dist/                              构建产物，后端直接服务它

#组件与图标都是自建的

• 30 条路径固化成常量放在 icons.mbt，助手 icon(name, size) 产出 <svg class="dsh-icon" viewBox="0 0 24 24" width=… height=…><path d="…"/></svg>；
• 尺寸在调用点上逐处给（12 / 13 / 14 / 16 / 17 / 20 / 26），与 Vue 版 AppIcon 的 :size 一一对应。别随手改：侧栏图标大一号就会把「从当前实例派生开发副本」 那行挤成两行（实测过）；
• 路径数据取自 @mdi/js 7.4.47 之后固化，Node 依赖没有进仓库； 声明在 vendor/licenses/mdi-NOTICE.md；
• 所以 dist/ 里没有任何字体或图标资源，只有 app.css、app.js、index.html 和一份许可声明。

• 抽屉 / 顶栏类组件把 position: fixed、z-index、side 偏移写成内联样式， 而本外壳是文档流里的 flex 两列；内联样式没法从样式表压过，除非上 !important。
• 菜单锚在 activator 的包裹层上，位置由内联样式给；我们的不变量是 「锚在按钮组容器上、top = 按钮组底 + 6px、right: 0」。
• 对话框内容是内联 translate(-50%,-50%)，遮罩不给点击回调；我们要「点遮罩关闭」， 而 rabbita 的 div.on_click 收不到事件对象、判断不了 target。 改成遮罩与卡片同级（遮罩 z-index 60、居中层 61），点遮罩天然成立。

#样式：一份文件 + 自带的 reset

#动效

#写接口这一侧（这一轮新增）

• 行内按钮与下拉菜单 → POST /api/local/action，请求带 Content-Type: application/json 与 X-DSH-Console: 1（自定义头就是契约里的跨源闸门，浏览器不允许跨源带它）。 action 与 params 逐条按契约：start-instance / stop-instance / restart-instance / fork-profile / rename-profile / archive-profile / unarchive-profile / delete-profile / set-profile-note。 delete-profile 在 safety.deleteToTrash 不是 true 时带上 confirm:"DELETE"。
• 设置页 → GET /api/local/settings 取当前值 / 缺省 / 来源，PUT 一次改一个键。 改动即保存，成功失败都有反馈，失败显示后端给的 code: message。
• 成功率与失败率不一样对待：动作成功之后重读 profiles + instances（刷新读数，不是弹个提示）； 失败把后端的原因原样显示在总览页顶部的提示条上，不吞、也不伪装成成功。
• 目标来自读数：读不到 profile 目录名或端口时，动作在本地说清「没有可用的目标」并不发请求 —— 演示数据里的名字（main / dev / staging）不会被打到真实的东西上。
• 启动有等待态：回执与展示下限（start_delay_ms）都到齐才收尾；收尾不伪造成「运行中」， 真的起来了的那张卡由重读 instances 给出。

#profile 备注（第二轮）

• 读：GET /api/local/profiles 每个 profile 多一个 note（与 noteSource）。 非空时卡片下面多一行：只有备注本身（左侧一道细竖线当书签边，不带「备注」标 —— 这一行整个就是备注，标签是把同一句话说两遍），整行省略、完整内容与来源在悬停里。 没有备注的卡片不进这一行（note 空串时那个节点根本不在 DOM 里）， 所以卡片几何与加这个功能之前逐项一致 —— 这条是量过的，不是估的。
• 写：行菜单「编辑备注」（与「重命名」并列）→ 同一套对话框外壳 （居中层 .dsh-dialog-wrap、Esc 取消、关闭后焦点回触发元素），内容是自由文本： 预填当前备注、光标落在文末、留空保存就是删掉备注。 保存失败不关框：后端给的原因（bad-params / io-error / not-authorized…）写在框里， 改一改就能再存一次；成功了才关框、重读 profiles、提示条里给出后端那句 note。
• 删除确认框里也显示这条备注：删之前能看清这一只是干什么用的（有备注才出现那一段）。

#带令牌的访问地址（第四轮）

• 打开 Web UI（卡上）与在新标签页打开（行菜单）用的是同一条 webUrl。开没开成看 window.open 的返回值：被弹窗拦截就写「浏览器把新标签页拦掉了」，不报一句空的「已打开」。
• webUrl 为 null 时按钮照样可点，但一个标签页都不开：提示条先说清读不到令牌的原因 （后端那句 webUrlSource，例如「外部实例：令牌在启动它的终端里」），再把裸地址给人， 让他从启动它的那个终端里抄横幅自己拼。拿裸地址去开新标签就是一个 401 页面， 那等于给了个点了不能用的链接。
• 「访问地址」那一行显示的仍是裸地址（人读的），悬停里说清带令牌的那条有没有、 令牌从哪读来、读不到是为什么。令牌原值不进悬停：要看要复制走菜单。
• 两条复制：「复制访问地址」复制裸地址；「复制带令牌的地址」只在真有 webUrl 时出现， 复制的是 webUrl。剪贴板先走 navigator.clipboard，失败退到 document.execCommand， 两条都失败就如实报失败（提示条上那句「已复制」必须对应真写进去的东西）。

#这两处读数从哪来

• 卡片上的「由本控制台启动」：按 runtime 里的 port 匹配，且那条登记的 pid 还活着。 只看端口不够 —— 登记过、后来那个 pid 退了、端口被别人接走的情况长得一样。
• 归档区：按 archive 里的记录标出对应的 profile 行，行上的归档时间就是记录里的 archivedAt（显示成浏览器本地的 MM-DD HH:MM，原值留在悬停里）。磁盘上已经没有那只 profile 的记录另补一行，好让人看见并撤掉它。归档没有「已合并」标记了（第二轮）： archive[] 里只有 { profile, archivedAt }，旧文件里那个多余的字段读到时直接忽略。

#页面状态进地址（第五轮）

• 为什么是路径而不是 hash：后端静态服务带 SPA 回退（backend/dist_static 的 history_fallback 指向 /index.html），/settings/process 这种没有对应文件的路径 刷新时拿到的还是同一份 index.html，应用起来之后按 pathname 复原页面。 不用改后端；换成 hash 也能落回，但地址里会永远挂一个 #。
• 写：用户点出来的切换走 push_route（可后退）；由读数推出来的改写走 replace_route （回落、默认来源自动定下来的那一次），它们不是用户走的一步，不该在后退里多占一格。 地址没变就不写 —— 同一页连点两次侧栏不该攒两条一样的历史。
• 读：启动时读一次，之后每来一次 popstate 读一次当前地址 （不是事件里那份，连点两次后退也只会读到最新的一条）。监听用一次性的 Promise 挂， 回执进 update 再挂下一次，任何时刻只有一个在等。
• 认不出来的地址不白屏：/nope 回落总览、/settings/某个没了的组 回落设置首页， 并把「为什么」写成一句话显示在内容区顶部那条 .dsh-route-notice 上 （回落这一步同时改写地址栏，页面与地址必须指着同一处）。
• 日志来源认不出（不是 host / audit / instance:<id>）也走同一套：按默认来源读 + 说一句。

#读数没到 ≠ 没有数据

• 判据是 readings_pending(model)（built 还没立起来）；日志页看的是 log_loading 与 log_source_read：内容不属于当前来源时显示加载态， 不拿上一个来源的行顶着新来源显示。
• 加载态没有动效：全页的动效留给启动等待态的状态点， 多一个就会打破 design/probe-animation.mjs 的「点击前无可见动效」。
• 卡片栅格里的加载态与真条目同形（第八轮）：6 块占位（图标位 + 名字条）与真卡片共用 同一套列轨与断点，占位块是静态灰块、不是交互元素，带语义的只有那一行 role=status 的说明。 实测与口径见下面「加载骨架屏与卡片同形（第八轮追加）」一节与 evidence-loading-skeleton/。
• 第十一轮起每个分组最多占一行：占位块装进一层 .dsh-skeleton-row，那一层横跨整幅、 max-height 卡成恰好一行 + overflow: hidden，第 2 行往后裁掉（见下面第十一轮那一节）。
• 加载块的说明里刻意不写空态那两句话（「当前没有检测到正在运行的 dsh 实例」等）： 验收是用整句去认空态的，加载块的说明里带上那半句，就会把「不是空态」这条判成假的。

#一行自己的 home：停止卡那一格与「复制开发指令」（Phase 3 追加）

#卡片第六格「最近改动」与已停止组的排序（第五轮追加）

#第六格：最近改动，不是创建时间

• 多数文件系统上可靠的创建时间拿不到。ctime 记的是 inode 变更时间， chmod / 改名都会把它推新，它不是出生时间；birth time 不通用 （不是每个文件系统都存，也不是每个平台都读得到）。
• 目录 mtime（最近改动）是能拿到、且不会骗人的那一个。
• 它顺带回答了「哪个是刚弄的」：刚派生出来的 profile 一定是最新的。

#已停止组按最近改动降序

• 已停止那一组按 dirMtimeMs 降序排：新的在最上面，刚派生出来的 profile 一眼就能看到。
• dirMtimeMs 为 null 的一律沉底（None 不是 0，不参与比较），同一档内按名字升序兜底 —— 顺序必须是确定的，不然同一份读数每次刷新都可能换个样子。
• 运行中那一组不掺进这条口径：它还是按实例读数自己的顺序走。

node evidence-mtime-field/probe-mtime.mjs http://127.0.0.1:5390/ real evidence-mtime-field/real
node evidence-mtime-field/probe-mtime.mjs http://127.0.0.1:5390/ \
  synth:evidence-mtime-field/fixture-synth-profiles.json evidence-mtime-field/synth
node evidence-mtime-field/check-order.mjs evidence-mtime-field/synth.json

#卡片变条目 + 详情抽屉 + 三色状态灯（第七轮追加）

#卡片只剩三样

#状态灯：四档 + 一档不是颜色的档（§26.1）

• light_reason —— 抽屉「状态」一节里的正文：一行，说人话（它正在 :3080 上应答 / 端口在听，但不应答 dsh 的握手 / 没有在跑）。黄的两种成因因此分得开，两句长得不一样。
• light_basis —— 悬停里的技术依据：哪一条握手应答命中、探测回来的是什么、profile 那一侧怎么样。 正文一个字都不占：成因编号、应答标识、组件名这些是给改这个工具的人看的，不进正文。

#详情抽屉

• 右侧、覆盖式（position: fixed，不占文档流，卡片不必为它让位）；遮罩与面板是兄弟， 与既有对话框同一套做法（rabbita 的 div.on_click 收不到事件对象、判断不了 target）。
• 层级压在对话框之下（抽屉 50/51 < 对话框 60/61）：抽屉里的重命名 / 备注 / 删除会开对话框， 框必须在抽屉上面。开这三个框时抽屉先收掉：不然取消之后焦点会落进一个盖在背后的面板。
• 点外部 / Esc / 关闭键三条路都发 DrawerClose；打开时焦点进抽屉里的关闭键， 关闭时焦点回触发它的那张卡（卡有稳定 id dsh-card-<row.id>）。 焦点落在被卸载的节点上会掉到 body，键盘用户于是从页首重新 Tab —— 所以这一条是量过的。
• 窄屏（≤640px）占满宽度、宽屏固定 520px；内容自己滚（.dsh-drawer-body 的 overflow-y: auto）。 窄屏下六格读数同时塌成一列（两列时值全被省略号截掉）。
• 开合有过渡（第十一轮）：从右边滑进滑出 + 一点透明度，出入同一条 220ms / ease-out； 收的那一段里节点多留一会儿、且对指针关掉 —— 焦点不等动画，DrawerClose 那一拍就回卡片了。 prefers-reduced-motion: reduce 下不做任何位移与淡入淡出（收的那一半连节点都不留）。 见下面「开合过渡与骨架屏一行封顶（第十一轮追加）」。
• 列表重建后抽屉指着的那一行没了（实例停掉变成 profile 行、归档移出分组、profile 被删）， 抽屉自动收掉 —— 留一个没有内容的浮层会挡住底下。

#响应式重算

cd dsh-console/frontend/evidence-card-drawer
node probe-states.mjs  http://127.0.0.1:5390/ states  # 三色 + 黄的两个成因（计算样式，不是看截图）
node probe-drawer.mjs  http://127.0.0.1:5390/ drawer  # 卡片只剩三样 / 抽屉开合与焦点 / 按钮可达 / 窄屏占满
node probe-widths.mjs  http://127.0.0.1:5390/ widths  # 20 档宽度的列数与溢出

#加载骨架屏与卡片同形（第八轮追加）

• 放行前后主区宽度、列轨数、第一项的 x 逐像素相同，宽屏下第一项的 y 也相同（96.7）。 360 下第一项 y 从 227.2 变到 161，差的 66px 全部来自加载时那三枚「读取中」徽标 （页头 122.8 → 96.8、分组头 60.4 → 20.1，两项相加 66.3），与占位块无关，改之前同样存在。
• 占位块是静态的：加载态下全页在跑动画的元素 0 个 （probe-animation.mjs 那条「点击前无可见动效」因此不受影响）。
• 占位块不是交互元素：.dsh-loading button, .dsh-loading [tabindex] = 0；点它的正中 没有任何变化（URL / 抽屉 / 焦点 / 节点数全同）；Tab 走一圈焦点不落在它上面； 12 块全部 aria-hidden，无 role、无 tabindex、无点击处理器，光标也是默认箭头。 带语义的只有说明那一行（role=status + aria-live=polite，每个分组一处，文案只此一份）。
• 空态（.dsh-empty 虚线框）与「这一版后端没给字段」那两档一个字没动。
• 日志页与回收站页照旧是整幅一块：那两处的内容本来就不是卡片，条目形状在那里没有对应物。

cd dsh-console/frontend/evidence-loading-skeleton
node probe-skeleton.mjs http://127.0.0.1:5390/ skeleton
# 用 Fetch 拦截把 /api/local/* 压后 2 秒：加载中那一刻量一次、放行后再量一次，
# 四种视口（1280 / 1920 / 768 / 360）各一遍，外加点一下与 Tab 一圈的交互性实测。

#条目改两行与手动拖动排序（第十轮追加）

#条目：左图标竖跨两行

• 备注：左侧一道 2px 细竖线 + $text-mid —— 那道线是「这是人写的」的记号
• 上次启动：上次启动 10-15 18:20，不带那道线、颜色再淡一档（$text-dim）—— 时间是机器的读数， 给它挂上同一道线就是把两种东西说成一种
• 空：不产出这一行（DOM 里没有节点），条目落回「只有一行」那副形状

#拖动排序

• 按下与点击共存：按下只记住起点，位移超过 6px 才算拖动；没超过就还是点击（点条目开抽屉那条路一个字都没动）
• 落位提示：跟着指针的半透明虚影 + 落在将来那一格上的占位块（第十二轮改成这样，见文末那一节）
• 最后一格与第一格都够得着（第十三轮改，见文末那一节）：指针越过最后一块的下沿 = 最后一格、 越过第一块的上沿 = 第一格，多行时最后一格就是最后一行的最后一格。 旧版在列表上下各留 32px 宽容带、出带即作废 —— 而指针要越过那一块才能到那一格，越过就出带， 这两格于是永远够不着。作废只剩两种：横向拖出栅格、拖进另一组（跨组不合并，这条不退）。
• 松手立刻写回：POST /api/local/action 的 set-row-order，提交的是整份新顺序（不是增量），空数组 = 清空 （成功的回执第十一轮压成「顺序已保存」，落盘路径与条数收进悬停，见文末那一节）
• 失败回滚：写不进去就把顺序退回提交前那一份并如实报错（io-error），不停在「看着是新的、其实没存下」
• 窄屏不响应：< 726px（单列那一档）里纵向拖动与页面滚动落在同一个手势上，按下即不启动拖动
• 键盘也能换位：聚焦某一条之后 Ctrl+↑ / Ctrl+↓，走同一条提交路径。分两拍： 先亮出占位块（190ms），再落位 —— 键盘用户看到的也是「将要落到哪一格」

#开合过渡与骨架屏一行封顶（第十一轮追加）

#详情抽屉的开合

• 进：从右边滑进来（translateX(100%) → 0）并淡入；出：往右边滑回去并淡出。 出入同一条时长与缓动（220ms / ease-out）—— 一个快一个慢看着像被弹回去。遮罩跟着淡， 但不参与滑。
• 时长写在两处、必须是同一个数：样式里 .dsh-drawer 的 animation，与 state.mbt 的 drawer_anim_ms。上限 300：收的那一段走完之后节点才撤，验收探针在 Esc 之后等 700ms 就断言「抽屉没了」，比 300 长就会让那条判定误报。
• 收的那一段由 Model 里的 drawer_closing 撑着：DrawerClose 把行 id 从 drawer_id 挪到 drawer_closing，节点带着 data-state="closing" 多留 220ms 让滑出看得见，到点由 DrawerClosed(id) 撤掉（号对不上就不撤 —— 这中间又开过抽屉的话，那一枪作废）。
• 焦点立刻就走，不等动画：三张卡上的老行为一个字没改（点外部 / Esc / 关闭键都发 DrawerClose，焦点回触发它的那张卡）。收的这 220ms 里抽屉还在文档里，但已经 pointer-events: none（半透明的面板不该再吃点击）—— 探针每 40ms 采一格，t=11ms 那一格 就是「抽屉还在（state=closing，x=823.9）、焦点已在 dsh-card-port-3080 上」。
• prefers-reduced-motion: reduce：不做任何位移与淡入淡出。开的那一半由样式里那条 media query 关掉动画（直接出现）；收的那一半还要求连节点都不留（留着的这段时间它还 盖着页面），所以在 DrawerClose 里判一次（dom.mbt 的 prefers_reduced_motion）—— 那个设置下 Esc 是当场撤节点，采样第一格（t=10ms）抽屉就不在了。
• 新增的对外标记只有 data-state="open|closing"（动画与「对指针关掉」都挂在这个属性上）； 可见文案：无。

#骨架屏每个分组最多一行

• 6 块占位块照旧渲染，装进一层 .dsh-skeleton-row：一条栅格项（grid-column: 1 / -1）， 里面用与真卡片同一套列轨（五条断点写在同一个选择器列表里，不抄第二份）。
• 这一层 max-height 卡成恰好一行 + overflow: hidden：4 列时那 6 块本来排两行、2 列时三行， 第 2 行往后直接裁掉 —— 不用在 JS 里量列数，骨架屏也不会把下面的分组一路顶下去。
• 一行的高度就是骨架块自己的高：70（= 14 + 1 + 40 + 1 + 14，与 .dsh-skeleton 逐项对齐）； 窄视口那一档（≤620px）两边一起收成 60，两条规则共享同一组数字（改一处得改另一处）。
• 读数回来之后高度仍会变（真卡片带备注就是两行）—— 这是使用者要的取舍； 列轨与宽度一个字都不变（照上一轮的口径量过：列轨数、grid-template-columns、列起点逐列相同）。
• 360 那一档如实说一句：骨架块在这一档是 60（占位块的第二行高 8 < 真条目的 16，见第八轮 「占位块永远不会比真条目高」），而带第二行的真卡片是 66。所以 1 列那一档的「一行」是 60， 不是 66 —— 本轮只裁行数，不动块本身的形状。

#顺序保存那条回执

#实测

cd dsh-console/frontend/evidence-motion-skeleton
node probe-drawer-motion.mjs http://127.0.0.1:5390/ drawer-motion
# 开 / 关每 40ms 采一格（transform / x / opacity / 动画名 / data-state / 焦点）；
# 再用 CDP 模拟 prefers-reduced-motion: reduce 走一遍；最后两张在途帧（播放速率 0.4，只影响这两张图）
node probe-drawer-behavior.mjs http://127.0.0.1:5390/ drawer-behavior
# 点卡开 / 点外部关 / Esc / 关闭键 / 关的中途又开 / 窄屏 360 占满整幅：焦点逐条看
node probe-skeleton-rows.mjs http://127.0.0.1:5390/ skeleton-rows
# Fetch 拦截把 /api/local/* 压后 2 秒：1920 / 1280 / 768 / 360 各量一遍（加载态 vs 放行后）
node probe-order-toast.mjs http://127.0.0.1:5533/ order-toast
# 隔离实例（DSH_HOME 与 XDG_STATE_HOME 都在 /tmp 的 fixture 下）里真拖一次，读回执正文与悬停

#拖动落点预览：预览就是结果（第十二轮追加）

#三样东西各是谁

• 虚影（.dsh-drag-ghost，view_overview 的 drag_ghost_view）：手上那一条的半透明副本， 往右下偏 (10, 14) 跟着指针。位置由 js_drag_ghost_move 每动一下改一次 transform —— 不回状态、不重渲染（跟着指针走的不变量只有这一个）。pointer-events: none：它压在 指针下面，不关的话每逢指针落到它身上事件就换了目标。 偏一点而不是正压在指针上：正压着会盖住占位块（实测截图里占位块只剩一层虚线边露出来）。
• 占位块（.dsh-drop-slot，drop_slot）：它就是这块将来真正会占的那一格。 形状与真条目同款（宽高、圆角、内边距、图标位都照 .dsh-case 走），外观另起一副： 虚线边 + 极淡的强调底 + 里面的内容再淡一档；状态灯摘掉（灯说的是现在在不在跑）。 它挂在孩子序列的末尾，摆到第几格由 js_grid_cells 直接写 grid-column / grid-row。
• 原件（.dsh-case.drag-image）：留在原格子里、visibility: hidden —— 仍然占着一格。 位置留着，落点算法才有一份「与没在拖时一致」的坐标可量（js_drop_freeze）； 它同时从 Tab 序列里摘掉（tabindex -1），焦点不会落在一个看不见的节点上。

#摆格子为什么是渲染之后用 JS 直接写

1. 靠孩子序列里的位置：虚拟 DOM 那一层是按位置比对孩子序列的 —— 中间插一个节点， 它会把后面那些节点错位对齐（实测「插在第 0 位的占位块」拿到了第 0 位那个节点的样式与属性， 自己被挤到末尾，预览因此与结果差一格）。所以占位块只追加在末尾，前面一个节点都不动。
2. 靠 order + 属性选择器：栅格的自动排布碰不得空档 —— order 不成一份完整的 0..n-1 排列时，后一条会自己往后跳一格（实测第 0 格的占位块被摆到了第三列）； 补齐成完整排列之后，被拖的那一条又得跟着别人一起重排，而它必须稳稳待在最后一格。

#让位那一段

#键盘换位分两拍

#另外两条

• 拖动中滚了页面就作废：落点判定用的是视口坐标，页面一滚就全对不上（js_drop_freeze 里挂的 scroll 监听 → js_drop_scrolled → DragCancel）。与其拿过期坐标算一个「看着对、落错格」的落点， 不如当场作废。
• 读屏播报：aria-live="polite" 的一格，正文形如「web-dev 已移到第 3 位」，只在拖动态存在时 才有一个节点。视觉上裁成一个点（clip-path: inset(50%)），页面上一个字都看不见 —— 这是这一轮唯一的新文案。

#实测

cd dsh-console/design && DRAG_STATE_DIR=/tmp/dsh-drag-iso \
  node probe-drag-preview.mjs http://127.0.0.1:5391/ /tmp/drag.json
# 跑在**隔离后端** 5391 上（自己的 XDG_STATE_HOME）：拖动会真写 order.json，
# 5390 那台用的是使用者的状态目录，不拿它做写入实测。

#右上角那一格加「端口：」标签（第十三轮追加）

#≤420 那一档标签让位

#实测

cd dsh-console/frontend/evidence-card-port-label
PROBE_VIEWPORT_W=1280 PROBE_VIEWPORT_H=900 node probe-port-label.mjs http://127.0.0.1:5390/ after-1280.json after-1280
PROBE_VIEWPORT_W=360  PROBE_VIEWPORT_H=720 node probe-port-label.mjs http://127.0.0.1:5390/ after-360.json  after-360
node compare-port-geometry.mjs before-1280.json after-1280.json before-360.json after-360.json   # 改前/改后逐像素对照
node dump-dom-proof.mjs > dom-text.txt                                                          # DOM 文本 + 没有端口就没有那个节点
cd ../../design && ACC_NO_START=1 node run-acceptance.mjs http://127.0.0.1:5390/                # 判定 31 项：通过 31，失败 0

#关于页：用哪一版 dsh 起实例（第十四轮追加）

• 每份 dsh 一行：版本号（主文本）+ 「在用」（起实例会用它）/「在跑」（有实例正用它）两枚小标记
  • 「用这一版」按钮；已经是「按你指定的那一版」时，那一行另有「回到自动」。 包目录不进正文（一屏放不下几条长路径），挂在整行的悬停里，连同「从哪找到的」那句话。
• 列表下面一句说清现在生效的是哪一版：没指定过 / 按你指定的（带版本号）/ 你指定过但那版不在了 （照抄后端 dshPinNote 的原话）。三种说法分开写 —— 把「没指定」写成「按指定」，或者反过来， 都是在这一格上说假话。
• 点按钮 = 真动作：DshVersionPin(dir, version) → POST pin-dsh； 「回到自动」→ DshVersionUnpin → POST unpin-dsh。回执不猜结果： 成功之后就重读一次 /api/local/runtime，界面按新读数自己变（版本表里的 dsh 版本 也跟着变）。 失败与成功都留一行提示在那一块里 —— 这一页没有总览页那条提示条，不留就没有反馈。
• 数据钩子：dsh-version-panel / dsh-version-row / dsh-use-version / dsh-use-auto / dsh-pin-line / dsh-pin-notice。 按钮样式沿用抽屉里那副 .dsh-btn，没有新造一套。
• 「改这一版只影响以后起的实例」写在面板脚注里：已经在跑的那些要重启才会换 —— 这句话是这一块的边界，不写出来，用户会以为点了就把运行中的实例换了。

#页脚改成服务端在线灯 + 原因行补悬停（第三十一轮追加）

• 三档：灰 正在检查…（刚进页面，还没有第一次结果）/ 绿 服务端在线 / 红 服务端离线。
• 悬停：在线 最近一次响应 <N> ms，检查于 <HH:MM:SS>；离线 连续失败 <N> 次，最近一次：<原因>。 毫秒是本机量的（performance.now() 差值），不是服务端说的耗时。
• 轮询：每 5 秒 GET /api/local/console，单次 3 秒超时（AbortController 掐掉， 不掐的话一个不答的请求会把灯停在上一档）。第一条回执到了才排下一次定时器。
• document.hidden 时不排定时器、不发请求：改成挂一个 visibilitychange 监听， 页面重新可见那一刻立刻补一次（HealthVisible）—— 后台标签页不该在空转。
• 这一枪不碰任何读数：profiles / instances / console 各有各的请求与错误格， 灯说的只是「服务端答不答」。请求带一个 X-DSH-Health: 1 头，验收要单独拦它时按这个认。
• DOM 钩子：[data-name="side-foot"]（带 data-state="checking|online|offline" 与 role="status"、aria-live="polite"）/ side-foot-dot / side-foot-text。

#失败提示轻量化 + 控制台审计来源（第三十二轮追加）

• 正文只留第一句：按「。」或「；」切第一刀取前段，超过 56 个字再截断补「…」。 完整原文挂在提示条的悬停里（title），也在这次动作写下的审计行里。
• 右侧一颗低调的「查看日志」：点了跳 /logs/actions，选中「控制台审计」来源、滚到底、 焦点进日志区（#dsh-log-box，tabindex=-1；日志落地之后才送焦点， 因为打开那一刻日志区还不存在）。
• 只有动作失败带这颗按钮：它走 POST /api/local/action，后端一定写了审计行 （ok:false + code + message）。剪贴板、读数、设置校验那些失败不写审计， 也就不摆一颗点了看不到东西的按钮（Notice.audit 这一格就是这条界线）。
• 日志页多了一条来源 actions「控制台审计」（后端 logs 的 fixed_sources）： 读的是 $XDG_STATE_HOME/dsh-console/audit.jsonl，每行压成 「动作 · 结局 · 错误码 · message」，失败行按 error 上色。它与原来那条 audit 「审计日志」（linxi-guard 的守卫审计）是两个文件。
• 路由多认一种写法：/logs/<来源>。?source= 照旧认，老链接与书签不会断； 切来源写 query，提示条那颗按钮写路径形式。

#别处 home 起的实例：配置 home 按实例认定（第三十三轮追加）

• 运行行：先按 profiles 读数配（控制台 home 或它的隔离 home）；配不上时用实例自己的 home 认定成「共用（<那份 home>）」，home_from_instance = true。悬停第一句是 「按实例的 home 认定的：这只 profile 不在控制台的 DSH_HOME 里，所以按它跑着的那份 home 算」。
• 「运行 home」那一行只在实例 home 与「配置 home」不同时才出现 —— 按实例认定这一档两者 是同一份，不再单独列一行（以前它俩并排，互相打脸）。
• 连实例 home 都认不出（dsh_home 读不到）才写「读不到」，悬停 「这只实例的 home 与 profile 都认不出来（原因）」。老后端缺 home 字段时保留原来那句 「这一版读数里没有「配置 home」这一项」。
• 移进 / 移回：profile 不在控制台的 DSH_HOME 里时按钮禁用（data-movable="false"）， 悬停「这只 profile 不在控制台的 DSH_HOME 里，动不了它的 home」。
• 插件数量 / 最近改动是「—」时，悬停补一句「这只 profile 不在控制台的 DSH_HOME 里， 读不到它的这些读数」（是「读不到」，不是「没有」）。

#通知历史（第三十六轮追加）

• Model.notice_history：最近 20 条 { at, ok, text, hint }，新到旧，每次 notice_put 都追加 （成功、失败都记），超了就丢最旧的。只在内存里，刷新页面就清空 —— 它不是审计， 审计在 /logs/actions。
• 顶栏右侧一颗铃铛（宽屏与窄屏各一颗）：data-unread 是未读条数，角标显示它（满 20 显示 20+）， aria-label 同步成「通知：还有 N 条未读」—— 颜色之外还有数字与文字。
• 点开是右侧面板（z 57/56：盖在抽屉与提示条之上、确认框之下），标题 通知（N）； 每行 时刻 + 成功/失败标记（文字通道）+ 正文两行封顶（-webkit-line-clamp: 2），悬停给 hint； 空态一句「还没有通知。动作的结果会在这里留一条。」。打开面板时未读归零，焦点进关闭键； 关闭（关闭键 / 遮罩 / Esc）之后焦点回铃铛。
• 正文与悬停里不会出现带令牌的地址：notice_put 是提示的唯一出口，那里统一走 redact_tokens，把 token=<值> 整段换成 …（连参数名一起去掉，所以正文与历史里连 token= 这个串都搜不到）。令牌原值仍在内存（notice_url）与实例日志里，只是不上屏。

#缺包自助修复（第三十九轮追加）

• 抽屉「状态」组里，缺包时多一行 安装缺的包（N）（次要样式，与启动 / 打开 Web UI 分开）。 悬停写清三件事：在哪个目录跑哪条命令、只动 node_modules、输出落到状态目录的 logs/repair-<名>-<毫秒>.log。命令由后端按 lock 文件选好（repairCommand 一处口径， 前端不自己猜 pnpm / npm）。
• 点它先开确认框：标题 给 <名> 安装缺的包，正文 将在 <目录> 里执行 <命令>，只补 node_modules。装完会重新读一次这只 profile。，按钮 安装 / 取消（Esc / 遮罩也能关，焦点回那颗按钮）。
• 确认之后这一行置忙：按钮变 正在安装… 并禁用，抽屉里其余写动作（启动 / 重启 / 改名 / 备注 / 归档 / 删除……）跟着一起禁用。回执到了才收。
• 成功：提示一句短的（后端那句 repairme 的包已装齐（pnpm install --prefer-offline，0 秒））， 悬停补日志路径与退出码 / 用时；同时重读读数 —— 缺包归零、灯不再是黄、按钮自己消失。
• 失败：走 §32 那条路 —— 提示条一句话（install-failed 之类），右侧一颗 查看日志， 点它落到 /logs/actions，那一行就是这次 repair-packages，message 里带完整输出路径。

• 按钮 安装缺的包（1）、宽 135、悬停照上面三件事；确认框 360×…（1280）、焦点在 安装。
• 点 安装 之后抓到 正在安装…（disabled=true，state=running），同一拍里其余写按钮 启动 / 重启 / 复制访问地址 / 重命名 / 备注 / 归档 / 删除 全部 disabled。
• 成功：提示 repairme 的包已装齐（pnpm install --prefer-offline，0 秒），抽屉健康行变成 「声明的包都已安装，cordis.patch.yml 也在」，安装缺的包 那颗按钮消失（缺包 0）。
• 失败：提示 repairfail 安装缺的包失败：HTTP 500 Internal Server Error | inst…（57 字，§32 的口径）， 悬停是完整原文含日志路径；点 查看日志 → /logs/actions，最后一行 06:09:37.687 error repair-packages · 失败 · install-failed · 安装失败（退出码 1）：…完整输出在…/logs/repair-repairfail-1792476576983.log；审计那笔的 outcome 里 logPath、exitCode=1、 missingBefore=1、missingAfter=1 都在。
• 并发：同一只连发两次，第二次 busy（409，「这只 profile 上一次补包还没结束」）。
• 390：确认框 342 宽（x 24..366）、文档 scrollWidth 390 = clientWidth 390，不溢出。

#缺包默认不报警（第四十轮追加）

• 新设置项 profile.ignoreMissingBundles（布尔，缺省 true），放在设置页「界面」组： 标题「忽略缺包警告」、说明「声明了但没装的包不影响运行时不再报警」、悬停 「缺的包仍然可以在抽屉里安装；关掉这一项，缺包会重新算作警告」。后端只负责存取与回显， 来源照旧在行上（默认 / 文件）。
• 开着：缺包不参与状态灯判定（在跑就是绿的，不亮黄、不写「有警告」）；关掉：回到旧行为。 判据只在一处：state.mbt 的 ignore_missing_bundles(model) → profile_light / instance_light / health_note_of。总览、抽屉、维护页与整体替换的配置卡都走这一份 （job_profile_pick 也带同一个参数）。
• 缺包仍然可修：抽屉「配置」组里一行低调的小字「还缺 N 个包」+ 一颗「安装」（与 §39 同一个 repair-packages，确认框与回执都不变）；「状态」组里不再出现「缺 N 个包」那行与那颗大按钮。
• 状态组那句体检话在「忽略缺包」时只说另一半（cordis.patch.yml 也在）：缺口还在， 不能写成「声明的包都已安装」。

• 默认（开，来源 默认）：卡片灯 running（绿）、没有「有警告」；灯悬停里写着 「缺包这一项按设置不参与判灯」。抽屉状态组只有「运行中」+「cordis.patch.yml 也在」， 没有「缺 6 个包」；配置组里有「还缺 6 个包」+「安装」，悬停是 §39 那句（目录 / 命令 / 日志位置）。
• 设置页里把这一项关掉：卡片立刻变 warn（黄）+「有警告」，灯悬停写「这只 profile 缺 6 个包」； 抽屉状态组那行「缺 6 个包」回来；配置组那行照旧在（照样能装）。
• 刷新页面：仍是黄的；设置页显示 关、来源 文件（写进了 settings.json）。再打开 → 回绿。
• 维护页侧栏的配置卡同样按这一份判据：warnme 那张 running（绿），悬停同一句 「缺包这一项按设置不参与判灯」。
• 390×780：抽屉里「还缺 6 个包」17..71、「安装」81..144；设置行 29..361；两页都是 scrollWidth 390 = clientWidth 390，不溢出。

#开关换成 MD2，并抽成组件（第五十一轮追加）

• view_parts.mbt 的 switch_control(on, disabled, label, title, on_click, small?, key?, elem_id?)： 结构是 button.dsh-switch[role=switch][aria-checked] > .dsh-switch-track > .dsh-switch-thumb， 不再有开/关文字（状态由圆点位置 + 轨道颜色表达，读屏靠 aria-checked）。 key 是这一颗的语义路径尾巴（进 data-uid）：同页多颗必须不同，否则 uid 撞车； elem_id 用来在保存之后把焦点送回来。
• MD2 几何：轨道 36×14、圆角 7，圆点 20；圆点默认左移 3px，让圆心落在左端点（半径 7）上， 开时右移 22px 停到右端点，两端各外溢 3px（(20−14)/2）。切换 120ms，prefers-reduced-motion 关掉动画；:focus-visible 给 2px 主色描边（离轨道 2px）；禁用 0.45 不透明度； small 档轨道 32×12、圆点 18、位移 20。
• 颜色：关 = 轨道 rgba(255,255,255,.24) + 圆点 $text-mid；开 = 轨道 rgba($accent-rgb,.5) + 圆点 $accent。悬停给圆点外一圈 8% 淡影。
• 设置页三项（归档区默认展开 / 侧栏收起 / 忽略缺包警告）都改用它；旧的 .dsh-switch-text、 .dsh-switch-knob、.dsh-switch.small 那套规则删干净了（构建产物里 grep 0 命中）。
• 一个顺带的修：保存成功之后把焦点送回那一颗开关（setting_switch_id(key) + focus_after_render）。 保存会让这一行冒出「恢复默认」按钮，节点结构一变焦点就掉到 body —— 不送回来的话， 键盘用户按一次空格就再也接不上第二下（§51.4 要空格与回车都能切）。

#这一版没做的

• 归档区没有读接口（见上），所以它不是「真实的归档清单」，是本次会话的记录。
• 没有水合、没有 SSR。控件的交互都走 rabbita 的事件，不需要额外的 behaviors 脚本。
• dist/assets/app.js 1.61 MB（未压缩，gzip 约 188 KB）。后端不发 Content-Encoding: gzip， 回环访问下可接受；构建链刻意不依赖 Node，所以没有加一道压缩步骤。
• 两个空态图标（运行中空态、已停止空态）本机有实例时走不到，只在源码层面核对过路径常量。