@lovek4d/kickflip 0.5.0 → 0.6.0

package/board/public/view-settings.js

@@ -1,31 +1,54 @@
 // Board Settings, a modal the app shell (shell.js) mounts over its board for /<route>/settings.html.
-// Saving reviewers sends a `reviewers` event {add: [name], remove: [name]}; the server removes names itself and the list
-// redraws from its answer, while Claude finds each new person's Slack and GitHub accounts, adds them with board.mjs
-// reviewers, and replies. Tickets save on each change, and Done, ✕,
+// Saving reviewers sends a `reviewers` event {add: [{name, slack_user, github}], remove: [name]}; the server writes both
+// itself and the list redraws from its answer. Add picks a Slack member and a GitHub login from lists the server fetches
+// (GET api/reviewer-people), or a typed login, and stays off until both are chosen. Tickets save on each change, and Done, ✕,
 // Escape and the backdrop wait for that save to land before closing. An unsaved edit marks [data-dirty], and the shell
-// asks before closing the modal then.
+// asks before closing the modal then. Sharing (docs/adr/2026-11-05-2215-a-board-is-shared-view-only-with-a-tailscale-login.md)
+// lists the hub's GET /_hub/share/<route>, who it's shared with, each View or Full, and who was just refused, and saves
+// each Add, level and ✕ at once through POST api/share.
 (globalThis.AppViews ||= {}).settings = {
   className: 'view-settings',
   title: () => 'Board Settings',
   markup: (view, { siteTitle = '' } = {}) => `<dialog class="settings-modal" id="boardSettingsModal" aria-labelledby="boardSettingsTitle"><div class="settings-head"><div><h2 id="boardSettingsTitle" tabindex="-1">Board settings</h2><p class="muted small">${BoardUI.esc(siteTitle)}</p></div><button type="button" class="ghost" data-settings-dismiss aria-label="Close board settings">✕</button></div>
 <div class="set settings-body">
+  <h2>Pause board</h2>
+  <div class="hub-view"><div class="group" id="pauseBoard"><p class="muted small block">Loading…</p></div></div>
+  <p class="muted small">Running steps finish. No new builders, planners or pulls start on this board until then, as when usage reaches the pause line.</p>
+  <p class="muted small" id="pauseBoardStatus" role="status"></p>
   <h2>Repo</h2>
   <button type="button" class="who repo-row" id="boardRepo" aria-haspopup="dialog" disabled><span id="boardRepoValue">Loading…</span><span class="muted small" id="boardRepoChange">Change ›</span></button>
   <p class="muted small" id="boardRepoStatus"></p>
+  <label class="who" for="buildTarget"><span><span>Build target</span>
+    <span class="muted small sub" id="buildTargetSub">The hub runs <code>.kickflip/build</code> from each card’s branch and from main. Claude wrote it when it set up this board; if builds break, file a card.</span></span>
+    <select id="buildTarget" disabled><option value="">Default</option></select></label>
+  <p class="muted small" id="buildTargetStatus" role="status"></p>
   <h2>Tickets</h2>
   <p class="muted small">Every card on this board has a ticket from here. A new card gets a new ticket unless you name one.</p>
   <form id="ticketsForm" class="tk-section"><div id="boardTickets">Loading…</div></form>
-  <div class="tk-inline" id="ticketsKey" hidden></div>
   <p class="muted small" id="ticketsStatus" role="status"></p>
+  <div id="landingSection" hidden>
+  <h2>Landing</h2>
+  <p class="muted small" id="landingSub"></p>
+  <div class="tk-seg landing-seg" id="landing" role="group" aria-label="Landing">
+    <button type="button" data-landing="draft" aria-pressed="false" disabled><span>Draft PR</span><span class="small sub">Opens a draft; you mark it ready.</span></button>
+    <button type="button" data-landing="ready" aria-pressed="false" disabled><span>Ready PR</span><span class="small sub">Opens ready for review once CI passes.</span></button>
+    <button type="button" data-landing="merge" aria-pressed="false" disabled><span>Merge</span><span class="small sub">No PR; lands on the base branch.</span></button>
+  </div>
+  <p class="muted small" id="landingStatus" role="status"></p>
+  </div>
   <h2>Auto</h2>
   <label class="who" for="autoPull"><span><span>Auto implement Todo cards</span>
-    <span class="muted small sub">Claude starts a Todo card as soon as it’s ready and nothing blocks or holds it, while an implementer slot is free.</span></span>
+    <span class="muted small sub">Claude grills each card that lands in Todo, and starts a Todo card as soon as it’s ready and nothing blocks or holds it, while an implementer slot is free.</span></span>
     <input type="checkbox" class="toggle" id="autoPull" disabled></label>
   <p class="muted small" id="autoPullStatus" role="status"></p>
   <label class="who" for="maxImplementers"><span><span>Maximum parallel implementers</span>
-    <span class="muted small sub">Cards building or waiting in Orchestrator review count. Grills and cards waiting on you don’t.</span></span>
+    <span class="muted small sub">Each agent that builds or runs tests counts, a card’s helpers included. Grills, read-only helpers and cards waiting in Orchestrator review or on you don’t.</span></span>
     <input type="number" class="count" id="maxImplementers" min="1" max="99" step="1" inputmode="numeric" disabled></label>
   <p class="muted small" id="maxImplementersStatus" role="status"></p>
+  <label class="who" for="maxPlanners"><span><span>Maximum parallel planners</span>
+    <span class="muted small sub">Grills and prototypes running at once. A card that lands in Todo past it waits its turn.</span></span>
+    <input type="number" class="count" id="maxPlanners" min="1" max="99" step="1" inputmode="numeric" disabled></label>
+  <p class="muted small" id="maxPlannersStatus" role="status"></p>
   <label class="who" for="autoBuild"><span><span>Auto serve</span>
     <span class="muted small sub" id="autoBuildSub">${BoardUI.esc(BoardUI.tryWords('web').autoSub)}</span></span>
     <input type="checkbox" class="toggle" id="autoBuild" disabled></label>
@@ -34,19 +57,10 @@
     <span class="muted small sub">Claude reviews teammates’ PRs that touch this board’s work. May use a lot of usage.</span></span>
     <input type="checkbox" class="toggle" id="autoReview" disabled></label>
   <p class="muted small" id="autoReviewStatus" role="status"></p>
-  <div id="prsRow" hidden><label class="who" for="prs"><span><span>PRs</span>
-    <span class="muted small sub">Each card opens a PR. Off, no PR opens: each card lands on main and main is pushed.</span></span>
-    <input type="checkbox" class="toggle" id="prs" disabled></label>
-  <p class="muted small" id="prsStatus" role="status"></p></div>
   <label class="who" for="autoMerge"><span><span>Auto-merge</span>
-    <span class="muted small sub" id="autoMergeSub">Claude merges a PR once it is approved, green and merges cleanly.</span></span>
+    <span class="muted small sub">Claude merges a PR once it is approved, green and merges cleanly, and lands a build waiting to merge into the base branch.</span></span>
     <input type="checkbox" class="toggle" id="autoMerge" disabled></label>
   <p class="muted small" id="autoMergeStatus" role="status"></p>
-  <div id="skipDraftRow" hidden><label class="who" for="skipDraft"><span><span>Skip the draft</span>
-    <span class="muted small sub">A builder’s PR opens as a draft and is marked ready for review once CI passes, so it goes to reviewers without waiting for you.</span></span>
-    <input type="checkbox" class="toggle" id="skipDraft" disabled></label>
-  <p class="muted small">With Auto-merge on too, a builder’s PR can merge once reviewers approve it, without you seeing it.</p>
-  <p class="muted small" id="skipDraftStatus" role="status"></p></div>
   <label class="who" for="autoTriage"><span><span>Triage overnight</span>
     <span class="muted small sub">Once a night, when two or more cards wait on your answers, Claude merges their overlapping questions and duplicate cards, and tidies Todo.</span></span>
     <input type="checkbox" class="toggle" id="autoTriage" disabled></label>
@@ -55,20 +69,27 @@
     <span class="muted small sub">Pushes once when the board has been idle for 15 minutes, with what closed since the last one.</span></span>
     <input type="checkbox" class="toggle" id="idleNotification" disabled></label>
   <p class="muted small" id="idleNotificationStatus" role="status"></p>
-  <p class="muted small">The hub runs <code>.kickflip/build</code> from each card’s branch and from main. Claude wrote it when it set up this board; if builds break, file a card.</p>
   <h2>Permissions</h2>
   <div id="permissions"><p class="muted small">Loading…</p></div>
   <div id="reviewersSection" hidden>
   <h2>Reviewers</h2>
   <p class="muted small">Everyone here gets each PR link on this board once it's ready, and the weekday digest. Someone you add also gets the links of PRs already in review.</p>
   <div id="list"><p class="muted small">Loading…</p></div>
-  <form class="add" id="addForm">
-    <input id="addName" placeholder="Add someone by name" autocomplete="off">
-    <button type="submit">Add</button>
+  <form class="add pick" id="addForm">
+    <div class="pick-col"><input id="slackFilter" placeholder="Slack member" autocomplete="off"><div id="slackPeople" class="pick-list"><p class="muted small">Loading…</p></div></div>
+    <div class="pick-col"><input id="githubFilter" placeholder="GitHub login" autocomplete="off"><div id="githubPeople" class="pick-list"><p class="muted small">Loading…</p></div></div>
+    <button type="submit" id="addBtn" disabled>Add</button>
   </form>
+  <p class="muted small" id="pickStatus" role="status"></p>
   <div class="row" style="margin-top:12px"><span class="muted small" id="saveStatus"></span><button class="primary" id="save" disabled>Save</button></div>
-  <div class="replies" id="replies"></div>
   </div>
+  <h2>Sharing</h2>
+  <p class="muted small">View, or Full: everything but Merge and Board settings. Nothing else on the host opens for them.</p>
+  <div id="shareList"><p class="muted small">Loading…</p></div>
+  <div id="shareRefused"></div>
+  <form class="add" id="shareAdd"><input id="shareLogin" placeholder="Add by login, like name@github" autocomplete="off" autocapitalize="off" spellcheck="false"><button type="submit">Add</button></form>
+  <div class="share-reach"><p class="muted small">They also need the host shared to them in Tailscale (<a href="https://login.tailscale.com/admin/machines" target="_blank" rel="noopener">Tailscale’s Machines page ${BoardUI.LINK_ARROW}</a>). Then send them this link.</p><button type="button" id="shareCopy">Copy link</button></div>
+  <p class="muted small" id="shareStatus" role="status"></p>
   <h2>Rules</h2>
   <p class="muted small">Standing instructions for this board's Claude session. It sees them each time it wakes, and says what changes when you save.</p>
   <div id="rules"><p class="muted small">Loading…</p></div>
@@ -93,8 +114,31 @@
 
   create: (root, siteRoot, ctx) => BoardView.page(root, siteRoot, (B) => {
     const { $, site } = B;
-    const { esc, fetchJSON, restartNotice } = BoardUI;
-    const get = (url, onWait) => fetchJSON(url, { onWait, sleep: B.sleep });
+    const { esc, fetchJSON, restartNotice, pageCopy, copyNote, downLanding } = BoardUI;
+    // While the board can't be reached, each part reads its last answer here and the whole body turns read only under
+    // the copy line, reopening live once the board answers; a part with no copy waits out a restart, then the body shows
+    // the landing (docs/adr/2026-11-06-0135-a-board-out-of-reach-keeps-its-copy-or-shows-a-landing.md).
+    const settingsBody = $('.settings-body');
+    let readOnly = false;
+    function fromCopy(savedAt) {
+      if (readOnly) return;
+      readOnly = true;
+      settingsBody.inert = true;
+      settingsBody.insertAdjacentHTML('afterbegin', copyNote('Settings', savedAt));
+      B.every(5000, () => { fetchJSON(site.url('api/settings'), { limit: 0 }).then(() => { if (B.alive()) ctx.reload(); }, () => {}); });
+    }
+    function down(e) {
+      if (readOnly || root.classList.contains('down')) return;
+      root.classList.add('down');
+      settingsBody.insertAdjacentHTML('afterbegin', downLanding(e.down));
+    }
+    const saved = (url, r) => { if (r.ok) pageCopy.save(url, r.body); return r; };
+    async function get(url, onWait) {
+      try { return saved(url, await fetchJSON(url, { limit: 0, sleep: B.sleep })); } catch {}
+      const c = await pageCopy.read(url);
+      if (c) { fromCopy(c.savedAt); return { ok: true, status: 200, body: c.body }; }
+      try { return saved(url, await fetchJSON(url, { onWait, sleep: B.sleep })); } catch (e) { down(e); throw e; }
+    }
     const waitIn = (sel) => () => { $(sel).innerHTML = restartNotice(); };
     const modal = $('#boardSettingsModal');
     const previous = document.activeElement;
@@ -186,15 +230,25 @@
     const repoURL = `/_hub/board-repo/${encodeURIComponent(B.route)}`;
     let repo = {}, closeRepo = () => {};
     let tickets, savedTickets, savingTickets = null, ticketsTouched = false;
-    // PRs shows on a board on GitHub that builds from its shared clone; a local board never opens PRs. Skip the draft and
-    // Reviewers show only while cards open PRs, and Auto-merge says what it merges
-    // (docs/adr/2026-11-04-1913-a-board-can-skip-the-draft.md, docs/adr/2026-11-04-2100-a-land-waits-for-your-merge.md).
-    let prsSetting = true;
-    const opensPRs = () => Boolean(repo.github) && !repo.local && prsSetting;
+    // Landing shows on a board on GitHub that builds from its shared clone and on the hub board, which builds from its
+    // folder, starts on Merge and opens PRs on Draft PR or Ready PR; any other local board never opens PRs. Its choice is
+    // the board's prs and skip_draft settings read together: Draft PR, prs on and skip_draft off; Ready PR, both on;
+    // Merge, prs off. Reviewers show only while cards open PRs
+    // (docs/adr/2026-11-05-0200-landing-is-one-choice-draft-pr-ready-pr-or-merge.md).
+    const LANDING = {
+      draft: { set: { prs: true, skip_draft: false }, sub: 'Each card opens a draft PR and waits for you to mark it ready for review.', saved: 'Saved. Each card opens a draft PR.' },
+      ready: { set: { prs: true, skip_draft: true }, sub: 'Each card opens a PR ready for review, without waiting for you.', saved: 'Saved. Each card opens a PR ready for review.' },
+      merge: { set: { prs: false }, sub: 'No PR opens: each card lands on the base branch and the base branch is pushed.', saved: 'Saved. Each card lands on the base branch with no PR, and the base branch is pushed.' },
+    };
+    let landing = 'draft';
+    const landingButtons = () => Object.keys(LANDING).map((value) => $(`[data-landing="${value}"]`));
+    const landingOf = (settings) => (settings?.prs === false ? 'merge' : settings?.skip_draft === true ? 'ready' : 'draft');
+    const opensPRs = () => Boolean(repo.github) && (!repo.local || Boolean(repo.hub)) && landing !== 'merge';
     const syncPRs = () => {
-      $('#prsRow').hidden = !repo.github || Boolean(repo.local);
-      $('#skipDraftRow').hidden = $('#reviewersSection').hidden = !opensPRs();
-      $('#autoMergeSub').textContent = opensPRs() ? 'Claude merges a PR once it is approved, green and merges cleanly.' : 'Lands each verified card on main without waiting for your Merge.';
+      $('#landingSection').hidden = !repo.github || (Boolean(repo.local) && !repo.hub);
+      $('#reviewersSection').hidden = !opensPRs();
+      $('#landingSub').textContent = LANDING[landing].sub;
+      for (const button of landingButtons()) button.setAttribute('aria-pressed', String(button === $(`[data-landing="${landing}"]`)));
     };
     const showRepo = () => {
       $('#boardRepoValue').textContent = repo.github || repo.remote ? `${repo.github || repo.remote} · ${repo.branch || 'Branch not recorded'}` : 'No GitHub repo';
@@ -218,6 +272,7 @@
         tickets?.render();
         if (tickets) syncTickets();
         showRepo();
+        loadBuildTargets();
         $('#boardRepoStatus').textContent = 'Saved. The board’s session has been told.';
       } });
     });
@@ -276,11 +331,12 @@
     B.on(ticketsForm, 'submit', (e) => { e.preventDefault(); saveTickets(); });
     let buildKind = 'web';
     let current = [];
-    const add = new Set();
+    let githubOf = {};
+    const add = new Map();
     const remove = new Set();
     function render() {
-      const rows = [...current.map((n) => ({ n, cls: remove.has(n) ? 'gone' : '' })), ...[...add].map((n) => ({ n, cls: 'new' }))];
-      $('#list').innerHTML = rows.length ? rows.map(({ n, cls }) => `<div class="who ${cls}"><span>${esc(n)}${cls === 'new' ? ' <span class="muted small">new</span>' : ''}</span>
+      const rows = [...current.map((n) => ({ n, cls: remove.has(n) ? 'gone' : '', github: githubOf[n] })), ...[...add.values()].map((a) => ({ n: a.name, cls: 'new', github: a.github }))];
+      $('#list').innerHTML = rows.length ? rows.map(({ n, cls, github }) => `<div class="who ${cls}"><span>${esc(n)}${cls === 'new' ? ' <span class="muted small">new</span>' : ''}${github ? `<span class="muted small sub">github: ${esc(github)}</span>` : ''}</span>
         <button class="ghost" data-name="${esc(n)}" aria-label="${cls === 'gone' ? 'Keep' : 'Remove'} ${esc(n)}">${cls === 'gone' ? 'Undo' : '✕'}</button></div>`).join('') : '<p class="muted small">No reviewers yet.</p>';
       $('#save').disabled = !add.size && !remove.size;
       if (add.size || remove.size) $('#list').setAttribute('data-dirty', '');
@@ -292,6 +348,7 @@
       buildKind = d.kind || 'web';
       $('#autoBuildSub').textContent = BoardUI.tryWords(buildKind).autoSub;
       current = d.reviewers || [];
+      githubOf = d.reviewerGithub || {};
       render();
     }).catch(() => { if (B.alive()) $('#list').innerHTML = '<p class="muted">Offline. Is the host awake?</p>'; });
 
