modelstage 0.5.28 → 0.6.1

package/src/web/components.css

@@ -271,6 +271,96 @@
   border-color: var(--color-primary);
 }
 
+/* ------------------------------------------------------------ 扫描进度状态行 */
+
+/**
+ * 扫描进行中/卡住时，游戏行的状态位（复用 .tree-count 的位置，不新增行）。
+ * 用等宽数字：计数每帧跳动，不等宽会让整行左右抖。
+ */
+.tree-count.is-scanning {
+  color: var(--color-primary);
+  font-variant-numeric: tabular-nums;
+}
+
+/* 游戏行的「加载失败 · 重试」：与扫描〔重试〕同一尺寸语言 */
+.tree-game-load,
+.tree-game-retry {
+  height: 20px;
+  padding: 0 6px;
+  margin-left: 6px;
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  background: var(--color-muted);
+  color: var(--color-muted-foreground, var(--color-foreground));
+  font-size: 11px;
+  line-height: 18px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.tree-game-load:hover,
+.tree-game-retry:hover {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+}
+
+.tree-game-retry {
+  border-style: dashed;
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+}
+
+/* 〔重试〕：只在"疑似卡住/失败"时出现，尺寸压到 20px，避免把游戏行撑高 */
+.tree-scan-retry {
+  height: 20px;
+  padding: 0 6px;
+  margin-left: 6px;
+  border: 1px solid var(--color-primary);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
+  color: var(--color-primary);
+  font-size: 11px;
+  line-height: 18px;
+  cursor: pointer;
+}
+
+.tree-scan-retry:hover {
+  background: color-mix(in srgb, var(--color-primary) 24%, transparent);
+}
+
+/* ------------------------------------------------------------ 文件清单失败提示 */
+
+/**
+ * 「清单获取失败 · 点击重试」提示。
+ *
+ * 为什么用绝对定位叠加、而不是在面板里插一行：
+ *   右栏是固定宽度的一列控件，插入一行会把下面所有控件整体下移（提示出现/消失各跳一次），
+ *   属于"为了报错反而制造一个视觉故障"。这里贴在右栏顶部、**不参与布局**，
+ *   出现与消失都不会挤动控件；它只在失败期间存在，重试成功即移除。
+ * 位置：.panel 本身是 position:fixed ⇒ 相对它定位；top 用头部高度（41px）之下，避免盖住标题。
+ */
+.doc-files-hint {
+  position: absolute;
+  top: calc(41px + 6px);
+  right: 8px;
+  max-width: calc(100% - 16px);
+  z-index: 5;
+  padding: 4px 10px;
+  border: 1px dashed var(--color-border);
+  border-radius: 999px;
+  background: var(--color-card);
+  color: var(--color-muted-foreground, var(--color-foreground));
+  font-size: 12px;
+  line-height: 1.4;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 25%);
+}
+
+.doc-files-hint:hover {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+}
+
 /* ------------------------------------------------------------ 类型筛选胶囊行 */
 
 /**

package/src/web/debug/race-probe.js

@@ -10,7 +10,7 @@
   const qa = (s) => [...document.querySelectorAll(s)];
   const w = window.__WEB__;
   const stageEl = q('#stage');
-  for (let i = 0; i < 80 && qa('[data-game-key]').length === 0; i += 1) await sleep(150);
+  for (let i = 0; i < 80 && qa('[data-group-key]').length === 0; i += 1) await sleep(150);
 
   const trajectory = [];
   let last = '__init__';
@@ -19,13 +19,30 @@
     if (v !== last) { last = v; trajectory.push(v); }
   }, 30);
 
-  const click = async (kw, root) => {
-    const input = q('#roster-search');
-    input.value = kw;
-    input.dispatchEvent(new Event('input', { bubbles: true }));
-    for (let i = 0; i < 140 && qa('[data-model-id]').length === 0; i += 1) await sleep(150);
-    await sleep(250);
-    const row = qa('[data-model-id]').find((n) => n.dataset.rootId === root);
+  // 取样不写死任何资源根/模型名：从**页面当前已加载的数据**里各找一条 Spine 与 Live2D。
+  //   页面没有已加载角色时，先点第一个游戏的「加载」（这是用户在页面上的等价动作，不是硬编码）。
+  const pickSample = async () => {
+    if (qa('[data-model-id]').length === 0) {
+      const loadBtn = q('#roster-list .tree-game button');
+      if (loadBtn) loadBtn.click();
+      for (let i = 0; i < 600 && qa('[data-model-id]').length === 0; i += 1) await sleep(100);
+    }
+    const rows = qa('[data-model-id]');
+    const labelOf = (row) => (row.textContent || '');
+    const spineRow = rows.find((row) => /\bspine\b/i.test(labelOf(row)));
+    const live2dRow = rows.find((row) => /live2d/i.test(labelOf(row)));
+    const idOf = (row) => (row ? { modelId: row.dataset.modelId, rootId: row.dataset.rootId || '' } : null);
+    return { spine: idOf(spineRow), live2d: idOf(live2dRow) };
+  };
+
+  const clickById = async (ref) => {
+    if (!ref || !ref.modelId) return false;
+    let row = qa('[data-model-id]').find((n) => n.dataset.modelId === ref.modelId);
+    if (!row) {                                  // 行被折叠/重渲染过：展开一次再找
+      const group = q(`[data-group-key].tree-game`);
+      if (group) group.click();
+      for (let i = 0; i < 60 && !row; i += 1) { await sleep(100); row = qa('[data-model-id]').find((n) => n.dataset.modelId === ref.modelId); }
+    }
     if (!row) return false;
     row.dispatchEvent(new MouseEvent('click', { bubbles: true }));
     return true;
@@ -41,16 +58,22 @@
     return +w.stage.samplePixels().ratio.toFixed(4);
   };
 
-  const L = ['abeikelongbi', 'azurlane'];
-  const S = ['aijier', 'azurlane_spine'];
+  const sample = await pickSample();
+  if (!sample.spine || !sample.live2d) {
+    clearInterval(watch);
+    return { failed: 1, rounds: [], skipped: true,
+      reason: `页面里找不到同一批已加载数据中的 Spine 与 Live2D 各一条（spine=${JSON.stringify(sample.spine)} live2d=${JSON.stringify(sample.live2d)}）` };
+  }
+  const L = sample.live2d;
+  const S = sample.spine;
   const rounds = [];
   for (const gap of [60, 150, 300]) {
     for (const pair of [[L, S, 'spine'], [S, L, 'live2d']]) {
       const [first, second, wantMode] = pair;
       trajectory.length = 0;
-      const a = await click(first[0], first[1]);
+      const a = await clickById(first);
       await sleep(gap);
-      const b = await click(second[0], second[1]);
+      const b = await clickById(second);
       // 等到切换真正落定（首次装载 Live2D 要按需加载运行时库，固定 sleep 会误判成"还在 loading"）
       for (let i = 0; i < 120 && stageEl.getAttribute('data-stage-mode') === 'loading'; i += 1) await sleep(150);
       await sleep(1200);
@@ -58,7 +81,7 @@
       const ratio = await contentRatio();
       rounds.push({
         gapMs: gap,
-        lastClick: second[1],
+        lastClick: second.modelId,
         clicked: [a, b],
         mode: stageEl.getAttribute('data-stage-mode'),
         wantMode,

package/src/web/engine/textures.js

@@ -80,9 +80,8 @@ export async function decodeImageSource(entry) {
  *
  * **必须避免"预乘 → 非预乘"往返**：直接把 <img> 画进 2D canvas 再 getImageData 时，
  *   canvas 内部按预乘存储、读回时再除一次 alpha ⇒ 半透明区域相对误差被放大（除以很小的 a），
- *   会产生 `r > a` 的**假违反**。现场：bd2 的图半透明边缘多 ⇒ 假违反 9.8%~22.4%
+ *   会产生 `r > a` 的**假违反**。半透明边缘多的图会把假违反放大，
  *   ⇒ 被判成"非预乘" ⇒ 走 upload 又乘一次 alpha ⇒ 双重预乘（嘴巴黑圈）。
- *   azurlane 的图边缘干净 ⇒ 0.1% ⇒ 判对。
  *
  * 做法：用 `createImageBitmap(img, { premultiplyAlpha: 'none' })` 拿到**未预乘**的位图再画；
  *   浏览器不支持或失败时退回原路径（并保持"能检测就检测"的语义，不因取不到样本而阻塞装载）。

package/src/web/infra/api.js

@@ -20,8 +20,7 @@
 //   · 去重键是「method + path」，不含请求头；同路径不同 Accept 会被合并——本项目 API 都是同源 JSON，
 //     不存在这种用法。
 
-/** 单次请求默认超时：8.5s（比常见反代 10s 略短，让"卡住"更早暴露成本地超时而非网关 504） */
-const DEFAULT_TIMEOUT_MS = 8500;
+// 本文件不设请求时限。需要取消的调用方自己传 signal；测试里可以设超时。
 
 /** 退避基准（毫秒）：第 1/2/3 次重试前的等待；抖动 ±20% */
 const BACKOFF_MS = [100, 300, 900];
