@lovek4d/kickflip 0.6.0 → 0.7.0

package/board/onboarding.mjs

@@ -8,4 +8,4 @@ What this card does:
 - Ask the owner what the project is for and which words they use for its parts; their wording goes in verbatim.
 - If the repo already has a CONTEXT.md or ADRs, extend them rather than start again.
 `,b=[{id:"onboard-build",title:"Prepare .kickflip/build",notes:p,needsNoBuild:!0},{id:"onboard-context",title:"Write the repo's CONTEXT.md glossary and first ADR",notes:u}];function T(e,i){try{return c("git",["-C",e,"ls-tree",`${i}:.kickflip`],{encoding:"utf8",stdio:["ignore","pipe","ignore"],timeout:3e3}).split(`
-`).some(r=>/^100755 blob \S+\tbuild(-.+)?$/.test(r))}catch{return!1}}o(T,"hasBuildScript");function y(e,{prefix:i="INT",hasBuild:s,now:r=new Date}){return b.filter(t=>!(t.needsNoBuild&&s)).map((t,a)=>{const n=`${t.id}-notes.md`;return l.writeFileSync(d.join(d.dirname(e),n),t.notes),{id:t.id,title:t.title,created:new Date(r.getTime()+a).toISOString(),state:"grilling",ticket:`${i}-${a+1}`,plan:n}})}o(y,"onboardingItems");export{T as hasBuildScript,y as onboardingItems};
+`).some(r=>/^100755 blob \S+\tbuild(-.+)?$/.test(r))}catch{return!1}}o(T,"hasBuildScript");function y(e,{prefix:i="INT",hasBuild:s,now:r=new Date}){return b.filter(t=>!(t.needsNoBuild&&s)).map((t,a)=>{const n=`${t.id}-notes.md`;return l.writeFileSync(d.join(d.dirname(e),n),t.notes),{id:t.id,title:t.title,created:new Date(r.getTime()+a).toISOString(),phase:"grilling",ticket:`${i}-${a+1}`,plan:n}})}o(y,"onboardingItems");export{T as hasBuildScript,y as onboardingItems};

package/board/prototype-page.mjs

