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

package/client.js

@@ -273,6 +273,7 @@ window.__ModuleLoader__.load({
       const [rooms, setRooms] = useState([]);
       const [selectedRoom, setSelectedRoom] = useState(null);
       const [roomDetail, setRoomDetail] = useState(null);
+      const [roomError, setRoomError] = useState('');
       const [error, setError] = useState('');
 
       useEffect(() => {
@@ -307,12 +308,18 @@ window.__ModuleLoader__.load({
         let disposed = false;
         const load = async () => {
           try {
-            const response = await fetch('/device-fleet/rooms/' + encodeURIComponent(selectedRoom), { headers: { accept: 'application/json' } });
+            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);
-          } catch {
-            if (!disposed) setRoomDetail(null);
+            if (!disposed) {
+              setRoomDetail(data.room ?? null);
+              setRoomError('');
+            }
+          } catch (problem) {
+            if (!disposed) {
+              setRoomDetail(null);
+              setRoomError(String(problem.message ?? problem));
+            }
           }
         };
         load();
@@ -434,7 +441,7 @@ window.__ModuleLoader__.load({
                   ),
                 ),
           ),
-          h('div', { style: { flex: '2 1 420px', minWidth: 320 } }, selectedRoom ? renderRoomDetail(roomDetail) : h('div', { style: { opacity: 0.65, fontSize: 12 } }, '选择一个房间查看成员、时间线与看板。')),
+          h('div', { style: { flex: '2 1 420px', minWidth: 320 } }, selectedRoom ? (roomError && !roomDetail ? h('div', { style: { opacity: 0.7, fontSize: 12 } }, '房间加载失败：' + roomError) : renderRoomDetail(roomDetail)) : h('div', { style: { opacity: 0.65, fontSize: 12 } }, '选择一个房间查看成员、时间线与看板。')),
         );
       } else {
         const approvals = overview.approvals ?? [];
@@ -501,66 +508,147 @@ window.__ModuleLoader__.load({
       );
     }
 
-    const inputStyle = {
-      width: '100%',
+    // ---- 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',
-      padding: '5px 8px',
+      height: 30,
+      padding: '3px 8px',
       borderRadius: 6,
-      border: '1px solid var(--dsw-alias-border, #3a3a3a)',
-      background: 'transparent',
-      color: 'inherit',
+      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,
-    };
-    const labelStyle = { display: 'block', margin: '4px 0 10px' };
-    const labelTextStyle = { fontSize: 12, opacity: 0.72, marginBottom: 3 };
+      outline: 'none',
+    }
+    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 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 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 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 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 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 TextControl({ value, onChange, placeholder }) {
+      return h('input', {
+        type: 'text',
+        value: value ?? '',
+        placeholder: placeholder ?? '',
+        onChange: (event) => onChange(event.target.value),
+        style: controlStyle,
+      })
     }
 
-    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 NumberControl({ value, onChange }) {
+      return h('input', {
+        type: 'number',
+        value: value ?? 0,
+        onChange: (event) => onChange(Number(event.target.value || 0)),
+        style: controlStyle,
+      })
     }
 
-    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 ToggleControl({ value, onChange }) {
+      return h(SelectControl, {
+        value: value ? 'on' : 'off',
+        options: [{ value: 'on', label: '开启' }, { value: 'off', label: '关闭' }],
+        onChange: (next) => onChange(next === 'on'),
+      })
     }
 
-    function configToDraft(config = {}) {
-      const execution = config.execution ?? {};
-      const policy = config.policy ?? {};
-      const approvals = config.approvals ?? {};
-      const direct = config.direct ?? {};
-      const relay = config.relay ?? {};
+    const CAPABILITY_ROWS = [
+      ['capRead', '读取文件'],
+      ['capList', '列目录'],
+      ['capGrep', '搜索内容'],
+      ['capFetch', '获取文件'],
+      ['capRun', '执行命令'],
+      ['capTool', '调用原始工具'],
+      ['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,
-        relayHost: relay.host ?? '',
-        relayPort: relay.port ?? 0,
-        relayDataPort: relay.dataPort ?? 0,
-        execCwd: execution.cwd ?? '',
+        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'),
-        toolsText: (policy.allowedTools ?? []).join('\n'),
+        toolsList: Array.isArray(policy.allowedTools) ? [...policy.allowedTools] : [],
         capRead: policy.capabilities?.read ?? 'auto',
         capList: policy.capabilities?.list ?? 'auto',
         capGrep: policy.capabilities?.grep ?? 'auto',
@@ -574,20 +662,25 @@ window.__ModuleLoader__.load({
         autoApproveAsk: config.autoApproveAsk === true,
         promptSection: config.promptSection !== false,
         simulation: approvals.simulation === true,
-        dataDir: config.dataDir ?? '',
-      };
+      }
     }
 
-    function draftToPatch(draft) {
+    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.relayHost && draft.relayPort > 0
+        relay: draft.relayMode === 'custom'
           ? { host: draft.relayHost, port: draft.relayPort, dataPort: draft.relayDataPort }
           : null,
         execution: {
-          cwd: draft.execCwd,
+          cwd,
           agentPreset: draft.execPreset,
           shellTool: draft.execShellTool,
           approvalTimeoutMs: draft.execApprovalTimeoutMs,
@@ -596,7 +689,7 @@ window.__ModuleLoader__.load({
         },
         policy: {
           allowedRoots: draft.rootsText.split('\n').map((item) => item.trim()).filter(Boolean),
-          allowedTools: draft.toolsText.split('\n').map((item) => item.trim()).filter(Boolean),
+          allowedTools: Array.isArray(draft.toolsList) ? draft.toolsList : [],
           capabilities: {
             read: draft.capRead,
             list: draft.capList,
@@ -615,158 +708,208 @@ window.__ModuleLoader__.load({
         },
         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));
-        }
-      };
+      const [draft, setDraft] = useState(null)
+      const [options, setOptions] = useState({})
+      const [status, setStatus] = useState('')
+      const [busy, setBusy] = useState(false)
 
       useEffect(() => {
-        void load();
-      }, []);
+        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, opacity: 0.7 } }, status || '加载中…');
+      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 set = (key, value) => setDraft((current) => ({ ...current, [key]: value }))
       const save = async () => {
-        setBusy(true);
-        setStatus('');
+        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）');
+            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));
+          setStatus('保存失败：' + String(problem.message ?? problem))
         } finally {
-          setBusy(false);
+          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 配置'),
+      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, opacity: 0.8 } }, status) : null,
+          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: {
-              padding: '6px 14px',
-              borderRadius: 7,
-              border: '1px solid var(--dsw-alias-accent, #2f6fed)',
-              background: 'var(--dsw-alias-accent, #2f6fed)',
+              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 ? '保存中…' : '保存并立即生效'),
+          }, 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('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,
+          }),
+        ),
+        h(Row, { label: '免审批即用的工具', wide: true },
+          h('div', {
+            style: {
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: '6px 16px',
+              maxHeight: 168,
+              overflow: 'auto',
+              padding: '6px 8px',
+              border: '1px solid var(--dsw-alias-border-l1, #333)',
+              borderRadius: 6,
+              background: 'var(--dsw-alias-bg-layer-2, #262626)',
+            },
+          },
+            ...(options.tools ?? []).map((name) =>
+              h('label', { key: name, style: { display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--dsw-alias-label-primary, #e8e8e8)' } },
+                h('input', {
+                  type: 'checkbox',
+                  checked: Array.isArray(draft.toolsList) && draft.toolsList.includes(name),
+                  onChange: (event) => {
+                    const current = Array.isArray(draft.toolsList) ? draft.toolsList : []
+                    set('toolsList', event.target.checked ? [...current, name] : current.filter((item) => item !== name))
+                  },
+                }),
+                name,
               ),
             ),
-            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: () => {} }),
-          )),
-      );
+          ),
+        ),
+        ...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) }),
+        ),
+      )
     }
 
     return {

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.13（稳定化）
+## 0.1.0-dev.15（稳定化）
 
 - 直连端口可固定（profile `direct.port`），插件重载不再换端口；
 - 连接断开后自动重试已知地址（不再只在启动时试一次）；
 - `fleet_connect` 手动地址会持久化到 `peer-hints.json`，重启后继续回连；
 - 新增 `fleet_delegate`（dev.5）：目标设备用 `SubagentProvider` + `delivery:'caller'` 跑 agent 并返回最终结果。
-## 0.1.0-dev.13（审批收件箱，逻辑层）
+## 0.1.0-dev.15（审批收件箱，逻辑层）
 
 - 新增 `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.13（Room 逻辑层，本机模拟）
+## 0.1.0-dev.15（Room 逻辑层，本机模拟）
 
 - `RoomService`：当前会话升级为 Room Host；本地模拟参与者（真实 DSH session/agent）；
 - 寻址消息：`room_send` 只唤醒被点名成员，Host 会话写权威 `room/message` 事件；
@@ -59,15 +59,29 @@ 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.13（审批面板 UI，第一版）
+## 0.1.0-dev.15（审批面板 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 路由注册。
-## 0.1.0-dev.13（审批入口不遮挡）
+## 0.1.0-dev.15（审批入口不遮挡）
 
 - 触发按钮从右下角浮动改为 `sidebar.footer.action`（设置旁边），不再遮挡任务列表/内容面板；
 - 审批 inbox 改为点击后居中的模态对话框（带遮罩，Esc/点遮罩关闭）；
 - 轮询在 Client apply 中启动并由 ctx.effect 清理；待审批数量作为按钮徽标；
-- 已实测：面板点击「允许」后 Host `fleet_approvals` 清空。
+- 已实测：面板点击「允许」后 Host `fleet_approvals` 清空。
+## 0.1.0-dev.15（Phase B：运行时配置 + 配置页）
+
+- `RuntimeConfig`：profile patch 为 base，UI 修改写入 `$DSH_HOME/device-fleet/config-overrides.json`，apply 时合并并持久化；
+- 保存即生效：policy/execution/approvals/deviceName/promptSection/autoApproveAsk 直接更新运行时对象；direct/discovery/relay 通过 `FleetNode.reconfigure()` 原地重启网络监听（不重启插件/DSH）；`dataDir` 只读；
+- Host：`GET /device-fleet/config`、`POST /device-fleet/config`（校验/清洗后应用）；
+- Client：注册 `plugins.row.config`（key `dsh-device-fleet#device-fleet`）与 `plugins.bundle.config`（key `dsh-device-fleet`），配置页含设备/网络、执行上下文、Tool Policy、审批与提示四组表单；
+- 单测 18/18、网络 9/9。
+## 0.1.0-dev.15（配置页 DSH 化改版）
+
+- Host 新增 `GET /device-fleet/options`：本机地址、可用 preset 列表、shell 工具、subagent providers、工作目录候选；
+- 配置保存前会 ensure 工作目录存在（Device Fleet 工作区自动创建）；
+- 配置页重做：行式布局（label 左/控件右）、DSH token 配色、分组标题、去掉多余说明文字与 dataDir 展示；
+- 下拉化：直连地址、局域网发现、Relay 模式、工作目录（工作区/默认/DSH 主目录/自定义）、Agent Preset、Shell、委派 Provider、7 项能力权限、开关项；
+- 仍保留文本输入：设备名称、端口、超时、根目录/工具列表、自定义工作目录与 Relay 地址。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-device-fleet",
-  "version": "0.1.0-dev.14",
+  "version": "0.1.0-dev.16",
   "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",

package/src/host/config-web.js

@@ -1,5 +1,5 @@
-// Runtime config HTTP surface (dev.14): read the effective config and apply a
-// patch live. The UI posts here; no plugin or DSH restart is involved.
+// Runtime config HTTP surface (dev.15): read effective config, list UI options,
+// and apply a patch live. The UI posts here; no plugin or DSH restart is involved.
 const MAX_BODY_BYTES = 256 * 1024
 
 function json(res, status, value) {
@@ -25,9 +25,31 @@ async function readJsonBody(req) {
   }
 }
 
-export function registerConfigRoutes({ webServer, runtime, logger = null }) {
+/**
+ * @param {object} options
+ * @param {object} options.webServer ctx.webServer
+ * @param {object} options.runtime RuntimeConfig
+ * @param {() => Promise<object>|object} [options.getOptions] UI option catalog (presets, shells, paths)
+ * @param {(patch: object) => Promise<object>|object} [options.preparePatch] side effects before applying (e.g. mkdir)
+ */
+export function registerConfigRoutes({ webServer, runtime, getOptions = null, preparePatch = null, logger = null }) {
   if (!webServer?.register || !runtime) return () => {}
   const disposers = []
+  disposers.push(
+    webServer.register({
+      kind: 'exact',
+      path: '/device-fleet/options',
+      handler: async (req, res) => {
+        if (req.method !== 'GET') return json(res, 405, { error: 'method not allowed' })
+        try {
+          json(res, 200, (await getOptions?.()) ?? {})
+        } catch (error) {
+          logger?.warn?.(`[device-fleet] options failed: ${String(error?.message ?? error)}`)
+          json(res, 500, { error: 'internal error' })
+        }
+      },
+    }),
+  )
   disposers.push(
     webServer.register({
       kind: 'exact',
@@ -45,7 +67,8 @@ export function registerConfigRoutes({ webServer, runtime, logger = null }) {
         try {
           const body = await readJsonBody(req)
           const patch = body?.patch ?? body
-          const config = await runtime.update(patch)
+          const prepared = preparePatch ? await preparePatch(patch) : patch
+          const config = await runtime.update(prepared ?? patch)
           json(res, 200, { ok: true, config, appliedAt: Date.now() })
         } catch (error) {
           const status = ['bad-request', 'bad-json', 'body-too-large', 'readonly'].includes(error?.code) ? 400 : 500

package/src/host/ui-web.js

@@ -57,12 +57,16 @@ export function registerUiRoutes({ webServer, inbox, rooms, getOverview, logger
   )
   disposers.push(
     webServer.register({
-      kind: 'prefix',
-      path: '/device-fleet/rooms/',
+      kind: 'exact',
+      path: '/device-fleet/room',
       handler: async (req, res) => {
         if (req.method !== 'GET') return json(res, 405, { error: 'method not allowed' })
-        const path = pathOf(req)
-        const roomId = decodeURIComponent(path.slice('/device-fleet/rooms/'.length))
+        let roomId = ''
+        try {
+          roomId = new URL(req.url ?? '/', 'http://local').searchParams.get('id') ?? ''
+        } catch {
+          roomId = ''
+        }
         if (roomId === '') return json(res, 400, { error: 'room id is required' })
         try {
           json(res, 200, { room: rooms.detail(roomId, { limit: 100 }) })

package/src/plugin/index.js

@@ -4,7 +4,7 @@
 // the six `fleet_*` tools, and the two adoption mechanisms that are cheap to
 // land now (a prompt section and a first-use manual + orchestration nudge).
 // Room, Room Board, delegation and the UI land in later steps.
-import { readFileSync } from 'node:fs'
+import { mkdirSync, readFileSync } from 'node:fs'
 import { networkInterfaces } from 'node:os'
 import { join } from 'node:path'
 import { fileURLToPath } from 'node:url'
@@ -175,10 +175,12 @@ export function apply(ctx, profileConfig) {
     capabilities: CAPABILITIES,
   })
 
-  let policy = new ToolPolicy(config.policy)
+  const policy = new ToolPolicy(config.policy)
   const sessionController = service('sessionController')
   const fs = service('fs')
   const subagents = service('subagents')
+  const agentPresets = service('agentPresets')
+  const workingDirectory = service('workingDirectory')
   const inbox = new ApprovalInbox({
     ttlMs: config.approvals?.ttlMs ?? 60_000,
     maxPending: config.approvals?.maxPending ?? 50,
@@ -218,9 +220,75 @@ export function apply(ctx, profileConfig) {
   // Client approval panel data plane (dev.9). Optional service: host-only
   // deployments simply do not expose the panel routes.
   const webServer = service('webServer')
+  const workspaceDir = join(state.dataDir, 'workspace')
+  const getOptions = async () => {
+    const addresses = new Set(['0.0.0.0', '127.0.0.1', runtime.current.direct?.host ?? ''])
+    for (const entries of Object.values(networkInterfaces())) {
+      for (const entry of entries ?? []) {
+        if (entry.family === 'IPv4' && !entry.internal) addresses.add(entry.address)
+      }
+    }
+    addresses.delete('')
+    let toolNames = []
+    try {
+      toolNames = (ctx.tools.definitions?.() ?? []).map((definition) => definition.name)
+    } catch {
+      toolNames = []
+    }
+    const shellCandidates = ['pwsh', 'bash', 'cmd', 'sh']
+    let shells = shellCandidates.filter((name) => toolNames.includes(name))
+    if (shells.length === 0) shells = [process.platform === 'win32' ? 'pwsh' : 'bash']
+    let presets = []
+    try {
+      presets = (await agentPresets?.list?.()) ?? []
+    } catch {
+      presets = []
+    }
+    return {
+      platform: process.platform,
+      addresses: [...addresses],
+      shells,
+      subagentProviders: (() => {
+        try {
+          return subagents?.list?.() ?? ['spawn']
+        } catch {
+          return ['spawn']
+        }
+      })(),
+      tools: [...toolNames].sort(),
+      presets: presets.map((preset) => ({
+        id: preset.id ?? preset.name,
+        label: preset.name ?? preset.title ?? preset.id,
+      })),
+      cwd: {
+        workspace: workspaceDir,
+        dshHome: process.env.DSH_HOME ?? '',
+        defaultDirectory: workingDirectory?.defaultDirectory ?? '',
+        current: runtime.current.execution?.cwd ?? '',
+      },
+    }
+  }
   if (webServer) {
     ctx.effect(() => registerApprovalRoutes({ webServer, inbox, logger }))
-    ctx.effect(() => registerConfigRoutes({ webServer, runtime, logger }))
+    ctx.effect(() =>
+      registerConfigRoutes({
+        webServer,
+        runtime,
+        getOptions,
+        preparePatch: async (patch) => {
+          const cwd = patch?.execution?.cwd
+          if (typeof cwd === 'string' && cwd !== '') {
+            try {
+              mkdirSync(cwd, { recursive: true })
+            } catch (error) {
+              logger.warn?.(`[device-fleet] cannot create execution cwd: ${String(error?.message ?? error)}`)
+            }
+          }
+          return patch
+        },
+        logger,
+      }),
+    )
     ctx.effect(() =>
       registerUiRoutes({
         webServer,