dsh-device-fleet 0.1.0-dev.25 → 0.1.0-dev.27

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,24 @@ window.__ModuleLoader__.load({
         h(Row, { label: '委派超时 (ms)' },
           h(NumberControl, { value: draft.execDelegateTimeoutMs, onChange: (value) => set('execDelegateTimeoutMs', value) }),
         ),
+        h('div', { style: sectionStyle }, '头像库'),
+        h('div', { style: { ...cardStyle, padding: 14 } },
+          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'),
+                  ),
+                ),
+              ),
+          h('div', { style: { fontSize: 11, opacity: 0.55, marginTop: 8 } }, '图片存放在设备数据目录的 avatars/ 下；Room 视图按成员顺序循环取用，可点「换头像」切换到下一组。'),
+        ),
         h('div', { style: sectionStyle }, '远端权限'),
         h(Row, { label: '允许的根目录', wide: true },
           h('textarea', {
@@ -1085,10 +1149,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 +1189,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,11 +1318,10 @@ window.__ModuleLoader__.load({
       );
     }
 
-    function roomAvatar(name, tone) {
-      const kind = tone === 'user' ? 'user' : String(name ?? '') === 'host' ? 'host' : 'worker'
+    function avatarImg(src, alt) {
       return h('img', {
-        src: '/device-fleet/avatar/' + kind,
-        alt: String(name ?? kind),
+        src,
+        alt,
         draggable: false,
         style: {
           width: 26,
@@ -1248,6 +1335,11 @@ window.__ModuleLoader__.load({
       })
     }
 
+    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
     // avatars, the user on the right. This is the Room's presentation instead of
     // injecting participant speech into the host's ordinary Chat.
@@ -1261,6 +1353,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;
@@ -1305,6 +1415,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
@@ -1323,9 +1441,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', {
@@ -1341,7 +1460,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,
         )
       })
 
@@ -1350,12 +1469,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'),
         ),
@@ -1427,7 +1547,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

@@ -134,4 +134,13 @@ dsh plugin --profile desktop add dsh-device-fleet@dev
 - 房间输入框支持输入 `@` 弹出成员自动补全；选中成员变为「发给」chip，可点击取消；
 - 无点名时默认发给所有非 host 参与者；被点名成员才唤醒；
 - 聊天气泡显示发送者与收件人（worker-c · → host），用户侧为右气泡、agent 侧为左气泡；
-- 后续：把 Room 状态下的 Chat 替换为这套界面（插件增量，不卸载系统 Chat）。
+- 后续：把 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。
+## 0.1.0-dev.26（Room 自动切换 + 头像库）
+
+- RoomDock 在检测到会话是 Room 时尝试通过标准 slot 的 `useConversation` 钩子自动切到「房间」Conversation View（不同版本的 shell 若未暴露该 API 则保持手动切换）；
+- 头像库：Settings → Plugins → Device Fleet 配置页新增「头像库」，可多选上传 png/jpeg/webp；Host 存到 `$DSH_HOME/.../avatars/`，提供列表/预览/删除接口；
+- Room 成员头像按成员顺序循环分配库中图片，可点「换头像」切换到下一组；未上传时使用内置三张图。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-device-fleet",
-  "version": "0.1.0-dev.25",
+  "version": "0.1.0-dev.27",
   "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/avatar-web.js

@@ -1,8 +1,8 @@
-// Agent avatars used by the Room conversation (dev.25). Files live in the
-// package's assets/avatars directory and are served on exact same-origin routes
-// so the browser can render them without an auth-bypassing asset surface.
-import { readFileSync } from 'node:fs'
-import { join } from 'node:path'
+// 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',
@@ -10,15 +10,76 @@ export const AVATARS = {
   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 directory holding the avatar PNG files
- * @returns {() => void} disposer
+ * @param {string} options.dir built-in avatar directory
+ * @param {string} options.libraryDir user-uploaded avatar directory
  */
-export function registerAvatarRoutes({ webServer, dir, logger = null }) {
+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({
@@ -30,17 +91,83 @@ export function registerAvatarRoutes({ webServer, dir, logger = null }) {
             res.end()
             return
           }
-          try {
-            const data = readFileSync(join(dir, file))
+          if (req.method === 'HEAD') {
             res.statusCode = 200
-            res.setHeader('content-type', 'image/png')
-            res.setHeader('cache-control', 'public, max-age=3600')
-            res.setHeader('content-length', String(data.length))
-            res.end(req.method === 'HEAD' ? undefined : data)
+            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 {
-            logger?.warn?.(`[device-fleet] avatar missing: ${file}`)
-            res.statusCode = 404
+            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) })
           }
         },
       }),

package/src/plugin/index.js

@@ -285,6 +285,7 @@ export function apply(ctx, profileConfig) {
       registerAvatarRoutes({
         webServer,
         dir: fileURLToPath(new URL('../../assets/avatars/', import.meta.url)),
+        libraryDir: join(state.dataDir, 'avatars'),
         logger,
       }),
     )