Agent UI

ui/qvac/swarm-ui.js

@@ -0,0 +1,386 @@
+/**
+ * Multi-agent swarm panel — animated cards, live activity, progress.
+ */
+
+/** @type {Record<string, { icon: string, hue: number, short: string }>} */
+export const AGENT_VISUAL = {
+  host: { icon: '◎', hue: 168, short: 'Host' },
+  hot: { icon: '⚡', hue: 28, short: 'Hot' },
+  processes: { icon: '⧉', hue: 210, short: 'Procs' },
+  anomalies: { icon: '⚑', hue: 0, short: 'Alerts' },
+  fleet: { icon: '⬡', hue: 265, short: 'Fleet' },
+  storage: { icon: '▣', hue: 45, short: 'Store' },
+}
+
+/**
+ * @param {HTMLElement|null|undefined} host
+ * @param {{
+ *   onStop?: () => void,
+ * }} [opts]
+ */
+export function createSwarmPanel(host, opts = {}) {
+  /** @type {Map<string, {
+   *   el: HTMLElement,
+   *   status: string,
+   *   label: string,
+   *   description?: string,
+   *   activity: string,
+   *   summary?: string,
+   *   startedAt?: number,
+   *   finishedAt?: number,
+   * }>} */
+  const cards = new Map()
+  /** @type {Array<{ t: number, text: string, kind: string }>} */
+  let log = []
+  let total = 0
+  let done = 0
+  let panelOpen = false
+  /** @type {ReturnType<typeof setInterval>|null} */
+  let tickTimer = null
+
+  function vis(id) {
+    return AGENT_VISUAL[id] || { icon: '◆', hue: 200, short: id }
+  }
+
+  function ensureShell() {
+    if (!host) return null
+    if (host.querySelector('.qvac-swarm')) return host.querySelector('.qvac-swarm')
+    host.innerHTML = `
+      <div class="qvac-swarm" data-state="idle">
+        <header class="qvac-swarm-head">
+          <div class="qvac-swarm-brand">
+            <span class="qvac-swarm-orb" aria-hidden="true">
+              <span class="qvac-swarm-orb-core"></span>
+              <span class="qvac-swarm-orb-ring"></span>
+              <span class="qvac-swarm-orb-ring qvac-swarm-orb-ring-2"></span>
+            </span>
+            <div class="qvac-swarm-titles">
+              <strong class="qvac-swarm-title">Multi-agent swarm</strong>
+              <span class="qvac-swarm-subtitle muted">Dispatching specialists…</span>
+            </div>
+          </div>
+          <div class="qvac-swarm-progress-wrap" title="Agents finished">
+            <svg class="qvac-swarm-ring" viewBox="0 0 36 36" aria-hidden="true">
+              <path class="qvac-swarm-ring-bg" d="M18 2.5a15.5 15.5 0 1 1 0 31 15.5 15.5 0 0 1 0-31z"/>
+              <path class="qvac-swarm-ring-fg" d="M18 2.5a15.5 15.5 0 1 1 0 31 15.5 15.5 0 0 1 0-31z"
+                stroke-dasharray="0 100" pathLength="100"/>
+            </svg>
+            <span class="qvac-swarm-count">0/0</span>
+          </div>
+        </header>
+        <div class="qvac-swarm-grid" role="list"></div>
+        <div class="qvac-swarm-log" aria-live="polite">
+          <div class="qvac-swarm-log-inner"></div>
+        </div>
+        <footer class="qvac-swarm-foot muted">
+          <span class="qvac-swarm-foot-status">Idle</span>
+          <span class="qvac-swarm-foot-hint">Live tool specialists · parallel</span>
+        </footer>
+      </div>
+    `
+    return host.querySelector('.qvac-swarm')
+  }
+
+  function startTick() {
+    stopTick()
+    tickTimer = setInterval(() => {
+      for (const [id, st] of cards) {
+        if (st.status !== 'running' && st.status !== 'start') continue
+        const el = st.el
+        const timer = el?.querySelector('.qvac-agent-card-timer')
+        if (timer && st.startedAt) {
+          timer.textContent = `${((Date.now() - st.startedAt) / 1000).toFixed(1)}s`
+        }
+      }
+    }, 120)
+  }
+
+  function stopTick() {
+    if (tickTimer) clearInterval(tickTimer)
+    tickTimer = null
+  }
+
+  /**
+   * @param {Array<{ id: string, label: string, description?: string }>} agents
+   * @param {string} [query]
+   */
+  function begin(agents, query = '') {
+    if (!host) return
+    host.classList.remove('hidden')
+    panelOpen = true
+    cards.clear()
+    log = []
+    total = agents.length
+    done = 0
+    const shell = ensureShell()
+    if (!shell) return
+    shell.dataset.state = 'running'
+    const grid = shell.querySelector('.qvac-swarm-grid')
+    const logInner = shell.querySelector('.qvac-swarm-log-inner')
+    if (grid) grid.innerHTML = ''
+    if (logInner) logInner.innerHTML = ''
+    const sub = shell.querySelector('.qvac-swarm-subtitle')
+    if (sub) {
+      sub.textContent = query
+        ? `Investigating: ${String(query).slice(0, 72)}${query.length > 72 ? '…' : ''}`
+        : 'Dispatching specialists…'
+    }
+    updateProgress(shell)
+    setFoot(shell, 'Spawning agents…', true)
+    pushLog(shell, 'swarm', `Launching ${agents.length} specialist${agents.length === 1 ? '' : 's'}`)
+
+    agents.forEach((a, i) => {
+      const v = vis(a.id)
+      const el = document.createElement('article')
+      el.className = 'qvac-agent-card'
+      el.dataset.status = 'queued'
+      el.dataset.agent = a.id
+      el.style.setProperty('--agent-hue', String(v.hue))
+      el.style.setProperty('--agent-delay', `${i * 60}ms`)
+      el.setAttribute('role', 'listitem')
+      el.innerHTML = `
+        <div class="qvac-agent-card-glow" aria-hidden="true"></div>
+        <header class="qvac-agent-card-head">
+          <span class="qvac-agent-avatar" aria-hidden="true">
+            <span class="qvac-agent-avatar-ico">${v.icon}</span>
+            <span class="qvac-agent-pulse"></span>
+          </span>
+          <div class="qvac-agent-card-meta">
+            <strong class="qvac-agent-card-name">${esc(a.label)}</strong>
+            <span class="qvac-agent-card-desc muted">${esc(a.description || v.short)}</span>
+          </div>
+          <span class="qvac-agent-card-badge">queued</span>
+        </header>
+        <div class="qvac-agent-card-activity">
+          <span class="qvac-agent-activity-dot"></span>
+          <span class="qvac-agent-activity-text">Waiting in queue…</span>
+        </div>
+        <div class="qvac-agent-card-result muted hidden"></div>
+        <footer class="qvac-agent-card-foot">
+          <span class="qvac-agent-card-timer">—</span>
+          <span class="qvac-agent-card-state-ico" aria-hidden="true"></span>
+        </footer>
+      `
+      grid?.appendChild(el)
+      cards.set(a.id, {
+        el,
+        status: 'queued',
+        label: a.label,
+        description: a.description,
+        activity: 'Waiting in queue…',
+      })
+      // Stagger entrance
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => el.classList.add('is-in'))
+      })
+    })
+    startTick()
+  }
+
+  /**
+   * @param {{
+   *   id: string,
+   *   label?: string,
+   *   description?: string,
+   *   status: string,
+   *   activity?: string,
+   *   summary?: string,
+   *   error?: string,
+   * }} ev
+   */
+  function update(ev) {
+    if (!host || !panelOpen) return
+    const shell = host.querySelector('.qvac-swarm')
+    if (!shell) return
+    let st = cards.get(ev.id)
+    if (!st) {
+      // Late card
+      begin(
+        [{ id: ev.id, label: ev.label || ev.id, description: ev.description }],
+        ''
+      )
+      st = cards.get(ev.id)
+    }
+    if (!st) return
+
+    const prev = st.status
+    st.status = ev.status
+    if (ev.activity) st.activity = ev.activity
+    if (ev.summary) st.summary = ev.summary
+    if (ev.error) st.summary = ev.error
+
+    const el = st.el
+    el.dataset.status = normalizeStatus(ev.status)
+
+    if (ev.status === 'start' || ev.status === 'running') {
+      if (!st.startedAt) st.startedAt = Date.now()
+      el.dataset.status = 'running'
+      setCardActivity(el, ev.activity || `Running ${ev.label || st.label}…`)
+      setBadge(el, 'running')
+      if (prev !== 'running' && prev !== 'start') {
+        pushLog(shell, ev.id, `${st.label} started`)
+      }
+    } else if (ev.status === 'done') {
+      st.finishedAt = Date.now()
+      done = Math.min(total, done + (prev === 'done' ? 0 : 1))
+      setCardActivity(el, ev.activity || 'Complete')
+      setBadge(el, 'done')
+      setResult(el, ev.summary || 'ok')
+      const ms = st.startedAt ? Date.now() - st.startedAt : 0
+      const timer = el.querySelector('.qvac-agent-card-timer')
+      if (timer) timer.textContent = ms ? `${(ms / 1000).toFixed(1)}s` : 'ok'
+      el.classList.add('is-done-pop')
+      pushLog(shell, ev.id, `${st.label} finished${ev.summary ? ` · ${clip(ev.summary, 80)}` : ''}`)
+    } else if (ev.status === 'error' || ev.status === 'stopped') {
+      st.finishedAt = Date.now()
+      if (prev !== 'done' && prev !== 'error') done = Math.min(total, done + 1)
+      setCardActivity(el, ev.error || ev.summary || 'Failed')
+      setBadge(el, ev.status === 'stopped' ? 'stopped' : 'error')
+      setResult(el, ev.error || ev.summary || 'error', true)
+      pushLog(
+        shell,
+        ev.id,
+        `${st.label} ${ev.status === 'stopped' ? 'stopped' : 'error'}${ev.error ? ` · ${clip(ev.error, 60)}` : ''}`
+      )
+    }
+
+    updateProgress(shell)
+    const running = [...cards.values()].filter(
+      (c) => c.status === 'start' || c.status === 'running'
+    ).length
+    if (done >= total && total > 0) {
+      shell.dataset.state = 'complete'
+      setFoot(shell, 'Swarm complete — synthesizing…', false)
+      stopTick()
+    } else {
+      setFoot(
+        shell,
+        running ? `${running} agent${running === 1 ? '' : 's'} active` : 'Waiting…',
+        true
+      )
+    }
+  }
+
+  function complete(note = 'Synthesizing final answer…') {
+    if (!host) return
+    const shell = host.querySelector('.qvac-swarm')
+    if (!shell) return
+    shell.dataset.state = 'complete'
+    setFoot(shell, note, false)
+    pushLog(shell, 'swarm', note)
+    stopTick()
+  }
+
+  function fail(note = 'Stopped') {
+    if (!host) return
+    const shell = host.querySelector('.qvac-swarm')
+    if (!shell) return
+    shell.dataset.state = 'stopped'
+    setFoot(shell, note, false)
+    for (const st of cards.values()) {
+      if (st.status === 'running' || st.status === 'start' || st.status === 'queued') {
+        update({
+          id: st.el.dataset.agent || '',
+          status: 'stopped',
+          summary: 'stopped',
+        })
+      }
+    }
+    stopTick()
+  }
+
+  function hide() {
+    panelOpen = false
+    stopTick()
+    if (!host) return
+    host.classList.add('hidden')
+    host.innerHTML = ''
+    cards.clear()
+    log = []
+  }
+
+  function setCardActivity(el, text) {
+    const t = el.querySelector('.qvac-agent-activity-text')
+    if (t) t.textContent = text
+  }
+
+  function setBadge(el, status) {
+    const b = el.querySelector('.qvac-agent-card-badge')
+    if (!b) return
+    b.textContent = status
+    b.dataset.status = status
+  }
+
+  function setResult(el, text, isErr = false) {
+    const r = el.querySelector('.qvac-agent-card-result')
+    if (!r) return
+    r.classList.remove('hidden')
+    r.classList.toggle('is-error', isErr)
+    r.textContent = clip(text, 160)
+  }
+
+  function updateProgress(shell) {
+    const fg = shell.querySelector('.qvac-swarm-ring-fg')
+    const count = shell.querySelector('.qvac-swarm-count')
+    const pct = total ? Math.round((done / total) * 100) : 0
+    if (fg) fg.setAttribute('stroke-dasharray', `${pct} 100`)
+    if (count) count.textContent = `${done}/${total}`
+  }
+
+  function setFoot(shell, status, live) {
+    const s = shell.querySelector('.qvac-swarm-foot-status')
+    if (s) {
+      s.textContent = status
+      s.classList.toggle('is-live', Boolean(live))
+    }
+  }
+
+  function pushLog(shell, kind, text) {
+    log.push({ t: Date.now(), text, kind })
+    const inner = shell.querySelector('.qvac-swarm-log-inner')
+    if (!inner) return
+    const line = document.createElement('div')
+    line.className = 'qvac-swarm-log-line'
+    line.dataset.kind = kind
+    const v = vis(kind)
+    line.innerHTML = `<span class="qvac-swarm-log-ico" style="--agent-hue:${v.hue}">${kind === 'swarm' ? '✦' : v.icon}</span><span class="qvac-swarm-log-text">${esc(text)}</span><span class="qvac-swarm-log-time muted">${timeNow()}</span>`
+    inner.appendChild(line)
+    // Keep last ~40 lines
+    while (inner.children.length > 40) inner.removeChild(inner.firstChild)
+    const logEl = shell.querySelector('.qvac-swarm-log')
+    if (logEl) logEl.scrollTop = logEl.scrollHeight
+    line.classList.add('is-in')
+  }
+
+  return { begin, update, complete, fail, hide, isOpen: () => panelOpen }
+}
+
+function normalizeStatus(s) {
+  if (s === 'start') return 'running'
+  return s
+}
+
+function clip(s, n) {
+  const t = String(s || '')
+  return t.length > n ? t.slice(0, n - 1) + '…' : t
+}
+
+function timeNow() {
+  try {
+    return new Date().toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+    })
+  } catch {
+    return ''
+  }
+}
+
+function esc(s) {
+  return String(s || '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}