openvisio-agent 0.24.0 → 0.24.1

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## [0.24.1] — 2026-09-10
+
+- Deliver agent-authored acknowledgements and short plans to the originating channel or thread when a request moves into a coding workspace.
+- Highlight the selected agent in Studio and show embedded avatars shared with the main app.
+
 ## [0.24.0] — 2026-09-10
 
 - Acknowledge accepted coding tasks with the agent's short native plan, then deliver its final response separately. Deduplicate plans through reconnects and use guarded source-thread delivery for every BYO runtime.

package/USER_GUIDE.md

@@ -78,6 +78,8 @@ Replies stay in their source thread. New completion messages use the agent’s d
 
 For accepted coding tasks, the agent starts by publishing a short plan. You receive one acknowledgement with up to three steps, followed later by its result. The agent can delegate independent pieces to native sub-agents and remains responsible for checking their work. Thinking, working, and typing indicators follow runtime activity; they expire after work stops. A reconnect does not repeat the plan or cancel healthy work.
 
+When a conversation turns into coding work, the agent includes its acknowledgement and two or three next steps in the workspace handoff. They are posted to the original channel thread before coding starts. Private continuation context stays internal, and the work session does not send a second pickup message.
+
 ## Open Agent Studio
 
 In the app, choose **Agents → Open Agent Studio**. Updated backend watchers start Studio automatically. Agent chat replies can also show this button and open the relevant agent’s settings directly.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openvisio-agent",
