@lovek4d/kickflip 0.5.0 → 0.5.3

package/board/public/new-task.js

@@ -1,7 +1,6 @@
-// The + button and the sheet that sends a new task as an ask event, on every page of a board: the board view's markup
-// (app.js) and each other view of a board (shell.js) put BoardNewTask.markup() in their root and wire it with
-// BoardNewTask.wire(B) once mounted. A board's view sends through B.send, which lands the board the ask changed; any
-// other view sends through its site. B.newTaskKey(ev) is the n-twice handler, which a framed page's document also feeds.
+// The + button and the sheet that sends a new task as an ask event, on the board's main page alone: the board view's markup
+// (app.js) puts BoardNewTask.markup() in its root and app-asks.js wires it with BoardNewTask.wire(B). No other page
+// opts in. The ask goes through B.send, which lands the board the ask changed. B.newTaskKey(ev) is the n-twice handler, which a framed page's document also feeds.
 globalThis.BoardNewTask = (function () {
   const markup = () => `<button id="compose" class="fab" type="button" aria-label="New task" title="New task (press n twice)" aria-haspopup="dialog" aria-expanded="false"><svg width="35" height="35" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
 <dialog id="sheet" class="sheet" aria-labelledby="sheetTitle">
@@ -9,32 +8,28 @@ globalThis.BoardNewTask = (function () {
     <div class="sheet-head"><h2 id="sheetTitle">New task</h2><button type="button" class="ghost" id="sheetClose" aria-label="Close">✕</button></div>
     ${BoardUI.dropZone('<textarea id="askText" rows="4" placeholder="Ask a question or give me a task…" autofocus></textarea>')}
     <div class="pending-files" data-files></div>
-    <div class="tk-seg ask-seg" role="group" aria-label="Before building"><button type="button" id="askDiscuss" aria-pressed="true">Discuss</button><button type="button" id="askQuick" aria-pressed="false">Quick build</button></div>
-    <p class="muted small ask-choice-help" id="askChoiceHelp" aria-live="polite"></p>
-    <div class="row">
-      <span class="muted small" id="askStatus"></span>
-      <button type="submit" class="primary">Send</button>
-    </div>
+    <div class="send-actions">${BoardUI.sendButton('Quick build', 1, ' data-intent="quick"')}${BoardUI.sendButton('Discuss', 0, ' data-intent="discuss"')}</div>
+    <p class="muted small" id="askStatus" aria-live="polite"></p>
   </form>
 </dialog>`;
 
   function wire(B) {
+    // A shared person looks only (shell.js marks the page shared-view, and style.css hides the +), so n twice opens nothing.
+    if (document.documentElement.classList.contains('shared-view')) return;
     const { $, store, toast, quieted, sendDraft } = B;
-    const { attachButton, waitOn } = BoardUI;
+    const { waitOn, keyedSend } = BoardUI;
     const send = (kind, data) => (B.send ? B.send(kind, data) : B.site.send(kind, data));
     // The ask box is a bottom sheet: a <dialog> opened from the + button. Closing keeps the draft.
     const sheet = $('#sheet');
     const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)');
-    if (!$('#askForm .row .attach')) $('#askForm .row').insertAdjacentHTML('afterbegin', attachButton());
     // Files picked before the app shell switched away from this board are still attached, so they show again.
     BoardAttach.paint('ask', B.site.root);
-    const isMac = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
-    if (!$('#askForm .send-hint')) $('#askForm button[type=submit]').insertAdjacentHTML('beforebegin', `<span class="send-hint" aria-hidden="true">${isMac ? '⌘↵' : 'Ctrl+↵'}</span>`);
-    // ⌘↵ (Ctrl+↵ off a Mac) sends the ask from its box.
+    // ⌘↵ sends the ask as Discuss and ⌥↵ as Quick build (ui.js keyedSend).
     B.on($('#askText'), 'keydown', (ev) => {
-      if (ev.key !== 'Enter' || !(ev.metaKey || ev.ctrlKey) || ev.isComposing) return;
+      const button = keyedSend(ev, $('#askForm'));
+      if (!button) return;
       ev.preventDefault();
-      $('#askForm').requestSubmit();
+      $('#askForm').requestSubmit(button);
     });
     $('#askText').value = store.get('draft:ask', '');
     B.on($('#askText'), 'input', (e) => { if (!quieted('draft:ask', e.target)) store.set('draft:ask', e.target.value); });
@@ -80,36 +75,20 @@ globalThis.BoardNewTask = (function () {
     B.on($('#sheetClose'), 'click', closeSheet);
     B.on(sheet, 'click', (ev) => { if (ev.target === sheet) closeSheet(); });
     B.on(sheet, 'cancel', (ev) => { ev.preventDefault(); closeSheet(); });
-    // Discuss or Quick build, above Send: Discuss, the default, has the session grill or prototype the task at once; Quick
-    // build sends the ask with quick: true, and the session marks the card ready. Each send goes back to Discuss
-    // (docs/adr/2026-11-04-0131-every-new-task-is-grilled-or-prototyped-at-once.md).
-    const CHOICE_HELP = {
-      discuss: 'Discuss: Claude grills or prototypes it first, then waits for you.',
-      quick: 'Quick build: for changes you’re sure about; Claude marks it ready and builds.',
-    };
-    let quick = false;
-    function choose(isQuick) {
-      quick = isQuick;
-      $('#askDiscuss').setAttribute('aria-pressed', String(!quick));
-      $('#askQuick').setAttribute('aria-pressed', String(quick));
-      $('#askChoiceHelp').textContent = CHOICE_HELP[quick ? 'quick' : 'discuss'];
-    }
-    choose(false);
-    B.on(B.root, 'click', (ev) => {
-      const b = ev.target.closest('#askDiscuss, #askQuick');
-      if (b) choose(b.id === 'askQuick');
-    });
+    // Discuss has the session grill or prototype the task at once; Quick build sends the ask with quick: true, and the
+    // session marks the card ready (docs/adr/2026-11-04-0131-every-new-task-is-grilled-or-prototyped-at-once.md).
     B.on($('#askForm'), 'submit', async (ev) => {
       ev.preventDefault();
       $('#askText').blur();
       const text = $('#askText').value.trim();
       const files = BoardAttach.files('ask', B.site.root);
+      const button = ev.submitter;
+      const quick = button.dataset.intent === 'quick';
       if ((!text && !files.length) || BoardAttach.busy('ask', B.site.root)) return;
       $('#askStatus').textContent = '';
       try {
-        await waitOn($('#askForm button[type="submit"]'), sendDraft('draft:ask', $('#askText'), () => $('#askText'), () => send('ask', { text, ...(files.length ? { files } : {}), ...(quick ? { quick: true } : {}) })));
+        await waitOn(button, sendDraft('draft:ask', $('#askText'), () => $('#askText'), () => send('ask', { text, ...(files.length ? { files } : {}), ...(quick ? { quick: true } : {}) })));
         BoardAttach.clear('ask', B.site.root);
-        choose(false);
         $('#askStatus').textContent = '';
         closeSheet();
         toast('Sent');

package/board/public/prototype-kit.js

@@ -75,7 +75,7 @@
 <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>`;
+<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><br><span class="brand"><a href="https://kickflip.sh">kickflip.sh</a> / v0.4.2</span></footer></div></main></div>`;
   }
 
   const LANES = [['review', 'In Review'], ['progress', 'In Progress'], ['todo', 'Todo'], ['done', 'Done']];
@@ -127,6 +127,21 @@
 
   const kit = { sidebar, hub, cards, sheet, toast, on, fake, esc };
 
+  // [element, place] for each element in stage, its place the tag and class of it and each ancestor up to the stage, with
+  // a count telling apart boxes that share one, so a take drawn again finds the same box.
+  function placesIn(stage) {
+    const seen = new Map();
+    return [...stage.querySelectorAll('*')].map((el) => {
+      let path = '';
+      for (let at = el; at && at !== stage; at = at.parentElement) path = `${at.tagName}.${at.className}/${path}`;
+      const n = seen.get(path) || 0;
+      seen.set(path, n + 1);
+      return [el, `${path}#${n}`];
+    });
+  }
+  // place → [scrollTop, scrollLeft] of each box in stage scrolled away from its start.
+  const scrolledBoxes = (stage) => new Map(placesIn(stage).filter(([el]) => el.scrollTop || el.scrollLeft).map(([el, place]) => [place, [el.scrollTop, el.scrollLeft]]));
+
   function start(data) {
     const keys = data.takes.map((t) => t.key);
     const takes = Object.fromEntries(data.takes.map((t) => [t.key, t.label]));
@@ -158,13 +173,23 @@
       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.
+      // A switch keeps the page where it is: the new stage holds the old one's height until the take has drawn, and
+      // each box scrolled inside the take scrolls where it was once the new take has drawn the same box.
       const old = document.getElementById('stage');
       const stage = old.cloneNode(false);
       const y = window.scrollY;
+      const scrolled = scrolledBoxes(old);
       stage.style.minHeight = `${old.offsetHeight}px`;
       old.replaceWith(stage);
-      const settle = () => { if (n !== shown) return; stage.style.minHeight = ''; window.scrollTo(0, y); };
+      const settle = () => {
+        if (n !== shown) return;
+        stage.style.minHeight = '';
+        for (const [el, place] of placesIn(stage)) {
+          const at = scrolled.get(place);
+          if (at) [el.scrollTop, el.scrollLeft] = at;
+        }
+        window.scrollTo(0, y);
+      };
       document.documentElement.dataset.take = key;
       const take = data.takes.find((t) => t.key === key);
       if (!take.src) {

package/board/public/prototype-switcher.js

@@ -1,16 +1,11 @@
-// The floating ‹ take › pill every prototype page switches its takes with (docs/adr/2026-10-29-1639-prototypes-come-on-request.md).
+// The floating ‹ take › pill of a question's full-page prototype viewer (docs/adr/2026-10-29-1639-prototypes-come-on-request.md,
+// docs/adr/2026-11-05-1302-a-questions-prototypes-open-in-a-full-page-viewer.md).
 // Load it with a relative src after claude.js, on a page whose header leads with the back arrow, then call
 //   const sw = PrototypeSwitcher.mount({ takes: { A: 'A. Name', … }, initial: 'A', render(take) {…}, above: el? })
 // render runs at mount and on each switch; sw.take is the current key. ←/→ switch unless a field has focus, and the
-// take stays in ?variant=. With ?q=<owner question id>, the pill offers the take as that question's answer: a take
-// is pickable when an option's id equals its key. Pick sends the owner-answer event questions.html sends, with the
-// note typed above the pill, then moves on through BoardUI.nextQuestion (ui-questions.js).
-// PrototypeSwitcher.current is the mounted switcher, whose go(key) shows another take in place; Waiting on you uses it
-// to switch its full-width frame without a reload (view-questions.js inPlace).
-// With ?take=<key> the page shows that take alone, with no header or pill, as questions.html frames it
-// (docs/adr/2026-10-29-1639-a-questions-takes-show-inline.md); a page hides its own extras under html.ps-embed. There main's
-// bottom padding, kept clear for the pill, shrinks to 12px whatever the page sets, since questions.html sizes the frame
-// to the page's height.
+// take stays in ?variant=. With ?q=<owner question id>, the pill offers the take as that question's pick: a take is
+// pickable when an option's id equals its key. Pick drafts it, with the note typed above the pill, in the {choice, note}
+// questions.html keeps for that question, and goes back to the question, whose Send sends it.
 (function () {
   const esc = (t) => String(t ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
 
@@ -20,53 +15,42 @@
   };
   const startTake = (keys, wanted, initial) => (keys.includes(wanted) ? wanted : keys.includes(initial) ? initial : keys[0]);
 
-  // The owner's current pick is the latest answer that chose an option; a note-only answer keeps the earlier pick.
+  // The owner's last sent pick is the latest answer that chose an option; a note-only answer keeps the earlier pick.
   const pickedChoice = (question) => [...(question?.answers || [])].reverse().find((a) => a.choice)?.choice ?? null;
-  // none: no question, or the take is not one of its options. pick: nothing picked yet. picked: this take is the
-  // owner's pick. change: another take is.
-  function pickState(question, take) {
+  // The pick a question shows on Waiting on you (ui-questions.js choiceOf): drafted, this device's unsent pick, which Send
+  // would send, else the last answer's, else the option the overnight triage suggested. A resolved question is locked at
+  // its last answer, and one waiting on the prototype the owner asked for at the request's pick.
+  const locked = (question) => question.state === 'resolved' || question.state === 'requested';
+  const shownPick = (question, drafted) => question.state === 'requested' ? question.request?.choice ?? null
+    : question.state === 'resolved' ? pickedChoice(question)
+    : drafted ?? pickedChoice(question) ?? question.suggested?.option ?? null;
+  // none: no question, the take is not one of its options, or the question is locked and the take isn't its pick.
+  // pick: nothing picked yet. picked: this take is the pick. change: another take is.
+  function pickState(question, take, drafted = null) {
     if (!question) return { kind: 'none' };
     const option = (question.options || []).find((o) => o.id === take);
-    const picked = pickedChoice(question);
+    const picked = shownPick(question, drafted);
     if (!option) return { kind: 'none', picked };
-    if (!picked) return { kind: 'pick', option };
-    return { kind: picked === take ? 'picked' : 'change', option, picked };
+    if (picked === take) return { kind: 'picked', option, picked };
+    if (locked(question)) return { kind: 'none', picked };
+    return picked ? { kind: 'change', option, picked } : { kind: 'pick', option };
   }
-  // Matches ui-questions.js choiceLabel for a single-choice question.
-  const answerLabel = (option) => `${/^[A-Z][0-9]?$/i.test(option.id) ? `${option.id}. ` : ''}${option.label}`;
-  const questionUrl = (q) => (/^prototype-[\w-]+\.html(?:[?#]|$)/.test(q.url || '') ? q.url : `questions.html#${encodeURIComponent(q.id)}`);
-  // questions.html keeps each question's unsent {choice, note} under this key; a pick sent here takes its note and clears it.
+  // questions.html keeps each question's unsent {choice, note} under this key (ui-questions.js getDraft).
   const draftKey = (qid) => 'qdraft:' + qid;
   const readDraft = (qid) => { try { return JSON.parse(localStorage.getItem(draftKey(qid)) || '{}'); } catch { return {}; } };
-  // In place of this page: framed in the app shell, the shell shows the URL's view in place (board/public/shell.js
-  // AppShell.open); alone, or for a URL that isn't a view, the page loads it.
+  const writeDraft = (qid, draft) => { try { localStorage.setItem(draftKey(qid), JSON.stringify(draft)); } catch { /* nothing kept */ } };
+  // In place of this page: framed in the app shell, the shell shows the URL's view in place, going up to the question
+  // the viewer sits under (board/public/shell.js AppShell.open, router.js); alone, the page loads it.
   function replaceWith(url) {
     let app = null;
     try { app = window.top !== window ? window.top.AppShell : null; } catch { app = null; }
     if (!app?.open?.(String(url), { replace: true })) location.replace(url);
   }
 
-  // Prototype pages need only claude.js and this switcher. In the shell, its BoardUI also owns the board's notice.
-  let questionsUI = null;
-  const sharedQuestions = (site) => (questionsUI ||= (async () => {
-    try { if (window.top !== window && window.top.BoardUI?.nextQuestion) return window.top.BoardUI; } catch {}
-    for (const [file, key] of [['ui.js', 'esc'], ['ui-links.js', 'linkText'], ['ui-questions.js', 'nextQuestion']]) {
-      if (globalThis.BoardUI?.[key]) continue;
-      await new Promise((resolve, reject) => {
-        const script = document.createElement('script');
-        script.src = site.url(file);
-        script.onload = resolve;
-        script.onerror = reject;
-        document.head.append(script);
-      });
-    }
-    return globalThis.BoardUI;
-  })().catch((e) => { questionsUI = null; throw e; }));
-
-  function pillHtml({ name, pick = { kind: 'none' }, busy = false }) {
+  function pillHtml({ name, pick = { kind: 'none' } }) {
     const control = pick.kind === 'picked' ? '<span class="ps-picked">Picked</span>'
       : pick.kind === 'pick' || pick.kind === 'change'
-        ? `<button type="button" class="ps-pick" data-ps="pick"${busy ? ' disabled' : ''}>${busy ? 'Sending…' : pick.kind === 'pick' ? 'Pick this' : 'Change pick'}</button>`
+        ? `<button type="button" class="ps-pick" data-ps="pick">${pick.kind === 'pick' ? 'Pick this' : 'Change pick'}</button>`
         : '';
     return `<button type="button" data-ps="prev" aria-label="Previous take">‹</button><span class="ps-name" title="${esc(name)}">${esc(name)}</span><button type="button" data-ps="next" aria-label="Next take">›</button>${control}`;
   }
@@ -82,16 +66,13 @@
 .ps-switch .pill button.on { background:#fff; color:#000; }
 .ps-name { flex:0 1 auto; padding:7px 6px; color:#fff; white-space:nowrap; min-width:0; text-align:center; overflow:hidden; text-overflow:ellipsis; }
 .ps-pill .ps-pick { background:#fff; color:#000; margin-left:2px; }
-.ps-pill .ps-pick:disabled { opacity:.6; cursor:default; }
 .ps-switch .ps-text { width:min(420px, 100%); resize:none; border-radius:12px; border:1px solid #fff3; background:#000d; color:#fff;
   padding:7px 10px; font:400 14px -apple-system, system-ui, sans-serif; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
 .ps-switch .ps-text::placeholder { color:#fffa; }
 .ps-switch .ps-text[hidden] { display:none; }
 .ps-picked { margin-left:2px; padding:7px 11px; border-radius:999px; color:#fff; background:#1f9d55; white-space:nowrap; }
 .ps-note { background:#000d; color:#fff; border-radius:8px; padding:5px 10px; font:500 12px -apple-system, system-ui, sans-serif; text-align:center; }
-.ps-note[hidden] { display:none; }
-.ps-embed header.top { display:none; }
-.ps-embed main { padding-bottom:12px !important; }`;
+.ps-note[hidden] { display:none; }`;
 
   const typing = (el) => Boolean(el?.closest?.('input, select, textarea, [contenteditable]:not([contenteditable="false"])'));
 
@@ -101,29 +82,10 @@
     const qid = params.get('q');
     const site = globalThis.ClaudeSite;
     if (!document.getElementById('ps-style')) document.head.insertAdjacentHTML('beforeend', `<style id="ps-style">${CSS}</style>`);
-    if (params.has('take')) {
-      let only = startTake(keys, params.get('take'), initial);
-      document.documentElement.classList.add('ps-embed');
-      render(only);
-      const embedded = {
-        takes: keys,
-        get take() { return only; },
-        go(next) {
-          if (!keys.includes(next) || next === only) return;
-          only = next;
-          const u = new URL(location.href); u.searchParams.set('take', only); history.replaceState(history.state, '', u);
-          render(only);
-        },
-      };
-      return (globalThis.PrototypeSwitcher.current = embedded);
-    }
     let take = startTake(keys, params.get('variant'), initial);
     let question = null;
-    let topics = [];
-    // The board's cards, which name their own question topics (ui-questions.js cardTopics).
-    let cards = [];
-    // A push opened this page (board/store.mjs pushUrl). Read once and dropped from the URL, so a pick made here or a
-    // reload stays on the page; only the first load sends an already-picked question on to its card's thread.
+    // A push opened this page (board/store.mjs pushUrl). Read once and dropped from the URL, so a reload stays on the
+    // page; only the first load sends an already-picked question on to its card's thread.
     let fromPush = params.get('from') === 'push';
     if (fromPush) { const u = new URL(location.href); u.searchParams.delete('from'); history.replaceState(null, '', u); }
 
@@ -135,13 +97,13 @@
     const pill = box.querySelector('.ps-pill');
     const noteEl = box.querySelector('.ps-note');
     const text = box.querySelector('.ps-text');
-    let busy = false;
 
     const note = (text) => { noteEl.textContent = text || ''; noteEl.hidden = !text; };
+    const state = () => pickState(question, take, qid ? readDraft(qid).choice : null);
     function paint() {
-      const state = pickState(question, take);
-      pill.innerHTML = pillHtml({ name: takes[take], pick: state, busy });
-      text.hidden = !(state.kind === 'pick' || state.kind === 'change');
+      const now = state();
+      pill.innerHTML = pillHtml({ name: takes[take], pick: now });
+      text.hidden = !(now.kind === 'pick' || now.kind === 'change');
     }
     function go(next) {
       take = next;
@@ -153,14 +115,11 @@
 
     async function load() {
       if (!qid || !site) return;
-      let board = null;
       try {
-        board = await (await fetch(site.url('api/board'), { cache: 'no-store' })).json();
-        topics = board.ownerTopics;
-        cards = board.items || [];
+        const board = await (await fetch(site.url('api/board'), { cache: 'no-store' })).json();
         // A resolved question is left out of /api/board, and its topic's resolved questions hold it
         // (docs/adr/2026-11-04-0128-the-board-download-leaves-out-resolved-questions.md).
-        const topic = topics.find((t) => t.questions.includes(qid));
+        const topic = board.ownerTopics.find((t) => t.questions.includes(qid));
         question = board.owner.find((q) => q.id === qid)
           || (topic && (await (await fetch(site.url('api/questions?topic=' + encodeURIComponent(topic.id)), { cache: 'no-store' })).json()).questions.find((q) => q.id === qid))
           || null;
@@ -174,37 +133,13 @@
       if (question && !text.value) text.value = readDraft(qid).note || '';
       fromPush = false;
       paint();
-      return board;
     }
 
-    async function pick() {
-      const state = pickState(question, take);
-      if (busy || !(state.kind === 'pick' || state.kind === 'change')) return;
-      busy = true; paint();
-      const answered = question;
-      let ui, pills, name;
-      try {
-        ui = await sharedQuestions(site);
-        pills = ui.topicRow(topics, answered.topic).pills;
-        const topic = topics.find((t) => t.id === answered.topic);
-        name = topic ? ui.topicName(ui.cardTopics([topic], cards)[0]) : '';
-        await site.send('owner-answer', { id: answered.id, question: answered.question, choice: state.option.id, label: answerLabel(state.option), note: text.value.trim() });
-      } catch { busy = false; paint(); note('Could not send. Is the host awake?'); return; }
-      try { localStorage.removeItem(draftKey(qid)); } catch { /* nothing kept */ }
-      text.value = '';
-      busy = false;
-      note('Sent. Claude replies on the card.');
-      const board = await load();
-      const next = ui.nextQuestion(board?.owner || [], pills, answered);
-      if (next) {
-        const u = new URL(site.url(questionUrl(next)), location.href);
-        if (globalThis.PageBack?.pushed) u.searchParams.set('from', 'push');
-        replaceWith(u);
-      } else {
-        const route = new URL(site.url(''), location.href).pathname.replace(/^\/+|\/+$/g, '');
-        ui.sentNotice.put(route, `Sent 1 answer${name ? ` to ${name}` : ''}.`);
-        replaceWith(site.url('./'));
-      }
+    function pick() {
+      const now = state();
+      if (!(now.kind === 'pick' || now.kind === 'change')) return;
+      writeDraft(qid, { ...readDraft(qid), choice: now.option.id, note: text.value.trim() });
+      replaceWith(site.url(`questions.html#${encodeURIComponent(qid)}`));
     }
     text.addEventListener('keydown', (e) => {
       if (e.key !== 'Enter' || !(e.metaKey || e.ctrlKey) || e.isComposing) return;
@@ -227,8 +162,8 @@
 
     go(take);
     load();
-    return (globalThis.PrototypeSwitcher.current = { takes: keys, get take() { return take; }, go });
+    return { takes: keys, get take() { return take; }, go };
   }
 
-  globalThis.PrototypeSwitcher = { takeAt, startTake, pickedChoice, pickState, answerLabel, pillHtml, mount };
+  globalThis.PrototypeSwitcher = { takeAt, startTake, pickedChoice, pickState, pillHtml, mount };
 })();

package/board/public/shell.js

@@ -57,6 +57,10 @@ window.AppShell = (function () {
     // A stored sidebar's code says nothing about the shell that booted, so it adopts the next live hash.
     bootCode = data?.code || null;
     data ||= read(DATA_KEY);
+    // A board shared with someone else, view only (docs/adr/2026-11-05-2215-a-board-is-shared-view-only-with-a-tailscale-login.md):
+    // the hub sends them data.shared, and style.css hides what writes under .shared-view.
+    const shared = data?.shared || null;
+    document.documentElement.classList.toggle('shared-view', Boolean(shared));
     sidebar = Sidebar.mount({ data, poll: false, reload, open: (href) => { if (!open(href)) location.assign(href); } });
     const boards = () => new Set((data?.sites || []).filter((s) => s.board).map((s) => s.route));
     const titleOf = (route) => data?.sites?.find((s) => s.route === route)?.title || route;
@@ -116,7 +120,9 @@ window.AppShell = (function () {
     // minute while present. While away the first one goes at once and the moon goes from this page at the same moment
     // (docs/adr/2026-11-04-0226-the-hub-checks-every-minute-while-youre-here-and-every-5-when-away.md).
     let beatAt = 0;
+    // A shared person's taps are never the owner's.
     const beat = () => {
+      if (shared) return;
       const away = Boolean(data?.away);
       if (!away && Date.now() - beatAt < 60_000) return;
       beatAt = Date.now();
@@ -182,7 +188,7 @@ window.AppShell = (function () {
       const page = board ? null : AppViews[view.kind];
       const root = document.createElement('div');
       root.className = board ? 'view-board' : page.className;
-      root.innerHTML = board ? BoardView.markup({ title: siteTitle }) : page.markup(view, { siteTitle });
+      root.innerHTML = board ? BoardView.markup({ title: siteTitle, shared }) : page.markup(view, { siteTitle });
       if (current) current.root.replaceWith(root); else scrim.after(root);
       const siteRoot = hub ? '/_hub' : '/' + encodeURIComponent(route);
       let v;
@@ -200,11 +206,7 @@ window.AppShell = (function () {
       if (boards().has(route)) { try { localStorage.setItem(LAST_KEY, route); } catch { /* no storage: `/` opens the start board */ } }
       sidebar.setHere(hub ? new URL(AppRouter.urlOf(view), location.href).pathname.slice(1) : route);
       scrollTo(0, 0);
-      // Every other page of a board has the board's + and its sheet too; the hub's own pages aren't a board's.
-      const plus = !board && boards().has(route);
-      if (plus) root.insertAdjacentHTML('beforeend', BoardNewTask.markup());
       v.mount();
-      if (plus) BoardNewTask.wire(v.B);
       if (modal) showSettings();
     }
 

package/board/public/sidebar.js

@@ -58,6 +58,9 @@
     if (!data) { try { data = JSON.parse(read(DATA_KEY) || 'null'); } catch { data = null; } }
     let device = null;
     let update = null;
+    // While Restart waits for the hub: null | {version} | {version, error}, which replaces the hub's upgrade field in the row.
+    let restart = null;
+    const upgradeShown = () => (restart ? { state: restart.error ? 'updated' : 'restarting', ...restart } : data?.upgrade);
     let updateHTML = '';
     const rail = matchMedia(RAIL);
     const html = document.documentElement;
@@ -70,7 +73,7 @@
       const logo = [...document.querySelectorAll('.top a.hub')].find(pageLogo);
       if (!logo) return;
       const n = othersWaiting(data, here);
-      logo.setAttribute('aria-label', `Boards${update ? ', new version ready' : data?.upgrade ? ', update available' : ''}${n ? `, ${n} waiting on other boards` : ''}`);
+      logo.setAttribute('aria-label', `Boards${update ? ', new version ready' : upgradeShown() ? ', update available' : ''}${n ? `, ${n} waiting on other boards` : ''}`);
     }
     // switching: {opened, started, timer} while switch mode shows, opened when it opened the drawer, started on performance.now().
     let switching = null;
@@ -101,7 +104,7 @@
     }
     // A repaint keeps the drawer's scroll, so a new copy doesn't move the list under a finger.
     function paint() {
-      html.classList.toggle('sb-update', Boolean(update || data?.upgrade));
+      html.classList.toggle('sb-update', Boolean(update || upgradeShown()));
       if (!data) return;
       const scroll = aside.querySelector('.sb-scroll');
       const top = painted ? scroll?.scrollTop : undefined;
@@ -115,7 +118,7 @@
       }
       const fresh = aside.querySelector('.sb-update');
       if (held) fresh.replaceWith(held);
-      const row = updateRow(update, data.upgrade);
+      const row = updateRow(update, upgradeShown());
       if (!held || row !== updateHTML) (held || fresh).innerHTML = row;
       updateHTML = row;
       const list = aside.querySelector('.sb-scroll');
@@ -192,14 +195,50 @@
         if (!refreshApp.disabled && update !== 'reloading') { setUpdate('reloading'); reload(); }
         return;
       }
+      const restartApp = e.target.closest?.('[data-app-restart]');
+      if (restartApp) { if (!restartApp.disabled) restartHub(); return; }
       const upgradeApp = e.target.closest?.('[data-app-upgrade]');
       if (upgradeApp) { if (!upgradeApp.disabled) upgrade(upgradeApp); return; }
       if (e.target.closest?.('[data-new-board]')) { newBoard(); return; }
       const failed = e.target.closest?.('[data-failed-start]');
       if (failed) openFailed(failed.dataset.failedStart);
     });
-    // Upgrade asks the hub to run kickflip update (docs/adr/2026-11-03-1521-the-hub-offers-a-newer-kickflip-from-npm.md). The row
-    // waits (ui.js waitOn) until the hub answers with what it did, then while that update waits or runs (ui-sidebar.js
+    // Restart asks the hub to restart (POST /_hub/restart-hub), then polls until it answers with other code than it ran (its
+    // x-hub-code) and reloads the page (docs/adr/2026-11-05-2200-the-hub-pulls-a-new-version-itself-and-offers-restart.md).
+    // Past RESTART_TRIES polls the row goes back to Restart with how to restart by hand.
+    const RESTART_TRIES = 120;
+    async function restartHub() {
+      if (restart) return;
+      const version = data.upgrade.version;
+      restart = { version };
+      paint();
+      let before, command;
+      try {
+        const response = await fetch('/_hub/restart-hub', { method: 'POST', headers: { accept: 'application/json', 'content-type': 'application/json' }, body: '{}' });
+        const body = await response.json().catch(() => ({}));
+        if (!response.ok) throw new Error(body.error || 'The hub didn’t restart.');
+        before = response.headers.get('x-hub-code');
+        command = body.command;
+      } catch (e) {
+        restart = { version, error: e.message || 'The hub didn’t answer.' };
+        paint();
+        restart = null;
+        return;
+      }
+      for (let i = 0; i < RESTART_TRIES; i++) {
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+        try {
+          const response = await fetch('/_hub/api/hub', { cache: 'no-store', headers: { accept: 'application/json' } });
+          const code = response.headers.get('x-hub-code');
+          if (response.ok && code && code !== before) { reload(); return; }
+        } catch { /* the hub is down while it restarts */ }
+      }
+      restart = { version, error: `The hub hasn’t come back. On the host, run ${command}` };
+      paint();
+      restart = null;
+    }
+    // Update pulls again after a failed pull (docs/adr/2026-11-05-2200-the-hub-pulls-a-new-version-itself-and-offers-restart.md). The row
+    // waits (ui.js waitOn) until the hub answers with what it did, then while that pull runs (ui-sidebar.js
     // updateRow), and a refusal shows as a failed update.
     function upgrade(button) {
       BoardUI.waitOn(button, (async () => {