dsh-device-fleet 0.1.0-dev.10 → 0.1.0-dev.12

package/README.md

@@ -9,7 +9,8 @@ DeepSeek Harness 的设备联邦插件：把登录同一账号、且都安装本
 - ✅ **Host 插件 + 直调 MVP（代码完成、单测通过，待真实 DSH 安装联调）**：`fleet_list` / `fleet_tools` / `fleet_call` + `fleet_read` / `fleet_fetch` / `fleet_run`、Tool Policy、Execution Slot、审批 fail-closed
 - ✅ **审批收件箱逻辑层（dev.7）**：`fleet_approvals` / `fleet_approve` / `fleet_deny`，ask 档排队、超时 fail-closed、once/ttl 授权、`fleet_simulate_request` 本机演练；Client 审批面板待做
 - ✅ **Room 逻辑层（dev.8，单机模拟）**：`room_create` / `room_add_local` / `room_send` / `room_messages` / `room_status` / `room_task_*` / `room_close`；本地真实 agent 参与者、寻址唤醒、Room Board 串行交接；单机仿真验证通过
-- ⏳ Client 审批面板 / 房间视图、远程参与者传输、插件重载 rehydrate（下一步）
+- ✅ **审批面板 UI（dev.10）**：Host `/device-fleet/approvals` HTTP 数据面 + Client `shell.overlay` 浮动审批按钮/面板（允许一次/15 分钟/拒绝）；单测 14/14；刷新页面后可见
+- ⏳ 远程参与者传输、房间视图、插件重载 rehydrate、SSE 推送（下一步）
 
 ## 安装（开发版）
 

package/client.js

@@ -1,6 +1,7 @@
 // Fleet approval panel (Client half).
