@jbarket/loomai 0.8.0 → 0.9.0

package/dist/ui/pieces.js

@@ -0,0 +1,191 @@
+/**
+ * Talking to installed pieces for the page: each `loom-<piece>` on PATH is
+ * asked `ui --json` for its manifest, `ui page --json` for a page and
+ * `ui act --json` to run an action (docs/extensions.md, "The page"). A piece
+ * that answers shows up with no configuration; one that doesn't (no `ui`
+ * verb, a timeout, bad JSON) simply isn't there. Composes without requiring.
+ *
+ * Bounded on every axis: one manifest run per piece per cache window however
+ * many pages load at once (the in-flight promise is what's cached), a time
+ * limit and 512KB per answer, and on a timeout the piece's whole process group
+ * is killed (after every run, not just a timeout), and at most MAX_RUNNING
+ * pieces run at once. Requests travel on stdin, never argv, so an action's
+ * field values (a secret typed into a form) stay out of `ps`.
+ *
+ * A piece is trusted code running as the same user as the daemon. It gets the
+ * daemon's env minus loom's own bearer tokens, but that's hygiene, not a
+ * boundary: a same-user process can read the daemon's environment from /proc.
+ * Install only pieces you'd trust with the daemon itself.
+ */
+import { spawn } from 'node:child_process';
+import { listPieces } from '../cli/pieces.js';
+import { parseActResult, parseManifest, parsePage } from './vocab.js';
+export const PIECE_TIMEOUT_MS = 3_000;
+export const ACT_TIMEOUT_MS = 15_000;
+export const PIECE_MAX_BYTES = 512 * 1024;
+/** Longer than the page's 30s refresh, so an open tab doesn't re-run every piece each time. */
+export const CACHE_MS = 45_000;
+/** After the piece exits, how long to wait for its stdout to close (a background helper may hold it). */
+const DRAIN_MS = 200;
+/** Env loom never hands to a piece. */
+const WITHHELD = ['LOOM_BEARER_TOKEN', 'LOOM_KNOWLEDGE_BEARER_TOKENS'];
+const cache = new Map();
+export function clearPieceCache(path) {
+    if (path === undefined)
+        cache.clear();
+    else
+        cache.delete(path);
+}
+export function pieceEnv(env) {
+    const out = { ...env };
+    for (const k of WITHHELD)
+        delete out[k];
+    return out;
+}
+function killGroup(pid) {
+    if (pid === undefined)
+        return;
+    try {
+        process.kill(-pid, 'SIGKILL');
+    }
+    catch { /* already gone */ }
+}
+/**
+ * At most this many piece processes at once, across every page load: a burst
+ * of requests queues instead of forking a process each. The time limit starts
+ * when a piece actually runs.
+ */
+export const MAX_RUNNING = 6;
+let running = 0;
+const waiting = [];
+async function slot(f) {
+    if (running >= MAX_RUNNING)
+        await new Promise((r) => waiting.push(r));
+    running++;
+    try {
+        return await f();
+    }
+    finally {
+        running--;
+        waiting.shift()?.();
+    }
+}
+function ask(path, args, env, opts = {}) {
+    return slot(() => run(path, args, env, opts));
+}
+function run(path, args, env, opts) {
+    return new Promise((resolve) => {
+        // Its own process group, so a timeout takes the piece's children with it.
+        const child = spawn(path, args, {
+            env: pieceEnv(env),
+            stdio: [opts.stdin === undefined ? 'ignore' : 'pipe', 'pipe', 'ignore'],
+            detached: true,
+        });
+        let out = '';
+        let bytes = 0;
+        let settled = false;
+        let drain;
+        const finish = (r) => {
+            if (settled)
+                return;
+            settled = true;
+            clearTimeout(timer);
+            if (drain)
+                clearTimeout(drain);
+            child.stdout?.destroy();
+            // Every time, not only on a timeout: whatever the piece left running in
+            // its group goes with it. (A piece that calls setsid on purpose escapes.)
+            killGroup(child.pid);
+            resolve(r);
+        };
+        const timer = setTimeout(() => { killGroup(child.pid); finish({ ok: false, reason: 'timed out' }); }, opts.timeoutMs ?? PIECE_TIMEOUT_MS);
+        child.stdout?.on('data', (d) => {
+            bytes += d.length;
+            if (bytes > PIECE_MAX_BYTES) {
+                killGroup(child.pid);
+                finish({ ok: false, reason: 'answer too large' });
+                return;
+            }
+            out += d.toString('utf-8');
+        });
+        child.on('error', (e) => finish({ ok: false, reason: e.message }));
+        if (opts.stdin !== undefined && child.stdin) {
+            child.stdin.on('error', () => { });
+            child.stdin.end(opts.stdin);
+        }
+        // Resolve on the piece's own exit (plus a short drain), not on 'close':
+        // 'close' waits for every holder of the pipe, and a helper the piece left
+        // running would hold it open past the timeout.
+        child.on('exit', (code) => {
+            const done = () => finish(code === 0 ? { ok: true, stdout: out } : { ok: false, reason: 'no ui' });
+            if (child.stdout?.readableEnded)
+                return done();
+            child.stdout?.once('end', done);
+            drain = setTimeout(done, DRAIN_MS);
+        });
+    });
+}
+function json(stdout) {
+    try {
+        return JSON.parse(stdout);
+    }
+    catch {
+        return undefined;
+    }
+}
+async function fetchManifest(piece, path, env) {
+    const r = await ask(path, ['ui', '--json'], env);
+    if (!r.ok)
+        return { piece, reason: r.reason };
+    const parsed = json(r.stdout);
+    if (parsed === undefined)
+        return { piece, reason: 'invalid: not JSON' };
+    const m = parseManifest(parsed);
+    return typeof m === 'string' ? { piece, reason: `invalid: ${m}` } : { piece, path, manifest: m };
+}
+function manifestFor(piece, path, env, nowMs) {
+    const hit = cache.get(path);
+    if (hit && nowMs - hit.at < CACHE_MS)
+        return hit.result;
+    // Cache the promise itself: concurrent page loads share one run.
+    const result = fetchManifest(piece, path, env);
+    cache.set(path, { at: nowMs, result });
+    return result;
+}
+/** Every installed piece's manifest, plus the ones that had nothing to show and why. */
+export async function pieceManifests(env, nowMs = Date.now()) {
+    // "loom" is loom's own name on the page; a piece can't take it.
+    const installed = listPieces(env).filter((p) => p.name !== 'loom');
+    const results = await Promise.all(installed.map((p) => manifestFor(p.name, p.path, env, nowMs)));
+    const pieces = results.filter((r) => 'manifest' in r);
+    const empty = pieces.filter((p) => !p.manifest.tab && !p.manifest.tile && !p.manifest.asks.length && !p.manifest.legacy?.length);
+    return {
+        pieces: pieces.filter((p) => !empty.includes(p)),
+        skipped: [...results.filter((r) => 'reason' in r), ...empty.map((p) => ({ piece: p.piece, reason: 'nothing to show' }))],
+    };
+}
+/** One page from a piece, or why it couldn't be had. */
+export async function piecePage(info, path, query, env) {
+    // A first-version piece has one page: its sections.
+    if (info.manifest.legacy) {
+        return path === '' ? { title: info.piece, sections: info.manifest.legacy } : { title: 'Not found', sections: [] };
+    }
+    const r = await ask(info.path, ['ui', 'page', '--json'], env, { stdin: JSON.stringify({ path, query }) });
+    if (!r.ok)
+        return r.reason;
+    const parsed = json(r.stdout);
+    if (parsed === undefined)
+        return 'not JSON';
+    return parsePage(parsed);
+}
+/** Run an action on a piece. Field values go on stdin only. */
+export async function pieceAct(info, request, env) {
+    const r = await ask(info.path, ['ui', 'act', '--json'], env, { stdin: JSON.stringify(request), timeoutMs: ACT_TIMEOUT_MS });
+    // Whatever happened, the piece's state may have changed.
+    clearPieceCache(info.path);
+    if (!r.ok)
+        return { ok: false, message: `${info.piece} didn't answer (${r.reason}).` };
+    const parsed = json(r.stdout);
+    const result = parsed === undefined ? 'not JSON' : parseActResult(parsed);
+    return typeof result === 'string' ? { ok: false, message: `${info.piece} sent an answer loom couldn't read (${result}).` } : result;
+}

