@volter/teams 0.1.21 → 0.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volter/teams",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "type": "module",
   "description": "Volter Teams, the neutral team plane: machine identity and daemon core, the local door and server link, admission from machine grants, product doors, and the Teams server's neutral routes (company RFC 0008).",
   "license": "MIT",

package/viewer/index.html

@@ -7,13 +7,14 @@
 <title>Viewer</title>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css">
 <style>
-  :root { color-scheme: dark; --bg: #0b0d10; --panel: #13161b; --line: #262b33; --text: #e6e8eb; --muted: #8b939e; --accent: #7aa2f7; }
+  /* The page's scheme is the host's when it sets one (`--scui-color-scheme` through the theme door), else dark. */
+  :root { --scui-color-scheme: dark; color-scheme: var(--scui-color-scheme); --bg: #0b0d10; --panel: #13161b; --line: #262b33; --text: #e6e8eb; --muted: #8b939e; --accent: #7aa2f7; }
   * { box-sizing: border-box; }
   html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); font: 13px/1.4 ui-sans-serif, system-ui, -apple-system, sans-serif; }
   body { display: flex; flex-direction: column; }
-  header { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--panel); min-height: 32px; }
-  header .target { font-family: ui-monospace, Menlo, monospace; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  header .scope { margin-left: auto; font-size: 11px; padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); }
+  body > header { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--panel); min-height: 32px; }
+  body > header .target { font-family: ui-monospace, Menlo, monospace; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  body > header .scope { margin-left: auto; font-size: 11px; padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); }
   #status { padding: 4px 10px; color: var(--muted); font-size: 12px; border-bottom: 1px solid var(--line); }
   #status:empty { display: none; }
   main { flex: 1; min-height: 0; display: flex; }
@@ -34,11 +35,14 @@
   button.action:disabled { opacity: .5; cursor: default; }
   label.action input { display: none; }
   /* supercode-ui follows this page's dark scheme; its composer spans the page instead of its 420px default. */
-  #session { flex: 1; min-width: 0; min-height: 0; display: flex; --scui-color-scheme: dark; }
+  #session { flex: 1; min-width: 0; min-height: 0; display: flex; }
   #session .session-view { flex: 1; min-width: 0; display: flex; flex-direction: column; }
   #session .session-view > section { flex: 1; min-height: 0; overflow: auto; }
   #session .session-composer { border-top: 1px solid var(--line); padding: 8px; --scui-width: 100%; --scui-height: auto; }
   #session .session-composer > * { flex: 1; min-width: 0; }
+  /* The host's header carries the session's details when it hides this one. */
+  #session.header-hidden .scui-team-transcript > header { display: none; }
+  body:has(#session:not([hidden])) { background: var(--scui-bg, var(--volter-surface-page, var(--bg))); color: var(--scui-fg, var(--text)); }
   [hidden] { display: none !important; }
 </style>
 </head>

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(); }
@@ -86,7 +105,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 {