@lovek4d/kickflip 0.0.0-stage → 0.1.0

package/board/public/hub.css

@@ -0,0 +1,164 @@
+/* The hub page and settings modals (view-hub.js, view-hub-settings.js, view-polling.js), whose root carries .hub-view, and the hub's
+   down page (hub/hub.mjs), whose <html> does; served as /_hub/app/hub.css and /_hub/hub.css. Every rule is under
+   .hub-view, since style.css uses the same short class names. The app shell links it after style.css, so a rule here
+   wins a tie, and the header is style.css's alone, as on every view; each style.css rule that would reach these rows
+   is set back here. */
+.hub-view { --mono: ui-monospace,"SF Mono",Menlo,monospace; --sans: -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif; }
+@media (prefers-color-scheme: dark) { .hub-view { color-scheme: dark; } }
+.hub-view, .hub-view * { box-sizing: border-box; }
+.hub-view [hidden] { display:none !important; }
+.hub-view { -webkit-text-size-adjust:100%; }
+/* clip, not hidden: hidden makes body a scroll container and breaks the sticky header. iOS zooms on a focused field under 16px. */
+.hub-view body { margin:0; background:var(--bg); color:var(--text); font:14px/1.45 var(--sans); overflow-x:clip; }
+.hub-view main { max-width: 40rem; margin: 0 auto; padding: max(1.25rem, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 2.5rem max(16px, env(safe-area-inset-left)); }
+.hub-view main.has-top { padding-top: 12px; }
+.hub-view a, .hub-view a:hover { color:var(--accent); text-decoration:none; }
+.hub-view main > .back { display:inline-block; font-size:1rem; margin-bottom:.2rem; }
+.hub-view main h1 { font-size:1.6rem; line-height:1.2; margin:.5rem 0 .3rem; overflow-wrap:anywhere; }
+.hub-view .lede { color:var(--muted); margin:0; }
+.hub-view .label { margin:16px 2px 6px; font-size:12px; font-weight:400; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
+.hub-view .group { background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
+.hub-view .row { display:flex; align-items:center; justify-content:normal; gap:10px; margin:0; padding:10px 12px; color:var(--text); min-height:3.25rem; }
+.hub-view a.row:active { background:var(--chip); }
+@media (hover: hover) { .hub-view a.row:hover { background:color-mix(in srgb, var(--chip) 60%, transparent); } }
+.hub-view .group > .row:not([hidden]) ~ .row { border-top:1px solid var(--line); }
+.hub-view .body { flex:1; min-width:0; display:flex; align-items:center; gap:10px; }
+.hub-view .text { flex:1; min-width:0; }
+.hub-view .title { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; overflow-wrap:normal; }
+.hub-view .sub { display:block; color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; overflow-wrap:normal; }
+.hub-view .sub.wrap { white-space:normal; }
+.hub-view .st { font-weight:600; } .hub-view .st.down { color:var(--color-danger); } .hub-view .st.wait { color:var(--color-notice); }
+@keyframes pulse { 50% { opacity:.35; } }
+.hub-view main .icon { flex:none; width:34px; height:34px; border-radius:9px; display:grid; place-items:center; color:var(--c); background:color-mix(in srgb, var(--c) 18%, transparent); font-weight:700; font-size:16px; line-height:1; }
+.hub-view main .icon.sm { width:29px; height:29px; border-radius:7px; }
+.hub-view main .icon.solid { color:#fff; background:var(--c); }
+@media (prefers-color-scheme: dark) { .hub-view main .icon:not(.solid) { color:color-mix(in srgb, var(--c) 70%, #fff); } }
+.hub-view main .icon svg { display:block; }
+.hub-view .badge { flex:none; min-width:22px; height:22px; padding:0 7px; border-radius:11px; background:var(--color-danger); color:#fff; font-size:12px; font-weight:600; line-height:22px; text-align:center; font-variant-numeric:tabular-nums; }
+.hub-view .chev { flex:none; color:var(--muted); font-size:1.3rem; line-height:1; }
+.hub-view .val { flex:none; color:var(--muted); font-size:13px; }
+.hub-view .btn { flex:none; font:inherit; font-size:13px; color:#fff; background:var(--accent); border:1px solid var(--accent); border-radius:7px; padding:6px 10px; cursor:pointer; }
+.hub-view .btn.quiet { color:var(--text); background:var(--panel); border-color:var(--line); }
+.hub-view .btn:disabled { opacity:.5; cursor:default; }
+.hub-view .btn.danger { color:var(--color-danger); }
+.hub-view .block { padding:10px 12px; }
+.hub-view .group > :is(.row, .block) ~ .block, .hub-view .group > .block ~ .row { border-top:1px solid var(--line); }
+.hub-view .chips form { display:contents; }
+.hub-view .chips form.field { display:inline-flex; gap:6px; }
+.hub-view .chips .field input { min-height:0; padding:.2rem .5rem; width:7.5rem; }
+.hub-view .split { display:flex; gap:8px; justify-content:flex-end; }
+.hub-view .day { position:relative; padding:18px 0 20px; }
+.hub-view .day .bar { position:relative; height:40px; border-radius:8px; overflow:hidden; background:var(--chip); }
+.hub-view .day .seg { position:absolute; top:0; bottom:0; display:grid; place-items:center; overflow:hidden; border-right:2px solid var(--panel);
+  background:color-mix(in srgb, var(--accent) var(--k), var(--chip)); }
+.hub-view .day .seg.held { background-image:repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--text) 22%, transparent) 5px 8px); }
+.hub-view .day .seg.sel { box-shadow:inset 0 0 0 3px var(--text); z-index:2; }
+.hub-view .day .seg span { font-size:11px; font-weight:600; line-height:1.5; color:var(--text); background:color-mix(in srgb, var(--panel) 85%, transparent); border-radius:4px; padding:0 4px; }
+.hub-view .day .pin { position:absolute; top:2px; transform:translateX(-50%); color:var(--color-notice); font-size:11px; line-height:1; }
+.hub-view .day .now { position:absolute; top:14px; height:48px; width:2px; margin-left:-1px; background:var(--color-danger); z-index:3; pointer-events:none; }
+.hub-view .day .ticks { position:absolute; left:0; right:0; bottom:0; height:16px; font-size:10px; color:var(--muted); }
+.hub-view .day .ticks span { position:absolute; transform:translateX(-50%); }
+.hub-view .day .ticks span:first-child { transform:none; } .hub-view .day .ticks span:last-child { transform:translateX(-100%); }
+.hub-view .legend { display:flex; gap:4px 12px; flex-wrap:wrap; font-size:11px; color:var(--muted); }
+.hub-view .legend i { display:inline-block; width:10px; height:10px; border-radius:2px; vertical-align:-1px; margin-right:4px; }
+.hub-view #day, .hub-view #window, .hub-view #quiet, .hub-view #wakes { scroll-margin-top:64px; }
+.hub-view .field input { flex:none; font:inherit; font-size:16px; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:.3rem .6rem; min-height:2.2rem; width:8.75rem; min-width:0; text-align:right; }
+.hub-view .field input[type=number] { width:5rem; }
+.hub-view .field input.toggle { width:1.4rem; height:1.4rem; min-height:0; padding:0; accent-color:var(--accent); }
+.hub-view .field input:focus { outline:2px solid var(--accent-soft); border-color:var(--accent); }
+.hub-view .note { margin:6px 2px 0; color:var(--muted); font-size:12px; }
+.hub-view .segments { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:3px; padding:3px; border:1px solid var(--line); border-radius:9px; background:var(--chip); }
+.hub-view .segments button { min-width:0; min-height:44px; padding:6px; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--muted); font:inherit; cursor:pointer; }
+.hub-view .segments button[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); font-weight:600; }
+.hub-view .segments button:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
+.hub-view .chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
+.hub-view .actions { margin-top:1.2rem; display:flex; justify-content:flex-end; }
+.hub-view .flash { animation:none; margin-top:1rem; padding:10px 12px; border-radius:10px; background:var(--panel); border:1px solid var(--line); color:var(--color-success); }
+.hub-view .flash.error { color:var(--color-danger); }
+.hub-view .hold-banner { display:flex; align-items:center; gap:10px; margin:4px 0 14px; padding:8px 8px 8px 12px; min-height:46px; border-radius:10px; border:1px solid color-mix(in srgb, var(--color-notice) 45%, transparent); background:color-mix(in srgb, var(--color-notice) 11%, var(--panel)); font-size:13.5px; line-height:1.35; }
+.hub-view .hold-banner > svg { flex:none; color:var(--color-notice); }
+.hub-view .hold-banner > span { flex:1; min-width:0; }
+.hub-view .hold-banner form { flex:none; margin:0; }
+.hub-view .hold-banner .btn { min-height:32px; }
+.hub-view .snooze-head { display:flex; align-items:center; gap:10px; }
+.hub-view .snooze-chips { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; margin-top:10px; }
+.hub-view .snooze-choices { display:contents; }
+.hub-view .snooze-chips .btn { display:block; min-height:40px; padding:6px 4px; text-align:center; white-space:nowrap; }
+.hub-view .snooze-custom { position:relative; margin:0; }
+.hub-view .snooze-custom .btn { display:grid; place-items:center; height:100%; }
+.hub-view .snooze-custom input[type=datetime-local] { position:absolute; inset:0; width:100%; height:100%; min-height:0; padding:0; margin:0; border:0; background:transparent; color:transparent; opacity:.011; font-size:16px; cursor:pointer; }
+.hub-view .snooze-custom input::-webkit-calendar-picker-indicator { position:absolute; inset:0; width:auto; height:auto; opacity:0; cursor:pointer; }
+.hub-view .snooze-custom:focus-within { outline:2px solid var(--accent); outline-offset:2px; border-radius:7px; }
+.hub-view .snooze-on .title { font-weight:600; white-space:normal; }
+.hub-view code { font-family:var(--mono); font-size:.85em; white-space:nowrap; }
+.hub-view footer { color:var(--muted); font-size:12px; margin:1.8rem 2px 0; }
+.hub-view .host { font-family:var(--mono); font-size:11px; overflow-wrap:anywhere; }
+.hub-view .st.ok { color:var(--color-success); }
+.hub-view .links { display:block; margin-top:2px; }
+.hub-view .links > span { display:block; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
+.hub-view .links b { font-weight:600; }
+.hub-view .remembered { padding:0 12px 10px; color:var(--muted); font-size:12px; }
+.hub-view .remembered p { margin:0; }
+.hub-view .remembered ul { margin:4px 0 0; padding-left:18px; }
+.hub-view .remembered code { white-space:pre-wrap; overflow-wrap:anywhere; }
+
+@media (max-width: 899px) {
+  .hub-view main.has-top { padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: calc(40px + var(--app-bottom, 0px) + env(safe-area-inset-bottom)); }
+}
+
+.hub-view .hub-settings { margin-top: 24px; }
+.hub-view .hub-setting { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; font: inherit; text-align: left; color: var(--text); cursor: pointer; border: 1px solid var(--line); border-radius: 12px; margin: 10px 0; background: var(--panel); }
+.hub-view .hub-setting .text { flex: 1; min-width: 0; }
+.hub-view .hub-setting .title { font-weight: 600; }
+.hub-view .hub-setting .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.hub-view .hub-modal .settings-body { padding-top: 2px; }
+.hub-view .hub-modal .setting-content > .label:first-child { margin-top: 14px; }
+.hub-view .hub-modal .setting-content > .group:first-child { margin-top: 16px; }
+.hub-view .hub-modal .rules-box { margin-top: 14px; }
+
+.hub-view .u-tone-ok { --u: var(--accent); }
+.hub-view .u-tone-high { --u: var(--color-notice); }
+.hub-view .u-tone-full { --u: var(--color-danger); }
+.hub-view .u-tone-stale, .hub-view .u-tone-none { --u: var(--muted); }
+.hub-view .u-bar { display: block; height: 4px; border-radius: 2px; background: var(--chip); overflow: hidden; }
+.hub-view .u-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--u); }
+.hub-view .u-tone-stale .u-bar, .hub-view .u-tone-none .u-bar { background: repeating-linear-gradient(135deg, var(--chip) 0 4px, color-mix(in srgb, var(--muted) 22%, var(--chip)) 4px 6px); }
+.hub-view .u-num { color: var(--u); font-weight: 600; font-variant-numeric: tabular-nums; }
+.hub-view .u-tone-ok .u-num { color: inherit; font-weight: 400; }
+
+.hub-view .u-block .u-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
+.hub-view .u-block .u-head .title { font-weight: 600; }
+.hub-view .u-win { display: flex; justify-content: space-between; gap: 8px; margin: 8px 0 5px; font-size: 13px; }
+.hub-view .u-win > :last-child { color: var(--muted); text-align: right; }
+.hub-view .u-block .u-bar { height: 6px; border-radius: 3px; }
+.hub-view .u-asof { color: var(--muted); font-size: 12px; }
+.hub-view .u-share { margin-top: 8px; }
+.hub-view .u-codex-bars { margin-top: 14px; padding-top: 4px; border-top: 1px solid var(--line); }
+.hub-view .segments.is-disabled { opacity: .55; }
+.hub-view .segments.is-disabled button { cursor: not-allowed; }
+.hub-view .segments.is-disabled button[aria-pressed="true"] { border-color: var(--muted); background: var(--panel); color: var(--text); }
+.hub-view .u-share-desc { margin: 8px 2px 0; color: var(--muted); font-size: 13px; }
+.hub-view .u-share-note { margin: 4px 2px 0; color: var(--muted); font-size: 12px; }
+.hub-view .u-share-fix { margin: 6px 2px 0; }
+.hub-view .u-share-fix code { display: inline-block; padding: 3px 7px; border-radius: 6px; background: var(--chip); color: var(--text); font-size: 12.5px; user-select: all; }
+.hub-view .lk-form { display:flex; gap:8px; align-items:center; }
+.hub-view .lk-form input { flex:1; min-width:0; font:16px var(--mono); color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:.3rem .6rem; min-height:2.75rem; }
+.hub-view .lk-form input::placeholder { font-family:var(--sans); }
+.hub-view .lk-form input:focus { outline:2px solid var(--accent-soft); border-color:var(--accent); }
+
+.hub-view .ub-banner > button { flex: none; min-height: 32px; }
+.hub-view .hold-banner.ub-going { border-color: color-mix(in srgb, var(--color-danger) 45%, transparent); background: color-mix(in srgb, var(--color-danger) 10%, var(--panel)); }
+.hub-view .hold-banner.ub-going > svg { color: var(--color-danger); }
+
+.hub-view .u-buffer { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
+.hub-view .ub-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.hub-view .ub-label { min-width: 0; }
+.hub-view .ub-label .title { display: block; font-size: 14px; }
+.hub-view .ub-sub { display: block; color: var(--muted); font-size: 12px; }
+.hub-view .segments.ub-step { flex: none; grid-template-columns: 44px 62px 44px; }
+.hub-view .ub-step button { padding: 0; font-size: 20px; line-height: 1; color: var(--text); }
+.hub-view .ub-step button:disabled { color: var(--muted); opacity: .45; cursor: default; }
+.hub-view .ub-step output { display: grid; place-items: center; border: 1px solid var(--accent); border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
+.hub-view .ub-step output.off { border-color: var(--line); background: var(--panel); color: var(--muted); }
+.hub-view .ub-marked .u-bar { position: relative; }
+.hub-view .ub-marked .u-bar > .ub-mark { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; border-radius: 0; background: var(--text); opacity: .5; }

package/board/public/prompts.js

@@ -0,0 +1,64 @@
+// Answering pending prompts from their Needs you lines (ui-prompts.js promptItem), on a board view and the hub page,
+// through the hub's POST /_hub/prompts/<id>/answer (docs/adr/0060-background-sessions-prompts-come-to-the-phone.md).
+// Allow once, Deny, Skip and a single question's option send on the tap. Always allow confirms first, naming its rule,
+// since it covers every later call like it until the session ends. Several questions, or one taking several picks,
+// send with Send once each has a pick.
+globalThis.PromptAnswers = (function () {
+  // B: the view's recorders. list() → the prompts the view shows; paint() repaints their lines; notify(text) shows a
+  // short message; after() runs once an answer has gone. → {state(p) for promptItem, shows(p)}
+  function wire(B, { list, paint, notify, after = () => {} }) {
+    const picks = new Map();
+    const sending = new Set();
+    // Answered here, hidden until the view's next load drops them.
+    const answered = new Set();
+    const picksOf = (id) => { if (!picks.has(id)) picks.set(id, {}); return picks.get(id); };
+
+    async function send(p, body) {
+      sending.add(p.id);
+      paint();
+      try {
+        const r = await fetch(`/_hub/prompts/${encodeURIComponent(p.id)}/answer`, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body) });
+        if (r.ok || r.status === 404 || r.status === 409) { answered.add(p.id); picks.delete(p.id); }
+        if (r.status === 404) notify('That prompt has expired.');
+        else if (r.status === 409) notify('That prompt was already answered.');
+        else if (!r.ok) notify((await r.json().catch(() => null))?.error || 'Could not send.');
+      } catch { notify('Could not send. Is the host awake?'); }
+      sending.delete(p.id);
+      paint();
+      after();
+    }
+
+    B.on(B.root, 'click', async (ev) => {
+      const li = ev.target.closest?.('li[data-prompt]');
+      const p = li && list().find((x) => x.id === li.dataset.prompt);
+      if (!p || sending.has(p.id) || answered.has(p.id)) return;
+      const opt = ev.target.closest('button[data-prompt-opt]');
+      if (opt) {
+        const i = Number(opt.dataset.promptQ);
+        const q = p.questions[i];
+        const mine = picksOf(p.id);
+        const got = mine[i] || [];
+        const label = opt.dataset.promptOpt;
+        mine[i] = q.multiSelect ? (got.includes(label) ? got.filter((l) => l !== label) : [...got, label]) : [label];
+        if (BoardUI.oneTap(p)) send(p, BoardUI.promptAnswer(p, mine));
+        else paint();
+        return;
+      }
+      if (ev.target.closest('button[data-prompt-send]')) {
+        const body = BoardUI.promptAnswer(p, picksOf(p.id));
+        if (body) send(p, body);
+        return;
+      }
+      const choice = ev.target.closest('button[data-prompt-choice]')?.dataset.promptChoice;
+      if (!choice) return;
+      if (choice === 'always' && !(await BoardDialogs.confirm(`Always allow ${p.rule} for the rest of this session?`))) return;
+      send(p, { choice });
+    });
+
+    return {
+      state: (p) => ({ picks: picks.get(p.id) || {}, sending: sending.has(p.id) }),
+      shows: (p) => !answered.has(p.id),
+    };
+  }
+  return { wire };
+})();

package/board/public/prototype-kit.js

@@ -0,0 +1,193 @@
+// What a prototype's take files get, on the page board/server.mjs serves from prototype.html for each topic recorded
+// with board.mjs prototype add (docs/adr/0089-the-board-serves-every-prototype-from-one-template.md). A take file,
+// public/prototypes/<topic>/<KEY>.js, is a module:
+//   export function render(stage, kit) { stage.innerHTML = kit.hub(); return () => {…} }   // the cleanup is optional
+// render runs on every switch to that take with a fresh, empty stage; it may be async. The stage contains its layout
+// and paint, so nothing in it, position: fixed included, can cover the header, the take pill or the app shell.
+//   kit.sidebar(data?, {here, switching, device, head, height})  ui-sidebar.js sidebar() as an open drawer card in the
+//                                       page's flow, rail width from 900px; head shows its Kickflip header
+//   kit.hub(data?)                      the Hub page (view-hub.js) in flow: {usage, usageCard (HTML in its place),
+//                                       afterUsage (HTML), hub, sites, polling, settings: [[id, title, sub]], header}
+//   kit.cards(items?, {lanes})          board cards (ui-cards.js workLines) in their lanes, or one list with lanes false
+//   kit.sheet(html, {title})            a sheet drawn in flow over a dimmed strip, not a real dialog
+//   kit.toast(text)                     the page's toast
+//   kit.on(target, type, fn, opts)      a listener removed on the next switch
+//   kit.fake                            made-up data: at(ms), sites(), usage({claude, codex}), sidebar(), hub(), items()
+//   kit.esc                             HTML escaping
+// BoardUI and HubUI, the real renderers, are globals too. A link in the stage never navigates and a form never
+// submits: each toasts unless the take's own handler shows a toast. Listeners a take adds to document or window,
+// and its timers, end on the next switch. Interactions must work on a tap: a phone has no hover.
+(function () {
+  const esc = (v) => String(v ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+  const wait = globalThis.setTimeout.bind(globalThis);
+  const unwait = globalThis.clearTimeout.bind(globalThis);
+
+  const at = (ms) => new Date(Date.now() + ms).toISOString();
+  const svg = (paths) => `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${paths}</svg>`;
+  const siteIcon = (color, paths) => `<span class="icon" style="--c:${color}" aria-hidden="true">${svg(paths)}</span>`;
+  const lanes = (...l) => `<span class="lcs">${l.map(([k, t]) => `<span class="lc lc-${k}">${t}</span>`).join('')}</span>`;
+  const reading = (five, week, agoMs, resetH, weekD) => ({ at: at(-agoMs), five_hour: { used_percentage: five, resets_at: at(resetH * 3600_000), state: 'live' }, seven_day: { used_percentage: week, resets_at: at(weekD * 86400_000), state: 'live' } });
+  const fake = {
+    at,
+    sites: () => [
+      { route: 'backend-audit', title: 'Backend Audit', board: true, count: 0, created: '2026-10-22T21:47:40Z', icon: siteIcon('#8b5cf6', '<circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/><path d="m8.5 11 1.8 1.8 3.4-3.6"/>'), sub: lanes(['review', '3 review'], ['todo', '15 todo']) },
+      { route: 'hub-orchestrator', title: 'Hub Orchestrator', board: true, count: 1, created: '2026-10-29T21:49:30Z', icon: siteIcon('#f97316', '<rect x="3" y="3" width="18" height="7" rx="2"/><rect x="3" y="14" width="18" height="7" rx="2"/><path d="M7 6.5h.01M7 17.5h.01"/>'), sub: lanes(['progress', '3 doing'], ['todo', '9 todo']) },
+      { route: 'ios-orchestrator', title: 'iOS Orchestrator', board: true, count: 0, created: '2026-10-22T19:19:11Z', icon: siteIcon('#3b82f6', '<rect x="6" y="2" width="12" height="20" rx="2.5"/><path d="M11 18h2"/>'), sub: lanes(['review', '4 review'], ['todo', '6 todo']) },
+    ],
+    // Percent used in each product's 5-hour window, or [5-hour, week]; null leaves that product's reading out.
+    usage: ({ claude = 34, codex = 12 } = {}) => ({
+      ...(claude === null ? {} : { claude: reading(...[claude, 61].flat().slice(0, 2), 2 * 60_000, 3.4, 2.6) }),
+      ...(codex === null ? {} : { codex: reading(...[codex, 40].flat().slice(0, 2), 6 * 60_000, 1.2, 4.1) }),
+    }),
+    sidebar: () => ({ total: 1, sites: fake.sites(), hub: { tone: 'ok', word: 'Healthy', detail: '3 of 3 sites up' }, notifications: { state: 'on' }, usage: fake.usage() }),
+    hub: () => ({
+      usage: fake.usage(),
+      hub: { tone: 'ok', word: 'Healthy', detail: '3 of 3 sites up' },
+      sites: fake.sites(),
+      polling: { title: 'Checks every 15 min until 6:00pm', lines: ['Next check 12:00pm · last 11:45am, 8 PRs, no change', 'No pushes queued.'], count: 0 },
+      settings: [['notifications', 'Notifications', 'Pushes on · Off on weekends · This device on'], ['polling', 'Polling', '3 windows, 52 checks a day · held overnight'],
+        ['codex', 'Codex share', 'Auto'], ['rules', 'Rules for every board', '1 rule'], ['closed', 'Closed boards', 'No closed boards']],
+    }),
+    items: () => [
+      { lane: 'review', title: 'Audit log keeps the actor on bulk updates', ref: 'INT-41', pr: { url: 'https://github.com/o/app/pull/312', number: 312, state: 'OPEN', isDraft: false, checks: { state: 'pass' } }, reviewers: ['Quinn'], review: { Quinn: { state: 'sent', since: at(-200 * 60_000) } } },
+      { lane: 'progress', title: 'Rate limits per API key', ref: 'INT-43', builder: { progress: 'Writing the limiter test', at: at(-4 * 60_000) } },
+      { lane: 'todo', title: 'Drop the unused lead_sources index', ref: 'INT-44', next: 'Ready to start' },
+    ],
+  };
+
+  function sidebar(data = fake.sidebar(), { here = '', switching = false, device = null, head = false, height = null } = {}) {
+    const style = height ? ` style="height:${Number(height)}px"` : '';
+    return `<aside class="sidebar kit-sidebar${head ? ' kit-head' : ''}${switching ? ' ks-on' : ''}" aria-label="Boards"${style}>${BoardUI.sidebar(data, { here, switching, device })}</aside>`;
+  }
+
+  function hub(data = {}) {
+    const d = { ...fake.hub(), header: true, ...data };
+    const { row, tile, nowRow, CHEVRON } = HubUI;
+    const site = (s) => row({ icon: s.icon, title: esc(s.title), sub: s.status ?? '<span class="st ok">Up · listening · every link passes</span>', wrap: true, trail: CHEVRON, href: `/${s.route}/` });
+    const settings = d.settings.map(([id, title, sub]) => `<button type="button" class="hub-setting" data-setting="${esc(id)}" data-kit-inert aria-haspopup="dialog"><span class="text"><span class="title">${esc(title)}</span><span class="sub">${esc(sub)}</span></span>${CHEVRON}</button>`).join('');
+    const usage = d.usageCard ?? HubUI.usageCard(d.usage);
+    const header = d.header ? BoardUI.header({ lead: 'logo', title: 'Hub', time: 'now', logoSrc: '/_hub/kickflip.png', logoHref: '/_hub/', settingsHref: null }) : '';
+    return `<div class="hub-view view-hub kit-hub">${header}<main class="has-top"><div class="hub-status">${usage}${d.afterUsage || ''}<h2 class="label">Health</h2>
+<div class="group">${row({ icon: tile('power', { ok: '#22c55e', wait: '#f59e0b' }[d.hub.tone] || '#ef4444'), title: 'Hub', sub: `<span class="st ${esc(d.hub.tone)}">${esc(d.hub.word)}</span> · ${esc(d.hub.detail)}`, wrap: true })}</div>
+<h2 class="label">Boards</h2>
+<div class="group">${d.sites.map(site).join('')}</div>
+<p class="note">The hub runs every site and restarts one that stops. A board's links are what the hub owes it: GitHub polling, events (its session and a watcher run, or the hub can wake it), daily wakes, pushes and reviewer links. One that just broke reads settling first.</p>
+<h2 class="label">Polling status</h2>
+<div class="group">${nowRow(d.polling, tile('clock', '#3b82f6'))}</div></div>
+<section class="hub-settings"><h2 class="label">Hub settings</h2>${settings}</section>
+<div class="hub-foot"><footer>${d.sites.length} sites. Each belongs to one Claude session, which adds it with <code>/kickflip &lt;route&gt;</code>. This page refreshes every 30 seconds.<br><span class="host">mac.example.ts.net</span></footer></div></main></div>`;
+  }
+
+  const LANES = [['review', 'In Review'], ['progress', 'In Progress'], ['todo', 'Todo'], ['done', 'Done']];
+  function card(it, i) {
+    const full = { key: `w/C${i}`, id: `C${i}`, kind: 'work', internal: !it.linear && !it.ticket, ref: `C${i}`, lane: 'todo', deps: [], blockedBy: [], held: false, bumpable: false, isNew: false,
+      reviewers: [], review: {}, pr: null, builder: null, next: null, ...it };
+    return `<details class="item" data-key="${esc(full.key)}"><summary class="work"><span class="status ${esc(full.lane)}"></span><div class="title-wrap">${BoardUI.workLines(full)}</div></summary></details>`;
+  }
+  function cards(items = fake.items(), { lanes: grouped = true } = {}) {
+    if (!grouped) return `<div class="view-board kit-cards"><div class="lane"><div class="list">${items.map(card).join('')}</div></div></div>`;
+    return `<div class="view-board kit-cards">${LANES.map(([id, name]) => {
+      const list = items.map((it, i) => [it, i]).filter(([it]) => (it.lane || 'todo') === id);
+      return list.length ? `<details class="lane" data-lane="${id}" open><summary><span class="lane-name">${name}</span><span class="count">${list.length}</span></summary><div class="list">${list.map(([it, i]) => card(it, i)).join('')}</div></details>` : '';
+    }).join('')}</div>`;
+  }
+
+  const sheet = (html, { title = '' } = {}) => `<div class="kit-sheet-strip"><section class="kit-sheet" role="group" aria-label="${esc(title)}"><div class="sheet-head"><h2>${esc(title)}</h2><button type="button" data-kit-inert aria-label="Close sheet">✕</button></div><div class="kit-sheet-body">${html}</div></section></div>`;
+
+  let toasted = 0;
+  function toast(text) {
+    const el = document.getElementById('protoToast');
+    if (!el) return;
+    toasted++;
+    el.textContent = text;
+    el.hidden = false;
+    unwait(toast.t);
+    toast.t = wait(() => { el.hidden = true; }, 2600);
+  }
+
+  // What a take leaves behind: listeners on document and window, and timers, recorded while it shows. Only functions
+  // made in this page count, since the app shell adds its own listeners to a framed page's document (view-frame.js).
+  const ends = [];
+  let live = false;
+  const nativeAdd = EventTarget.prototype.addEventListener;
+  const nativeRemove = EventTarget.prototype.removeEventListener;
+  for (const target of [window, document]) {
+    Object.defineProperty(target, 'addEventListener', { configurable: true, value(type, fn, opts) {
+      const self = this ?? window;
+      nativeAdd.call(self, type, fn, opts);
+      if (live && fn instanceof Function) ends.push(() => nativeRemove.call(self, type, fn, opts));
+    } });
+  }
+  for (const [set, clear] of [['setTimeout', 'clearTimeout'], ['setInterval', 'clearInterval']]) {
+    const native = window[set].bind(window);
+    const nativeClear = window[clear].bind(window);
+    window[set] = (...args) => { const id = native(...args); if (live) ends.push(() => nativeClear(id)); return id; };
+  }
+  const on = (target, type, fn, opts) => { nativeAdd.call(target, type, fn, opts); ends.push(() => nativeRemove.call(target, type, fn, opts)); };
+
+  const kit = { sidebar, hub, cards, sheet, toast, on, fake, esc };
+
+  function start(data) {
+    const keys = data.takes.map((t) => t.key);
+    const takes = Object.fromEntries(data.takes.map((t) => [t.key, t.label]));
+    let cleanup = null;
+    let shown = 0;
+
+    // Capture runs before the app shell's own click handler on a framed page, which would open a board link.
+    const inStage = (e, sel) => e.target.closest?.(`#stage ${sel}`);
+    let pending = null;
+    nativeAdd.call(document, 'click', (e) => {
+      const a = inStage(e, 'a[href]');
+      const inert = inStage(e, '[data-kit-inert]');
+      if (!a && !inert) return;
+      if (a) e.preventDefault();
+      pending = { e, n: toasted, text: a ? `Prototype: this link opens ${a.getAttribute('href')}` : 'Prototype: nothing happens here.' };
+    }, true);
+    nativeAdd.call(document, 'submit', (e) => {
+      if (!inStage(e, 'form')) return;
+      e.preventDefault();
+      pending = { e, n: toasted, text: 'Prototype: nothing is sent.' };
+    }, true);
+    for (const type of ['click', 'submit']) {
+      nativeAdd.call(window, type, (e) => { if (pending?.e === e && pending.n === toasted) toast(pending.text); pending = null; });
+    }
+
+    async function render(key) {
+      const n = ++shown;
+      live = false;
+      try { cleanup?.(); } catch (err) { console.error(err); }
+      cleanup = null;
+      ends.splice(0).forEach((end) => end());
+      // A switch keeps the page where it is: the new stage holds the old one's height until the take has drawn.
+      const old = document.getElementById('stage');
+      const stage = old.cloneNode(false);
+      const y = window.scrollY;
+      stage.style.minHeight = `${old.offsetHeight}px`;
+      old.replaceWith(stage);
+      const settle = () => { if (n !== shown) return; stage.style.minHeight = ''; window.scrollTo(0, y); };
+      document.documentElement.dataset.take = key;
+      const take = data.takes.find((t) => t.key === key);
+      if (!take.src) {
+        stage.innerHTML = `<p class="kit-missing">Take ${esc(key)} has no file yet: write public/${esc(take.file)}, exporting render(stage, kit).</p>`;
+        settle();
+        return;
+      }
+      live = true;
+      try {
+        const mod = await import(new URL(take.src, location.href).href);
+        if (n !== shown) return;
+        const out = await mod.render(stage, kit);
+        if (n === shown) cleanup = typeof out === 'function' ? out : null;
+        else if (typeof out === 'function') out();
+      } catch (err) {
+        console.error(err);
+        if (n === shown) stage.innerHTML = `<p class="kit-missing">Take ${esc(key)} failed: ${esc(err?.message || err)}</p>`;
+      }
+      settle();
+    }
+
+    return PrototypeSwitcher.mount({ takes, initial: keys[0], render });
+  }
+
+  globalThis.PrototypeKit = { ...kit, start };
+})();