modelstage 0.0.0-stage → 0.5.28

package/src/web/panel/dialog.js

@@ -0,0 +1,173 @@
+// panel/dialog.js —— 自绘弹窗（文本输入 / 危险确认），零依赖、纯逻辑
+//
+// 为什么要自绘而不是浏览器原生弹窗（输入框 / 确认框）：
+//   ① 原生弹窗是**同步阻塞**的，会把整个 JS 线程停住 —— 阻塞期间渲染循环停摆、
+//      就绪信号不推进、日志不落盘，与项目契约《事件驱动优先》直接冲突；
+//   ② 原生 chrome 的字体/配色/按钮文案全由浏览器决定（英文环境下会变成 Cancel/OK），
+//      深色面板弹出一个系统白底窗口，视觉断层，手机上还可能被虚拟键盘顶飞；
+//   ③ DOM 级弹窗可以直接查元素断言，不需要 stub 全局函数 —— 自动化更稳。
+//
+// 两条硬纪律（踩过就会懂）：
+//   · **任何**关闭路径（确定/取消/Esc/点遮罩/被新弹窗顶掉）都必须 resolve，
+//     否则调用方的 await 永远挂住，表现为"点了没反应"；
+//   · 同一时刻只允许一个弹窗：重复调用先把前一个 resolve 掉再开新的。
+
+import { el } from './dom.js';
+
+/** 样式表只注入一次（面板会重建，重复插 <link> 浪费） */
+const CSS_HREF = 'panel/dialog.css';
+const CSS_ATTR = 'data-dialog-css';
+
+/** 当前打开的弹窗句柄（单例约束） */
+let current = null;
+
+/** 注入样式表（幂等；失败不阻塞弹窗可用） */
+function ensureStylesheet(doc) {
+  if (doc.querySelector(`link[${CSS_ATTR}]`)) return;
+  const link = doc.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = CSS_HREF;
+  link.setAttribute(CSS_ATTR, '1');
+  (doc.head || doc.documentElement).append(link);
+}
+
+/**
+ * 打开一个弹窗并在关闭时 resolve。
+ * @param {object} spec
+ * @param {string} spec.title 标题
+ * @param {string} [spec.message] 说明文字
+ * @param {boolean} [spec.withInput] 是否带输入框
+ * @param {string} [spec.value] 输入框初始值
+ * @param {string} [spec.placeholder] 占位提示
+ * @param {number} [spec.maxlength] 最大长度（带实时字数反馈）
+ * @param {boolean} [spec.danger] 危险操作（确定键用危险色 + 默认焦点给取消）
+ * @param {string} [spec.confirmText] 确定键文案
+ * @param {string} [spec.cancelText] 取消键文案
+ * @returns {Promise<any>} 带输入 ⇒ 字符串或 null；确认 ⇒ boolean
+ */
+function openDialog(spec) {
+  // 单例：先把上一个按"取消"收掉，避免两个遮罩叠放且其 Promise 悬空
+  if (current) current.close(spec.withInput ? null : false);
+
+  const doc = document;
+  ensureStylesheet(doc);
+
+  const mask = el('div', 'dlg-mask');
+  const panel = el('div', 'dlg-panel');
+  panel.setAttribute('role', 'dialog');
+  panel.setAttribute('aria-modal', 'true');
+
+  const titleEl = el('p', 'dlg-title', spec.title || '');
+  panel.append(titleEl);
+  if (spec.message) panel.append(el('p', 'dlg-message', spec.message));
+
+  let input = null;
+  let counter = null;
+  if (spec.withInput) {
+    const row = el('div', 'dlg-input-row');
+    input = el('input', 'dlg-input');
+    input.type = 'text';
+    input.value = spec.value || '';
+    input.placeholder = spec.placeholder || '';
+    if (spec.maxlength) input.maxLength = spec.maxlength;
+    input.setAttribute('aria-label', spec.title || '输入');
+    row.append(input);
+    if (spec.maxlength) {
+      // 实时字数：没有反馈用户不知道为什么打不进去
+      counter = el('span', 'dlg-counter', `${input.value.length}/${spec.maxlength}`);
+      row.append(counter);
+    }
+    panel.append(row);
+  }
+
+  const actions = el('div', 'dlg-actions');
+  const btnCancel = el('button', 'dlg-btn dlg-btn--cancel', spec.cancelText || '取消');
+  btnCancel.type = 'button';
+  const btnOk = el('button', `dlg-btn dlg-btn--primary${spec.danger ? ' dlg-btn--danger' : ''}`, spec.confirmText || '确定');
+  btnOk.type = 'button';
+  actions.append(btnCancel, btnOk);
+  panel.append(actions);
+  mask.append(panel);
+  doc.body.append(mask);
+
+  let closed = false;
+  return new Promise((resolve) => {
+    /** 统一的关闭出口：保证只 resolve 一次，并摘掉全局监听 */
+    const finish = (ok) => {
+      if (closed) return;
+      closed = true;
+      doc.removeEventListener('keydown', onKey, true);
+      try { mask.remove(); } catch { /* 已被移除 */ }
+      if (current === handle) current = null;
+      if (spec.withInput) resolve(ok ? String(input.value || '').trim() : null);
+      else resolve(!!ok);
+    };
+
+    /** Enter 提交 / Esc 取消（捕获阶段，避免被页面其它快捷键抢先） */
+    function onKey(ev) {
+      if (ev.key === 'Escape') { ev.stopPropagation(); finish(false); return; }
+      if (ev.key === 'Enter' && spec.withInput && ev.target === input) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        finish(true);   // 输入框里按 Enter = 确定
+      }
+    }
+    doc.addEventListener('keydown', onKey, true);
+
+    btnCancel.addEventListener('click', () => finish(false));
+    btnOk.addEventListener('click', () => finish(true));
+    mask.addEventListener('click', (ev) => { if (ev.target === mask) finish(false); });
+
+    if (input) {
+      input.addEventListener('input', () => {
+        // 粘贴/程序化赋值可能绕过 maxlength ⇒ 这里再夹一次并同步字数，避免出现 "40/30"
+        if (spec.maxlength && input.value.length > spec.maxlength) {
+          input.value = input.value.slice(0, spec.maxlength);
+        }
+        if (counter && spec.maxlength) counter.textContent = `${input.value.length}/${spec.maxlength}`;
+      });
+      // 打开即聚焦并**全选原值**：改名时用户能直接打字覆盖
+      try {
+        input.focus();
+        input.select();
+      } catch { /* 忽略 */ }
+    }
+
+    const handle = { close: (ok) => finish(ok) };
+    current = handle;
+
+    // danger 时默认焦点给「取消」：防误触把图片删掉
+    try {
+      if (spec.danger) btnCancel.focus();
+      else if (!spec.withInput) btnOk.focus();
+    } catch { /* 忽略 */ }
+  });
+}
+
+/**
+ * 文本输入弹窗。
+ * @param {object} opts 见 openDialog
+ * @returns {Promise<string|null>} 确定 ⇒ 去空白后的文本；取消/关闭 ⇒ null
+ */
+export function askText(opts = {}) {
+  return openDialog({
+    ...opts,
+    withInput: true,
+    value: opts.value || '',
+    placeholder: opts.placeholder || '',
+    maxlength: opts.maxlength === undefined ? 30 : opts.maxlength,
+  });
+}
+
+/**
+ * 确认弹窗。
+ * @param {object} opts { title, message, danger, confirmText, cancelText }
+ * @returns {Promise<boolean>} 确定 ⇒ true；取消/关闭 ⇒ false
+ */
+export function askConfirm(opts = {}) {
+  return openDialog({
+    ...opts,
+    withInput: false,
+    danger: !!opts.danger,
+  });
+}

