magic-agent 2.4.3 → 2.6.3

package/client-ui-mobile/reqs.css

@@ -17,8 +17,45 @@
 .wsrow__sync:active{opacity:.7}
 .wsrow__sync:disabled{color:var(--muted);opacity:.6}
 /* 「未初始化」与「待整理」同形不同色：前者是「还没按目录生成过基线」，
-   后者是「有对话等着归纳」，两种提示不能混成一个数字。 */
+   后者是「有对话等着归纳」，两种提示不能混成一个数字。
+   深色下「待整理」那枚走 --badge-accent（警告琥珀，压在页面底上 5.8），别用 --warning 直接当字色：
+   它和排队金只差 1.08，11px 上分不出来（2026-10-25 第二轮）。 */
 .wsrow__badge--init{color:var(--warning);background:var(--tint-wait)}
+.wsrow__badge--pending{color:var(--badge-accent,var(--queued));background:var(--tint-queued)}
+
+/* ══════════ 需求页：整理失败的提示卡 ══════════
+   服务端给的是引擎原始报错（`HTTP 402: {…JSON…}`，还常被截断），原样铺开会是一屏乱码。
+   卡片只露三层信息：**类别 + 一句原因 + 下一步**；原文折叠在「详情」里（排查时再看）。
+   配色走 warning（淡底 + 左侧竖条），与「待整理 / 未初始化」同一套语义色，不做大红报错块 ——
+   整理失败不损坏数据，它是「这次没跑成」，不是页面出错。 */
+.reqerr{margin:2px 10px 10px;padding:9px 12px;border-radius:var(--r);text-align:left;
+  /* 底色走令牌 --warn-surface / --warn-badge（**必须按主题分给**，理由见 index.html 的 :root）：
+     深色压 --canvas 20% 才保住琥珀族（H64），浅色仍压 --raised 9%（原样暖白）。 */
+  background:var(--warn-surface);
+  border:1px solid color-mix(in srgb,var(--warning) 26%,transparent);
+  border-left:3px solid var(--warning)}
+.reqerr__head{display:flex;align-items:center;gap:6px}
+.reqerr__ico{flex:0 0 auto;display:flex;color:var(--warning)}
+.reqerr__t{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--ink);
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+/* 类别徽标（额度不足 / 未授权 / 超时…）：认不出类别时不出，不硬套标签。
+   文字色走 --warn-badge-text —— 黄字压黄底在暗色主题下几乎读不出来（实测）。
+   深色（2026-10-25 第二轮）底色提到实心琥珀、文字换成 --canvas 墨字（8.5+）；
+   浅色钉住「--ink 压 24% 琥珀」（与改动前逐像素一致）。 */
+.reqerr__badge{flex:0 0 auto;padding:1px 7px;border-radius:var(--r-full);font-size:11px;line-height:16px;
+  color:var(--warn-badge-text);background:var(--warn-badge)}
+.reqerr__msg{margin-top:5px;font-size:13px;line-height:1.55;color:var(--ink-soft);word-break:break-word}
+.reqerr__hint{margin-top:3px;font-size:12px;line-height:1.5;color:var(--muted)}
+.reqerr__more{display:flex;align-items:center;gap:3px;margin-top:5px;padding:0;background:none;border:0;
+  font-size:12px;color:var(--muted)}
+.reqerr__more:active{opacity:.7}
+.reqerr__chev{display:flex;transition:transform .15s}
+.reqerr__more.is-open .reqerr__chev{transform:rotate(180deg)}
+/* 原文：等宽 + 可滚动，保留换行；高度封顶 —— 长 JSON 不能把下面的模块列表顶出屏幕。 */
+.reqerr__raw{margin:6px 0 0;padding:8px 10px;max-height:180px;overflow:auto;border-radius:8px;
+  background:var(--raised);border:1px solid var(--border);color:var(--muted);
+  font-size:11px;line-height:1.5;white-space:pre-wrap;word-break:break-all;
+  -webkit-user-select:text;user-select:text}
 
 /* ══════════ 需求页：两级（空间→模块 → 需求列表）══════════
    一级是**目录**：空间是行，模块缩进挂在空间下（树形），功能点一律不画在这里 ——
@@ -37,3 +74,75 @@
 /* 二级视图的分组小节：只画当前模块，故这一节恒为高亮态 */
 .reqdetail__sec--cur .sechead{color:var(--primary-action)}
 .reqdetail__sec--cur .sechead__t{font-weight:800}
