@lovek4d/kickflip 0.5.0 → 0.6.0

package/board/public/dialogs.js

@@ -2,21 +2,18 @@
 // Load before any page script that asks (docs/adr/2026-11-03-0259-confirmations-are-the-browsers-own.md).
 (function () {
   // linear: Hub's /_hub/api/linear answer, else loadLinear() fetches it once Linear is the source. Linear is picked only
-  // while Hub's key works; tapping it without one opens Hub's key modal over the page, or with keyState the key field
-  // inline (linear-key.js,
+  // while Hub's key works; tapping it without one opens Hub's key modal over the page (linear-key.js,
   // docs/adr/2026-11-02-1712-a-board-picks-linear-only-while-hubs-key-works.md). A New board's "New project…" reads as
   // new_project, which the hub creates on Start; Board Settings creates it with createProject. change(value, valid,
   // {loaded, typing}) follows each change: loaded when only Linear's lists arrived, typing while a text field is being typed in.
   // GitHub issues needs repo(), the board's GitHub owner/name: without one, as on a board whose repo is another git
   // remote, it can't be picked and says why (docs/adr/2026-11-02-1850-a-board-can-work-on-any-git-remote.md).
   // With keyState(), Hub's /_hub/api/settings `linear`, as Board Settings passes it, the source row reads its live state
-  // as a status word, and Linear tapped without a working key opens Hub's key field in keySlot, an element outside any
-  // form, since the key field is a form of its own; keyBusy(on) follows each save of the key
-  // (docs/adr/2026-11-04-0227-every-new-card-gets-a-ticket-in-the-boards-current-source.md).
-  function ticketsControl(root, { value = { source: 'internal', prefix: 'INT' }, repo = () => '', title = () => '', linear = null, loadLinear, isNew = false, change = () => {}, createProject, keyState, keySlot, keyBusy = () => {} } = {}) {
+  // as a status word (docs/adr/2026-11-04-0227-every-new-card-gets-a-ticket-in-the-boards-current-source.md).
+  function ticketsControl(root, { value = { source: 'internal', prefix: 'INT' }, repo = () => '', title = () => '', linear = null, loadLinear, isNew = false, change = () => {}, createProject, keyState } = {}) {
     const { esc } = BoardUI;
     const draft = { prefix: 'INT', ...value };
-    let creating = false, createError = '', destroyed = false, asking = false, noGithub = false, key = null, inline = null;
+    let creating = false, createError = '', destroyed = false, asking = false, noGithub = false, key = null;
     const works = () => Boolean(linear?.set && !linear.refused);
     const keyWorks = () => Boolean(key?.set && !key.refused);
     const keyWord = () => (keyWorks() ? 'linear key saved' : key.refused ? 'Linear refused the key' : 'no Linear key');
@@ -26,31 +23,6 @@
       const on = draft.source === 'linear' && keyWorks();
       return `<div class="tk-status${on ? ' on' : ''}" data-tk-status role="status"><span class="dot" aria-hidden="true"></span><b>${esc(statusWord())}</b></div>`;
     }
-    // Hub's key field in keySlot. Once a key works, Linear is picked.
-    function openInline() {
-      if (!inline) {
-        keySlot.innerHTML = '<p class="tk-ask">Linear needs a key. Paste one here.</p><div class="hub-view"><main></main></div>';
-        inline = LinearKey.mount(keySlot.querySelector('main'), { linear: key, busy: keyBusy,
-          saved: (out) => { key = out.linear; render(); },
-          worked: async () => {
-            closeInline();
-            draft.source = 'linear';
-            await load();
-            if (destroyed) return;
-            pickDefaults();
-            render(); root.querySelector('[data-tk-source="linear"]').focus(); change(read(), valid());
-          } });
-        keySlot.hidden = false;
-      }
-      keySlot.querySelector('#linearKey')?.focus({ preventScroll: true });
-    }
-    function closeInline() {
-      if (!inline) return;
-      inline.destroy();
-      inline = null;
-      keySlot.hidden = true;
-      keySlot.innerHTML = '';
-    }
     async function load() {
       linear = { loading: true };
       render();
@@ -114,13 +86,12 @@
       if (!works()) {
         draft.source = before;
         render();
-        await keyed;
-        if (destroyed) return;
-        if (key) { openInline(); return; }
         asking = true;
         const added = await LinearKey.open();
         asking = false;
         if (destroyed || !added) return;
+        if (keyState) key = await keyState().catch(() => key);
+        if (destroyed) return;
         draft.source = 'linear';
         await load();
         if (destroyed) return;
@@ -149,7 +120,6 @@
       noGithub = button.dataset.tkSource === 'github' && !repo();
       if (noGithub) { render(); root.querySelector('[data-tk-source="github"]').focus(); return; }
       if (button.dataset.tkSource === 'linear') { pickLinear(); return; }
-      closeInline();
       draft.source = button.dataset.tkSource;
       render(); root.querySelector(`[data-tk-source="${draft.source}"]`).focus(); change(read(), valid());
     };
@@ -168,13 +138,13 @@
     root.addEventListener('change', input);
     render();
     if (draft.source === 'linear' && !linear) load().then(() => { if (destroyed) return; pickDefaults(); render(); change(read(), valid(), { loaded: true }); });
-    // Without an answer the row has no status word, and Linear without a key opens Hub's key modal as on New board.
-    const keyed = keyState ? keyState().then((state) => { if (destroyed) return; key = state; render(); }, () => {}) : null;
+    // Without an answer the row has no status word.
+    if (keyState) keyState().then((state) => { if (destroyed) return; key = state; render(); }, () => {});
     return { read, valid, render, nameChanged() {
         const field = root.querySelector('[data-tk="newName"]');
         if (field && draft.newName === undefined) field.value = title();
       },
-      destroy() { destroyed = true; closeInline(); root.removeEventListener('click', click); root.removeEventListener('input', input); root.removeEventListener('change', input); } };
+      destroy() { destroyed = true; root.removeEventListener('click', click); root.removeEventListener('input', input); root.removeEventListener('change', input); } };
   }
   function fitSheet(sheet) {
     const vv = window.visualViewport;

package/board/public/hub-kit.js

@@ -1,4 +1,4 @@
-// What the hub page and settings modals share, each through the view's B
+// What the hub page and settings modals share, Board Settings' duration picker included, each through the view's B
 // (app.js BoardView.page), so unmounting the view stops it all: loading and refreshing the view's data, posting its
 // forms for JSON, and this device's notifications row.
 (function () {
@@ -113,6 +113,8 @@
     const KEPT = 'kickflip.push.endpoint';
     const kept = () => { try { return localStorage.getItem(KEPT); } catch { return null; } };
     const keep = (endpoint) => { try { if (endpoint) localStorage.setItem(KEPT, endpoint); else localStorage.removeItem(KEPT); } catch { /* storage blocked here */ } };
+    // The id the hub gave that subscription, so the Integrations list marks this device's line (view-hub.js).
+    const subscribe = (sub) => post('/_hub/push/subscribe', sub.toJSON()).then(({ id }) => { try { localStorage.setItem('kickflip.push.id', id); } catch { /* storage blocked here */ } });
     const settle = (endpoint = null) => {
       const old = kept();
       if (old && old !== endpoint) post('/_hub/push/unsubscribe', { endpoint: old }).catch(() => {});
@@ -133,7 +135,7 @@
       const sub = await reg?.pushManager.getSubscription();
       settle(sub?.toJSON().endpoint);
       if (sub) {
-        post('/_hub/push/subscribe', sub.toJSON()).catch(() => {});
+        subscribe(sub).catch(() => {});
         show({ title: 'This device', action: { label: 'Test', act: 'test', quiet: true } }, true);
       } else {
         show({ title: 'This device', sub: 'Off · Claude sessions tell you here when something needs you.', action: { label: 'Turn on', act: 'on' } });
@@ -148,7 +150,7 @@
         await navigator.serviceWorker.ready;
         const { key } = await (await fetch('/_hub/push/key')).json();
         const sub = (await reg.pushManager.getSubscription()) || await reg.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: keyBytes(key) });
-        await post('/_hub/push/subscribe', sub.toJSON());
+        await subscribe(sub);
         await render();
         changed();
       } catch (err) { show({ title: 'Could not turn on notifications', sub: String(err?.message || err) }); }
@@ -167,5 +169,65 @@
     return { state: (line) => (state && on ? { ...state, sub: `On · ${line}` } : state), busy: () => busy, ready };
   }
 
-  globalThis.HubKit = { live, forms, device };
+  // datetime-local speaks the device's clock; the picker's hidden field carries its UTC ISO value to the server.
+  const localInput = (d) => {
+    const pad = (n) => String(n).padStart(2, '0');
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+  };
+  function customBounds(input, reset = false) {
+    const now = Date.now();
+    input.min = localInput(new Date(now + 60_000));
+    input.max = localInput(new Date(now + 30 * 86_400_000));
+    if (reset) input.value = input.defaultValue = localInput(new Date(now + 3_600_000));
+  }
+
+  // The one duration picker Snooze, Keep awake, Pause hub and Pause board share (hub/duration.mjs): chips that post
+  // `name` to `action` at once, then Custom, whose date and time posts as `name` too. While its setting is on, `on`
+  // replaces it with when it ends and a button that posts `name`=off.
+  function durationPicker({ id, title, icon, action, name, choices, on, button }) {
+    const { esc } = HubUI;
+    if (on) return `<div class="row dur-on">${icon}<span class="body"><span class="text title">${esc(on.title)}</span><form method="post" action="${action}"><button class="btn quiet" name="${name}" value="off">${button}</button></form></span></div>`;
+    if (!choices) return '';
+    const chips = choices.map((c) => `<button class="btn quiet" name="${name}" value="${esc(c.value)}" aria-label="${esc(`${c.label}, ${c.until}`)}">${esc(c.label)}</button>`).join('');
+    return `<div class="block" role="group" aria-labelledby="${id}Title"><div class="dur-head">${icon}<span class="title" id="${id}Title">${title}</span></div><div class="dur-chips"><form class="dur-choices" method="post" action="${action}">${chips}</form><form class="dur-custom" method="post" action="${action}"><input type="hidden" name="${name}"><span class="btn quiet" aria-hidden="true">Custom</span><input type="datetime-local" data-dur-at required aria-label="Custom ${title.toLowerCase()} until a date and time"></form></div></div>`;
+  }
+
+  // Wires every duration picker under B.root: Custom opens its picker, and closing it submits its form with the time
+  // chosen. → painted(), which a view calls after drawing a picker to set Custom's bounds and suggested time.
+  function durationPickers(B) {
+    let openPicker = null;
+    B.on(B.root, 'click', (e) => {
+      const input = e.target.closest?.('[data-dur-at]');
+      if (!input) return;
+      openPicker = input;
+      customBounds(input, input.value === input.defaultValue);
+      try { input.showPicker(); } catch { /* iOS opens its wheel on the tap itself. */ }
+    });
+    // A chip's pointerdown comes before Custom's focusout; without this reset Custom posts first and the chip's post is dropped.
+    B.on(B.root, 'pointerdown', (e) => {
+      const input = e.target.closest?.('.dur-choices button') && e.target.closest('.dur-chips')?.querySelector('[data-dur-at]');
+      if (!input) return;
+      openPicker = null;
+      input.value = input.defaultValue;
+    });
+    // Closing an opened picker accepts its suggested time; an unchanged field reached by Tab does nothing.
+    const saveCustom = (input) => {
+      if (!input.value || (input !== openPicker && input.value === input.defaultValue) || !input.checkValidity()) return;
+      const at = new Date(input.value);
+      if (Number.isNaN(at.getTime())) return;
+      input.form.querySelector('input[type="hidden"]').value = at.toISOString();
+      input.form.requestSubmit();
+      openPicker = null;
+      input.defaultValue = input.value;
+    };
+    B.on(B.root, 'change', (e) => {
+      if (e.target.matches?.('[data-dur-at]') && document.activeElement !== e.target) saveCustom(e.target);
+    });
+    B.on(B.root, 'focusout', (e) => {
+      if (e.target.matches?.('[data-dur-at]')) saveCustom(e.target);
+    });
+    return { painted: () => { for (const input of B.root.querySelectorAll('[data-dur-at]')) customBounds(input, true); } };
+  }
+
+  globalThis.HubKit = { live, forms, device, durationPicker, durationPickers };
 })();

package/board/public/hub.css

@@ -135,6 +135,8 @@
 .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-paused { border-color: var(--line); background: var(--panel); }
+.hub-view .hold-banner.ub-paused > svg { color: var(--muted); }
 .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); }
 

