openvisio-agent 0.20.0 → 0.22.0

package/studio/app.mjs

@@ -1,7 +1,7 @@
 // The studio displays recorded, visible actions. It never starts work or infers a plan.
 const MAX_EVENTS = 1000;
 const PAGE_SIZE = 40;
-const terminalStatuses = new Set(['completed', 'failed', 'cancelled', 'offline', 'skipped', 'blocked', 'timeout']);
+const terminalStatuses = new Set(['completed', 'failed', 'cancelled', 'offline', 'skipped', 'blocked', 'timeout', 'continued']);
 const text = (value, max = 24000) => value == null ? '' : String(value).slice(0, max);
 const record = value => value && typeof value === 'object' && !Array.isArray(value) ? value : {};
 const array = value => Array.isArray(value) ? value : [];
@@ -14,10 +14,10 @@ export function normalizeStatus(value, fallback = 'observed') {
   if (['active', 'running', 'started', 'ready', 'in_progress', 'working', 'online', 'preflight'].includes(status)) return 'active';
   if (['queued', 'pending', 'waiting'].includes(status)) return 'queued';
   if (['completed', 'complete', 'finished', 'done', 'success', 'succeeded', 'ok'].includes(status)) return 'completed';
-  if (['failed', 'failure', 'error', 'rejected'].includes(status)) return 'failed';
+  if (['failed', 'failure', 'error', 'rejected', 'rate_limited'].includes(status)) return 'failed';
   if (['cancelled', 'canceled', 'aborted', 'interrupted'].includes(status)) return 'cancelled';
   if (['offline', 'stopped', 'disconnected', 'exited'].includes(status)) return 'offline';
-  if (['skipped', 'recovering', 'idle', 'blocked', 'timeout'].includes(status)) return status;
+  if (['skipped', 'recovering', 'idle', 'blocked', 'timeout', 'continued'].includes(status)) return status;
   if (['starting', 'connecting', 'reused'].includes(status)) return 'connecting';
   return fallback;
 }
