toolroll 0.9.54 → 0.9.55

package/dist/coding-ui.js

@@ -1,24 +1,23 @@
 import { randomUUID } from 'node:crypto';
-const escape = (value) => String(value ?? '').replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
-const hidden = (values) => Object.entries(values).map(([name, value]) => `<input type="hidden" name="${escape(name)}" value="${escape(value)}">`).join('');
+import { html, joinHtml, postForm } from './html.js';
 function linkedText(text) {
     const pattern = /\[([^\]\n]+)\]\((https?:\/\/[^\s)]+)\)|\x60([^\x60\n]+)\x60|\*\*([^*\n]+)\*\*|(https?:\/\/[^\s<>]+)/g;
     let end = 0;
-    let output = '';
+    const output = [];
     for (const match of text.matchAll(pattern)) {
-        output += escape(text.slice(end, match.index));
+        output.push(html `${text.slice(end, match.index)}`);
         if (match[3] !== undefined)
-            output += `<code>${escape(match[3])}</code>`;
+            output.push(html `<code>${match[3]}</code>`);
         else if (match[4] !== undefined)
-            output += `<strong>${escape(match[4])}</strong>`;
+            output.push(html `<strong>${match[4]}</strong>`);
         else {
             const raw = match[2] ?? match[5];
             const url = raw.replace(/[.,;!?]+$/, '');
-            output += `<a href="${escape(url)}" target="_blank" rel="noopener noreferrer">${escape(match[1] ?? url)}</a>${escape(raw.slice(url.length))}`;
+            output.push(html `<a href="${url}" target="_blank" rel="noopener noreferrer">${match[1] ?? url}</a>${raw.slice(url.length)}`);
         }
         end = match.index + match[0].length;
     }
