dsh-device-fleet 0.1.0-dev.2 → 0.1.0-dev.20

package/client.js

@@ -0,0 +1,1176 @@
+// Fleet approval panel (Client half).
+// 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) {
+    const React = require('react');
+    const h = React.createElement;
+    const { useEffect, useState } = React;
+
+    const POLL_MS = 2500;
+    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',
+      left: '50%',
+      top: '12vh',
+      transform: 'translateX(-50%)',
+      width: 'min(440px, calc(100vw - 32px))',
+      maxHeight: '70vh',
+      overflow: 'auto',
+      zIndex: 950,
+      background: 'var(--dsw-alias-surface-raised, #1f1f1f)',
+      color: 'var(--dsw-alias-text, #e8e8e8)',
+      border: '1px solid var(--dsw-alias-border, #3a3a3a)',
+      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 smallButton = (label, onClick, tone, disabled) =>
+      h(
+        'button',
+        {
+          type: 'button',
+          disabled: disabled === true,
+          onClick,
+          style: {
+            padding: '3px 9px',
+            borderRadius: 6,
+            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 === true ? 'default' : 'pointer',
+            opacity: disabled === true ? 0.55 : 1,
+            fontSize: 12,
+          },
+        },
+        label,
+      );
+
+    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(() => {
+        if (!current.open) return undefined;
+        const onKey = (event) => {
+          if (event.key === 'Escape') {
+            store.open = false;
+            notify();
+          }
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+      }, [current.open]);
+      if (!current.open) return null;
+      return h(
+        'div',
+        {
+          style: { position: 'fixed', inset: 0, zIndex: 940, background: 'rgba(0,0,0,.35)' },
+          onClick: () => {
+            store.open = false;
+            notify();
+          },
+          role: 'presentation',
+        },
+        h(
+          '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'),
+                  ),
+                ),
+              ),
+        ),
+      );
+    }
+
+    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 '';
+      }
+    };
+
+    const postJson = async (url, body) => {
+      const response = await fetch(url, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json', accept: 'application/json' },
+        body: JSON.stringify(body ?? {}),
+      });
+      const data = await response.json().catch(() => ({}));
+      if (!response.ok) throw new Error(data.error ?? 'HTTP ' + response.status);
+      return data;
+    };
+
+    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 [roomError, setRoomError] = useState('');
+      const [error, setError] = useState('');
+      const [actionStatus, setActionStatus] = useState('');
+      const [inviteCode, setInviteCode] = useState('');
+      const [connectHost, setConnectHost] = useState('192.168.137.1');
+      const [connectPort, setConnectPort] = useState(0);
+      const [sendText, setSendText] = useState('');
+      const [sendTo, setSendTo] = useState([]);
+      const [taskTitle, setTaskTitle] = useState('');
+      const [taskOwner, setTaskOwner] = 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/room?id=' + 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);
+              setRoomError('');
+            }
+          } catch (problem) {
+            if (!disposed) {
+              setRoomDetail(null);
+              setRoomError(String(problem.message ?? problem));
+            }
+          }
+        };
+        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 runAction = async (label, action) => {
+        setActionStatus(label + '…');
+        try {
+          await action();
+          setActionStatus(label + '成功');
+        } catch (problem) {
+          setActionStatus(label + '失败：' + String(problem.message ?? problem));
+        }
+      };
+      const sendRoomMessage = () =>
+        runAction('发送消息', async () => {
+          if (!selectedRoom) throw new Error('请先选择房间');
+          if (sendText.trim() === '') throw new Error('消息不能为空');
+          await postJson('/device-fleet/room/send', { roomId: selectedRoom, to: sendTo, text: sendText });
+          setSendText('');
+        });
+      const addRoomTask = () =>
+        runAction('添加任务', async () => {
+          if (!selectedRoom) throw new Error('请先选择房间');
+          if (taskTitle.trim() === '') throw new Error('任务标题不能为空');
+          await postJson('/device-fleet/room/task', { roomId: selectedRoom, action: 'add', title: taskTitle, owner: taskOwner });
+          setTaskTitle('');
+        });
+      const updateRoomTask = (id, status) =>
+        runAction('更新任务', async () => {
+          await postJson('/device-fleet/room/task', { roomId: selectedRoom, action: 'update', id, status });
+        });
+      const closeCurrentRoom = () =>
+        runAction('关闭房间', async () => {
+          await postJson('/device-fleet/room/close', { roomId: selectedRoom });
+          setSelectedRoom(null);
+        });
+      const removeRoomMember = (memberId) =>
+        runAction('移除成员', async () => {
+          await postJson('/device-fleet/room/member/remove', { roomId: selectedRoom, memberId });
+        });
+      const createInviteCode = () =>
+        runAction('生成邀请码', async () => {
+          const data = await postJson('/device-fleet/pair/invite');
+          setInviteCode(data.code ?? '');
+        });
+      const connectPeer = () =>
+        runAction('连接设备', async () => {
+          const port = Number(connectPort) || overview?.direct?.port || 0;
+          const data = await postJson('/device-fleet/pair/connect', { host: connectHost, port });
+          setActionStatus('已连接 ' + String(data.result?.deviceId ?? ''));
+        });
+
+      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,
+        actionStatus ? h('span', { style: { fontSize: 12, opacity: 0.7 } }, actionStatus) : 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,
+          h('div', { style: cardStyle },
+            h('div', { style: sectionTitle }, '配对与连接'),
+            h('div', { style: { display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' } },
+              smallButton('生成邀请码', () => void createInviteCode(), 'allow'),
+              inviteCode
+                ? h('button', {
+                    type: 'button',
+                    onClick: () => {
+                      try {
+                        void navigator.clipboard?.writeText(inviteCode)
+                      } catch {
+                        /* ignore */
+                      }
+                    },
+                    style: { background: 'transparent', border: 'none', color: 'var(--dsw-alias-accent, #2f6fed)', cursor: 'pointer', fontSize: 12 },
+                  }, '复制')
+                : null,
+            ),
+            inviteCode
+              ? h('pre', { style: { fontSize: 11, fontFamily: 'ui-monospace, monospace', whiteSpace: 'pre-wrap', wordBreak: 'break-all', background: 'var(--dsw-alias-bg-layer-2, #262626)', padding: 8, borderRadius: 6, maxHeight: 140, overflow: 'auto' } }, inviteCode)
+              : null,
+            h('div', { style: { display: 'flex', gap: 8, alignItems: 'center', marginTop: 10, flexWrap: 'wrap' } },
+              h('input', {
+                type: 'text',
+                value: connectHost,
+                onChange: (event) => setConnectHost(event.target.value),
+                placeholder: 'host',
+                style: { ...controlStyleWidth(180) },
+              }),
+              h('input', {
+                type: 'number',
+                value: connectPort || overview?.direct?.port || 0,
+                onChange: (event) => setConnectPort(Number(event.target.value || 0)),
+                placeholder: 'port',
+                style: { ...controlStyleWidth(110) },
+              }),
+              smallButton('连接', () => void connectPeer(), 'normal'),
+            ),
+          ),
+        );
+      } 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 ? (roomError && !roomDetail ? h('div', { style: { opacity: 0.7, fontSize: 12 } }, '房间加载失败：' + roomError) : renderRoomDetail(roomDetail, {
+            sendText,
+            setSendText,
+            sendTo,
+            setSendTo,
+            sendRoomMessage,
+            taskTitle,
+            setTaskTitle,
+            taskOwner,
+            setTaskOwner,
+            addRoomTask,
+            updateRoomTask,
+            closeCurrentRoom,
+            removeRoomMember,
+          })) : h('div', { style: { opacity: 0.65, fontSize: 12 } }, '选择一个房间查看成员、时间线与看板。')),
+        );
+      } else {
+        const approvals = overview.approvals ?? [];
+        const history = overview.approvalHistory ?? [];
+        body = h(
+          'div',
+          null,
+          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'),
+                    ),
+                  ),
+                ),
+          ),
+          h('div', { style: cardStyle },
+            h('div', { style: sectionTitle }, '审批历史（最近 ' + history.length + ' 条）'),
+            history.length === 0
+              ? h('div', { style: { opacity: 0.7, fontSize: 12 } }, '暂无历史')
+              : history.slice(0, 20).map((item) =>
+                  h('div', { key: item.id, style: { display: 'flex', gap: 8, alignItems: 'center', padding: '4px 0', fontSize: 12, borderTop: '1px solid var(--dsw-alias-border, #333)' } },
+                    pill(item.outcome, item.outcome === 'approved' ? 'ok' : 'muted'),
+                    h('span', { style: { flex: 1 } }, (item.capability || 'tool') + (item.tool ? ' / ' + item.tool : '') + ' · ' + item.fromDeviceId),
+                    h('span', { style: { opacity: 0.55 } }, fmtTime(item.resolvedAt)),
+                  ),
+                ),
+          ),
+        );
+      }
+
+      return h('div', { style: { padding: '14px 16px', height: '100%', overflow: 'auto', boxSizing: 'border-box' } }, header, body);
+    }
+
+    function renderRoomDetail(detail, ctl) {
+      if (!detail) return h('div', { style: { opacity: 0.65, fontSize: 12 } }, '加载房间…');
+      const memberIds = detail.members.map((member) => member.memberId);
+      const recipientIds = Array.isArray(ctl.sendTo) && ctl.sendTo.length > 0 ? ctl.sendTo : memberIds.filter((id) => id.startsWith('host:'));
+      return h(
+        'div',
+        null,
+        h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 } },
+          h('div', { style: { ...sectionTitle, margin: 0, flex: 1 } }, '房间 ' + detail.roomId.slice(-8)),
+          smallButton('关闭房间', () => void ctl.closeCurrentRoom(), 'deny'),
+        ),
+        h('div', { style: cardStyle },
+          h('div', { style: sectionTitle }, '成员'),
+          ...detail.members.map((member) =>
+            h('div', { key: member.memberId, style: { display: 'flex', alignItems: 'center', gap: 8, padding: '3px 0', fontSize: 12 } },
+              pill(member.role, member.role === 'host' ? 'ok' : 'muted'),
+              h('span', { style: { flex: 1 } }, member.name + ' · ' + member.memberId),
+              member.role === 'host' ? null : smallButton('移除', () => void ctl.removeRoomMember(member.memberId), 'deny'),
+            ),
+          ),
+        ),
+        h('div', { style: cardStyle },
+          h('div', { style: sectionTitle }, '发消息（以用户身份）'),
+          h('div', { style: { display: 'flex', flexWrap: 'wrap', gap: '4px 14px', marginBottom: 6 } },
+            ...detail.members.map((member) =>
+              h('label', { key: member.memberId, style: { display: 'flex', alignItems: 'center', gap: 5, fontSize: 12 } },
+                h('input', {
+                  type: 'checkbox',
+                  checked: recipientIds.includes(member.memberId),
+                  onChange: (event) => {
+                    ctl.setSendTo((current) => {
+                      const base = current.length > 0 ? current : recipientIds
+                      return event.target.checked ? [...new Set([...base, member.memberId])] : base.filter((id) => id !== member.memberId)
+                    })
+                  },
+                }),
+                member.name,
+              ),
+            ),
+          ),
+          h('textarea', {
+            value: ctl.sendText,
+            onChange: (event) => ctl.setSendText(event.target.value),
+            rows: 2,
+            placeholder: '发送给房间成员（默认为 host）',
+            style: { width: '100%', boxSizing: 'border-box', padding: '6px 8px', borderRadius: 6, border: '1px solid var(--dsw-alias-border-l1, #333)', background: 'var(--dsw-alias-bg-layer-2, #262626)', color: 'inherit', fontSize: 12, resize: 'vertical', fontFamily: 'inherit' },
+          }),
+          h('div', { style: { display: 'flex', gap: 8, alignItems: 'center', marginTop: 6 } },
+            h('span', { style: { flex: 1 } }),
+            smallButton('发送', () => void ctl.sendRoomMessage(), 'allow'),
+          ),
+        ),
+        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: { display: 'flex', alignItems: 'center', gap: 8, padding: '4px 0', fontSize: 12 } },
+                  pill(task.status, task.status === 'done' ? 'ok' : 'muted'),
+                  h('span', { style: { flex: 1 } }, task.title + ' · owner ' + task.owner + (task.dependsOn.length ? ' · deps ' + task.dependsOn.length : '')),
+                  h('select', {
+                    value: task.status,
+                    onChange: (event) => void ctl.updateRoomTask(task.id, event.target.value),
+                    style: { height: 24, borderRadius: 5, border: '1px solid var(--dsw-alias-border-l1, #333)', background: 'var(--dsw-alias-bg-layer-2, #262626)', color: 'inherit', fontSize: 11 },
+                  },
+                    ...['pending', 'running', 'done', 'blocked'].map((status) => h('option', { key: status, value: status }, status)),
+                  ),
+                ),
+              ),
+          h('div', { style: { display: 'flex', gap: 6, alignItems: 'center', marginTop: 8, flexWrap: 'wrap' } },
+            h('input', {
+              type: 'text',
+              value: ctl.taskTitle,
+              onChange: (event) => ctl.setTaskTitle(event.target.value),
+              placeholder: '新任务标题',
+              style: { ...controlStyleWidth(180), height: 26, fontSize: 12 },
+            }),
+            h('select', {
+              value: ctl.taskOwner,
+              onChange: (event) => ctl.setTaskOwner(event.target.value),
+              style: { ...controlStyleWidth(180), height: 26, fontSize: 12 },
+            },
+              h('option', { value: '' }, '选择 owner'),
+              ...detail.members.map((member) => h('option', { key: member.memberId, value: member.memberId }, member.name)),
+            ),
+            smallButton('添加任务', () => void ctl.addRoomTask(), 'allow'),
+          ),
+        ),
+        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),
+                ),
+              ),
+        ),
+      );
+    }
+
+    // ---- DSH-styled configuration page -------------------------------------
+    const CONTROL_WIDTH = 260
+    const rowStyle = {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 16,
+      minHeight: 42,
+      padding: '5px 0',
+      borderBottom: '1px solid var(--dsw-alias-border-l1, #333)',
+    }
+    const rowLabelStyle = { flex: 1, fontSize: 13, color: 'var(--dsw-alias-label-primary, #e8e8e8)' }
+    const controlStyle = {
+      width: CONTROL_WIDTH,
+      boxSizing: 'border-box',
+      height: 30,
+      padding: '3px 8px',
+      borderRadius: 6,
+      border: '1px solid var(--dsw-alias-border-l1, #333)',
+      background: 'var(--dsw-alias-bg-layer-2, #262626)',
+      color: 'var(--dsw-alias-label-primary, #e8e8e8)',
+      fontSize: 13,
+      outline: 'none',
+    }
+    const controlStyleWidth = (width) => ({ ...controlStyle, width })
+    const selectStyle = {
+      ...controlStyle,
+      appearance: 'none',
+      WebkitAppearance: 'none',
+      paddingRight: 24,
+      cursor: 'pointer',
+    }
+    const textareaStyle = {
+      ...controlStyle,
+      width: '100%',
+      height: 'auto',
+      minHeight: 64,
+      resize: 'vertical',
+      padding: '6px 8px',
+      lineHeight: 1.5,
+      fontFamily: 'ui-monospace, monospace',
+    }
+    const sectionStyle = {
+      margin: '22px 0 4px',
+      fontSize: 13,
+      fontWeight: 600,
+      color: 'var(--dsw-alias-label-primary, #e8e8e8)',
+    }
+
+    function Row({ label, children, wide = false }) {
+      if (wide) {
+        return h('div', { style: { ...rowStyle, flexDirection: 'column', alignItems: 'stretch', gap: 6, padding: '8px 0' } },
+          h('div', { style: rowLabelStyle }, label),
+          h('div', { style: { width: '100%' } }, children),
+        )
+      }
+      return h('div', { style: rowStyle },
+        h('div', { style: rowLabelStyle }, label),
+        h('div', { style: { width: CONTROL_WIDTH } }, children),
+      )
+    }
+
+    function SelectControl({ value, options, onChange }) {
+      return h('select', {
+        value: value ?? '',
+        onChange: (event) => onChange(event.target.value),
+        style: selectStyle,
+      },
+        ...(options ?? []).map((option) => {
+          const entry = typeof option === 'string' ? { value: option, label: option } : option
+          return h('option', { key: entry.value, value: entry.value }, entry.label)
+        }),
+      )
+    }
+
+    function TextControl({ value, onChange, placeholder }) {
+      return h('input', {
+        type: 'text',
+        value: value ?? '',
+        placeholder: placeholder ?? '',
+        onChange: (event) => onChange(event.target.value),
+        style: controlStyle,
+      })
+    }
+
+    function NumberControl({ value, onChange }) {
+      return h('input', {
+        type: 'number',
+        value: value ?? 0,
+        onChange: (event) => onChange(Number(event.target.value || 0)),
+        style: controlStyle,
+      })
+    }
+
+    function ToggleControl({ value, onChange }) {
+      return h(SelectControl, {
+        value: value ? 'on' : 'off',
+        options: [{ value: 'on', label: '开启' }, { value: 'off', label: '关闭' }],
+        onChange: (next) => onChange(next === 'on'),
+      })
+    }
+
+    const CAPABILITY_ROWS = [
+      ['capRead', '读取文件'],
+      ['capList', '列目录'],
+      ['capGrep', '搜索内容'],
+      ['capFetch', '获取文件'],
+      ['capRun', '执行命令'],
+      ['capTool', '原始工具（遵循 DSH 审批）'],
+      ['capDelegate', '委派任务'],
+    ]
+
+    function configToDraft(config = {}, options = {}) {
+      const execution = config.execution ?? {}
+      const policy = config.policy ?? {}
+      const approvals = config.approvals ?? {}
+      const direct = config.direct ?? {}
+      const relay = config.relay ?? null
+      const cwd = execution.cwd ?? ''
+      const cwdInfo = options.cwd ?? {}
+      let cwdMode = 'custom'
+      if (cwd === '') cwdMode = 'default'
+      else if (cwdInfo.workspace && cwd === cwdInfo.workspace) cwdMode = 'workspace'
+      else if (cwdInfo.dshHome && cwd === cwdInfo.dshHome) cwdMode = 'dshHome'
+      else if (cwdInfo.defaultDirectory && cwd === cwdInfo.defaultDirectory) cwdMode = 'default'
+      return {
+        deviceName: config.deviceName ?? '',
+        directHost: direct.host ?? '0.0.0.0',
+        directPort: direct.port ?? 0,
+        discovery: config.discovery !== false,
+        relayMode: relay && (relay.host || relay.port) ? 'custom' : 'off',
+        relayHost: relay?.host ?? '',
+        relayPort: relay?.port ?? 0,
+        relayDataPort: relay?.dataPort ?? 0,
+        cwdMode,
+        customCwd: cwdMode === 'custom' ? cwd : '',
+        execPreset: execution.agentPreset ?? '',
+        execShellTool: execution.shellTool ?? '',
+        execApprovalTimeoutMs: execution.approvalTimeoutMs ?? 60000,
+        execDelegateTimeoutMs: execution.delegateTimeoutMs ?? 180000,
+        execSubagentProvider: execution.subagentProvider ?? 'spawn',
+        rootsText: (policy.allowedRoots ?? []).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,
+      }
+    }
+
+    function draftToPatch(draft, options = {}) {
+      const cwdInfo = options.cwd ?? {}
+      let cwd = ''
+      if (draft.cwdMode === 'workspace') cwd = cwdInfo.workspace ?? ''
+      else if (draft.cwdMode === 'dshHome') cwd = cwdInfo.dshHome ?? ''
+      else if (draft.cwdMode === 'default') cwd = cwdInfo.defaultDirectory || cwdInfo.workspace || ''
+      else if (draft.cwdMode === 'custom') cwd = draft.customCwd ?? ''
+      return {
+        deviceName: draft.deviceName,
+        direct: { host: draft.directHost, port: draft.directPort },
+        discovery: draft.discovery,
+        relay: draft.relayMode === 'custom'
+          ? { host: draft.relayHost, port: draft.relayPort, dataPort: draft.relayDataPort }
+          : null,
+        execution: {
+          cwd,
+          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),
+          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 [options, setOptions] = useState({})
+      const [status, setStatus] = useState('')
+      const [busy, setBusy] = useState(false)
+
+      useEffect(() => {
+        let disposed = false
+        const load = async () => {
+          try {
+            const [configResponse, optionsResponse] = await Promise.all([
+              fetch('/device-fleet/config', { headers: { accept: 'application/json' } }),
+              fetch('/device-fleet/options', { headers: { accept: 'application/json' } }),
+            ])
+            const configData = await configResponse.json()
+            const optionsData = optionsResponse.ok ? await optionsResponse.json() : {}
+            if (disposed) return
+            setOptions(optionsData ?? {})
+            setDraft(configToDraft(configData.config ?? {}, optionsData ?? {}))
+          } catch (problem) {
+            if (!disposed) setStatus('加载失败')
+          }
+        }
+        void load()
+        return () => { disposed = true }
+      }, [])
+
+      if (!draft) return h('div', { style: { padding: 8, color: 'var(--dsw-alias-label-secondary, #999)' } }, 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, options)),
+          })
+          const data = await response.json()
+          if (!response.ok) throw new Error(data.error ?? 'HTTP ' + response.status)
+          setDraft(configToDraft(data.config ?? {}, options))
+          setStatus('已保存')
+        } catch (problem) {
+          setStatus('保存失败：' + String(problem.message ?? problem))
+        } finally {
+          setBusy(false)
+        }
+      }
+
+      const cwdOptions = [
+        { value: 'workspace', label: 'Device Fleet 工作区' },
+        { value: 'default', label: 'DSH 默认目录' },
+        { value: 'dshHome', label: 'DSH 主目录' },
+        { value: 'custom', label: '自定义路径' },
+      ]
+      const presetOptions = [{ value: '', label: '默认' }, ...((options.presets ?? []).map((preset) => ({ value: preset.id, label: preset.label })))]
+      const shellOptions = (options.shells ?? ['pwsh']).map((shell) => ({ value: shell, label: shell }))
+      const providerOptions = (options.subagentProviders ?? ['spawn']).map((provider) => ({ value: provider, label: provider }))
+      const hostOptions = (options.addresses ?? ['0.0.0.0']).map((address) => ({ value: address, label: address }))
+      const modeOptions = [{ value: 'auto', label: '自动' }, { value: 'ask', label: '询问' }, { value: 'deny', label: '拒绝' }]
+
+      return h('div', { style: { maxWidth: 760, padding: '4px 2px 28px', color: 'var(--dsw-alias-label-primary, #e8e8e8)' } },
+        h('div', { style: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 4 } },
+          h('div', { style: { fontSize: 15, fontWeight: 600 } }, 'Device Fleet'),
+          h('span', { style: { flex: 1 } }),
+          status ? h('span', { style: { fontSize: 12, color: 'var(--dsw-alias-label-secondary, #999)' } }, status) : null,
+          h('button', {
+            type: 'button',
+            disabled: busy,
+            onClick: () => void save(),
+            style: {
+              height: 30,
+              padding: '0 14px',
+              borderRadius: 6,
+              border: '1px solid var(--dsw-alias-brand-primary, #2f6fed)',
+              background: '#2f6fed',
+              color: '#fff',
+              fontSize: 13,
+              cursor: busy ? 'default' : 'pointer',
+              opacity: busy ? 0.6 : 1,
+            },
+          }, busy ? '保存中' : '保存'),
+        ),
+        h('div', { style: sectionStyle }, '设备'),
+        h(Row, { label: '名称' },
+          h(TextControl, { value: draft.deviceName, onChange: (value) => set('deviceName', value) }),
+        ),
+        h('div', { style: sectionStyle }, '网络'),
+        h(Row, { label: '直连地址' },
+          h(SelectControl, { value: draft.directHost, options: hostOptions, onChange: (value) => set('directHost', value) }),
+        ),
+        h(Row, { label: '直连端口' },
+          h(NumberControl, { value: draft.directPort, onChange: (value) => set('directPort', value) }),
+        ),
+        h(Row, { label: '局域网发现' },
+          h(ToggleControl, { value: draft.discovery, onChange: (value) => set('discovery', value) }),
+        ),
+        h(Row, { label: 'Relay' },
+          h(SelectControl, {
+            value: draft.relayMode,
+            options: [{ value: 'off', label: '不使用' }, { value: 'custom', label: '自定义' }],
+            onChange: (value) => set('relayMode', value),
+          }),
+        ),
+        draft.relayMode === 'custom' ? h(Row, { label: 'Relay 地址' },
+          h(TextControl, { value: draft.relayHost, onChange: (value) => set('relayHost', value) }),
+        ) : null,
+        draft.relayMode === 'custom' ? h(Row, { label: 'Relay 端口' },
+          h(NumberControl, { value: draft.relayPort, onChange: (value) => set('relayPort', value) }),
+        ) : null,
+        draft.relayMode === 'custom' ? h(Row, { label: 'Relay 数据端口' },
+          h(NumberControl, { value: draft.relayDataPort, onChange: (value) => set('relayDataPort', value) }),
+        ) : null,
+        h('div', { style: sectionStyle }, '执行上下文'),
+        h(Row, { label: '工作目录' },
+          h(SelectControl, { value: draft.cwdMode, options: cwdOptions, onChange: (value) => set('cwdMode', value) }),
+        ),
+        draft.cwdMode === 'custom' ? h(Row, { label: '路径' },
+          h(TextControl, { value: draft.customCwd, onChange: (value) => set('customCwd', value) }),
+        ) : null,
+        h(Row, { label: 'Agent Preset' },
+          h(SelectControl, { value: draft.execPreset, options: presetOptions, onChange: (value) => set('execPreset', value) }),
+        ),
+        h(Row, { label: 'Shell' },
+          h(SelectControl, { value: draft.execShellTool, options: shellOptions, onChange: (value) => set('execShellTool', value) }),
+        ),
+        h(Row, { label: '委派 Provider' },
+          h(SelectControl, { value: draft.execSubagentProvider, options: providerOptions, onChange: (value) => set('execSubagentProvider', value) }),
+        ),
+        h(Row, { label: '审批超时 (ms)' },
+          h(NumberControl, { value: draft.execApprovalTimeoutMs, onChange: (value) => set('execApprovalTimeoutMs', value) }),
+        ),
+        h(Row, { label: '委派超时 (ms)' },
+          h(NumberControl, { value: draft.execDelegateTimeoutMs, onChange: (value) => set('execDelegateTimeoutMs', value) }),
+        ),
+        h('div', { style: sectionStyle }, '远端权限'),
+        h(Row, { label: '允许的根目录', wide: true },
+          h('textarea', {
+            value: draft.rootsText,
+            onChange: (event) => set('rootsText', event.target.value),
+            rows: 3,
+            style: textareaStyle,
+          }),
+        ),
+        ...CAPABILITY_ROWS.map(([key, label]) =>
+          h(Row, { key, label },
+            h(SelectControl, { value: draft[key], options: modeOptions, onChange: (value) => set(key, value) }),
+          ),
+        ),
+        h(Row, { label: '授权有效期 (ms)' },
+          h(NumberControl, { value: draft.policyApprovalTtlMs, onChange: (value) => set('policyApprovalTtlMs', value) }),
+        ),
+        h('div', { style: sectionStyle }, '审批与提示'),
+        h(Row, { label: '审批超时 (ms)' },
+          h(NumberControl, { value: draft.approvalsTtlMs, onChange: (value) => set('approvalsTtlMs', value) }),
+        ),
+        h(Row, { label: '最大排队数' },
+          h(NumberControl, { value: draft.approvalsMaxPending, onChange: (value) => set('approvalsMaxPending', value) }),
+        ),
+        h(Row, { label: '自动批准（测试）' },
+          h(ToggleControl, { value: draft.autoApproveAsk, onChange: (value) => set('autoApproveAsk', value) }),
+        ),
+        h(Row, { label: 'Fleet 系统提示' },
+          h(ToggleControl, { value: draft.promptSection, onChange: (value) => set('promptSection', value) }),
+        ),
+        h(Row, { label: '审批模拟（测试）' },
+          h(ToggleControl, { value: draft.simulation, onChange: (value) => set('simulation', value) }),
+        ),
+      )
+    }
+
+    // Room is a normal Session with participants. This dock keeps the member
+    // strip inside the conversation instead of a separate dashboard.
+    function RoomDock({ sessionId }) {
+      const [room, setRoom] = useState(null);
+      const [missing, setMissing] = useState(false);
+      const [status, setStatus] = useState('');
+
+      const load = async () => {
+        if (!sessionId) return;
+        try {
+          const response = await fetch('/device-fleet/room?id=' + encodeURIComponent(sessionId), { headers: { accept: 'application/json' } });
+          if (response.status === 404) {
+            setRoom(null);
+            setMissing(true);
+            return;
+          }
+          if (!response.ok) throw new Error('HTTP ' + response.status);
+          const data = await response.json();
+          setRoom(data.room ?? null);
+          setMissing(false);
+        } catch {
+          setRoom(null);
+        }
+      };
+
+      useEffect(() => {
+        void load();
+        const timer = setInterval(load, 4000);
+        return () => clearInterval(timer);
+      }, [sessionId]);
+
+      if (!sessionId) return null;
+      const upgrade = async () => {
+        setStatus('升级中…');
+        try {
+          await postJson('/device-fleet/room/upgrade', { sessionId });
+          setStatus('');
+          await load();
+        } catch (problem) {
+          setStatus('升级失败：' + String(problem.message ?? problem));
+        }
+      };
+
+      if (missing) {
+        return h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, opacity: 0.75, padding: '2px 2px 0' } },
+          h('span', null, '普通会话'),
+          status ? h('span', null, status) : null,
+          smallButton('升级为 Room', () => void upgrade(), 'normal'),
+        );
+      }
+      if (!room) return null;
+      const names = room.members.filter((member) => member.role !== 'host').map((member) => member.name);
+      return h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, opacity: 0.8, padding: '2px 2px 0', flexWrap: 'wrap' } },
+        pill('Room', 'ok'),
+        h('span', null, room.members.length + ' 名成员'),
+        names.length > 0 ? h('span', null, '· ' + names.join(', ')) : h('span', null, '· 仅 host'),
+        h('span', { style: { flex: 1 } }),
+        h('span', { style: { opacity: 0.55 } }, '房间消息会同步到参与者'),
+      );
+    }
+
+    return {
+      inject: ['slots'],
+      apply(ctx) {
+        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);
+        // 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);
+        // Session-native Room: member strip below the composer; the normal Chat
+        // stream carries the conversation.
+        ctx.slots.inject('conversation.composer.dock', () =>
+          ctx.slots.register({ name: 'conversation.composer.dock', id: 'fleet-room', order: 10 }, RoomDock),
+        );
+        // 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),
+        );
+      },
+    };
+  },
+});