-  "version": "0.24.0",
+  "version": "0.24.1",
   "description": "Connect Claude Code, Codex, or OpenCode to an OpenVisio team \u2014 MCP tools + optional autonomy \u2014 in one command.",
   "type": "module",
   "bin": {

package/src/runtime-control.mjs

@@ -4,18 +4,25 @@ export function runtimeControlTools({ canCode = false, workspaceAvailable = fals
   if (canCode || !workspaceAvailable) return []
   return [{
     name: WORK_SESSION_TOOL,
-    description: 'Continue this same request in your configured coding workspace. Use when investigation reveals that local execution or edits are needed. You remain the same agent and retain the original task, recipient, and permissions. Supply the context worth carrying forward, then end this turn; the watcher starts your work session and delivers its eventual response. Do not ask the user to reassign the task.',
-    inputSchema: { type: 'object', properties: { context: { type: 'string', minLength: 1, maxLength: 12000, description: 'Relevant findings, decisions, remaining work, and context for your continuation.' } }, required: ['context'], additionalProperties: false },
+    description: 'Continue this same request in your configured coding workspace. Use when investigation reveals that local execution or edits are needed. You remain the same agent and retain the original task, recipient, and permissions. Supply private continuation context plus a teammate-facing acknowledgement and 2-3 concrete plan steps. The watcher posts that acknowledgement and plan in the original channel/thread before starting your work session, then delivers your eventual result separately. End this turn after requesting continuation; do not repeat the acknowledgement or ask for reassignment.',
+    inputSchema: { type: 'object', properties: {
+      context: { type: 'string', minLength: 1, maxLength: 12000, description: 'Private findings, decisions, remaining work, and context for your continuation. This field is not posted to chat.' },
+      acknowledgement: { type: 'string', minLength: 1, maxLength: 1200, description: 'A short, natural first-person acknowledgement for the teammate. Say what you have accepted; do not claim completion.' },
+      plan: { type: 'array', minItems: 2, maxItems: 3, items: { type: 'string', minLength: 1, maxLength: 240 }, description: '2-3 concrete next steps to post alongside your acknowledgement before doing the work.' },
+    }, required: ['context', 'acknowledgement', 'plan'], additionalProperties: false },
     annotations: { readOnlyHint: true, destructiveHint: false, idempotentHint: true, openWorldHint: false },
   }]
 }
 
 export function requestWorkSession(args, capabilities) {
   if (!runtimeControlTools(capabilities).length) throw new Error('No additional coding workspace is available in this session')
-  if (!args || Object.keys(args).some((key) => key !== 'context') || typeof args.context !== 'string' || !args.context.trim() || args.context.length > 12000) throw new Error('Provide only a nonempty context string of at most 12000 characters')
-  return { content: [{ type: 'text', text: JSON.stringify({ openvisioControl: { action: 'request_work_session', context: args.context.trim() } }) }] }
+  if (!args || Object.keys(args).some((key) => !['context', 'acknowledgement', 'plan'].includes(key)) || typeof args.context !== 'string' || !args.context.trim() || args.context.length > 12000) throw new Error('Provide a nonempty context string of at most 12000 characters and only the advertised acknowledgement and plan fields')
+  if (typeof args.acknowledgement !== 'string' || !args.acknowledgement.trim() || args.acknowledgement.length > 1200 || !validPlan(args.plan)) throw new Error('Include a short acknowledgement and 2-3 nonempty plan steps of at most 240 characters each for delivery to the original conversation')
+  return { content: [{ type: 'text', text: JSON.stringify({ openvisioControl: { action: 'request_work_session', context: args.context.trim(), acknowledgement: args.acknowledgement.trim(), plan: args.plan.map(step => step.trim()) } }) }] }
 }
 
+const validPlan = (plan) => Array.isArray(plan) && plan.length >= 2 && plan.length <= 3 && plan.every(step => typeof step === 'string' && step.trim() && step.length <= 240)
+
 // Only inspect outputs of our named local control tool, never arbitrary model
 // prose, commands, ticket text, or repository content.
 export function workSessionRequest(output, depth = 0) {
@@ -28,7 +35,11 @@ export function workSessionRequest(output, depth = 0) {
     return null
   }
   const request = output.openvisioControl
-  if (request?.action === 'request_work_session' && typeof request.context === 'string' && request.context.trim() && request.context.length <= 12000) return { context: request.context.trim() }
+  if (request?.action === 'request_work_session' && typeof request.context === 'string' && request.context.trim() && request.context.length <= 12000) return {
+    context: request.context.trim(),
+    ...(typeof request.acknowledgement === 'string' && request.acknowledgement.trim() && request.acknowledgement.length <= 1200 ? { acknowledgement: request.acknowledgement.trim() } : {}),
+    ...(validPlan(request.plan) ? { plan: request.plan.map(step => step.trim()) } : {}),
+  }
   for (const key of ['content', 'text', 'result', 'structuredContent']) {
     const nested = workSessionRequest(output[key], depth + 1)
     if (nested) return nested

package/src/studio-server.mjs

@@ -105,14 +105,19 @@ export async function readStudioSnapshot({ stateDir, now = Date.now }) {
     const age = now() - Date.parse(event.timestamp)
     const online = age >= -5000 && age <= FRESH_MS && event.type !== 'runtime.stopped' && pidAlive(event.pid)
     const existing = agentsById.get(event.agent.identifier)
-    agentsById.set(event.agent.identifier, { ...existing, id: event.agent.identifier, identifier: event.agent.identifier, slug: event.agent.slug || event.agent.identifier, name: existing?.name || event.agent.slug || event.agent.identifier, provider: event.agent.provider || 'unknown', runId: event.runId, pid: Number.isSafeInteger(event.pid) ? event.pid : null, watcherAlive: online, status: online ? 'online' : 'offline', lastSeen: event.timestamp, lastEventType: event.type })
+    agentsById.set(event.agent.identifier, { ...existing, id: event.agent.identifier, identifier: event.agent.identifier, slug: existing?.slug || event.agent.slug || event.agent.identifier, name: existing?.name || event.agent.slug || event.agent.identifier, provider: event.agent.provider || 'unknown', runId: event.runId, pid: Number.isSafeInteger(event.pid) ? event.pid : null, watcherAlive: online, status: online ? 'online' : 'offline', lastSeen: event.timestamp, lastEventType: event.type })
   }
-  const agents = [...agentsById.values()].sort((a, b) => a.name.localeCompare(b.name))
+  const agents = [...agentsById.values()]
   for (const agent of agents) {
+    const profileEvent = events.findLast(event => event.agent.identifier === agent.identifier && (event.type === 'agent.profile' || event.type === 'watcher.heartbeat' && event.data?.profile))
+    const profile = profileEvent?.type === 'agent.profile' ? profileEvent.data : profileEvent?.data?.profile
+    if (typeof profile?.name === 'string' && profile.name.trim()) agent.name = profile.name.trim()
+    if (typeof profile?.avatarSeed === 'string' && profile.avatarSeed) agent.avatarSeed = profile.avatarSeed
     const applied = events.findLast(event => event.agent.identifier === agent.identifier && event.runId === agent.runId && typeof event.data?.modelSettingsRevision === 'string')
     agent.appliedModelRevision = applied?.data.modelSettingsRevision || ''
     agent.modelControlsSupported = !!applied
   }
+  agents.sort((a, b) => a.name.localeCompare(b.name))
   return { schemaVersion: 1, demo: false, generatedAt: new Date(now()).toISOString(), agents, events: events.slice(-MAX_EVENTS), limits: { maxEvents: MAX_EVENTS, maxFiles: MAX_FILES, maxTotalBytes: MAX_TOTAL_BYTES }, warnings }
 }
 
@@ -219,7 +224,7 @@ export async function startStudioServer({ stateDir, host = '127.0.0.1', port = 4
         sendSnapshot(res, await snapshot())
         return
       }
-      const file = ({ '/': 'index.html', '/index.html': 'index.html', '/guide': 'guide.html', '/guide.html': 'guide.html', '/style.css': 'style.css', '/app.mjs': 'app.mjs', '/satoshi-400.woff2': 'satoshi-400.woff2', '/satoshi-500.woff2': 'satoshi-500.woff2', '/openvisio.svg': 'openvisio.svg' })[path]
+      const file = ({ '/': 'index.html', '/index.html': 'index.html', '/guide': 'guide.html', '/guide.html': 'guide.html', '/style.css': 'style.css', '/app.mjs': 'app.mjs', '/bot-avatar.mjs': 'bot-avatar.mjs', '/satoshi-400.woff2': 'satoshi-400.woff2', '/satoshi-500.woff2': 'satoshi-500.woff2', '/openvisio.svg': 'openvisio.svg' })[path]
       if (!file) { res.writeHead(404); res.end('Not found'); return }
       const target = await realpath(resolve(root, file))
       const rel = relative(root, target)

package/src/watch.mjs

@@ -630,6 +630,9 @@ export function createBackendWatcher({ backend, wsUrl, apiKey, identifier, slug,
     if (!live || live.control.cancelled || stopping) return
     if (type === 'tool.started' || type === 'tool.updated') activity.set(data.cycleId, live.control.statusTargets, 'working')
     if (type === 'output.progress') activity.set(data.cycleId, live.control.statusTargets, 'typing')
+    // Reply sessions may discover work themselves. Keep their native plan for
+    // an explicit continuation, without announcing plans for ordinary answers.
+    if (type === 'plan.updated') live.control.planEntries = data.entries
     if (type === 'plan.updated' && live.data.kind === 'full' && data.entries?.some(entry => typeof entry?.content === 'string' && entry.content.trim()) && !live.control.planDelivery) {
       live.control.planDelivery = trackOperation(publishWorkPlan(live, data.entries)).catch(error => log('Task plan delivery unavailable: ' + (error?.message || error)))
     }
@@ -878,13 +881,17 @@ export function createBackendWatcher({ backend, wsUrl, apiKey, identifier, slug,
   let selfAgentId = null
   let selfOrganizationId = null
   let identityContext = memory.get?.(`identity:${identifier}`)?.meta?.context || agentProfileContext({}, identifier)
+  let agentAppearance = memory.get?.(`identity:${identifier}`)?.meta?.appearance || null
+  if (agentAppearance) emit('agent.profile', agentAppearance)
   const selfAliases = new Set([slug, identifier].map((value) => String(value || '').toLowerCase()).filter(Boolean))
   const rememberSelfAgent = (self) => {
     if (!self || typeof self !== 'object' || String(self.identifier || self.slug || '') !== identifier) return
     if (validBackendId(self.id)) selfAgentId = Number(self.id)
     for (const alias of [self.name, self.identifier, self.slug]) if (alias) selfAliases.add(String(alias).toLowerCase())
     identityContext = agentProfileContext(self, identifier)
-    memory.remember({ key: `identity:${identifier}`, kind: 'identity', state: 'configured', summary: self.name || identifier, meta: { context: identityContext } })
+    const appearance = { name: String(self.name || identifier).slice(0, 160), avatarSeed: String(self.slug || self.identifier || identifier).slice(0, 240) }
+    if (JSON.stringify(appearance) !== JSON.stringify(agentAppearance)) { agentAppearance = appearance; emit('agent.profile', appearance) }
+    memory.remember({ key: `identity:${identifier}`, kind: 'identity', state: 'configured', summary: self.name || identifier, meta: { context: identityContext, appearance } })
     const organizationId = self.organization_id ?? self.organizationId
     if (validBackendId(organizationId)) {
       selfOrganizationId = Number(organizationId)
@@ -1165,11 +1172,12 @@ export function createBackendWatcher({ backend, wsUrl, apiKey, identifier, slug,
     return run
   }
 
-  async function publishWorkPlan(live, entries) {
+  async function publishWorkPlan(live, entries, acknowledgement = '') {
     const { control, delivery, taskRef } = live
     const steps = (Array.isArray(entries) ? entries : []).filter(entry => entry && typeof entry.content === 'string' && entry.content.trim()).slice(0, 3).map(entry => entry.content.trim().slice(0, 240))
     if (!steps.length || control.cancelled || !control.planKey || memory.has(control.planKey)) return
-    const content = `${control.taskLabel ? `I'm on ${control.taskLabel}.` : "I'll take this on."}\n\n${steps.map((step, index) => `${index + 1}. ${step}`).join('\n')}`
+    const introduction = String(acknowledgement || '').trim().slice(0, 1200) || (control.taskLabel ? `I'm on ${control.taskLabel}.` : "I'll take this on.")
+    const content = `${introduction}\n\n${steps.map((step, index) => `${index + 1}. ${step}`).join('\n')}`
     const channelId = delivery?.channelId ?? taskRef?.channelId ?? await projectStatusChannel(taskRef?.projectId)
     if (channelId == null || control.cancelled) return
     const refs = { channelId: Number(channelId), ...(delivery?.parentId != null ? { threadId: Number(delivery.parentId) } : {}) }
@@ -1618,7 +1626,7 @@ export function createBackendWatcher({ backend, wsUrl, apiKey, identifier, slug,
     try { recalled = await memory.context(memoryRefs) }
     catch (error) { log('Optional history unavailable; agent can retrieve context with its tools: ' + (error?.message || error)) }
     const capabilityContext = kind !== 'full' && canCode
-      ? 'YOUR CODING WORKSPACE IS AVAILABLE. If this request needs local execution or edits, call openvisio_request_work_session with the findings and context to carry forward, then end this turn. The same agent continues the same request in its coding workspace. Do not claim to be a chat-only agent or ask anyone to reassign the ticket.'
+      ? 'YOUR CODING WORKSPACE IS AVAILABLE. If this request needs local execution or edits, call openvisio_request_work_session with private continuation context, a short teammate-facing acknowledgement, and 2-3 concrete plan steps. The watcher posts the acknowledgement and plan in this source conversation before starting the work session. Plain final text and internal context are not posted during this handoff: put your public acknowledgement and plan in the tool fields. Then end this turn. The same agent continues the same request in its coding workspace. Do not claim to be a chat-only agent or ask anyone to reassign the ticket.'
       : canCode ? 'This session has your configured coding workspace. Choose the tools and context appropriate to the request.' : 'This connection has no configured local coding workspace. Use your available tools for the request; do not claim local changes you cannot perform.'
     const prompt = identityContext + '\n\n' + capabilityContext + '\n\n' + (ctx.length ? ctx.join('\n') + '\n\n' : '') + (recalled ? recalled + '\n\n' : '') + baseFor(kind, delivery)
     // Chat-shaped cycles (mentions/intro) may run on the cheaper chat model; code
@@ -1689,6 +1697,11 @@ export function createBackendWatcher({ backend, wsUrl, apiKey, identifier, slug,
         // An agent-selected continuation, not a heuristic retry or a new task.
         // Preserve the authoritative recipient and cancellation key; the tool
         // cannot select another task, channel, identity, or permission scope.
+        const entries = Array.isArray(result.workRequest.plan)
+          ? result.workRequest.plan.map(content => ({ content })) : cycleControl.planEntries
+        try { await publishWorkPlan({ control: cycleControl, delivery, taskRef: activeTaskRef }, entries, result.workRequest.acknowledgement) }
+        catch (error) { log('Task plan delivery unavailable: ' + (error?.message || error)) }
+        if (cycleControl.cancelled || stopping) return
         cycleControl.outcome = 'continued'
         cycleControl.finishedBy = 'agent'
         const continuation = String(result.workRequest.context || '').slice(0, 12000)
@@ -2106,7 +2119,7 @@ export function createBackendWatcher({ backend, wsUrl, apiKey, identifier, slug,
   modelSettingsTimer?.unref?.()
   emit('models.updated', { model: codeModel, chatModel: liteModel, modelSettingsRevision })
   const heartbeatTimer = autoStart ? setInterval(() => {
-    emit('watcher.heartbeat', { status: 'running', active: queues.work.activeSize + queues.reply.activeSize, pending: queues.work.size + queues.reply.size, model: codeModel, chatModel: liteModel, modelSettingsRevision, workdir: workdir || '' })
+    emit('watcher.heartbeat', { status: 'running', active: queues.work.activeSize + queues.reply.activeSize, pending: queues.work.size + queues.reply.size, model: codeModel, chatModel: liteModel, modelSettingsRevision, workdir: workdir || '', ...(agentAppearance ? { profile: agentAppearance } : {}) })
     // The Studio reads a bounded journal tail. Re-state current queue ownership
     // so a long-running cycle stays visible after its start event rotates out.
     for (const { data, control } of liveCycles.values()) {

package/studio/app.mjs

@@ -1,4 +1,5 @@
 // The studio displays recorded, visible actions. It never starts work or infers a plan.
+import { botAvatarUrl } from './bot-avatar.mjs';
 const MAX_EVENTS = 1000;
 const PAGE_SIZE = 40;
 const terminalStatuses = new Set(['completed', 'failed', 'cancelled', 'offline', 'skipped', 'blocked', 'timeout', 'continued']);
@@ -287,6 +288,14 @@ function initializeStudio() {
     const element = node('span', `badge ${status}`, label);
     return element;
   }
+  function agentImage(agent, size = 31) {
+    const profile = state.model.agents.find(item => agentId(item) === agentId(agent)) || agent;
+    const image = node('img', 'bot-avatar');
+    image.src = botAvatarUrl(profile.avatarSeed || profile.slug || profile.identifier || profile.id);
+    image.alt = ''; image.setAttribute('aria-hidden', 'true');
+    image.width = size; image.height = size;
+    return image;
+  }
   function toast(message) {
     clearTimeout(toastTimer);
     $('toast').textContent = message;
@@ -352,10 +361,12 @@ function initializeStudio() {
     button.setAttribute('aria-pressed', String(state.selectedAgent === id));
     const avatar = node('span', 'agent-avatar');
     if (id === 'all') avatar.append(icon('agents'));
-    else { avatar.textContent = name.slice(0, 2).toUpperCase(); avatar.append(node('span', `avatar-status ${agent.status}`)); }
+    else { avatar.classList.add('has-image'); avatar.append(agentImage(agent), node('span', `avatar-status ${agent.status}`)); }
     const body = node('span', 'agent-text');
     body.append(node('span', 'agent-name', name), node('span', 'agent-caption', caption));
-    button.append(avatar, body);
+    const selection = node('span', 'agent-selection'); selection.append(icon('check'));
+    selection.setAttribute('aria-hidden', 'true');
+    button.append(avatar, body, selection);
     button.addEventListener('click', () => { state.selectedAgent = id; resetSelection(); scheduleRender(); });
     return button;
   }
@@ -704,9 +715,11 @@ function initializeStudio() {
       branch.setAttribute('aria-pressed', String(item.id === cycle.id));
       const marker = node('span', `fanout-marker ${item.status}`);
       marker.append(icon(item.status === 'completed' ? 'check' : ['failed', 'cancelled', 'blocked', 'timeout'].includes(item.status) ? 'close' : ['active', 'recovering'].includes(item.status) ? 'loader' : 'clock'));
-      branch.append(marker, node('span', 'fanout-name', agentName(item.agent)));
+      const identity = node('span', 'fanout-identity');
+      identity.append(agentImage(item.agent, 20), node('span', 'fanout-name', agentName(item.agent)));
+      branch.append(marker, identity);
       branch.addEventListener('click', () => {
-        state.selectedCycle = item.id; state.selectedEvent = null; state.selectedAgent = 'all';
+        state.selectedCycle = item.id; state.selectedEvent = null; state.selectedAgent = agentId(item.agent);
         state.view = 'cycles'; state.search = ''; state.kind = 'all'; state.status = 'all';
         $('event-search').value = ''; $('kind-filter').value = 'all'; $('status-filter').value = 'all';
         state.follow = false; $('follow-latest').checked = false; scheduleRender();

package/studio/bot-avatar.mjs

@@ -0,0 +1,70 @@
+// Embedded version of frontend/components/team/BotAvatar.tsx. Keep the seed,
+// palettes and SVG geometry identical so an agent looks the same in both apps.
+// Only generated numbers and fixed shapes enter the SVG; no remote images.
+function hashSeed(seed) {
+  let h = 2166136261 >>> 0;
+  for (let i = 0; i < seed.length; i++) { h ^= seed.charCodeAt(i); h = Math.imul(h, 16777619); }
+  return h >>> 0;
+}
+function mulberry32(seed) {
+  let a = seed >>> 0;
+  return () => {
+    a = (a + 0x6d2b79f5) | 0;
+    let t = Math.imul(a ^ (a >>> 15), 1 | a);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+const catalogHues = { sentinel: 0, forge: 40, pulse: 80, nova: 120, sage: 160, atlas: 200, vera: 240, relay: 280, quill: 320 };
+function botSpec(seed) {
+  const h = Object.hasOwn(catalogHues, seed) ? catalogHues[seed] : hashSeed(seed + '#hue') % 360;
+  const v = hashSeed(seed + '#tone') % 97, saturation = 58 + v % 20, lightness = 50 + v % 9;
+  const rng = mulberry32(hashSeed(seed));
+  const pick = choices => choices[Math.floor(rng() * choices.length)];
+  return {
+    p: {
+      tile: `hsl(${h} ${Math.min(saturation + 6, 84)}% 90%)`,
+      body: `hsl(${h} ${saturation}% ${lightness}%)`,
+      dark: `hsl(${h} ${Math.min(saturation + 4, 82)}% ${lightness - 17}%)`,
+      face: `hsl(${h} 48% 97%)`,
+      accent: `hsl(${(h + 150 + v % 61) % 360} 82% 56%)`,
+    },
+    headRx: pick([14, 20, 26, 26]),
+    antenna: pick(['none', 'single', 'double', 'dish']),
+    eyes: pick(['round', 'square', 'visor', 'cyclops', 'happy']),
+    mouth: pick(['grid', 'smile', 'flat', 'dots', 'wave']),
+  };
+}
+
+export function botAvatarSvg(seed) {
+  const spec = botSpec(String(seed || 'bot')), { p } = spec;
+  const element = (tag, attributes, children = '') => `<${tag} ${Object.entries(attributes).map(([key, value]) => `${key}="${value}"`).join(' ')}>${children}</${tag}>`;
+  const circle = (cx, cy, r, fill, more = {}) => element('circle', { cx, cy, r, fill, ...more });
+  const rect = (x, y, width, height, rx, fill) => element('rect', { x, y, width, height, rx, fill });
+  const line = (x1, y1, x2, y2, more = {}) => element('line', { x1, y1, x2, y2, ...more });
+  const stroke = (color, width) => ({ stroke: color, 'stroke-width': width, 'stroke-linecap': 'round' });
+  const antenna = {
+    single: element('g', stroke(p.dark, 3), line(50, 26, 50, 15) + circle(50, 12, 4, p.accent, { stroke: 'none' })),
+    double: element('g', stroke(p.dark, 2.6), line(40, 26, 37, 16) + line(60, 26, 63, 16) + circle(36, 14, 3.2, p.accent, { stroke: 'none' }) + circle(64, 14, 3.2, p.accent, { stroke: 'none' })),
+    dish: element('g', {}, line(50, 26, 50, 16, stroke(p.dark, 3)) + element('ellipse', { cx: 50, cy: 14, rx: 10, ry: 3.4, fill: p.dark }) + circle(50, 12, 2.4, p.accent)),
+  }[spec.antenna] || '';
+  const eyes = {
+    round: circle(42, 48, 5, p.dark) + circle(58, 48, 5, p.dark) + circle(43.4, 46.6, 1.6, '#fff') + circle(59.4, 46.6, 1.6, '#fff'),
+    square: rect(37, 43, 9, 9, 2.5, p.dark) + rect(54, 43, 9, 9, 2.5, p.dark),
+    visor: element('g', {}, rect(36, 44, 28, 9, 4.5, p.dark) + circle(44, 48.5, 2.4, p.accent) + circle(56, 48.5, 2.4, p.accent)),
+    cyclops: circle(50, 48, 8, p.dark) + circle(50, 48, 3.4, p.accent),
+    happy: element('g', { ...stroke(p.dark, 3), fill: 'none' }, element('path', { d: 'M37 49 q5 -6 10 0' }) + element('path', { d: 'M53 49 q5 -6 10 0' })),
+  }[spec.eyes];
+  const mouth = {
+    grid: element('g', {}, rect(42, 58, 16, 6.5, 2, p.dark) + [47, 50, 53].map(x => line(x, 58, x, 64.5, { stroke: p.face, 'stroke-width': 1.2 })).join('')),
+    smile: element('path', { d: 'M42 59 q8 7 16 0', ...stroke(p.dark, 3), fill: 'none' }),
+    flat: rect(43, 60.5, 14, 3, 1.5, p.dark),
+    dots: element('g', { fill: p.dark }, [44, 50, 56].map(cx => element('circle', { cx, cy: 61, r: 1.8 })).join('')),
+    wave: element('path', { d: 'M42 61 q3 -4 6 0 t6 0', ...stroke(p.dark, 2.6), fill: 'none' }),
+  }[spec.mouth];
+  return element('svg', { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 100 100' }, rect(0, 0, 100, 100, 24, p.tile) + antenna + rect(18, 46, 5, 16, 2.5, p.dark) + rect(77, 46, 5, 16, 2.5, p.dark) + rect(24, 26, 52, 50, spec.headRx, p.body) + rect(31, 35, 38, 32, 9, p.face) + eyes + mouth);
+}
+
+export function botAvatarUrl(seed) {
+  return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(botAvatarSvg(seed));
+}

package/studio/style.css

@@ -82,8 +82,14 @@
   .agent-list { display: flex; flex-direction: column; gap: 5px; }
   .agent-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; padding: 10px; border-radius: var(--radius-md); corner-shape: squircle; }
   .agent-item:hover { background: var(--hover); }
-  .agent-item.is-selected { background: var(--stage); }
+  .agent-item.is-selected { background: color-mix(in oklab, var(--ink) 8%, transparent); box-shadow: inset 0 0 0 1px var(--border); }
+  .agent-selection { display: grid; place-items: center; width: 15px; flex-shrink: 0; visibility: hidden; }
+  .agent-selection .icon { width: 14px; height: 14px; }
+  .agent-item.is-selected .agent-selection { visibility: visible; }
   .agent-avatar { width: 31px; height: 31px; display: grid; place-items: center; position: relative; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; corner-shape: squircle; color: var(--muted); font-size: 12px; font-weight: 500; }
+  .agent-avatar.has-image { border: 0; background: transparent; }
+  .bot-avatar { display: block; flex-shrink: 0; }
+  .fanout-identity { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; max-width: 100%; }
   .avatar-status { position: absolute; width: 7px; height: 7px; right: -1px; bottom: -1px; border-radius: 50%; border: 2px solid var(--background); box-sizing: content-box; background: var(--subtle); }
   .avatar-status.online { background: var(--success); }
   .agent-text { flex: 1; min-width: 0; }