@@ -304,39 +361,103 @@
       else remove.add(n);
       render();
     });
+
+    // The pickers: tap a Slack member and a GitHub login (or type one), then Add stages them for Save.
+    let people = { slack: [], github: [] };
+    const picked = { slack: null, github: '' };
+    const fits = (text, filter) => text.toLowerCase().includes(filter.trim().toLowerCase());
+    function renderPick() {
+      const slackFilter = $('#slackFilter').value, githubFilter = $('#githubFilter').value.trim();
+      const taken = new Set([...current, ...add.keys()].map((n) => n.toLowerCase()));
+      const slack = (people.slack || []).filter((p) => fits(p.name, slackFilter) && !taken.has(p.name.toLowerCase()));
+      $('#slackPeople').innerHTML = people.slack ? slack.map((p) => `<button type="button" class="ghost" data-slack="${esc(p.id)}" data-name="${esc(p.name)}" aria-pressed="${picked.slack?.id === p.id}">${esc(p.name)}</button>`).join('') || '<p class="muted small">No one matches.</p>'
+        : `<p class="muted small">${esc(people.slackProblem || 'Slack members are not available.')} <a href="/_hub/settings">Hub settings</a></p>`;
+      const logins = people.github.filter((l) => fits(l, githubFilter));
+      const typed = githubFilter && !people.github.some((l) => l.toLowerCase() === githubFilter.toLowerCase()) ? [githubFilter] : [];
+      $('#githubPeople').innerHTML = [...typed, ...logins].map((l) => `<button type="button" class="ghost" data-github="${esc(l)}" aria-pressed="${picked.github === l}">${typed.includes(l) ? `Use ${esc(l)}` : esc(l)}</button>`).join('')
+        + (people.githubProblem ? `<p class="muted small">${esc(people.githubProblem)}</p>` : '');
+      $('#addBtn').disabled = !picked.slack || !picked.github;
+    }
+    get(site.url('api/reviewer-people'), waitIn('#slackPeople')).then(({ body }) => { if (!B.alive()) return; people = { github: [], ...body }; renderPick(); })
+      .catch(() => { if (B.alive()) $('#slackPeople').innerHTML = '<p class="muted small">Offline. Is the host awake?</p>'; });
+    B.on($('#slackFilter'), 'input', renderPick);
+    B.on($('#githubFilter'), 'input', renderPick);
+    B.on($('#slackPeople'), 'click', (ev) => {
+      const b = ev.target.closest('button[data-slack]');
+      if (b) { picked.slack = { id: b.dataset.slack, name: b.dataset.name }; renderPick(); }
+    });
+    B.on($('#githubPeople'), 'click', (ev) => {
+      const b = ev.target.closest('button[data-github]');
+      if (b) { picked.github = b.dataset.github; renderPick(); }
+    });
     B.on($('#addForm'), 'submit', (ev) => {
       ev.preventDefault();
-      const input = $('#addName');
-      const n = input.value.trim();
-      if (n && !current.some((c) => c.toLowerCase() === n.toLowerCase())) add.add(n);
-      input.value = '';
+      if (!picked.slack || !picked.github) return;
+      add.set(picked.slack.name, { name: picked.slack.name, slack_user: picked.slack.id, github: picked.github });
+      picked.slack = null; picked.github = '';
+      $('#slackFilter').value = ''; $('#githubFilter').value = '';
+      renderPick();
       render();
     });
     B.on($('#save'), 'click', async () => {
       const status = $('#saveStatus');
       try {
-        const out = await BoardUI.waitOn($('#save'), site.send('reviewers', { add: [...add], remove: [...remove] }));
-        status.textContent = add.size ? 'Sent. Claude updates the list and replies below.' : 'Saved';
+        const out = await BoardUI.waitOn($('#save'), site.send('reviewers', { add: [...add.values()], remove: [...remove] }));
+        status.textContent = 'Saved';
         current = out.board.reviewers;
-        add.clear(); remove.clear(); render();
+        githubOf = out.board.reviewerGithub || {};
+        add.clear(); remove.clear(); render(); renderPick();
       } catch (e) { status.textContent = e?.reason || 'Could not send. Is the host awake?'; }
     });
