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

package/README.md

@@ -9,8 +9,9 @@ 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 串行交接；单机仿真验证通过
-- ✅ **审批面板 UI（dev.10）**：Host `/device-fleet/approvals` HTTP 数据面 + Client `shell.overlay` 浮动审批按钮/面板（允许一次/15 分钟/拒绝）；单测 14/14；刷新页面后可见
-- ⏳ 远程参与者传输、房间视图、插件重载 rehydrate、SSE 推送（下一步）
+- ✅ **审批面板 UI（dev.12，已验证）**：Host `/device-fleet/approvals` HTTP 数据面 + Client 入口在 Settings 上方、居中审批对话框（允许一次/15 分钟/拒绝）；用户点击「允许」后 Host 列表清空，端到端闭环
+- ✅ **Fleet 控制台（dev.13，Phase A）**：Host `/device-fleet/overview`、`/rooms`、`/rooms/:id`；Room 持久化到 `$DSH_HOME/device-fleet/rooms.json` 并 rehydrate（插件重载不丢房间）；Client `sidebar.panellist` + `main` 面板，设备/房间/审批三 Tab
+- ⏳ Phase B 配置页（即时生效，无需重启）、Phase C 房间/配对交互、Phase D SSE/通知/i18n/a11y
 
 ## 安装（开发版）
 

package/client.js

@@ -213,6 +213,562 @@ window.__ModuleLoader__.load({
       );
     }
 
