@lovek4d/kickflip 0.10.1 → 0.11.1

package/board/public/app-lanes.js

@@ -76,7 +76,7 @@ BoardView.part((B) => {
   const openReviews = new Set();
   const reviewsHtml = (d) => BoardUI.reviewLane(d.reviews, {
     open: { lane: store.get('lanes', {}).reviews, earlier: store.get(FOLDS['reviews-earlier'].store, false), cards: openReviews } });
-  // Opens PR number's review and its lane or fold, for a Needs you line or a push's #review=<number>.
+  // Opens PR number's review and its lane or fold, for a push's #review=<number>.
   function openReview(number) {
     openReviews.add(number);
     const s = store.get('lanes', {}); s.reviews = true; store.set('lanes', s);
@@ -85,17 +85,43 @@ BoardView.part((B) => {
     $(`[data-review="${number}"]`)?.scrollIntoView({ block: 'start' });
   }
 
+  // docs/adr/2026-11-12-0600-the-todo-header-has-a-filter.md
+  // The Todo header's filter: one box per property a Todo card can have, all checked until the owner unchecks one. An
+  // unchecked box hides every Todo card with its property and nothing else, so a card that is held and blocked hides
+  // when either box is unchecked. The unchecked boxes are kept on this device (store 'todoFilter'); the menu's open state is in memory.
+  const FILTER_BOXES = [
+    ['ready', 'Ready', (i) => ['ready', 'staging'].includes(i.phase)],
+    ['discussing', 'Discussing', (i) => ['discussing', 'new'].includes(i.phase)],
+    ['planning', 'Planning', (i) => ['grilling', 'prototyping'].includes(i.phase)],
+    ['blocked', 'Blocked', (i) => Boolean(i.blocked)],
+    ['held', 'Held', (i) => Boolean(i.held)],
+  ];
+  const FUNNEL = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 3H2l8 9.46V19l4 2v-8.54z"/></svg>';
+  let filterOpen = false;
+  const unchecked = () => store.get('todoFilter', []);
+  const hiddenByFilter = (it) => FILTER_BOXES.some(([id, , has]) => unchecked().includes(id) && has(it));
+  const filterHtml = () => {
+    const off = unchecked();
+    const menu = filterOpen ? `<div class="lane-filter-menu" role="group" aria-label="Show in Todo">${FILTER_BOXES.map(([id, name]) =>
+      `<button type="button" class="lane-filter-box" role="checkbox" aria-checked="${!off.includes(id)}" data-todo-filter="${id}"><span class="box"></span>${name}</button>`).join('')}</div>` : '';
+    return { button: `<button type="button" class="lane-filter${off.length ? ' on' : ''}" aria-label="Filter Todo" aria-expanded="${filterOpen}" title="${off.length ? 'Filtered' : 'Filter'}">${FUNNEL}</button>`, menu };
+  };
+
   // shown is the board's items less pending deletes.
   function lanesHtml(d, shown) {
     const laneState = store.get('lanes', {});
     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);
+      const all = shown.filter((i) => i.lane === lane.id);
+      const items = lane.id === 'todo' ? all.filter((i) => !hiddenByFilter(i)) : all;
+      if (lane.id === 'todo') shown = shown.filter((i) => i.lane !== 'todo' || items.includes(i));
+      const filter = lane.id === 'todo' ? filterHtml() : null;
       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)) + fileFolds(d, items);
       return `<details class="lane" data-lane="${lane.id}" ${expanded ? 'open' : ''}>
-        <summary><span class="lane-name">${lane.name}</span><span class="count">${lane.id === 'done' ? doneCount(d, items) : items.length}</span>${lane.id === 'review' ? B.githubHeader(d) : ''}</summary>
+        <summary><span class="lane-name">${lane.name}</span><span class="count">${lane.id === 'done' ? doneCount(d, items) : lane.id === 'todo' && items.length < all.length ? `${items.length} of ${all.length}` : items.length}</span>${lane.id === 'review' ? B.githubHeader(d) : ''}${filter ? filter.button : ''}</summary>
+        ${filter ? filter.menu : ''}
         <div class="list">${rows || '<div class="empty">Nothing here.</div>'}
         ${lane.id === 'todo' ? BoardUI.planButton(items) : ''}</div>
       </details>`;
@@ -172,12 +198,11 @@ BoardView.part((B) => {
     return groupHtml('todo', band.slug, open, head, doneRow + todo.map((it) => B.card(it)).join(''));
   }
 
-  // Opens the band holding card key or named slug, for a #selectedCard= link or a Needs you line.
-  function openBand({ key, slug }) {
-    const lane = (key && state.board?.items.find((i) => i.key === key)?.lane) || 'todo';
-    const band = (state.board?.waveBands || []).find((b) => b.slug === slug || b.keys.includes(key));
+  // Opens the band holding card key, for a #selectedCard= link.
+  function openBand({ key }) {
+    const lane = state.board?.items.find((i) => i.key === key)?.lane || 'todo';
+    const band = (state.board?.waveBands || []).find((b) => b.keys.includes(key));
     if (band) store.set(groupStore(`${lane}/${band.slug}`), true);
-    return band;
   }
 
   B.on(B.root, 'toggle', (ev) => {
@@ -199,8 +224,15 @@ BoardView.part((B) => {
       catch { B.notice('Could not send. Is the host awake?'); }
       return;
     }
-    const review = ev.target.closest('a[data-review-open]');
-    if (review) { ev.preventDefault(); openReview(Number(review.dataset.reviewOpen)); return; }
+    const filterBtn = ev.target.closest('button.lane-filter');
+    if (filterBtn) { ev.preventDefault(); filterOpen = !filterOpen; B.render(); return; }
+    const box = ev.target.closest('[data-todo-filter]');
+    if (box) {
+      const id = box.dataset.todoFilter;
+      store.set('todoFilter', unchecked().includes(id) ? unchecked().filter((x) => x !== id) : [...unchecked(), id]);
+      B.render();
+      return;
+    }
     const more = ev.target.closest('[data-lane-more]');
     if (more) {
       if (more.hasAttribute('data-fetch')) {
@@ -213,7 +245,7 @@ BoardView.part((B) => {
     }
     const pb = ev.target.closest('button[data-plan]');
     if (pb) {
-      if (!(await B.confirm('Claude triages these Todo cards into one or more waves and asks you about them in Needs you. Nothing is implemented until you answer. Start?'))) return;
+      if (!(await B.confirm('Claude triages these Todo cards into one or more waves and asks you about them in Waiting on you. Nothing is implemented until you answer. Start?'))) return;
       // Spins until a board shows a grill running on one of the cards (docs/adr/2026-11-05-0200-a-tap-spins-until-the-board-shows-its-change.md).
       const keys = pb.dataset.plan.split(' ');
       BoardUI.pending.start('todo:plan', (board) => board.items.some((i) => keys.includes(i.key) && i.grilling), B.stillWaiting);
@@ -224,14 +256,6 @@ BoardView.part((B) => {
       } catch { BoardUI.pending.drop('todo:plan'); B.render(); B.notice('Could not send. Is the host awake?'); }
       return;
     }
-    const show = ev.target.closest('a[data-band-show]');
-    if (show) {
-      ev.preventDefault();
-      if (!openBand({ slug: show.dataset.bandShow })) return;
-      const s = store.get('lanes', {}); s.todo = true; store.set('lanes', s);
-      B.render();
-      $(`.wb[data-lane="todo"][data-band="${CSS.escape(show.dataset.bandShow)}"]`)?.scrollIntoView({ block: 'start' });
-    }
   });
 
   // A band's head's fold and its name's goal popover. A long-press on the name (touch only;

package/board/public/app-snapshot.js

@@ -38,11 +38,10 @@ BoardView.part((B) => {
     if (view) B.root.dataset.board = view; else delete B.root.dataset.board;
   }
 
-  // The lines a fresh board can change: each lane count, Needs you line and thread message. A card shows its own sign below.
+  // The lines a fresh board can change: each lane count and thread message. A card shows its own sign below.
   function lines() {
     const out = new Map();
     for (const count of $$('.lane[data-lane] > summary .count')) out.set(`lane:${count.closest('.lane').dataset.lane}`, count);
-    $$('#waiting li').forEach((li, i) => out.set(`needs:${i}`, li));
     for (const msgs of $$('[data-thread] > .msgs')) [...msgs.children].forEach((m, i) => out.set(`thread:${msgs.parentElement.dataset.thread}|${i}`, m));
     return out;
   }

package/board/public/app-threads.js

@@ -20,13 +20,13 @@ BoardView.part((B) => {
   // card the orchestrator stalled (docs/adr/2026-11-06-1252-stale-is-automatic-stalled-is-the-orchestrators-flag.md).
   const replyTone = (item) => (item?.resolvedBy === BUTTON.reply ? 'resolves' : undefined);
   const sendsOf = (item) => [item?.lane === 'todo' ? (item.ready ? 'todo-ready' : 'todo')
-    : item?.lane === 'review' ? ['review', doneTone(item)].filter(Boolean).join(' ') : 'one', replyTone(item) && 'reply-resolves'].filter(Boolean).join(' ');
+    : item?.lane === 'review' ? ['review', doneTone(item)].filter(Boolean).join(' ') : 'one', item?.resolvedBy === BUTTON.implement && 'implement-resolves', replyTone(item) && 'reply-resolves'].filter(Boolean).join(' ');
   const pair = (kind, html) => `<span class="send-actions" data-sends="${kind}">${html}</span>`;
   const sends = (kind, item) => {
     const reply = (label, attrs = '') => sendButton(label, 0, attrs, replyTone(item));
     return kind.startsWith('one') ? `<span data-sends="${kind}">${reply('Send')}</span>`
       : kind.startsWith('review') ? pair(kind, `${doneButton(item)}${reply('Reply', ' data-intent="reply"')}`)
-      : pair(kind, `${sendButton('Implement', 1, ` class="build${kind === 'todo-ready' ? ' ready' : ''}" data-intent="build"`)}${reply('Reply', ' data-intent="reply"')}`);
+      : pair(kind, `${sendButton('Implement', 1, ` class="build${kind.startsWith('todo-ready') ? ' ready' : ''}${kind.includes('implement-resolves') ? ' resolves' : ''}" data-intent="build"`)}${reply('Reply', ' data-intent="reply"')}`);
   };
   // The board, not the thread, decides the send buttons, so they follow each board load even when the thread is unchanged.
   function syncSends(el, key) {

package/board/public/app.html

@@ -77,7 +77,6 @@ window.BoardBoot = (function () {
 <script src="/_hub/app/app-cards.js"></script>
 <script src="/_hub/app/app-lanes.js"></script>
 <script src="/_hub/app/app-asks.js"></script>
-<script src="/_hub/app/app-needs.js"></script>
 <script src="/_hub/app/app-header.js"></script>
 <script src="/_hub/app/app-arch.js"></script>
 <script src="/_hub/app/app-reader.js"></script>

package/board/public/app.js

@@ -198,7 +198,6 @@ window.BoardView = (function () {
         setHTML($('#lanes'), B.lanesHtml(d, d.items), { keep: '[data-thread]' });
         for (const key of state.openItems) if (state.threadCache.has(key)) B.renderThread(key, state.threadCache.get(key));
         B.moveStrips(d.items, strips);
-        B.renderNeeds(d);
         B.renderBanner(d);
       });
       B.flashChanged();
@@ -206,23 +205,16 @@ window.BoardView = (function () {
     }
 
     // #review=<PR number> opens that review in the Auto Review lane (app-lanes.js openReview), as a held review's push does.
-    // #selectedCard=<file>/<id> (or the older #item=) opens that card, and &openItemsCard=<topic id> opens that pill in the pane; push notifications link here, with &reply to land in the thread's reply box
+    // #selectedCard=<file>/<id> (or the older #item=) opens that card; push notifications link here, with &reply to land in the thread's reply box
     // (docs/adr/2026-10-29-1639-a-push-lands-where-the-owner-answers.md). An ask now in a work item's thread opens that item.
     let focusKey = null;
     let replyKey = null;
     let hashRead = false;
     // A board this page left goes back to where the owner left it once it first renders, unless its URL names a card.
     const returnToPlace = () => B.restorePlace({ linked: /^#(?:selectedCard|item|review)=/.test(location.hash) });
-    // The pane's pill the fragment names opens once the pane has loaded; a phone has no pane, its pill is the Waiting on
-    // you page (shell.js go).
-    function openPill(id, tries = 50) {
-      if (!id || !matchMedia('(min-width: 900px)').matches || B.focusQuestion?.(id) || tries <= 0) return;
-      B.later(100, () => openPill(id, tries - 1));
-    }
     function readHash() {
-      const { selectedCard, openItemsCard, review, reply } = AppRouter.fragmentOf(location.hash);
+      const { selectedCard, review, reply } = AppRouter.fragmentOf(location.hash);
       if (review && state.board) { B.openReview(review); return; }
-      openPill(openItemsCard);
       if (!selectedCard) return;
       focusKey = BoardUI.record(state.board?.moved, selectedCard) || selectedCard;
       replyKey = reply ? focusKey : null;
@@ -245,15 +237,6 @@ window.BoardView = (function () {
       ev.preventDefault();
       readHash(); render(); scrollToFocus();
     });
-    // Opens and scrolls to the card key or the band slug on the board → whether the board shows it.
-    function focusOnBoard({ key, slug }) {
-      const band = slug && state.board?.waveBands?.find((b) => b.slug === slug);
-      if (!band && !state.board?.items.some((i) => i.key === key)) return false;
-      if (key) { location.hash = AppRouter.hashWith(location.hash, { selectedCard: key }); readHash(); } else B.openBand({ slug });
-      render();
-      if (key) scrollToFocus(); else $(`section.wb[data-lane="todo"][data-band="${CSS.escape(slug)}"]`)?.scrollIntoView({ block: 'start' });
-      return true;
-    }
     // A card missing from the last visit's board waits for the fresh one, which is final.
     function scrollToFocus(final = true) {
       if (!focusKey) return;
@@ -360,6 +343,26 @@ window.BoardView = (function () {
       $('#downLanding').hidden = false;
       B.root.classList.add('down');
     }
+    // A board that loaded but threw while drawing shows the landing in its place with the error; the link stays online, and
+    // the next board that draws clean clears it (land).
+    function drawFailed(err) {
+      console.error(err);
+      state.down = { state: 'draw', error: err };
+      $('#downLanding').innerHTML = BoardUI.drawLanding(err);
+      $('#downLanding').hidden = false;
+      B.root.classList.add('down');
+    }
+    B.on(B.root, 'click', (ev) => {
+      const what = state.down?.error && ev.target.closest?.('button[data-draw]')?.dataset.draw;
+      if (what === 'reload') location.reload();
+      else if (what === 'copy') {
+        navigator.clipboard?.writeText(state.down.error.stack || String(state.down.error)).then(() => B.toast('Copied'), () => B.toast('Couldn’t copy'));
+      } else if (what === 'more') {
+        const pre = $('#downLanding .down-landing-stack');
+        pre.hidden = !pre.hidden;
+        ev.target.textContent = pre.hidden ? 'Show details' : 'Hide details';
+      }
+    });
     B.every(5000, () => { if (state.down?.retries && !document.hidden) loadBoard(); });
 
     // A board from the server, a load's or an events POST's, or a patch from the board on screen (ui-patch.js). One built
@@ -380,7 +383,7 @@ window.BoardView = (function () {
       B.setView('fresh');
       if (!hashRead || (first && focusKey)) { readHash(); hashRead = true; }
       B.linkUp();
-      render(load);
+      try { render(load); } catch (e) { drawFailed(e); return true; }
       scrollToFocus();
       returnToPlace();
       B.site.syncBadge();
@@ -431,7 +434,7 @@ window.BoardView = (function () {
       signalled();
       render();
     }
-    Object.assign(B, { render, focusOnBoard, loadBoard, send, failed, stillWaiting, reload: signalled });
+    Object.assign(B, { render, loadBoard, send, failed, stillWaiting, reload: signalled });
     B.headerWired();
     const sent = BoardUI.sentNotice.take(B.route);
     if (sent) B.toast(sent);
@@ -439,7 +442,7 @@ window.BoardView = (function () {
       if (document.hidden) return;
       if (signalMissed) { signalMissed = false; signalled(); } else loadBoard();
     });
-    B.readCopy().then(paintCopy).then(() => { if (B.alive()) loadBoard(); });
+    B.readCopy().then(paintCopy).catch((e) => console.error(e)).then(() => { if (B.alive()) loadBoard(); });
     B.signal?.(signalled);
     B.every(30000, () => { if (!document.hidden) { loadBoard(); } });
   }
@@ -454,20 +457,15 @@ window.BoardView = (function () {
   function markup({ title = '', shared = null } = {}) {
     const strip = shared ? `<p class="view-only-strip">${sharedStrip(shared)}</p>\n` : '';
     return `${BoardUI.header({ lead: 'logo', title, logoSrc: '/_hub/kickflip.png', pages: 'questions', moon: true })}
-<div class="split">
 <main>
 ${strip}  <section id="setup" class="setup" aria-live="polite" hidden></section>
   <section id="pauseBanner" class="hub-view" hidden></section>
   <section id="answers" class="answer-banner" hidden></section>
-  <section id="needsDeck" class="needs-deck" aria-label="Needs you" hidden></section>
   <div id="tryMain"></div>
   <div id="lanes"></div>
   <div id="downLanding" hidden></div>
   ${BoardUI.boardFoot()}
 </main>
-<div class="col-handle" data-col="pane" role="separator" aria-orientation="vertical" aria-label="Resize the Waiting on you pane" tabindex="0"></div>
-<aside id="needsPane" class="needs-pane" aria-label="Needs you"><section id="waiting" class="waiting" hidden></section></aside>
-</div>
 ${BoardNewTask.markup()}
 <dialog id="mainLogSheet" class="sheet" aria-labelledby="mainLogTitle">
   <div class="sheet-body">

package/board/public/col-resize.js

@@ -1,72 +1,53 @@
-// Drag-resizing of the desktop columns (docs/adr/2026-11-10-1600-the-desktop-columns-drag-and-this-device-keeps-their-widths.md).
-// A `.col-handle[data-col="sidebar"|"pane"]` drags its column's edge: the sidebar rail's, or the seam between the lanes
-// and the Waiting on you pane. Widths are clamped (sidebar 220–420px, the lanes and the pane each 360px or more), kept
-// per device for every board, and set on <html> as --sb-w and --pane-w, which style.css and sidebar.css read. A double-click
-// on a handle forgets the width; ←/→ on a focused handle moves it 16px. Loaded after the body's first elements so the
-// stored widths land before the first paint of the board.
+// Drag-resizing of the sidebar rail on a desktop (docs/adr/2026-11-10-1600-the-desktop-columns-drag-and-this-device-keeps-their-widths.md).
+// The `.col-handle[data-col="sidebar"]` drags the rail's edge. Its width is clamped to 220–420px, kept per device for
+// every board, and set on <html> as --sb-w, which style.css and sidebar.css read. A double-click on the handle forgets
+// the width; ←/→ on the focused handle moves it 16px. Loaded after the body's first elements so the stored width lands
+// before the first paint of the board.
 (function () {
-  const KEYS = { sidebar: 'hub:sidebarWidth', pane: 'hub:paneWidth' };
-  const VARS = { sidebar: '--sb-w', pane: '--pane-w' };
-  const SIDEBAR_MIN = 220, SIDEBAR_MAX = 420, LANE_MIN = 360, STEP = 16, DEFAULT_SIDEBAR = 272;
+  const KEY = 'hub:sidebarWidth';
+  const VAR = '--sb-w';
+  const MIN = 220, MAX = 420, STEP = 16;
   const html = document.documentElement;
   const wide = () => window.matchMedia('(min-width: 900px)').matches;
-  const read = (k) => { try { return localStorage.getItem(k); } catch { return null; } };
-  const write = (k, v) => { try { localStorage.setItem(k, v); } catch { /* private mode or full: kept for this page only */ } };
-  const forget = (k) => { try { localStorage.removeItem(k); } catch { /* nothing kept */ } };
-  const stored = (col) => { const n = Number(read(KEYS[col])); return Number.isFinite(n) && n > 0 ? n : null; };
-  // The sidebar's width now, which the pane's room depends on.
-  const sidebarNow = (viewport) => (html.classList.contains('sb-collapsed') ? 0 : clamp('sidebar', stored('sidebar') ?? DEFAULT_SIDEBAR, viewport, 0));
+  const read = () => { try { return localStorage.getItem(KEY); } catch { return null; } };
+  const write = (v) => { try { localStorage.setItem(KEY, v); } catch { /* private mode or full: kept for this page only */ } };
+  const forget = () => { try { localStorage.removeItem(KEY); } catch { /* nothing kept */ } };
+  const stored = () => { const n = Number(read()); return Number.isFinite(n) && n > 0 ? n : null; };
 
-  // → px clamped for the column: the pane's ceiling leaves the lanes their minimum beside the sidebar, and its floor
-  // wins where the window is too narrow for both.
-  function clamp(col, px, viewport, sidebarW) {
-    if (col === 'sidebar') return Math.min(SIDEBAR_MAX, Math.max(SIDEBAR_MIN, px));
-    return Math.max(LANE_MIN, Math.min(px, viewport - sidebarW - LANE_MIN));
+  const clamp = (px) => Math.min(MAX, Math.max(MIN, px));
+  function paint() {
+    const px = stored();
+    if (px === null) html.style.removeProperty(VAR);
+    else html.style.setProperty(VAR, `${clamp(px)}px`);
   }
-  function paint(col) {
-    const px = stored(col);
-    if (px === null) { html.style.removeProperty(VARS[col]); return; }
-    html.style.setProperty(VARS[col], `${col === 'pane' ? clamp('pane', px, window.innerWidth, sidebarNow(window.innerWidth)) : clamp('sidebar', px)}px`);
-  }
-  function paintAll() { paint('sidebar'); paint('pane'); }
-  function set(col, px) { write(KEYS[col], String(Math.round(px))); paintAll(); }
-  function reset(col) { forget(KEYS[col]); paintAll(); }
-  paintAll();
-  window.addEventListener('resize', paintAll);
+  function set(px) { write(String(Math.round(px))); paint(); }
+  function reset() { forget(); paint(); }
+  paint();
 
-  // The width a handle's drag edge is at now, and the width the pointer at x asks for.
-  const current = (col, el) => {
-    const edge = el.getBoundingClientRect();
-    return col === 'sidebar' ? edge.left + edge.width / 2 : window.innerWidth - (edge.left + edge.width / 2);
-  };
-  const wanted = (col, x) => (col === 'sidebar' ? x : window.innerWidth - x);
+  // The width the handle's drag edge is at now.
+  const current = (el) => { const edge = el.getBoundingClientRect(); return edge.left + edge.width / 2; };
 
   document.addEventListener('pointerdown', (e) => {
     const el = e.target.closest?.('.col-handle');
     if (!el || !wide() || e.button > 0) return;
-    const col = el.dataset.col;
     e.preventDefault();
     el.setPointerCapture?.(e.pointerId);
     el.classList.add('dragging');
     html.classList.add('col-dragging');
-    const move = (m) => set(col, wanted(col, m.clientX));
+    const move = (m) => set(m.clientX);
     const end = () => { el.classList.remove('dragging'); html.classList.remove('col-dragging'); el.removeEventListener('pointermove', move); el.removeEventListener('pointerup', end); el.removeEventListener('pointercancel', end); };
     el.addEventListener('pointermove', move);
     el.addEventListener('pointerup', end);
     el.addEventListener('pointercancel', end);
   });
   document.addEventListener('dblclick', (e) => {
-    const el = e.target.closest?.('.col-handle');
-    if (el && wide()) reset(el.dataset.col);
+    if (e.target.closest?.('.col-handle') && wide()) reset();
   });
   document.addEventListener('keydown', (e) => {
     const el = e.target.closest?.('.col-handle');
     if (!el || !wide() || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;
-    const col = el.dataset.col;
     e.preventDefault();
-    // → grows the sidebar and shrinks the pane, as the edge moves right.
-    const dx = (e.key === 'ArrowRight' ? STEP : -STEP) * (col === 'sidebar' ? 1 : -1);
-    set(col, (stored(col) ?? current(col, el)) + dx);
+    set((stored() ?? current(el)) + (e.key === 'ArrowRight' ? STEP : -STEP));
   });
 
   window.ColResize = { clamp, set, reset };

package/board/public/dialogs.js

@@ -58,7 +58,7 @@
       const team = esc(draft.team || '');
       const note = draft.project === '__new'
         ? (isNew ? `<p class="muted small">Start creates the project in the ${team} team on Linear.</p>` : `<p class="muted small">Creates the project in the ${team} team on Linear.</p>`)
-        : `<p class="muted small">A task gets a ${team} issue in ${esc(project?.name || draft.project || '')}, in the ${esc(linear.workspace || workspace())} workspace from Hub’s key, when you answer yes to its ticket question. Its badge opens it in Linear.</p>`;
+        : `<p class="muted small">A task gets a ${team} issue in ${esc(project?.name || draft.project || '')}, in the ${esc(linear.workspace || workspace())} workspace from Hub’s key, when it goes ready to build. Its badge opens it in Linear.</p>`;
       return `<div class="tk-grid"><label class="tk-field"><span>Team</span><select data-tk="team">${(linear.teams || []).map((t) => `<option value="${esc(t.key)}"${t.key === draft.team ? ' selected' : ''}>${esc(t.key)} · ${esc(t.name)}</option>`).join('')}</select></label><label class="tk-field"><span>Project</span><select data-tk="project">${(linear.projects || []).filter((p) => p.team === draft.team).map((p) => `<option value="${esc(p.id)}"${p.id === draft.project ? ' selected' : ''}>${esc(p.name)}</option>`).join('')}<option value="__new"${draft.project === '__new' ? ' selected' : ''}>New project…</option></select></label></div>${draft.project === '__new' ? `<div class="tk-new"><input data-tk="newName" value="${esc(draft.newName ?? title())}" aria-label="New Linear project name" placeholder="Project name" maxlength="80" autocomplete="off">${isNew ? '' : `<button type="button" data-tk-create${creating ? BoardUI.BUSY : ''}>Create</button>`}</div>` : ''}${createError ? `<p class="muted small" role="alert">${esc(createError)}</p>` : ''}${note}`;
     }
     function render() {
@@ -68,7 +68,7 @@
       let detail;
       if (draft.source === 'github' && off) detail = why;
       else if (draft.source === 'none') detail = '<p class="muted small">Every card is a task, numbered T-1, T-2… on this board, with no ticket. Its badge reads Task.</p>';
-      else if (draft.source === 'github') detail = `<div class="who tk-static"><span>Issues in ${esc(repo())}<span class="muted small sub">${isNew ? 'The repo chosen above' : 'The board’s repo, set above'}. A task opens an issue there${draft.account ? ` as gh account ${esc(draft.account)}` : ''} when you answer yes to its ticket question; its badge then reads #41.</span></span></div>`;
+      else if (draft.source === 'github') detail = `<div class="who tk-static"><span>Issues in ${esc(repo())}<span class="muted small sub">${isNew ? 'The repo chosen above' : 'The board’s repo, set above'}. A task opens an issue there${draft.account ? ` as gh account ${esc(draft.account)}` : ''} when it goes ready to build; its badge then reads #41.</span></span></div>`;
       else detail = linearDetail();
       root.innerHTML = `${status()}${segment}<div class="tk-detail">${noGithub && off && draft.source !== 'github' ? why : ''}${detail}</div>`;
       if (draft.source === 'linear' && ready()) {

package/board/public/new-task.js

@@ -77,8 +77,8 @@ globalThis.BoardNewTask = (function () {
     B.on($('#sheetClose'), 'click', closeSheet);
     B.on(sheet, 'click', (ev) => { if (BoardUI.onBackdrop(ev, sheet)) closeSheet(); });
     B.on(sheet, 'cancel', (ev) => { ev.preventDefault(); closeSheet(); });
-    // 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).
+    // Discuss has the session reply to the task, starting its discussion; Implement sends the ask with quick: true, and
+    // the session marks the card ready (docs/adr/2026-11-12-0500-a-new-task-is-a-conversation.md).
     B.on($('#askForm'), 'submit', async (ev) => {
       ev.preventDefault();
       $('#askText').blur();

package/board/public/prompts.js

@@ -1,4 +1,4 @@
-// Answering pending prompts from their Needs you lines (ui-prompts.js promptItem), on a board view and the hub page,
+// Answering pending prompts from their Needs you lines (ui-prompts.js promptItem) on the hub page,
 // through the hub's POST /_hub/prompts/<id>/answer (docs/adr/2026-10-30-1516-background-sessions-prompts-come-to-the-phone.md).
 // Allow once, Deny, Skip and a single question's option send on the tap. Always allow confirms first, naming its rule,
 // since it covers every later call like it until the session ends. Several questions, or one taking several picks,

package/board/public/prototype-kit.js

@@ -3,7 +3,7 @@
 // with board.mjs prototype add (docs/adr/2026-11-01-1448-the-board-serves-every-prototype-from-one-template.md). A take file,
 // public/prototypes/<topic>/<KEY>.js, is a module:
 //   export function render(stage, kit) { stage.innerHTML = kit.hub(); return () => {…} }   // the cleanup is optional
-// A take draws any board class at any width: prototype.html undoes the board's width-gated hides in the stage (.needs-deck, .needs-pane).
+// A take draws any board class at any width: prototype.html undoes the board's width-gated hides in the stage (.key-hint).
 // render runs on every switch to that take with a fresh, empty stage; it may be async. The stage contains its layout
 // and paint, so nothing in it, position: fixed included, can cover the viewer's bar, its ✕ or the app shell.
 //   kit.sidebar(data?, {here, switching, device, head, height})  ui-sidebar.js sidebar() as an open drawer card in the

package/board/public/prototype-switcher.js

@@ -1,14 +1,14 @@
 // The full-bleed prototype viewer's controls (docs/adr/2026-10-29-1639-prototypes-come-on-request.md,
 // docs/adr/2026-11-05-1302-a-questions-prototypes-open-in-a-full-page-viewer.md,
 // docs/adr/2026-11-07-0300-prototypes-have-their-own-button-and-viewer.md,
-// docs/adr/2026-11-07-2030-on-desktop-the-prototype-viewer-opens-in-the-right-pane.md).
+// docs/adr/2026-11-12-0700-the-board-has-no-needs-you-deck-or-pane.md).
 // Load it with a relative src after claude.js, on a page whose header leads with the back arrow, then call
 //   const sw = PrototypeSwitcher.mount({ takes: { A: 'A. Name', … }, states: { empty: 'No cards', … }?, initial: 'A', render(take, state) {…}, above: el? })
 // render runs at mount and on each switch of take or state; sw.take is the current key. A served round's named states
 // (docs/adr/2026-11-06-1500-a-prototype-round-is-a-page-in-the-boards-base-worktree.md) are a row of chips above the
 // pager, the state kept in ?state=, else the first. The page's header is hidden: a ✕ at the top
 // right goes back as its back arrow does, and the footer, full width on the bottom edge at every width, holds the
-// ‹ take › pager. Framed in the board's right pane, the pane's top bar takes the ✕'s and the Round pill's place. ←/→
+// ‹ take › pager. ←/→
 // and a sideways swipe switch unless a field has focus, and the take stays in ?variant=. With ?q=<owner question id>, the bar's second row offers
 // the take as that question's pick: a take is pickable when an option's id equals its key. Choose this drafts it, with
 // the note typed above the bar, in the {choice, note} questions.html keeps for that question, and goes back to the
@@ -118,10 +118,7 @@ main.proto-main { padding-top:calc(60px + env(safe-area-inset-top)); }
   .ps-pill { width:min(640px, 100%); }
   .ps-switch .ps-text { width:min(640px, 100%); }
   .ps-states { flex-wrap:wrap; overflow-x:visible; }
-}
-.ps-pane main.proto-main { padding-top:0; }
-.ps-pane .ps-top { display:none; }
-.ps-pane .ps-states { flex-wrap:wrap; overflow-x:visible; justify-content:center; }`;
+}`;
 
   const typing = (el) => Boolean(el?.closest?.('input, select, textarea, [contenteditable]:not([contenteditable="false"])'));
 
@@ -132,8 +129,6 @@ main.proto-main { padding-top:calc(60px + env(safe-area-inset-top)); }
     const qid = params.get('q');
     const site = globalThis.ClaudeSite;
     if (!document.getElementById('ps-style')) document.head.insertAdjacentHTML('beforeend', `<style id="ps-style">${CSS}</style>`);
-    // Framed in the board's right pane (app-needs.js openViewer), whose top bar holds the way back and the Round pill.
-    if (window.frameElement?.closest('.needs-pane')) document.documentElement.classList.add('ps-pane');
     let take = startTake(keys, params.get('variant'), initial);
     let question = null;
     // A push opened this page (board/store.mjs pushUrl). Read once and dropped from the URL, so a reload stays on the

package/board/public/prototype.html

@@ -22,10 +22,9 @@
   #stage .top { position: static; }
   #stage .hub-view main { padding-bottom: 16px; }
   /* A served round's page, framed from the board's base prototype worktree, edge to edge from under the ✕ row to the
-     viewer's footer; in the board's right pane (.ps-pane) there is no ✕ row, so it starts at the top. */
+     viewer's footer. */
   #stage:has(> .kit-served) { max-width: none; padding: 0; }
   .kit-served { display: block; width: 100%; min-height: 320px; height: calc(100dvh - 60px - var(--ps-footer-h, 150px) - var(--app-bottom, 0px) - env(safe-area-inset-top)); border: 0; background: var(--panel); }
-  .ps-pane .kit-served { height: calc(100dvh - var(--ps-footer-h, 150px)); }
   .kit-served-failed pre { margin: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
   .kit-missing { margin: 0; padding: 16px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); overflow-wrap: anywhere; }
   #protoToast { position: fixed; z-index: 40; left: 50%; top: calc(64px + env(safe-area-inset-top)); transform: translateX(-50%); max-width: calc(100vw - 32px); }
@@ -50,10 +49,8 @@
   #stage .kit-sidebar.sidebar:not(.kit-head) > header.top { display: none; }
   @media (min-width: 900px) { #stage .kit-sidebar.sidebar { width: 272px; } }
   /* Everything a take draws shows at every width: the board's width-gated hides are undone here (style.css hides
-     .needs-deck from 900px and .needs-pane below it, .key-hint below 600px). render-check.mjs refuses a take whose box is
+     .key-hint below 600px). render-check.mjs refuses a take whose box is
      still hidden at one of its two widths, so a gate missed here fails the round instead of drawing blank. */
-  #stage .needs-deck { display: block; }
-  #stage .needs-pane { display: block; position: static; height: auto; overflow: visible; border-left: 0; padding: 0; }
   #stage .key-hint { display: inline; }
   #stage .kit-sheet-strip { padding: 32px 0 0; border-radius: 12px; background: rgba(0,0,0,.35); overflow: hidden; }
   #stage .kit-sheet { max-width: 560px; margin: 0 auto; border: 1px solid var(--line); border-bottom: 0; border-radius: 16px 16px 0 0; background: var(--panel); color: var(--text); box-shadow: 0 -8px 30px rgba(0,0,0,.18); }
@@ -99,7 +96,6 @@
 <script src="app-cards.js"></script>
 <script src="app-lanes.js"></script>
 <script src="app-asks.js"></script>
-<script src="app-needs.js"></script>
 <script src="app-header.js"></script>
 <script src="app-arch.js"></script>
 <script src="app-reader.js"></script>

package/board/public/router.js

@@ -3,7 +3,7 @@
 // ui.test.mjs runs them in node:vm. listen() catches clicks on links to a view the shell mounts, and back and forward.
 // A view is {kind, …}:
 //   start                       `/`, which the shell turns into the last board
-//   board {route, hash}         /<route>/, hash such as #selectedCard=<key>&openItemsCard=<topic id>, or the older #item=<key>&reply
+//   board {route, hash}         /<route>/, hash such as #selectedCard=<key>, or the older #item=<key>&reply
 //   settings {route}            /<route>/settings.html, a request to open the modal over that board
 //   questions {route, id}       /<route>/questions.html#<id>
 //   notes {route, item | wave}  /<route>/notes.html?item=<key> or ?wave=<wave slug>, and plan.html, which the board
@@ -81,24 +81,23 @@ globalThis.AppRouter = (function () {
 
   // The page tree (docs/adr/2026-10-30-1125-back-follows-the-page-tree.md): a board, its Waiting on you, and a prototype page tied
   // to one of its questions by ?q=, framed. levelOf → 0, 1 or 2 down the tree, or null for a view outside it.
-  // A board's prototype page, which from 900px opens in the board's right pane (shell.js go).
+  // A board's prototype page.
   const isPrototype = (view, boards) => view?.kind === 'frame' && boards.has(view.route) && /^\/[^/]+\/prototype-[\w-]+\.html$/.test(new URL(view.url, 'http://hub').pathname);
   function questionOf(view, boards) {
     return isPrototype(view, boards) ? new URL(view.url, 'http://hub').searchParams.get('q') || null : null;
   }
-  // wide: from 900px Waiting on you is the board's pane, so a prototype's parent is the board itself.
-  function levelOf(view, { boards = new Set(), wide = false } = {}) {
+  function levelOf(view, { boards = new Set() } = {}) {
     if (view?.kind === 'board') return 0;
     if (view?.kind === 'questions') return 1;
-    return questionOf(view, boards) ? (wide ? 1 : 2) : null;
+    return questionOf(view, boards) ? 2 : null;
   }
   // → the views above view in the tree, its board first. card: the card whose thread the owner left the board from,
   // which the board keeps open.
-  function parentsOf(view, { boards = new Set(), card = null, wide = false } = {}) {
+  function parentsOf(view, { boards = new Set(), card = null } = {}) {
     const q = questionOf(view, boards);
     if (!q && view?.kind !== 'questions') return [];
     const board = { kind: 'board', route: view.route, hash: card ? `#selectedCard=${encodeURIComponent(card)}` : '' };
-    return q && !wide ? [board, { kind: 'questions', route: view.route, id: q }] : [board];
+    return q ? [board, { kind: 'questions', route: view.route, id: q }] : [board];
   }
 
   // Each history entry carries {idx}, its distance from the shell's first entry, pushed when a push opened it, and on a
@@ -111,8 +110,8 @@ globalThis.AppRouter = (function () {
   // boards() → the board routes now.
   // → {push(href, from), replace(href), up()}: push and replace write an entry for a view go is showing; replace answers
   // 'up' when it went back to a parent instead, which then takes href, and go shows it on that pop.
-  function listen({ boards, go, wide = () => false }) {
-    const b = () => ({ boards: boards(), wide: wide() });
+  function listen({ boards, go }) {
+    const b = () => ({ boards: boards() });
     const mark = (pushed) => (pushed ? { pushed: true } : {});
     let idx = Number.isInteger(history.state?.idx) ? history.state.idx : 0;
     let landing = null;
@@ -225,32 +224,27 @@ globalThis.AppRouter = (function () {
     return { push: (href, from) => write('push', href, from), replace: (href) => write('replace', href), up };
   }
 
-  // A board's fragment is &-joined keys: selectedCard=<key> (the focused card), openItemsCard=<topic id> (the selected
-  // open-items pill), review=<PR number>, and a bare reply. The older #item=<key> reads as selectedCard.
-  // → {selectedCard, openItemsCard, review, reply}, each null or false when absent.
+  // A board's fragment is &-joined keys: selectedCard=<key> (the focused card), review=<PR number>, and a bare reply.
+  // The older #item=<key> reads as selectedCard.
+  // → {selectedCard, review, reply}, each null or false when absent.
   function fragmentOf(hash) {
-    const out = { selectedCard: null, openItemsCard: null, review: null, reply: false };
+    const out = { selectedCard: null, review: null, reply: false };
     const decode = (v) => { try { return decodeURIComponent(v); } catch { return v; } };
     for (const part of String(hash).replace(/^#/, '').split('&')) {
       const eq = part.indexOf('=');
       const [k, v] = eq < 0 ? [part, ''] : [part.slice(0, eq), part.slice(eq + 1)];
       if (k === 'selectedCard' || k === 'item') out.selectedCard = decode(v) || null;
-      else if (k === 'openItemsCard') out.openItemsCard = decode(v) || null;
       else if (k === 'review' && /^\d+$/.test(v)) out.review = Number(v);
       else if (k === 'reply') out.reply = true;
     }
     return out;
   }
   // hash with the named keys of changes replaced (null drops one) → the new fragment, '' for none. A #review= link is
-  // alone in its fragment, so a change to a card or pill replaces it; reply is spent once the card is shown.
+  // alone in its fragment, so a change to the card replaces it; reply is spent once the card is shown.
   function hashWith(hash, changes) {
-    const now = fragmentOf(hash);
-    const next = { selectedCard: now.selectedCard, openItemsCard: now.openItemsCard, ...changes };
-    const parts = [];
-    if (next.selectedCard) parts.push(`selectedCard=${encodeURIComponent(next.selectedCard)}`);
-    if (next.openItemsCard) parts.push(`openItemsCard=${encodeURIComponent(next.openItemsCard)}`);
-    return parts.length ? '#' + parts.join('&') : '';
+    const next = { selectedCard: fragmentOf(hash).selectedCard, ...changes };
+    return next.selectedCard ? `#selectedCard=${encodeURIComponent(next.selectedCard)}` : '';
   }
 
-  return { viewOf, urlOf, mounted, entryOf, isPrototype, listen, fragmentOf, hashWith };
+  return { viewOf, urlOf, mounted, entryOf, listen, fragmentOf, hashWith };
 })();