package/src/web/panel/dom.js

@@ -0,0 +1,35 @@
+// panel/dom.js —— 面板 DOM 小工具（view.js 与各控件渲染模块共用）
+//
+// 拆出来的原因：view.js 有行数上限，控件渲染要分模块；共用的三个小工具集中放这里，
+//   避免各模块各写一份导致行为漂移。
+
+// el 的唯一实现在 infra/dom.js；这里 re-export，本模块的 9 个 import 方无需改动。
+//   判据是"函数体只有一份"，不是"文本只出现一次" —— 别再在这里加回一份实现。
+export { el } from '../infra/dom.js';
+
+/** 未接线标记（data-pending + 可选 id） */
+export function markPending(node, id) {
+  node.dataset.pending = 'true';
+  if (id) node.id = id;
+  return node;
+}
+
+/**
+ * 标成不可点控件，并区分两种原因：
+ *   · 能力不支持（schema 过滤给了 reason）→ 写 reason，不打"待接线"
+ *   · 未接线 → data-pending + 统一的 pending 文案
+ * @param {HTMLElement} node
+ * @param {object} ctl 控件定义
+ * @param {{disabledReason?: Function}} ctx
+ */
+export function markDisabled(node, ctl, ctx) {
+  node.disabled = true;
+  const reason = ctx && ctx.disabledReason ? ctx.disabledReason(ctl.id) : null;
+  if (reason) {
+    node.title = `${reason}：${ctl.label || ''}`.trim();
+    node.dataset.disabledReason = reason; // 便于断言与排查
+    return;
+  }
+  markPending(node, null);
+  node.title = '待接线（M6）';
+}