@@ -1 +1 @@
-var u=Object.defineProperty;var r=(t,e)=>u(t,"name",{value:e,configurable:!0});import o from"node:fs/promises";import c from"node:path";import{fileURLToPath as f}from"node:url";import{takeFile as d}from"./store.mjs";const g=c.join(c.dirname(f(import.meta.url)),"public","prototype.html"),k=r(t=>String(t).replace(/[&<>"']/g,e=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[e]),"esc"),$=r(t=>`${Math.floor(t.mtimeMs).toString(36)}-${t.size.toString(36)}`,"versionOf"),p=r(t=>JSON.stringify(t).replace(/</g,"\\u003c").replace(/\u2028/g,"\\u2028").replace(/\u2029/g,"\\u2029"),"scriptJSON");async function O(t,e){const n=e.served?e.takes:await Promise.all(e.takes.map(async a=>{const i=`prototypes/${e.topic}/${a.key}.js`,s=await o.stat(d(t,e.topic,a.key)).catch(()=>null);return{key:a.key,label:a.label,src:s?.isFile()?`${i}?v=${$(s)}`:null,file:i}})),l=`${e.title} \xB7 prototype`,m={lead:"back",backHref:e.card?`./#item=${encodeURIComponent(e.card)}`:"./",title:l,controls:!1},y={prototypeTitle:k(l),prototypeHeader:`<!--header ${p(m).replace(/>/g,"\\u003e")}-->`,prototypeData:p({topic:e.topic,title:e.title,takes:n,...e.served?{served:e.served,states:e.states||null}:{}})};return(await o.readFile(g,"utf8")).replace(/\{\{(prototypeTitle|prototypeHeader|prototypeData)\}\}/g,(a,i)=>y[i])}r(O,"prototypePage");export{g as PROTOTYPE_TEMPLATE,k as esc,O as prototypePage,$ as versionOf};
+var d=Object.defineProperty;var r=(t,e)=>d(t,"name",{value:e,configurable:!0});import c from"node:fs/promises";import o from"node:path";import{fileURLToPath as u}from"node:url";import{takeFile as f}from"./store.mjs";const g=o.join(o.dirname(u(import.meta.url)),"public","prototype.html"),k=r(t=>String(t).replace(/[&<>"']/g,e=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[e]),"esc"),$=r(t=>`${Math.floor(t.mtimeMs).toString(36)}-${t.size.toString(36)}`,"versionOf"),p=r(t=>JSON.stringify(t).replace(/</g,"\\u003c").replace(/\u2028/g,"\\u2028").replace(/\u2029/g,"\\u2029"),"scriptJSON");async function O(t,e){const n=e.served?e.takes:await Promise.all(e.takes.map(async a=>{const l=`prototypes/${e.topic}/${a.key}.js`,i=await c.stat(f(t,e.topic,a.key)).catch(()=>null);return{key:a.key,label:a.label,src:i?.isFile()?`${l}?v=${$(i)}`:null,file:l}})),s=`${e.title} \xB7 prototype`,m={lead:"back",backHref:e.card?`./#selectedCard=${encodeURIComponent(e.card)}`:"./",title:s,controls:!1},y={prototypeTitle:k(s),prototypeHeader:`<!--header ${p(m).replace(/>/g,"\\u003e")}-->`,prototypeData:p({topic:e.topic,title:e.title,takes:n,...e.served?{served:e.served,states:e.states||null}:{}})};return(await c.readFile(g,"utf8")).replace(/\{\{(prototypeTitle|prototypeHeader|prototypeData)\}\}/g,(a,l)=>y[l])}r(O,"prototypePage");export{g as PROTOTYPE_TEMPLATE,k as esc,O as prototypePage,$ as versionOf};

package/board/public/app-arch.js

@@ -16,7 +16,7 @@ BoardView.part((B) => {
         + `<button type="button" class="arch-run" data-arch-open="${esc(last.key)}">Open ${esc(last.ref)}</button>`;
     }
     const lastHtml = last ? `<div class="arch-last"><span>Last review: <b>${esc(last.wave)}</b> · ${esc(day(last.at))}</span>`
-      + `<span class="muted">${B.plural(last.findings, 'finding')}, ${last.built} built · <a href="#item=${encodeURIComponent(last.key)}" data-arch-open="${esc(last.key)}">${esc(last.ref)} ${LINK_ARROW}</a></span></div>` : '';
+      + `<span class="muted">${B.plural(last.findings, 'finding')}, ${last.built} built · <a href="#selectedCard=${encodeURIComponent(last.key)}" data-arch-open="${esc(last.key)}">${esc(last.ref)} ${LINK_ARROW}</a></span></div>` : '';
     const waits = a.waits ? `<p class="arch-waits" role="status">${esc(a.waits)}</p>` : '';
     return `${lastHtml}${waits}<button type="button" class="primary arch-run" data-arch-run${starting ? BoardUI.BUSY : a.waits ? ' disabled' : ''}>Run a review of ${esc(a.repo)}</button>`
       + '<p class="muted">Claude reads the repo and makes a wave. Its first card asks you one question per finding.</p>';
@@ -36,7 +36,7 @@ BoardView.part((B) => {
 
   function openCard(key) {
     sheet.close();
-    const hash = `#item=${encodeURIComponent(key)}`;
+    const hash = `#selectedCard=${encodeURIComponent(key)}`;
     if (location.hash === hash) window.dispatchEvent(new HashChangeEvent('hashchange'));
     else location.hash = hash;
   }

package/board/public/app-banner.js

@@ -33,7 +33,7 @@ BoardView.part((B) => {
     if (!open) return;
     const key = open.dataset.answer;
     markSeen(d.items.find((i) => i.key === key));
-    const hash = `#item=${encodeURIComponent(key)}`;
+    const hash = `#selectedCard=${encodeURIComponent(key)}`;
     if (location.hash === hash) history.replaceState(null, '', location.pathname + location.search);
     location.hash = hash;
   });

package/board/public/app-cards.js

@@ -249,7 +249,7 @@ BoardView.part((B) => {
     </div>`;
   }
 
-  const cardLink = (l) => `<a class="card-link" href="#item=${encodeURIComponent(l.key)}">${esc(l.ref)}</a>`;
+  const cardLink = (l) => `<a class="card-link" href="#selectedCard=${encodeURIComponent(l.key)}">${esc(l.ref)}</a>`;
   // A card whose branch is pushed to a plain git remote has no PR to link, so its line copies the branch name
   // (docs/adr/2026-11-02-1850-a-board-can-work-on-any-git-remote.md).
   const pushedLink = (it) => `<a href="#" data-copy-branch="${esc(it.pushed.branch)}" title="Copy the branch name">${esc(pushedWords(it))}</a>`;
@@ -269,7 +269,6 @@ BoardView.part((B) => {
   const openPRs = (it) => (it.prs || []).filter((p) => p.state === 'OPEN');
   const CONFIRM = {
     resume: (it, ref) => `Unhold ${ref}?${it.heldUntil ? ` It's held until ${heldUntilWords(it.heldUntil)}.` : ''} It can start again once nothing blocks it.`,
-    nudge: () => 'Nudge Claude to check this implementer?',
     // docs/adr/2026-11-04-2100-a-land-waits-for-your-merge.md
     merge: (it, ref) => (it.mergeReady ? `Merge ${ref}? The board rebases ${it.mergeReady.branch} onto ${it.mergeReady.base} as it is now, reruns the tests if  moved, and lands it.`
       : openPRs(it).length > 1
@@ -301,24 +300,21 @@ BoardView.part((B) => {
     // (docs/adr/2026-11-05-1918-done-shows-only-in-in-review-beside-reply.md).
     const close = it.lane === 'todo' && it.finishable ? ask('finish', 'Close') : '';
     // A Todo card's Implement is in its thread box (app-threads.js; docs/adr/2026-11-05-0300-implement-in-the-thread-queues-the-card-for-the-orchestrator.md).
-    return `<div class="actions" data-actions="${key}">${actionRow('workflow', `${hold}${close}${notesButton(it)}${tryButton(it)}${actionButton(it)}${prototypesButton(it)}${mergeButton(it)}`)}</div>`;
+    return `<div class="actions" data-actions="${key}">${actionRow('workflow', `${hold}${close}${notesButton(it)}${tryButton(it)}${actionButton(it)}${mergeButton(it)}`)}</div>`;
   }
 
   // board/domain.mjs actionButtonOf picks the button and resolvedBy its colour (docs/adr/2026-10-30-1309-an-unstarted-card-waits-on-its-questions-in-todo.md).
+  // Every prototype round is a question on its card, so this button reaches the prototypes too, Done cards included
+  // (docs/adr/2026-11-09-1100-needs-you-button-reaches-the-prototypes.md).
   const ACTION_BUTTONS = {
-    [BUTTON.openQuestions]: (it) => `<a${classes(it, BUTTON.openQuestions, 'button')} href="questions.html#${esc(it.questions.first)}">Questions</a>`,
+    [BUTTON.openQuestions]: (it) => `<a${classes(it, BUTTON.openQuestions, 'button')} href="questions.html#${esc(it.questions.first)}">Needs you</a>`,
   };
   const actionButton = (it) => ACTION_BUTTONS[it.actionButton]?.(it) || '';
-  // docs/adr/2026-11-07-0300-prototypes-have-their-own-button-and-viewer.md
-  // On any card with prototypes (board/domain.mjs prototypesOf), Done ones too, so old rounds stay a tap away: it opens
-  // the viewer on the latest round, solid orange while a round waits on the owner's pick.
-  const prototypesButton = (it) => {
-    const latest = it.prototypes?.rounds.at(-1);
-    return latest ? `<a class="button${it.prototypes.open ? ' resolves' : ''}" href="${esc(latest.url)}">Prototypes</a>` : '';
-  };
 
-  // The latest bump among New cards takes no second bump (docs/adr/2026-10-29-1639-a-pending-ask-can-be-deleted-or-bumped.md).
-  const latestBump = (it) => Boolean(it.isNew && it.bumpedAt) && !state.board.items.some((i) => i.isNew && (i.bumpedAt || '') > it.bumpedAt);
+  // A bumped New card takes no second bump, which would only move it behind the earlier bumps
+  // (docs/adr/2026-10-29-1639-a-pending-ask-can-be-deleted-or-bumped.md,
+  // docs/adr/2026-11-06-1700-a-bump-marks-the-priority-through-every-lane.md).
+  const bumpedAsk = (it) => Boolean(it.isNew && it.bumpedAt);
   // band {step, actions} draws the card in a wave band (app-lanes.js).
   // Its open questions asked since this browser last opened it are one more unread message: the thread's "N new
   // questions" line (app-threads.js; docs/adr/2026-11-04-2130-a-button-tap-is-a-status-line-or-a-message-footer.md).
@@ -328,7 +324,7 @@ BoardView.part((B) => {
     return `<details class="item" data-key="${esc(it.key)}" ${state.openItems.has(it.key) ? 'open' : ''}>
           <summary class="work">
             <span class="status ${it.lane}"></span>
-            <div class="title-wrap">${workLines(it, { unread, top: latestBump(it), ...band })}</div>
+            <div class="title-wrap">${workLines(it, { unread, top: bumpedAsk(it), ...band })}</div>
           </summary>
           ${state.openItems.has(it.key) ? detail(it) : ''}
         </details>`;
@@ -395,6 +391,13 @@ BoardView.part((B) => {
     drawn = true;
   }
 
+  // A card the owner opens is the URL's selected card. A card restored open on load fires toggle too, so the tap is
+  // what counts, not the toggle.
+  B.on(B.root, 'click', (ev) => {
+    const card = ev.target.closest?.('details.item > summary')?.parentNode;
+    if (card && !card.open) B.saveFragment({ selectedCard: card.dataset.key });
+  });
+
   B.on(B.root, 'toggle', (ev) => {
     const el = ev.target;
     if (!el.matches?.('details.item')) return;
@@ -476,7 +479,6 @@ BoardView.part((B) => {
   // A data-confirm button's tap: Hold's sheet, or its confirm, then its event. The thread box's Done comes here on ⌥↵ too.
   async function confirmTap(b) {
     const { key, confirm: act } = b.dataset;
-    if (b.classList.contains('nudging')) return;
     const it = state.board.items.find((i) => i.key === key);
     if (it && act === 'hold') { openHold(it); return; }
     if (!it || !(await B.confirm(CONFIRM[act](it, it.ref)))) return;
@@ -484,40 +486,26 @@ BoardView.part((B) => {
     // server records them (docs/adr/2026-11-03-1850-a-tap-waits-for-the-server-to-record-it.md).
     const sent = { resume: ['card-hold', { key, hold: false }], merge: ['card-merge', { key }], 'card-build': ['card-build', { key }],
       finish: it.kind === 'ask' ? ['ask-done', { id: it.id }] : ['card-done', { key }] }[act];
-    if (sent) {
-      // Done closes its card once the server answers, before the answer's board lands, or app-core.js steady would
-      // anchor it and scroll the page after it into Done (docs/adr/2026-11-02-0009-the-board-applies-the-owners-hold-resume-and-done-at-once.md).
-      const close = act === 'finish' ? () => {
-        const card = $(`details.item[data-key="${CSS.escape(key)}"]`);
-        if (card) BoardUI.closeDetails(card);
-        state.openItems.delete(key);
-        store.set('openItems', [...state.openItems]);
-      } : null;
-      // docs/adr/2026-11-04-2320-a-merge-tap-waits-its-turn-to-land.md: Merge spins until a board shows the card left
-      // In Review, or no longer merging there, which is its refusal.
-      const pend = act === 'merge' ? `${key}:merge` : null;
-      if (pend) BoardUI.pending.start(pend, (board) => { const c = board.items.find((i) => i.key === key); return !c || c.lane !== 'review' || !c.merging; });
-      try {
-        const out = await waitOn(b, B.sentHere(key, () => B.send(...sent, close)));
-        if (pend) { BoardUI.pending.answered(pend, out.board.generatedAt); B.render(); }
-      } catch (e) {
-        if (pend) { BoardUI.pending.drop(pend); B.render(); }
-        B.failed(e);
-      }
-      if (act === 'finish') B.syncSends(key);
-      return;
-    }
-    // A stalled line's nudge calms it to orange with a ripple, not a spinner, until a board shows the card's status line
-    // changed, the builder no longer stalled or the card gone (style.css .nudging).
-    const id = `${key}:nudge`;
-    const { progress, at } = it.builder;
-    BoardUI.pending.start(id, (board) => { const c = board.items.find((i) => i.key === key); return !c?.builder?.stalled || c.builder.progress !== progress || c.builder.at !== at; }, B.stillWaiting);
-    B.render();
+    // Done closes its card once the server answers, before the answer's board lands, or app-core.js steady would
+    // anchor it and scroll the page after it into Done (docs/adr/2026-11-02-0009-the-board-applies-the-owners-hold-resume-and-done-at-once.md).
+    const close = act === 'finish' ? () => {
+      const card = $(`details.item[data-key="${CSS.escape(key)}"]`);
+      if (card) BoardUI.closeDetails(card);
+      state.openItems.delete(key);
+      store.set('openItems', [...state.openItems]);
+    } : null;
+    // docs/adr/2026-11-04-2320-a-merge-tap-waits-its-turn-to-land.md: Merge spins until a board shows the card left
+    // In Review, or no longer merging there, which is its refusal.
+    const pend = act === 'merge' ? `${key}:merge` : null;
+    if (pend) BoardUI.pending.start(pend, (board) => { const c = board.items.find((i) => i.key === key); return !c || c.lane !== 'review' || !c.merging; });
     try {
-      const out = await B.sentHere(key, () => B.send('builder-nudge', { key }));
-      BoardUI.pending.answered(id, out.board.generatedAt); toast('Nudge sent');
-    } catch { BoardUI.pending.drop(id); toast('Could not send. Is the host awake?'); }
-    B.render();
+      const out = await waitOn(b, B.sentHere(key, () => B.send(...sent, close)));
+      if (pend) { BoardUI.pending.answered(pend, out.board.generatedAt); B.render(); }
+    } catch (e) {
+      if (pend) { BoardUI.pending.drop(pend); B.render(); }
+      B.failed(e);
+    }
+    if (act === 'finish') B.syncSends(key);
   }
 
   Object.assign(B, { captureStrips, moveStrips, detail, card, confirmTap });

package/board/public/app-lanes.js

@@ -6,7 +6,6 @@ BoardView.part((B) => {
   const { esc, escText, waitOn } = BoardUI;
   const LANES = [
     { id: 'review', name: 'In Review', open: true },
-    { id: 'stale', name: 'Stale', open: true, hideEmpty: true },
     { id: 'progress', name: 'In Progress', open: true },
     { id: 'todo', name: 'Todo', open: true },
     { id: 'done', name: 'Done', open: false, capped: true },
@@ -93,7 +92,6 @@ BoardView.part((B) => {
     return reviewsHtml(d) + LANES.map((lane) => {
       // Items arrive in each lane's fixed order (domain.mjs laneOrder).
       const items = shown.filter((i) => i.lane === lane.id);
-      if (lane.hideEmpty && !items.length) return '';
       const expanded = laneState[lane.id] ?? lane.open;
       const open = items.filter((i) => !i.fold);
       const rows = lane.id === 'todo' ? todoRows(d, shown, open) : (lane.id === 'done' ? doneRows(d, open) : lane.capped ? cappedRows(lane.id, open) : waveGroups(lane.id, open)) + waveFolds(d, items);
@@ -108,19 +106,18 @@ BoardView.part((B) => {
   // docs/adr/2026-11-05-0215-every-lane-groups-its-cards-by-wave.md
   // Every lane but Todo groups its cards under a header per open wave (state.board.waveBands) that has cards there, in
   // band order, then the cards in no wave under No wave. A lane with no card in a wave lists its cards plainly. A header
-  // counts its wave's cards in Todo, In Progress (Stale included), In Review and Done as x/y/k/z, from every lane, with
+  // counts its wave's cards in Todo, In Progress, In Review and Done as x/y/k/z, from every lane, with
   // the lane's own number bold in that lane's colour (style.css: review blue, progress orange, Todo and Done gray) and a tooltip that spells the counts out.
   // A tap on the counts opens the tooltip (countsShown, the header's lane/wave); a second tap or a tap elsewhere closes it.
   let countsShown = null;
   const COUNT_LANES = [['todo', 'in Todo'], ['progress', 'in progress'], ['review', 'in review'], ['done', 'done']];
   function waveCounts(band, laneId) {
-    const lanes = state.board.items.reduce((m, i) => m.set(i.key, i.lane === 'stale' ? 'progress' : i.lane), new Map());
+    const lanes = state.board.items.reduce((m, i) => m.set(i.key, i.lane), new Map());
     const n = COUNT_LANES.map(([id]) => band.keys.filter((k) => lanes.get(k) === id).length);
-    const here = laneId === 'stale' ? 'progress' : laneId;
     const id = `${laneId}/${band.slug}`;
     const spelled = COUNT_LANES.map(([, word], at) => `${n[at]} ${word}`);
     const tip = `<span class="wb-tip" role="tooltip">${spelled.map((t) => `<div>${t}</div>`).join('')}</span>`;
-    return `<button type="button" class="wb-counts${countsShown === id ? ' open' : ''}" data-counts="${esc(id)}" aria-label="${spelled.join(', ')}">${COUNT_LANES.map(([lane], at) => `<span${lane === here ? ` class="wv-cur wv-${lane}"` : ''}>${n[at]}</span>`).join('<span aria-hidden="true">/</span>')}${tip}</button>`;
+    return `<button type="button" class="wb-counts${countsShown === id ? ' open' : ''}" data-counts="${esc(id)}" aria-label="${spelled.join(', ')}">${COUNT_LANES.map(([lane], at) => `<span${lane === laneId ? ` class="wv-cur wv-${lane}"` : ''}>${n[at]}</span>`).join('<span aria-hidden="true">/</span>')}${tip}</button>`;
   }
   function waveGroups(laneId, cards) {
     const bands = state.board.waveBands || [];
@@ -142,7 +139,7 @@ BoardView.part((B) => {
   let goalShown = null;
   const bandStore = (slug) => FOLDS[`band:${slug}`].store;
   const bandOpen = (band, first) => store.get(bandStore(band.slug), band.slug === first);
-  const LANE_WORDS = { progress: 'in progress', review: 'in review', stale: 'stale' };
+  const LANE_WORDS = { progress: 'in progress', review: 'in review' };
   const DOTS = '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="12" r="1.8"/><circle cx="12" cy="12" r="1.8"/><circle cx="19" cy="12" r="1.8"/></svg>';
 
   // Todo's wave bands and loose cards, in the order they arrive (domain.mjs laneOrder).
@@ -173,7 +170,7 @@ BoardView.part((B) => {
       + `<span class="wb-label">${name} <span class="count">${todo.length}</span>${progress}</span>`
       + waveCounts(band, 'todo') + `<span class="wb-end"><span class="wb-links">${notes}</span>${go}</span>${pop}</div>`;
     if (!open) return `<section class="wb" data-band="${esc(band.slug)}">${head}</section>`;
-    const doneRow = done.length ? `<div class="wb-done">${done.length} done · ${done.map((i) => `<a class="card-link" href="#item=${encodeURIComponent(i.key)}">${esc(i.ref)}</a>`).join(', ')}</div>` : '';
+    const doneRow = done.length ? `<div class="wb-done">${done.length} done · ${done.map((i) => `<a class="card-link" href="#selectedCard=${encodeURIComponent(i.key)}">${esc(i.ref)}</a>`).join(', ')}</div>` : '';
     const step = (it) => (band.kind === 'lineup' ? band.phases.findIndex((p) => p.includes(it.key)) + 1 : 0);
     const actions = (it, at) => (band.kind !== 'lineup' ? null : cardMenu(band.slug, it.key, at, todo.length));
     return `<section class="wb" data-band="${esc(band.slug)}" data-open>${head}<div class="wb-body">${doneRow}${todo.map((it, at) => B.card(it, { step: step(it), actions: actions(it, at) })).join('')}</div></section>`;
@@ -191,7 +188,7 @@ BoardView.part((B) => {
       + (shown ? `<div class="wb-menu" role="menu">${item(-1, '↑ Move up')}${item(1, '↓ Move down')}</div>` : '') + '</div>';
   }
 
-  // Opens the band holding card key or named slug, for a #item= link or a Needs you line.
+  // Opens the band holding card key or named slug, for a #selectedCard= link or a Needs you line.
   function openBand({ key, slug }) {
     const band = (state.board?.waveBands || []).find((b) => b.slug === slug || b.keys.includes(key));
     if (band) store.set(bandStore(band.slug), true);

package/board/public/app-needs.js

@@ -1,18 +1,21 @@
 // The board view's Needs you (domain.mjs needsOf), led by the board session's pending prompts, answered in place
 // (prompts.js). It draws twice, and the stylesheet shows one by width
 // (docs/adr/2026-11-05-0408-needs-you-is-a-deck-on-a-phone-and-a-pane-on-a-desktop.md):
-// - on a phone, #needsDeck at the top of the board: one thing at a time, a question's options drafting its answer on the tap
-//   (the draft Send on the questions page sends) and a prompt's buttons answering it, Skip to the next, a dot for each thing waiting, and All open questions at its foot;
+// - on a phone, #needsDeck at the top of the board: one thing at a time, a question's option marked on the first tap,
+//   turning into Send “<label>”, and sent with the question's drafted note and files on a tap on it
+//   (docs/adr/2026-11-07-1212-a-deck-option-sends-on-a-second-tap.md), a prompt's buttons answering it, Prev and Next
+//   beside a dot for each thing waiting, and All open questions at its foot;
 // - from 900px, #waiting, one line each, in the pane beside the lanes, over Waiting on you mounted there
 //   (view-questions.js, embedded) while the width lasts. Waiting on you shows the questions there, so #waiting leaves out
 //   a line that only asks questions, and with nothing else left the orange section is gone. Every questions URL lands
-//   here at that width (shell.js go, focusQuestion), and a pill's double-click focuses its card on the board
-//   (docs/adr/2026-11-07-1300-board-and-open-questions-are-two-pages.md).
+//   here at that width (shell.js go, focusQuestion), and two taps on a pill focus its card on the board
+//   (docs/adr/2026-11-07-1300-board-and-open-questions-are-two-pages.md). A prototype opens in the pane too, in place of
+//   Waiting on you until its ‹ Open questions (openViewer).
 // Below 900px the header's ? opens Waiting on you, with the open-question count as its badge.
 // Needs app-core.js.
 BoardView.part((B) => {
   const { $, plural, state, toast } = B;
-  const { esc, escText, promptItem, choiceLabel, isPrototype, getDraft, setDraft } = BoardUI;
+  const { esc, escText, promptItem, choiceLabel, isPrototype, getDraft, setDraft, noteOf, waitOn } = BoardUI;
 
   const prompts = PromptAnswers.wire(B, {
     list: () => (state.board?.needs || []).filter((line) => line.prompt).map((line) => line.prompt),
@@ -29,6 +32,7 @@ BoardView.part((B) => {
     renderList(wide.matches ? needs.filter((line) => !line.questions || line.ready || line.action) : needs);
     renderDeck(d, needs);
     renderAsk(d);
+    if (viewer) paintViewer(d);
   }
 
   // The header's ? below 900px, which opens Waiting on you, carries the open-question count as its badge.
@@ -80,11 +84,17 @@ BoardView.part((B) => {
         html: `<h3>${line.key ? `<a href="${esc(line.url)}">${escText(title)}</a>` : escText(title)}</h3>${line.review ? '<p class="ctx">review held for you</p>' : ''}<div class="deck-acts"><a class="button primary" href="${esc(href)}"${attrs}>${esc(label)}</a></div>` }];
     });
   }
+  // The marked option, the question's drafted pick, reads Send “<label>”.
   const questionHtml = (q) => {
-    const picked = getDraft(q.id).choice;
+    const marked = getDraft(q.id).choice;
+    const optionHtml = (o) => {
+      const armed = o.id === marked;
+      const label = armed ? `Send “${esc(o.label)}”` : `${esc(choiceLabel(q, o.id))}${o.recommended ? ' <span class="rec-word">recommended</span>' : ''}`;
+      return `<button type="button" class="${[o.recommended && 'rec', armed && 'armed'].filter(Boolean).join(' ')}" aria-pressed="${armed}" data-deck-pick="${esc(o.id)}"><span class="lbl">${label}</span>${o.detail ? `<small>${escText(o.detail)}</small>` : ''}</button>`;
+    };
     return `<h3>${escText(q.question)}</h3>${q.context ? `<p class="ctx">${escText(q.context)}</p>` : ''}
     ${isPrototype(q.url) ? `<a class="button deck-proto" href="${esc(q.url)}">View prototypes</a>` : ''}
-    <div class="deck-opts" role="group" aria-label="${esc(q.question)}">${q.options.map((o) => `<button type="button" class="${o.recommended ? 'rec' : ''}" aria-pressed="${o.id === picked}" data-deck-pick="${esc(o.id)}"><span class="lbl">${esc(choiceLabel(q, o.id))}${o.recommended ? ' <span class="rec-word">recommended</span>' : ''}</span>${o.detail ? `<small>${escText(o.detail)}</small>` : ''}</button>`).join('')}</div>`;
+    <div class="deck-opts" role="group" aria-label="${esc(q.question)}">${q.options.map(optionHtml).join('')}</div>`;
   };
 
   // The thing on screen, by id, so an arrival or a repaint keeps it; once it is gone the deck shows what took its place.
@@ -98,46 +108,73 @@ BoardView.part((B) => {
     if (!deck.length) { el.innerHTML = ''; showing = null; return; }
     const now = deck.find((x) => x.id === showing) || deck[Math.min(Math.max(before, 0), deck.length - 1)];
     showing = now.id;
+    const at = deck.indexOf(now);
     const open = (d.owner || []).filter((q) => q.state === 'open').length;
     const drafted = (d.owner || []).filter((q) => q.state === 'open' && 'choice' in getDraft(q.id)).length;
     BoardUI.setHTML(el, `<div class="deck-head"><h2>Needs you</h2><span class="deck-n">${deck.length}</span></div>
       <div class="deck-card" data-deck="${esc(now.id)}"><p class="deck-what">${escText(now.what)}</p>${now.html}</div>
-      ${deck.length > 1 ? `<div class="deck-bar"><span class="deck-dots" aria-hidden="true">${deck.map((x) => `<i${x === now ? ' class="on"' : ''}></i>`).join('')}</span><button type="button" class="ghost" data-deck-skip>Skip →</button></div>` : ''}
+      ${deck.length > 1 ? `<div class="deck-bar"><button type="button" class="ghost" data-deck-prev${at === 0 ? ' disabled' : ''}>← Prev</button><span class="deck-dots" aria-hidden="true">${deck.map((x) => `<i${x === now ? ' class="on"' : ''}></i>`).join('')}</span><button type="button" class="ghost" data-deck-next${at === deck.length - 1 ? ' disabled' : ''}>Next →</button></div>` : ''}
       ${open ? `<a class="deck-more" href="questions.html">All open questions · ${open}${drafted ? ` · ${drafted} drafted, Send there` : ''}</a>` : ''}`);
   }
 
+  // The deck's index one step from the thing on screen; the ends hold.
+  const stepFrom = (step) => Math.min(Math.max(deck.findIndex((x) => x.id === showing) + step, 0), deck.length - 1);
   B.on(B.root, 'click', (ev) => {
     if (!ev.target.closest?.('#needsDeck')) return;
-    if (ev.target.closest('[data-deck-skip]')) {
-      const at = deck.findIndex((x) => x.id === showing);
-      showing = deck[(at + 1) % deck.length].id;
+    const step = ev.target.closest('[data-deck-prev]') ? -1 : ev.target.closest('[data-deck-next]') ? 1 : 0;
+    if (step) {
+      showing = deck[stepFrom(step)].id;
       renderNeeds(state.board);
       return;
     }
     const opt = ev.target.closest('button[data-deck-pick]');
     if (!opt) return;
     const id = opt.closest('[data-deck]').dataset.deck.slice(2);
-    setDraft(id, { ...getDraft(id), choice: opt.dataset.deckPick });
-    const at = deck.findIndex((x) => x.id === showing);
-    showing = deck[(at + 1) % deck.length].id;
-    renderNeeds(state.board);
+    const choice = opt.dataset.deckPick;
+    const draft = getDraft(id);
+    if (draft.choice !== choice) {
+      setDraft(id, { ...draft, choice });
+      renderNeeds(state.board);
+      return;
+    }
+    sendAnswer((state.board.owner || []).find((q) => q.id === id), choice, opt);
   });
 
+  // The marked option's tap sends it with the question's drafted note and files, as the questions page's Send does, and
+  // spins until the board shows the question answered, which takes it off the deck. Files still uploading hold it.
+  async function sendAnswer(q, choice, button) {
+    const composer = 'q:' + q.id;
+    if (BoardAttach.busy(composer, B.site.root)) { toast('Wait for the upload to finish'); return; }
+    const files = BoardAttach.files(composer, B.site.root);
+    const answer = { id: q.id, question: q.question, choice, label: choiceLabel(q, choice), note: noteOf(q, getDraft(q.id)).trim(), ...(files.length ? { files } : {}) };
+    const sent = () => { setDraft(q.id, {}); BoardAttach.clear(composer, B.site.root); };
+    try {
+      await waitOn(button, BoardUI.pending.within(B.send('owner-answers', { answers: [answer] }, sent), B.stillWaiting));
+    } catch (e) { B.failed(e); }
+  }
+
   // From 900px, Waiting on you in the pane under the Needs you lines, mounted while the width lasts.
   let questions = null;
+  // Two taps on a pane pill focus its topic on the board: item:<key> is a card (an ask is one, ask:<id>),
+  // wave:<slug> a band; any other topic, or one the board doesn't show, does nothing.
+  function openOnBoard(id) {
+    if (id.startsWith('item:')) B.focusOnBoard({ key: id.slice(5) });
+    else if (id.startsWith('wave:')) B.focusOnBoard({ slug: id.slice(5) });
+  }
   function fitPane() {
     if (wide.matches === Boolean(questions)) return;
     if (state.board) renderNeeds(state.board);
-    if (questions) { questions.unmount(); questions.slot.remove(); questions = null; return; }
+    if (questions) { closeViewer(); questions.unmount(); questions.slot.remove(); questions = null; return; }
     $('#needsPane').insertAdjacentHTML('beforeend', `<div class="view-questions needs-questions">${AppViews.questions.markup({ embedded: true })}</div>`);
     const slot = $('#needsPane .needs-questions');
-    questions = Object.assign(AppViews.questions.create(slot, B.site.root, { embedded: true }), { slot });
+    questions = Object.assign(AppViews.questions.create(slot, B.site.root, { embedded: true, openOnBoard, onTopic: (id) => B.saveFragment({ openItemsCard: id }) }), { slot });
     questions.mount();
   }
   // The shell's one rule for a questions URL from 900px (shell.js go): it shows the board and asks here for the question
   // or topic id, or null for none. The pane opens its topic, resolved or not, and focuses its pill → false while there
   // is no pane or it hasn't loaded, so the shell asks again.
   function focusQuestion(id) {
+    closeViewer();
     const topic = (state.board?.ownerTopics || []).find((t) => t.id === id || t.questions.includes(id));
     if (!questions?.B.openTopic(topic?.id ?? id)) return false;
     const pill = questions.slot.querySelector('.topics button[aria-pressed="true"]');
@@ -145,18 +182,62 @@ BoardView.part((B) => {
     pill?.scrollIntoView({ block: 'nearest' });
     return true;
   }
-  // A double-click on a pane pill focuses its topic on the board: item:<key> is a card (an ask is one, ask:<id>),
-  // wave:<slug> a band; any other topic, or one the board doesn't show, does nothing.
-  B.on(B.root, 'dblclick', (ev) => {
-    const pill = questions && ev.target.closest?.('button[data-topic]');
-    if (!pill || !questions.slot.contains(pill)) return;
-    const id = pill.dataset.topic;
-    if (id.startsWith('item:')) B.focusOnBoard({ key: id.slice(5) });
-    else if (id.startsWith('wave:')) B.focusOnBoard({ slug: id.slice(5) });
+
+  // From 900px a prototype opens in the pane (docs/adr/2026-11-07-2030-on-desktop-the-prototype-viewer-opens-in-the-right-pane.md,
+  // shell.js go): a top bar of ‹ Open questions, ⤢ and the card's Round pill over the prototype page framed at the
+  // pane's width, which shows its footer at the bottom of the pane (prototype-switcher.js .ps-pane). ⤢ widens the pane
+  // over the lanes and back. ‹ returns to Waiting on you with the round's question focused, as Choose this does through
+  // the shell. viewer: {url, q, widened, sheet} while one is open. → false while there is no pane, so the shell asks again.
+  let viewer = null;
+  function openViewer(url) {
+    if (!questions) return false;
+    viewer = { url, q: new URL(url, location.href).searchParams.get('q'), widened: viewer?.widened ?? false, sheet: false };
+    paintViewer();
+    return true;
+  }
+  // board: the board download it shows, which renderNeeds passes before state.board holds it.
+  function paintViewer(board = state.board) {
+    const pane = $('#needsPane');
+    pane.classList.toggle('viewing', Boolean(viewer));
+    pane.classList.toggle('widened', Boolean(viewer?.widened));
+    let box = pane.querySelector('.pane-viewer');
+    if (!viewer) { box?.remove(); return; }
+    if (!box) {
+      pane.insertAdjacentHTML('beforeend', '<div class="pane-viewer"><div class="pv-top"></div><iframe class="pv-frame" title="Prototype"></iframe></div>');
+      box = pane.querySelector('.pane-viewer');
+    }
+    const card = (board?.items || []).find((it) => it.prototypes?.rounds?.some((r) => r.q === viewer.q));
+    const rounds = card?.prototypes.rounds;
+    box.querySelector('.pv-top').innerHTML = `<button type="button" class="pv-back" data-pv="back">‹ Open questions</button><span class="pv-grow"></span>
+      <button type="button" class="pv-widen" data-pv="widen" aria-pressed="${viewer.widened}" aria-label="Widen over the lanes" title="Widen over the lanes">⤢</button>${BoardUI.roundPill(rounds, viewer.q)}`;
+    box.querySelector('.ps-sheet')?.remove();
+    if (viewer.sheet && rounds) box.insertAdjacentHTML('beforeend', BoardUI.roundSheet({ ref: card.ref, rounds, qid: viewer.q }));
+    const frame = box.querySelector('iframe.pv-frame');
+    if (frame.getAttribute('src') !== viewer.url) frame.setAttribute('src', viewer.url);
+  }
+  function closeViewer() {
+    if (!viewer) return;
+    viewer = null;
+    paintViewer();
+  }
+  B.on(B.root, 'click', (ev) => {
+    if (!viewer || !ev.target.closest?.('#needsPane .pane-viewer')) return;
+    const round = ev.target.closest('[data-ps-round]')?.dataset.psRound;
+    if (round) { openViewer(round); return; }
+    const act = ev.target.closest('[data-pv], [data-ps-top]');
+    if (!act) return;
+    if (act.dataset.pv === 'back') { focusQuestion(viewer.q); return; }
+    if (act.dataset.pv === 'widen') viewer.widened = !viewer.widened;
+    else viewer.sheet = !viewer.sheet;
+    paintViewer();
   });
+  // A push to a card's thread (#item=<key>&reply, board/store.mjs pushUrl), the switcher's for a question already picked
+  // among them, closes the viewer, so the thread it sent the owner to shows.
+  B.on(window, 'hashchange', () => { if (/^#item=[^&]+&reply$/.test(location.hash)) closeViewer(); });
+
   fitPane();
   B.on(wide, 'change', fitPane);
   B.atUnmount(() => { questions?.unmount(); questions = null; });
 
-  Object.assign(B, { renderNeeds, focusQuestion });
+  Object.assign(B, { renderNeeds, focusQuestion, openViewer });
 });