@volter/teams 0.1.21 → 0.1.23

package/viewer/viewer.mjs

@@ -10,13 +10,32 @@ const $ = (id) => document.getElementById(id);
 const decoder = new TextDecoder();
 const status = (text) => { $('status').textContent = text; };
 
-let token = new URLSearchParams(location.hash.slice(1)).get('token');
+const fragment = new URLSearchParams(location.hash.slice(1));
+let token = fragment.get('token');
 history.replaceState(null, '', location.pathname);
 let waiting = null;
 
 const embedded = window.parent !== window;
 const ask = (type) => { if (embedded) window.parent.postMessage({ type }, '*'); };
+// The host's style, as supercode-ui is themed: its `--volter-*` brand tokens and `--scui-*` component tokens, set on
+// the session's root (every component reads them from an ancestor). Nothing else is taken from the host.
+function applyTheme(properties) {
+  if (!properties || typeof properties !== 'object') return;
+  for (const [name, value] of Object.entries(properties)) {
+    if (!/^--(volter|scui)-[a-z0-9-]+$/.test(name) || typeof value !== 'string' || value.length > 400) continue;
+    // on the page (its background) and on the session root (which sets its own scheme default)
+    for (const element of [document.documentElement, $('session')]) element.style.setProperty(name, value);
+  }
+}
+// The session header is the host's to show: framed, it is hidden unless the host asks for it (the host's own header
+// carries the session's details, which this page posts to it as `viewer-session`).
+function showHeader(shown) { $('session').classList.toggle('header-hidden', !shown); }
+try { applyTheme(JSON.parse(atob((fragment.get('theme') ?? '').replaceAll('-', '+').replaceAll('_', '/')) || 'null')); } catch { /* no theme */ }
+showHeader(fragment.has('header') ? fragment.get('header') !== 'hidden' : !embedded);
+
 window.addEventListener('message', (event) => {
+  if (event.data?.type === 'viewer-theme') { applyTheme(event.data.properties); return; }
+  if (event.data?.type === 'viewer-header') { showHeader(!event.data.hidden); return; }
   if (event.data?.type !== 'delegated-token' || typeof event.data.token !== 'string') return;
   token = event.data.token;
   if (waiting) { const resume = waiting; waiting = null; resume(); }
@@ -74,6 +93,8 @@ async function showSession(session, control) {
   element.hidden = false;
   const view = mountSessionView(element, {
     control,
+    // The name the Room gives this session's agent (the token's session.agentName), else "Agent".
+    agentName: typeof session.agentName === 'string' && session.agentName.trim() ? session.agentName.trim().slice(0, 80) : null,
     onSend: async (text) => {
       view.update({ sending: true });
       try {
@@ -86,7 +107,18 @@ async function showSession(session, control) {
     },
   });
   const headers = async () => ({ Authorization: `Bearer ${await freshToken()}` });
-  const apply = (body) => view.update({ descriptor: body.descriptor, messages: body.messages.map((message) => message.value), members: body.names?.members ?? [], machines: body.names?.machines ?? [], status: 'ready', error: null });
+  const HARNESSES = { 'claude-code': 'Claude Code', codex: 'Codex', gemini: 'Gemini CLI', goose: 'Goose', opencode: 'OpenCode', pi: 'Pi', grok: 'Grok' };
+  const apply = (body) => {
+    view.update({ descriptor: body.descriptor, messages: body.messages.map((message) => message.value), members: body.names?.members ?? [], machines: body.names?.machines ?? [], status: 'ready', error: null });
+    // What the host's own header shows about this session: who owns it, what runs it, where, and what this viewer may do.
+    const descriptor = body.descriptor ?? {};
+    const owner = (body.names?.members ?? []).find((member) => member.principal?.id === descriptor.user?.principal_id)?.principal?.display_name ?? descriptor.user?.reported_user ?? null;
+    if (embedded) window.parent.postMessage({ type: 'viewer-session', session: {
+      id: descriptor.id ?? session.id, title: descriptor.title ?? null, harness: descriptor.harness ?? null, harnessLabel: HARNESSES[descriptor.harness] ?? descriptor.harness ?? null,
+      owner, machines: (descriptor.machine_ids ?? []).map((id) => (body.names?.machines ?? []).find((machine) => machine.id === id)?.name ?? id),
+      scope: control ? 'control' : 'view', working: body.working ?? null,
+    } }, '*');
+  };
   let reading = null;
   const read = () => (reading ??= (async () => {
     try {