package/dist/ui/render.d.ts

@@ -1,16 +1,53 @@
 /**
  * Server-side HTML for loom's page. Every string that reaches the page goes
- * through esc(): pieces send data in the section vocabulary, never markup.
- * No client script; the page refreshes itself.
+ * through esc(): pieces send data in the page vocabulary, never markup. No
+ * client script anywhere; folding is <details>, filters are links, and every
+ * action is a plain form post carrying the anti-forgery token.
  */
-import type { Section } from './sections.js';
-import type { PieceSections, PieceSkip } from './piece-sections.js';
+import type { Ask, Page, Tile } from './vocab.js';
 export declare function esc(s: string): string;
-export declare function renderPage(opts: {
+/** Whose page this is: loom's own (`loom`) or a piece's. */
+export interface Source {
+    id: string;
+    base: string;
+}
+export declare const CORE: Source;
+export declare const pieceSource: (piece: string) => Source;
+export interface RenderContext {
+    source: Source;
+    /** This page's path within its source, and its query, for filters and for returning after an action. */
+    path: string;
+    query: Record<string, string>;
+    csrf: string;
+}
+/** Where a page link goes. Pieces' links stay inside their own base unless they say `loom:`. */
+export declare function pageHref(link: string, source: Source): string;
+export interface Chrome {
     agent: string;
-    core: Section[];
-    pieces: PieceSections[];
-    skipped: PieceSkip[];
-    generatedAt: string;
-}): string;
+    nav: Array<{
+        label: string;
+        href: string;
+        current: boolean;
+        piece: boolean;
+    }>;
+    clock: string;
+    csrf: string;
+    /** The one-time result of an action; `from` names the piece that sent it. */
+    flash?: {
+        ok: boolean;
+        message: string;
+        from?: string;
+    };
+    skipped: string[];
+}
+/** One page, loom's or a piece's. */
+export declare function renderPage(page: Page, ctx: RenderContext, chrome: Chrome): string;
+export interface HomeTile extends Tile {
+    source: Source;
+}
+export interface HomeAsk extends Ask {
+    source: Source;
+}
+/** Home: tiles across the top, the tape as the page, "Your call" leading the side column. */
+export declare function renderHome(page: Page, ctx: RenderContext, chrome: Chrome, tiles: HomeTile[], asks: HomeAsk[]): string;
 export declare function renderLogin(error?: string): string;

