openvisio-agent 0.25.9 → 0.25.10

package/CHANGELOG.md

@@ -1,6 +1,11 @@
 # Changelog
 
-## Unreleased
+## [0.25.10] — 2026-09-21
+
+- Send `thinking`, `working`, and `typing` activity through the authenticated agent WebSocket, with the REST endpoint retained only while the socket is reconnecting.
+- Accept documented and compatible WebSocket event envelopes on both the watcher and frontend, including flat bare-agent `agent_status` frames, and normalize them before routing.
+- Keep active cycles running through ordinary peer-agent chatter; only an analyzed redirect or explicit stand-down cancels work in that thread.
+- Compact Agent Studio activity and cycle rows into single-line summaries so more history remains visible at once.
 
 ## [0.25.9] — 2026-09-21
 

package/package.json

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

package/scripts/certify.mjs

@@ -18,6 +18,7 @@ for (const directory of ['src', 'bin', 'studio']) {
 }
 run('unit and behavior tests', process.execPath, ['--test'])
 run('frontend typecheck', 'npm', ['run', 'typecheck'], join(repo, 'frontend'))
+run('frontend realtime frame tests', process.execPath, ['--test', 'lib/api/backend/realtimeFrame.test.mjs'], join(repo, 'frontend'))
 run('package dry run', 'npm', ['pack', '--dry-run'])
 run('diff whitespace check', 'git', ['diff', '--check'], repo)
 