-    B.watch((events) => {
-      $('#replies').innerHTML = events.map((e) => `<div class="reply">${e.reply ? (e.reply.html ?? '') : '<span class="muted small">Waiting for Claude…</span>'}</div>`).join('');
-    }, { kind: 'reviewers' });
 
     // The toggle saves at once through POST api/settings, which writes board.json itself, so it takes effect with no
     // session awake (docs/adr/2026-10-29-1752-auto-merge-is-a-board-setting-off-by-default.md).
     const autoMerge = $('#autoMerge');
     const autoMergeStatus = $('#autoMergeStatus');
-    let savedMax = '';
+    const savedCaps = {};
+    let buildTarget = null, buildTargets = null;
+    // Pause board (docs/adr/2026-11-05-1849-pause-board-and-pause-hub-pause-new-work-by-hand.md): the hub's duration
+    // picker (hub-kit.js) with the Hold sheet's chips, Forever included, posting {pause} to api/pause at once. A Forever
+    // pause lasts until Resume.
+    const pauseBox = $('#pauseBoard');
+    const pickers = HubKit.durationPickers(B);
+    let pauseChoices = [];
+    const pausedWords = (end, now) => (end === 'forever' ? 'until you resume' : `until ${BoardUI.heldUntilWords(end, now)}`);
+    function paintPause(pausedUntil) {
+      const now = new Date();
+      const choices = pauseChoices.map((c) => ({ value: c.value, label: c.label, until: pausedWords(c.ms === null ? 'forever' : new Date(now.getTime() + c.ms), now) }));
+      pauseBox.innerHTML = HubKit.durationPicker({ id: 'pauseBoard', title: 'Pause board', icon: '', action: site.url('api/pause'), name: 'pause', button: 'Resume',
+        choices: pausedUntil ? null : choices, on: pausedUntil ? { title: `Paused ${pausedWords(pausedUntil === 'forever' ? 'forever' : new Date(pausedUntil), now)}` } : null });
+      pickers.painted();
+    }
+    B.on(pauseBox, 'submit', async (e) => {
+      e.preventDefault();
+      const form = e.target;
+      const pause = e.submitter?.value ?? form.querySelector('input[type="hidden"]')?.value;
+      const status = $('#pauseBoardStatus');
+      try {
+        const out = await BoardUI.waitOn(e.submitter || form.querySelector('input:not([type="hidden"])'), (async () => {
+          const r = await fetch(site.url('api/pause'), { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ pause }) });
+          const body = await r.json().catch(() => ({}));
+          if (!r.ok) throw new Error(body.error);
+          return body;
+        })(), { group: pauseBox.querySelectorAll('button') });
+        if (!B.alive()) return;
+        paintPause(out.paused_until);
+        status.textContent = out.paused_until ? 'Paused. New work on this board waits.' : 'Resumed. New work starts again.';
+        ctx.sidebarChanged?.();
+      } catch (error) {
+        if (B.alive()) status.textContent = error.message || 'Could not save. Is the host awake?';
+      }
+    });
     get(site.url('api/settings'), waitIn('#autoMergeStatus')).then(({ body: d }) => {
+      pauseChoices = d.pause_choices || [];
+      paintPause(d.paused_until);
       if (!B.alive()) return;
       savedTickets = d.settings?.tickets || null;
       tickets = BoardDialogs.ticketsControl($('#boardTickets'), { value: savedTickets || { source: 'internal', prefix: 'INT' }, repo: () => repo.github || '', title: () => ctx.siteTitle || '',
         loadLinear: async () => (await get('/_hub/api/linear')).body,
-        keyState: async () => (await get('/_hub/api/settings')).body.linear, keySlot: $('#ticketsKey'),
-        keyBusy: (on) => LinearKey.doneBusy(modal.querySelectorAll('[data-settings-dismiss]'), on),
+        keyState: async () => (await get('/_hub/api/settings')).body.linear,
         change(_value, _valid, { loaded, typing } = {}) {
           if (!loaded) ticketsTouched = true;
           if (typing) syncTickets(); else saveTickets();
@@ -351,34 +472,36 @@
       autoMerge.disabled = false;
       $('#autoBuild').checked = d.settings?.auto_build === true;
       $('#autoBuild').disabled = false;
+      buildTarget = d.settings?.build_target || '';
+      showBuildTargets();
       $('#autoPull').checked = d.settings?.auto_pull === true;
       $('#autoPull').disabled = false;
-      $('#maxImplementers').value = savedMax = String(d.settings?.max_implementers);
-      $('#maxImplementers').disabled = false;
+      for (const [id, key] of [['maxImplementers', 'max_implementers'], ['maxPlanners', 'max_planners']]) {
+        $(`#${id}`).value = savedCaps[key] = String(d.settings?.[key]);
+        $(`#${id}`).disabled = false;
+      }
       $('#autoTriage').checked = d.settings?.auto_triage === true;
       $('#autoTriage').disabled = false;
       $('#autoReview').checked = d.settings?.auto_review === true;
       $('#autoReview').disabled = false;
       $('#idleNotification').checked = d.settings?.idle_notification === true;
       $('#idleNotification').disabled = false;
-      $('#skipDraft').checked = d.settings?.skip_draft === true;
-      $('#skipDraft').disabled = false;
-      $('#prs').checked = prsSetting = d.settings?.prs !== false;
-      $('#prs').disabled = false;
+      landing = landingOf(d.settings);
+      for (const button of landingButtons()) button.disabled = false;
       syncPRs();
     }).catch(() => { autoMergeStatus.textContent = ticketsStatus.textContent = 'Offline. Is the host awake?'; });
     // An Auto toggle keeps its face, disabled with a spinner beside it (ui.js waitOn), while POST api/settings saves it.
     // → the saved settings
-    const saveToggle = (toggle, body) => BoardUI.waitOn(toggle, (async () => {
+    const saveToggle = (toggle, body, wait) => BoardUI.waitOn(toggle, (async () => {
       const r = await fetch(site.url('api/settings'), { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body) });
       const out = await r.json().catch(() => ({}));
       if (!r.ok) throw new Error(out.error);
       return out.settings;
-    })());
+    })(), wait);
     B.on(autoMerge, 'change', async () => {
       const want = autoMerge.checked;
       const ask = opensPRs() ? 'Turn on auto-merge? Claude merges each approved PR on this board once CI is green and it merges cleanly, without asking you.'
-        : 'Turn on auto-merge? Each verified card lands on main without asking you.';
+        : 'Turn on auto-merge? Each verified card lands on the base branch without asking you.';
       if (want && !(await BoardDialogs.confirm(ask))) {
         autoMerge.checked = false;
         return;
@@ -387,13 +510,50 @@
       try {
         autoMerge.checked = (await saveToggle(autoMerge, { auto_merge: want })).auto_merge === true;
         autoMergeStatus.textContent = opensPRs() ? (autoMerge.checked ? 'Saved. Claude merges approved, green PRs itself.' : 'Saved. Approved, green PRs wait for your Merge.')
-          : autoMerge.checked ? 'Saved. Each verified card lands on main by itself.' : 'Saved. Each verified card waits for your Merge.';
+          : autoMerge.checked ? 'Saved. Each verified card lands on the base branch by itself.' : 'Saved. Each verified card waits for your Merge.';
       } catch (e) {
         autoMerge.checked = !want;
         autoMergeStatus.textContent = e.message || 'Could not save. Is the host awake?';
       }
     });
 
+    // Build target lists the repo's .kickflip/build-* scripts at main's tip and saves a pick at once, null for the
+    // default .kickflip/build (docs/adr/2026-11-05-1823-board-settings-picks-which-build-script-a-board-runs.md).
+    // A saved target the tip no longer has stays listed, marked, so the picker shows what the hub runs.
+    const buildScriptOf = (target) => (target ? `.kickflip/build-${target}` : '.kickflip/build');
+    const buildTargetSub = (target) => `The hub runs <code>${esc(buildScriptOf(target))}</code> from each card’s branch and from main. Claude wrote it when it set up this board; if builds break, file a card.`;
+    const showBuildTargets = () => {
+      if (buildTarget === null || buildTargets === null) return;
+      const select = $('#buildTarget');
+      const names = buildTargets.includes(buildTarget) || !buildTarget ? buildTargets : [...buildTargets, buildTarget];
+      select.innerHTML = [['', 'Default'], ...names.map((t) => [t, buildTargets.includes(t) ? t : `${t} (not on main)`])]
+        .map(([value, label]) => `<option value="${esc(value)}"${value && value === buildTarget ? ' selected' : ''}>${esc(label)}</option>`).join('');
+      select.value = buildTarget;
+      select.disabled = false;
+      $('#buildTargetSub').innerHTML = buildTargetSub(buildTarget);
+    };
+    // A new repo brings its own scripts, so a repo save lists them again.
+    const loadBuildTargets = () => get(site.url('api/build-targets')).then(({ body }) => {
+      if (!B.alive()) return;
+      buildTargets = body.targets;
+      showBuildTargets();
+    }).catch(() => { $('#buildTargetStatus').textContent = 'Could not list the repo’s build scripts. Is the host awake?'; });
+    loadBuildTargets();
+    B.on($('#buildTarget'), 'change', async () => {
+      const select = $('#buildTarget');
+      try {
+        const settings = await saveToggle(select, { build_target: select.value || null });
+        if (!B.alive()) return;
+        buildTarget = settings.build_target || '';
+        showBuildTargets();
+        $('#buildTargetStatus').textContent = `Saved. The hub runs ${buildScriptOf(buildTarget)} for each card and main.`;
+      } catch (e) {
+        if (!B.alive()) return;
+        select.value = buildTarget;
+        $('#buildTargetStatus').textContent = e.message || 'Could not save. Is the host awake?';
+      }
+    });
+
     B.on($('#autoBuild'), 'change', async () => {
       const toggle = $('#autoBuild');
       const want = toggle.checked;
@@ -427,41 +587,109 @@
         $(`#${id}Status`).textContent = e.message || 'Could not save. Is the host awake?';
       }
     });
-    autoToggle('autoPull', 'auto_pull', (on) => (on ? 'Saved. Claude starts ready Todo cards while an implementer slot is free.' : 'Saved. Todo cards wait for you.'));
+    autoToggle('autoPull', 'auto_pull', (on) => (on ? 'Saved. Claude grills each card that lands in Todo and starts ready ones while an implementer slot is free.' : 'Saved. Todo cards wait for you.'));
 
-    // docs/adr/2026-11-04-0057-auto-implement-fills-in-progress-up-to-a-cap.md: Maximum parallel implementers saves on
+    // docs/adr/2026-11-04-0057-auto-implement-fills-in-progress-up-to-a-cap.md: Maximum parallel implementers, and
+    // Maximum parallel planners (docs/adr/2026-11-04-2359-every-card-arriving-in-todo-is-grilled-by-the-board.md), save on
     // change, waiting on the server like a toggle; a number outside 1 to 99 or a refusal puts the saved one back.
-    B.on($('#maxImplementers'), 'change', async () => {
-      const input = $('#maxImplementers');
-      const status = $('#maxImplementersStatus');
+    const capInput = (id, key, saidOf) => B.on($(`#${id}`), 'change', async () => {
+      const input = $(`#${id}`);
+      const status = $(`#${id}Status`);
       const want = /^\d+$/.test(input.value) ? Number(input.value) : 0;
-      if (want < 1 || want > 99) { input.value = savedMax; status.textContent = 'Pick a whole number from 1 to 99.'; return; }
+      if (want < 1 || want > 99) { input.value = savedCaps[key]; status.textContent = 'Pick a whole number from 1 to 99.'; return; }
       try {
-        const settings = await saveToggle(input, { max_implementers: want });
+        const settings = await saveToggle(input, { [key]: want });
         if (!B.alive()) return;
-        input.value = savedMax = String(settings.max_implementers);
-        status.textContent = `Saved. Up to ${settings.max_implementers === 1 ? '1 card builds or waits' : `${settings.max_implementers} cards build or wait`} in Orchestrator review at once.`;
+        input.value = savedCaps[key] = String(settings[key]);
+        status.textContent = saidOf(settings[key]);
       } catch (e) {
         if (!B.alive()) return;
-        input.value = savedMax;
+        input.value = savedCaps[key];
         status.textContent = e.message || 'Could not save. Is the host awake?';
       }
     });
+    capInput('maxImplementers', 'max_implementers', (n) => `Saved. Up to ${n === 1 ? '1 agent builds' : `${n} agents build`} at once.`);
+    capInput('maxPlanners', 'max_planners', (n) => `Saved. Up to ${n === 1 ? '1 grill or prototype runs' : `${n} grills or prototypes run`} at once.`);
     autoToggle('autoReview', 'auto_review', (on) => (on ? 'Saved. When idle, Claude reviews incoming PRs that touch this board’s work.' : 'Saved. Claude leaves incoming PRs alone.'));
     autoToggle('idleNotification', 'idle_notification', (on) => (on ? 'Saved. One push once the board has been idle for 15 minutes.' : 'Saved. No push when the board goes idle.'));
     autoToggle('autoTriage', 'auto_triage', (on) => (on ? 'Saved. Once a night, when cards wait on your answers, Claude triages them.' : 'Saved. Questions and Todo are left as they are.'));
-    autoToggle('skipDraft', 'skip_draft', (on) => (on ? 'Saved. A builder’s draft PR is marked ready for review once CI passes.' : 'Saved. A builder’s draft PR waits for your review.'));
-    // PRs off needs Push main after a land, which the server checks; its refusal shows in the status line.
-    autoToggle('prs', 'prs', (on) => {
-      prsSetting = on;
+    // A Landing tap saves at once with no confirmation, its choice's settings in one POST. Merge needs Push main after a
+    // land, which the server checks; its refusal shows in the status line and the saved choice stays pressed.
+    for (const want of Object.keys(LANDING)) B.on($(`[data-landing="${want}"]`), 'click', async () => {
+      const button = $(`[data-landing="${want}"]`);
+      if (want === landing) return;
+      try {
+        const settings = await saveToggle(button, LANDING[want].set, { group: landingButtons() });
+        if (!B.alive()) return;
+        landing = landingOf(settings);
+        $('#landingStatus').textContent = LANDING[landing].saved;
+      } catch (err) {
+        if (!B.alive()) return;
+        $('#landingStatus').textContent = err.message || 'Could not save. Is the host awake?';
+      }
       syncPRs();
-      return on ? 'Saved. Each card opens a PR.' : 'Saved. Each card lands on main with no PR, and main is pushed.';
     });
 
     // Each switch writes or removes one allow rule in the board folder's .claude/settings.local.json through POST
     // api/permissions (docs/adr/2026-11-03-1921-board-settings-grant-a-boards-session-permissions.md); the hub lets only
     // the owner reach the board (docs/adr/2026-11-04-2156-the-whole-hub-answers-only-the-owner.md). A tap waits on the server with the
     // switch as it was and a spinner beside it, then draws the server's answer.
+    // Sharing: each row is the person's name, then their login and when; a login Tailscale sent no name with is its own.
+    // A person's row also sets them View or Full with one tap, saying what that level can do
+    // (docs/adr/2026-11-05-1912-a-shared-person-is-view-or-full.md).
+    let sharing = null;
+    const CAN = { view: 'Looks only. Visit links open.', full: 'Answers, taps card buttons and adds New tasks. Merge and Board settings stay yours.' };
+    const shareRow = (title, sub, button, more = '') => `<div class="who"><span>${esc(title)}<span class="muted small sub">${sub}</span>${more}</span>${button}</div>`;
+    const shareLevel = (p) => `<span role="group" class="share-level" aria-label="${esc(p.name || p.login)}’s access">${[['view', 'View'], ['full', 'Full']].map(([level, label]) =>
+      `<button type="button" data-share-level="${level}" data-login="${esc(p.login)}" aria-pressed="${p.level === level}">${label}</button>`).join('')}</span><span class="muted small sub">${CAN[p.level]}</span>`;
+    const shareWhen = (p) => (p.now ? '<span class="share-now">viewing now</span>' : esc(p.at ? BoardUI.since(p.at) : 'not seen yet'));
+    const shareSub = (p, when) => (p.name ? `${esc(p.login)} · ${when}` : when);
+    function drawSharing() {
+      $('#shareList').innerHTML = sharing.people.length ? sharing.people.map((p) => shareRow(p.name || p.login, shareSub(p, shareWhen(p)),
+        `<button type="button" class="ghost" data-share-remove="${esc(p.login)}" aria-label="Remove ${esc(p.name || p.login)}">✕</button>`, shareLevel(p))).join('') : '<p class="muted small">Nobody yet.</p>';
+      $('#shareRefused').innerHTML = sharing.refused.length ? `<p class="muted small">Just refused. Tap to share with them:</p>${sharing.refused.map((r) => shareRow(r.name || r.login, shareSub(r, esc(BoardUI.since(r.at))),
+        `<button type="button" data-share-add="${esc(r.login)}">Add</button>`)).join('')}` : '';
+    }
+    const loadSharing = () => get(`/_hub/share/${encodeURIComponent(route)}`).then(({ ok, body }) => {
+      if (!B.alive()) return;
+      if (!ok) { $('#shareList').innerHTML = `<p class="muted small">${esc(body.error || 'Could not load sharing.')}</p>`; return; }
+      sharing = body;
+      drawSharing();
+    }).catch(() => { if (B.alive()) $('#shareList').innerHTML = '<p class="muted">Offline. Is the host awake?</p>'; });
+    async function saveShare(change) {
+      $('#shareStatus').textContent = '';
+      try {
+        const r = await fetch(site.url('api/share'), { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(change) });
+        const out = await r.json().catch(() => ({}));
+        if (!r.ok) throw new Error(out.error);
+        await loadSharing();
+        return true;
+      } catch (error) {
+        if (B.alive()) $('#shareStatus').textContent = error.message || 'Could not save. Is the host awake?';
+        return false;
+      }
+    }
+    loadSharing();
+    B.on($('#shareList'), 'click', (e) => {
+      const b = e.target.closest?.('[data-share-remove]');
+      if (b) { saveShare({ remove: b.dataset.shareRemove }); return; }
+      const level = e.target.closest?.('[data-share-level]');
+      if (level) saveShare({ login: level.dataset.login, level: level.dataset.shareLevel });
+    });
+    B.on($('#shareRefused'), 'click', (e) => { const b = e.target.closest?.('[data-share-add]'); if (b) saveShare({ add: b.dataset.shareAdd }); });
+    B.on($('#shareAdd'), 'submit', async (e) => {
+      e.preventDefault?.();
+      const input = $('#shareLogin');
+      const login = input.value.trim();
+      if (!login) { $('#shareStatus').textContent = 'Type a login first, like name@github.'; return; }
+      if (await saveShare({ add: login }) && B.alive()) input.value = '';
+    });
+    B.on($('#shareCopy'), 'click', async () => {
+      const link = sharing?.link || new URL(`/${encodeURIComponent(route)}/`, location.href).href;
+      try { await navigator.clipboard.writeText(link); $('#shareStatus').textContent = `Copied ${link}`; }
+      catch { $('#shareStatus').textContent = link; }
+    });
+
     const permissions = $('#permissions');
     const REFUSED = {
       denied: (command) => `Auto mode still refused this once: ${command}. Approve it under /permissions, Recently blocked.`,
@@ -475,6 +703,12 @@
     const drawPermissions = (d) => {
       permissions.innerHTML = d.permissions.map(permRow).join('');
     };
+    // A switch whose saved face no answer has drawn in BoardUI's PENDING_LATE_MS: the switches load once and rest.
+    function stillWaiting() {
+      if (!B.alive()) return;
+      B.toast('Still waiting on the board');
+      get(site.url('api/permissions')).then(({ ok, body }) => { if (ok && B.alive()) drawPermissions(body); }, () => {});
+    }
     get(site.url('api/permissions'), waitIn('#permissions')).then(({ ok, body }) => {
       if (!B.alive()) return;
       if (!ok) { permissions.innerHTML = `<p class="muted small">${esc(body.error || 'Could not load permissions.')}</p>`; return; }
@@ -486,14 +720,17 @@
       const id = toggle.dataset.perm;
       const on = toggle.checked;
       toggle.checked = !on;
-      try {
-        const r = await BoardUI.waitOn(toggle, fetch(site.url('api/permissions'), { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ id, on }) }));
+      // The switch spins until the answer is drawn, so it never shows its old face in between
+      // (docs/adr/2026-11-05-0200-a-tap-spins-until-the-board-shows-its-change.md).
+      const saving = (async () => {
+        const r = await fetch(site.url('api/permissions'), { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ id, on }) });
         const out = await r.json().catch(() => ({}));
         if (!r.ok) throw new Error(out.error);
         if (!B.alive()) return;
         drawPermissions(out);
         $(`#perm-${id}Status`).textContent = on ? 'Saved. The session runs it without asking.' : 'Saved. The session asks first again.';
-      } catch (error) {
+      })();
+      try { await BoardUI.waitOn(toggle, BoardUI.pending.within(saving, stillWaiting)); } catch (error) {
         if (B.alive()) $(`#perm-${id}Status`).textContent = error.message || 'Could not save. Is the host awake?';
       }
     });