@lovek4d/kickflip 0.0.0-stage → 0.3.1

package/board/public/app-arch.js

@@ -0,0 +1,75 @@
+// The header's bulb and its review sheet: the board's last architecture review and Run, which confirms and asks the
+// board server to start one (docs/adr/0125-the-bulb-runs-an-architecture-review-of-the-boards-repo.md). The bulb glows
+// while a review runs. Needs app-core.js.
+BoardView.part((B) => {
+  const { $, state } = B;
+  const { esc, LINK_ARROW } = BoardUI;
+  const bulb = $('#archBulb');
+  const sheet = $('#archSheet');
+  const day = (iso) => new Date(iso).toLocaleDateString([], { month: 'short', day: 'numeric' });
+  let starting = false;
+
+  function body(a) {
+    const last = a.last;
+    if (last?.running) {
+      return `<p>Reviewing ${esc(a.repo)} since ${esc(BoardUI.time(last.at))}. The bulb glows until its wave is ready.</p>`
+        + `<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>` : '';
+    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${a.waits || starting ? ' disabled' : ''}>${starting ? 'Starting…' : `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>';
+  }
+
+  function renderArch(d) {
+    const a = d.arch;
+    bulb.hidden = !a;
+    const running = Boolean(a?.last?.running);
+    bulb.classList.toggle('running', running);
+    const label = running ? 'Architecture review running' : 'Architecture review';
+    bulb.setAttribute('aria-label', label);
+    bulb.title = label;
+    if (sheet.open && a) $('#archBody').innerHTML = body(a);
+    if (sheet.open && !a) sheet.close();
+  }
+
+  function openCard(key) {
+    sheet.close();
+    const hash = `#item=${encodeURIComponent(key)}`;
+    if (location.hash === hash) window.dispatchEvent(new HashChangeEvent('hashchange'));
+    else location.hash = hash;
+  }
+
+  async function run() {
+    const a = state.board?.arch;
+    if (!a || a.waits || starting) return;
+    if (a.last?.open) { openCard(a.last.key); B.toast(`${a.last.ref} is this board’s open review.`); return; }
+    sheet.close();
+    if (!(await B.confirm(`Claude reads ${a.repo} and makes a wave whose first card asks you one question per finding. Run the architecture review?`)) || !B.alive()) return;
+    starting = true;
+    try {
+      const r = await fetch(B.site.url('api/arch-review'), { method: 'POST', headers: { 'content-type': 'application/json' }, body: '{}' });
+      const answer = await r.json().catch(() => ({}));
+      if (!r.ok) { B.notice(answer.error || 'Could not start the review. Is the host awake?'); return; }
+      if (answer.existing) { openCard(answer.key); B.toast(`${answer.ref} is this board’s open review.`); return; }
+      await B.loadBoard();
+    } catch { B.notice('Could not start the review. Is the host awake?'); }
+    finally { starting = false; if (state.board) renderArch(state.board); }
+  }
+
+  B.on(bulb, 'click', () => {
+    const a = state.board?.arch;
+    if (!a || sheet.open) return;
+    $('#archBody').innerHTML = body(a);
+    sheet.showModal();
+  });
+  B.on(sheet, 'click', (ev) => {
+    if (ev.target === sheet || ev.target.closest('#archClose')) { sheet.close(); return; }
+    const open = ev.target.closest('[data-arch-open]');
+    if (open) { ev.preventDefault(); openCard(open.dataset.archOpen); return; }
+    if (ev.target.closest('[data-arch-run]')) run();
+  });
+
+  Object.assign(B, { renderArch });
+});

package/board/public/app-asks.js

@@ -0,0 +1,188 @@
+// New tasks on the board view: the + sheet that sends one as an ask event, and bump, edit and delete for a New card or a
+// pending thread message (docs/adr/0014-a-pending-ask-can-be-deleted-or-bumped.md,
+// docs/adr/0047-the-plus-makes-a-new-card.md). Needs app-core.js and app-threads.js.
+BoardView.part((B) => {
+  const { $, store, state, toast, quieted, sendDraft, hide } = B;
+  const { attachButton } = BoardUI;
+
+  // The ask box is a bottom sheet: a <dialog> opened from the + button. Closing keeps the draft.
+  const sheet = $('#sheet');
+  const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)');
+  if (!$('#askForm .row .attach')) $('#askForm .row').insertAdjacentHTML('afterbegin', attachButton());
+  // Files picked before the app shell switched away from this board are still attached, so they show again.
+  BoardAttach.paint('ask', B.site.root);
+  const isMac = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+  if (!$('#askForm .send-hint')) $('#askForm button[type=submit]').insertAdjacentHTML('beforebegin', `<span class="send-hint" aria-hidden="true">${isMac ? '⌘↵' : 'Ctrl+↵'}</span>`);
+  // ⌘↵ (Ctrl+↵ off a Mac) sends from any composer: the ask, a thread reply, an edit.
+  B.on(B.root, 'keydown', (ev) => {
+    if (ev.key !== 'Enter' || !(ev.metaKey || ev.ctrlKey) || ev.isComposing) return;
+    const form = ev.target instanceof HTMLTextAreaElement ? ev.target.closest('form[data-composer], form.edit-form') : null;
+    if (!form) return;
+    ev.preventDefault();
+    form.requestSubmit();
+  });
+  $('#askText').value = store.get('draft:ask', '');
+  B.on($('#askText'), 'input', (e) => { if (!quieted('draft:ask', e.target)) store.set('draft:ask', e.target.value); });
+  let stopFitting = null;
+  const stopFit = () => { stopFitting?.(); stopFitting = null; };
+  B.on(sheet, 'close', stopFit);
+  B.atUnmount(stopFit);
+  function openSheet() {
+    if (sheet.open) return;
+    stopFit();
+    stopFitting = BoardDialogs.fitSheet(sheet);
+    sheet.classList.remove('closing');
+    sheet.showModal();
+    $('#askText').focus();
+    $('#compose').setAttribute('aria-expanded', 'true');
+  }
+  function closeSheet() {
+    if (!sheet.open || sheet.classList.contains('closing')) return;
+    $('#compose').setAttribute('aria-expanded', 'false');
+    if (reduceMotion.matches) { sheet.close(); return; }
+    sheet.classList.add('closing');
+    B.later(180, () => { sheet.classList.remove('closing'); sheet.close(); });
+  }
+  B.on($('#compose'), 'click', openSheet);
+  // n pressed twice opens the sheet, as the + button's tooltip says, unless a field or another dialog has focus. With
+  // nothing focused the key goes to <body>, outside the view, so this listens on the document. A key switch mode
+  // used (sidebar.js) comes defaultPrevented and doesn't count.
+  const TWICE_MS = 500;
+  let lastN = -Infinity;
+  B.on(document, 'keydown', (ev) => {
+    if (ev.defaultPrevented) { lastN = -Infinity; return; }
+    if (ev.key !== 'n' || ev.metaKey || ev.ctrlKey || ev.altKey || ev.repeat || ev.isComposing) return;
+    const field = ev.target instanceof Element && ev.target.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"])');
+    if (field || document.querySelector('dialog[open]') || B.root.classList.contains('offline')) { lastN = -Infinity; return; }
+    if (ev.timeStamp - lastN > TWICE_MS) { lastN = ev.timeStamp; return; }
+    lastN = -Infinity;
+    ev.preventDefault();
+    openSheet();
+  });
+  B.on($('#sheetClose'), 'click', closeSheet);
+  B.on(sheet, 'click', (ev) => { if (ev.target === sheet) closeSheet(); });
+  B.on(sheet, 'cancel', (ev) => { ev.preventDefault(); closeSheet(); });
+  B.on($('#askForm'), 'submit', async (ev) => {
+    ev.preventDefault();
+    $('#askText').blur();
+    const text = $('#askText').value.trim();
+    const files = BoardAttach.files('ask', B.site.root);
+    if ((!text && !files.length) || BoardAttach.busy('ask', B.site.root)) return;
+    $('#askStatus').textContent = 'Sending…';
+    try {
+      await sendDraft('draft:ask', $('#askText'), () => $('#askText'), () => B.send('ask', { text, ...(files.length ? { files } : {}) }));
+      BoardAttach.clear('ask', B.site.root);
+      $('#askStatus').textContent = '';
+      closeSheet();
+      toast('Sent');
+    } catch { $('#askStatus').textContent = 'Could not send'; }
+  });
+
+  // A bump moves the New card to the top at once, its icon filling as it goes
+  // (docs/adr/0151-every-owner-tap-the-server-can-apply-draws-at-once.md).
+  async function bumpAsk(id) {
+    const icon = `button[data-bump="${CSS.escape(id)}"]`;
+    const at = new Date().toISOString();
+    const sending = B.send('ask-bump', { id }, B.drawItem(`ask:${id}`, (it) => ({ ...it, bumpedAt: at, ask: { ...it.ask, bumpedAt: at } })));
+    B.fadeBump(icon, true);
+    try { await sending; toast('Bumped to the top'); } catch { B.fadeBump(icon, false); toast(B.FAILED); }
+  }
+  B.on(B.root, 'click', (ev) => {
+    const bump = ev.target.closest('button[data-bump]');
+    if (!bump) return;
+    ev.preventDefault();
+    bump.disabled = true;
+    bumpAsk(bump.dataset.bump);
+  });
+  B.bumpAsk = bumpAsk;
+  // A New card's icons sit on the card; a message in a thread, an ask's included, carries its thread's key.
+  async function pendingMessage(b, id) {
+    const card = b.closest('details.item');
+    const thread = b.closest('[data-thread]')?.dataset.thread || card?.querySelector('[data-thread]')?.dataset.thread || card?.dataset.key || null;
+    const key = thread && thread !== `ask:${id}` ? thread : undefined;
+    let msg = b.closest('.msg');
+    if (!msg && b.dataset.edit && card) {
+      card.open = true;
+      for (let i = 0; i < 30 && !msg; i++) { msg = card.querySelector(`.msg[data-event="${CSS.escape(id)}"]`); if (!msg) await new Promise((r) => setTimeout(r, 100)); }
+    }
+    return { thread, key, msg, data: { id, ...(key ? { key } : {}) } };
+  }
+  // An edit box lives in state.edits and its thread draws it (ui-threads.js threadMessages), so a repaint keeps it, and
+  // so does leaving the board and opening it again in this page.
+  for (const [id, e] of B.place?.edits || []) state.edits.set(id, e);
+  B.keep(() => ({ edits: [...state.edits] }));
+  function closeEditor(id) {
+    const e = state.edits.get(id);
+    state.edits.delete(id);
+    if (e) B.repaintThread(e.thread);
+  }
+  B.on(B.root, 'input', (ev) => {
+    const e = state.edits.get(ev.target.closest?.('form[data-edit-form]')?.dataset.editForm);
+    if (e) e.text = ev.target.value;
+  });
+  B.on(B.root, 'click', async (ev) => {
+    const eb = ev.target.closest('button[data-edit]');
+    if (eb) {
+      ev.preventDefault();
+      const id = eb.dataset.edit;
+      const { thread, msg, data } = await pendingMessage(eb, id);
+      if (!msg || !thread || state.edits.has(id)) return;
+      const text = (state.threadCache.get(thread) || []).find((m) => m.eventId === id)?.text ?? msg.querySelector('.body').textContent;
+      state.edits.set(id, { thread, data, text });
+      B.repaintThread(thread);
+      $(`form[data-edit-form="${CSS.escape(id)}"] textarea`)?.focus();
+      return;
+    }
+    const cancel = ev.target.closest('.edit-form button[data-edit-cancel]');
+    if (cancel) { closeEditor(cancel.closest('form').dataset.editForm); return; }
+    const del = ev.target.closest('button[data-withdraw]');
+    if (!del) return;
+    ev.preventDefault();
+    if (!(await B.confirm('Delete this message? Claude will skip it.'))) return;
+    const id = del.dataset.withdraw;
+    const { key, msg } = await pendingMessage(del, id);
+    state.edits.delete(id);
+    state.withdrawnAsks.add(id);
+    B.render();
+    if (msg) msg.hidden = true;
+    try {
+      await B.send('ask-withdrawn', { id, ...(key ? { key } : {}) });
+      await hide(id, true);
+      toast('Deleted');
+      if (key) B.loadThread(key, { force: true });
+    } catch { state.withdrawnAsks.delete(id); B.render(); if (msg) msg.hidden = false; toast(B.FAILED); }
+  });
+  B.on(B.root, 'submit', async (ev) => {
+    const form = ev.target.closest('form.edit-form');
+    if (!form) return;
+    ev.preventDefault();
+    const id = form.dataset.editForm;
+    const e = state.edits.get(id);
+    if (!e) return;
+    const text = form.querySelector('textarea').value.trim();
+    if (!text) { toast('Write something, or delete the message'); return; }
+    // The new text shows at once, in the thread and on the New card; a failed save puts the old text back and reopens
+    // the edit box with what was typed (docs/adr/0151-every-owner-tap-the-server-can-apply-draws-at-once.md).
+    const before = state.threadCache.get(e.thread);
+    if (before) state.threadCache.set(e.thread, before.map((m) => (m.eventId === id ? { ...m, text, edited: true } : m)));
+    closeEditor(id);
+    const title = text.split('\n')[0];
+    try {
+      await B.send('ask-edited', { ...e.data, text }, B.drawItem(`ask:${id}`, (it) => ({ ...it, title, ask: { ...it.ask, text, edited: true } })));
+      toast('Edited');
+      B.loadThread(e.thread, { force: true });
+    } catch {
+      if (before) state.threadCache.set(e.thread, before);
+      state.edits.set(id, { ...e, text });
+      B.repaintThread(e.thread);
+      toast(B.FAILED);
+    }
+  });
+  // The asks watch polls every 10 s while an ask waits for its reply, sooner than the board's own refresh.
+  let asksSeen = false;
+  B.watch((list) => {
+    if (!list) return;
+    if (asksSeen) B.loadBoard();
+    asksSeen = true;
+  }, { kind: 'ask', limit: 50 });
+});

package/board/public/app-banner.js

@@ -0,0 +1,48 @@
+// The answer banner at the top of the board view: asks Claude answered without making work, whose answer this
+// browser hasn't seen (domain.mjs answers; docs/adr/0016-every-ask-is-a-card.md). Needs app-core.js.
+BoardView.part((B) => {
+  const { $, store, state, seen, markSeen, plural, svg } = B;
+  const { esc } = BoardUI;
+  const DISMISSED = 'dismissedAnswers';
+
+  function unseenAnswers(d) {
+    const dismissed = Object.assign(Object.create(null), store.get(DISMISSED, {}));
+    return (d.answers || []).filter((a) => seen[a.key] && a.at > seen[a.key] && !(dismissed[a.id] >= a.at) && !state.withdrawnAsks.has(a.id));
+  }
+
+  function renderBanner(d) {
+    // A New card seen before its answer counts the answer as new; one first seen in Done starts from now (app-core.js markSeen).
+    for (const it of d.items) if (it.isNew) markSeen(it, true);
+    const shown = unseenAnswers(d);
+    const el = $('#answers');
+    el.hidden = !shown.length;
+    if (!shown.length) { el.innerHTML = ''; return; }
+    const [newest] = shown;
+    const more = shown.length > 1 ? `<span class="more"> and ${shown.length - 1} more</span>` : '';
+    el.innerHTML = `<button type="button" class="answer-open" data-answer="${esc(newest.key)}">
+        <strong>${plural(shown.length, 'answer')}</strong><span class="sep"> · </span><span class="text">${esc(newest.text)}</span>${more}
+      </button>
+      <button type="button" class="ghost icon answer-dismiss" aria-label="Dismiss" title="Dismiss">${svg('<path d="M18 6 6 18M6 6l12 12"/>', 16)}</button>`;
+  }
+
+  B.on($('#answers'), 'click', (ev) => {
+    const d = state.board;
+    if (!d) return;
+    if (ev.target.closest('.answer-dismiss')) {
+      const dismissed = Object.assign(Object.create(null), store.get(DISMISSED, {}));
+      for (const a of unseenAnswers(d)) dismissed[a.id] = a.at;
+      store.set(DISMISSED, dismissed);
+      renderBanner(d);
+      return;
+    }
+    const open = ev.target.closest('[data-answer]');
+    if (!open) return;
+    const key = open.dataset.answer;
+    markSeen(d.items.find((i) => i.key === key));
+    const hash = `#item=${encodeURIComponent(key)}`;
+    if (location.hash === hash) history.replaceState(null, '', location.pathname + location.search);
+    location.hash = hash;
+  });
+
+  Object.assign(B, { renderBanner });
+});