@volter/teams 0.1.35 → 0.1.37

package/viewer/viewer.mjs

@@ -5,6 +5,7 @@
 // showing where it is.
 import { attachBrowserPane, openBrowserMachine, openBrowserSession, sendBrowserTurn } from './channel.mjs';
 import { StreamRpc } from './stream-rpc.mjs';
+import { followTeamSession } from './session-follow.mjs';
 
 const $ = (id) => document.getElementById(id);
 const decoder = new TextDecoder();
@@ -60,12 +61,37 @@ function useLayout(layout) {
   const rows = layout === 'rows';
   $('session').classList.toggle('layout-rows', rows);
   if (rows && !document.getElementById('brand-tokens')) {
-    const link = Object.assign(document.createElement('link'), { id: 'brand-tokens', rel: 'stylesheet', href: 'https://brand.volter.ai/tokens.css' });
-    document.head.append(link);
+    brandTokens();
     // A chat's rows are light unless the host's theme names a scheme.
     if (!themed) document.documentElement.style.setProperty('--scui-color-scheme', 'light');
   }
 }
+// The brand's tokens stylesheet, loaded once; resolves when it has loaded (or failed to).
+let brandLoaded = null;
+function brandTokens() {
+  if (brandLoaded) return brandLoaded;
+  const link = Object.assign(document.createElement('link'), { id: 'brand-tokens', rel: 'stylesheet', href: 'https://brand.volter.ai/tokens.css' });
+  brandLoaded = new Promise((resolve) => { link.onload = link.onerror = resolve; });
+  document.head.append(link);
+  return brandLoaded;
+}
+// A pane looks like Terminal.app's Basic profile: the brand's terminal roles, resolved on the terminal element, which
+// (like Terminal.app) follows the system's appearance. xterm takes concrete values, so each is read through a probe.
+const TERMINAL_SLOTS = { background: 'background', foreground: 'foreground', cursor: 'cursor', selectionBackground: 'selection', black: 'black', red: 'red', green: 'green', yellow: 'yellow', blue: 'blue', magenta: 'magenta', cyan: 'cyan', white: 'white', brightBlack: 'bright-black', brightRed: 'bright-red', brightGreen: 'bright-green', brightYellow: 'bright-yellow', brightBlue: 'bright-blue', brightMagenta: 'bright-magenta', brightCyan: 'bright-cyan', brightWhite: 'bright-white' };
+function terminalLook(element) {
+  const probe = document.createElement('span');
+  probe.hidden = true;
+  element.append(probe);
+  const theme = {};
+  for (const [slot, role] of Object.entries(TERMINAL_SLOTS)) {
+    probe.style.color = `var(--volter-terminal-${role})`;
+    theme[slot] = getComputedStyle(probe).color;
+  }
+  probe.style.font = 'var(--volter-font-size-terminal, 11px) var(--volter-font-terminal, ui-monospace, Menlo, monospace)';
+  const { fontFamily, fontSize } = getComputedStyle(probe);
+  probe.remove();
+  return { fontFamily, fontSize: Number.parseFloat(fontSize), theme };
+}
 // A fragment value that is base64url JSON (UTF-8), or null.
 function fragmentJson(name) {
   try {
@@ -155,7 +181,6 @@ async function showSession(session, control) {
       } catch (error) { status(`Not delivered: ${error.message}`); return false; } finally { view.update({ sending: false }); }
     },
   });
-  const headers = async () => ({ Authorization: `Bearer ${await freshToken()}` });
   applyLabels = () => view.update({ ...labels });
   applyLabels();
   const HARNESSES = { 'claude-code': 'Claude Code', codex: 'Codex', gemini: 'Gemini CLI', goose: 'Goose', opencode: 'OpenCode', pi: 'Pi', grok: 'Grok' };
@@ -170,56 +195,18 @@ async function showSession(session, control) {
       scope: control ? 'control' : 'view', working: body.working ?? null,
     } }, '*');
   };