@@ -76,7 +76,7 @@ export function deriveModel(input) {
       cycle.events.push(event);
       cycle.lastSeen = event.timestamp;
       // Merge only fields that describe the cycle; tool kind/status belong to that tool.
-      for (const field of ['model', 'workdir', 'watcherPid', 'ticket', 'thread', 'lane', 'queueMs', 'durationMs', 'reason']) {
+      for (const field of ['model', 'workdir', 'watcherPid', 'ticket', 'thread', 'lane', 'queueMs', 'durationMs', 'reason', 'finishedBy']) {
         if (data[field] != null) cycle.data[field] = data[field];
       }
       if (event.type.startsWith('cycle.')) {
@@ -164,11 +164,28 @@ export function summarizeModel(model, selectedAgent = 'all') {
   };
 }
 
+// Shared task identity groups recorded work; it does not imply delegation.
+export function taskActivityCycles(model, selectedCycle) {
+  const ticket = record(selectedCycle.data.ticket);
+  if (ticket.projectId == null || ticket.ticketId == null) return [selectedCycle];
+  const latest = new Map();
+  for (const cycle of model.cycles) {
+    const candidate = record(cycle.data.ticket);
+    if (String(candidate.projectId) !== String(ticket.projectId) || String(candidate.ticketId) !== String(ticket.ticketId)) continue;
+    const id = agentId(cycle.agent);
+    if (!latest.has(id) || timeValue(cycle.lastSeen) > timeValue(latest.get(id).lastSeen)) latest.set(id, cycle);
+  }
+  // Keep the selected historical cycle visible even when this agent ran again.
+  latest.set(agentId(selectedCycle.agent), selectedCycle);
+  return [...latest.values()].sort((a, b) => agentId(a.agent).localeCompare(agentId(b.agent)));
+}
+
 export function eventTitle(event) {
   const data = record(event?.data);
   const titles = {
     'runtime.started': 'Watcher connected', 'runtime.heartbeat': 'Watcher heartbeat', 'runtime.stopped': 'Watcher stopped',
     'cycle.queued': 'Cycle queued', 'cycle.started': 'Cycle started', 'cycle.finished': 'Cycle finished',
+    'cycle.continued': 'Continued in coding workspace',
     'cycle.completed': 'Cycle completed', 'cycle.cancelled': 'Cycle cancelled', 'cycle.failed': 'Cycle failed',
     'plan.updated': 'Plan updated', 'output.progress': 'Progress update', 'output.final': 'Final response',
     'process.started': 'Coding runtime starting', 'process.ready': 'Coding runtime ready', 'process.stopped': 'Coding runtime stopped',
@@ -222,7 +239,7 @@ export function filterModelItems(model, { view = 'activity', selectedAgent = 'al
     && (!query || searchableEvent(event).includes(query)));
 }
 
-const statusLabels = { active: 'Active', queued: 'Queued', completed: 'Completed', failed: 'Failed', cancelled: 'Cancelled', offline: 'Offline', observed: 'Recorded', demo: 'Simulated', uninstrumented: 'No activity yet', unknown: 'Unknown', skipped: 'Skipped', recovering: 'Recovering', idle: 'Idle', blocked: 'Blocked', timeout: 'Timed out', connecting: 'Connecting' };
+const statusLabels = { continued: 'Continued in workspace', active: 'Active', queued: 'Queued', completed: 'Completed', failed: 'Failed', cancelled: 'Cancelled', offline: 'Offline', observed: 'Recorded', demo: 'Simulated', uninstrumented: 'No activity yet', unknown: 'Unknown', skipped: 'Skipped', recovering: 'Recovering', idle: 'Idle', blocked: 'Blocked', timeout: 'Timed out', connecting: 'Connecting' };
 const kindIcons = { cycle: 'stack', tool: 'tool', plan: 'list', output: 'message', runtime: 'pulse', process: 'terminal' };
 const shortTime = timestamp => timeValue(timestamp) ? new Date(timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false }) : '—';
 const fullTime = timestamp => timeValue(timestamp) ? new Date(timestamp).toLocaleString() : 'Not recorded';
@@ -238,10 +255,13 @@ if (typeof document !== 'undefined') initializeStudio();
 
 function initializeStudio() {
   const $ = id => document.getElementById(id);
+  const launch = new URLSearchParams(location.hash.slice(1));
+  let launchSettings = launch.get('settings') === '1';
+  let editingAgent = null, editingSettings = null, settingsRequest = 0;
   const state = {
     snapshot: null, model: null, pending: null, paused: false, connected: false,
-    selectedAgent: 'all', agentSearch: '', search: '', kind: 'all', status: 'all',
-    view: 'activity', selectedCycle: null, selectedEvent: null, selectedProcess: null,
+    selectedAgent: launch.get('agent') || 'all', agentSearch: '', search: '', kind: 'all', status: 'all',
+    view: 'activity', detailView: 'plan', selectedCycle: null, selectedEvent: null, selectedProcess: null,
     limit: PAGE_SIZE, follow: true, pendingUpdates: 0, error: null,
   };
   let scheduled = false;
@@ -331,7 +351,7 @@ function initializeStudio() {
     button.type = 'button';
     button.setAttribute('aria-pressed', String(state.selectedAgent === id));
     const avatar = node('span', 'agent-avatar');
-    if (id === 'all') avatar.append(icon('grid'));
+    if (id === 'all') avatar.append(icon('agents'));
     else { avatar.textContent = name.slice(0, 2).toUpperCase(); avatar.append(node('span', `avatar-status ${agent.status}`)); }
     const body = node('span', 'agent-text');
     body.append(node('span', 'agent-name', name), node('span', 'agent-caption', caption));
@@ -351,6 +371,64 @@ function initializeStudio() {
     $('metric-processes-caption').textContent = state.snapshot.demo ? 'Simulated processes' : summary.unreportedProcesses ? `${summary.unreportedProcesses} runtime PID not reported` : `${online} ${online === 1 ? 'watcher' : 'watchers'} connected`;
     $('metric-events-caption').textContent = 'In the available local history';
   }
+  function renderModelSettings() {
+    const agent = state.model.agents.find(agent => agentId(agent) === state.selectedAgent);
+    const section = $('model-settings-summary');
+    section.hidden = !agent || state.snapshot.demo;
+    if (!agent || state.snapshot.demo) return;
+    $('model-settings-agent').textContent = `${agentName(agent)} · Models`;
+    $('open-model-settings').disabled = !agent.settingsEditable;
+    const settings = agent.modelSettings || {};
+    const pending = settings.revision && agent.appliedModelRevision !== settings.revision;
+    $('model-settings-state').textContent = !agent.settingsEditable ? 'Model controls are available for agents configured on this computer.'
+      : pending ? agent.modelControlsSupported && agent.status === 'online' ? 'Saved · waiting for the watcher to apply your choices.' : 'Saved for the next watcher connection. Older watchers need an update to apply changes live.'
+      : `Replies: ${settings.chatModel || settings.model || 'Runtime default'} · Coding: ${settings.model || 'Runtime default'}`;
+    if (launchSettings && agent.settingsEditable) { launchSettings = false; void openModelSettings(agent); }
+  }
+  async function settingsFetch(path, options) {
+    const response = await fetch(path, { cache: 'no-store', ...options });
+    const body = await response.json();
+    if (!response.ok) throw new Error(body.error || 'Could not load model settings. Try again.');
+    return body;
+  }
+  async function loadModels(agent, request) {
+    $('model-catalog-status').textContent = 'Loading model choices…';
+    try {
+      const { models } = await settingsFetch(`/api/agents/${encodeURIComponent(agent.slug)}/models`);
+      if (request !== settingsRequest) return;
+      const choices = [...new Set([editingSettings?.model, editingSettings?.chatModel, ...models].filter(Boolean))];
+      $('runtime-models').replaceChildren(...choices.map(model => { const option = node('option'); option.value = model; return option; }));
+      $('model-catalog-status').textContent = choices.length ? `${choices.length} models · select a field to search, or enter a model ID.` : 'Enter a model ID supported by your connected runtime.';
+    } catch (error) {
+      if (request === settingsRequest) $('model-catalog-status').textContent = `${error.message} You can still enter a model ID.`;
+    }
+  }
+  async function openModelSettings(agent) {
+    const request = ++settingsRequest;
+    editingAgent = agent; editingSettings = null;
+    $('model-settings-title').textContent = `${agentName(agent)} · Model settings`;
+    $('model-settings-error').hidden = true;
+    $('reply-model').value = ''; $('coding-model').value = '';
+    $('runtime-models').replaceChildren();
+    $('save-model-settings').disabled = true;
+    $('reload-models').disabled = true;
+    $('model-catalog-status').textContent = 'Loading settings…';
+    if (!$('model-settings-dialog').open) $('model-settings-dialog').showModal();
+    try {
+      const settings = await settingsFetch(`/api/agents/${encodeURIComponent(agent.slug)}/settings`);
+      if (request !== settingsRequest) return;
+      editingSettings = settings;
+      $('reply-model').value = settings.chatModel || settings.model || '';
+      $('coding-model').value = settings.model || '';
+      $('save-model-settings').disabled = false;
+      $('reload-models').disabled = false;
+      void loadModels(agent, request);
+    } catch (error) {
+      if (request !== settingsRequest) return;
+      $('model-settings-error').hidden = false; $('model-settings-error').textContent = error.message;
+      $('model-catalog-status').textContent = 'Close this panel and try again when the agent is available.';
+    }
+  }
   function resetSelection() {
     state.limit = PAGE_SIZE;
     state.selectedEvent = null;
@@ -413,7 +491,12 @@ function initializeStudio() {
     return baseRow({ id: event.id, title: eventTitle(event), detail: description(event), agent: event.agent, status: eventStatus(event), timestamp: event.timestamp,
       iconName: kindIcons[event.type.split('.')[0]] || 'pulse', selected: state.selectedEvent === event.id,
       extra: text(ticket.slug || (ticket.ticketId != null ? `Ticket ${ticket.ticketId}` : '')),
-      onClick: () => { state.selectedEvent = event.id; state.selectedCycle = cycleKey(event); state.selectedProcess = null; },
+      onClick: () => {
+        state.selectedEvent = event.id; state.selectedCycle = cycleKey(event); state.selectedProcess = null;
+        if (event.type.startsWith('tool.')) state.detailView = 'commands';
+        else if (event.type.startsWith('output.')) state.detailView = 'response';
+        else if (event.type === 'plan.updated') state.detailView = 'plan';
+      },
     });
   }
   function cycleRow(cycle) {
@@ -455,7 +538,7 @@ function initializeStudio() {
     return empty;
   }
   function detailSection(title, iconName) {
-    const section = node('section', 'detail-section');
+    const section = node('section', 'detail-section oa-card');
     const heading = node('h3'); if (iconName) heading.append(icon(iconName)); heading.append(document.createTextNode(title));
     section.append(heading);
     return section;
@@ -479,6 +562,7 @@ function initializeStudio() {
     const inspector = $('inspector');
     // Preserve the user's expanded history and scroll across live snapshots.
     const historyOpen = inspector.querySelector('.history-details')?.open;
+    const runtimeOpen = inspector.querySelector('.runtime-details')?.open;
     const oldScroll = inspector.scrollTop;
     const process = state.view === 'processes' ? state.model.processes.find(item => item.id === state.selectedProcess) : null;
     const cycle = state.view !== 'processes' ? state.model.cycles.find(item => item.id === state.selectedCycle) : null;
@@ -489,15 +573,20 @@ function initializeStudio() {
       inspector.replaceChildren(empty); return;
     }
     if (process) renderProcessDetail(inspector, process);
-    else if (cycle) renderCycleDetail(inspector, cycle, event);
+    else if (cycle) renderCycleDetail(inspector, cycle);
     else renderEventDetail(inspector, event);
     const history = inspector.querySelector('.history-details');
     if (history && historyOpen) history.open = true;
+    const runtime = inspector.querySelector('.runtime-details');
+    if (runtime && runtimeOpen) runtime.open = true;
     if (!state.follow) inspector.scrollTop = oldScroll;
   }
-  function renderCycleDetail(inspector, cycle, selectedEvent) {
-    inspector.replaceChildren(inspectorHeader('Cycle details', cycleTitle(cycle), `${agentName(cycle.agent)}${cycle.agent.provider ? ` · ${cycle.agent.provider}` : ''}`, cycle.status));
-    const overview = detailSection('Runtime', 'terminal');
+  function renderCycleDetail(inspector, cycle) {
+    inspector.replaceChildren(taskActivityCard(cycle));
+    const overview = node('details', 'detail-section runtime-details');
+    const runtimeSummary = node('summary', '', 'Runtime details');
+    runtimeSummary.dataset.focusKey = `runtime:${cycle.id}`;
+    overview.append(runtimeSummary);
     const ticket = record(cycle.data.ticket); const thread = record(cycle.data.thread);
     overview.append(detailGrid([
       ['Model', cycle.data.model], ['Lane', cycle.data.lane || cycle.data.kind],
@@ -508,62 +597,137 @@ function initializeStudio() {
       ['Thread', thread.threadId != null ? `${thread.channelId != null ? `Channel ${thread.channelId} · ` : ''}${thread.threadId}` : null],
       ['Workspace', cycle.data.workdir, true],
     ]));
-    inspector.append(overview);
     if (cycle.status === 'offline') {
       const note = detailSection('Activity unavailable', 'pulse');
       note.append(node('p', 'detail-note', 'This watcher stopped reporting or restarted. The recorded history has no final outcome for this cycle. Check the ticket and watcher log before deciding what to do next.'));
       inspector.append(note);
     }
     if (cycle.data.reason) { const reason = detailSection('Outcome', 'message'); reason.append(node('p', 'detail-note', cycle.data.reason)); inspector.append(reason); }
-    if (selectedEvent && !selectedEvent.type.startsWith('cycle.')) {
-      const selected = detailSection('Selected action', kindIcons[selectedEvent.type.split('.')[0]] || 'pulse');
-      selected.append(node('p', 'tool-name', eventTitle(selectedEvent)), node('p', 'detail-note', fullTime(selectedEvent.timestamp)));
-      const detail = description(selectedEvent); if (detail) selected.append(node('pre', 'tool-title', detail));
-      inspector.append(selected);
+    const variants = node('div', 'detail-variants');
+    variants.setAttribute('role', 'group'); variants.setAttribute('aria-label', 'Cycle details view');
+    for (const [id, label, iconName] of [['plan', 'Plan', 'list'], ['commands', 'Commands', 'command'], ['response', 'Response', 'message']]) {
+      const button = node('button', `button variant${state.detailView === id ? ' is-selected' : ''}`);
+      button.type = 'button'; button.dataset.focusKey = `detail-view:${id}`;
+      button.setAttribute('aria-pressed', String(state.detailView === id));
+      button.append(icon(iconName), node('span', '', label));
+      button.addEventListener('click', () => { state.detailView = id; scheduleRender(); });
+      variants.append(button);
     }
-    const plan = detailSection('Explicit plan', 'list');
-    if (cycle.plan?.length) {
-      const list = node('ol', 'plan-list');
-      cycle.plan.forEach((step, index) => {
-        const item = node('li', `plan-step ${step.status}`); const marker = node('span', 'plan-marker');
-        if (step.status === 'completed') marker.append(icon('check')); else marker.textContent = String(index + 1);
-        item.append(marker, node('span', 'plan-content', step.content), node('span', 'plan-status', statusLabels[step.status] || 'Pending'));
-        list.append(item);
-      });
-      plan.append(list);
-    } else plan.append(node('p', 'detail-note', 'No explicit plan recorded for this cycle.'));
-    inspector.append(plan);
-    if (cycle.tools.size) {
-      const tools = detailSection('Tools & coding actions', 'tool'); tools.querySelector('h3').append(node('span', 'count', cycle.tools.size));
+    inspector.append(variants);
+    const detail = node('div', 'cycle-detail-content');
+    inspector.append(detail);
+    if (state.detailView === 'plan') {
+      const plan = detailSection('Plan', 'list');
+      if (cycle.plan?.length) {
+        plan.querySelector('h3').append(node('span', 'count', `${cycle.plan.filter(step => step.status === 'completed').length}/${cycle.plan.length}`));
+        const list = node('ol', 'plan-list');
+        cycle.plan.forEach((step, index) => {
+          const item = node('li', `plan-step ${step.status}`); const marker = node('span', 'plan-marker');
+          if (step.status === 'completed') marker.append(icon('check')); else marker.textContent = String(index + 1);
+          item.append(marker, node('span', 'plan-content', step.content), node('span', 'plan-status', statusLabels[step.status] || 'Pending'));
+          list.append(item);
+        });
+        plan.append(list);
+      } else plan.append(node('p', 'detail-note', 'No explicit plan recorded for this cycle.'));
+      detail.append(plan);
+    }
+    if (state.detailView === 'commands') {
+      const tools = detailSection('Commands & tools', 'command'); tools.querySelector('h3').append(node('span', 'count', cycle.tools.size));
       const list = node('div', 'tools-list');
       for (const tool of [...cycle.tools.values()].reverse()) {
         const item = node('div', 'tool-item'); const heading = node('div', 'tool-heading');
         heading.append(node('span', 'tool-name', tool.name || tool.kind || 'Tool'), badge(tool.status)); item.append(heading);
-        if (tool.title) item.append(node('pre', 'tool-title', tool.title));
+        if (tool.title && tool.title !== tool.name) item.append(node('pre', 'tool-title', tool.title));
         for (const location of array(tool.locations)) {
           if (location?.path) item.append(node('span', 'file-location', `${location.path}${location.line != null ? `:${location.line}` : ''}`));
         }
         list.append(item);
       }
-      tools.append(list); inspector.append(tools);
+      if (!cycle.tools.size) list.append(node('p', 'detail-note', 'Commands and tool calls will appear here as the agent works.'));
+      tools.append(list); detail.append(tools);
     }
-    if (cycle.progress.size) {
-      const progress = detailSection('Progress updates', 'message');
-      for (const entry of cycle.progress.values()) progress.append(node('pre', 'recorded-output output-entry', entry.text));
-      inspector.append(progress);
-    }
-    if (cycle.final !== null) {
-      const final = detailSection('Final response', 'check'); final.append(node('pre', 'recorded-output', cycle.final || 'The recorded final response is empty.')); inspector.append(final);
-    }
-    if (!cycle.progress.size && cycle.final === null) {
-      const output = detailSection('Recorded output', 'message'); output.append(node('p', 'detail-note', 'Visible progress and the final response will appear here when recorded.')); inspector.append(output);
+    if (state.detailView === 'response') {
+      if (cycle.progress.size) {
+        const progress = detailSection('Progress updates', 'message');
+        for (const entry of cycle.progress.values()) progress.append(node('pre', 'recorded-output output-entry', entry.text));
+        detail.append(progress);
+      }
+      if (cycle.final !== null) {
+        const final = detailSection('Final response', 'check'); final.append(node('pre', 'recorded-output', cycle.final || 'The recorded final response is empty.')); detail.append(final);
+      }
+      if (!cycle.progress.size && cycle.final === null) {
+        const output = detailSection('Recorded output', 'message'); output.append(node('p', 'detail-note', 'Visible progress and the final response will appear here when recorded.')); detail.append(output);
+      }
     }
+    inspector.append(overview);
     const history = node('details', 'detail-section history-details'); history.append(node('summary', '', `Cycle history · ${cycle.events.length} events`));
     history.querySelector('summary').dataset.focusKey = `history:${cycle.id}`;
     for (const event of cycle.events) { const row = node('div', 'mini-event'); row.append(node('time', '', shortTime(event.timestamp)), node('span', '', eventTitle(event))); history.append(row); }
     history.append(detailGrid([['Cycle ID', cycle.cycleId, true], ['Run ID', cycle.runId, true]]));
     inspector.append(history);
   }
+
+  function taskActivityCard(cycle) {
+    const related = taskActivityCycles(state.model, cycle);
+    const displayed = related.slice(0, 4);
+    if (!displayed.some(item => item.id === cycle.id)) displayed[displayed.length - 1] = cycle;
+    const card = node('section', 'task-activity-card oa-card');
+    card.setAttribute('aria-label', 'Task activity');
+    const header = node('div', 'fanout-header');
+    const title = node('h2', '', 'Task activity');
+    const count = node('span', 'badge fanout-count');
+    const dots = node('span', 'agent-dots'); dots.setAttribute('aria-hidden', 'true');
+    displayed.forEach((_, index) => dots.append(node('span', `dot agent-color-${index}`)));
+    count.append(dots, node('span', '', `${related.filter(item => item.status === 'completed').length}/${related.length} turns ended`));
+    header.append(title, count);
+    const surface = node('div', 'fanout-surface oa-inset');
+    const task = node('div', 'fanout-task');
+    task.append(node('span', 'eyebrow', 'Task'), node('span', '', cycleTitle(cycle)));
+    surface.append(task);
+    const graph = node('div', 'fanout-graph');
+    const root = node('span', `fanout-root ${cycle.status}`); root.append(icon('stack'));
+    graph.append(root);
+    const lines = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    lines.setAttribute('viewBox', '0 0 400 80'); lines.setAttribute('preserveAspectRatio', 'none');
+    lines.setAttribute('class', 'fanout-lines'); lines.setAttribute('aria-hidden', 'true');
+    for (let index = 0; index < displayed.length; index++) {
+      const x = (index + .5) * 400 / displayed.length;
+      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+      path.setAttribute('d', `M200 0 C200 38 ${x} 38 ${x} 80`); lines.append(path);
+    }
+    graph.append(lines);
+    const branches = node('div', 'fanout-branches');
+    displayed.forEach((item, index) => {
+      const branch = node('button', `fanout-branch agent-color-${index}${item.id === cycle.id ? ' is-selected' : ''}`);
+      branch.type = 'button'; branch.dataset.focusKey = `branch:${item.id}`;
+      branch.setAttribute('aria-label', `${agentName(item.agent)} · ${statusLabels[item.status] || item.status} · View cycle`);
+      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)));
+      branch.addEventListener('click', () => {
+        state.selectedCycle = item.id; state.selectedEvent = null; state.selectedAgent = 'all';
+        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();
+      });
+      branches.append(branch);
+    });
+    graph.append(branches); surface.append(graph);
+    const rows = node('div', 'fanout-results');
+    for (const item of displayed) {
+      const row = node('div', 'fanout-result');
+      const elapsed = Number.isFinite(item.data.durationMs) ? duration(item.data.durationMs) : statusLabels[item.status] || item.status;
+      const summary = item.final || [...item.progress.values()].at(-1)?.text || `${item.tools.size} tool calls recorded`;
+      row.append(node('span', 'fanout-result-name', agentName(item.agent)), node('span', 'fanout-result-summary', summary), node('span', 'fanout-duration', elapsed));
+      rows.append(row);
+    }
+    surface.append(rows);
+    const footer = node('div', 'fanout-footer');
+    footer.append(node('span', '', related.length > displayed.length ? `${displayed.length} of ${related.length} agents shown` : `${cycle.events.length} events in this cycle`), badge(cycle.status));
+    card.append(header, surface, footer);
+    return card;
+  }
   function renderEventDetail(inspector, event) {
     inspector.replaceChildren(inspectorHeader('Event details', eventTitle(event), agentName(event.agent), eventStatus(event)));
     const section = detailSection('Recorded event', kindIcons[event.type.split('.')[0]] || 'pulse');
@@ -614,7 +778,7 @@ function initializeStudio() {
     for (const button of document.querySelectorAll('[data-view]')) {
       const selected = button.dataset.view === state.view; button.classList.toggle('is-selected', selected); button.setAttribute('aria-pressed', String(selected));
     }
-    renderAgents(); renderMetrics(); renderActivity();
+    renderAgents(); renderMetrics(); renderActivity(); renderModelSettings();
     $('history-label').textContent = `Local history · ${state.model.events.length} of up to ${Number(state.snapshot.limits?.maxEvents) || MAX_EVENTS} recent events`;
     $('updated-at').textContent = `Snapshot at ${shortTime(state.snapshot.generatedAt)}`;
     $('updated-at').title = fullTime(state.snapshot.generatedAt);
@@ -622,6 +786,29 @@ function initializeStudio() {
   }
 
   $('server-address').textContent = location.host;
+  $('open-model-settings').addEventListener('click', () => {
+    const agent = state.model.agents.find(agent => agentId(agent) === state.selectedAgent);
+    if (agent?.settingsEditable) void openModelSettings(agent);
+  });
+  $('close-model-settings').addEventListener('click', () => $('model-settings-dialog').close());
+  $('model-settings-dialog').addEventListener('close', () => { settingsRequest++; editingAgent = null; editingSettings = null; });
+  $('reload-models').addEventListener('click', () => { if (editingAgent) void loadModels(editingAgent, settingsRequest); });
+  $('model-settings-form').addEventListener('submit', async event => {
+    event.preventDefault();
+    if (!editingAgent || !editingSettings) return;
+    const request = settingsRequest;
+    $('save-model-settings').disabled = true; $('save-model-settings').textContent = 'Saving…';
+    $('model-settings-error').hidden = true;
+    try {
+      await settingsFetch(`/api/agents/${encodeURIComponent(editingAgent.slug)}/settings`, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ version: editingSettings.version, model: $('coding-model').value.trim(), chatModel: $('reply-model').value.trim() }) });
+      if (request !== settingsRequest) return;
+      $('model-settings-dialog').close();
+      toast('Models saved. New requests will use your choices once the watcher applies them.');
+      receive(await settingsFetch('/api/snapshot'));
+    } catch (error) {
+      if (request === settingsRequest) { $('model-settings-error').hidden = false; $('model-settings-error').textContent = error.message; }
+    } finally { $('save-model-settings').disabled = false; $('save-model-settings').textContent = 'Save models'; }
+  });
   $('pause-button').addEventListener('click', () => {
     state.paused = !state.paused;
     if (!state.paused && state.pending) { const pending = state.pending; state.pending = null; state.pendingUpdates = 0; receive(pending); }

package/studio/guide.html

@@ -6,6 +6,7 @@
     <meta name="color-scheme" content="light">
     <meta name="description" content="Get started with Agent Studio, understand agent activity, and troubleshoot your local viewer.">
     <title>Agent Studio user guide · OpenVisio</title>
+    <link rel="icon" type="image/svg+xml" href="/openvisio.svg">
     <link rel="stylesheet" href="/style.css">
   </head>
   <body>
@@ -22,6 +23,7 @@
           <a href="#find-work">Find and inspect work</a>
           <a href="#statuses">Understand statuses</a>
           <a href="#controls">Pause and follow</a>
+          <a href="#models">Change models</a>
           <a href="#access">Keyboard and reading</a>
           <a href="#troubleshooting">Troubleshooting</a>
           <a href="#history">History and privacy</a>
@@ -30,13 +32,21 @@
           <section id="start">
             <h2>Open Studio</h2>
             <p>Agent Studio is a local viewer for bring-your-own (BYO) agents connected to an OpenVisio team. It shows recorded actions from Claude Code, Codex, and OpenCode watchers on this machine.</p>
-            <p>With a Studio-capable version of <code>openvisio-agent</code> installed, run:</p>
+            <p>In the OpenVisio app, open <strong>Agents → Open Agent Studio</strong>. Agents can also include this button in chat replies. Updated backend watchers start Studio automatically on this computer.</p>
+            <p>You can also open Studio manually:</p>
             <pre><code>openvisio-agent studio</code></pre>
             <p>Your browser opens the local address printed in the terminal, usually <code>http://127.0.0.1:4317</code>. Keep that terminal running while you use Studio.</p>
             <p>To explore without connecting an agent:</p>
             <pre><code>openvisio-agent studio --demo</code></pre>
             <p>The demo uses clearly labeled sample activity. It makes no model calls. To return to your agents, press <kbd>Ctrl+C</kbd> in the Studio terminal and run the command again without <code>--demo</code>.</p>
           </section>
+          <section id="models">
+            <h2>Change models</h2>
+            <p>Select an agent in the sidebar, choose <strong>Model settings</strong>, select its reply and coding models, then choose <strong>Save models</strong>. Model fields let you search the runtime’s choices or enter a custom model ID.</p>
+            <p>Updated watchers apply saved choices to the next request without a restart. Work already running continues with its original model. Studio shows when a save is waiting for the watcher. Offline agents retain the selection for their next connection; older watchers need an update to apply changes live.</p>
+            <p>OpenCode choices come from its local model catalog. Listing a model does not guarantee credentials or available quota. If a model is rate-limited, choose one with available quota or retry after the provider’s limit resets.</p>
+            <p>Studio controls agents configured on this computer. An agent running on another teammate’s computer must be managed there.</p>
+          </section>
           <section id="watchers">
             <h2>Show your agents</h2>
             <p>A <strong>watcher</strong> is the local program that listens for assignments and messages, then starts your coding agent when work arrives. Studio displays what the watcher records.</p>
@@ -57,6 +67,7 @@
               <li>Select a row. Its details appear beside the list, or below it on a smaller screen.</li>
             </ol>
             <p>A <strong>cycle</strong> is one unit of agent work. It can include a plan, several tool calls, progress updates, and a final response. Expand <strong>Cycle history</strong> to review its recorded sequence.</p>
+            <p>Switch between <strong>Plan</strong>, <strong>Commands</strong>, and <strong>Response</strong> for steps, tool calls, and visible output. The <strong>Task activity</strong> card groups recorded work on the same ticket by agent; select an agent in the diagram to inspect its cycle. Expand <strong>Runtime details</strong> for model and timing information.</p>
             <p><strong>No explicit plan recorded</strong> means the provider did not send a plan in the available history. A missing process ID means the provider did not report that operating-system identifier. Neither message alone means the work failed.</p>
             <p>The process summary counts distinct reported process IDs associated with connected watchers. It is not a system-wide process monitor. The demo deliberately shows no real process count.</p>
           </section>
@@ -65,10 +76,11 @@
             <dl>
               <dt>Live</dt><dd>Your browser is connected to the local Studio server. Check each agent’s own status to see whether its watcher is connected.</dd>
               <dt>Queued / Active</dt><dd>Work is waiting to start, or the current watcher has recorded it as running.</dd>
-              <dt>Completed</dt><dd>The selected action or cycle reported completion. A completed tool is only one step; inspect the cycle’s final response and the ticket for the overall result.</dd>
+              <dt>Completed</dt><dd>The selected action finished, or the agent ended its turn. Ending a turn does not automatically mark its ticket done. A completed tool is only one step; inspect the cycle’s final response and the ticket for the overall result.</dd>
               <dt>Blocked / Failed / Timed out</dt><dd>Read the cycle’s Outcome and final response, then check the ticket or watcher log for the cause. Studio has no retry or approval button.</dd>
               <dt>Cancelled / Skipped</dt><dd>The work was stopped or did not proceed. These are separate from successful completion.</dd>
               <dt>Idle / Connecting / Recovering</dt><dd>A coding runtime is waiting, connecting, or attempting recovery. These describe the runtime’s last recorded state.</dd>
+              <dt>Continued in workspace</dt><dd>The agent requested its coding workspace and carried the same request and context into a work session. Follow that session for the final response.</dd>
               <dt>Offline</dt><dd>The watcher stopped reporting, exited, or was replaced by a newer run. An unfinished cycle’s outcome is unknown; offline does not mean completed or failed.</dd>
               <dt>Simulated</dt><dd>This record belongs to the demonstration. No real agent is working on it.</dd>
             </dl>
@@ -112,7 +124,7 @@ openvisio-agent watch --name ada</code></pre>
             <h2>History and privacy</h2>
             <p>Studio reads local journals under <code>~/.openvisio/observability</code>. The viewer serves up to 500 recent events from a bounded set of journal files. Logs rotate, large text can be shortened, and bursts can drop records. This is a recent activity view, not a complete audit archive.</p>
             <p>The journal records visible plans, tool metadata, and public output. Private reasoning and raw tool payloads are excluded. Known credentials and recognizable secret formats are redacted, but visible output can still include project text and file paths. Review it before sharing a screenshot or journal.</p>
-            <p>Studio’s server accepts local connections only and has no controls that modify your team or start model calls. Your running watchers continue to use their configured team and provider connections.</p>
+            <p>Studio’s server accepts local connections only. Saving models changes only the selected agent’s local model settings; it does not start a model call or modify your team. Your running watchers continue to use their configured team and provider connections.</p>
             <p><a href="/">Return to Agent Studio</a></p>
           </section>
         </main>