openvisio-agent 0.20.0 → 0.21.1

package/studio/app.mjs

@@ -14,7 +14,7 @@ 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;
@@ -164,6 +164,22 @@ 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 = {
@@ -238,10 +254,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 +350,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 +370,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 +490,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 +537,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 +561,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 +572,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 +596,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} complete`));
+    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 +777,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 +785,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>
@@ -112,7 +123,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>

package/studio/index.html

@@ -6,11 +6,19 @@
     <meta name="color-scheme" content="light">
     <meta name="description" content="A local view of your BYO agents, their work, and recorded progress.">
     <title>Agent studio · OpenVisio</title>
+    <link rel="icon" type="image/svg+xml" href="/openvisio.svg">
+    <link rel="preload" href="/satoshi-400.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="stylesheet" href="/style.css">
     <script type="module" src="/app.mjs"></script>
   </head>
   <body>
     <svg class="icon-definitions" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><defs>
+      <symbol id="i-agents" viewBox="0 0 24 24"><path d="M12 3v4m-7 5v-2h14v2"/><rect x="8" y="1" width="8" height="5" rx="2"/><rect x="1" y="13" width="8" height="8" rx="3"/><rect x="15" y="13" width="8" height="8" rx="3"/><path d="M4 17h2m12 0h2"/></symbol>
+      <symbol id="i-chevron" viewBox="0 0 24 24"><path d="m9 5 7 7-7 7"/></symbol>
+      <symbol id="i-book" viewBox="0 0 24 24"><path d="M12 5v16m0-16C9 3 5 3 2 4v15c4-1 7-1 10 2 3-3 6-3 10-2V4c-3-1-7-1-10 1Z"/></symbol>
+      <symbol id="i-command" viewBox="0 0 24 24"><path d="m5 7 5 5-5 5m9 0h6"/></symbol>
+      <symbol id="i-loader" viewBox="0 0 24 24"><path d="M12 3a9 9 0 1 1-9 9"/></symbol>
+
       <symbol id="i-grid" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="2"/><rect x="14" y="3" width="7" height="7" rx="2"/><rect x="3" y="14" width="7" height="7" rx="2"/><rect x="14" y="14" width="7" height="7" rx="2"/></symbol>
       <symbol id="i-pulse" viewBox="0 0 24 24"><path d="M3 12h4l3-7 4 14 3-7h4"/></symbol>
       <symbol id="i-stack" viewBox="0 0 24 24"><path d="m3 7 9-4 9 4-9 4-9-4Zm0 5 9 4 9-4M3 17l9 4 9-4"/></symbol>
@@ -30,28 +38,56 @@
     <a class="skip-link" href="#workspace">Skip to activity</a>
     <div class="app-shell">
       <aside class="sidebar" aria-label="Agent navigation">
-        <a class="brand" href="/" aria-label="OpenVisio Agent studio"><span class="brand-mark"><svg class="icon" aria-hidden="true"><use href="#i-grid"/></svg></span><span>OpenVisio<span class="brand-caption">Local workspace</span></span></a>
+        <a class="brand" href="/" aria-label="OpenVisio Agent studio"><span class="brand-mark"><img src="/openvisio.svg" alt="" width="68" height="68"></span><span>OpenVisio<span class="brand-caption">Local workspace</span></span></a>
         <div class="sidebar-title"><span>Agents</span><span class="count" id="agent-count">0</span></div>
         <label class="agent-search"><svg class="icon" aria-hidden="true"><use href="#i-search"/></svg><input id="agent-search" type="search" placeholder="Find an agent" aria-label="Filter agent list" autocomplete="off"></label>
-        <nav id="agent-list" class="agent-list" aria-label="Select an agent"><button class="agent-item is-selected" type="button" aria-pressed="true"><span class="agent-avatar"><svg class="icon" aria-hidden="true"><use href="#i-grid"/></svg></span><span class="agent-text"><span class="agent-name">All agents</span><span class="agent-caption">Waiting for data</span></span></button></nav>
-        <div class="sidebar-note"><span class="local-indicator"><span class="dot"></span>On this machine</span><p>Recorded actions from your running BYO agents.</p><span class="mono" id="server-address">localhost:4317</span></div>
+        <nav id="agent-list" class="agent-list" aria-label="Select an agent"><button class="agent-item is-selected" type="button" aria-pressed="true"><span class="agent-avatar"><svg class="icon" aria-hidden="true"><use href="#i-agents"/></svg></span><span class="agent-text"><span class="agent-name">All agents</span><span class="agent-caption">Waiting for data</span></span></button></nav>
+        <div class="sidebar-resources">
+          <section class="documentation-card oa-card" aria-labelledby="documentation-title">
+            <h2 id="documentation-title"><svg class="icon" aria-hidden="true"><use href="#i-book"/></svg>Documentation</h2>
+            <div class="documentation-inset oa-inset">
+              <p>Set up your agents and get to know Studio.</p>
+              <a class="button documentation-link" href="/guide">Read the guide<svg class="icon" aria-hidden="true"><use href="#i-arrow"/></svg></a>
+            </div>
+          </section>
+          <div class="sidebar-note"><span class="local-indicator"><span class="dot"></span>On this machine</span><p>Recorded actions from your running BYO agents.</p><span class="mono" id="server-address">localhost:4317</span></div>
+        </div>
       </aside>
       <main id="workspace" class="workspace" tabindex="-1">
         <header class="page-header">
           <div><div class="eyebrow">Runtime overview <span id="demo-badge" class="badge demo-badge" hidden>Demo data</span></div><h1>Agent studio</h1><p class="page-description">See what your agents are doing, as it happens.</p></div>
-          <div class="header-actions"><a class="button" href="/guide">User guide</a><span id="connection-status" class="connection-status" role="status"><span class="dot"></span><span>Connecting</span></span><button id="pause-button" class="button" type="button" aria-pressed="false"><svg class="icon" aria-hidden="true"><use href="#i-pause"/></svg><span>Pause view</span></button></div>
+          <div class="header-actions"><a class="button header-documentation" href="/guide"><svg class="icon" aria-hidden="true"><use href="#i-book"/></svg>Documentation</a><span id="connection-status" class="connection-status" role="status"><span class="dot"></span><span>Connecting</span></span><button id="pause-button" class="button" type="button" aria-pressed="false"><svg class="icon" aria-hidden="true"><use href="#i-pause"/></svg><span>Pause view</span></button></div>
         </header>
         <div id="notice" class="notice" role="status" hidden></div>
+        <section id="model-settings-summary" class="model-settings-summary" aria-label="Agent model settings" hidden>
+          <div><h2 id="model-settings-agent">Model settings</h2><p id="model-settings-state" role="status"></p></div>
+          <button id="open-model-settings" class="button" type="button">Model settings</button>
+        </section>
+        <dialog id="model-settings-dialog" aria-labelledby="model-settings-title">
+          <form id="model-settings-form" class="model-settings-form">
+            <div class="section-heading"><h2 id="model-settings-title">Model settings</h2><button id="close-model-settings" class="button" type="button" aria-label="Close model settings">Close</button></div>
+            <p id="model-settings-description">Choose the models this agent uses. Changes apply to its next request; work already running continues.</p>
+            <label for="reply-model">Reply model<span>For chat, triage, and coordination</span></label>
+            <input id="reply-model" list="runtime-models" placeholder="Choose or search models" required maxlength="200" autocomplete="off">
+            <label for="coding-model">Coding model<span>For assigned coding work</span></label>
+            <input id="coding-model" list="runtime-models" placeholder="Choose or search models" required maxlength="200" autocomplete="off">
+            <datalist id="runtime-models"></datalist>
+            <p id="model-catalog-status" role="status">Loading model choices…</p>
+            <p class="detail-note">Model access and usage limits depend on the provider connected on this computer.</p>
+            <p id="model-settings-error" role="alert" hidden></p>
+            <div class="model-settings-actions"><button id="reload-models" class="button" type="button">Reload models</button><button id="save-model-settings" class="button primary" type="submit">Save models</button></div>
+          </form>
+        </dialog>
         <section class="metrics" aria-label="Workspace summary">
-          <article class="metric"><div class="metric-label">Active cycles<svg class="icon" aria-hidden="true"><use href="#i-pulse"/></svg></div><div class="metric-value" id="metric-active">—</div><div class="metric-caption" id="metric-active-caption">Waiting for activity</div></article>
-          <article class="metric"><div class="metric-label">In the queue<svg class="icon" aria-hidden="true"><use href="#i-stack"/></svg></div><div class="metric-value" id="metric-queued">—</div><div class="metric-caption" id="metric-queued-caption">Cycles waiting to start</div></article>
-          <article class="metric"><div class="metric-label">Processes<svg class="icon" aria-hidden="true"><use href="#i-terminal"/></svg></div><div class="metric-value" id="metric-processes">—</div><div class="metric-caption" id="metric-processes-caption">Watchers and coding runtimes</div></article>
-          <article class="metric"><div class="metric-label">Recorded events<svg class="icon" aria-hidden="true"><use href="#i-list"/></svg></div><div class="metric-value" id="metric-events">—</div><div class="metric-caption" id="metric-events-caption">Recent local history</div></article>
+          <article class="metric oa-card"><div class="metric-label">Active cycles<svg class="icon" aria-hidden="true"><use href="#i-pulse"/></svg></div><div class="metric-inset oa-inset"><div class="metric-value" id="metric-active">—</div><div class="metric-caption" id="metric-active-caption">Waiting for activity</div></div></article>
+          <article class="metric oa-card"><div class="metric-label">In the queue<svg class="icon" aria-hidden="true"><use href="#i-stack"/></svg></div><div class="metric-inset oa-inset"><div class="metric-value" id="metric-queued">—</div><div class="metric-caption" id="metric-queued-caption">Cycles waiting to start</div></div></article>
+          <article class="metric oa-card"><div class="metric-label">Processes<svg class="icon" aria-hidden="true"><use href="#i-terminal"/></svg></div><div class="metric-inset oa-inset"><div class="metric-value" id="metric-processes">—</div><div class="metric-caption" id="metric-processes-caption">Watchers and coding runtimes</div></div></article>
+          <article class="metric oa-card"><div class="metric-label">Recorded events<svg class="icon" aria-hidden="true"><use href="#i-list"/></svg></div><div class="metric-inset oa-inset"><div class="metric-value" id="metric-events">—</div><div class="metric-caption" id="metric-events-caption">Recent local history</div></div></article>
         </section>
         <section class="work-panel" aria-label="Agent activity">
           <div class="panel-toolbar"><div class="view-tabs" role="group" aria-label="Choose a view"><button class="tab is-selected" type="button" data-view="activity" aria-pressed="true"><svg class="icon" aria-hidden="true"><use href="#i-pulse"/></svg>Activity</button><button class="tab" type="button" data-view="cycles" aria-pressed="false"><svg class="icon" aria-hidden="true"><use href="#i-stack"/></svg>Cycles</button><button class="tab" type="button" data-view="processes" aria-pressed="false"><svg class="icon" aria-hidden="true"><use href="#i-terminal"/></svg>Processes</button></div><label class="follow-control"><input type="checkbox" id="follow-latest" checked>Follow latest</label></div>
           <div class="filters"><label class="search-field"><svg class="icon" aria-hidden="true"><use href="#i-search"/></svg><input id="event-search" type="search" placeholder="Search actions, tickets, files…" aria-label="Search recorded activity" autocomplete="off"></label><label class="select-field"><span class="sr-only">Event kind</span><select id="kind-filter"><option value="all">All kinds</option><option value="cycle">Cycles</option><option value="tool">Tools</option><option value="plan">Plans</option><option value="output">Output</option><option value="process">Processes</option><option value="runtime">Watchers</option></select></label><label class="select-field"><span class="sr-only">Status</span><select id="status-filter"><option value="all">All statuses</option><option value="active">Active</option><option value="queued">Queued</option><option value="completed">Completed</option><option value="failed">Failed</option><option value="cancelled">Cancelled</option><option value="blocked">Blocked</option><option value="skipped">Skipped</option><option value="recovering">Recovering</option><option value="idle">Idle</option><option value="connecting">Connecting</option><option value="timeout">Timed out</option><option value="offline">Offline</option></select></label></div>
-          <div class="content-grid"><div class="activity-panel"><div class="section-heading"><h2 id="activity-heading">Latest activity</h2><span class="muted" id="result-count">Connecting…</span></div><div id="activity-list" class="activity-list" aria-label="Recorded activity"><div class="loading-state" role="status"><span class="skeleton skeleton-wide"></span><span class="skeleton"></span><span class="skeleton skeleton-wide"></span><span>Connecting to your local agents…</span></div></div><button id="load-more" class="button load-more" type="button" hidden>Show earlier activity</button></div><aside id="inspector" class="inspector" tabindex="-1" aria-label="Selected activity details"><div class="inspector-empty"><span class="empty-icon"><svg class="icon" aria-hidden="true"><use href="#i-terminal"/></svg></span><h2>The work, in view</h2><p>Select a cycle to see its tools, explicit plan, and recorded output.</p></div></aside></div>
+          <div class="content-grid"><div class="activity-panel oa-card"><div class="section-heading"><h2 id="activity-heading">Latest activity</h2><span class="muted" id="result-count">Connecting…</span></div><div id="activity-list" class="activity-list oa-inset" aria-label="Recorded activity"><div class="loading-state" role="status"><span class="skeleton skeleton-wide"></span><span class="skeleton"></span><span class="skeleton skeleton-wide"></span><span>Connecting to your local agents…</span></div></div><button id="load-more" class="button load-more" type="button" hidden>Show earlier activity</button></div><aside id="inspector" class="inspector" tabindex="-1" aria-label="Selected activity details"><div class="inspector-empty"><span class="empty-icon"><svg class="icon" aria-hidden="true"><use href="#i-terminal"/></svg></span><h2>The work, in view</h2><p>Select a cycle to see its tools, explicit plan, and recorded output.</p></div></aside></div>
         </section>
         <footer class="page-footer"><span id="history-label">Local history · no events yet</span><span id="updated-at">Waiting for the first snapshot</span></footer>
       </main>

package/studio/openvisio.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" width="240" height="240"><polygon points="90.6,111.0 120.0,128.0 90.6,145.0 61.1,128.0" fill="#A5B4FC"/><polygon points="61.1,128.0 90.6,145.0 90.6,179.0 61.1,162.0" fill="#6366F1"/><polygon points="120.0,128.0 120.0,162.0 90.6,179.0 90.6,145.0" fill="#4338CA"/><polygon points="149.4,111.0 178.9,128.0 149.4,145.0 120.0,128.0" fill="#A5B4FC"/><polygon points="120.0,128.0 149.4,145.0 149.4,179.0 120.0,162.0" fill="#6366F1"/><polygon points="178.9,128.0 178.9,162.0 149.4,179.0 149.4,145.0" fill="#4338CA"/><polygon points="120,60 149.4,77.0 120,94 90.6,77.0" fill="#FCD34D"/><polygon points="90.6,77.0 120,94 120,128 90.6,111.0" fill="#F59E0B"/><polygon points="149.4,77.0 149.4,111.0 120,128 120,94" fill="#B45309"/></svg>