dsh-device-fleet 0.1.0-dev.24 → 0.1.0-dev.26

package/client.js

@@ -916,6 +916,51 @@ window.__ModuleLoader__.load({
       const [options, setOptions] = useState({})
       const [status, setStatus] = useState('')
       const [busy, setBusy] = useState(false)
+      const [library, setLibrary] = useState([])
+      const [avatarStatus, setAvatarStatus] = useState('')
+
+      const loadLibrary = async () => {
+        try {
+          const response = await fetch('/device-fleet/avatar-library', { headers: { accept: 'application/json' } })
+          if (!response.ok) return
+          const data = await response.json()
+          setLibrary(Array.isArray(data.items) ? data.items : [])
+        } catch {
+          /* ignore */
+        }
+      }
+
+      const uploadAvatars = async (event) => {
+        const files = Array.from(event.target.files ?? [])
+        if (files.length === 0) return
+        setAvatarStatus('上传中…')
+        try {
+          for (const file of files) {
+            const dataUrl = await new Promise((resolve, reject) => {
+              const reader = new FileReader()
+              reader.onload = () => resolve(reader.result)
+              reader.onerror = () => reject(new Error('读取文件失败'))
+              reader.readAsDataURL(file)
+            })
+            await postJson('/device-fleet/avatar-library', { name: file.name, dataUrl })
+          }
+          await loadLibrary()
+          setAvatarStatus('已加入头像库')
+        } catch (problem) {
+          setAvatarStatus('上传失败：' + String(problem.message ?? problem))
+        } finally {
+          event.target.value = ''
+        }
+      }
+
+      const removeAvatar = async (name) => {
+        try {
+          await postJson('/device-fleet/avatar-library/remove', { name })
+          await loadLibrary()
+        } catch (problem) {
+          setAvatarStatus('删除失败：' + String(problem.message ?? problem))
+        }
+      }
 
       useEffect(() => {
         let disposed = false
@@ -935,6 +980,7 @@ window.__ModuleLoader__.load({
           }
         }
         void load()
+        void loadLibrary()
         return () => { disposed = true }
       }, [])
 
@@ -1047,6 +1093,26 @@ window.__ModuleLoader__.load({
         h(Row, { label: '委派超时 (ms)' },
           h(NumberControl, { value: draft.execDelegateTimeoutMs, onChange: (value) => set('execDelegateTimeoutMs', value) }),
         ),
+        h('div', { style: sectionStyle }, '头像库'),
+        sectionCard('Room 成员头像',
+          h('div', null,
+            h('div', { style: { display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' } },
+              h('input', { type: 'file', accept: 'image/png,image/jpeg,image/webp', multiple: true, onChange: (event) => void uploadAvatars(event) }),
+              avatarStatus ? h('span', { style: { fontSize: 12, opacity: 0.7 } }, avatarStatus) : null,
+            ),
+            library.length === 0
+              ? h('div', { style: { fontSize: 12, opacity: 0.6, marginTop: 8 } }, '未上传头像时使用内置头像；上传后 Room 成员按顺序循环分配')
+              : h('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 10, marginTop: 10 } },
+                  ...library.map((item) =>
+                    h('div', { key: item.name, style: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 } },
+                      h('img', { src: item.url, alt: item.name, style: { width: 46, height: 46, borderRadius: '50%', objectFit: 'cover', border: '1px solid var(--dsw-alias-border-l1, #333)' } }),
+                      smallButton('删除', () => void removeAvatar(item.name), 'deny'),
+                    ),
+                  ),
+                ),
+          ),
+          '上传的图片存放在设备数据目录的 avatars/ 下；Room 视图按成员顺序循环取用，可点「换头像」切换到下一组。',
+        ),
         h('div', { style: sectionStyle }, '远端权限'),
         h(Row, { label: '允许的根目录', wide: true },
           h('textarea', {
@@ -1085,10 +1151,21 @@ window.__ModuleLoader__.load({
 
     // Room is a normal Session with participants. This dock keeps the member
     // strip inside the conversation instead of a separate dashboard.
-    function RoomDock({ sessionId }) {
+    function RoomDock(props) {
+      const sessionId = props?.sessionId;
       const [room, setRoom] = useState(null);
       const [missing, setMissing] = useState(false);
       const [status, setStatus] = useState('');
+      const [autoOpened, setAutoOpened] = useState(false);
+      // Standard slot props expose conversation hooks; use them when available
+      // to switch a Room session from Chat to the Room view automatically.
+      const conversation = (() => {
+        try {
+          return typeof props?.useConversation === 'function' ? props.useConversation() : null;
+        } catch {
+          return null;
+        }
+      })();
 
       const load = async () => {
         if (!sessionId) return;
@@ -1114,6 +1191,19 @@ window.__ModuleLoader__.load({
         return () => clearInterval(timer);
       }, [sessionId]);
 
+      useEffect(() => {
+        if (!room || autoOpened) return;
+        const openView =
+          conversation?.openView ?? conversation?.selectView ?? conversation?.setView ?? conversation?.goView;
+        if (typeof openView !== 'function') return;
+        try {
+          openView('room', '');
+          setAutoOpened(true);
+        } catch {
+          /* the shell did not expose a compatible view switch */
+        }
+      }, [room, autoOpened, conversation]);
+
       if (!sessionId) return null;
       const upgrade = async () => {
         setStatus('升级中…');
@@ -1230,24 +1320,26 @@ window.__ModuleLoader__.load({
       );
     }
 
-    function roomAvatar(name, tone) {
-      const text = String(name ?? '?').trim().slice(0, 1).toUpperCase() || '?'
-      return h('div', {
+    function avatarImg(src, alt) {
+      return h('img', {
+        src,
+        alt,
+        draggable: false,
         style: {
           width: 26,
           height: 26,
           borderRadius: '50%',
           flex: '0 0 26px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          fontSize: 12,
-          fontWeight: 600,
-          background: tone === 'user' ? '#2f6fed' : 'var(--dsw-alias-bg-layer-2, #262626)',
-          color: tone === 'user' ? '#fff' : 'var(--dsw-alias-label-primary, #e8e8e8)',
+          objectFit: 'cover',
           border: '1px solid var(--dsw-alias-border-l1, #333)',
+          background: 'var(--dsw-alias-bg-layer-2, #262626)',
         },
-      }, text)
+      })
+    }
+
+    function roomAvatar(name, tone) {
+      const kind = tone === 'user' ? 'user' : String(name ?? '') === 'host' ? 'host' : 'worker'
+      return avatarImg('/device-fleet/avatar/' + kind, String(name ?? kind))
     }
 
     // Room conversation rendered as a chat: agents on the left with names and
@@ -1263,6 +1355,24 @@ window.__ModuleLoader__.load({
       const [showBoard, setShowBoard] = useState(false);
       const [taskTitle, setTaskTitle] = useState('');
       const [taskOwner, setTaskOwner] = useState('');
+      const [library, setLibrary] = useState([]);
+      const [avatarOffset, setAvatarOffset] = useState(0);
+
+      useEffect(() => {
+        let disposed = false;
+        const loadLibrary = async () => {
+          try {
+            const response = await fetch('/device-fleet/avatar-library', { headers: { accept: 'application/json' } });
+            if (!response.ok) return;
+            const data = await response.json();
+            if (!disposed) setLibrary(Array.isArray(data.items) ? data.items : []);
+          } catch {
+            /* keep built-in avatars */
+          }
+        };
+        void loadLibrary();
+        return () => { disposed = true };
+      }, []);
 
       const load = async () => {
         if (!roomId) return;
@@ -1307,6 +1417,14 @@ window.__ModuleLoader__.load({
       if (!detail) return h('div', { style: { padding: 16, opacity: 0.7, fontSize: 12 } }, error ? '房间加载失败：' + error : '加载房间…');
 
       const nameOf = (memberId) => detail.members.find((member) => member.memberId === memberId)?.name ?? memberId
+      const memberAvatarSrc = (member) => {
+        if (!member) return '/device-fleet/avatar/user'
+        const index = detail.members.findIndex((item) => item.memberId === member.memberId)
+        if (library.length > 0) {
+          return library[((index >= 0 ? index : 0) + avatarOffset) % library.length].url
+        }
+        return member.role === 'host' ? '/device-fleet/avatar/host' : '/device-fleet/avatar/worker'
+      }
       const participants = detail.members.filter((member) => member.role !== 'host')
       const defaultRecipients = participants.length > 0 ? participants.map((member) => member.memberId) : detail.members.map((member) => member.memberId)
       const recipients = sendTo.length > 0 ? sendTo : defaultRecipients
@@ -1325,9 +1443,10 @@ window.__ModuleLoader__.load({
       const messages = detail.messages.map((message) => {
         const fromUser = message.from?.kind === 'user'
         const author = fromUser ? '你' : message.from?.name ?? 'agent'
+        const senderMember = fromUser ? null : detail.members.find((member) => member.memberId === message.from?.memberId)
         const targets = (message.to ?? []).map(nameOf).join(', ')
         return h('div', { key: message.id, style: { display: 'flex', justifyContent: fromUser ? 'flex-end' : 'flex-start', gap: 8, margin: '10px 0' } },
-          fromUser ? null : roomAvatar(author, 'agent'),
+          fromUser ? null : avatarImg(memberAvatarSrc(senderMember), author),
           h('div', { style: { maxWidth: '74%' } },
             fromUser ? null : h('div', { style: { fontSize: 11, opacity: 0.6, marginBottom: 2 } }, author + (targets ? ' · → ' + targets : '')),
             h('div', {
@@ -1343,7 +1462,7 @@ window.__ModuleLoader__.load({
             }, message.text),
             h('div', { style: { fontSize: 10, opacity: 0.45, marginTop: 2, textAlign: fromUser ? 'right' : 'left' } }, fmtTime(message.createdAt)),
           ),
-          fromUser ? roomAvatar('你', 'user') : null,
+          fromUser ? avatarImg('/device-fleet/avatar/user', '你') : null,
         )
       })
 
@@ -1352,12 +1471,13 @@ window.__ModuleLoader__.load({
           h('strong', { style: { fontSize: 15 } }, 'Room'),
           ...detail.members.map((member) =>
             h('span', { key: member.memberId, style: { display: 'flex', alignItems: 'center', gap: 5, fontSize: 11, opacity: 0.8 } },
-              roomAvatar(member.name ?? member.memberId, member.role === 'host' ? 'user' : 'agent'),
+              avatarImg(memberAvatarSrc(member), member.name ?? member.memberId),
               member.name + (member.role === 'host' ? '（host）' : ''),
             ),
           ),
           h('span', { style: { flex: 1 } }),
           status ? h('span', { style: { fontSize: 11, opacity: 0.6 } }, status) : null,
+          library.length > 0 ? smallButton('换头像', () => setAvatarOffset((value) => value + 1), 'normal') : null,
           smallButton(showBoard ? '收起看板' : '看板', () => setShowBoard((value) => !value), 'normal'),
           smallButton('关闭房间', () => { void act('关闭房间', () => postJson('/device-fleet/room/close', { roomId })) }, 'deny'),
         ),
@@ -1429,7 +1549,7 @@ window.__ModuleLoader__.load({
                       })
                     },
                     style: { display: 'flex', alignItems: 'center', gap: 6, width: '100%', padding: '6px 9px', background: 'transparent', border: 'none', color: 'inherit', cursor: 'pointer', fontSize: 12, textAlign: 'left' },
-                  }, roomAvatar(member.name ?? member.memberId, member.role === 'host' ? 'user' : 'agent'), member.name + (member.role === 'host' ? '（host）' : '')),
+                  }, avatarImg(memberAvatarSrc(member), member.name ?? member.memberId), member.name + (member.role === 'host' ? '（host）' : '')),
                 ),
               )
             : null,

package/docs/notes/dev-release.md

@@ -128,4 +128,14 @@ dsh plugin --profile desktop add dsh-device-fleet@dev
 
 - 「房间」Conversation View 重做为聊天式：agent 消息在左（头像 + 名字 + 收件人），用户消息在右；时间戳、Enter 发送、收件人勾选；
 - 参与者消息原文直接作为左侧气泡展示，不再进入 host 的普通 Chat；
-- 看板可展开/收起，支持任务状态更新与添加。
+- 看板可展开/收起，支持任务状态更新与添加。
+## 0.1.0-dev.24（Room @点名）
+
+- 房间输入框支持输入 `@` 弹出成员自动补全；选中成员变为「发给」chip，可点击取消；
+- 无点名时默认发给所有非 host 参与者；被点名成员才唤醒；
+- 聊天气泡显示发送者与收件人（worker-c · → host），用户侧为右气泡、agent 侧为左气泡；
+- 后续：把 Room 状态下的 Chat 替换为这套界面（插件增量，不卸载系统 Chat）。
+## 0.1.0-dev.25（Room 头像）
+
+- Room 对话头像改为图片：worker → worker.png（蓝色大肥鱼），host → host.png（偷吃 Token），user → user.png；
+- Host 新增 `/device-fleet/avatar/{host,worker,user}` 精确路由，从插件 `assets/avatars/` 提供 PNG；package `files` 包含 assets。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-device-fleet",
-  "version": "0.1.0-dev.24",
+  "version": "0.1.0-dev.26",
   "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",
@@ -40,6 +40,7 @@
   "files": [
     "src",
     "client.js",
+    "assets",
     "cordis.patch.yml",
     "README.md",
     "CONTEXT.md",

package/src/host/avatar-web.js

@@ -0,0 +1,179 @@
+// Agent avatars used by the Room conversation (dev.25/26). Built-in PNG files
+// ship with the package; the user can upload a library into the state dir and
+// Room members cycle through it.
+import { existsSync, mkdirSync, readFileSync, readdirSync, unlinkSync, writeFileSync } from 'node:fs'
+import { basename, join } from 'node:path'
+
+export const AVATARS = {
+  host: 'host.png',
+  worker: 'worker.png',
+  user: 'user.png',
+}
+
+const EXTENSIONS = new Set(['.png', '.jpg', '.jpeg', '.webp'])
+const MAX_UPLOAD_BYTES = 3 * 1024 * 1024
+
+function safeFileName(input, extension) {
+  const base = String(input ?? 'avatar')
+    .replace(/[^a-zA-Z0-9_-]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .slice(0, 48)
+  return `${base || 'avatar'}-${Date.now().toString(36)}${extension}`
+}
+
+function listLibrary(dir) {
+  if (!existsSync(dir)) return []
+  return readdirSync(dir)
+    .filter((name) => EXTENSIONS.has(name.slice(name.lastIndexOf('.')).toLowerCase()))
+    .sort()
+    .map((name) => ({ name, url: `/device-fleet/avatar-file?name=${encodeURIComponent(name)}` }))
+}
+
+function parseDataUrl(dataUrl) {
+  const match = /^data:image\/(png|jpe?g|webp);base64,([A-Za-z0-9+/=]+)$/.exec(String(dataUrl ?? ''))
+  if (!match) throw Object.assign(new Error('dataUrl must be a base64 png/jpeg/webp image'), { code: 'bad-request' })
+  const extension = match[1] === 'jpeg' ? '.jpg' : `.${match[1]}`
+  const buffer = Buffer.from(match[2], 'base64')
+  if (buffer.length === 0 || buffer.length > MAX_UPLOAD_BYTES) {
+    throw Object.assign(new Error(`avatar must be between 1 byte and ${MAX_UPLOAD_BYTES} bytes`), { code: 'bad-request' })
+  }
+  return { extension, buffer }
+}
+
+function json(res, status, value) {
+  res.statusCode = status
+  res.setHeader('content-type', 'application/json; charset=utf-8')
+  res.end(JSON.stringify(value))
+}
+
+async function readJson(req) {
+  const chunks = []
+  for await (const chunk of req) chunks.push(chunk)
+  if (chunks.length === 0) return {}
+  try {
+    return JSON.parse(Buffer.concat(chunks).toString('utf8'))
+  } catch {
+    throw Object.assign(new Error('request body must be JSON'), { code: 'bad-json' })
+  }
+}
+
+/**
+ * @param {object} options
+ * @param {object} options.webServer ctx.webServer
+ * @param {string} options.dir built-in avatar directory
+ * @param {string} options.libraryDir user-uploaded avatar directory
+ */
+export function registerAvatarRoutes({ webServer, dir, libraryDir = null, logger = null }) {
+  if (!webServer?.register || !dir) return () => {}
+  const disposers = []
+  const sendPng = (res, file, alt = null) => {
+    try {
+      const data = readFileSync(file)
+      res.statusCode = 200
+      res.setHeader('content-type', alt ?? 'image/png')
+      res.setHeader('cache-control', 'public, max-age=3600')
+      res.setHeader('content-length', String(data.length))
+      res.end(data)
+    } catch {
+      logger?.warn?.(`[device-fleet] avatar missing: ${file}`)
+      res.statusCode = 404
+      res.end()
+    }
+  }
+  for (const [name, file] of Object.entries(AVATARS)) {
+    disposers.push(
+      webServer.register({
+        kind: 'exact',
+        path: `/device-fleet/avatar/${name}`,
+        handler: async (req, res) => {
+          if (req.method !== 'GET' && req.method !== 'HEAD') {
+            res.statusCode = 405
+            res.end()
+            return
+          }
+          if (req.method === 'HEAD') {
+            res.statusCode = 200
+            res.end()
+            return
+          }
+          sendPng(res, join(dir, file))
+        },
+      }),
+    )
+  }
+  if (libraryDir) {
+    try {
+      mkdirSync(libraryDir, { recursive: true })
+    } catch {
+      /* best effort */
+    }
+    disposers.push(
+      webServer.register({
+        kind: 'exact',
+        path: '/device-fleet/avatar-library',
+        handler: async (req, res) => {
+          try {
+            if (req.method === 'GET') return json(res, 200, { items: listLibrary(libraryDir) })
+            if (req.method === 'POST') {
+              const body = await readJson(req)
+              const { extension, buffer } = parseDataUrl(body.dataUrl)
+              const name = safeFileName(body.name, extension)
+              writeFileSync(join(libraryDir, name), buffer)
+              return json(res, 200, { ok: true, item: { name, url: `/device-fleet/avatar-file?name=${encodeURIComponent(name)}` } })
+            }
+            return json(res, 405, { error: 'method not allowed' })
+          } catch (error) {
+            return json(res, 400, { error: String(error?.message ?? error), code: error?.code ?? 'bad-request' })
+          }
+        },
+      }),
+    )
+    disposers.push(
+      webServer.register({
+        kind: 'exact',
+        path: '/device-fleet/avatar-file',
+        handler: async (req, res) => {
+          if (req.method !== 'GET') {
+            res.statusCode = 405
+            res.end()
+            return
+          }
+          let name = ''
+          try {
+            name = new URL(req.url ?? '/', 'http://local').searchParams.get('name') ?? ''
+          } catch {
+            name = ''
+          }
+          const clean = basename(name)
+          if (clean === '' || clean !== name || !EXTENSIONS.has(clean.slice(clean.lastIndexOf('.')).toLowerCase())) {
+            res.statusCode = 400
+            res.end()
+            return
+          }
+          sendPng(res, join(libraryDir, clean))
+        },
+      }),
+    )
+    disposers.push(
+      webServer.register({
+        kind: 'exact',
+        path: '/device-fleet/avatar-library/remove',
+        handler: async (req, res) => {
+          if (req.method !== 'POST') return json(res, 405, { error: 'method not allowed' })
+          try {
+            const body = await readJson(req)
+            const clean = basename(String(body.name ?? ''))
+            if (clean === '' || clean !== body.name) throw Object.assign(new Error('invalid name'), { code: 'bad-request' })
+            unlinkSync(join(libraryDir, clean))
+            return json(res, 200, { ok: true })
+          } catch (error) {
+            return json(res, 400, { error: String(error?.message ?? error) })
+          }
+        },
+      }),
+    )
+  }
+  return () => {
+    for (const dispose of disposers) dispose()
+  }
+}

package/src/host/index.js

@@ -8,6 +8,7 @@ export * from './approval-inbox.js'
 export * from './approval-web.js'
 export * from './ui-web.js'
 export * from './config-web.js'
+export * from './avatar-web.js'
 export * from './runtime-config.js'
 export * from './room-service.js'
 export * from './tools.js'

package/src/plugin/index.js

@@ -20,6 +20,7 @@ import { RoomService } from '../host/room-service.js'
 import { registerApprovalRoutes } from '../host/approval-web.js'
 import { registerUiRoutes } from '../host/ui-web.js'
 import { registerConfigRoutes } from '../host/config-web.js'
+import { registerAvatarRoutes } from '../host/avatar-web.js'
 import { RuntimeConfig, deepMerge } from '../host/runtime-config.js'
 import { ExecutionSlot, DEFAULT_SHELL_TOOL } from '../host/execution-slot.js'
 import { ToolPolicy } from '../host/tool-policy.js'
@@ -280,6 +281,14 @@ export function apply(ctx, profileConfig) {
   }
   let pairingRef = null
   if (webServer) {
+    ctx.effect(() =>
+      registerAvatarRoutes({
+        webServer,
+        dir: fileURLToPath(new URL('../../assets/avatars/', import.meta.url)),
+        libraryDir: join(state.dataDir, 'avatars'),
+        logger,
+      }),
+    )
     ctx.effect(() => registerApprovalRoutes({ webServer, inbox, logger }))
     ctx.effect(() =>
       registerConfigRoutes({