package/board/public/linear-key.js

@@ -1,44 +1,55 @@
-// Hub's Linear key slot. Hub settings › Linear mounts it, and the Tickets control (dialogs.js) opens it over Board
-// settings or New board when Linear is tapped without a working key
-// (docs/adr/2026-11-02-1712-a-board-picks-linear-only-while-hubs-key-works.md). A key saves on paste, change or Enter through
-// POST /_hub/settings/linear, which checks it with Linear; linear is hub/views.mjs settingsView's `linear`.
+// Hub's token slots: Linear's key and Slack's user token. Hub settings › Linear and › Slack mount them, and the Tickets
+// control (dialogs.js) opens Linear's over Board settings or New board when Linear is tapped without a working key
+// (docs/adr/2026-11-02-1712-a-board-picks-linear-only-while-hubs-key-works.md). A token saves on paste, change or Enter
+// through POST /_hub/settings/<kind>, which checks it with the service; state is hub/views.mjs settingsView's `<kind>`.
 (function () {
   const FAILED = 'Could not save. Is the host awake?';
   const SPIN = '<span class="try-spin" aria-hidden="true"></span>';
-  const works = (linear) => Boolean(linear?.set && !linear.refused);
+  const works = (state) => Boolean(state?.set && !state.refused);
+  const KINDS = {
+    linear: { field: 'key', input: 'linearKey', checking: 'Checking the key with Linear…', first: 'Paste a Linear API key', replace: 'Paste a new key to replace it', label: 'Linear API key',
+      note: 'Stays on the host. Boards use it to list teams and projects, create issues and move the ones that are yours. A board can pick Linear for its tickets only while this key works.',
+      confirm: 'Boards on Linear fall back to internal tickets, and their cards keep the Linear tickets they have. Remove the Linear key?' },
+    slack: { field: 'token', input: 'slackToken', checking: 'Checking the token with Slack…', first: 'Paste a Slack user token', replace: 'Paste a new token to replace it', label: 'Slack user token',
+      note: 'Stays on the host. The hub sends your reviewers their PR links, git_merged reactions and weekday digests as you, in your DMs with them.',
+      confirm: 'Reviewer links, reactions and digests stop until a token is back. Remove the Slack token?' },
+  };
 
-  function slot(linear, { checking, flash }) {
+  function slot(kind, state, { checking, flash }) {
     const { esc, row, tile } = HubUI;
-    const sub = checking ? `<span class="lk-checking">${SPIN}Checking the key with Linear…</span>`
-      : `${linear.down ? `<span class="st down">${esc(linear.down)}</span> · ` : ''}${linear.keys
-        ? esc(linear.sub).replace(esc(linear.keys.label), `<a href="${esc(linear.keys.url)}" target="_blank" rel="noopener">${esc(linear.keys.label)}</a>`)
-        : esc(linear.sub)}`;
-    const remove = linear.set && !checking ? '<button type="button" class="btn quiet danger" data-linear-remove>Remove</button>' : '';
-    const placeholder = checking ? 'Checking…' : linear.set ? 'Paste a new key to replace it' : 'Paste a Linear API key';
-    return `${HubUI.flash(flash)}<div class="group">${row({ icon: tile('key', linear.refused ? 'var(--color-danger)' : 'var(--color-quiet)'), title: esc(linear.title), sub, wrap: !works(linear), trail: remove })}`
-      + `<form class="block lk-form"><input id="linearKey" name="key" type="password" required${checking ? ' disabled' : ''} placeholder="${placeholder}" aria-label="Linear API key" autocomplete="off" autocapitalize="off" spellcheck="false"></form></div>`
-      + '<p class="note">Stays on the host. Boards use it to list teams and projects, create issues and move the ones that are yours. A board can pick Linear for its tickets only while this key works.</p>';
+    const k = KINDS[kind];
+    const sub = checking ? `<span class="lk-checking">${SPIN}${k.checking}</span>`
+      : `${state.down ? `<span class="st down">${esc(state.down)}</span> · ` : ''}${state.keys
+        ? esc(state.sub).replace(esc(state.keys.label), `<a href="${esc(state.keys.url)}" target="_blank" rel="noopener">${esc(state.keys.label)}</a>`)
+        : esc(state.sub)}`;
+    const remove = state.set && !checking ? `<button type="button" class="btn quiet danger" data-${kind}-remove>Remove</button>` : '';
+    const placeholder = checking ? 'Checking…' : state.set ? k.replace : k.first;
+    return `${HubUI.flash(flash)}<div class="group">${row({ icon: tile('key', state.refused ? 'var(--color-danger)' : 'var(--color-quiet)'), title: esc(state.title), sub, wrap: !works(state), trail: remove })}`
+      + `<form class="block lk-form"><input id="${k.input}" name="${k.field}" type="password" required${checking ? ' disabled' : ''} placeholder="${placeholder}" aria-label="${k.label}" autocomplete="off" autocapitalize="off" spellcheck="false"></form></div>`
+      + `<p class="note">${k.note}</p>`;
   }
 
-  // Draws the slot into root and saves from it. busy(true) starts each save and busy(false) ends it; saved(out) gets
-  // each answer, /_hub/api/settings's JSON, before the slot repaints; worked() follows a saved key Linear accepted.
-  // → {busy(), settled(): a promise that resolves once no save is out, linear(), set(linear) unless busy, destroy()}
-  function mount(root, { linear, saved = () => {}, worked = () => {}, busy = () => {} }) {
-    let current = linear, flash = null, checking = false, pending = null, destroyed = false;
+  // Draws kind's slot into root and saves from it. busy(true) starts each save and busy(false) ends it; saved(out) gets
+  // each answer, /_hub/api/settings's JSON, before the slot repaints; worked() follows a saved token the service accepted.
+  // → {busy(), settled(): a promise that resolves once no save is out, state(), set(state) unless busy, destroy()}
+  function mount(root, { kind = 'linear', state, saved = () => {}, worked = () => {}, busy = () => {} }) {
+    const k = KINDS[kind];
+    const input = `#${k.input}`;
+    let current = state, flash = null, checking = false, pending = null, destroyed = false;
     const paint = () => {
-      const typed = root.querySelector('#linearKey')?.value || '';
-      root.innerHTML = slot(current, { checking, flash });
-      if (!checking) root.querySelector('#linearKey').value = typed;
+      const typed = root.querySelector(input)?.value || '';
+      root.innerHTML = slot(kind, current, { checking, flash });
+      if (!checking) root.querySelector(input).value = typed;
     };
     function post(body) {
-      checking = body.has('key');
+      checking = body.has(k.field);
       flash = null;
       pending = (async () => {
         try {
-          const r = await fetch('/_hub/settings/linear', { method: 'POST', headers: { accept: 'application/json', 'content-type': 'application/x-www-form-urlencoded' }, body });
+          const r = await fetch(`/_hub/settings/${kind}`, { method: 'POST', headers: { accept: 'application/json', 'content-type': 'application/x-www-form-urlencoded' }, body });
           const out = await r.json().catch(() => null);
           if (destroyed) return;
-          if (r.ok && out) { current = out.linear; saved(out); } else flash = { text: out?.error || FAILED, error: true };
+          if (r.ok && out) { current = out[kind]; saved(out); } else flash = { text: out?.error || FAILED, error: true };
         } catch { flash = { text: FAILED, error: true }; }
         const key = checking;
         checking = false;
@@ -52,23 +63,23 @@
       paint();
       return pending;
     }
-    const save = (value) => { if (!pending && value.trim()) post(new URLSearchParams({ key: value.trim() })); };
+    const save = (value) => { if (!pending && value.trim()) post(new URLSearchParams({ [k.field]: value.trim() })); };
     const onPaste = (e) => {
       const text = e.clipboardData?.getData('text');
-      if (!e.target.matches?.('#linearKey') || !text) return;
+      if (!e.target.matches?.(input) || !text) return;
       e.preventDefault();
       e.target.value = text.trim();
       save(e.target.value);
     };
-    const onChange = (e) => { if (e.target.matches?.('#linearKey')) save(e.target.value); };
+    const onChange = (e) => { if (e.target.matches?.(input)) save(e.target.value); };
     const onSubmit = (e) => {
       if (!e.target.matches?.('.lk-form')) return;
       e.preventDefault();
-      save(e.target.querySelector('#linearKey').value);
+      save(e.target.querySelector(input).value);
     };
     const onClick = async (e) => {
-      if (!e.target.closest?.('[data-linear-remove]') || pending) return;
-      if (await BoardDialogs.confirm('Boards on Linear fall back to internal tickets, and their cards keep the Linear tickets they have. Remove the Linear key?') && !destroyed) post(new URLSearchParams({ remove: '1' }));
+      if (!e.target.closest?.(`[data-${kind}-remove]`) || pending) return;
+      if (await BoardDialogs.confirm(k.confirm) && !destroyed) post(new URLSearchParams({ remove: '1' }));
     };
     const listeners = [['paste', onPaste], ['change', onChange], ['submit', onSubmit], ['click', onClick]];
     for (const [type, fn] of listeners) root.addEventListener(type, fn);
@@ -76,7 +87,7 @@
     return {
       busy: () => Boolean(pending),
       settled: () => pending || Promise.resolve(),
-      linear: () => current,
+      state: () => current,
       set(next) { if (!pending) { current = next; paint(); } },
       destroy() { destroyed = true; for (const [type, fn] of listeners) root.removeEventListener(type, fn); },
     };
@@ -115,7 +126,7 @@
       dialog.close();
       wrap.remove();
       if (previous?.isConnected) previous.focus({ preventScroll: true });
-      resolve(works(key?.linear()));
+      resolve(works(key?.state()));
     }
     function close() {
       if (!key?.busy()) { finish(); return; }
@@ -134,7 +145,7 @@
     wrap.querySelector('#linearKeyTitle').focus({ preventScroll: true });
     fetch('/_hub/api/settings', { cache: 'no-store', headers: { accept: 'application/json' } }).then((r) => (r.ok ? r.json() : Promise.reject())).then((out) => {
       if (finished) return;
-      key = mount(content, { linear: out.linear, worked: finish, busy: (on) => doneBusy(wrap.querySelectorAll('[data-lk-done]'), on) });
+      key = mount(content, { state: out.linear, worked: finish, busy: (on) => doneBusy(wrap.querySelectorAll('[data-lk-done]'), on) });
     }).catch(() => { if (!finished) content.innerHTML = '<p class="note">Offline. Is the host awake?</p>'; });
     return result;
   }

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,30 @@ 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('Implement', 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 View person looks only (shell.js marks the page shared-view without shared-full, and style.css hides the +), so
+    // n twice opens nothing.
+    const html = document.documentElement.classList;
+    if (html.contains('shared-view') && !html.contains('shared-full')) 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 Implement (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); });
@@ -69,7 +66,7 @@ globalThis.BoardNewTask = (function () {
       if (ev.defaultPrevented) { lastN = -Infinity; return; }
       if (ev.key !== 'n' || ev.metaKey || ev.ctrlKey || ev.altKey || ev.repeat || ev.isComposing) return;
       const field = ev.target.closest && ev.target.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"])');
-      if (field || document.querySelector('dialog[open]') || B.root.classList.contains('offline')) { lastN = -Infinity; return; }
+      if (field || document.querySelector('dialog[open]') || B.root.classList.contains('down')) { lastN = -Infinity; return; }
       if (ev.timeStamp - lastN > TWICE_MS) { lastN = ev.timeStamp; return; }
       lastN = -Infinity;
       ev.preventDefault();
@@ -80,36 +77,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; Implement 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/progress-review.html

@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<title>Progress bars</title>
+<link rel="stylesheet" href="colors.css">
+<link rel="stylesheet" href="style.css">
+<style>
+  /* The progress-bar review (progress-review.js): the board's lanes, each card one bar or status line drawn by the real
+     renderers, its colour the lane's --lane, which the lane's colour pick sets; the open card's editor beneath. */
+  .pr-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
+  @media (max-width: 799px) { .pr-lanes { grid-template-columns: minmax(0, 1fr); } }
+  .pr-lane > h2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; font-size: 13px; color: var(--lane); border-bottom: 2px solid var(--lane); padding-bottom: 4px; }
+  .pr-lane input[type="color"] { width: 32px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; }
+  .pr-lane .sub.agent:not(.waiting-gray, .quiet) { color: var(--lane); }
+  .pr-lane .phase-bars:not(.dim) { --bar-fill: var(--lane); }
+  .pr-lane .item[data-open] > summary { outline: 2px solid var(--accent); outline-offset: -2px; }
+  .pr-lane .card-time .sb-steps .phase-bars { gap: 2px; }
+  .pr-editor { margin-top: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 12px; }
+  .pr-editor h2 { margin: 0 0 8px; font-size: 15px; }
+  .pr-editor label { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
+  .pr-editor :where(input, select) { font-size: 16px; }
+  .pr-editor ol { margin: 8px 0 0; padding: 0; list-style: none; }
+  .pr-editor li { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
+  .pr-editor li.over { outline: 2px dashed var(--accent); }
+  .pr-editor .grip { cursor: grab; color: var(--muted); }
+  .pr-send { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
+</style>
+</head>
+<body>
+<!--header {"lead":"back","title":"Progress bars","backHref":"./","controls":false}-->
+<main>
+  <p class="muted">Every progress bar and status line the board draws, in the lane it shows in. Tap one to rename it, move it to another lane or rename and reorder its steps; pick each lane's colour; then Send.</p>
+  <div id="review"></div>
+</main>
+<script src="ui.js"></script>
+<script src="ui-links.js"></script>
+<script src="ui-enums.js"></script>
+<script src="ui-progress-bar.js"></script>
+<script src="ui-cards.js"></script>
+<script src="ui-sidebar.js"></script>
+<script src="claude.js"></script>
+<script src="progress-review.js"></script>
+</body>
+</html>