feat(orchestrator): 003 W6 speech bubbles at the agents in every view

A toolbar toggle, a hub setting off by default, shows a speech bubble per agent anchored at its face in every view and at its projected node in 3D; an agent without an anchor speaks from a caption bar. The speaking agent's bubble is the largest and reveals its line word by word over the audio duration, or at 180 words a minute without TTS, a failed TTS request included; queued agents wait as smaller ellipsis bubbles sized by order, and a finished bubble fades out while the next one grows. Comic Neue 400 latin is vendored under SIL OFL 1.1 and loaded through the FontFace API, so the CSP stays unchanged.

Residuals: the caption says speaking while bubbles run silently; the word reveal follows the wall clock, not the audio clock; the e2e suite runs once in the unify gate (operator order 2026-11-11 21:15), score gate exit 1 accepted under that order.

🎯 Fix: 82 %
💥 Break: 5 %
💸 Cost: 100 %
⏱️ Time: 100 %
🛡️ Security: 100 %
🏆 Score: 78
🚦 Gate: ⛔ fix 82 % < 90

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

orchestrator/templates/bubbles.js

@@ -0,0 +1,49 @@
+const Bubbles = (() => {
+  "use strict";
+  const SCALES = [1, 0.8, 0.65];
+  const SMALLEST = 0.5;
+  const PACE = 180;
+  const SHORTEST = 1.5;
+
+  function scale(position) {
+    return SCALES[position] ?? SMALLEST;
+  }
+
+  function words(text) {
+    return String(text || "").split(/\s+/).filter(Boolean);
+  }
+
+  function reading(count) {
+    return Math.max(SHORTEST, (count * 60) / PACE);
+  }
+
+  function reveals(count, duration) {
+    return Array.from({length: count}, (_, index) => (index / count) * duration);
+  }
+
+  function shown(count, duration, elapsed) {
+    return reveals(count, duration).filter((at) => at <= elapsed).length;
+  }
+
+  function picked(row, speech) {
+    return row.class === "mayday" || speech.classes.includes(row.class);
+  }
+
+  function plan(head, pending) {
+    const queue = head ? [head, ...pending] : pending;
+    const shift = head ? 0 : 1;
+    const seen = new Set();
+    return queue.flatMap((item, index) => {
+      if (seen.has(item.who)) {
+        return [];
+      }
+      seen.add(item.who);
+      return [{who: item.who, item, scale: scale(index + shift)}];
+    });
+  }
+
+  return {SCALES, SMALLEST, PACE, SHORTEST, scale, words, reading, reveals, shown, picked, plan};
+})();
+if (typeof module === "object" && module.exports) {
+  module.exports = Bubbles;
+}

orchestrator/templates/index.html.j2