-// A floating button under shell.overlay polls the Host route registered by
-// src/host/approval-web.js. Decisions go through ApprovalInbox on the Host.
+// The trigger lives in the native sidebar footer action row (no overlap with
+// content panels); the inbox opens as an intentional centered dialog.
+// Data comes from the Host routes registered by src/host/approval-web.js.
 window.__ModuleLoader__.load({
   id: 'dsh-device-fleet',
   factory(require) {
@@ -9,148 +10,205 @@ window.__ModuleLoader__.load({
     const { useEffect, useState } = React;
 
     const POLL_MS = 2500;
-    const panelStyle = {
+    const store = {
+      items: [],
+      open: false,
+      listeners: new Set(),
+    };
+    let pollTimer = null;
+    let polling = false;
+
+    const notify = () => {
+      for (const listener of store.listeners) listener();
+    };
+
+    const setItems = (items) => {
+      const next = Array.isArray(items) ? items : [];
+      if (next.length === store.items.length && next.every((item, index) => item.id === store.items[index].id)) return;
+      store.items = next;
+      notify();
+    };
+
+    const startPolling = () => {
+      if (polling) return () => {};
+      polling = true;
+      const tick = async () => {
+        try {
+          const response = await fetch('/device-fleet/approvals', { headers: { accept: 'application/json' } });
+          if (!response.ok) throw new Error('HTTP ' + response.status);
+          const data = await response.json();
+          setItems(data.approvals);
+        } catch {
+          setItems([]);
+        }
+        if (polling) pollTimer = setTimeout(tick, POLL_MS);
+      };
+      tick();
+      return () => {
+        polling = false;
+        if (pollTimer) clearTimeout(pollTimer);
+        pollTimer = null;
+      };
+    };
+
+    const useStore = () => {
+      const [, setVersion] = useState(0);
+      useEffect(() => {
+        const listener = () => setVersion((value) => value + 1);
+        store.listeners.add(listener);
+        return () => store.listeners.delete(listener);
+      }, []);
+      return store;
+    };
+
+    const decide = async (id, action, scope) => {
+      try {
+        await fetch('/device-fleet/approvals/decide', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ id, action, ...(scope ? { scope } : {}) }),
+        });
+      } finally {
+        store.items = store.items.filter((item) => item.id !== id);
+        notify();
+      }
+    };
+
+    const dialogStyle = {
       position: 'fixed',
-      right: 16,
-      bottom: 72,
-      width: 360,
-      maxHeight: '65vh',
+      left: '50%',
+      top: '12vh',
+      transform: 'translateX(-50%)',
+      width: 'min(440px, calc(100vw - 32px))',
+      maxHeight: '70vh',
       overflow: 'auto',
-      zIndex: 900,
+      zIndex: 950,
       background: 'var(--dsw-alias-surface-raised, #1f1f1f)',
       color: 'var(--dsw-alias-text, #e8e8e8)',
       border: '1px solid var(--dsw-alias-border, #3a3a3a)',
-      borderRadius: 10,
-      boxShadow: '0 12px 32px rgba(0,0,0,.35)',
-      padding: 12,
+      borderRadius: 12,
+      boxShadow: '0 18px 48px rgba(0,0,0,.45)',
+      padding: 14,
       font: '13px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif',
     };
-    const buttonStyle = {
-      position: 'fixed',
-      right: 16,
-      bottom: 16,
-      zIndex: 900,
-      display: 'flex',
-      alignItems: 'center',
-      gap: 8,
-      padding: '8px 12px',
-      borderRadius: 999,
-      border: '1px solid var(--dsw-alias-border, #3a3a3a)',
-      background: 'var(--dsw-alias-surface-raised, #1f1f1f)',
-      color: 'var(--dsw-alias-text, #e8e8e8)',
-      cursor: 'pointer',
-      boxShadow: '0 6px 18px rgba(0,0,0,.3)',
-      font: '13px system-ui, -apple-system, "Segoe UI", sans-serif',
-    };
 
-    function ActionButton({ children, onClick, tone = 'normal', disabled = false }) {
-      const colors = {
-        normal: { bg: 'var(--dsw-alias-surface, transparent)', border: 'var(--dsw-alias-border, #3a3a3a)' },
-        allow: { bg: 'var(--dsw-alias-accent, #2f6fed)', border: 'var(--dsw-alias-accent, #2f6fed)' },
-        deny: { bg: 'transparent', border: 'var(--dsw-alias-border, #3a3a3a)' },
-      };
-      const theme = colors[tone] ?? colors.normal;
-      return h(
+    const smallButton = (label, onClick, tone, disabled) =>
+      h(
         'button',
         {
           type: 'button',
-          disabled,
+          disabled: disabled === true,
           onClick,
           style: {
             padding: '3px 9px',
             borderRadius: 6,
-            border: '1px solid ' + theme.border,
-            background: theme.bg,
+            border: '1px solid ' + (tone === 'allow' ? 'var(--dsw-alias-accent, #2f6fed)' : 'var(--dsw-alias-border, #3a3a3a)'),
+            background: tone === 'allow' ? 'var(--dsw-alias-accent, #2f6fed)' : 'transparent',
             color: 'var(--dsw-alias-text, #e8e8e8)',
-            cursor: disabled ? 'default' : 'pointer',
-            opacity: disabled ? 0.55 : 1,
+            cursor: disabled === true ? 'default' : 'pointer',
+            opacity: disabled === true ? 0.55 : 1,
             fontSize: 12,
           },
         },
-        children,
+        label,
       );
-    }
 
-    function ApprovalPanel() {
-      const [items, setItems] = useState([]);
-      const [open, setOpen] = useState(false);
-      const [busy, setBusy] = useState({});
+    function Trigger({ wide }) {
+      const current = useStore();
+      const count = current.items.length;
+      const expanded = wide !== false;
+      return h(
+        'button',
+        {
+          type: 'button',
+          title: count > 0 ? 'Fleet 审批：' + count + ' 条待处理' : 'Fleet 审批',
+          'aria-label': 'Fleet 审批' + (count > 0 ? '（' + count + ' 条待处理）' : ''),
+          onClick: () => {
+            store.open = !store.open;
+            notify();
+          },
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 6,
+            padding: expanded ? '5px 10px' : '5px 7px',
+            borderRadius: 8,
+            border: '1px solid ' + (count > 0 ? 'var(--dsw-alias-accent, #2f6fed)' : 'var(--dsw-alias-border, #3a3a3a)'),
+            background: count > 0 ? 'var(--dsw-alias-accent, #2f6fed)' : 'transparent',
+            color: 'var(--dsw-alias-text, #e8e8e8)',
+            cursor: 'pointer',
+            fontSize: 12,
+            whiteSpace: 'nowrap',
+          },
+        },
+        h('span', { 'aria-hidden': true }, '🛰️'),
+        expanded ? h('span', null, count > 0 ? '审批 ' + count : '审批') : null,
+      );
+    }
 
+    function Panel() {
+      const current = useStore();
       useEffect(() => {
-        let disposed = false;
-        let timer;
-        const poll = async () => {
-          try {
-            const response = await fetch('/device-fleet/approvals', { headers: { accept: 'application/json' } });
-            if (!response.ok) throw new Error('HTTP ' + response.status);
-            const data = await response.json();
-            if (!disposed) setItems(Array.isArray(data.approvals) ? data.approvals : []);
-          } catch {
-            if (!disposed) setItems([]);
+        if (!current.open) return undefined;
+        const onKey = (event) => {
+          if (event.key === 'Escape') {
+            store.open = false;
+            notify();
           }
-          if (!disposed) timer = setTimeout(poll, POLL_MS);
-        };
-        poll();
-        return () => {
-          disposed = true;
-          clearTimeout(timer);
         };
-      }, []);
-
-      const decide = async (id, action, scope) => {
-        setBusy((current) => ({ ...current, [id]: true }));
-        try {
-          const response = await fetch('/device-fleet/approvals/decide', {
-            method: 'POST',
-            headers: { 'content-type': 'application/json' },
-            body: JSON.stringify({ id, action, ...(scope ? { scope } : {}) }),
-          });
-          if (response.ok) setItems((current) => current.filter((item) => item.id !== id));
-        } finally {
-          setBusy((current) => ({ ...current, [id]: false }));
-        }
-      };
-
-      const label = items.length > 0 ? 'Fleet 审批 (' + items.length + ')' : 'Fleet 审批';
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+      }, [current.open]);
+      if (!current.open) return null;
       return h(
         'div',
-        null,
-        open
-          ? h(
-              'div',
-              { style: panelStyle, role: 'dialog', 'aria-label': 'Fleet 待审批请求' },
-              h(
-                'div',
-                { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 } },
-                h('strong', null, '待审批请求'),
-                h('button', { type: 'button', onClick: () => setOpen(false), style: { ...buttonStyle, position: 'static', boxShadow: 'none', padding: '3px 9px', fontSize: 12 } }, '收起'),
-              ),
-              items.length === 0
-                ? h('div', { style: { opacity: 0.7 } }, '暂无待审批请求')
-                : items.map((item) =>
-                    h(
-                      'div',
-                      { key: item.id, style: { borderTop: '1px solid var(--dsw-alias-border, #333)', padding: '8px 0' } },
-                      h('div', { style: { fontWeight: 600 } }, (item.capability || 'tool') + (item.tool ? ' / ' + item.tool : '')),
-                      h('div', { style: { opacity: 0.75, fontSize: 12 } }, '来自 ' + item.fromDeviceId + ' · ' + Math.max(0, Math.round(item.expiresInMs / 1000)) + 's 后超时'),
-                      item.reason ? h('div', { style: { opacity: 0.75, fontSize: 12, marginTop: 2 } }, item.reason) : null,
-                      h('div', { style: { fontFamily: 'ui-monospace, monospace', fontSize: 11, margin: '4px 0', opacity: 0.8, wordBreak: 'break-all' } }, item.argsSummary),
-                      h(
-                        'div',
-                        { style: { display: 'flex', gap: 6, marginTop: 4 } },
-                        h(ActionButton, { tone: 'allow', onClick: () => decide(item.id, 'approve') }, busy[item.id] ? '处理中…' : '允许一次'),
-                        h(ActionButton, { tone: 'allow', onClick: () => decide(item.id, 'approve', 'ttl') }, '允许 15 分钟'),
-                        h(ActionButton, { tone: 'deny', onClick: () => decide(item.id, 'deny') }, '拒绝'),
-                      ),
-                    ),
-                  ),
-            )
-          : null,
+        {
+          style: { position: 'fixed', inset: 0, zIndex: 940, background: 'rgba(0,0,0,.35)' },
+          onClick: () => {
+            store.open = false;
+            notify();
+          },
+          role: 'presentation',
+        },
         h(
-          'button',
-          { type: 'button', style: { ...buttonStyle, borderColor: items.length > 0 ? 'var(--dsw-alias-accent, #2f6fed)' : undefined }, onClick: () => setOpen((value) => !value) },
-          h('span', { 'aria-hidden': true }, '🛰️'),
-          h('span', null, label),
+          'div',
+          { style: dialogStyle, role: 'dialog', 'aria-label': 'Fleet 待审批请求', onClick: (event) => event.stopPropagation() },
+          h(
+            'div',
+            { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 } },
+            h('strong', null, '待审批请求'),
+            h(
+              'button',
+              {
+                type: 'button',
+                onClick: () => {
+                  store.open = false;
+                  notify();
+                },
+                style: { background: 'transparent', border: 'none', color: 'inherit', cursor: 'pointer', fontSize: 12, opacity: 0.8 },
+              },
+              '收起',
+            ),
+          ),
+          current.items.length === 0
+            ? h('div', { style: { opacity: 0.7 } }, '暂无待审批请求')
+            : current.items.map((item) =>
+                h(
+                  'div',
+                  { key: item.id, style: { borderTop: '1px solid var(--dsw-alias-border, #333)', padding: '9px 0' } },
+                  h('div', { style: { fontWeight: 600 } }, (item.capability || 'tool') + (item.tool ? ' / ' + item.tool : '')),
+                  h('div', { style: { opacity: 0.75, fontSize: 12 } }, '来自 ' + item.fromDeviceId + ' · ' + Math.max(0, Math.round(item.expiresInMs / 1000)) + 's 后超时'),
+                  item.reason ? h('div', { style: { opacity: 0.75, fontSize: 12, marginTop: 2 } }, item.reason) : null,
+                  h('div', { style: { fontFamily: 'ui-monospace, monospace', fontSize: 11, margin: '5px 0', opacity: 0.8, wordBreak: 'break-all' } }, item.argsSummary),
+                  h(
+                    'div',
+                    { style: { display: 'flex', gap: 6, marginTop: 4, flexWrap: 'wrap' } },
+                    smallButton('允许一次', () => decide(item.id, 'approve'), 'allow'),
+                    smallButton('允许 15 分钟', () => decide(item.id, 'approve', 'ttl'), 'allow'),
+                    smallButton('拒绝', () => decide(item.id, 'deny'), 'deny'),
+                  ),
+                ),
+              ),
         ),
       );
     }
@@ -158,9 +216,14 @@ window.__ModuleLoader__.load({
     return {
       inject: ['slots'],
       apply(ctx) {
-        ctx.slots.inject('shell.overlay', () =>
-          ctx.slots.register({ name: 'shell.overlay', id: 'fleet-approvals', order: 10 }, ApprovalPanel),
+        ctx.effect(() => startPolling());
+        ctx.slots.inject('sidebar.footer.action', () =>
+          ctx.slots.register({ name: 'sidebar.footer.action', id: 'fleet-approvals', order: 5, label: 'Fleet 审批' }, Trigger),
         );
+        // shell.overlay is a root slot that exists from boot (the dev.10 build
+        // rendered from a direct registration); register directly so the dialog
+        // mounts even if the lazy inject callback never fires.
+        ctx.slots.register({ name: 'shell.overlay', id: 'fleet-approvals-panel', order: 10 }, Panel);
       },
     };
   },

package/docs/notes/approval-panel-ui.md

@@ -0,0 +1,38 @@
+# 审批面板 UI（dev.9 / dev.10）
+
+## Host 数据面
+
+`src/host/approval-web.js`：
+
+- `GET /device-fleet/approvals` → `{ approvals: [...] }`（来自 ApprovalInbox.list）；
+- `POST /device-fleet/approvals/decide`，body `{ id, action: "approve"|"deny", scope?, reason? }` → 决策走 ApprovalInbox；
+- 仅注册在 DSH web 载体的本地监听上；决策仍受 ApprovalInbox 的超时/关闭/未知 id 约束；
+- 纯逻辑 `createApprovalApi` 与路由注册分离，便于单测；路由在插件卸载时 dispose。
+
+## Client 半
+
+`client.js`（闭包工厂，`window.__ModuleLoader__.load`，id = `dsh-device-fleet`）：
+
+- 注册 `shell.overlay`（root）列表项 `fleet-approvals`，右下角浮动按钮「Fleet 审批 (n)」；
+- 2.5s 轮询 `/device-fleet/approvals`，有请求时按钮高亮；点开面板显示来源设备/能力/工具/参数摘要/剩余超时；
+- 按钮：允许一次 / 允许 15 分钟（ttl）/ 拒绝，POST 到 decide 后从列表移除；
+- 使用 `--dsw-alias-*` token（带 fallback），不覆盖宿主根、不读其他插件 DOM。
+
+`package.json` 增加 `dsh.client = { platform: web, immediately: true, inject: ["@deepseek-ai/dsh-client-runtime"] }` 与 `./client` 导出、`files` 包含 client.js。
+
+## 验证
+
+- 单测：`approval HTTP API lists and decides requests, and registers two routes`（列表/决策/路由注册/GET handler）；
+- Host 单测总计 **14/14** 通过，网络层 9/9；
+- Host 路由注册：插件 dev.9/10 激活成功（无重复路由错误）；
+- Client 视觉：**未验证**（无浏览器控制；需要刷新页面加载 client bundle），`node --check client.js` 通过。
+
+## 使用
+
+刷新当前 Web 页面（F5）后，右下角应出现「Fleet 审批」浮动按钮。用 `fleet_simulate_request` 造一条请求即可看到面板内容；点击允许/拒绝后 Host 端 `fleet_approvals` 同步清空。
+
+## 限制
+
+- 面板轮询而非推送，规模大时应换 SSE/事件；
+- 路由未额外鉴权（依赖 web 载体自身的本地/会话边界）；
+- 面板不含房间视图（下一版可加 Room 时间线/看板页）。

package/docs/notes/dev-release.md

@@ -39,19 +39,19 @@ dsh plugin --profile desktop add dsh-device-fleet@dev
 - 邀请里新增 `endpoints`（创建者的局域网/热点 IPv4 + direct 端口），加入方重启后自动向这些地址回连，绕开组播发现失败；
 - 新增 `fleet_status`（deviceId/直连端口/发现/连接/roster/hints）与 `fleet_connect(host, port)`（手动直连，成功后会从握手学到对端 deviceId）；
 - `fleet_list` 仍是本地视图；配对成功后双方 roster 会自动固定对端公钥。
-## 0.1.0-dev.9（稳定化）
+## 0.1.0-dev.11（稳定化）
 
 - 直连端口可固定（profile `direct.port`），插件重载不再换端口；
 - 连接断开后自动重试已知地址（不再只在启动时试一次）；
 - `fleet_connect` 手动地址会持久化到 `peer-hints.json`，重启后继续回连；
 - 新增 `fleet_delegate`（dev.5）：目标设备用 `SubagentProvider` + `delivery:'caller'` 跑 agent 并返回最终结果。
-## 0.1.0-dev.9（审批收件箱，逻辑层）
+## 0.1.0-dev.11（审批收件箱，逻辑层）
 
 - 新增 `ApprovalInbox`：ask 档请求排队、超时 fail-closed、approve（once/ttl）/deny、关闭时全部失败关闭；
 - 直调与委派的 ask 档改为等待本机收件箱结果（不再一律拒绝）；
 - 新工具：`fleet_approvals` / `fleet_approve` / `fleet_deny`；`fleet_simulate_request`（仅 `approvals.simulation: true`）用于本机无第二台设备时演练流程；
 - 审批面板（Client UI）与通知尚未实现，当前通过工具/后续 UI 应答。
-## 0.1.0-dev.9（Room 逻辑层，本机模拟）
+## 0.1.0-dev.11（Room 逻辑层，本机模拟）
 
 - `RoomService`：当前会话升级为 Room Host；本地模拟参与者（真实 DSH session/agent）；
 - 寻址消息：`room_send` 只唤醒被点名成员，Host 会话写权威 `room/message` 事件；
@@ -59,9 +59,15 @@ dsh plugin --profile desktop add dsh-device-fleet@dev
 - Room Board：`room_task_add/update/list`，`dependsOn` 串行交接（前置完成时唤醒下一个 owner），无依赖任务并行不受影响；
 - 工具：`room_create / room_add_local / room_remove_member / room_send / room_messages / room_status / room_task_* / room_close`；
 - 远程参与者传输与 Client UI 未做（下一步）。
-## 0.1.0-dev.9（审批面板 UI，第一版）
+## 0.1.0-dev.11（审批面板 UI，第一版）
 
 - Host 新增本地 HTTP 数据面：GET `/device-fleet/approvals`、POST `/device-fleet/approvals/decide`（仅本机 web 载体，决策仍走 ApprovalInbox）；
 - Client half：`client.js` 闭包工厂，注册 `shell.overlay` 浮动「Fleet 审批」按钮 + 面板，轮询待审批列表，支持允许一次 / 允许 15 分钟 / 拒绝；
 - package.json 增加 `dsh.client` 与 `./client` 导出；`files` 增加 client.js；
-- Client 视觉验证需要刷新页面；当前无浏览器控制，仅验证了 bundle 语法与 Host 路由注册。
+- Client 视觉验证需要刷新页面；当前无浏览器控制，仅验证了 bundle 语法与 Host 路由注册。
+## 0.1.0-dev.11（审批入口不遮挡）
+
+- 触发按钮从右下角浮动改为 `sidebar.footer.action`（设置旁边），不再遮挡任务列表/内容面板；
+- 审批 inbox 改为点击后居中的模态对话框（带遮罩，Esc/点遮罩关闭）；
+- 轮询在 Client apply 中启动并由 ctx.effect 清理；待审批数量作为按钮徽标；
+- 已实测：面板点击「允许」后 Host `fleet_approvals` 清空。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-device-fleet",
-  "version": "0.1.0-dev.10",
+  "version": "0.1.0-dev.12",
   "description": "DeepSeek Harness device fleet: enroll devices, direct-call remote tools, shared Rooms with lazy-woken agents, and delegated subagents across devices.",
   "type": "module",
   "main": "src/plugin/index.js",