+    const cardStyle = {
+      border: '1px solid var(--dsw-alias-border, #3a3a3a)',
+      borderRadius: 10,
+      padding: 12,
+      background: 'var(--dsw-alias-surface-raised, #1f1f1f)',
+      marginBottom: 10,
+    };
+    const sectionTitle = { fontSize: 12, opacity: 0.65, textTransform: 'uppercase', letterSpacing: '.04em', marginBottom: 6 };
+    const pill = (text, tone) =>
+      h(
+        'span',
+        {
+          style: {
+            display: 'inline-block',
+            padding: '1px 7px',
+            borderRadius: 999,
+            fontSize: 11,
+            border: '1px solid ' + (tone === 'ok' ? 'var(--dsw-alias-accent, #2f6fed)' : 'var(--dsw-alias-border, #3a3a3a)'),
+            color: tone === 'ok' ? 'var(--dsw-alias-accent, #2f6fed)' : 'inherit',
+            opacity: tone === 'muted' ? 0.7 : 1,
+            marginRight: 6,
+          },
+        },
+        text,
+      );
+
+    const fmtTime = (value) => {
+      try {
+        return new Date(value).toLocaleTimeString();
+      } catch {
+        return '';
+      }
+    };
+
+    function FleetIcon({ size = 20, active = false }) {
+      return h(
+        'svg',
+        {
+          width: size,
+          height: size,
+          viewBox: '0 0 24 24',
+          fill: 'none',
+          stroke: 'currentColor',
+          strokeWidth: 1.8,
+          strokeLinecap: 'round',
+          'aria-hidden': true,
+          style: { opacity: active ? 1 : 0.75 },
+        },
+        h('circle', { cx: 12, cy: 12, r: 8.5 }),
+        h('ellipse', { cx: 12, cy: 12, rx: 3.6, ry: 8.5 }),
+        h('path', { d: 'M3.8 12h16.4' }),
+      );
+    }
+
+    function FleetConsole() {
+      const [tab, setTab] = useState('devices');
+      const [overview, setOverview] = useState(null);
+      const [rooms, setRooms] = useState([]);
+      const [selectedRoom, setSelectedRoom] = useState(null);
+      const [roomDetail, setRoomDetail] = useState(null);
+      const [error, setError] = useState('');
+
+      useEffect(() => {
+        let disposed = false;
+        const tick = async () => {
+          try {
+            const response = await fetch('/device-fleet/overview', { headers: { accept: 'application/json' } });
+            if (!response.ok) throw new Error('HTTP ' + response.status);
+            const data = await response.json();
+            if (!disposed) {
+              setOverview(data);
+              setRooms(Array.isArray(data.rooms) ? data.rooms : []);
+              setError('');
+            }
+          } catch (problem) {
+            if (!disposed) setError(String(problem.message ?? problem));
+          }
+        };
+        tick();
+        const timer = setInterval(tick, 3000);
+        return () => {
+          disposed = true;
+          clearInterval(timer);
+        };
+      }, []);
+
+      useEffect(() => {
+        if (!selectedRoom) {
+          setRoomDetail(null);
+          return undefined;
+        }
+        let disposed = false;
+        const load = async () => {
+          try {
+            const response = await fetch('/device-fleet/rooms/' + encodeURIComponent(selectedRoom), { headers: { accept: 'application/json' } });
+            if (!response.ok) throw new Error('HTTP ' + response.status);
+            const data = await response.json();
+            if (!disposed) setRoomDetail(data.room ?? null);
+          } catch {
+            if (!disposed) setRoomDetail(null);
+          }
+        };
+        load();
+        const timer = setInterval(load, 3000);
+        return () => {
+          disposed = true;
+          clearInterval(timer);
+        };
+      }, [selectedRoom]);
+
+      const decide = async (id, action, scope) => {
+        await fetch('/device-fleet/approvals/decide', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ id, action, ...(scope ? { scope } : {}) }),
+        });
+        setOverview((current) => (current ? { ...current, approvals: (current.approvals ?? []).filter((item) => item.id !== id) } : current));
+      };
+
+      const tabs = [
+        ['devices', '设备'],
+        ['rooms', '房间'],
+        ['approvals', '审批'],
+      ];
+      const header = h(
+        'div',
+        { style: { display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap', marginBottom: 12 } },
+        h('strong', { style: { fontSize: 15 } }, '设备联邦'),
+        overview ? pill('本机 ' + (overview.name ?? '') + ' · ' + overview.pluginVersion, 'muted') : null,
+        h('span', { style: { flex: 1 } }),
+        ...tabs.map(([id, label]) =>
+          h(
+            'button',
+            {
+              key: id,
+              type: 'button',
+              onClick: () => setTab(id),
+              style: {
+                padding: '4px 10px',
+                borderRadius: 999,
+                border: '1px solid ' + (tab === id ? 'var(--dsw-alias-accent, #2f6fed)' : 'var(--dsw-alias-border, #3a3a3a)'),
+                background: tab === id ? 'var(--dsw-alias-accent, #2f6fed)' : 'transparent',
+                color: 'inherit',
+                cursor: 'pointer',
+                fontSize: 12,
+              },
+            },
+            label + (id === 'approvals' && (overview?.approvals?.length ?? 0) > 0 ? ' ' + overview.approvals.length : ''),
+          ),
+        ),
+      );
+
+      if (!overview) {
+        return h('div', { style: { padding: 16 } }, header, h('div', { style: { opacity: 0.7 } }, error ? '加载失败：' + error : '加载中…'));
+      }
+
+      let body = null;
+      if (tab === 'devices') {
+        const connected = new Set(Array.isArray(overview.connected) ? overview.connected : []);
+        body = h(
+          'div',
+          null,
+          h('div', { style: cardStyle },
+            h('div', { style: sectionTitle }, '本机'),
+            h('div', null, overview.name + ' · ' + overview.deviceId),
+            h('div', { style: { opacity: 0.75, fontSize: 12, marginTop: 4 } },
+              '直连 ' + (overview.direct ? overview.direct.host + ':' + overview.direct.port : '未监听') +
+              ' · relay ' + (overview.relay?.online ? '在线' : '离线') +
+              ' · 发现 ' + ((overview.discovery?.peers ?? []).length) + ' 个'),
+          ),
+          h('div', { style: cardStyle },
+            h('div', { style: sectionTitle }, 'Fleet 成员（' + (overview.roster?.length ?? 0) + ' 台已配对）'),
+            (overview.roster ?? []).length === 0
+              ? h('div', { style: { opacity: 0.7, fontSize: 12 } }, '还没有配对设备；在任一台设备上生成邀请码完成配对。')
+              : (overview.roster ?? []).map((member) =>
+                  h('div', { key: member.deviceId, style: { display: 'flex', gap: 8, alignItems: 'center', padding: '4px 0' } },
+                    h('span', { style: { flex: 1 } }, member.name + ' · ' + member.deviceId.slice(0, 8) + '…'),
+                    connected.has(member.deviceId) ? pill('在线', 'ok') : pill('离线', 'muted'),
+                  ),
+                ),
+          ),
+          (overview.peerHints ?? []).length > 0
+            ? h('div', { style: cardStyle },
+                h('div', { style: sectionTitle }, '回连地址'),
+                ...overview.peerHints.map((hint, index) =>
+                  h('div', { key: index, style: { fontSize: 12, fontFamily: 'ui-monospace, monospace', opacity: 0.8 } }, hint.host + ':' + hint.port),
+                ),
+              )
+            : null,
+        );
+      } else if (tab === 'rooms') {
+        body = h(
+          'div',
+          { style: { display: 'flex', gap: 14, alignItems: 'flex-start', flexWrap: 'wrap' } },
+          h('div', { style: { flex: '1 1 260px', minWidth: 240 } },
+            h('div', { style: sectionTitle }, '房间（' + rooms.length + '）'),
+            rooms.length === 0
+              ? h('div', { style: { opacity: 0.7, fontSize: 12 } }, '还没有房间。让 agent 在当前会话执行 room_create 升级为 Room Host。')
+              : rooms.map((room) =>
+                  h(
+                    'button',
+                    {
+                      key: room.roomId,
+                      type: 'button',
+                      onClick: () => setSelectedRoom(room.roomId === selectedRoom ? null : room.roomId),
+                      style: {
+                        ...cardStyle,
+                        display: 'block',
+                        width: '100%',
+                        textAlign: 'left',
+                        cursor: 'pointer',
+                        borderColor: selectedRoom === room.roomId ? 'var(--dsw-alias-accent, #2f6fed)' : undefined,
+                        marginBottom: 8,
+                      },
+                    },
+                    h('div', { style: { fontWeight: 600 } }, 'Room ' + room.roomId.slice(-8)),
+                    h('div', { style: { fontSize: 12, opacity: 0.7, marginTop: 3 } },
+                      room.members.length + ' 名成员 · ' + room.messageCount + ' 条消息 · ' + room.tasks + ' 个任务'),
+                  ),
+                ),
+          ),
+          h('div', { style: { flex: '2 1 420px', minWidth: 320 } }, selectedRoom ? renderRoomDetail(roomDetail) : h('div', { style: { opacity: 0.65, fontSize: 12 } }, '选择一个房间查看成员、时间线与看板。')),
+        );
+      } else {
+        const approvals = overview.approvals ?? [];
+        body = h(
+          'div',
+          { style: cardStyle },
+          h('div', { style: sectionTitle }, '待审批请求（' + approvals.length + '）'),
+          approvals.length === 0
+            ? h('div', { style: { opacity: 0.7, fontSize: 12 } }, '暂无待审批请求')
+            : approvals.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.7, fontSize: 12 } }, item.reason) : null,
+                  h('div', { style: { display: 'flex', gap: 6, marginTop: 5, flexWrap: 'wrap' } },
+                    smallButton('允许一次', () => decide(item.id, 'approve'), 'allow'),
+                    smallButton('允许 15 分钟', () => decide(item.id, 'approve', 'ttl'), 'allow'),
+                    smallButton('拒绝', () => decide(item.id, 'deny'), 'deny'),
+                  ),
+                ),
+              ),
+        );
+      }
+
+      return h('div', { style: { padding: '14px 16px', height: '100%', overflow: 'auto', boxSizing: 'border-box' } }, header, body);
+    }
+
+    function renderRoomDetail(detail) {
+      if (!detail) return h('div', { style: { opacity: 0.65, fontSize: 12 } }, '加载房间…');
+      return h(
+        'div',
+        null,
+        h('div', { style: cardStyle },
+          h('div', { style: sectionTitle }, '成员'),
+          ...detail.members.map((member) =>
+            h('div', { key: member.memberId, style: { padding: '3px 0', fontSize: 12 } },
+              pill(member.role, member.role === 'host' ? 'ok' : 'muted'),
+              member.name + ' · ' + member.memberId,
+            ),
+          ),
+        ),
+        h('div', { style: cardStyle },
+          h('div', { style: sectionTitle }, '看板（' + detail.tasks.length + '）'),
+          detail.tasks.length === 0
+            ? h('div', { style: { opacity: 0.7, fontSize: 12 } }, '暂无任务')
+            : detail.tasks.map((task) =>
+                h('div', { key: task.id, style: { padding: '4px 0', fontSize: 12 } },
+                  pill(task.status, task.status === 'done' ? 'ok' : 'muted'),
+                  task.title + ' · owner ' + task.owner + (task.dependsOn.length ? ' · deps ' + task.dependsOn.length : ''),
+                ),
+              ),
+        ),
+        h('div', { style: cardStyle },
+          h('div', { style: sectionTitle }, '时间线'),
+          detail.messages.length === 0
+            ? h('div', { style: { opacity: 0.7, fontSize: 12 } }, '暂无消息')
+            : detail.messages.map((message) =>
+                h('div', { key: message.id, style: { padding: '5px 0', borderTop: '1px solid var(--dsw-alias-border, #333)' } },
+                  h('div', { style: { fontSize: 11, opacity: 0.6 } }, '[' + fmtTime(message.createdAt) + '] ' + message.fromLabel + ' → ' + message.to.join(', ')),
+                  h('div', { style: { whiteSpace: 'pre-wrap', marginTop: 2 } }, message.text),
+                ),
+              ),
+        ),
+      );
+    }
+
+    const inputStyle = {
+      width: '100%',
+      boxSizing: 'border-box',
+      padding: '5px 8px',
+      borderRadius: 6,
+      border: '1px solid var(--dsw-alias-border, #3a3a3a)',
+      background: 'transparent',
+      color: 'inherit',
+      fontSize: 13,
+    };
+    const labelStyle = { display: 'block', margin: '4px 0 10px' };
+    const labelTextStyle = { fontSize: 12, opacity: 0.72, marginBottom: 3 };
+
+    function Field({ label, hint, children }) {
+      return h('label', { style: labelStyle }, h('div', { style: labelTextStyle }, label), children, hint ? h('div', { style: { fontSize: 11, opacity: 0.55, marginTop: 2 } }, hint) : null);
+    }
+
+    function TextField({ label, value, onChange, hint, type = 'text' }) {
+      return h(Field, { label, hint }, h('input', { type, value: value ?? '', onChange: (event) => onChange(event.target.value), style: inputStyle }));
+    }
+
+    function NumberField({ label, value, onChange, hint }) {
+      return h(Field, { label, hint }, h('input', { type: 'number', value: value ?? 0, onChange: (event) => onChange(Number(event.target.value || 0)), style: inputStyle }));
+    }
+
+    function ToggleField({ label, checked, onChange }) {
+      return h('label', { style: { display: 'flex', alignItems: 'center', gap: 8, margin: '4px 0 10px', fontSize: 13 } },
+        h('input', { type: 'checkbox', checked: checked === true, onChange: (event) => onChange(event.target.checked) }),
+        h('span', null, label),
+      );
+    }
+
+    function SelectField({ label, value, options, onChange }) {
+      return h(Field, { label }, h('select', { value, onChange: (event) => onChange(event.target.value), style: inputStyle },
+        ...options.map((option) => h('option', { key: option, value: option }, option)),
+      ));
+    }
+
+    function configToDraft(config = {}) {
+      const execution = config.execution ?? {};
+      const policy = config.policy ?? {};
+      const approvals = config.approvals ?? {};
+      const direct = config.direct ?? {};
+      const relay = config.relay ?? {};
+      return {
+        deviceName: config.deviceName ?? '',
+        directHost: direct.host ?? '0.0.0.0',
+        directPort: direct.port ?? 0,
+        discovery: config.discovery !== false,
+        relayHost: relay.host ?? '',
+        relayPort: relay.port ?? 0,
+        relayDataPort: relay.dataPort ?? 0,
+        execCwd: execution.cwd ?? '',
+        execPreset: execution.agentPreset ?? '',
+        execShellTool: execution.shellTool ?? '',
+        execApprovalTimeoutMs: execution.approvalTimeoutMs ?? 60000,
+        execDelegateTimeoutMs: execution.delegateTimeoutMs ?? 180000,
+        execSubagentProvider: execution.subagentProvider ?? 'spawn',
+        rootsText: (policy.allowedRoots ?? []).join('\n'),
+        toolsText: (policy.allowedTools ?? []).join('\n'),
+        capRead: policy.capabilities?.read ?? 'auto',
+        capList: policy.capabilities?.list ?? 'auto',
+        capGrep: policy.capabilities?.grep ?? 'auto',
+        capFetch: policy.capabilities?.fetch ?? 'auto',
+        capRun: policy.capabilities?.run ?? 'ask',
+        capTool: policy.capabilities?.tool ?? 'deny',
+        capDelegate: policy.capabilities?.delegate ?? 'ask',
+        policyApprovalTtlMs: policy.approvalTtlMs ?? 900000,
+        approvalsTtlMs: approvals.ttlMs ?? 60000,
+        approvalsMaxPending: approvals.maxPending ?? 50,
+        autoApproveAsk: config.autoApproveAsk === true,
+        promptSection: config.promptSection !== false,
+        simulation: approvals.simulation === true,
+        dataDir: config.dataDir ?? '',
+      };
+    }
+
+    function draftToPatch(draft) {
+      return {
+        deviceName: draft.deviceName,
+        direct: { host: draft.directHost, port: draft.directPort },
+        discovery: draft.discovery,
+        relay: draft.relayHost && draft.relayPort > 0
+          ? { host: draft.relayHost, port: draft.relayPort, dataPort: draft.relayDataPort }
+          : null,
+        execution: {
+          cwd: draft.execCwd,
+          agentPreset: draft.execPreset,
+          shellTool: draft.execShellTool,
+          approvalTimeoutMs: draft.execApprovalTimeoutMs,
+          delegateTimeoutMs: draft.execDelegateTimeoutMs,
+          subagentProvider: draft.execSubagentProvider,
+        },
+        policy: {
+          allowedRoots: draft.rootsText.split('\n').map((item) => item.trim()).filter(Boolean),
+          allowedTools: draft.toolsText.split('\n').map((item) => item.trim()).filter(Boolean),
+          capabilities: {
+            read: draft.capRead,
+            list: draft.capList,
+            grep: draft.capGrep,
+            fetch: draft.capFetch,
+            run: draft.capRun,
+            tool: draft.capTool,
+            delegate: draft.capDelegate,
+          },
+          approvalTtlMs: draft.policyApprovalTtlMs,
+        },
+        approvals: {
+          ttlMs: draft.approvalsTtlMs,
+          maxPending: draft.approvalsMaxPending,
+          simulation: draft.simulation,
+        },
+        autoApproveAsk: draft.autoApproveAsk,
+        promptSection: draft.promptSection,
+      };
+    }
+
+    function FleetConfig() {
+      const [draft, setDraft] = useState(null);
+      const [status, setStatus] = useState('');
+      const [busy, setBusy] = useState(false);
+
+      const load = async () => {
+        try {
+          const response = await fetch('/device-fleet/config', { headers: { accept: 'application/json' } });
+          if (!response.ok) throw new Error('HTTP ' + response.status);
+          const data = await response.json();
+          setDraft(configToDraft(data.config));
+        } catch (problem) {
+          setStatus('加载配置失败：' + String(problem.message ?? problem));
+        }
+      };
+
+      useEffect(() => {
+        void load();
+      }, []);
+
+      if (!draft) return h('div', { style: { padding: 8, opacity: 0.7 } }, status || '加载中…');
+
+      const set = (key, value) => setDraft((current) => ({ ...current, [key]: value }));
+      const save = async () => {
+        setBusy(true);
+        setStatus('');
+        try {
+          const response = await fetch('/device-fleet/config', {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify(draftToPatch(draft)),
+          });
+          const data = await response.json();
+          if (!response.ok) throw new Error(data.error ?? 'HTTP ' + response.status);
+          setDraft(configToDraft(data.config));
+          setStatus('已应用（无需重启插件或 DSH）');
+        } catch (problem) {
+          setStatus('保存失败：' + String(problem.message ?? problem));
+        } finally {
+          setBusy(false);
+        }
+      };
+
+      const sectionCard = (title, children, hint) =>
+        h('div', { style: { ...cardStyle, padding: 14 } },
+          h('div', { style: sectionTitle }, title),
+          hint ? h('div', { style: { fontSize: 11, opacity: 0.55, marginBottom: 8 } }, hint) : null,
+          children,
+        );
+
+      const capabilityFields = [
+        ['capRead', 'read 读取'],
+        ['capList', 'list 列目录'],
+        ['capGrep', 'grep 搜索'],
+        ['capFetch', 'fetch 取文件'],
+        ['capRun', 'run 执行命令'],
+        ['capTool', 'tool 原始工具'],
+        ['capDelegate', 'delegate 委派'],
+      ];
+      const twoCol = (left, right) => h('div', { style: { display: 'flex', gap: 12 } }, h('div', { style: { flex: 1 } }, left), h('div', { style: { flex: 1 } }, right));
+
+      return h('div', { style: { padding: '2px 2px 24px', maxWidth: 760 } },
+        h('div', { style: { display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10, flexWrap: 'wrap' } },
+          h('strong', null, 'Device Fleet 配置'),
+          h('span', { style: { flex: 1 } }),
+          status ? h('span', { style: { fontSize: 12, opacity: 0.8 } }, status) : null,
+          h('button', {
+            type: 'button',
+            disabled: busy,
+            onClick: () => void save(),
+            style: {
+              padding: '6px 14px',
+              borderRadius: 7,
+              border: '1px solid var(--dsw-alias-accent, #2f6fed)',
+              background: 'var(--dsw-alias-accent, #2f6fed)',
+              color: '#fff',
+              cursor: busy ? 'default' : 'pointer',
+              opacity: busy ? 0.6 : 1,
+            },
+          }, busy ? '保存中…' : '保存并立即生效'),
+        ),
+        h('div', { style: { fontSize: 12, opacity: 0.6, marginBottom: 12 } }, '保存后立即对运行中的插件生效，不需要重启插件或 DSH。dataDir 为只读（启动路径）。'),
+        sectionCard('设备与网络',
+          h('div', null,
+            h(TextField, { label: '设备名称', value: draft.deviceName, onChange: (value) => set('deviceName', value) }),
+            twoCol(
+              h(TextField, { label: '直连绑定地址', value: draft.directHost, onChange: (value) => set('directHost', value) }),
+              h(NumberField, { label: '直连端口（0=随机）', value: draft.directPort, onChange: (value) => set('directPort', value) }),
+            ),
+            h(ToggleField, { label: '局域网发现（UDP 组播）', checked: draft.discovery, onChange: (value) => set('discovery', value) }),
+            h('div', { style: { ...labelTextStyle, marginTop: 10 } }, '自建 Relay（v2，可选）'),
+            twoCol(
+              h(TextField, { label: 'Relay host', value: draft.relayHost, onChange: (value) => set('relayHost', value) }),
+              h(NumberField, { label: 'Relay control 端口', value: draft.relayPort, onChange: (value) => set('relayPort', value) }),
+            ),
+            h(NumberField, { label: 'Relay data 端口', value: draft.relayDataPort, onChange: (value) => set('relayDataPort', value) }),
+          )),
+        sectionCard('执行上下文（远端调用/委派在本机执行时使用）',
+          h('div', null,
+            twoCol(
+              h(TextField, { label: '工作目录 cwd', value: draft.execCwd, onChange: (value) => set('execCwd', value) }),
+              h(TextField, { label: 'Agent Preset', value: draft.execPreset, onChange: (value) => set('execPreset', value) }),
+            ),
+            twoCol(
+              h(TextField, { label: 'shell 工具名', value: draft.execShellTool, onChange: (value) => set('execShellTool', value) }),
+              h(TextField, { label: '委派 subagent provider', value: draft.execSubagentProvider, onChange: (value) => set('execSubagentProvider', value) }),
+            ),
+            twoCol(
+              h(NumberField, { label: '审批超时 (ms)', value: draft.execApprovalTimeoutMs, onChange: (value) => set('execApprovalTimeoutMs', value) }),
+              h(NumberField, { label: '委派超时 (ms)', value: draft.execDelegateTimeoutMs, onChange: (value) => set('execDelegateTimeoutMs', value) }),
+            ),
+          )),
+        sectionCard('远端权限（Tool Policy：别人能对你做什么）',
+          h('div', null,
+            h(Field, { label: '允许访问的根目录（每行一个）' },
+              h('textarea', {
+                value: draft.rootsText,
+                onChange: (event) => set('rootsText', event.target.value),
+                rows: 3,
+                style: { ...inputStyle, fontFamily: 'ui-monospace, monospace', resize: 'vertical' },
+              }),
+            ),
+            h(Field, { label: '允许的原始工具（每行一个，配合 tool 能力）' },
+              h('textarea', {
+                value: draft.toolsText,
+                onChange: (event) => set('toolsText', event.target.value),
+                rows: 3,
+                style: { ...inputStyle, fontFamily: 'ui-monospace, monospace', resize: 'vertical' },
+              }),
+            ),
+            h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0 12px' } },
+              ...capabilityFields.map(([key, label]) =>
+                h(SelectField, { key, label, value: draft[key], options: ['auto', 'ask', 'deny'], onChange: (value) => set(key, value) }),
+              ),
+            ),
+            h(NumberField, { label: '一次授权的 TTL (ms)', value: draft.policyApprovalTtlMs, onChange: (value) => set('policyApprovalTtlMs', value) }),
+          )),
+        sectionCard('本地审批与提示',
+          h('div', null,
+            twoCol(
+              h(NumberField, { label: '审批请求超时 (ms)', value: draft.approvalsTtlMs, onChange: (value) => set('approvalsTtlMs', value) }),
+              h(NumberField, { label: '最多排队请求数', value: draft.approvalsMaxPending, onChange: (value) => set('approvalsMaxPending', value) }),
+            ),
+            h(ToggleField, { label: '自动批准所有审批请求（仅测试）', checked: draft.autoApproveAsk, onChange: (value) => set('autoApproveAsk', value) }),
+            h(ToggleField, { label: '系统提示词中的 Fleet 提示', checked: draft.promptSection, onChange: (value) => set('promptSection', value) }),
+            h(ToggleField, { label: '允许 fleet_simulate_request（测试用）', checked: draft.simulation, onChange: (value) => set('simulation', value) }),
+            h(TextField, { label: '状态目录 dataDir（只读，需重启）', value: draft.dataDir, onChange: () => {} }),
+          )),
+      );
+    }
+
     return {
       inject: ['slots'],
       apply(ctx) {
@@ -224,6 +780,18 @@ window.__ModuleLoader__.load({
         // 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);
+        // Global Fleet console: sidebar icon + matching main panel.
+        ctx.slots.inject('sidebar.panellist', () =>
+          ctx.slots.register({ name: 'sidebar.panellist', id: 'fleet', order: 20, label: '设备联邦' }, FleetIcon),
+        );
+        ctx.slots.register({ name: 'main', key: 'fleet' }, FleetConsole);
+        // Configuration page: Settings → Plugins → Device Fleet (row + bundle).
+        ctx.slots.inject('plugins.row.config', () =>
+          ctx.slots.register({ name: 'plugins.row.config', key: 'dsh-device-fleet#device-fleet' }, FleetConfig),
+        );
+        ctx.slots.inject('plugins.bundle.config', () =>
+          ctx.slots.register({ name: 'plugins.bundle.config', key: 'dsh-device-fleet' }, FleetConfig),
+        );
       },
     };
   },

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

@@ -1,38 +1,38 @@
-# 审批面板 UI（dev.9 / dev.10）
+# 审批面板 UI（dev.9 → dev.12）
 
 ## Host 数据面
 
 `src/host/approval-web.js`：
 
-- `GET /device-fleet/approvals` → `{ approvals: [...] }`（来自 ApprovalInbox.list）；
+- `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。
+- 路由注册在插件 apply 中、卸载时 dispose；纯逻辑 `createApprovalApi` 与路由分离便于单测。
 
 ## Client 半
 
-`client.js`（闭包工厂，`window.__ModuleLoader__.load`，id = `dsh-device-fleet`）：
+`client.js`（闭包工厂，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。
+- **入口**：`sidebar.footer.action`（Settings 上方），显示 `🛰️ 审批`，有待审批时带数字并高亮；不再占用 `shell.overlay` 右下角，避免与任务列表 UI 重叠；
+- **面板**：`shell.overlay` 直接注册的居中模态对话框（遮罩、Esc/点遮罩/收起关闭）；
+- 2.5s 轮询 `/device-fleet/approvals`；按钮「允许一次 / 允许 15 分钟(ttl) / 拒绝」POST 到 decide；
+- 共享模块级 store + `ctx.effect` 启动/清理轮询；使用 `--dsw-alias-*` token（带 fallback）。
 
-`package.json` 增加 `dsh.client = { platform: web, immediately: true, inject: ["@deepseek-ai/dsh-client-runtime"] }` 与 `./client` 导出、`files` 包含 client.js。
+## 修复记录
 
-## 验证
+- dev.10：右下角浮动按钮可用，但会遮挡任务列表（用户截图确认）；
+- dev.11：入口迁到 sidebar footer；发现点击无反应；
+- dev.12：修复 `Panel` 的条件 Hook 顺序（关闭时提前 return，打开后才调 `useEffect`，导致 React 渲染报错）；同时把 `shell.overlay` 改回直接注册（dev.10 已验证可用路径）。
 
-- 单测：`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` 同步清空。
+1. 刷新页面后 Settings 上方出现「🛰️ 审批」；
+2. 点击后居中对话框正常打开并显示待审批条目（用户确认）；
+3. `fleet_simulate_request` 造请求 `dae59ce4-…`（run/pwsh，simulated-device-B）；
+4. 用户在面板点击「允许一次」；
+5. Host `fleet_approvals` 返回 `(no pending approvals)` → **UI → HTTP → ApprovalInbox 写回链路闭环**。
 
 ## 限制
 
-- 面板轮询而非推送，规模大时应换 SSE/事件；
-- 路由未额外鉴权（依赖 web 载体自身的本地/会话边界）；
-- 面板不含房间视图（下一版可加 Room 时间线/看板页）。
+- 轮询而非 SSE 推送；
+- 路由未额外鉴权（依赖 web 载体本地/会话边界）；
+- 面板暂无房间视图（时间线/看板页下一步）。