package/dist/ui/render.js

@@ -1,3 +1,4 @@
+import { splitPage } from './vocab.js';
 export function esc(s) {
     return s
         .replace(/&/g, '&')
@@ -6,65 +7,236 @@ export function esc(s) {
         .replace(/"/g, '"')
         .replace(/'/g, ''');
 }
-const toneClass = (t) => (t ? ` tone-${t}` : '');
-function renderBlock(b) {
+export const CORE = { id: 'loom', base: '/ui/' };
+export const pieceSource = (piece) => ({ id: piece, base: `/ui/p/${piece}/` });
+function qs(query) {
+    const p = new URLSearchParams();
+    for (const [k, v] of Object.entries(query))
+        if (v !== '')
+            p.set(k, v);
+    const s = p.toString();
+    return s ? `?${s}` : '';
+}
+/** Where a page link goes. Pieces' links stay inside their own base unless they say `loom:`. */
+export function pageHref(link, source) {
+    const s = splitPage(link);
+    if (!s)
+        return '#';
+    const base = s.core ? CORE.base : source.base;
+    const url = s.path === '' ? (base === CORE.base ? '/ui' : base.replace(/\/$/, '')) : base + s.path;
+    return url + qs(s.query);
+}
+const tone = (t) => (t ? ` tone-${t}` : '');
+function link(text, t, ctx, cls = '') {
+    const c = cls ? ` class="${cls}"` : '';
+    if (t.href)
+        return `<a${c} href="${esc(t.href)}" rel="noopener noreferrer" target="_blank">${text}</a>`;
+    if (t.page !== undefined)
+        return `<a${c} href="${esc(pageHref(t.page, ctx.source))}">${text}</a>`;
+    return text;
+}
+function hiddenInputs(fields) {
+    return Object.entries(fields).map(([k, v]) => `<input type="hidden" name="${esc(k)}" value="${esc(v)}">`).join('');
+}
+function actionForm(ctx, action, inner, cls) {
+    const back = ctx.path + qs(ctx.query);
+    return `<form class="${cls}" method="post" action="/ui/act/${esc(ctx.source.id)}">${hiddenInputs({ _csrf: ctx.csrf, _action: action, _path: back })}${inner}</form>`;
+}
+let fieldSeq = 0;
+function renderField(f) {
+    const id = `f${++fieldSeq}-${f.name}`;
+    const req = f.required ? ' required' : '';
+    const hint = f.hint ? `<span class="hint" id="${id}-h">${esc(f.hint)}</span>` : '';
+    const desc = f.hint ? ` aria-describedby="${id}-h"` : '';
+    switch (f.kind) {
+        case 'text':
+            return `<div class="field"><label for="${id}">${esc(f.label)}</label><input id="${id}" name="${esc(f.name)}" type="text" value="${esc(f.value ?? '')}" autocomplete="off" spellcheck="false"${req}${desc}>${hint}</div>`;
+        case 'secret':
+            // Never prefilled. Asks the browser and the common password managers
+            // not to offer to save it (or to fill it with loom's own token); no
+            // browser promises to honour that, which the contract says.
+            return `<div class="field"><label for="${id}">${esc(f.label)}</label><input id="${id}" name="${esc(f.name)}" type="password" autocomplete="off" data-1p-ignore data-lpignore="true" data-bwignore="true" data-form-type="other" spellcheck="false"${req}${desc}>${hint}</div>`;
+        case 'textarea':
+            return `<div class="field"><label for="${id}">${esc(f.label)}</label><textarea id="${id}" name="${esc(f.name)}" rows="4"${req}${desc}>${esc(f.value ?? '')}</textarea>${hint}</div>`;
+        case 'choice':
+            return `<fieldset class="field choice"><legend>${esc(f.label)}</legend>${(f.options ?? []).map((o, i) => `<label class="option"><input type="radio" name="${esc(f.name)}" value="${esc(o.value)}"${f.value === o.value ? ' checked' : ''}${req && i === 0 ? ' required' : ''}><span><strong>${esc(o.label)}</strong>${o.detail ? `<span class="hint">${esc(o.detail)}</span>` : ''}</span></label>`).join('')}${hint}</fieldset>`;
+    }
+}
+function cell(c, ctx) {
+    if (typeof c === 'string')
+        return esc(c);
+    return c.page !== undefined ? link(esc(c.text), { page: c.page }, ctx) : esc(c.text);
+}
+function renderBlock(b, ctx) {
     switch (b.type) {
         case 'stats':
-            return `<dl class="stats">${b.items
-                .map((i) => `<div class="stat${toneClass(i.tone)}"><dt>${esc(i.label)}</dt><dd>${esc(i.value)}</dd></div>`)
-                .join('')}</dl>`;
+            return `<dl class="stats">${b.items.map((i) => {
+                const inner = `<dt>${esc(i.label)}</dt><dd>${esc(i.value)}</dd>${i.detail ? `<dd class="detail">${esc(i.detail)}</dd>` : ''}`;
+                return i.page !== undefined
+                    ? `<div class="stat${tone(i.tone)}"><a class="stat-link" href="${esc(pageHref(i.page, ctx.source))}">${inner}</a></div>`
+                    : `<div class="stat${tone(i.tone)}">${inner}</div>`;
+            }).join('')}</dl>`;
         case 'list':
-            return `<ul class="list">${b.items
-                .map((i) => `<li class="${toneClass(i.tone).trim()}"><span class="text">${esc(i.text)}</span>${i.meta ? `<span class="meta">${esc(i.meta)}</span>` : ''}</li>`)
-                .join('')}</ul>`;
+            return `<ul class="list">${b.items.map((i) => {
+                const text = `<span class="text">${esc(i.text)}</span>`;
+                return `<li class="${tone(i.tone).trim()}"><div class="row">${link(text, i, ctx, 'row-link')}${i.badge ? `<span class="badge">${esc(i.badge)}</span>` : ''}</div>${i.meta ? `<span class="meta">${esc(i.meta)}</span>` : ''}</li>`;
+            }).join('')}</ul>`;
         case 'table':
-            return `<div class="table-wrap"><table><thead><tr>${b.columns.map((c) => `<th>${esc(c)}</th>`).join('')}</tr></thead><tbody>${b.rows
-                .map((r) => `<tr>${r.map((c) => `<td>${esc(c)}</td>`).join('')}</tr>`)
-                .join('')}</tbody></table></div>`;
+            return `<div class="table-wrap"><table><thead><tr>${b.columns.map((c) => `<th scope="col">${esc(c)}</th>`).join('')}</tr></thead><tbody>${b.rows.map((r) => `<tr>${r.map((c) => `<td>${cell(c, ctx)}</td>`).join('')}</tr>`).join('')}</tbody></table></div>`;
+        case 'kv':
+            return `<dl class="kv">${b.items.map((i) => `<div><dt>${esc(i.label)}</dt><dd>${i.page !== undefined ? link(esc(i.value), { page: i.page }, ctx) : esc(i.value)}</dd></div>`).join('')}</dl>`;
         case 'text':
-            return `<p class="text-block">${esc(b.text)}</p>`;
+            return `<p class="text-block${tone(b.tone)}">${esc(b.text)}</p>`;
+        case 'callout':
+            return `<div class="callout${tone(b.tone)}">${b.title ? `<strong>${esc(b.title)}</strong>` : ''}<p>${esc(b.text)}</p></div>`;
         case 'link':
-            return `<p><a href="${esc(b.href)}" rel="noopener noreferrer">${esc(b.text)}</a></p>`;
+            return `<p class="link-block">${link(esc(b.text), b, ctx)}</p>`;
+        case 'filters': {
+            const current = ctx.query[b.param] ?? '';
+            return `<nav class="filters" aria-label="Filter">${b.options.map((o) => {
+                const href = ctx.source.base === CORE.base && ctx.path === '' ? '/ui' : pageHref(ctx.path, ctx.source);
+                const target = href + qs({ ...ctx.query, [b.param]: o.value });
+                const on = o.value === current;
+                return `<a class="pill${on ? ' on' : ''}" href="${esc(target)}"${on ? ' aria-current="true"' : ''}>${esc(o.label)}</a>`;
+            }).join('')}</nav>`;
+        }
+        case 'details':
+            return `<details class="details"><summary><span class="text">${esc(b.summary)}</span>${b.meta ? `<span class="meta">${esc(b.meta)}</span>` : ''}</summary><div class="details-body">${b.blocks.map((x) => renderBlock(x, ctx)).join('')}</div></details>`;
+        case 'form':
+            return actionForm(ctx, b.action, `${b.title ? `<h3>${esc(b.title)}</h3>` : ''}${hiddenInputs(b.hidden ?? {})}${b.fields.map(renderField).join('')}${b.note ? `<p class="note">${esc(b.note)}</p>` : ''}<div class="actions"><button class="btn primary" type="submit">${esc(b.submit)}</button></div>`, 'piece-form');
+        case 'buttons':
+            return `<div class="buttons">${b.items.map((i) => actionForm(ctx, i.action, `${hiddenInputs(i.fields ?? {})}<button class="btn${i.tone ? ` ${i.tone}` : ''}" type="submit">${esc(i.label)}</button>`, 'button-form')).join('')}</div>`;
     }
 }
-// Ids are namespaced (g- groups, s-<source>--<id> sections) so no piece's
-// anchors can land on another's or on loom's.
-function renderSection(s, source) {
-    return `<section class="card" id="s-${esc(source)}--${esc(s.id)}"><h2>${esc(s.title)}</h2>${s.blocks.map(renderBlock).join('')}</section>`;
+// Ids are namespaced (s-<source>--<id>) so no piece's anchors can land on another's or on loom's.
+function renderSection(s, ctx, headingLevel = 2) {
+    const h = s.title ? `<h${headingLevel}>${esc(s.title)}</h${headingLevel}>` : '';
+    return `<section class="card${tone(s.tone)}" id="s-${esc(ctx.source.id)}--${esc(s.id)}">${h}${s.blocks.map((b) => renderBlock(b, ctx)).join('')}</section>`;
+}
+function columns(main, side) {
+    return side ? `<div class="cols"><div class="main-col">${main}</div><aside class="side-col">${side}</aside></div>` : `<div class="main-col solo">${main}</div>`;
 }
 const STYLE = `
-:root{--bg:#f7f7f5;--card:#fff;--fg:#1d1d1b;--muted:#6b6b66;--line:#e4e4df;--accent:#3b5bdb;--ok:#2b8a3e;--warn:#b26a00;--bad:#c92a2a;color-scheme:light}
-@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#141413;--card:#1e1e1c;--fg:#ececea;--muted:#9a9a94;--line:#2e2e2b;--accent:#8ca2ff;--ok:#69db7c;--warn:#ffc078;--bad:#ff8787;color-scheme:dark}}
-*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
-header{padding:14px 16px 0;max-width:1100px;margin:0 auto}header h1{margin:0;font-size:18px;font-weight:600}header .sub{color:var(--muted);font-size:13px}
-nav{display:flex;gap:4px;overflow-x:auto;padding:10px 16px;max-width:1100px;margin:0 auto;border-bottom:1px solid var(--line)}
-nav a{color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:8px;white-space:nowrap;font-size:14px}nav a:hover{background:var(--card);color:var(--fg)}
-main{max-width:1100px;margin:0 auto;padding:16px}.group{margin-bottom:24px}.group>h2.source{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 8px}
-.grid{display:grid;gap:12px;align-items:start;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
-.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;min-width:0}.card h2{margin:0 0 10px;font-size:15px}
-.stats{display:flex;flex-wrap:wrap;gap:16px;margin:0}.stat dt{color:var(--muted);font-size:12px}.stat dd{margin:0;font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
-.list{list-style:none;margin:0;padding:0}.list li{padding:6px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px}.list li:first-child{border-top:0}
-.list .meta{color:var(--muted);font-size:12px}.text-block{margin:0;color:var(--muted)}
-.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:13px}th,td{text-align:left;padding:5px 6px;border-top:1px solid var(--line)}th{color:var(--muted);font-weight:500;border-top:0}
-.tone-ok dd,.tone-ok .text{color:var(--ok)}.tone-warn dd,.tone-warn .text{color:var(--warn)}.tone-bad dd,.tone-bad .text{color:var(--bad)}.tone-muted dd,.tone-muted .text{color:var(--muted)}
-a{color:var(--accent)}footer{max-width:1100px;margin:0 auto;padding:0 16px 24px;color:var(--muted);font-size:12px}
-form.login{max-width:360px;margin:48px auto;padding:16px}form.login input{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg);font:inherit}
-form.inline{display:inline}form.inline button{background:none;border:0;padding:0;color:var(--accent);font:inherit;cursor:pointer;text-decoration:underline}
-form.login button{margin-top:10px;padding:9px 14px;border:0;border-radius:8px;background:var(--accent);color:#fff;font:inherit}.err{color:var(--bad)}
+:root{--bg:#f4f5f7;--card:#fff;--fg:#15171c;--muted:#596171;--line:#e1e4ea;--soft:#eef0f3;--accent:#3442c2;--accent-fg:#fff;--ok:#1d6b45;--ok-bg:#e7f4ec;--warn:#8a4b0a;--warn-line:#e9c98f;--warn-bg:#fffbf3;--bad:#b42318;--bad-line:#f1c4bf;--bad-bg:#fff7f6;--pill:#15171c;--pill-fg:#fff;color-scheme:light}
+@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#121317;--card:#1b1d23;--fg:#e9ebf0;--muted:#a0a7b4;--line:#2c3039;--soft:#23262e;--accent:#9aa6ff;--accent-fg:#121317;--ok:#6fd39b;--ok-bg:#16291f;--warn:#f0b35c;--warn-line:#5a4520;--warn-bg:#231d12;--bad:#ff8f84;--bad-line:#5c2a25;--bad-bg:#2a1714;--pill:#e9ebf0;--pill-fg:#121317;color-scheme:dark}}
+*{box-sizing:border-box}
+body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
+.mono,.meta,.badge,.eyebrow,.kv dt,.stat dt,code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
+a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
+header.top{background:var(--card);border-bottom:1px solid var(--line)}
+.top-in{max-width:1200px;margin:0 auto;padding:0 16px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px}
+.brand{display:flex;align-items:center;gap:8px;color:var(--fg);padding:12px 0;font-weight:600}.brand:hover{text-decoration:none}.brand .who{color:var(--muted);font-weight:400}
+nav.tabs{display:flex;flex-wrap:wrap;gap:0 18px;flex:1 1 auto;align-items:center}
+nav.tabs a{color:var(--muted);padding:12px 2px;border-bottom:2px solid transparent;font-size:14px}nav.tabs a:hover{color:var(--fg);text-decoration:none}
+nav.tabs a[aria-current]{color:var(--fg);border-bottom-color:var(--accent);font-weight:500}
+nav.tabs .sep{width:1px;height:18px;background:var(--line)}
+.top-right{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted)}
+main{max-width:1200px;margin:0 auto;padding:24px 16px 48px;display:flex;flex-direction:column;gap:18px}
+h1{margin:0;font-size:26px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
+.intro{margin:4px 0 0;color:var(--muted);max-width:720px}
+.flash{padding:12px 16px;border-radius:10px;border:1px solid var(--line);background:var(--card)}.flash.ok{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}.flash.bad{border-color:var(--bad-line);background:var(--bad-bg);color:var(--bad)}
+.cols{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}.main-col{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:16px}.side-col{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:16px}
+.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
+.tile{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;color:var(--fg);display:flex;flex-direction:column;gap:2px}a.tile:hover{text-decoration:none;border-color:var(--muted)}
+.tile .eyebrow{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.tile .value{font-size:20px;font-weight:600}.tile .detail{font-size:13px;color:var(--muted)}
+.tile.tone-ok .detail{color:var(--ok)}.tile.tone-warn .detail{color:var(--warn)}.tile.tone-bad .detail{color:var(--bad)}
+.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px;min-width:0}
+.card h2{margin:0 0 8px;font-size:16px;font-weight:600}.card h3{margin:0 0 8px;font-size:15px}
+.card.tone-warn{border-color:var(--warn-line);background:var(--warn-bg)}.card.tone-bad{border-color:var(--bad-line);background:var(--bad-bg)}.card.tone-ok{border-color:var(--ok);background:var(--ok-bg)}
+.card>*+*{margin-top:10px}
+.stats{display:flex;flex-wrap:wrap;gap:12px 28px;margin:0}.stat dt{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em}.stat dd{margin:0;font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}.stat dd.detail,.stat.tone-ok dd.detail,.stat.tone-warn dd.detail,.stat.tone-bad dd.detail{font-size:13px;font-weight:400;color:var(--muted)}
+.stat-link{color:inherit;display:block}.stat-link:hover{text-decoration:none}.stat-link:hover dd:first-of-type{color:var(--accent)}
+.stat.tone-ok>dd,.stat.tone-ok a>dd,.list li.tone-ok .text{color:var(--ok)}.stat.tone-warn>dd,.stat.tone-warn a>dd,.list li.tone-warn .text{color:var(--warn)}.stat.tone-bad>dd,.stat.tone-bad a>dd,.list li.tone-bad .text{color:var(--bad)}.stat.tone-muted>dd,.stat.tone-muted a>dd,.list li.tone-muted .text{color:var(--muted)}
+.ask .text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
+.list{list-style:none;margin:0;padding:0}.list li{padding:9px 0;border-top:1px solid var(--soft);display:flex;flex-direction:column;gap:2px}.list li:first-child{border-top:0}
+.list .row{display:flex;align-items:baseline;gap:10px}.list .row-link{color:inherit;flex:1;min-width:0}.list .row-link:hover{color:var(--accent);text-decoration:none}
+.list .text{overflow-wrap:anywhere}.meta{color:var(--muted);font-size:12px}
+.badge{font-size:11px;color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:4px;padding:1px 6px;white-space:nowrap}
+.text-block{margin:0;white-space:pre-line;overflow-wrap:anywhere}.text-block.tone-muted{color:var(--muted);font-size:13px}.text-block.tone-warn{color:var(--warn)}.text-block.tone-bad{color:var(--bad)}.text-block.tone-ok{color:var(--ok)}
+.callout{padding:12px 14px;border-radius:8px;background:var(--soft)}.callout p{margin:2px 0 0}.callout.tone-warn{background:var(--warn-bg);border:1px solid var(--warn-line)}.callout.tone-bad{background:var(--bad-bg);border:1px solid var(--bad-line);color:var(--bad)}.callout.tone-ok{background:var(--ok-bg);color:var(--ok)}
+.link-block{margin:0;font-size:14px}
+.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px 18px;margin:0}.kv dt{color:var(--muted);font-size:12px}.kv dd{margin:2px 0 0;overflow-wrap:anywhere;font-size:14px}
+.side-col .kv{grid-template-columns:1fr 1fr}
+.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:14px}th,td{text-align:left;padding:8px 10px 8px 0;border-top:1px solid var(--soft);vertical-align:top}th{color:var(--muted);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.05em;border-top:0}
+.filters{display:flex;flex-wrap:wrap;gap:8px}.pill{font-size:13px;min-height:32px;display:inline-flex;align-items:center;padding:0 12px;border-radius:16px;border:1px solid var(--line);background:var(--card);color:var(--fg)}.pill:hover{text-decoration:none;border-color:var(--muted)}.pill.on{background:var(--pill);border-color:var(--pill);color:var(--pill-fg)}
+details.details{border-top:1px solid var(--soft)}details.details:first-of-type{border-top:0}
+details.details>summary{cursor:pointer;padding:10px 0;display:flex;flex-direction:column;gap:2px;list-style:none}details.details>summary::-webkit-details-marker{display:none}
+details.details>summary .text::before{content:"▸ ";color:var(--muted)}details.details[open]>summary .text::before{content:"▾ "}
+.details-body{margin:0 0 12px 14px;padding:12px 14px;border-radius:8px;background:var(--soft);display:flex;flex-direction:column;gap:10px}
+.btn{font:inherit;font-size:14px;font-weight:500;min-height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer}.btn:hover{border-color:var(--muted)}
+.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}.btn.danger{color:var(--bad)}
+.buttons{display:flex;flex-wrap:wrap;gap:8px}.button-form{margin:0}
+.piece-form{display:flex;flex-direction:column;gap:14px;margin:0}.field{display:flex;flex-direction:column;gap:5px;border:0;padding:0;margin:0}.field label,.field legend{font-size:14px;font-weight:500}
+.field input[type=text],.field input[type=password],.field textarea{font:inherit;font-size:15px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg);width:100%}
+.field input:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
+.hint{font-size:12px;color:var(--muted)}.note{margin:0;font-size:13px;color:var(--muted)}.actions{display:flex;gap:10px}
+.choice .option{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);margin-top:6px;cursor:pointer}.choice .option span{display:flex;flex-direction:column;gap:2px}
+footer{max-width:1200px;margin:0 auto;padding:0 16px 32px;color:var(--muted);font-size:12px;display:flex;flex-wrap:wrap;gap:6px 14px}
+form.inline{display:inline;margin:0}form.inline button{background:none;border:1px solid var(--line);border-radius:6px;padding:4px 10px;color:var(--fg);font:inherit;font-size:13px;cursor:pointer}
+form.login{max-width:380px;margin:64px auto;padding:20px;display:flex;flex-direction:column;gap:10px}form.login input{width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg);font:inherit}
+form.login button{min-height:44px;border:0;border-radius:8px;background:var(--accent);color:var(--accent-fg);font:inherit;font-weight:500}.err{color:var(--bad)}.sub{color:var(--muted);margin:0}
 `;
-function shell(title, body, refresh) {
-    return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">${refresh ? '<meta http-equiv="refresh" content="30">' : ''}<title>${esc(title)}</title><style>${STYLE}</style></head><body>${body}</body></html>`;
-}
-export function renderPage(opts) {
-    const groups = [{ source: 'loom', sections: opts.core }, ...opts.pieces.map((p) => ({ source: p.piece, sections: p.sections }))];
-    const nav = groups.map((g) => `<a href="#g-${esc(g.source)}">${esc(g.source)}</a>`).join('');
-    const main = groups
-        .map((g) => `<div class="group" id="g-${esc(g.source)}"><h2 class="source">${esc(g.source)}</h2><div class="grid">${g.sections.map((s) => renderSection(s, g.source)).join('')}</div></div>`)
-        .join('');
-    const quiet = opts.skipped.length ? ` · pieces with no page: ${opts.skipped.map((s) => esc(s.piece)).join(', ')}` : '';
-    return shell(`${opts.agent} · loom`, `<header><h1>${esc(opts.agent)}</h1><div class="sub">loom</div></header><nav>${nav}</nav><main>${main}</main>` +
-        `<footer>Updated ${esc(opts.generatedAt)} · refreshes every 30s${quiet} · <form class="inline" method="post" action="/ui/logout"><button type="submit">log out</button></form></footer>`, true);
+function document(title, body, refresh) {
+    return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">${refresh ? '<meta http-equiv="refresh" content="60">' : ''}<title>${esc(title)}</title><style>${STYLE}</style></head><body>${body}</body></html>`;
+}
+function chromeTop(c) {
+    const core = c.nav.filter((n) => !n.piece);
+    const pieces = c.nav.filter((n) => n.piece);
+    const tab = (n) => `<a href="${esc(n.href)}"${n.current ? ' aria-current="page"' : ''}>${esc(n.label)}</a>`;
+    return `<header class="top"><div class="top-in"><a class="brand" href="/ui"><svg width="20" height="20" viewBox="0 0 22 22" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M3 5h16M3 11h16M3 17h16"></path><path d="M7 2v18M15 2v18" opacity=".55"></path></svg>loom <span class="who">· ${esc(c.agent)}</span></a>` +
+        `<nav class="tabs" aria-label="Sections">${core.map(tab).join('')}${pieces.length ? `<span class="sep" aria-hidden="true"></span>${pieces.map(tab).join('')}` : ''}</nav>` +
+        `<div class="top-right"><span class="mono">${esc(c.clock)}</span><form class="inline" method="post" action="/ui/logout"><input type="hidden" name="_csrf" value="${esc(c.csrf)}"><button type="submit">Sign out</button></form></div></div></header>`;
+}
+function chromeFoot(c, refresh) {
+    return `<footer>${refresh ? '<span>Refreshes every minute.</span>' : ''}${c.skipped.length ? `<span>Pieces with no page: ${c.skipped.map(esc).join(', ')}</span>` : ''}</footer>`;
+}
+function flash(c) {
+    if (!c.flash)
+        return '';
+    const from = c.flash.from ? `<strong>${esc(c.flash.from)}</strong> · ` : '';
+    return `<div class="flash ${c.flash.ok ? 'ok' : 'bad'}" role="status">${from}${esc(c.flash.message)}</div>`;
+}
+/** One page, loom's or a piece's. */
+export function renderPage(page, ctx, chrome) {
+    const main = page.sections.filter((s) => !s.side).map((s) => renderSection(s, ctx)).join('');
+    const side = page.sections.filter((s) => s.side).map((s) => renderSection(s, ctx)).join('');
+    const empty = page.sections.length ? '' : '<p class="intro">There\'s nothing here.</p>';
+    // Pages with forms don't auto-refresh: a refresh would throw away what's being typed.
+    const hasForm = page.sections.some((s) => s.blocks.some((b) => b.type === 'form' || (b.type === 'details' && b.blocks.some((x) => x.type === 'form'))));
+    const body = `${chromeTop(chrome)}<main>${flash(chrome)}<div><h1>${esc(page.title)}</h1>${page.intro ? `<p class="intro">${esc(page.intro)}</p>` : ''}</div>${empty}${columns(main, side)}</main>${chromeFoot(chrome, !hasForm)}`;
+    return document(`${page.title} · ${chrome.agent}`, body, !hasForm);
+}
+/** "Your call" shows this many a piece on Home; the rest are a link away. */
+const ASKS_SHOWN = 5;
+/** Home: tiles across the top, the tape as the page, "Your call" leading the side column. */
+export function renderHome(page, ctx, chrome, tiles, asks) {
+    const tileHtml = tiles.length
+        ? `<section class="tiles" aria-label="Status">${tiles.map((t) => {
+            const inner = `<span class="eyebrow">${esc(t.label)}</span><span class="value">${esc(t.value)}</span>${t.detail ? `<span class="detail">${esc(t.detail)}</span>` : ''}`;
+            return t.page !== undefined
+                ? `<a class="tile${tone(t.tone)}" href="${esc(pageHref(t.page, t.source))}">${inner}</a>`
+                : `<div class="tile${tone(t.tone)}">${inner}</div>`;
+        }).join('')}</section>`
+        : '';
+    const bySource = new Map();
+    for (const a of asks)
+        bySource.set(a.source.id, [...(bySource.get(a.source.id) ?? []), a]);
+    const askItems = [...bySource.values()].flatMap((list) => {
+        const shown = list.slice(0, ASKS_SHOWN).map((a) => {
+            const go = a.page !== undefined ? `<a href="${esc(pageHref(a.page, a.source))}">${esc(a.label ?? 'Open')}</a>` : '';
+            return `<li class="ask"><span class="text">${esc(a.text)}</span><div class="row"><span class="meta" style="flex:1">${esc(a.meta ?? a.source.id)}</span>${go}</div></li>`;
+        });
+        const rest = list.length - ASKS_SHOWN;
+        if (rest > 0)
+            shown.push(`<li><a href="${esc(pageHref('', list[0].source))}">${rest} more from ${esc(list[0].source.id)}</a></li>`);
+        return shown;
+    });
+    const yours = askItems.length ? `<section class="card tone-warn" id="your-call"><h2>Your call</h2><ul class="list">${askItems.join('')}</ul></section>` : '';
+    const main = page.sections.filter((s) => !s.side).map((s) => renderSection(s, ctx)).join('');
+    const side = yours + page.sections.filter((s) => s.side).map((s) => renderSection(s, ctx)).join('');
+    const body = `${chromeTop(chrome)}<main>${flash(chrome)}${tileHtml}${columns(main, side)}</main>${chromeFoot(chrome, true)}`;
+    return document(chrome.agent, body, true);
 }
 export function renderLogin(error) {
-    return shell('loom', `<form class="login" method="post" action="/ui/login"><h1>loom</h1><p class="sub">Paste the bearer token once. This browser keeps a cookie (until the daemon restarts, or 30 days).</p>${error ? `<p class="err">${esc(error)}</p>` : ''}<input type="password" name="token" autocomplete="current-password" autofocus aria-label="token"><button type="submit">Open</button></form>`, false);
+    return document('loom', `<form class="login" method="post" action="/ui/login"><h1>loom</h1><p class="sub">Paste the bearer token once. This browser keeps a cookie (until the daemon restarts, or 30 days).</p>${error ? `<p class="err">${esc(error)}</p>` : ''}<input type="password" name="token" autocomplete="current-password" autofocus aria-label="token"><button type="submit">Open</button></form>`, false);
 }