@@ -32,6 +33,7 @@ const codexProxy = readFileSync(join(root, 'src', 'codex-mcp-proxy.mjs'), 'utf8'
 const prPush = readFileSync(join(root, 'src', 'pr-push.mjs'), 'utf8')
 const cli = readFileSync(join(root, 'bin', 'cli.mjs'), 'utf8')
 const websocket = readFileSync(join(root, 'src', 'ws.mjs'), 'utf8')
+const activityReporter = readFileSync(join(root, 'src', 'activity-reporter.mjs'), 'utf8')
 const cycleQueue = readFileSync(join(root, 'src', 'cycle-queue.mjs'), 'utf8')
 const mastraHarness = readFileSync(join(root, 'src', 'mastra-harness.mjs'), 'utf8')
 const runtimeProviders = readFileSync(join(root, 'src', 'runtime-providers.mjs'), 'utf8')
@@ -100,7 +102,7 @@ const assertions = [
   ['work and reply cancellation targets are isolated', watcher.includes('item.control.cancelled = true') && watcher.includes('item.control.runner?.cancelCurrent')],
   ['fresh threads resolve the dedicated agent channel', watcher.includes('dedicatedChannel(Array.isArray(channels)') && watcher.includes('No dedicated agent channel available for a new thread')],
   ['presence follows runtime activity and stops refreshing with its cycle', watcher.includes('createActivityReporter') && watcher.includes("activity.set(data.cycleId, live.control.statusTargets, 'working')") && watcher.includes('activity.clear(cycleControl.cycleId)')],
-  ['websocket client cannot emit legacy agent_status', !websocket.includes('agent_status')],
+  ['agent activity prefers websocket with REST reconnect fallback', activityReporter.includes("type: 'agent_status'") && activityReporter.includes('sendFrame?.') && activityReporter.includes('agentStateRequest') && websocket.includes('return true')],
   ['frontend consumes thinking event', activityHook.includes("'channel:agent:thinking'")],
   ['frontend consumes working event', activityHook.includes("'channel:agent:working'")],
   ['frontend consumes typing event', activityHook.includes("'channel:agent:typing'")],

package/src/activity-reporter.mjs

@@ -2,11 +2,11 @@ import { agentStateRequest } from './events.mjs'
 
 // Presence is ephemeral, independent of task completion and message delivery.
 // The backend supports no "done" event; stopping refresh lets the UI TTL clear it.
-export function createActivityReporter({ backend, apiKey, identifier, fetchImpl = fetch, now = Date.now, log = () => {}, intervalMs = 3_000 }) {
+export function createActivityReporter({ backend, apiKey, identifier, sendFrame, fetchImpl = fetch, now = Date.now, log = () => {}, intervalMs = 3_000 }) {
   const cycles = new Map(), channels = new Map(), pending = new Set()
   let closed = false
   const pulse = () => {
-    if (closed || !backend) return
+    if (closed || (!backend && !sendFrame)) return
     const states = new Map()
     const priority = { thinking: 0, working: 1, typing: 2 }
     for (const cycle of cycles.values()) for (const channelId of cycle.channels) {
@@ -15,11 +15,19 @@ export function createActivityReporter({ backend, apiKey, identifier, fetchImpl
     for (const [channelId, state] of states) {
       const prior = channels.get(channelId)
       if (prior?.busy || now() < (prior?.retryAt || 0) || (prior?.state === state && now() - prior.at < (state === 'working' ? 10_000 : 3_000))) continue
+      const entry = { state, at: now(), busy: false, controller: null }
+      channels.set(channelId, entry)
+      // The authenticated agent socket is the live event path. Older backend
+      // stages and reconnect gaps retain the REST endpoint as a fallback.
+      try {
+        if (sendFrame?.({ type: 'agent_status', channel_id: channelId, state }) === true) continue
+      } catch { /* fall through to REST */ }
+      if (!backend) continue
       const controller = new AbortController()
       const timer = setTimeout(() => controller.abort(), 5_000)
       timer.unref?.()
-      const entry = { state, at: now(), busy: true, controller }
-      channels.set(channelId, entry)
+      entry.busy = true
+      entry.controller = controller
       const request = agentStateRequest(backend, channelId, state, apiKey, identifier)
       const operation = Promise.resolve().then(() => fetchImpl(request.url, { ...request.init, signal: controller.signal })).then(async response => {
         await response.body?.cancel?.()
@@ -42,6 +50,6 @@ export function createActivityReporter({ backend, apiKey, identifier, fetchImpl
     clear(cycleId) { cycles.delete(cycleId); pulse() },
     pulse,
     async settled() { await Promise.allSettled([...pending]) },
-    async close() { closed = true; clearInterval(timer); cycles.clear(); for (const entry of channels.values()) entry.controller.abort(); await Promise.allSettled([...pending]) },
+    async close() { closed = true; clearInterval(timer); cycles.clear(); for (const entry of channels.values()) entry.controller?.abort(); await Promise.allSettled([...pending]) },
   }
 }

package/src/watch.mjs

@@ -619,7 +619,10 @@ export function createBackendWatcher({ backend, wsUrl, apiKey, identifier, slug,
   // Activity belongs to an individual cycle. Independent ticket workers must
   // not clear or overwrite each other's status targets.
   const replyStatusTargets = new Set()
-  const activity = dependencies.activityReporter || createActivityReporter({ backend, apiKey, identifier, log })
+  const activity = dependencies.activityReporter || createActivityReporter({
+    backend, apiKey, identifier, log,
+    sendFrame: (frame) => handle?.send?.(frame) === true,
+  })
   const sendStatus = (channelId, state) => {
     const id = cycleContext.getStore()?.cycleId
     const live = liveCycles.get(id)
@@ -2074,10 +2077,10 @@ export function createBackendWatcher({ backend, wsUrl, apiKey, identifier, slug,
       const target = classifyConversationTarget(msg, [...selfAliases], { threadOwned })
       if (target.action === 'ignore') {
         log('agent:mention ignored before model start (' + target.reason + ')')
-        // A redirect or another agent taking over invalidates any older work or
-        // draft still queued for this thread. The event name alone cannot retain
-        // ownership after the actual message says otherwise.
-        if (cid != null && threadRoot != null && (target.reason === 'explicit-other-recipient' || target.reason === 'other-agent-chatter' || target.reason === 'redirected-to-later-agent')) {
+        // Ordinary peer chatter is additional thread context, not cancellation.
+        // Only a message whose recipient analysis shows an actual handoff may
+        // invalidate older work; explicit stand-down is handled below.
+        if (cid != null && threadRoot != null && (target.reason === 'explicit-other-recipient' || target.reason === 'redirected-to-later-agent')) {
           cancelThread(cid, threadRoot, text || target.reason)
         }
         return

package/src/ws.mjs

@@ -18,6 +18,31 @@ const KEEPALIVE_MS = 30_000 // refresh last_seen_at well within any idle timeout
 const BACKOFF_MIN_MS = 1_000
 const BACKOFF_MAX_MS = 30_000
 
+const own = (value, key) => Object.prototype.hasOwnProperty.call(value, key)
+
+/** Accept the documented `{k,d}` event and compatible backend relay envelopes.
+ * Keeping this at the transport boundary prevents provider/watch logic from
+ * learning several wire formats. */
+export function normalizeAgentWsEvent(raw) {
+  let msg = raw
+  if (typeof msg === 'string') { try { msg = JSON.parse(msg) } catch { return null } }
+  if (!msg || typeof msg !== 'object' || Array.isArray(msg)) return null
+  if (!msg.k && !msg.kind && !msg.event && !msg.event_type && !msg.eventType && !msg.type && own(msg, 'body')) {
+    return normalizeAgentWsEvent(msg.body)
+  }
+  const kind = [msg.k, msg.kind, msg.event, msg.event_type, msg.eventType, msg.type].find(value => typeof value === 'string' && value.trim())
+  if (!kind || kind === 'event') return null
+  let payload
+  if (own(msg, 'd')) payload = msg.d
+  else if (own(msg, 'payload')) payload = msg.payload
+  else if (own(msg, 'data')) payload = msg.data
+  else {
+    const { k: _k, kind: _kind, event: _event, event_type: _eventType, eventType: _eventTypeCamel, type: _type, ...body } = msg
+    payload = body
+  }
+  return { kind, payload, envelope: msg }
+}
+
 /** Bail early with a friendly message if the runtime has no global WebSocket. */
 export function assertWebSocket(fail) {
   if (typeof globalThis.WebSocket === 'function') return
@@ -86,13 +111,12 @@ export function connectAgentWs({ wsUrl, apiKey, identifier, onEvent, onConnect,
 
     sock.addEventListener('message', (ev) => {
       if (sock !== ws) return
-      let msg
-      try { msg = JSON.parse(typeof ev.data === 'string' ? ev.data : String(ev.data)) } catch { return }
-      const kind = msg && msg.k
+      const event = normalizeAgentWsEvent(typeof ev.data === 'string' ? ev.data : String(ev.data))
+      const kind = event?.kind
       if (!kind || kind === 'keepalive:ack') return // keepalive round-trip, nothing to do
       // Error metadata often lives on the JSON envelope rather than `d`. Preserve
       // it so callers do not receive an unhelpful empty object.
-      try { onEvent(kind, kind === 'error' ? msg : msg.d) } catch (e) { log('event handler error: ' + (e && e.message ? e.message : e)) }
+      try { onEvent(kind, kind === 'error' ? event.envelope : event.payload) } catch (e) { log('event handler error: ' + (e && e.message ? e.message : e)) }
     })
 
     const down = (why) => {
@@ -119,8 +143,14 @@ export function connectAgentWs({ wsUrl, apiKey, identifier, onEvent, onConnect,
       subscribe()
       return true
     },
-    /** Fire-and-forget send (no-op if the socket isn't open). */
-    send(obj) { try { if (ws && ws.readyState === 1) ws.send(JSON.stringify(obj)) } catch { /* closing */ } },
+    /** Fire-and-forget send. Returns whether the frame reached an open socket. */
+    send(obj) {
+      try {
+        if (!ws || ws.readyState !== 1) return false
+        ws.send(JSON.stringify(obj))
+        return true
+      } catch { return false }
+    },
     close() {
       closed = true
       clearKeepalive()

package/studio/style.css

@@ -139,18 +139,19 @@
   .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 2px 15px; min-height: 37px; }
   .section-heading h2 { font-size: 12px; }
   .section-heading .muted { font-size: 12px; }
-  .activity-list { display: flex; flex-direction: column; gap: 8px; max-height: min(67vh, 810px); min-height: 380px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 2px; }
-  .activity-row { display: flex; align-items: flex-start; gap: 11px; text-align: left; width: 100%; padding: 16px 14px; border: 1px solid transparent; border-radius: var(--radius-md); corner-shape: squircle; background: transparent; }
+  .activity-list { display: flex; flex-direction: column; gap: 2px; max-height: min(67vh, 810px); min-height: 380px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 2px; }
+  .activity-row { display: flex; align-items: center; gap: 8px; text-align: left; width: 100%; min-height: 40px; padding: 6px 9px; border: 1px solid transparent; border-radius: 12px; corner-shape: squircle; background: transparent; }
   .activity-row:hover { background: var(--hover); }
   .activity-row.is-selected { background: var(--surface); border-color: transparent; box-shadow: 0 1px 2px #00000006; }
-  .event-icon { width: 34px; height: 34px; display: grid; place-items: center; flex-shrink: 0; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; corner-shape: squircle; margin-top: 1px; }
-  .event-icon .icon { width: 18px; height: 18px; }
-  .event-body { min-width: 0; flex: 1; }
-  .event-title { display: block; font-size: 14px; font-weight: 500; line-height: 1.55; overflow-wrap: anywhere; }
-  .event-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 4px; line-height: 1.7; overflow-wrap: anywhere; }
-  .event-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 7px; }
-  .event-meta .badge { font-size: 12px; padding: 1px 6px; }
-  .event-time { font-size: 12px; color: var(--subtle); white-space: nowrap; font-weight: 400; font-family: var(--font-mono); margin-top: 4px; }
+  .event-icon { width: 27px; height: 27px; display: grid; place-items: center; flex-shrink: 0; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; corner-shape: squircle; }
+  .event-icon .icon { width: 14px; height: 14px; }
+  .event-body { min-width: 0; flex: 1; display: flex; align-items: center; gap: 7px; overflow: hidden; }
+  .event-title { flex: 0 1 auto; max-width: 38%; font-size: 12px; font-weight: 500; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .event-description { flex: 1 1 auto; min-width: 24px; overflow: hidden; font-size: 11px; font-weight: 400; color: var(--muted); margin: 0; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
+  .event-meta { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; gap: 5px; font-size: 11px; font-weight: 400; color: var(--muted); margin: 0; white-space: nowrap; overflow: hidden; }
+  .event-meta > span:not(.badge) { max-width: 86px; overflow: hidden; text-overflow: ellipsis; }
+  .event-meta .badge { font-size: 10px; padding: 1px 5px; }
+  .event-time { font-size: 10px; color: var(--subtle); white-space: nowrap; font-weight: 400; font-family: var(--font-mono); margin: 0; }
   .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--hover); color: var(--muted); font-size: 12px; font-weight: 400; white-space: nowrap; }
   .badge .dot { width: 4px; height: 4px; }
   .badge.active, .badge.completed, .badge.online { color: var(--success); }
@@ -353,10 +354,10 @@
   .guide-callout { padding: 18px; border-radius: var(--radius-md); background: var(--stage); }
   @media print { .guide-nav, .guide-header .button, .skip-link { display: none; } .guide-layout { display: block; } .guide-shell { max-width: none; padding: 0; } .guide-content section { break-inside: avoid; } }
   @media (max-width: 640px) { .guide-shell { padding: 24px 20px; } .guide-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; } .guide-nav { position: static; } .panel-toolbar { flex-wrap: wrap; } }
-  @media (min-width: 1550px) { .workspace { padding-bottom: 28px; } .content-grid { grid-template-columns: minmax(280px, .85fr) minmax(360px, 1.15fr); gap: 24px; } .activity-row { padding: 15px; } .inspector { padding: 2px; } }
+  @media (min-width: 1550px) { .workspace { padding-bottom: 28px; } .content-grid { grid-template-columns: minmax(280px, .85fr) minmax(360px, 1.15fr); gap: 24px; } .activity-row { padding: 6px 9px; } .inspector { padding: 2px; } }
   @media (max-width: 1120px) { .app-shell { grid-template-columns: 185px minmax(0, 1fr); gap: 20px; width: calc(100% - 40px); } .sidebar { padding-inline: 10px; } .workspace { padding: 8px 0 18px; } .content-grid { grid-template-columns: minmax(250px, 1fr) minmax(270px, 1fr); }  .metrics { gap: 8px; } .header-actions { gap: 10px; } .metric-caption { font-size: 12px; } }
   @media (max-width: 940px) { .content-grid { grid-template-columns: minmax(0, 1fr); } .inspector { max-height: none; min-height: 220px; } .inspector-empty { min-height: 200px; } .activity-list { min-height: 250px; max-height: 440px; } .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-header { align-items: flex-start; } .header-actions { flex-direction: column; align-items: flex-end; padding-top: 7px; gap: 13px; } .page-description { max-width: 230px; } }
-  @media (max-width: 640px) { .app-shell { grid-template-columns: minmax(0, 1fr); width: 100%; margin: 0 auto; gap: 0; min-height: 100dvh; } .sidebar { position: static; height: auto; padding: 16px 18px 8px; border: 0; border-radius: 0; overflow-y: visible; } .brand { margin: 0 0 16px; font-size: 13px; } .brand-caption { display: none; } .brand-mark { width: 28px; height: 28px; } .brand-mark img { width: 56px; height: 56px; } .sidebar-title, .agent-search, .sidebar-note { display: none; } .agent-list { flex-direction: row; overflow-x: auto; padding: 2px 2px 7px; gap: 6px; } .agent-item { width: auto; min-width: 132px; max-width: 170px; padding: 8px; flex-shrink: 0; } .agent-avatar { width: 25px; height: 25px; font-size: 12px; } .agent-name { font-size: 12px; } .agent-caption { font-size: 12px; } .workspace { padding: 17px 18px 20px; } .page-header { margin-bottom: 22px; gap: 10px; } h1 { font-size: 27px; } .page-description { font-size: 12px; max-width: 210px; } .eyebrow { font-size: 12px; } .header-actions .button { min-height: 40px; font-size: 12px; padding: 6px 10px; } .connection-status { font-size: 12px; } .metrics { margin-bottom: 22px; } .metric-value { font-size: 27px; } .metric-label { font-size: 12px; } .panel-toolbar { gap: 8px; } .tab { padding: 7px 9px; font-size: 12px; gap: 5px; } .tab .icon { width: 12px; height: 12px; } .follow-control { font-size: 12px; gap: 4px; } .filters { flex-wrap: wrap; gap: 7px; } .search-field { flex-basis: 100%; } .select-field { flex: 1; } .select-field select { font-size: 12px; } .content-grid { gap: 20px; } .page-footer { flex-direction: column; gap: 4px; } .event-time { font-size: 12px; } .activity-row { gap: 8px; padding: 12px 8px; } .inspector { padding: 2px; } }
+  @media (max-width: 640px) { .app-shell { grid-template-columns: minmax(0, 1fr); width: 100%; margin: 0 auto; gap: 0; min-height: 100dvh; } .sidebar { position: static; height: auto; padding: 16px 18px 8px; border: 0; border-radius: 0; overflow-y: visible; } .brand { margin: 0 0 16px; font-size: 13px; } .brand-caption { display: none; } .brand-mark { width: 28px; height: 28px; } .brand-mark img { width: 56px; height: 56px; } .sidebar-title, .agent-search, .sidebar-note { display: none; } .agent-list { flex-direction: row; overflow-x: auto; padding: 2px 2px 7px; gap: 6px; } .agent-item { width: auto; min-width: 132px; max-width: 170px; padding: 8px; flex-shrink: 0; } .agent-avatar { width: 25px; height: 25px; font-size: 12px; } .agent-name { font-size: 12px; } .agent-caption { font-size: 12px; } .workspace { padding: 17px 18px 20px; } .page-header { margin-bottom: 22px; gap: 10px; } h1 { font-size: 27px; } .page-description { font-size: 12px; max-width: 210px; } .eyebrow { font-size: 12px; } .header-actions .button { min-height: 40px; font-size: 12px; padding: 6px 10px; } .connection-status { font-size: 12px; } .metrics { margin-bottom: 22px; } .metric-value { font-size: 27px; } .metric-label { font-size: 12px; } .panel-toolbar { gap: 8px; } .tab { padding: 7px 9px; font-size: 12px; gap: 5px; } .tab .icon { width: 12px; height: 12px; } .follow-control { font-size: 12px; gap: 4px; } .filters { flex-wrap: wrap; gap: 7px; } .search-field { flex-basis: 100%; } .select-field { flex: 1; } .select-field select { font-size: 12px; } .content-grid { gap: 20px; } .page-footer { flex-direction: column; gap: 4px; } .event-time { font-size: 10px; } .activity-row { gap: 6px; padding: 6px; } .event-description { display: none; } .inspector { padding: 2px; } }
   .model-settings-summary:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 18px; margin-bottom: 22px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface, white); }
   .model-settings-summary h2 { margin: 0 0 6px; font-size: 13px; font-weight: 500; }
   .model-settings-summary p { margin: 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }