@volter/teams 0.1.18 → 0.1.19

package/viewer/viewer.mjs

@@ -3,7 +3,7 @@
 // postMessage from the page embedding this one, which sends a fresh one before the last expires; it is held in memory
 // only. The server verifies it and admits exactly its target and scope; what this page reads from it is only for
 // showing where it is.
-import { attachBrowserPane, openBrowserMachine } from './channel.mjs';
+import { attachBrowserPane, openBrowserMachine, openBrowserSession, sendBrowserTurn } from './channel.mjs';
 import { StreamRpc } from './stream-rpc.mjs';
 
 const $ = (id) => document.getElementById(id);
@@ -40,6 +40,14 @@ async function freshToken() {
 async function main() {
   if (!token) { status('No access token. Open this from the workplace.'); return; }
   const claims = claimsOf(token);
+  // A session token (a Room's session-backed Conversation) names one team session, not a surface.
+  if (claims.session?.id) {
+    $('target').textContent = `session · ${claims.session.id}`;
+    $('scope').textContent = claims.scope === 'control' ? 'control' : 'view only';
+    await showSession(claims.session, claims.scope === 'control');
+    ask('viewer-ready');
+    return;
+  }
   const surface = claims.surface ?? {};
   const config = surface.config ?? {};
   const control = claims.scope === 'control';
@@ -53,6 +61,78 @@ async function main() {
   ask('viewer-ready');
 }
 
+// One team session, live: supercode-ui's team transcript (and, under a control token, its composer) fed by the
+// session's follow stream, with turns typed into the session through its channel as the member's own.
+async function showSession(session, control) {
+  const stylesheet = document.createElement('link');
+  stylesheet.rel = 'stylesheet';
+  stylesheet.href = '/view/session-view.css';
+  document.head.append(stylesheet);
+  const { mountSessionView } = await import('/view/session-view.mjs');
+  const base = `${location.origin}/api/v1/teams/${encodeURIComponent(session.team)}/sessions/${encodeURIComponent(session.id)}`;
+  const element = $('session');
+  element.hidden = false;
+  const view = mountSessionView(element, {
+    onSend: async (text) => {
+      view.update({ sending: true });
+      try {
+        const channel = await openBrowserSession({ origin: location.origin, teamId: session.team, sessionId: session.id, token: await freshToken() });
+        try {
+          const answer = await sendBrowserTurn(channel, text);
+          status(answer.code === 0 ? '' : `Not delivered: ${answer.text ?? 'the session did not take the turn'}`);
+        } finally { channel.close(); }
+      } catch (error) { status(`Not delivered: ${error.message}`); } finally { view.update({ sending: false }); }
+    },
+  });
+  view.update({ canSend: control });
+  const headers = async () => ({ Authorization: `Bearer ${await freshToken()}` });
+  const apply = (body) => view.update({ descriptor: body.descriptor, messages: body.messages.map((message) => message.value), status: 'ready', error: null });
+  let reading = null;
+  const read = () => (reading ??= (async () => {
+    try {
+      const response = await fetch(`${base}/messages?tail=300`, { headers: await headers() });
+      if (!response.ok) throw new Error(`reading the session failed (${response.status})`);
+      apply(await response.json());
+    } finally { reading = null; }
+  })());
+  // The follow stream: a snapshot, then an event each time the session changed (read it again). It ends when the
+  // token does or the connection drops; it is reopened with a fresh token from where it left off.
+  let cursor = null;
+  for (;;) {
+    try {
+      const response = await fetch(`${base}/events?tail=300${cursor ? `&after=${encodeURIComponent(cursor)}` : ''}`, { headers: await headers() });
+      if (!response.ok) throw new Error(`following the session failed (${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) => status(error.message));
+          else if (event.type === 'session_deleted') { view.update({ live: false, status: 'error', error: 'This session was deleted.' }); return; }
+        }
+      }
+    } catch (error) {
+      status(error.message);
+    }
+    view.update({ live: false });
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+  }
+}
+
 async function showPane(connect, key, control) {
   const [{ Terminal }, { FitAddon }] = await Promise.all([
     import('https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/+esm'),