@@ -411,6 +411,8 @@ pre.notes { margin: 0; padding: 8px 10px; background: var(--sunken); border-radi
 {% include "style-ui.css" %}
 
 {% include "style-tasks.css" %}
+
+{% include "style-bubbles.css" %}
 </style>
 </head>
 <body>
@@ -421,6 +423,7 @@ pre.notes { margin: 0; padding: 8px 10px; background: var(--sunken); border-radi
   <div class="brand"><span class="logo" aria-hidden="true"></span><div class="brand-text"><h1>Agent Orchestrator</h1><span class="sky-note" id="sky-note"></span></div></div>
   <div class="tools">
     <button type="button" class="btn small ghost icon-only spot-toggle" id="radio-open" title="Radio: post, call or a message to all, with Record, the radio settings and the stations" aria-label="Radio" aria-controls="radio-spot" aria-expanded="false"><svg class="bi" aria-hidden="true" focusable="false"><use href="#bi-broadcast-pin"></use></svg></button>
+    <button type="button" class="btn small ghost icon-only" id="bubbles-toggle" title="Speech bubbles" aria-label="Speech bubbles" aria-pressed="false" aria-controls="bubbles"><svg class="bi" aria-hidden="true" focusable="false"><use href="#bi-chat-quote"></use></svg></button>
     <button type="button" class="btn small ghost icon-only" id="palette-open" title="Commands (Ctrl+K)" aria-label="Commands"><svg class="bi" aria-hidden="true" focusable="false"><use href="#bi-command"></use></svg></button>
     <button type="button" class="btn small ghost icon-only" id="settings-open" title="Settings and ambience" aria-label="Settings"><svg class="bi" aria-hidden="true" focusable="false"><use href="#bi-gear"></use></svg></button>
   </div>
@@ -442,6 +445,7 @@ pre.notes { margin: 0; padding: 8px 10px; background: var(--sunken); border-radi
 <div class="toasts" id="toasts" aria-live="polite"></div>
 <div class="palette" id="palette" hidden></div>
 <div class="sky-panel" id="sky-panel" role="group" aria-label="View of the sky" hidden></div>
+<div class="bubbles" id="bubbles" aria-hidden="true" hidden><div class="bubble-bar"></div></div>
 <script nonce="{{ nonce }}" id="state" type="application/json">{{ state | tojson }}</script>
 <script nonce="{{ nonce }}">
 {% include "ambience.js" %}
@@ -449,6 +453,8 @@ pre.notes { margin: 0; padding: 8px 10px; background: var(--sunken); border-radi
 <script nonce="{{ nonce }}">
 {% include "voice.js" %}
 
+{% include "bubbles.js" %}
+
 {% include "nav.js" %}
 
 {% include "popup.js" %}
@@ -550,6 +556,8 @@ pre.notes { margin: 0; padding: 8px 10px; background: var(--sunken); border-radi
 
 {% include "page-speech.js" %}
 
+{% include "page-bubbles.js" %}
+
 {% include "page-alerts.js" %}
 
 {% include "page-rules.js" %}

orchestrator/templates/page-boot.js

@@ -15,6 +15,7 @@
   });
   document.getElementById("palette-open").addEventListener("click", openPalette);
   document.getElementById("settings-open").addEventListener("click", settingsSheet);
+  document.getElementById("bubbles-toggle").addEventListener("click", toggleBubbles);
   document.addEventListener("click", (event) => closeMenus(event.target instanceof Element ? event.target.closest("details.menu") : null));
   document.addEventListener("fullscreenchange", () => {
     if (!document.fullscreenElement) {
@@ -37,6 +38,7 @@
   radio.element = radioElement();
   drawSky();
   musicButton();
+  syncBubbles();
   syncMusic();
   syncRadio();
   timeBar();

orchestrator/templates/page-bubbles.js

@@ -0,0 +1,125 @@
+  const BUBBLE_FONT = "/vendor/comic-neue.woff2";
+  const BUBBLE_FADE = 400;
+  const BUBBLE_EDGE = 8;
+  const bubbles = {shown: new Map(), frame: 0, font: null};
+
+  function bubbleLayer() {
+    return document.getElementById("bubbles");
+  }
+
+  function bubbleFont() {
+    // The CSP has no font-src, so a url() face is refused; a face built from fetched bytes loads nothing itself.
+    if (!bubbles.font) {
+      bubbles.font = fetch(BUBBLE_FONT, {cache: "force-cache"})
+        .then((response) => (response.ok ? response.arrayBuffer() : Promise.reject(new Error(String(response.status)))))
+        .then((data) => new FontFace("Comic Neue", data, {style: "normal", weight: "400"}).load())
+        .then((loaded) => document.fonts.add(loaded))
+        .catch(() => null);
+    }
+    return bubbles.font;
+  }
+
+  function inView(box) {
+    return box.width > 0 && box.height > 0 && box.left + box.width > 0 && box.top + box.height > 0 && box.left < window.innerWidth && box.top < window.innerHeight;
+  }
+
+  function anchorOf(key) {
+    const projected = g3.tab === "agents" ? anchor3d(key)() : null;
+    if (projected && inView(projected)) {
+      return projected;
+    }
+    return [...document.querySelectorAll(`[data-face="${CSS.escape(key)}"]`)].map((node) => node.getBoundingClientRect()).find(inView) || null;
+  }
+
+  function bubbleNode(item) {
+    const words = h("span", {class: "bubble-words"});
+    return {node: h("div", {class: "speech-bubble", "data-who": item.who}, h("strong", {class: "bubble-who"}, nameOf(item.who)), words), words};
+  }
+
+  function placeBubble(view, box, scale) {
+    const layer = bubbleLayer();
+    const bar = layer.querySelector(".bubble-bar");
+    if (!box) {
+      if (view.node.parentElement !== bar) {
+        view.node.style.removeProperty("left");
+        view.node.style.removeProperty("top");
+        bar.append(view.node);
+      }
+      return;
+    }
+    if (view.node.parentElement !== layer) {
+      layer.append(view.node);
+    }
+    const [width, height] = [view.node.offsetWidth * scale, view.node.offsetHeight * scale];
+    const middle = box.left + box.width / 2;
+    const left = Math.min(Math.max(middle, BUBBLE_EDGE + width / 2), window.innerWidth - BUBBLE_EDGE - width / 2);
+    view.node.style.left = `${fixed(left)}px`;
+    view.node.style.top = `${fixed(Math.max(box.top - 4, BUBBLE_EDGE + height))}px`;
+    view.node.style.setProperty("--tail", `${fixed((middle - left) / scale)}px`);
+  }
+
+  function drawBubble(entry, view) {
+    const {item} = entry;
+    const said = item.words || Bubbles.words(item.line);
+    const count = item.started ? Bubbles.shown(said.length, item.duration, (performance.now() - item.started) / 1000) : 0;
+    const text = said.slice(0, count).join(" ") || "…";
+    if (view.words.textContent !== text) {
+      view.words.textContent = text;
+      view.words.scrollTop = view.words.scrollHeight;
+    }
+    Object.assign(view.node.dataset, {scale: String(entry.scale), state: item.started ? "speaking" : "waiting", words: String(count)});
+    view.node.style.setProperty("--scale", String(entry.scale));
+    placeBubble(view, anchorOf(entry.who), entry.scale);
+  }
+
+  function drawBubbles() {
+    if (!settings.bubbles) {
+      return;
+    }
+    const planned = Bubbles.plan(speech.current || speech.loading, speech.pending);
+    const kept = new Set(planned.map((entry) => entry.item));
+    for (const [item, view] of bubbles.shown) {
+      if (!kept.has(item)) {
+        bubbles.shown.delete(item);
+        view.node.classList.add("leaving");
+        window.setTimeout(() => view.node.remove(), BUBBLE_FADE);
+      }
+    }
+    for (const entry of planned) {
+      if (!bubbles.shown.has(entry.item)) {
+        bubbles.shown.set(entry.item, bubbleNode(entry.item));
+      }
+      drawBubble(entry, bubbles.shown.get(entry.item));
+    }
+    if (bubbles.shown.size && !bubbles.frame) {
+      bubbles.frame = window.requestAnimationFrame(() => {
+        bubbles.frame = 0;
+        drawBubbles();
+      });
+    }
+  }
+
+  function clearBubbles() {
+    window.cancelAnimationFrame(bubbles.frame);
+    bubbles.frame = 0;
+    bubbles.shown.clear();
+    for (const node of bubbleLayer().querySelectorAll(".speech-bubble")) {
+      node.remove();
+    }
+  }
+
+  function syncBubbles() {
+    document.getElementById("bubbles-toggle").setAttribute("aria-pressed", String(settings.bubbles));
+    bubbleLayer().hidden = !settings.bubbles;
+    if (settings.bubbles) {
+      bubbleFont();
+      drawBubbles();
+    } else {
+      clearBubbles();
+      dropSilent();
+    }
+  }
+
+  function toggleBubbles() {
+    saveSettings({...settings, bubbles: !settings.bubbles});
+  }

orchestrator/templates/page-graph-layout.js

@@ -125,6 +125,7 @@
     const tasks = node.tasks.length ? ` · ${node.tasks.length} tasks` : "";
     return s("g", {
       class: classes, transform: `translate(${fixed(at.x)} ${fixed(at.y)})`, tabindex: 0, role: "button", "aria-label": `${node.label}, ${NODE_KINDS[node.kind]}`, "data-pick": node.id,
+      "data-face": node.kind === "subagent" ? null : node.id,
       on: {
         click: () => select(node.id),
         keydown: (event) => {

orchestrator/templates/page-radioview.js

@@ -72,6 +72,7 @@
     if (ui.screen === "agents" && (ui.views.agents === "orbit" || ui.views.agents === "chord")) {
       stage();
     }
+    drawBubbles();
   }
 
   function sentRows() {

orchestrator/templates/page-settings.js

@@ -13,6 +13,7 @@
     syncMusic();
     syncRadio();
     musicButton();
+    syncBubbles();
   }
 
   async function saveSettings(next) {
@@ -187,6 +188,7 @@
         space: savedSpace(),
         estimation: settings.estimation,
         trend: settings.trend,
+        bubbles: settings.bubbles,
       };
       if (await saveSettings(next)) {
         closeSheet();

orchestrator/templates/page-speech.js

@@ -12,30 +12,66 @@
   function say(item) {
     speech.pending = Voice.enqueue(speech.pending, item, SPEECH_QUEUE);
     pump();
+    drawBubbles();
+  }
+
+  function readSilently(item, next) {
+    Object.assign(item, {started: performance.now(), duration: Bubbles.reading(item.words.length)});
+    speech.current = item;
+    speech.timer = window.setTimeout(() => {
+      Object.assign(speech, {current: null, timer: 0});
+      drawSpeaker();
+      next();
+    }, item.duration * 1000);
+    drawSpeaker();
+  }
+
+  function endSilent() {
+    window.clearTimeout(speech.timer);
+    Object.assign(speech, {current: null, timer: 0, busy: false});
+  }
+
+  function dropSilent() {
+    speech.pending = speech.pending.filter((item) => !item.silent);
+    if (speech.timer) {
+      endSilent();
+      drawSpeaker();
+      pump();
+    }
   }
 
   async function pump() {
     if (speech.busy || !speech.pending.length) {
       return;
     }
-    const sound = context();
-    if (!sound) {
+    const [item, ...rest] = speech.pending;
+    const sound = item.silent ? null : context();
+    if (!item.silent && !sound) {
       speech.pending = [];
       return;
     }
-    const [item, ...rest] = speech.pending;
     speech.pending = rest;
     speech.busy = true;
     const next = () => {
       speech.busy = false;
       pump();
     };
+    if (item.silent) {
+      readSilently(item, next);
+      return;
+    }
+    speech.loading = item;
+    drawBubbles();
     try {
       const response = await fetch("/api/tts", {method: "POST", headers: {"X-Kvb-Orchestrator": "1", "Content-Type": "application/json"}, body: JSON.stringify({text: item.text, voice: item.voice}), cache: "no-store"});
       if (!response.ok) {
         throw new Error(`${response.status} ${(await response.text()).trim()}`);
       }
       const buffer = await sound.decodeAudioData(await response.arrayBuffer());
+      if (speech.loading !== item) {
+        next();
+        return;
+      }
       const source = sound.createBufferSource();
       const gain = sound.createGain();
       gain.gain.value = loudness(item.tone);
@@ -47,29 +83,45 @@
         next();
       }, {once: true});
       duck(buffer.duration);
-      Object.assign(speech, {current: item, source});
+      Object.assign(item, {started: performance.now(), duration: buffer.duration});
+      Object.assign(speech, {current: item, source, loading: null});
       drawSpeaker();
       source.start();
     } catch (error) {
+      const kept = speech.loading === item;
+      speech.loading = null;
       speechFailed([String(error.message || error)]);
+      if (kept && settings.bubbles && item.words) {
+        readSilently(item, next);
+        return;
+      }
       next();
     }
   }
 
   function cancelSpeech() {
-    speech.pending = [];
+    if (speech.timer) {
+      endSilent();
+    }
+    Object.assign(speech, {pending: [], current: null, loading: null});
     if (speech.source) {
       speech.source.stop();
     }
+    clearBubbles();
+    drawSpeaker();
   }
 
   function speakRows(rows) {
-    if (!settings.speech.on || !state.speech.tts) {
+    const voiced = settings.speech.on && state.speech.tts;
+    if (!voiced && !settings.bubbles) {
       return;
     }
-    for (const row of rows.filter((entry) => entry.ts >= state.now - SPEECH_FRESH && Voice.speakable(entry, settings.speech))) {
-      const line = row.text.split("\n").map((part) => part.trim()).find(Boolean) || "";
-      say({text: row.speech, voice: row.voice, tone: Voice.toneOf(row, HUMAN), cls: row.class, who: row.source, line: short(line)});
+    for (const row of rows.filter((entry) => entry.ts >= state.now - SPEECH_FRESH)) {
+      const audible = voiced && Voice.speakable(row, settings.speech);
+      if (audible || (settings.bubbles && Bubbles.picked(row, settings.speech))) {
+        const line = row.text.split("\n").map((part) => part.trim()).find(Boolean) || "";
+        say({text: row.speech, voice: row.voice, tone: Voice.toneOf(row, HUMAN), cls: row.class, who: row.source, line: short(line), words: Bubbles.words(row.text), silent: !audible});
+      }
     }
   }
 

orchestrator/templates/page-state.js

@@ -45,7 +45,7 @@
   const sky = {canvas: document.getElementById("sky"), stars: Ambience.stars(320, 7), mode: "", frame: 0};
   const music = {gain: null, filter: null, drone: [], timer: 0, tension: 0, ducked: 0};
   const radio = {element: null, url: "", level: 0, timer: 0, playing: false, waiting: false, index: -1, pick: null, sig: "", state: "", short: "", note: "", told: null};
-  const speech = {pending: [], busy: false, warned: 0, current: null, source: null};
+  const speech = {pending: [], busy: false, warned: 0, current: null, source: null, loading: null, timer: 0};
   const mic = {recorder: null, held: false, busy: false, timer: 0};
   const space = {
     views: {graph: {...state.settings.space.graph}, sky: {...state.settings.space.sky}}, glides: {graph: null, sky: null}, edits: 0, saved: 0, timer: 0, look: false, compass: null,

orchestrator/templates/style-bubbles.css

@@ -0,0 +1,19 @@
+#bubbles-toggle[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
+.bubbles { position: fixed; inset: 0; z-index: 20; overflow: hidden; pointer-events: none; }
+.bubbles[hidden] { display: none; }
+.speech-bubble { --scale: 1; --tail: 0px; position: absolute; display: grid; gap: 2px; width: max-content; max-width: min(280px, 72vw); padding: 8px 13px; border: 2px solid var(--text); border-radius: 18px; background: var(--panel); color: var(--text); box-shadow: var(--shadow-lift); font: 400 var(--fs-md)/1.35 "Comic Neue", "Comic Sans MS", cursive; transform: translate(-50%, -100%) scale(var(--scale)); transform-origin: 50% 100%; transition: transform .3s var(--ease), opacity .4s var(--ease); }
+.speech-bubble::before, .speech-bubble::after { content: ""; position: absolute; top: 100%; left: calc(50% + var(--tail)); border-style: solid; border-color: transparent; }
+.speech-bubble::before { margin-left: -9px; border-width: 12px 9px 0; border-top-color: var(--text); }
+.speech-bubble::after { margin-left: -6px; border-width: 8px 6px 0; border-top-color: var(--panel); }
+.speech-bubble.leaving { opacity: 0; }
+.bubble-words { display: block; max-height: calc(6 * 1.35em); overflow: hidden; overflow-wrap: anywhere; scroll-behavior: smooth; }
+.speech-bubble[data-state="waiting"] .bubble-words { letter-spacing: .12em; }
+.bubble-who { display: none; color: var(--muted); font: 650 var(--fs-xs)/1.2 var(--sans); }
+.bubble-bar { position: absolute; right: 0; bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); left: 0; display: flex; flex-wrap: wrap-reverse; justify-content: center; align-items: flex-end; gap: var(--sp-3) var(--sp-4); padding: 0 var(--sp-3); }
+.bubble-bar .speech-bubble { position: relative; transform: scale(var(--scale)); }
+.bubble-bar .speech-bubble::before, .bubble-bar .speech-bubble::after { display: none; }
+.bubble-bar .bubble-who { display: block; }
+@media (prefers-reduced-motion: reduce) {
+  .speech-bubble { transition: opacity .4s var(--ease); }
+  .bubble-words { scroll-behavior: auto; }
+}