-    return output + escape(text.slice(end));
+    return html `${output}${text.slice(end)}`;
 }
 function friendlyCodingError(message) {
     return /already has an active writer/i.test(message)
@@ -27,57 +26,59 @@ function friendlyCodingError(message) {
 }
 function noticeHtml(message) {
     const friendly = friendlyCodingError(message);
-    return escape(friendly) + (friendly === message ? '' : `<details><summary>Technical details</summary><pre>${escape(message)}</pre></details>`);
+    return html `${friendly}${friendly === message ? '' : html `<details><summary>Technical details</summary><pre>${message}</pre></details>`}`;
 }
 const sessionUrl = (id) => `/code/${encodeURIComponent(id)}`;
 const active = (status) => ['starting', 'working', 'needs-input', 'stopping'].includes(status);
 const stateLabel = (session, requests = []) => ({ starting: 'Starting Codex', ready: 'Ready', working: 'Working', 'needs-input': requests.some(r => r.kind !== 'questions') ? 'Permission needed' : 'Needs your answer', stopping: 'Stopping', interrupted: 'Stopped', failed: 'Stopped with an error', uncertain: 'Delivery not confirmed', closed: 'Session closed' }[session.status]);
 function itemHtml(item) {
     if (item.type === 'reasoning')
-        return '';
+        return html ``;
     const role = ['user', 'userMessage'].includes(item.type) ? 'You' : ['agent', 'assistant', 'agentMessage'].includes(item.type) ? 'Codex' : null;
     if (role)
-        return `<article class="coding-message${role === 'You' ? ' coding-user' : ''}" data-coding-item="${escape(item.id)}"><strong>${role}</strong><div class="coding-text">${linkedText(item.text)}</div></article>`;
+        return html `<article class="coding-message${role === 'You' ? ' coding-user' : ''}" data-coding-item="${item.id}"><strong>${role}</strong><div class="coding-text">${linkedText(item.text)}</div></article>`;
     const title = { commandExecution: 'Command', fileChange: 'File changes', mcpToolCall: 'Tool', reasoning: 'Reasoning', plan: 'Plan', error: 'Error' }[item.type] ?? 'Activity';
-    return `<details class="coding-tool" data-coding-item="${escape(item.id)}"><summary>${title}${item.status ? ` <span class="coding-meta">${escape(item.status)}</span>` : ''}</summary><pre>${escape(item.text)}</pre></details>`;
+    return html `<details class="coding-tool" data-coding-item="${item.id}"><summary>${title}${item.status ? html ` <span class="coding-meta">${item.status}</span>` : ''}</summary><pre>${item.text}</pre></details>`;
 }
-function requestHtml(request, session, csrf) {
+function requestHtml(request, session) {
     const questions = request.kind === 'questions';
-    const body = questions ? request.questions.map((q, index) => `<label>${escape(q.question)}<input type="text" name="question:${escape(q.id)}"${q.options.length ? ` list="coding-options-${escape(request.id)}-${index}"` : ''} required autocomplete="off">${q.options.length ? `<datalist id="coding-options-${escape(request.id)}-${index}">${q.options.map(o => `<option value="${escape(o.label)}">${escape(o.description)}</option>`).join('')}</datalist>` : ''}</label>`).join('') : `<pre class="coding-permission-detail">${escape(request.detail)}</pre><label>Password to approve this request<input type="password" name="password" autocomplete="current-password" required></label>`;
-    return `<section class="coding-request" data-coding-request="${escape(request.id)}"><h3>${escape(request.title || (questions ? 'Your answer' : 'Allow extra access?'))}</h3><form method="post" action="${sessionUrl(session)}/answer" data-coding-form="answer">${hidden({ csrf, requestId: request.id })}${body}<div class="coding-actions"><button type="submit" name="decision" value="accept">${questions ? 'Send answer' : 'Approve access'}</button><button type="submit" name="decision" value="decline" formnovalidate class="coding-secondary">${questions ? 'Cancel question' : 'Decline'}</button></div></form></section>`;
+    const body = questions ? request.questions.map((q, index) => html `<label>${q.question}<input type="text" name="question:${q.id}"${q.options.length ? html ` list="coding-options-${request.id}-${index}"` : ''} required autocomplete="off">${q.options.length ? html `<datalist id="coding-options-${request.id}-${index}">${q.options.map(o => html `<option value="${o.label}">${o.description}</option>`)}</datalist>` : ''}</label>`) : html `<pre class="coding-permission-detail">${request.detail}</pre><label>Password to approve this request<input type="password" name="password" autocomplete="current-password" required></label>`;
+    return html `<section class="coding-request" data-coding-request="${request.id}"><h3>${request.title || (questions ? 'Your answer' : 'Allow extra access?')}</h3>${postForm(`${sessionUrl(session)}/answer`, html `${body}<div class="coding-actions"><button type="submit" name="decision" value="accept">${questions ? 'Send answer' : 'Approve access'}</button><button type="submit" name="decision" value="decline" formnovalidate class="coding-secondary">${questions ? 'Cancel question' : 'Decline'}</button></div>`, { attrs: { 'data-coding-form': 'answer' }, hidden: { requestId: request.id } })}</section>`;
 }
-function controlsHtml(session, csrf) {
+function controlsHtml(session) {
     if (active(session.status) && session.turnId)
-        return `<form method="post" action="${sessionUrl(session.id)}/stop" data-coding-form="stop">${hidden({ csrf })}<button class="coding-secondary"${session.status === 'stopping' ? ' disabled' : ''}>Stop</button></form>`;
+        return postForm(`${sessionUrl(session.id)}/stop`, html `<button class="coding-secondary"${session.status === 'stopping' ? html ` disabled` : ''}>Stop</button>`, { attrs: { 'data-coding-form': 'stop' } });
     if (session.status === 'uncertain')
-        return `<form method="post" action="${sessionUrl(session.id)}/${session.deliveryReviewRequired ? 'continue' : 'recover'}" data-coding-form="recover">${hidden({ csrf })}<button>${session.deliveryReviewRequired ? (session.nativeThreadId ? 'Continue with saved work' : 'Keep work and close session') : 'Check saved session'}</button></form>`;
+        return postForm(`${sessionUrl(session.id)}/${session.deliveryReviewRequired ? 'continue' : 'recover'}`, html `<button>${session.deliveryReviewRequired ? (session.nativeThreadId ? 'Continue with saved work' : 'Keep work and close session') : 'Check saved session'}</button>`, { attrs: { 'data-coding-form': 'recover' } });
     if (!session.nativeThreadId && ['closed', 'failed', 'interrupted'].includes(session.status))
-        return '';
+        return html ``;
     if (['failed', 'interrupted'].includes(session.status))
-        return `<form method="post" action="${sessionUrl(session.id)}/resume" data-coding-form="resume">${hidden({ csrf })}<button>Resume session</button></form>`;
-    return '';
+        return postForm(`${sessionUrl(session.id)}/resume`, html `<button>Resume session</button>`, { attrs: { 'data-coding-form': 'resume' } });
+    return html ``;
 }
 export function codingWorkspaceHtml(input) {
     const { selected, csrf } = input;
     const selectedRepo = selected?.session.repo ?? input.project;
     const projectName = (repo) => input.projects.find(p => p.path === repo)?.name ?? repo.split('/').filter(Boolean).at(-1) ?? repo;
     const newUrl = `/code${selectedRepo ? `?project=${encodeURIComponent(selectedRepo)}` : ''}`;
-    const sessions = input.sessions.map(session => `<li><a href="${sessionUrl(session.id)}"${selected?.session.id === session.id ? ' aria-current="page"' : ''}><span>${escape(session.title)}</span><small>${escape(projectName(session.repo))} · <span data-coding-status-for="${escape(session.id)}">${escape(stateLabel(session))}</span></small></a></li>`).join('');
-    const sidebar = `<aside class="coding-sidebar"><div class="coding-sidebar-top"><h2>Sessions</h2>${selected ? `<a class="coding-link-button" href="${escape(newUrl)}">New session</a>` : ''}</div><nav class="coding-session-list" aria-label="Coding sessions"><ul>${sessions || '<li class="coding-meta">No sessions yet.</li>'}</ul></nav><details class="coding-mobile-sessions"><summary>Sessions${input.sessions.length ? ` (${input.sessions.length})` : ''}</summary><nav aria-label="Coding sessions"><ul>${sessions || '<li class="coding-meta">No sessions yet.</li>'}</ul></nav></details></aside>`;
-    const warning = !input.available ? '<p class="coding-notice">Codex is unavailable on this installation. Install and sign in to Codex on the host to start coding.</p>' : '';
+    const sessions = joinHtml(input.sessions.map(session => html `<li><a href="${sessionUrl(session.id)}"${selected?.session.id === session.id ? html ` aria-current="page"` : ''}><span>${session.title}</span><small>${projectName(session.repo)} · <span data-coding-status-for="${session.id}">${stateLabel(session)}</span></small></a></li>`));
+    const sessionItems = input.sessions.length ? sessions : html `<li class="coding-meta">No sessions yet.</li>`;
+    const sidebar = html `<aside class="coding-sidebar"><div class="coding-sidebar-top"><h2>Sessions</h2>${selected ? html `<a class="coding-link-button" href="${newUrl}">New session</a>` : ''}</div><nav class="coding-session-list" aria-label="Coding sessions"><ul>${sessionItems}</ul></nav><details class="coding-mobile-sessions"><summary>Sessions${input.sessions.length ? ` (${input.sessions.length})` : ''}</summary><nav aria-label="Coding sessions"><ul>${sessionItems}</ul></nav></details></aside>`;
+    const warning = !input.available ? html `<p class="coding-notice">Codex is unavailable on this installation. Install and sign in to Codex on the host to start coding.</p>` : '';
     const error = input.error ?? selected?.session.error ?? '';
     let main;
     if (!selected) {
-        const options = input.projects.map(p => `<option value="${escape(p.path)}"${selectedRepo === p.path ? ' selected' : ''}>${escape(p.name)}</option>`).join('');
-        main = `<header class="coding-header"><h1>Build with Codex</h1></header>${warning}${input.projects.length ? `<form method="post" action="/code/start" data-coding-form="start" class="coding-start">${hidden({ csrf, requestId: randomUUID() })}<label>Project<select name="repo" required>${options}</select></label><label>What would you like to change?<textarea name="prompt" rows="5" required maxlength="24000" placeholder="Describe the result you want…">${escape(input.draft ?? '')}</textarea></label><details class="coding-options"><summary>Session options</summary><label>Title <span class="coding-meta">Optional</span><input name="title" maxlength="160" autocomplete="off"></label><label>Model <span class="coding-meta">Optional; uses the installed default</span><input name="model" maxlength="120" placeholder="Installed default" autocomplete="off"></label></details><p class="coding-terms">Codex uses this installation’s login and edits a separate copy of this project. It can run commands and read files outside the project. Connected tools (MCP servers) keep their own access to this computer and connected services. Additional command and file access requires your approval.</p><label>Password to start<input type="password" name="password" autocomplete="current-password" required></label><button type="submit"${input.available ? '' : ' disabled'}>Start coding</button></form>` : '<div class="coding-empty"><p>Add a project to start coding.</p><a class="coding-link-button" href="/projects">Open projects</a></div>'}`;
+        const options = input.projects.map(p => html `<option value="${p.path}"${selectedRepo === p.path ? html ` selected` : ''}>${p.name}</option>`);
+        main = html `<header class="coding-header"><h1>Build with Codex</h1></header>${warning}${input.projects.length ? postForm('/code/start', html `<label>Project<select name="repo" required>${options}</select></label><label>What would you like to change?<textarea name="prompt" rows="5" required maxlength="24000" placeholder="Describe the result you want…">${input.draft ?? ''}</textarea></label><details class="coding-options"><summary>Session options</summary><label>Title <span class="coding-meta">Optional</span><input name="title" maxlength="160" autocomplete="off"></label><label>Model <span class="coding-meta">Optional; uses the installed default</span><input name="model" maxlength="120" placeholder="Installed default" autocomplete="off"></label></details><p class="coding-terms">Codex uses this installation’s login and edits a separate copy of this project. It can run commands and read files outside the project. Connected tools (MCP servers) keep their own access to this computer and connected services. Additional command and file access requires your approval.</p><label>Password to start<input type="password" name="password" autocomplete="current-password" required></label><button type="submit"${input.available ? '' : html ` disabled`}>Start coding</button>`, { attrs: { 'data-coding-form': 'start', class: 'coding-start' }, hidden: { requestId: randomUUID() } }) : html `<div class="coding-empty"><p>Add a project to start coding.</p><a class="coding-link-button" href="/projects">Open projects</a></div>`}`;
     }
     else {
         const s = selected.session;
         const blocked = !s.nativeThreadId || !['ready', 'working', 'failed', 'interrupted'].includes(s.status);
-        const messages = selected.items.filter(item => item.type !== 'reasoning').map(itemHtml).join('');
-        main = `<header class="coding-header"><div><h1>${escape(s.title)}</h1><p class="coding-meta">${escape(projectName(s.repo))} · Codex${s.model ? ` · ${escape(s.model)}` : ''}</p></div><details class="coding-session-detail"><summary aria-label="Session details">Details</summary><dl><dt>Branch</dt><dd>${escape(s.branch)}</dd><dt>Worktree</dt><dd>${escape(s.worktree)}</dd><dt>Native session</dt><dd>${escape(s.nativeThreadId ?? 'Not established')}</dd>${s.initialRequest ? `<dt>Initial request</dt><dd class="coding-text">${escape(s.initialRequest.prompt)}</dd>` : ''}</dl></details></header><div class="coding-state-row"><p id="coding-state" role="status">${escape(stateLabel(s, selected.requests))}</p><div id="coding-controls">${controlsHtml(s, csrf)}</div></div><div id="coding-requests">${selected.requests.map(r => requestHtml(r, s.id, csrf)).join('')}</div><div id="coding-conversation" class="coding-conversation" tabindex="0" aria-label="Conversation"${s.status === 'closed' && !messages ? ' hidden' : ''}>${messages || '<p class="coding-meta coding-no-messages">No messages yet.</p>'}</div><button type="button" id="coding-latest" class="coding-secondary" hidden>Latest update ↓</button><form method="post" action="${sessionUrl(s.id)}/send" data-coding-form="send" class="coding-composer"${s.status === 'closed' ? ' hidden' : ''}>${hidden({ csrf, requestId: randomUUID() })}<label for="coding-prompt">Message Codex</label><textarea id="coding-prompt" name="prompt" rows="2" maxlength="24000" required placeholder="Describe a change or ask about the result…">${escape(input.draft ?? '')}</textarea><div class="coding-actions"><button type="submit"${blocked ? ' disabled' : ''}>${s.status === 'working' ? 'Send update' : 'Send message'}</button></div></form><details id="coding-changes" class="coding-changes"><summary>Changes</summary><div id="coding-change-content"><p class="coding-meta">Open to load the current changes.</p></div><button type="button" id="coding-refresh-changes" class="coding-secondary">Refresh changes</button><noscript><a href="${sessionUrl(s.id)}/changes">View changes</a></noscript><p id="coding-shipping"${['closed', 'uncertain'].includes(s.status) ? ' hidden' : ''}><a class="coding-link-button" href="${sessionUrl(s.id)}/ship">Review for shipping</a></p></details>`;
+        const messages = selected.items.filter(item => item.type !== 'reasoning').map(itemHtml);
+        const composer = postForm(`${sessionUrl(s.id)}/send`, html `<label for="coding-prompt">Message Codex</label><textarea id="coding-prompt" name="prompt" rows="2" maxlength="24000" required placeholder="Describe a change or ask about the result…">${input.draft ?? ''}</textarea><div class="coding-actions"><button type="submit"${blocked ? html ` disabled` : ''}>${s.status === 'working' ? 'Send update' : 'Send message'}</button></div>`, { attrs: { 'data-coding-form': 'send', class: 'coding-composer', hidden: s.status === 'closed' }, hidden: { requestId: randomUUID() } });
+        main = html `<header class="coding-header"><div><h1>${s.title}</h1><p class="coding-meta">${projectName(s.repo)} · Codex${s.model ? html ` · ${s.model}` : ''}</p></div><details class="coding-session-detail"><summary aria-label="Session details">Details</summary><dl><dt>Branch</dt><dd>${s.branch}</dd><dt>Worktree</dt><dd>${s.worktree}</dd><dt>Native session</dt><dd>${s.nativeThreadId ?? 'Not established'}</dd>${s.initialRequest ? html `<dt>Initial request</dt><dd class="coding-text">${s.initialRequest.prompt}</dd>` : ''}</dl></details></header><div class="coding-state-row"><p id="coding-state" role="status">${stateLabel(s, selected.requests)}</p><div id="coding-controls">${controlsHtml(s)}</div></div><div id="coding-requests">${selected.requests.map(r => requestHtml(r, s.id))}</div><div id="coding-conversation" class="coding-conversation" tabindex="0" aria-label="Conversation"${s.status === 'closed' && messages.length === 0 ? html ` hidden` : ''}>${messages.length ? messages : html `<p class="coding-meta coding-no-messages">No messages yet.</p>`}</div><button type="button" id="coding-latest" class="coding-secondary" hidden>Latest update ↓</button>${composer}<details id="coding-changes" class="coding-changes"><summary>Changes</summary><div id="coding-change-content"><p class="coding-meta">Open to load the current changes.</p></div><button type="button" id="coding-refresh-changes" class="coding-secondary">Refresh changes</button><noscript><a href="${sessionUrl(s.id)}/changes">View changes</a></noscript><p id="coding-shipping"${['closed', 'uncertain'].includes(s.status) ? html ` hidden` : ''}><a class="coding-link-button" href="${sessionUrl(s.id)}/ship">Review for shipping</a></p></details>`;
     }
-    return `<section class="coding-workspace" data-coding-session="${escape(selected?.session.id ?? '')}" data-coding-owner="${escape(selected?.session.owner ?? input.owner ?? '')}" data-coding-project="${escape(selectedRepo ?? input.projects[0]?.path ?? '')}" data-coding-status="${escape(selected?.session.status ?? '')}" data-coding-native-thread="${Boolean(selected?.session.nativeThreadId)}" data-coding-revision="${selected?.revision ?? -1}" data-coding-csrf="${escape(csrf)}">${sidebar}<div class="coding-main"><div id="coding-error" class="coding-notice" role="alert"${error ? '' : ' hidden'}>${noticeHtml(error)}</div><p id="coding-connection" class="coding-meta" role="status" hidden></p>${main}</div></section>`;
+    return html `<section class="coding-workspace" data-coding-session="${selected?.session.id ?? ''}" data-coding-owner="${selected?.session.owner ?? input.owner ?? ''}" data-coding-project="${selectedRepo ?? input.projects[0]?.path ?? ''}" data-coding-status="${selected?.session.status ?? ''}" data-coding-native-thread="${String(Boolean(selected?.session.nativeThreadId))}" data-coding-revision="${selected?.revision ?? -1}" data-coding-csrf="${csrf}">${sidebar}<div class="coding-main"><div id="coding-error" class="coding-notice" role="alert"${error ? '' : html ` hidden`}>${noticeHtml(error)}</div><p id="coding-connection" class="coding-meta" role="status" hidden></p>${main}</div></section>`;
 }
 export const CODING_CSS = `
 .coding-workspace{display:grid;grid-template-columns:224px minmax(0,1fr);gap:24px;max-width:1220px;min-width:0;margin:0 auto;overflow-wrap:anywhere}

package/dist/contracts/cli.d.ts

@@ -323,13 +323,12 @@ export declare const COMMAND_OUTPUTS: {
                 assets: "assets";
                 auth: "auth";
                 chat: "chat";
-                "chat-stream": "chat-stream";
                 cli: "cli";
                 console: "console";
                 decisions: "decisions";
-                "flow-stream": "flow-stream";
                 flows: "flows";
                 health: "health";
+                live: "live";
                 mcp: "mcp";
                 metrics: "metrics";
                 other: "other";
@@ -339,7 +338,6 @@ export declare const COMMAND_OUTPUTS: {
                 settings: "settings";
                 tasks: "tasks";
                 team: "team";
-                "team-stream": "team-stream";
             }> & z.core.$partial, z.ZodObject<{
                 count: z.ZodNumber;
                 p50Ms: z.ZodNullable<z.ZodNumber>;

package/dist/contracts/console-api.d.ts

@@ -177,7 +177,7 @@ export declare const CONSOLE_FORMS: {
 };
 export type ConsoleFormName = keyof typeof CONSOLE_FORMS;
 /** The console POSTs whose handlers read no field (sign-out not even the shared guard): their contract is the empty form. */
-export declare const BODILESS_POSTS: readonly ["POST /settings/lead/on", "POST /r/<run>/draft-repair", "POST /ledger/checkpoint", "POST /settings/backups/now", "POST /mode/revoke", "POST /settings/telegram/retry", "POST /providers/<provider>/resume", "POST /logout", "POST /t/<task>/unhold", "POST /t/<task>/plan", "POST /t/<task>/retry-review"];
+export declare const BODILESS_POSTS: readonly ["POST /settings/models/<unknown action>", "POST /settings/lead/on", "POST /r/<run>/draft-repair", "POST /ledger/checkpoint", "POST /settings/backups/now", "POST /mode/revoke", "POST /settings/telegram/retry", "POST /providers/<provider>/resume", "POST /logout", "POST /t/<task>/unhold", "POST /t/<task>/plan", "POST /t/<task>/retry-review"];
 /** The field names a console form's handler may read. */
 export type FormFieldOf<N extends ConsoleFormName> = (typeof CONSOLE_FORMS)[N] extends FormContract<infer K> ? K : never;
 /** `GET /ledger?format=json`: the chain's state, a page of entries (newest first) and the cursor for the next. */

package/dist/contracts/console-api.js

@@ -73,10 +73,10 @@ export const CONSOLE_FORMS = {
     mutationGuard: formContract("POST (every signed-in form)", ["csrf", "token", "digest", "nonce", "confirm"]),
     ledgerTarget: formContract("POST (the action ledger's project)", ["repo"]),
     projectCeiling: formContract("POST (project ceiling)", ["repo"]),
-    demo: formContract("POST /chat/demo/<act>", ["message", "note"]),
+    demo: formContract("POST /chat/demo/ask, /chat/demo/<id>/approve|change|revise|complete", ["message", "note"]),
     updatesDismiss: formContract("POST /settings/updates/dismiss", ["version", "quiet", "return"]),
     updatesChecks: formContract("POST /settings/updates/checks", ["check"]),
-    code: formContract("POST /code, /code/start, /code/<session>/<act>", ["repo", "password", "title", "model", "prompt", "requestId", "base", "candidate", "goal", "acceptance", "visual", "decision", "answers"], { prefixes: ["question:"] }),
+    code: formContract("POST /code, /code/start, /code/<session>/<act>, /code/<anything else>", ["repo", "password", "title", "model", "prompt", "requestId", "base", "candidate", "goal", "acceptance", "visual", "decision", "answers"], { prefixes: ["question:"] }),
     skillsRevise: formContract("POST /settings/skills/revise", ["run", "repo", "feedback", "nonce"]),
     skillsChange: formContract("POST /settings/skills/import, /settings/skills/change", ["repo", "identity", "revision", "method", "content", "files", "url", "action", "sha", "sample", "nonce", "restore"]),
     kit: formContract("POST /kits/<kit>/<act>", ["repo"]),
@@ -111,11 +111,11 @@ export const CONSOLE_FORMS = {
     knowledgeChange: formContract("POST /settings/knowledge/change", ["repo", "action", "identity", "revision", "instructions", "title", "content", "path", "id", "restore"]),
     learningChange: formContract("POST /settings/learning/change", ["repo", "action", "identity", "revision", "lesson", "version", "sha"]),
     projectSetup: formContract("POST /control/setup-preview, /control/setup-approve, /control/instructions-preview, /control/instructions-approve", ["repo", "nonce", "fingerprint", "token", "provider", "model", "command", "seconds"]),
-    slack: formContract("POST /settings/slack/<connect|pair|unpair|disconnect|alerts>", ["password", "app-token", "bot-token"]),
+    slack: formContract("POST /settings/slack/connect|pair|unpair|disconnect|alerts", ["password", "app-token", "bot-token"]),
     chatApproval: formContract("POST /settings/chat-approval/confirm, /settings/chat-approval/save, /settings/chat-approval/off", ["scope", "full-access", "cap-usd", "nonce", "digest", "token"]),
     telegramPair: formContract("POST /settings/telegram/pair, /settings/telegram/unpair", ["password"]),
-    teams: formContract("POST /settings/teams/<connect|pair|unpair|disconnect|alerts>", ["password", "app-id", "tenant", "secret"]),
-    discord: formContract("POST /settings/discord/<connect|pair|unpair|disconnect|alerts>", ["password", "bot-token"]),
+    teams: formContract("POST /settings/teams/connect|pair|unpair|disconnect|alerts", ["password", "app-id", "tenant", "secret"]),
+    discord: formContract("POST /settings/discord/connect|pair|unpair|disconnect|alerts", ["password", "bot-token"]),
     messaging: formContract("POST /settings/messaging", ["primary"]),
     permissionDefault: formContract("POST /settings/permission-default", ["permission-mode"]),
     qualityDefault: formContract("POST /settings/quality-default", ["quality-mode"]),
@@ -188,6 +188,7 @@ export const CONSOLE_FORMS = {
 };
 /** The console POSTs whose handlers read no field (sign-out not even the shared guard): their contract is the empty form. */
 export const BODILESS_POSTS = [
+    "POST /settings/models/<unknown action>",
     "POST /settings/lead/on",
     "POST /r/<run>/draft-repair",
     "POST /ledger/checkpoint",

package/dist/contracts/health.d.ts

@@ -21,13 +21,12 @@ export declare const healthSnapshotSchema: z.ZodObject<{
         assets: "assets";
         auth: "auth";
         chat: "chat";
-        "chat-stream": "chat-stream";
         cli: "cli";
         console: "console";
         decisions: "decisions";
-        "flow-stream": "flow-stream";
         flows: "flows";
         health: "health";
+        live: "live";
         mcp: "mcp";
         metrics: "metrics";
         other: "other";
@@ -37,7 +36,6 @@ export declare const healthSnapshotSchema: z.ZodObject<{
         settings: "settings";
         tasks: "tasks";
         team: "team";
-        "team-stream": "team-stream";
     }> & z.core.$partial, z.ZodObject<{
         count: z.ZodNumber;
         p50Ms: z.ZodNullable<z.ZodNumber>;

package/dist/control-ui.d.ts

@@ -1,12 +1,12 @@
 /** Shared setup views over the existing project configuration and approval doors. */
+import { type Html } from "./html.js";
 import type { ProviderId } from "./provider.js";
 import type { ProviderConnection } from "./provider-connection.js";
 import { type ModelChoice } from "./setup-guide.js";
 import type { SetupInputs } from "./control-setup.js";
 import { type OpenRouterModels } from "./openrouter-models.js";
-export declare function hiddenFields(values: Record<string, string>): string;
 export declare function connectionWords(connection: ProviderConnection): string;
-export declare function connectionHtml(provider: ProviderId, connection: ProviderConnection, task?: string): string;
+export declare function connectionHtml(provider: ProviderId, connection: ProviderConnection, task?: string): Html;
 export declare function controlSetupHtml(data: {
     repo: string;
     csrf: string;
@@ -25,5 +25,6 @@ export declare function controlSetupHtml(data: {
         installed: boolean;
         message?: string;
     };
-}): string;
-export declare function setupPreviewHtml(inputs: SetupInputs, fields: Record<string, string>): string;
+}): Html;
+/** `fields` may still carry the session's csrf (a caller's habit): postForm writes the one CSRF field. */
+export declare function setupPreviewHtml(inputs: SetupInputs, fields: Record<string, string>): Html;

package/dist/control-ui.js

@@ -1,9 +1,7 @@
+/** Shared setup views over the existing project configuration and approval doors. */
+import { html, joinHtml, postForm } from "./html.js";
 import { ASSISTANTS } from "./setup-guide.js";
 import { openRouterPicker } from "./openrouter-models.js";
-const escape = (value) => value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
-export function hiddenFields(values) {
-    return Object.entries(values).map(([name, value]) => `<input type="hidden" name="${escape(name)}" value="${escape(value)}">`).join("");
-}
 export function connectionWords(connection) {
     return {
         connected: "Connected", "signed-out": "Not signed in", "not-installed": "CLI not installed",
@@ -12,42 +10,19 @@ export function connectionWords(connection) {
 }
 export function connectionHtml(provider, connection, task = "") {
     const query = new URLSearchParams({ provider, ...(task ? { task } : {}) });
-    return `<div class="card assistant-account"><p><strong>${escape(ASSISTANTS[provider].name)} · ${connectionWords(connection)}</strong></p>` +
-        `<p class="meta">${[connection.email, connection.plan, connection.method].filter(Boolean).map(one => escape(one)).join(" · ")}</p>` +
-        `<p class="meta">Checked ${escape(new Date(connection.checkedAt).toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", timeZoneName: "short" }))} on the computer running this console. Sign-in does not prove model access or remaining quota.</p>` +
-        `<a class="button-link" href="/control/connection?${escape(query.toString())}">${connection.state === "connected" ? "Manage connection" : "Connect account"}</a> · ` +
-        `<a href="/control?${escape(query.toString())}&amp;check-connection=1">Check again</a></div>`;
+    return html `<div class="card assistant-account"><p><strong>${ASSISTANTS[provider].name} · ${connectionWords(connection)}</strong></p><p class="meta">${[connection.email, connection.plan, connection.method].filter(Boolean).join(" · ")}</p><p class="meta">Checked ${new Date(connection.checkedAt).toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", timeZoneName: "short" })} on the computer running this console. Sign-in does not prove model access or remaining quota.</p><a class="button-link" href="/control/connection?${query.toString()}">${connection.state === "connected" ? "Manage connection" : "Connect account"}</a> · <a href="/control?${query.toString()}&amp;check-connection=1">Check again</a></div>`;
 }
 export function controlSetupHtml(data) {
     const { provider, inputs, task = "" } = data;
     const query = new URLSearchParams({ provider, ...(task ? { task } : {}) });
     const model = data.catalog !== null
         ? openRouterPicker(data.catalog, inputs.model || null, `/control?${query}&refresh-models=1`)
-        : `<label>Model<input type="text" name="model" value="${escape(inputs.model)}" list="setup-models" required autocomplete="off" placeholder="Exact model id or supported alias"></label>` +
-            `<datalist id="setup-models">${data.models.map(one => `<option value="${escape(one.value)}">${escape(one.label)}</option>`).join("")}</datalist>`;
-    return `<h1>Project setup</h1><p>${escape(data.repo)}</p>` +
-        `<p class="meta">Choose the default builder for new tasks and the preparation command for this project.</p>` +
-        `<nav class="assistant-picker row" aria-label="Choose provider">${Object.keys(ASSISTANTS).map(id => `<a class="button-link" href="/control?${escape(new URLSearchParams({ provider: id, ...(task ? { task } : {}) }).toString())}"${id === provider ? ' aria-current="page"' : ""}>${ASSISTANTS[id].name}</a>`).join(" ")}</nav>` +
-        connectionHtml(provider, data.connection, task) +
-        `<form method="post" action="/control/setup-preview" class="card">${hiddenFields({ csrf: data.csrf, repo: data.repo, provider, task })}` + model +
-        `<details class="setup-advanced"><summary>Project preparation</summary>` +
-        (data.preparation === null ? "" : `<p class="meta">Suggested from ${escape(data.preparation.evidence)}: ${escape(data.preparation.label)} — <code>${escape(data.preparation.command)}</code>. Review before approving.</p>`) +
-        `<label>Preparation command<textarea name="command" rows="2" maxlength="2000">${escape(inputs.command)}</textarea></label>` +
-        `<label>Preparation timeout in seconds<input name="seconds" type="number" min="1" max="3600" value="${escape(inputs.seconds)}" required></label>` +
-        `<p class="meta">Preparation applies to subsequent runs, including already approved tasks. Saving setup does not execute it.</p></details>` +
-        `<button type="submit">Review project setup</button></form>` +
-        `<section class="card"><h2>Agent instructions</h2>` +
-        (data.instructions.message ? `<p>${escape(data.instructions.message)}</p>` : data.instructions.installed ? `<p>Toolroll instructions are installed.</p>` :
-            `<p>Give the agent the project's Toolroll handoff instructions.</p><form method="post" action="/control/instructions-preview">${hiddenFields({ csrf: data.csrf, repo: data.repo })}<button>Review instructions</button></form>`) +
-        `</section><p><a href="/fleet">Configure planning, repair, and review agents</a> · <a href="/tasks/new">Describe a task</a></p>`;
+        : html `<label>Model<input type="text" name="model" value="${inputs.model}" list="setup-models" required autocomplete="off" placeholder="Exact model id or supported alias"></label><datalist id="setup-models">${data.models.map(one => html `<option value="${one.value}">${one.label}</option>`)}</datalist>`;
+    return html `<h1>Project setup</h1><p>${data.repo}</p><p class="meta">Choose the default builder for new tasks and the preparation command for this project.</p><nav class="assistant-picker row" aria-label="Choose provider">${joinHtml(Object.keys(ASSISTANTS).map(id => html `<a class="button-link" href="/control?${new URLSearchParams({ provider: id, ...(task ? { task } : {}) }).toString()}"${id === provider ? html ` aria-current="page"` : ""}>${ASSISTANTS[id].name}</a>`), " ")}</nav>${connectionHtml(provider, data.connection, task)}${postForm("/control/setup-preview", html `${model}<details class="setup-advanced"><summary>Project preparation</summary>${data.preparation === null ? "" : html `<p class="meta">Suggested from ${data.preparation.evidence}: ${data.preparation.label} — <code>${data.preparation.command}</code>. Review before approving.</p>`}<label>Preparation command<textarea name="command" rows="2" maxlength="2000">${inputs.command}</textarea></label><label>Preparation timeout in seconds<input name="seconds" type="number" min="1" max="3600" value="${inputs.seconds}" required></label><p class="meta">Preparation applies to subsequent runs, including already approved tasks. Saving setup does not execute it.</p></details><button type="submit">Review project setup</button>`, { attrs: { class: "card" }, hidden: { repo: data.repo, provider, task } })}<section class="card"><h2>Agent instructions</h2>${data.instructions.message ? html `<p>${data.instructions.message}</p>` : data.instructions.installed ? html `<p>Toolroll instructions are installed.</p>` :
+        html `<p>Give the agent the project's Toolroll handoff instructions.</p>${postForm("/control/instructions-preview", html `<button>Review instructions</button>`, { hidden: { repo: data.repo } })}`}</section><p><a href="/fleet">Configure planning, repair, and review agents</a> · <a href="/tasks/new">Describe a task</a></p>`;
 }
+/** `fields` may still carry the session's csrf (a caller's habit): postForm writes the one CSRF field. */
 export function setupPreviewHtml(inputs, fields) {
-    return `<h1>Approve project setup</h1><div class="card"><p>${escape(fields.repo ?? "")}</p>` +
-        `<p><strong>Builder:</strong> ${escape(inputs.provider)} · ${escape(inputs.model)}</p>` +
-        `<p><strong>Preparation:</strong></p><pre class="recap">${escape(inputs.command || "No preparation command")}</pre>` +
-        `<p>Preparation timeout: ${escape(inputs.seconds)} seconds.</p>` +
-        `<p>The builder default applies to new tasks. Preparation applies to subsequent runs, including already approved tasks. Existing signed task settings and verification rules remain in force.</p>` +
-        `<form method="post" action="/control/setup-approve">${hiddenFields({ ...fields, ...inputs })}` +
-        `<label>Your password<input type="password" name="token" autocomplete="current-password" required></label>` +
-        `<button>Approve project setup</button></form></div>`;
+    const { csrf: _csrf, ...rest } = fields;
+    return html `<h1>Approve project setup</h1><div class="card"><p>${fields.repo ?? ""}</p><p><strong>Builder:</strong> ${inputs.provider} · ${inputs.model}</p><p><strong>Preparation:</strong></p><pre class="recap">${inputs.command || "No preparation command"}</pre><p>Preparation timeout: ${inputs.seconds} seconds.</p><p>The builder default applies to new tasks. Preparation applies to subsequent runs, including already approved tasks. Existing signed task settings and verification rules remain in force.</p>${postForm("/control/setup-approve", html `<label>Your password<input type="password" name="token" autocomplete="current-password" required></label><button>Approve project setup</button>`, { hidden: { ...rest, ...inputs } })}</div>`;
 }

package/dist/credentials-ui.d.ts

@@ -4,6 +4,7 @@
  * can see and end everyone's.
  */
 import type { ApiTokenRow, WebSessionRow } from "./store.js";
+import { type Html } from "./html.js";
 export declare const CREDENTIALS_CSS: string;
 /** "Chrome on macOS", from a user agent, for a person to recognise a session. */
 export declare function deviceWords(agent: string | null): string;
@@ -19,12 +20,12 @@ export type CredentialsView = {
     /** Request limits (request-budget-ui.ts): words for each token's line, and the operator's disclosure. */
     limits?: {
         note: (token: ApiTokenRow) => string;
-        section: string;
+        section: Html;
     };
 };
-export declare function credentialsHtml(view: CredentialsView, csrf: string, notice: {
+export declare function credentialsHtml(view: CredentialsView, notice: {
     said?: string | null;
     problem?: string | null;
-}): string;
+}): Html;
 /** The token, once: a focused page with no script. */
-export declare function tokenShownHtml(name: string, token: string, access: "read" | "act", expiresAt: string): string;
+export declare function tokenShownHtml(name: string, token: string, access: "read" | "act", expiresAt: string): Html;

package/dist/credentials-ui.js

@@ -1,6 +1,6 @@
 import { daysLeft, expiryNoticeDue, TOKEN_DAYS, tokenLive } from "./api-tokens.js";
 import { projectName } from "./project.js";
-const e = (value) => String(value ?? "").replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+import { html, postForm } from "./html.js";
 export const CREDENTIALS_CSS = `.credentials{max-width:820px;min-width:0}.credentials .card{padding:14px 16px;margin:12px 0}.credentials h2{font-size:1.05rem;margin:0 0 8px}` +
     `.credentials .rows{display:grid;gap:0;border:1px solid var(--so-line);border-radius:10px;overflow:hidden}.credentials .row-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--so-line)}` +
     `.credentials .row-item:last-child{border-bottom:0}.credentials .row-item p{margin:0}.credentials .row-item .meta{font-size:.85rem}.credentials form{margin:0}.credentials button{min-height:40px;white-space:nowrap}` +
@@ -22,39 +22,38 @@ const when = (value, now) => {
     const minutes = Math.round((now - at) / 60_000);
     return minutes < 1 ? "just now" : minutes < 60 ? `${minutes} min ago` : minutes < 60 * 24 ? `${Math.round(minutes / 60)} h ago` : new Date(at).toISOString().slice(0, 10);
 };
-export function credentialsHtml(view, csrf, notice) {
-    const hidden = (fields) => Object.entries(fields).map(([k, v]) => `<input type="hidden" name="${e(k)}" value="${e(v)}">`).join("");
-    const post = (fields, label, style = "secondary") => `<form method="post" action="/settings/sessions">${hidden({ csrf, ...fields, ...(view.everyone ? { everyone: "1" } : {}) })}<button class="${style}">${label}</button></form>`;
-    const note = notice.problem ? `<p class="problem" role="alert">${e(notice.problem)}</p>` : notice.said ? `<p role="status">${e(notice.said)}</p>` : "";
-    const toggle = view.canSeeEveryone ? `<p class="meta"><a href="/settings/sessions${view.everyone ? "" : "?everyone=1"}">${view.everyone ? "Show only mine" : "Show everyone's"}</a></p>` : "";
-    const sessions = view.sessions.length === 0 ? `<p class="meta">No one else is signed in.</p>` : `<div class="rows">${view.sessions.map(one => `<div class="row-item" data-session="${e(one.idHash.slice(0, 12))}"><div><p>${view.everyone ? `<strong>${e(one.account)}</strong> · ` : ""}${e(deviceWords(one.agent))}${one.here ? `<span class="badge-here">This browser</span>` : ""}</p>` +
-        `<p class="meta">${one.ssoAt === null ? "Password" : "Identity provider"} · ${e(one.address ?? "unknown address")} · active ${e(when(one.lastSeen, view.now))} · signed in ${e(when(one.createdAt, view.now))}</p></div>` +
-        `${one.here ? "" : post({ action: "end-session", session: one.idHash }, "Sign out")}</div>`).join("")}</div>`;
+export function credentialsHtml(view, notice) {
+    const post = (fields, label, style = "secondary") => postForm("/settings/sessions", html `<button class="${style}">${label}</button>`, { hidden: { ...fields, ...(view.everyone ? { everyone: "1" } : {}) } });
+    const note = notice.problem ? html `<p class="problem" role="alert">${notice.problem}</p>` : notice.said ? html `<p role="status">${notice.said}</p>` : "";
+    const toggle = view.canSeeEveryone ? html `<p class="meta"><a href="/settings/sessions${view.everyone ? "" : "?everyone=1"}">${view.everyone ? "Show only mine" : "Show everyone's"}</a></p>` : "";
+    const sessions = view.sessions.length === 0 ? html `<p class="meta">No one else is signed in.</p>` : html `<div class="rows">${view.sessions.map(one => html `<div class="row-item" data-session="${one.idHash.slice(0, 12)}"><div><p>${view.everyone ? html `<strong>${one.account}</strong> · ` : ""}${deviceWords(one.agent)}${one.here ? html `<span class="badge-here">This browser</span>` : ""}</p>\
+<p class="meta">${one.ssoAt === null ? "Password" : "Identity provider"} · ${one.address ?? "unknown address"} · active ${when(one.lastSeen, view.now)} · signed in ${when(one.createdAt, view.now)}</p></div>\
+${one.here ? "" : post({ action: "end-session", session: one.idHash }, "Sign out")}</div>`)}</div>`;
     const others = view.sessions.filter(one => !one.here && one.account === view.who).length;
     const endOthers = others > 0 && !view.everyone ? post({ action: "end-others" }, `Sign out everywhere else (${others})`) : "";
     const live = view.tokens.filter(one => tokenLive(one, view.now));
     // v111: its projects, and one state: when it stops (soon, said once and marked) or, once replaced, when it ends.
     const ends = (one) => {
         if (one.replacedBy !== null && one.overlapUntil !== null)
-            return `<span class="soon">Replaced · stops ${e(one.overlapUntil.slice(11, 16))} UTC</span>`;
+            return html `<span class="soon">Replaced · stops ${one.overlapUntil.slice(11, 16)} UTC</span>`;
         if (expiryNoticeDue(one, view.now) === null)
-            return `Expires ${e(one.expiresAt.slice(0, 10))}`;
+            return html `Expires ${one.expiresAt.slice(0, 10)}`;
         const days = daysLeft(one.expiresAt, view.now);
-        return `<span class="soon">Expires ${days <= 1 ? "within a day" : `in ${days} days`}</span>`;
+        return html `<span class="soon">Expires ${days <= 1 ? "within a day" : `in ${days} days`}</span>`;
     };
-    const scope = (one) => one.projects === null ? "All projects" : one.projects.length === 0 ? "No projects" : one.projects.map(repo => e(projectName(repo))).join(", ");
-    const tokens = live.length === 0 ? `<p class="meta">No API tokens.</p>` : `<div class="rows">${live.map(one => `<div class="row-item" data-token="${e(one.id)}"><div><p>${view.everyone ? `<strong>${e(one.account)}</strong> · ` : ""}${e(one.name)} · ${one.access === "act" ? "Can act" : "Read only"}</p>` +
-        `<p class="meta">${scope(one)} · ${ends(one)} · last used ${e(when(one.lastUsedAt, view.now))}${view.limits === undefined ? "" : ` · ${e(view.limits.note(one))}`}</p></div>${post({ action: "revoke-token", token: one.id }, "Revoke")}</div>`).join("")}</div>`;
-    const create = `<details class="card"><summary>New API token</summary><form method="post" action="/settings/sessions" class="create">${hidden({ csrf, action: "create-token" })}` +
-        `<label>Name<input type="text" name="name" maxlength="60" required placeholder="for example: CI"></label>` +
-        `<label>It can<select name="access"><option value="read">Read (tasks, results, the ledger)</option><option value="act">Act as you (file and manage work; never approve)</option></select></label>` +
-        `<label>Expires in<select name="days">${TOKEN_DAYS.map(days => `<option value="${days}"${days === 90 ? " selected" : ""}>${days} days</option>`).join("")}</select></label>` +
-        `<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password" required></label><button>Make the token</button></form></details>`;
-    return `<section class="credentials">${note}${toggle}<h2>Signed in</h2>${sessions}${endOthers}<h2 style="margin-top:1.5rem">API tokens</h2>` +
-        `<p class="meta">For scripts and CI: send <code>Authorization: Bearer &lt;token&gt;</code>. A token can't approve anything.</p>${tokens}${view.everyone ? "" : create}${view.limits?.section ?? ""}</section>`;
+    const scope = (one) => one.projects === null ? "All projects" : one.projects.length === 0 ? "No projects" : one.projects.map(repo => projectName(repo)).join(", ");
+    const tokens = live.length === 0 ? html `<p class="meta">No API tokens.</p>` : html `<div class="rows">${live.map(one => html `<div class="row-item" data-token="${one.id}"><div><p>${view.everyone ? html `<strong>${one.account}</strong> · ` : ""}${one.name} · ${one.access === "act" ? "Can act" : "Read only"}</p>\
+<p class="meta">${scope(one)} · ${ends(one)} · last used ${when(one.lastUsedAt, view.now)}${view.limits === undefined ? "" : ` · ${view.limits.note(one)}`}</p></div>${post({ action: "revoke-token", token: one.id }, "Revoke")}</div>`)}</div>`;
+    const create = html `<details class="card"><summary>New API token</summary>${postForm("/settings/sessions", html `\
+<label>Name<input type="text" name="name" maxlength="60" required placeholder="for example: CI"></label>\
+<label>It can<select name="access"><option value="read">Read (tasks, results, the ledger)</option><option value="act">Act as you (file and manage work; never approve)</option></select></label>\
+<label>Expires in<select name="days">${TOKEN_DAYS.map(days => html `<option value="${days}"${days === 90 ? " selected" : ""}>${days} days</option>`)}</select></label>\
+<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password" required></label><button>Make the token</button>`, { attrs: { class: "create" }, hidden: { action: "create-token" } })}</details>`;
+    return html `<section class="credentials">${note}${toggle}<h2>Signed in</h2>${sessions}${endOthers}<h2 style="margin-top:1.5rem">API tokens</h2>\
+<p class="meta">For scripts and CI: send <code>Authorization: Bearer &lt;token&gt;</code>. A token can't approve anything.</p>${tokens}${view.everyone ? "" : create}${view.limits?.section ?? ""}</section>`;
 }
 /** The token, once: a focused page with no script. */
 export function tokenShownHtml(name, token, access, expiresAt) {
-    return `<h1>${e(name)}</h1><div class="card"><p>Your API token, shown once. Only a hash is kept, so copy it now.</p><p class="mono secret-value">${e(token)}</p>` +
-        `<p class="meta">${access === "act" ? "It acts as you (never approves)" : "It reads"} until ${e(expiresAt.slice(0, 10))}. Revoke it any time on Sessions &amp; tokens.</p></div><p class="meta"><a href="/settings/sessions">Back to Sessions &amp; tokens</a></p>`;
+    return html `<h1>${name}</h1><div class="card"><p>Your API token, shown once. Only a hash is kept, so copy it now.</p><p class="mono secret-value">${token}</p>\
+<p class="meta">${access === "act" ? "It acts as you (never approves)" : "It reads"} until ${expiresAt.slice(0, 10)}. Revoke it any time on Sessions &amp; tokens.</p></div><p class="meta"><a href="/settings/sessions">Back to Sessions &amp; tokens</a></p>`;
 }

package/dist/demo-chat.d.ts

@@ -1,3 +1,4 @@
+import { type Html } from "./html.js";
 import type { DemoExchange } from "./demo.js";
 /** What a finished exchange's stored result holds, read back from its evidence. */
 export type DemoResultView = {
@@ -17,14 +18,13 @@ export type DemoResultView = {
     taskHref: string;
 };
 /** The conversation itself; the live script swaps this region in place. */
-export declare function demoThreadHtml(exchanges: readonly DemoExchange[], csrf: string, resultOf: (exchange: DemoExchange) => DemoResultView | null): string;
+export declare function demoThreadHtml(exchanges: readonly DemoExchange[], resultOf: (exchange: DemoExchange) => DemoResultView | null): Html;
 export declare function demoChatHtml(input: {
     exchanges: readonly DemoExchange[];
-    csrf: string;
     version: number;
     problem: string | null;
     resultOf: (exchange: DemoExchange) => DemoResultView | null;
-}): string;
+}): Html;
 /**
  * Keeps a running build live: polls while one is working and swaps the
  * thread in place, unless the visitor is typing inside it. Enter sends.