@@ -62,12 +61,13 @@ function retryableStatus(status) {
   return status >= 500 && status <= 599;
 }
 
-/** 是否"网络层失败"（fetch 抛 TypeError，或超时导致的 TimeoutError） */
+/**
+ * 是否"网络层失败"：只有真正的连接层错误才重试；慢不算失败。
+ */
 function retryableNetworkError(err) {
   if (!err) return false;
   const name = String(err.name || '');
   const msg = String(err.message || '');
-  if (name === 'TimeoutError') return true;   // AbortSignal.timeout 触发的超时
   if (name === 'AbortError') return false;    // 调用方主动取消：不能重试
   return err instanceof TypeError || /Failed to fetch|network|fetch failed/i.test(msg);
 }
@@ -93,12 +93,8 @@ async function readBody(res, path, method) {
 }
 
 /** 单次尝试：返回解析后的 body，或抛出带 status 的错误 */
-async function attemptOnce(path, { method, body, headers, timeoutMs, signal, cache }) {
-  // 每次尝试都有独立超时（AbortSignal.timeout）：卡死的请求不会无限挂住页面
-  const timeoutSignal = AbortSignal.timeout(timeoutMs);
-  const merged = signal && typeof AbortSignal.any === 'function'
-    ? AbortSignal.any([signal, timeoutSignal])
-    : (signal || timeoutSignal);
+async function attemptOnce(path, { method, body, headers, signal, cache }) {
+  // 不设时限；只透传调用方的 signal（用户取消）。
   const res = await fetch(path, {
     method,
     headers: {
@@ -110,7 +106,7 @@ async function attemptOnce(path, { method, body, headers, timeoutMs, signal, cac
     // cache 必须能透传：插件清单 / 运行时清单这类"改完要立刻看到"的请求带 no-store，
     //   丢掉它会读到浏览器缓存（新增插件在前端看不见）。以前 api.js 不透传，调用方只能裸 fetch。
     ...(cache ? { cache } : {}),
-    signal: merged,
+    ...(signal ? { signal } : {}),
   });
 
   if (res.ok) return readBody(res, path, method);
@@ -239,7 +235,6 @@ attachRetryStats();
  * @returns {Promise<Response>} 成功（res.ok）的响应；4xx/重试耗尽会抛错
  */
 export async function fetchWithRetry(url, opts = {}) {
-  const timeoutMs = Number(opts.timeoutMs) || DEFAULT_TIMEOUT_MS;
   // 非幂等方法默认不重试（重发写请求=重复写）；调用方显式给 retries 时以显式为准
   const retries = Number.isInteger(opts.retries)
     ? opts.retries
@@ -261,16 +256,13 @@ export async function fetchWithRetry(url, opts = {}) {
   for (let i = 0; i < maxAttempts; i += 1) {
     retryStats.attemptsTotal += 1;
     try {
-      const timeoutSignal = AbortSignal.timeout(timeoutMs);
-      const merged = opts.signal && typeof AbortSignal.any === 'function'
-        ? AbortSignal.any([opts.signal, timeoutSignal])
-        : (opts.signal || timeoutSignal);
+      // 不设时限（慢 ≠ 失败）。只透传调用方的 signal（用户主动取消）。
       const res = await fetch(url, {
         method: opts.method || 'GET',
         headers: opts.headers,
         ...(opts.body !== undefined ? { body: typeof opts.body === 'string' ? opts.body : JSON.stringify(opts.body) } : {}),
         ...(opts.keepalive ? { keepalive: true } : {}),
-        signal: merged,
+        ...(opts.signal ? { signal: opts.signal } : {}),
       });
       if (res.ok) {
         retryStats.inflight -= 1;
@@ -316,7 +308,6 @@ export async function fetchWithRetry(url, opts = {}) {
  */
 async function requestJson(path, opts = {}) {
   const method = opts.method || 'GET';
-  const timeoutMs = Number(opts.timeoutMs) || DEFAULT_TIMEOUT_MS;
   // 非幂等方法默认不重试（重发写请求=重复写）；调用方显式给 retries 时以显式为准
   const retries = Number.isInteger(opts.retries)
     ? opts.retries
@@ -326,7 +317,7 @@ async function requestJson(path, opts = {}) {
 
   for (let i = 0; i < maxAttempts; i += 1) {
     try {
-      return await attemptOnce(path, { method, body: opts.body, headers: opts.headers, timeoutMs, signal: opts.signal, cache: opts.cache });
+      return await attemptOnce(path, { method, body: opts.body, headers: opts.headers, signal: opts.signal, cache: opts.cache });
     } catch (e) {
       lastErr = e;
       const status = e && e.status;

package/src/web/infra/document.js

@@ -46,7 +46,7 @@ function resolveUrl(vfs, url) {
 async function readBytes(url, label, warnings) {
   try {
     // 带重试：网络错误 / 5xx 会退避重试（4xx 不重试）
-    const res = await fetchWithRetry(url, { timeoutMs: 8000, label: 'model-bytes' });
+    const res = await fetchWithRetry(url, { label: 'model-bytes' });
     if (!res || !res.ok) {
       warnings.push(`${label} 读取失败：HTTP ${(res && res.status) || '?'}（${url}）`);
       return null;
@@ -171,7 +171,7 @@ async function fillMotionDurations(doc, ref, baseRef, vfs) {
     const abs = /^[a-z][a-z0-9+.-]*:/i.test(file) || file.startsWith('/') ? file : `${base}${file}`;
     const url = resolveUrl(vfs, abs);
     try {
-      const res = await fetchWithRetry(url, { timeoutMs: 8000, label: 'motion3' });
+      const res = await fetchWithRetry(url, { label: 'motion3' });
       if (!res || !res.ok) return;
       const json = await res.json();
       const d = Number(json && json.Meta && json.Meta.Duration);
@@ -194,7 +194,7 @@ async function buildLive2dAssets(doc, entry, vfs) {
   //    motions/x.motion3.json 这类引用映射回已注册的前缀）。
   doc.assets.entry = { role: 'definition', name: raw.split('/').pop() || '', url, ref: raw, bytes: null };
   try {
-    const res = await fetchWithRetry(url, { timeoutMs: 8000, label: 'model-def' });
+    const res = await fetchWithRetry(url, { label: 'model-def' });
     if (!res || !res.ok) {
       warn.push(`模型定义读取失败：HTTP ${(res && res.status) || '?'}（${url}）`);
       return doc;

package/src/web/infra/plugin-host-unpack.mjs

@@ -203,34 +203,106 @@ function onWorkerProgress(m) {
  * @param {string} providerId
  * @returns {Promise<object|null>}
  */
+/** worker 载插件 lib 的就绪上限（ms）。**不要为了少报警而调大**：超时是要暴露问题，不是掩盖。 */
+const WORKER_READY_TIMEOUT_MS = 8000;
+
+/**
+ * 取（或建）某个 provider 的 worker；建不起来返回 null（调用方回落同步解包）。
+ *
+ * 三种结局必须分开（这是"可不可用"之外、事后能不能归因的关键）：
+ *   · 'ready-provider'     worker 就绪且声明了 provider ⇒ 可用
+ *   · 'ready-no-provider'  worker 就绪但没声明 provider ⇒ 不可用（**正常结论，不是错误**）
+ *   · 'timeout' / 'worker-error' / 'worker-construct-failed' / 'no-files' ⇒ 不可用**且带原因**
+ * 原因记在 `entry.readyReason`（结构化），并走既有 diag/日志通道打一条，外部契约不变
+ *   （`entry.ready` 仍是 Promise<entry|null>，调用方照旧用真假判断）。
+ * @param {string} providerId
+ * @returns {Promise<object|null>}
+ */
 function ensureUnpackWorker(providerId) {
   if (workerPool.has(providerId)) return workerPool.get(providerId).ready;
   const files = filesOfProvider(providerId);
-  const entry = { worker: null, ready: null, seq: 0, pending: new Map() };
+  const entry = { worker: null, ready: null, seq: 0, pending: new Map(), readyReason: null };
   workerPool.set(providerId, entry);
+
+  /** 记录结局：结构化 + 一条可读诊断（成功也记，便于区分"没 provider"和"压根没起来"） */
+  const settle = (code, message, extra) => {
+    const reason = { code, message, at: Date.now(), ...(extra || {}) };
+    entry.readyReason = reason;
+    try {
+      emit('unpack.worker-ready', {
+        providerId, code, ok: code === 'ready-provider', message,
+        waitedMs: reason.waitedMs != null ? reason.waitedMs : null,
+        hasProvider: extra && extra.hasProvider != null ? extra.hasProvider : null,
+      });
+    } catch { /* 打点失败不影响解包 */ }
+    // 不可用且不是"正常结论"（无 provider）时给人一句 warn：这才是排障入口
+    if (code !== 'ready-provider' && code !== 'ready-no-provider') {
+      try { say.warn(`解包 worker 不可用（${providerId}）：${message}`); } catch { /* 忽略 */ }
+    }
+    return reason;
+  };
+
   entry.ready = (async () => {
-    if (typeof Worker !== 'function' || !files || !files.length) return null;
+    const readyT0 = Date.now();
+    if (typeof Worker !== 'function') {
+      settle('worker-construct-failed', '当前环境没有 Worker 构造器（老浏览器 / 沙箱禁用）');
+      return null;
+    }
+    if (!files || !files.length) {
+      settle('no-files', `插件 ${providerId} 的清单里没有 files[]（无从载入 lib）`);
+      return null;
+    }
     let worker;
     // 静态托管的映射是 src/web/ → 站点根（实测：/app/model-actions.js 可用），
     //   所以 src/web/plugin/unpack-worker.js 的 URL 就是 /plugin/unpack-worker.js
-    try { worker = new Worker(new URL('/plugin/unpack-worker.js', import.meta.url)); } catch { return null; }
+    try { worker = new Worker(new URL('/plugin/unpack-worker.js', import.meta.url)); } catch (e) {
+      settle('worker-construct-failed', `Worker 构造失败：${(e && e.message) || e}`);
+      return null;
+    }
     entry.worker = worker;
-    const ok = await new Promise((resolve) => {
-      const timer = setTimeout(() => resolve(false), 8000);   // 载 lib 超时 ⇒ 判不可用
+    // 结局对象：{status:'ready', hasProvider} | {status:'timeout'} | {status:'error', message}
+    const outcome = await new Promise((resolve) => {
+      const timer = setTimeout(() => resolve({ status: 'timeout' }), WORKER_READY_TIMEOUT_MS);
       worker.addEventListener('message', (ev) => {
         const m = ev.data || {};
-        if (m.t === 'ready') { clearTimeout(timer); resolve(!!m.hasProvider); }
+        if (m.t === 'ready') { clearTimeout(timer); resolve({ status: 'ready', hasProvider: !!m.hasProvider }); }
         else if (m.t === 'progress') onWorkerProgress(m);
         else if (m.t === 'done' || m.t === 'fail') {
           const p = entry.pending.get(m.id);
           if (p) { entry.pending.delete(m.id); p(m); }
         }
       });
-      worker.addEventListener('error', () => { clearTimeout(timer); resolve(false); });
+      worker.addEventListener('error', (ev) => {
+        clearTimeout(timer);
+        resolve({ status: 'error', message: (ev && ev.message) || 'worker error 事件（脚本加载失败 / CSP / 语法错误）' });
+      });
       // files 元素已带插件目录（unity-live2d-bundle/lib/xxx.js），故 base 到 /plugins/
       worker.postMessage({ t: 'init', base: new URL('/plugins/', import.meta.url).href, files });
     });
-    if (!ok) { try { worker.terminate(); } catch { /* 忽略 */ } entry.worker = null; return null; }
+    const waitedMs = Date.now() - readyT0;
+    if (outcome.status === 'timeout') {
+      settle('timeout', `worker 未在 ${WORKER_READY_TIMEOUT_MS}ms 内 ready（lib 加载慢 / 事件循环被占 / worker 脚本未加载）`,
+        { waitedMs, files: files.length });
+      try { worker.terminate(); } catch { /* 忽略 */ }
+      entry.worker = null;
+      return null;
+    }
+    if (outcome.status === 'error') {
+      settle('worker-error', `worker 报错：${outcome.message}`, { waitedMs, files: files.length });
+      try { worker.terminate(); } catch { /* 忽略 */ }
+      entry.worker = null;
+      return null;
+    }
+    if (!outcome.hasProvider) {
+      // 正常结论：worker 起来了，但该插件没声明 provider（不该继续用它解包）
+      settle('ready-no-provider', 'worker 已就绪但未声明 provider（plugin.json 的 provides 为空？）',
+        { waitedMs, hasProvider: false });
+      try { worker.terminate(); } catch { /* 忽略 */ }
+      entry.worker = null;
+      return null;
+    }
+    settle('ready-provider', `worker 就绪（${WORKER_READY_TIMEOUT_MS}ms 上限内，用时 ${waitedMs}ms）`,
+      { waitedMs, hasProvider: true });
     return entry;
   })();
   return entry.ready;
@@ -375,7 +447,7 @@ async function resolveViaProvider(file, bytes) {
  *
  * 为什么必须有：同一个 UnityFS 包可能被多个 bundle 插件都判成"我能处理" ——
  *   它们的判定只看包结构，不看"解出来的东西是否自洽"。
- *   实测（NIKKE 的 spine 资源包）：live2d 插件抢先返回 ok，但它生成的 `model3.json`
+ *   实测：live2d 插件抢先返回 ok，但它生成的 `model3.json`
  *   里 Moc 指向的 `moc3.moc3` 内容只有 4 字节、字面量 `null`（包里根本没有 moc3）
  *   ⇒ 后续按 live2d 装载必然失败（控制台只有一句 Network error），
  *   而真正能解这个包的 spine 插件永远轮不到 ⇒ 表现为"点一次不出画，