@lovek4d/kickflip 0.6.0 → 0.7.0

package/board/public/ui.js

@@ -60,9 +60,10 @@
   // A composer's send buttons: the one with nth 0 presses on ⌘↵ and the one with nth 1, where there is one, on ⌥↵,
   // wherever each sits in the row (Ctrl+↵ and
   // Alt+↵ off a Mac), each with its key as a small gray hint that style.css shows only where there is a keyboard and room.
+  // tone is its class: primary for the nth 0 one unless given, as resolves on the Send or Reply that clears Action needed.
   const MAC = /Mac|iPhone|iPad/.test(globalThis.navigator?.platform || globalThis.navigator?.userAgent || '');
   const SEND_KEYS = MAC ? ['⌘↵', '⌥↵'] : ['Ctrl+↵', 'Alt+↵'];
-  const sendButton = (label, nth, attrs = '') => `<button type="submit"${nth === 0 ? ' class="primary"' : ''} data-nth="${nth}"${attrs}>${esc(label)}<span class="key-hint" aria-hidden="true">${SEND_KEYS[nth]}</span></button>`;
+  const sendButton = (label, nth, attrs = '', tone = nth === 0 ? 'primary' : '') => `<button type="submit"${tone ? ` class="${tone}"` : ''} data-nth="${nth}"${attrs}>${esc(label)}<span class="key-hint" aria-hidden="true">${SEND_KEYS[nth]}</span></button>`;
   // The send button an Enter keydown in form's box presses, or null.
   const keyedSend = (ev, form) => {
     if (ev.key !== 'Enter' || ev.isComposing) return null;
@@ -102,6 +103,8 @@
     'ask-link': mini('<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>'),
     move: mini('<path d="M3 7h14"/><path d="m13 3 4 4-4 4"/><path d="M21 17H7"/><path d="m11 13-4 4 4 4"/>'),
     'Implementation requested': mini('<path d="m8 6-6 6 6 6"/><path d="m16 6 6 6-6 6"/>'),
+    'Marked as staging': mini('<path d="m12 2 10 5-10 5L2 7z"/><path d="m2 12 10 5 10-5"/><path d="m2 17 10 5 10-5"/>'),
+    'Marked as ready': mini('<path d="M4 22V4"/><path d="M4 4h13l-2 4 2 4H4"/>'),
     Held: mini('<path d="M9 5v14"/><path d="M15 5v14"/>'),
     Resumed: mini('<path d="M7 4v16l13-8z"/>'),
     'Related to': LINK, 'Unrelated from': LINK, 'Follow-up': LINK, 'Follow-up of': LINK,
@@ -121,8 +124,8 @@
   // Deletes or edits a pending ask or thread message; app-asks.js handles [data-withdraw] and [data-edit] on one path.
   const withdrawButton = (id) => `<button class="ghost icon" data-withdraw="${esc(id)}" aria-label="Delete" title="Delete">${TRASH}</button>`;
   const editButton = (id) => `<button class="ghost icon" data-edit="${esc(id)}" aria-label="Edit" title="Edit">${PENCIL}</button>`;
-  // A waiting ask's bump, which app-asks.js sends as ask-bump {id}, filled orange once bumped and disabled on the latest
-  // bump. A work card's is the same icon: app-cards.js sends card-bump {key} with no confirm, and on a bumped card, where
+  // A waiting ask's bump, which app-asks.js sends as ask-bump {id}, filled orange and disabled once
+  // bumped. A work card's is the same icon: app-cards.js sends card-bump {key} with no confirm, and on a bumped card, where
   // it is filled orange, card-unbump {key} (docs/adr/2026-10-29-1639-a-card-that-hasnt-started-can-be-bumped.md,
   // docs/adr/2026-11-03-0301-build-on-a-blocked-card-queues-it.md).
   const bumpButton = (it, top) => `<button class="ghost icon${it.bumpedAt ? ' bumped' : ''}" data-bump="${esc(it.id)}" aria-label="Bump to top" title="Bump to top"${top ? ' disabled' : ''}>${BUMP}</button>`;
@@ -379,7 +382,7 @@
     removed: { line: 'This board is gone', hint: 'The hub no longer lists it.', retries: false },
     access: { line: 'You no longer have access', hint: 'Ask its owner to share it again.', retries: false },
     erroring: { line: 'Board restarting', hint: 'It answers with errors. Retrying for 30 seconds.' },
-    unreachable: { line: 'Board offline', hint: 'The hub, your connection or the Mac is down. Retrying.' },
+    unreachable: { line: 'Board offline', hint: 'The hub, your connection or the host is down. Retrying.' },
   };
   const RESTART_WHY = { code: 'Its code changed.', starting: 'It’s starting.', crashed: 'It stopped, and the hub is starting it again.' };
   function downOf(answer, online = navigator.onLine !== false) {

package/board/public/view-hub.js

@@ -184,7 +184,9 @@ ${integrationsHtml(d.integrations)}${sitesHtml(d.groups, restarting)}${d.remembe
         answer(out, action) {
           if (['/_hub/settings/codex', '/_hub/settings/claude-model', '/_hub/settings/pause-at', '/_hub/settings/keep-going'].includes(action)) {
             last = out; flash = null; paint();
-            if (action.endsWith('/keep-going')) B.toast(out.pause.state === 'going' ? `Keep going: work runs past the buffer until ${BoardUI.usageClock(out.pause.resets_at)}.` : 'Stopped: new work waits again.');
+            if (action.endsWith('/keep-going')) B.toast(out.pause.state === 'going' ? `Keep going: work runs past the buffer until ${BoardUI.usageClock(out.pause.resets_at)}.`
+              : out.pause.near?.going ? `Keep going: agents start in parallel until ${BoardUI.usageClock(out.pause.near.resets_at)}.`
+              : out.pause.near ? 'Stopped: agents start one at a time again.' : 'Stopped: new work waits again.');
           } else if (action === '/_hub/push/flush') { flash = { text: out.message, error: !out.ok }; load(); } else { flash = null; load(); settings.B.refreshSettings?.(); }
           ctx.sidebarChanged?.();
         },

package/board/public/view-notes.js

@@ -4,7 +4,7 @@
 (globalThis.AppViews ||= {}).notes = {
   className: 'view-notes',
   title: () => 'Notes',
-  markup: ({ item, wave }) => `${BoardUI.header({ lead: 'back', title: 'Notes', titleId: 'ref', backHref: wave ? './' : `./#item=${encodeURIComponent(item || '')}`, controls: false })}
+  markup: ({ item, wave }) => `${BoardUI.header({ lead: 'back', title: 'Notes', titleId: 'ref', backHref: wave ? './' : `./#selectedCard=${encodeURIComponent(item || '')}`, controls: false })}
 <main>
   <article class="plan" id="plan"><p class="muted">Loading the notes…</p></article>
 </main>`,

package/board/public/view-questions.js

@@ -11,7 +11,7 @@
 // The question then reads prototype requested, locked, until its prototype round arrives, and once the request is
 // recorded the page moves on as a Send does (docs/adr/2026-11-03-1803-a-question-asked-for-a-prototype-is-resolved.md,
 // docs/adr/2026-11-04-2130-a-prototype-request-waits-for-its-prototype.md).
-// A question the owner has sent an answer to is resolved: read-only, green, with a Resolved badge. One that resolves
+// A question the owner has sent an answer to is resolved: read-only, with a Resolved badge. One that resolves
 // while its topic shows stays in place until you leave that topic, by a pill, a link or the move on after the last
 // Send; a topic's sent questions otherwise fold under "resolved (N)", which names only the count, above its open ones. A sent question's badge, once confirmed, sends `question-reopen {key?, question}`, and the question
 // opens again with its last pick and note for a new Send. Each question is numbered by its place on its card
@@ -85,7 +85,7 @@
       return `<div class="topics" role="group" aria-label="Topics">${list.map((t) => pillHtml(t)).join('')}</div>`;
     }
     // An arrival (arrive) slides in with a glow and settles (style.css .arrived).
-    const pillHtml = (t, arrived = false) => `<button class="${arrived ? 'arrived ' : ''}${t.progress ? 'progress' : ''}" data-topic="${esc(t.id)}" aria-pressed="${t.id === topicId}" title="${esc(t.title)}">${esc(topicName(t))}<span class="n">${t.state === 'resolved' ? 'resolved' : t.open}</span></button>`;
+    const pillHtml = (t, arrived = false) => `<button class="${arrived ? 'arrived ' : ''}${t.progress ? 'progress' : ''}" data-topic="${esc(t.id)}" aria-pressed="${t.id === topicId}" title="${esc(t.title)}"><span class="name">${esc(topicName(t))}</span><span class="n">${t.state === 'resolved' ? 'resolved' : t.open}</span></button>`;
     const topicHead = (t) => t ? `<div class="topichead muted small"><span>${esc(t.title)}${t.summary ? ` · ${esc(t.summary)}` : ''}</span>${roundChip(t.round)}</div>` : '';
 
     // Only open questions changed here since their last answer, with files attached, reopened with a pick, or with a
@@ -150,10 +150,12 @@
       updateBar();
     }
 
+    // A toast names a topic by its card's ref, the title up to its colon; an ask by its time.
+    const toastName = (t) => (t.askedAt ? topicName(t) : String(t.title).match(/^(\S+):/)?.[1] || t.title);
     // The topic a tap on this page acts for, the pills before it and its name, which moveOn reads once it is recorded.
     function leaving() {
       const from = soloId ? topicOf(soloId)?.id : topicId;
-      return { from, pills: topicRow(topics, from).pills, name: topicName(topics.find((t) => t.id === from) || { title: '' }) };
+      return { from, pills: topicRow(topics, from).pills, name: toastName(topics.find((t) => t.id === from) || { title: '' }) };
     }
     // After a recorded tap: a load that started before it went out would read its question as still open.
     // `footer` is a line or, for a Send, a function of the reloaded board giving the whole line.
@@ -364,6 +366,14 @@
       scroll(0);
     }
 
+    let lastTap = { id: null, at: 0 };
+    // item:<key> is a card, wave:<slug> a band. Embedded, the board is beside the pane; alone, it is the page before this one.
+    function openOnBoard(id) {
+      if (ctx.embedded) return ctx.openOnBoard(id);
+      if (!id.startsWith('item:')) return;
+      const href = new URL(`./#item=${encodeURIComponent(id.slice(5))}`, location.href).href;
+      if (!AppShell.open(href)) location.assign(href);
+    }
     B.on(root, 'click', (ev) => {
       if (ev.target.id === 'showAll') { soloId = null; sentLine = ''; shown = ''; render(); return; }
       const eye = ev.target.closest && ev.target.closest('[data-proto]');
@@ -372,9 +382,14 @@
       if (reopenBadge) { if (!reopenBadge.disabled) reopen(byId(reopenBadge.dataset.reopen), reopenBadge); return; }
       const b = ev.target.closest && ev.target.closest('[data-topic]');
       if (b) {
+        // Two taps on one pill within 300ms open its card on the board; a touch screen sends no dblclick.
+        const now = Date.now();
+        if (lastTap.id === b.dataset.topic && now - lastTap.at < 300) { lastTap = { id: null, at: 0 }; openOnBoard(b.dataset.topic); return; }
+        lastTap = { id: b.dataset.topic, at: now };
         soloId = null; setTopic(b.dataset.topic); sentLine = ''; shown = '';
         const first = topics.find((t) => t.id === topicId)?.questions[0];
         if (first) setHash(first);
+        ctx.onTopic?.(topicId);
         render(); scroll(0);
       }
     });
@@ -441,6 +456,7 @@
       if (!loaded) return false;
       const topic = topics.find((t) => t.id === id);
       if (topic) { soloId = null; setTopic(topic.id); } else pick(id || '');
+      ctx.onTopic?.(topicId);
       sentLine = '';
       shown = '';
       render();

package/board/public/view-settings.js

@@ -1,7 +1,7 @@
 // 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, 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, ✕,
+// itself and the list redraws from its answer. Add searches the Slack members the server fetches (GET api/reviewer-people), then
+// takes a GitHub login guessed from the name or typed, and stays off until a member and a login are there. 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. 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
@@ -76,9 +76,9 @@
   <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 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>
+    <input id="slackFilter" placeholder="Search Slack members" autocomplete="off">
+    <div id="slackPeople" class="pick-list"><p class="muted small">Loading…</p></div>
+    <div class="login-row" id="loginRow" hidden><input id="githubFilter" placeholder="GitHub login" autocomplete="off" autocapitalize="off" spellcheck="false"><button type="submit" id="addBtn" disabled>Add</button></div>
   </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>
@@ -362,40 +362,72 @@
       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: '' };
+    // The picker: search the Slack members and tap one, then the GitHub login field holds a guess from the name (or what
+    // the person types), and Add stages them for Save. people is null while loading, 'failed' once the list can't be read.
+    let people = null;
+    const picked = { slack: null };
     const fits = (text, filter) => text.toLowerCase().includes(filter.trim().toLowerCase());
+    const squash = (text) => text.toLowerCase().replace(/[^a-z0-9]/g, '');
+    // The collaborator whose login is a plain spelling of the name: first+last, first, last, or first initial + last.
+    function guessLogin(name, logins) {
+      const words = name.toLowerCase().split(/\s+/).map(squash).filter(Boolean);
+      if (!words.length) return '';
+      const first = words[0], last = words.at(-1);
+      const spellings = [first + last, first, last, first[0] + last];
+      for (const spelling of spellings) {
+        const hit = logins.find((l) => squash(l) === spelling);
+        if (hit) return hit;
+      }
+      return '';
+    }
+    const problem = (text) => `<p class="muted small problem">${esc(text)} <button type="button" class="ghost" data-retry>Retry</button></p>`;
     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;
+      const list = $('#slackPeople');
+      $('#slackFilter').hidden = Boolean(picked.slack);
+      $('#loginRow').hidden = !picked.slack;
+      if (picked.slack) {
+        list.innerHTML = `<span class="chip">${esc(picked.slack.name)} <button type="button" class="ghost" data-unpick aria-label="Choose someone else">✕</button></span>`;
+        $('#pickStatus').textContent = people?.githubProblem ? `${people.githubProblem} Type their login.` : '';
+      } else if (people === 'failed') list.innerHTML = problem("Couldn't load the list.");
+      else if (!people) list.innerHTML = '<p class="muted small">Loading…</p>';
+      else if (!people.slack) list.innerHTML = `<p class="muted small">${esc(people.slackProblem || 'Slack members are not available.')} <a href="/_hub/settings">Hub settings</a></p>`;
+      else list.innerHTML = people.slack.filter((p) => fits(p.name, $('#slackFilter').value) && !taken.has(p.name.toLowerCase()))
+        .map((p) => `<button type="button" class="ghost" data-slack="${esc(p.id)}" data-name="${esc(p.name)}">${esc(p.name)}</button>`).join('') || '<p class="muted small">No one matches.</p>';
+      $('#addBtn').disabled = !picked.slack || !$('#githubFilter').value.trim();
+    }
+    function loadPeople() {
+      people = null;
+      renderPick();
+      // The wait says "Board restarting…" only when the hub marked a restart; any other wait leaves Loading… until the
+      // list arrives or the retries give out.
+      const wait = (ms, down) => { if (down?.state === 'restarting') $('#slackPeople').innerHTML = restartNotice(); };
+      get(site.url('api/reviewer-people'), wait).then(({ ok, body }) => { if (!B.alive()) return; people = ok ? { github: [], ...body } : 'failed'; renderPick(); })
+        .catch(() => { if (B.alive()) { people = 'failed'; renderPick(); } });
     }
-    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>'; });
+    loadPeople();
     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(); }
+      const b = ev.target.closest('button');
+      if (!b) return;
+      if (b.dataset.retry !== undefined) { loadPeople(); return; }
+      if (b.dataset.unpick !== undefined) { picked.slack = null; $('#githubFilter').value = ''; renderPick(); return; }
+      if (!b.dataset.slack) return;
+      picked.slack = { id: b.dataset.slack, name: b.dataset.name };
+      $('#githubFilter').value = guessLogin(picked.slack.name, people.github);
+      renderPick();
+      $('#pickStatus').textContent = $('#githubFilter').value ? 'Guessed from their name. Change it if it is wrong.' : $('#pickStatus').textContent;
+      $('#githubFilter').focus?.();
     });
     B.on($('#addForm'), 'submit', (ev) => {
       ev.preventDefault();
-      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 = '';
+      const github = $('#githubFilter').value.trim();
+      if (!picked.slack || !github) return;
+      add.set(picked.slack.name, { name: picked.slack.name, slack_user: picked.slack.id, github });
+      picked.slack = null;
       $('#slackFilter').value = ''; $('#githubFilter').value = '';
+      $('#pickStatus').textContent = '';
       renderPick();
       render();
     });