+
+/* ══════════ 需求页：页面改造截图（reqshot.js）══════════
+   功能点行上的相机徽标 + 标注浮层。
+   徽标：功能点**涉及页面改造**时出现（归纳时从对话里提取到了页面地址）。
+   「待截图」= 有页面地址但还没截过；「N 图」= 截过了。 */
+.reqshot__badge{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;
+  height:24px;padding:0 8px;border-radius:var(--r-full);border:1px solid var(--border);
+  background:var(--subtle);color:var(--muted);font-size:11px;font-weight:500;white-space:nowrap}
+.reqshot__badge:active{opacity:.7}
+.reqshot__badge--todo{color:var(--primary-action);border-color:color-mix(in srgb,var(--primary-action) 40%,transparent)}
+.reqshot__badge--has{color:var(--muted)}
+.reqshot__badge svg{flex:0 0 auto}
+
+/* 抽屉里的说明行：解释「打开页面 → 滚到完成状态 → 点截图」这条流程。 */
+.reqshot__hint{margin-top:0;font-size:12px;line-height:18px;color:var(--muted)}
+
+/* ── 标注浮层 ──
+   z-index 1200：高于共享抽屉(1000)，低于扫码(400)？—— 不，扫码是 400，比抽屉低。
+   这里取 1200 —— 必须高于抽屉，否则「完成」后抽屉还在底下压着标注。 */
+.reqshot-anno{position:fixed;inset:0;z-index:1200;display:flex;flex-direction:column;
+  background:rgba(4,10,8,.92)}
+.reqshot-anno__bar{flex:0 0 auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
+  padding:calc(8px + env(safe-area-inset-top)) 10px 8px;
+  background:var(--raised);border-bottom:1px solid var(--border)}
+.reqshot-anno__tbtn{height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--border);
+  background:var(--subtle);color:var(--ink);font-size:13px;font-weight:500}
+.reqshot-anno__tbtn:active{opacity:.7}
+.reqshot-anno__tbtn:disabled{opacity:.45}
+.reqshot-anno__tbtn.is-on{border-color:var(--primary-action);color:var(--primary-action)}
+.reqshot-anno__tbtn--mute{color:var(--muted)}
+.reqshot-anno__tbtn--ok{background:var(--primary-action);color:var(--on-primary-action);border-color:transparent}
+.reqshot-anno__colors{display:flex;align-items:center;gap:5px;margin-left:2px}
+.reqshot-anno__c{width:24px;height:24px;border-radius:50%;border:2px solid transparent;padding:0}
+.reqshot-anno__c.is-on{border-color:var(--ink)}
+.reqshot-anno__acts{display:flex;gap:6px;margin-left:auto}
+/* 舞台：截图按原图分辨率画在里面（显示时缩放），手势坐标按显示尺寸换算回画布。 */
+.reqshot-anno__stage{flex:1;min-height:0;position:relative;display:flex;
+  align-items:center;justify-content:center;overflow:auto;padding:8px}
+.reqshot-anno__cv{max-width:100%;height:auto;touch-action:none;background:#fff;
+  box-shadow:0 8px 32px rgba(0,0,0,.5)}
+.reqshot-anno__hint{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
+  text-align:center;color:var(--muted);font-size:14px}
+/* 文字工具的输入条：不用 window.prompt（Android WebView 与 Electron 小窗都没实现它）。 */
+.reqshot-anno__textbox{position:absolute;left:12px;right:12px;bottom:calc(16px + env(safe-area-inset-bottom));
+  display:flex;gap:8px;align-items:center;padding:8px;border-radius:12px;
+  background:var(--raised);border:1px solid var(--border)}
+.reqshot-anno__textbox input{flex:1;min-width:0;height:36px;padding:0 10px;border-radius:8px;
+  border:1px solid var(--border);background:var(--subtle);color:var(--ink);font-size:14px;outline:none}
+.reqshot-anno__textbox .reqshot-anno__tbtn{height:36px}
+
+
+/* ══════════ 会话↔需求关系图谱（2026-10-25，reqs.js 的 REQ_GRAPH_WS 第三态）══════════ */
+/* 顶栏两枚动作按钮并排（图谱 / 全部整理）。 */
+.history__topacts{display:flex;align-items:center;gap:8px;margin-left:auto}
+.reqs__graphbtn{min-width:0}
+/* 空间切换 chips：多空间时选画哪个（默认需求最多的那个）。 */
+.reqgraph__pick{display:flex;gap:6px;overflow-x:auto;padding:8px 12px 4px;flex:none}
+.reqgraph__chip{flex:none;padding:5px 12px;border-radius:var(--r-full);border:1px solid var(--border);
+  background:var(--subtle);color:var(--muted);font-size:13px}
+.reqgraph__chip.is-on{background:var(--primary-action);color:var(--on-primary-action);border-color:transparent}
+/* 舞台：cytoscape 用 canvas 自绘，容器铺满剩余高度即可（缩放/平移由库管，不溢出）。 */
+.reqgraph__stage{flex:1;min-height:0;overflow:hidden;position:relative;display:flex;flex-direction:column}
+.reqgraph__stage canvas{display:block}
+.reqgraph__edge{stroke:var(--border);stroke-width:1.5;opacity:.9}
+.reqgraph__node{cursor:pointer}
+.reqgraph__sess{fill:var(--muted);stroke:var(--raised);stroke-width:2}
+.reqgraph__feat{stroke:var(--raised);stroke-width:2}
+.reqgraph__node text{fill:var(--ink);font-size:11px;pointer-events:none}
+/* 图例：会话 + 模块配色（颜色由 JS 按模块 hash 给，这里只排版）。 */
+.reqgraph__legend{flex:none;display:flex;flex-wrap:wrap;gap:4px 12px;padding:8px 12px calc(10px + env(safe-area-inset-bottom))}
+.reqgraph__lg{font-size:12px;color:var(--muted)}
+.reqgraph__lg--sess{color:var(--muted)}