package/src/web/panel/icons.js

@@ -0,0 +1,58 @@
+// panel/icons.js —— 面板内联图标（不引图标库，与顶栏/底栏同一套线条风格）
+//
+// 单独成模块的原因：panel/view.js 要守 400 行上限，图标只是数据 + 一个小工厂。
+
+/** 设置动作按钮的图标（按按钮文字取，避免再维护一套 id 表） */
+export const ACTION_ICONS = {
+  导出设置: '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polygon points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>',
+  导入设置: '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polygon points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>',
+  恢复默认: '<path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 3v6h6"/>',
+};
+
+/**
+ * 顶栏图标。形状取自 lucide 图标库的同名组件（PanelLeft / PanelRight）：
+ *   PanelLeft  = rect(3,3,18,18,r2) + path M9 3v18
+ *   PanelRight = rect(3,3,18,18,r2) + path M15 3v18
+ * 顶栏按钮在 index.html 里只放空 <svg> 占位，path 由 applyTopbarIcons() 从这里注入，
+ *   保证图标只有这一处来源。
+ */
+export const TOPBAR_ICONS = {
+  panelLeft: '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/>',
+  panelRight: '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M15 3v18"/>',
+};
+
+/** 把顶栏图标的 path 注入到按钮里的 <svg>；返回注入个数 */
+export function applyTopbarIcons(doc = document) {
+  const map = { 'btn-library': TOPBAR_ICONS.panelLeft, 'btn-menu': TOPBAR_ICONS.panelRight };
+  let filled = 0;
+  for (const [id, body] of Object.entries(map)) {
+    const svg = doc.querySelector(`#${id} svg`);
+    if (!svg) continue;
+    svg.innerHTML = body;
+    filled += 1;
+  }
+  return filled;
+}
+
+/** 分组标题图标 */
+export const GROUP_ICONS = {
+  motion: '<path d="M4 4h16v16H4z"/><path d="M4 9h16"/><path d="m9 4 2 5"/><path d="m15 4 2 5"/><path d="M8 14h8v6H8z"/>',
+  // Shirt：lucide 图标库的 Shirt path
+  skin: '<path d="M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z"/>',
+  play: '<polygon points="6 3 20 12 6 21 6 3"/>',
+  filter: '<path d="m5 3 7 9v6h2v-6l7-9H5z"/><path d="M12 18v3"/>',
+  pma: '<circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/>',
+  runtime: '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-2.9 1.2 2 2 0 1 1-4 0 1.7 1.7 0 0 0-2.9-1.2l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1A1.7 1.7 0 0 0 3 15a2 2 0 1 1 0-4 1.7 1.7 0 0 0 1.2-2.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1A1.7 1.7 0 0 0 10 4.6a2 2 0 1 1 4 0 1.7 1.7 0 0 0 2.9 1.2l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1A1.7 1.7 0 0 0 21 11a2 2 0 1 1 0 4z"/>',
+  theme: '<circle cx="13.5" cy="6.5" r="1.5"/><circle cx="17.5" cy="10.5" r="1.5"/><circle cx="8.5" cy="7.5" r="1.5"/><circle cx="6.5" cy="12.5" r="1.5"/><path d="M12 2a10 10 0 1 0 0 20 2.5 2.5 0 0 0 0-5 2.5 2.5 0 0 1 0-5h5a3 3 0 0 0 3-3 7 7 0 0 0-8-7z"/>',
+  debug: '<path d="M14.7 6.3a4 4 0 0 1 5 5L21 13l-8 8-6-6 8-8z"/><path d="m6 15-3 3 3 3 3-3"/>',
+  settings: '<path d="M4 6h10M18 6h2M4 12h4M12 12h8M4 18h10M18 18h2"/><circle cx="16" cy="6" r="2"/><circle cx="10" cy="12" r="2"/><circle cx="16" cy="18" r="2"/>',
+};
+
+/** 生成包住 svg 的 span（aria-hidden，装饰性） */
+export function svgIcon(body) {
+  const span = document.createElement('span');
+  span.className = 'btn-icon';
+  span.setAttribute('aria-hidden', 'true');
+  span.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`;
+  return span;
+}

package/src/web/panel/memory-bar.js

@@ -0,0 +1,195 @@
+// panel/memory-bar.js —— 内存三色条（总 / 可用 / 服务端已占用），两处复用同一实现
+//
+// 数据只有一个来源：GET /api/unpack/capacity（不带 sourceMb）
+//   memTotalMb     物理总内存
+//   memAvailableMb MemAvailable（含可回收 buff/cache）
+//   rssMb          服务端进程已占用
+// 这里**不显示 peakEstMb**（那是"某个包解包要多少"的预估，与"当前机器内存状况"是两件事）。
+//
+// 为什么不做定时刷新：项目契约要求事件驱动。数字停在拉取那一刻是预期行为 ——
+//   用户要新数字，重新加载模型或重开设置面板即可。
+//
+// 无障碍：整条 role="img" + aria-label 写全三个数值；文字行**始终可见**（触摸端没有 hover）。
+//
+// 失败态（与"主动隐藏"是两件事，别混）：
+//   · 拉取失败 / 数据不完整 ⇒ **保留占位**，条上写「内存：不可用（原因）」，
+//     原因至少能分出 超时 / HTTP xxx / 数据不完整 三种（用户不必猜是接口挂了还是自己被关了保护）。
+//   · 开关关掉（"显示状态信息" / 内存保护关）⇒ 走 hide()，整块不占位 —— 这是主动隐藏，维持原语义。
+//   · 下次轮询/刷新拿到数据 ⇒ 自动恢复正常条（清掉 unavailable 标记）。
+
+import { el } from './dom.js';
+import { stageLog } from '../app/status.js';
+
+/**
+ * 把三个内存量拆成三段百分比，并保证**恰好合 100%**。
+ *
+ * 为什么需要专门修正：三段各自四舍五入后相加常是 99.99 或 100.01，
+ *   条子末尾会露一条缝（或溢出）—— 视觉上像渲染错误。所以余数补给最大的一段。
+ *
+ * @param {{total:number, server:number, avail:number}} m 三个量（MB）
+ * @returns {{server:number, other:number, avail:number}} 三段百分比（2 位小数，和恰为 100）
+ */
+export function splitPercents(m) {
+  const total = Number(m && m.total) > 0 ? Number(m.total) : 0;
+  if (!total) return { server: 0, other: 100, avail: 0 };
+  const clamp = (v) => Math.max(0, Math.min(100, Number(v) || 0));
+  const round2 = (v) => Math.round(v * 100) / 100;
+  let server = clamp((Number(m.server) || 0) / total * 100);
+  let avail = clamp((Number(m.avail) || 0) / total * 100);
+  // 两者之和可能超过 100（rss 与 MemAvailable 口径不同，极端情况下会重叠）⇒ 按比例压回
+  if (server + avail > 100) {
+    const k = 100 / (server + avail);
+    server *= k;
+    avail *= k;
+  }
+  server = round2(server);
+  avail = round2(avail);
+  let other = round2(100 - server - avail);
+  // 余数修正：把 0.01 级别的误差补给**最大的一段**，避免条子末尾露缝
+  const drift = round2(100 - (server + other + avail));
+  if (drift !== 0) {
+    const biggest = Math.max(server, other, avail);
+    if (biggest === server) server = round2(server + drift);
+    else if (biggest === avail) avail = round2(avail + drift);
+    else other = round2(other + drift);
+  }
+  return { server, other, avail };
+}
+
+/** 建一条三色条的 DOM（不含数据）：轨道 + 三段 + 文字行 */
+function buildBar() {
+  const root = el('div', 'mem-bar');
+  root.setAttribute('role', 'img');
+  const track = el('div', 'mem-bar-track');
+  const segServer = el('span', 'mem-bar-seg mem-bar-seg--server');
+  const segOther = el('span', 'mem-bar-seg mem-bar-seg--other');
+  const segAvail = el('span', 'mem-bar-seg mem-bar-seg--avail');
+  track.append(segServer, segOther, segAvail);
+  const text = el('p', 'mem-bar-text', '');
+  root.append(track, text);
+  return { root, segServer, segOther, segAvail, text };
+}
+
+/**
+ * 挂一条内存条到容器里（容器由调用方提供；面板重建会换容器，所以刷新时现查）。
+ * @param {string} selector 容器选择器
+ * @returns {{refresh: () => Promise<boolean>, hide: () => void, root: () => HTMLElement|null}}
+ */
+export function mountMemoryBar(selector) {
+  const getHost = () => document.querySelector(selector);
+
+  /** 现查（或首次创建）本容器的条子 */
+  const ensure = () => {
+    const host = getHost();
+    if (!host) return null;
+    let bar = host.querySelector('.mem-bar');
+    if (!bar) {
+      const built = buildBar();
+      host.replaceChildren(built.root);
+      bar = built.root;
+    }
+    return bar;
+  };
+
+  const hide = () => {
+    const host = getHost();
+    if (!host) return;
+    host.replaceChildren();   // 不留空壳：没数据就整块不占位
+    host.hidden = true;
+  };
+
+  /**
+   * 拉取失败时：**保留占位、把原因写在条上**，而不是整块消失。
+   *
+   * 为什么要这个（不再一律 hide）：条子突然消失，用户分不清是哪一种情况 ——
+   *   ① 接口挂了/超时 ② 服务端没数据 ③ 内存保护被关。三者在界面上曾长得一模一样。
+   * 与 `hide()` 的分工：hide() 只服务"开关关掉、本来就不该显示"这种**主动隐藏**；
+   *   拉取失败属于**该显示但显示不出**，要留着位置说明白。
+   *
+   * 硬约束：**绝不用 0 或上一次的旧值冒充当前值** —— 三段宽度归零、dataset 数值清空，
+   *   文字只写原因。宁可空轨道 + 一句原因，也不给假数字。
+   * @param {string} reason 已归类的可读原因（超时 / HTTP xxx / 数据不完整）
+   */
+  const showUnavailable = (reason) => {
+    const bar = ensure();
+    if (!bar) return false;
+    const host = getHost();
+    host.hidden = false;                 // 保留占位
+    bar.dataset.unavailable = '1';       // 供断言与排障：这是"不可用态"，不是正常条
+    // 清掉上一次的数值痕迹，避免任何消费方（含断言快照）把旧数字当成当前值
+    delete bar.dataset.pctServer;
+    delete bar.dataset.pctOther;
+    delete bar.dataset.pctAvail;
+    for (const cls of ['--server', '--other', '--avail']) {
+      const seg = bar.querySelector(`.mem-bar-seg${cls}`);
+      if (seg) seg.style.setProperty('--seg-w', '0%');
+    }
+    const label = `内存：不可用（${reason}）`;
+    bar.setAttribute('aria-label', label);
+    const text = bar.querySelector('.mem-bar-text');
+    if (text) text.textContent = label;
+    return false;
+  };
+
+  /** 把 fetch 异常归类成用户看得懂的原因（三种失败要能区分开） */
+  const reasonOfFetchError = (err) => {
+    const msg = String((err && err.message) || err || '');
+    // AbortSignal.timeout() 超时抛的是 name='TimeoutError' 的 DOMException
+    if ((err && err.name === 'TimeoutError') || /abort|timeout/i.test(msg)) return '查询超时';
+    const m = msg.match(/^HTTP (\d{3})$/);
+    if (m) return `HTTP ${m[1]}`;
+    return msg || '接口不可达';
+  };
+
+  /**
+   * 拉一次数据并刷新显示。
+   * @returns {Promise<boolean>} 是否成功显示
+   */
+  const refresh = async () => {
+    const host = getHost();
+    if (!host) return false;
+    let j = null;
+    try {
+      const res = await fetch('/api/unpack/capacity', {
+        headers: { Accept: 'application/json' },
+        signal: AbortSignal.timeout(2000),
+      });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      j = await res.json();
+    } catch (err) {
+      // 失败：留占位 + 把原因写在条上（不静默、也不显示假数字）
+      const reason = reasonOfFetchError(err);
+      stageLog('warn', `内存条数据取不到：${reason}`, { where: 'memory-bar', err: String((err && err.message) || err) });
+      return showUnavailable(reason);
+    }
+    const total = Number(j.memTotalMb);
+    const avail = Number(j.memAvailableMb);
+    const server = Number(j.rssMb);
+    if (!(total > 0) || !Number.isFinite(avail) || !Number.isFinite(server)) {
+      stageLog('warn', '内存条数据不完整（字段缺失或非法）', { total, avail, server });
+      return showUnavailable('数据不完整');
+    }
+
+    const bar = ensure();
+    if (!bar) return false;
+    host.hidden = false;
+    delete bar.dataset.unavailable;   // 恢复成正常条（下一轮拿到数据就切回来）
+    const p = splitPercents({ total, server, avail });
+    const segS = bar.querySelector('.mem-bar-seg--server');
+    const segO = bar.querySelector('.mem-bar-seg--other');
+    const segA = bar.querySelector('.mem-bar-seg--avail');
+    // 宽度是"数据驱动的动态值" ⇒ 用 CSS 自定义属性下发，样式表里只用 var()
+    segS.style.setProperty('--seg-w', `${p.server}%`);
+    segO.style.setProperty('--seg-w', `${p.other}%`);
+    segA.style.setProperty('--seg-w', `${p.avail}%`);
+    bar.dataset.pctServer = String(p.server);
+    bar.dataset.pctOther = String(p.other);
+    bar.dataset.pctAvail = String(p.avail);
+    bar.setAttribute('aria-label', `内存：总 ${total} MB，可用 ${avail} MB，服务端已占用 ${server} MB`);
+    const text = bar.querySelector('.mem-bar-text');
+    if (text) text.textContent = `总 ${total} MB · 可用 ${avail} MB · 服务端 ${server} MB`;
+    return true;
+  };
+
+  return { refresh, hide, root: () => getHost() && getHost().querySelector('.mem-bar') };
+}