-  let reading = null;
-  const read = () => (reading ??= (async () => {
-    try {
-      const response = await fetch(`${base}/messages?tail=300`, { headers: await headers() });
-      if (!response.ok) throw Object.assign(new Error(`reading the session failed (${response.status})`), { stage: 'read', status: response.status });
-      const body = await response.json();
-      apply(body);
-      return body;
-    } finally { reading = null; }
-  })());
-  // The snapshot is read whole (a busy session's is over the follow stream's 1 MB buffer, which ended the stream
-  // before it was sent); the follow stream then carries only the events after that snapshot's cursor, and each one
-  // means "read again". It ends when the token does or the connection drops, and is reopened from where it left off.
-  let cursor = null;
-  for (;;) {
-    try {
-      if (!cursor) cursor = String((await read()).event_cursor ?? '') || null;
-      const response = await fetch(`${base}/events?${cursor ? `after=${encodeURIComponent(cursor)}` : 'tail=1'}`, { headers: await headers() });
-      if (!response.ok) throw Object.assign(new Error(`following the session failed (${response.status})`), { stage: 'follow', status: response.status });
-      view.update({ live: true });
-      status('');
-      const reader = response.body.getReader();
-      let buffer = '';
-      for (;;) {
-        const { value, done } = await reader.read();
-        if (done) break;
-        buffer += decoder.decode(value, { stream: true });
-        let end;
-        while ((end = buffer.indexOf('\n\n')) >= 0) {
-          const block = buffer.slice(0, end);
-          buffer = buffer.slice(end + 2);
-          const data = block.split('\n').filter((line) => line.startsWith('data:')).map((line) => line.slice(5).trimStart()).join('\n');
-          if (!data) continue;
-          const event = JSON.parse(data);
-          if (event.cursor) cursor = event.cursor;
-          // The server ends a stream it can no longer resume (a slow reader, a retired cursor): start from a snapshot.
-          if (event.terminal && event.type === 'resync_required') cursor = null;
-          if (event.type === 'snapshot') apply(event.data);
-          else if (event.type === 'session_changed') read().catch((error) => failed('read', error, error.status ?? null));
-          else if (event.type === 'session_deleted') { view.update({ live: false, status: 'error', error: 'This session was deleted.' }); return; }
-        }
-      }
-    } catch (error) {
-      failed(error.stage ?? 'follow', error, error.status ?? null);
+  // The session, live: its snapshot, then its follow stream (session-follow.mjs, as a workplace drawing it itself uses).
+  followTeamSession({
+    origin: location.origin, teamId: session.team, sessionId: session.id, token: freshToken,
+    onSnapshot: apply,
+    onLive: (live) => { view.update({ live }); if (live) status(''); },
+    onError: ({ stage, status: code, message, snapshot }) => {
+      failed(stage, message, code);
       // Nothing drawn yet: the transcript says why instead of loading forever.
-      if (!cursor) view.update({ status: 'error', error: error.message });
-    }
-    view.update({ live: false });
-    await new Promise((resolve) => setTimeout(resolve, 2000));
-  }
+      if (!snapshot) view.update({ status: 'error', error: message });
+    },
+    onDeleted: () => view.update({ live: false, status: 'error', error: 'This session was deleted.' }),
+  });
 }
 
 async function showPane(connect, key, control) {
@@ -227,9 +214,10 @@ async function showPane(connect, key, control) {
     import('https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/+esm'),
     import('https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/+esm'),
   ]);
+  await brandTokens();
   const element = $('terminal');
   element.hidden = false;
-  const terminal = new Terminal({ cursorBlink: control, disableStdin: !control, fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 13, scrollback: 5000, theme: { background: '#0b0d10' } });
+  const terminal = new Terminal({ disableStdin: !control, scrollback: 5000, ...terminalLook(element) });
   const fit = new FitAddon();
   terminal.loadAddon(fit);
   terminal.open(element);