@lovek4d/kickflip 0.0.0-stage → 0.3.1

package/board/public/view-hub.js

@@ -0,0 +1,150 @@
+// The hub page, /_hub/, a view of the app shell (shell.js): a banner while pushes are held or snoozed, the Usage card with Claude model and Codex share, Needs you for the pending
+// prompts of sessions that own no board, Health, Integrations (readiness.mjs words), each site's health and board links,
+// polling status, then hub settings summary rows (ADR 0075). A board's row can carry Restart (hub/restart-board.mjs). Health comes from GET /_hub/api/hub.
+// Its data refreshes every 30 seconds while it shows (hub-kit.js live).
+(function () {
+  // The last data, which a return to the view paints at once.
+  let last = null;
+  const { esc } = HubUI;
+
+  function rememberedHtml(sessions = []) {
+    return sessions.map((s) => `<div class="remembered"><p>Always allow · session <code>${esc(s.session)}</code></p><ul>${s.rules.map((rule) => `<li><code>${esc(rule)}</code></li>`).join('')}</ul></div>`).join('');
+  }
+
+  const RESTARTING = '<span class="st wait">Restarting</span> · stopping its session, then starting it again';
+
+  // A board with Restart (hub/restart-board.mjs restartable) keeps its link and chevron around the button, since a
+  // button can't sit inside a link.
+  function restartRow(s, sub, busy) {
+    const href = esc(s.href);
+    return `<div class="row site-row"><a class="site-link" href="${href}">${s.icon}<span class="text"><span class="title">${esc(s.title)}</span><span class="sub wrap">${sub}</span></span></a>`
+      + `<button type="button" class="btn quiet restart-btn" data-restart="${esc(s.route)}" data-title="${esc(s.title)}" aria-label="Restart ${esc(s.title)}"${busy ? ' disabled aria-busy="true"' : ''}>${busy ? '<span class="try-spin" aria-hidden="true"></span>Restarting…' : 'Restart'}</button>`
+      + `<a class="chev" href="${href}" tabindex="-1" aria-hidden="true">›</a></div>`;
+  }
+
+  // restarting: the routes whose Restart is out.
+  function sitesHtml(groups, restarting) {
+    const { row, CHEVRON } = HubUI;
+    const site = (s) => {
+      const busy = restarting.has(s.route);
+      const lines = s.lines.length ? `<span class="links">${s.lines.map((l) => `<span><b>${esc(l.link)}</b> ${esc(l.detail)}</span>`).join('')}</span>` : '';
+      const sub = busy ? RESTARTING : `<span class="st ${esc(s.tone)}">${esc(s.word)}</span>${lines}`;
+      return (s.restart ? restartRow(s, sub, busy) : row({ icon: s.icon, title: esc(s.title), sub, wrap: true, trail: CHEVRON, href: s.href })) + rememberedHtml(s.remembered);
+    };
+    return groups.map((g) => `<h2 class="label">${esc(g.label)}</h2>\n<div class="group">${g.sites.map(site).join('')}</div>\n`).join('');
+  }
+
+  function integrationsHtml(integrations) {
+    const { row, tile } = HubUI;
+    const fixHtml = (fix) => fix.command ? `<code>${esc(fix.command)}</code>` : fix.settings
+      ? `${esc(fix.text)} <button type="button" class="link" data-settings-open="${esc(fix.settings)}">${esc(fix.label)}</button>.` : esc(fix.text);
+    const rows = integrations.map((it) => row({ icon: tile(it.id, it.ready ? 'var(--color-quiet)' : 'var(--color-notice)'), title: esc(it.name), wrap: true,
+      sub: it.ready ? `<span class="st ok">Ready</span> · ${esc(it.detail)}`
+        : `<span class="st wait">Not ready</span> · ${esc(it.missing)}<span class="links"><span class="rd-fix">${fixHtml(it.fix)}</span><span class="rd-waits">${esc(it.waits)}</span></span>` })).join('');
+    return `<h2 class="label" id="integrations">Integrations</h2><div class="group">${rows}</div>
+<p class="note">A feature that needs an integration stays off until it’s ready, and says why.</p>
+`;
+  }
+
+  // A pending prompt from a session that owns no board waits here (prompts.js).
+  function promptsHtml(list, prompts) {
+    const shown = list.filter(prompts.shows);
+    return shown.length ? `<section class="waiting"><h2>Needs you · ${shown.length}</h2><ul>${shown.map((p) => BoardUI.promptItem(p, prompts.state(p))).join('')}</ul></section>` : '';
+  }
+
+  function html(d, { flash, prompts, restarting }) {
+    const { row, tile, nowRow } = HubUI;
+    const usage = HubUI.usageCard(d.usage, d.codex, d.pause, d.claude);
+    return `${HubUI.flash(flash)}${HubUI.pauseBanner(d.pause)}${HubUI.holdBanner(d.hold)}${usage}${promptsHtml(d.prompts || [], prompts)}<h2 class="label"${usage ? '' : ' style="margin-top:4px"'}>Health</h2>
+<div class="group">${row({ icon: tile('power', { ok: '#22c55e', wait: '#f59e0b' }[d.hub.tone] || '#ef4444'), title: 'Hub', sub: `<button type="button" class="st ${esc(d.hub.tone)}" data-jump="integrations">${esc(d.hub.word)}</button> ·${esc(d.hub.detail)}${d.awake ? `<span class="links"><span><span class="awake-on">Keeping awake</span> ${esc(d.awake)}</span></span>` : ''}`, wrap: true })}
+${d.empty ? row({ title: 'No sites yet', sub: 'In a Claude session, run <code>/kickflip &lt;route&gt;</code>.' }) : ''}</div>
+${integrationsHtml(d.integrations)}${sitesHtml(d.groups, restarting)}${d.remembered?.length ? `<h2 class="label">Sessions without a board</h2><div class="group">${rememberedHtml(d.remembered)}</div>` : ''}<p class="note">The hub runs every site and restarts one that stops. A board's links are what the hub owes it: GitHub polling, the fetch of its repo, events (its session and a watcher run, or the hub can wake it), daily wakes and reviewer links. One that just broke reads settling first.</p>
+<h2 class="label">Polling status</h2>
+<div class="group">${nowRow(d.polling, tile('clock', d.polling.count ? 'var(--color-notice)' : 'var(--color-quiet)'))}</div>`;
+  }
+
+  const footer = (d) => `<footer>${esc(d.sites)}. Each belongs to one Claude session, which adds it with <code>/kickflip &lt;route&gt;</code>. This page refreshes every 30 seconds.<br><span class="host">${esc(d.host)}</span></footer>`;
+
+  // iOS shows an app badge only in a Home Screen app with notifications allowed; elsewhere this does nothing.
+  function badge(n) {
+    if (!('setAppBadge' in navigator)) return;
+    try { (n ? navigator.setAppBadge(n) : navigator.clearAppBadge()).catch(() => {}); } catch { /* not allowed here */ }
+  }
+
+  (globalThis.AppViews ||= {}).hub = {
+    className: 'hub-view view-hub',
+    title: () => 'Hub',
+    markup: () => `${BoardUI.header({ lead: 'logo', title: 'Hub', time: 'now', logoSrc: '/_hub/kickflip.png', settingsHref: null })}
+<main class="has-top"><div class="hub-status"></div><section class="hub-settings" aria-labelledby="hubSettingsLabel"><h2 class="label" id="hubSettingsLabel">Hub settings</h2>${HubSettings.markup()}</section><div class="hub-foot"></div></main>`,
+
+    create: (root, siteRoot, ctx) => BoardView.page(root, siteRoot, (B) => {
+      const main = B.$('.hub-status');
+      // A change in the Notifications modal can start or end the hold the banner shows.
+      const settings = HubSettings.create(B.$('.hub-settings'), siteRoot, { ...ctx, sidebarChanged: () => { ctx.sidebarChanged?.(); load(); } });
+      settings.mount();
+      B.atUnmount(() => settings.unmount());
+      B.on(B.$('#refresh'), 'click', () => settings.B.refreshSettings?.());
+      let flash = null;
+      const restarting = new Set();
+      B.openSettings = (...args) => settings.B.openSettings(...args);
+      async function restart(route, title) {
+        if (restarting.has(route) || !(await BoardDialogs.confirm(`This stops ${title}’s session mid-task, along with any implementer it started, then restarts its server and resumes the session. Its cards and threads stay. For a stuck board. Restart ${title}?`))) return;
+        restarting.add(route);
+        flash = null;
+        paint();
+        let out = null;
+        try {
+          const r = await fetch('/_hub/restart-board', { method: 'POST', headers: { accept: 'application/json', 'content-type': 'application/json' }, body: JSON.stringify({ route }) });
+          out = await r.json().catch(() => null);
+          if (!r.ok || !out) throw new Error();
+          if (B.alive()) B.toast(`${out.title} is back up, and its session is listening.`);
+        } catch { flash = { text: out?.error || `Could not restart ${title}. Is the host awake?`, error: true }; }
+        restarting.delete(route);
+        if (B.alive()) { paint(); load(); }
+      }
+      B.on(main, 'click', (e) => {
+        const opener = e.target.closest?.('[data-settings-open]');
+        if (opener) B.openSettings({ hash: `#${opener.dataset.settingsOpen}` }, opener);
+        // The Hub's status word jumps to what's behind it: Integrations, then each board's links below them.
+        const jump = e.target.closest?.('[data-jump]');
+        if (jump) B.$(`#${jump.dataset.jump}`).scrollIntoView({ behavior: 'smooth', block: 'start' });
+        const restarter = e.target.closest?.('[data-restart]');
+        if (restarter) restart(restarter.dataset.restart, restarter.dataset.title);
+      });
+      const foot = B.$('.hub-foot');
+      const paint = () => {
+        if (!last) return;
+        main.innerHTML = html(last, { flash, prompts, restarting });
+        foot.innerHTML = footer(last);
+      };
+      const prompts = PromptAnswers.wire(B, {
+        list: () => last?.prompts || [],
+        paint,
+        notify(text) { flash = { text, error: true }; paint(); },
+        after: () => load(),
+      });
+      const forms = HubKit.forms(B, {
+        accepts: (action, form) => action === '/_hub/push/flush' || ['/_hub/settings/codex', '/_hub/settings/claude-model', '/_hub/settings/pause-at', '/_hub/settings/keep-going'].includes(action) || Boolean(form?.closest?.('.hold-banner')),
+        answer(out, action) {
+          if (['/_hub/settings/codex', '/_hub/settings/claude-model', '/_hub/settings/pause-at', '/_hub/settings/keep-going'].includes(action)) {
+            last = out; flash = null; paint();
+            if (action.endsWith('/keep-going')) B.toast(out.pause.state === 'going' ? `Keep going: work runs past the buffer until ${BoardUI.usageClock(out.pause.resets_at)}.` : 'Stopped: new work waits again.');
+          } else if (action === '/_hub/push/flush') { flash = { text: out.message, error: !out.ok }; load(); } else { flash = null; load(); settings.B.refreshSettings?.(); }
+          ctx.sidebarChanged?.();
+        },
+        fail(message) { flash = { text: message, error: true }; paint(); },
+      });
+      const load = HubKit.live(B, {
+        url: () => '/_hub/api/hub',
+        paint(d) {
+          if (!d) { if (!last) main.innerHTML = '<p class="note">Offline. Is the host awake?</p>'; return; }
+          last = d;
+          paint();
+          badge(Number(d.total) || 0);
+        },
+        busy: () => forms.busy() || Boolean(root.querySelector('[data-dirty]')) || Boolean(root.querySelector('dialog[open]')),
+      });
+      paint();
+    }),
+  };
+})();

package/board/public/view-notes.js

@@ -0,0 +1,32 @@
+// An item's notes, /<route>/notes.html?item=<wave>/<id>, a view of the app shell (shell.js)
+// (docs/adr/0053-notes-replace-the-full-plan-and-cards-start-on-their-own.md). Back goes to the item's card.
+// ?wave=<slug> shows a wave's goal, order and note instead, and back goes to the board.
+(globalThis.AppViews ||= {}).notes = {
+  className: 'view-notes',
+  title: () => 'Notes',
+  markup: ({ item, wave }) => `${BoardUI.header({ lead: 'back', title: 'Notes', titleId: 'ref', backHref: wave ? './' : `./#item=${encodeURIComponent(item || '')}`, controls: false })}
+<main>
+  <article class="plan" id="plan"><p class="muted">Loading the notes…</p></article>
+</main>`,
+
+  create: (root, siteRoot, ctx) => BoardView.page(root, siteRoot, async (B) => {
+    const { $, site } = B;
+    const { esc, markdown, linkContext, fetchJSON, restartNotice } = BoardUI;
+    const key = ctx.view.item || '';
+    const wave = ctx.view.wave;
+    const el = $('#plan');
+    const get = (url, opts = {}) => fetchJSON(url, { ...opts, sleep: B.sleep });
+    try {
+      const board = get(site.url('api/board')).then((r) => r.body).catch(() => ({}));
+      const query = wave ? `wave=${encodeURIComponent(wave)}` : `item=${encodeURIComponent(key)}`;
+      const r = await get(site.url(`api/notes?${query}`), { onWait: () => { el.innerHTML = restartNotice(); } });
+      if (!B.alive()) return;
+      if (!r.ok) throw new Error(r.body.error || `notes ${r.status}`);
+      $('#ref').textContent = `${wave ? r.body.title : r.body.ref} notes`;
+      document.title = $('#ref').textContent;
+      el.innerHTML = markdown(r.body.markdown, linkContext((await board).items || [], key, { base: './' }));
+    } catch (e) {
+      el.innerHTML = `<p class="muted">Could not load these notes: ${esc(e.message)}</p>`;
+    }
+  }),
+};

package/board/public/view-polling.js

@@ -0,0 +1,87 @@
+// HubPolling, the editor inside Hub’s Polling modal (ADR 0075): the day’s windows, overnight hold
+// and daily wakes, in hub/views.mjs pollingView's words from GET /_hub/api/polling. ?w= names the window shown,
+// which a tap on the day bar changes in place. Each change posts to /_hub/settings/polling and saves at once.
+(function () {
+  // The last data, which a return to the view paints at once.
+  let last = null;
+  const { esc } = HubUI;
+  const ACTION = '/_hub/settings/polling';
+  // Each change posts op and w, the shown window's start.
+  const form = (op, w, inner, attrs = '') => `<form method="post" action="${ACTION}"${attrs}>${op ? `<input type="hidden" name="op" value="${op}">` : ''}<input type="hidden" name="w" value="${esc(w)}">${inner}</form>`;
+
+  function dayBar(day, sel) {
+    const segs = day.segments.map((g) => `<a class="seg${g.w === sel ? ' sel' : ''}${g.held ? ' held' : ''}" href="${esc(AppRouter.urlOf({ kind: 'hub', hash: '#polling', w: g.w }))}" data-w="${esc(g.w)}" style="left:${g.left};width:${g.width};--k:${g.shade}"`
+      + ` aria-label="${esc(g.aria)}"${g.w === sel ? ' aria-current="true"' : ''}>${g.label ? `<span>${esc(g.label)}</span>` : ''}</a>`).join('');
+    const pins = day.pins.map((p) => `<span class="pin" style="left:${p.left}" title="${esc(p.title)}" aria-hidden="true">▼</span>`).join('');
+    const ticks = ['12am', '6am', '12pm', '6pm', '12am'].map((t, i) => `<span style="left:${i * 25}%">${t}</span>`).join('');
+    const legend = ['<span><i style="background:var(--muted)"></i>darker checks more often</span>',
+      day.held && '<span><i style="background:repeating-linear-gradient(135deg,var(--muted) 0 3px,var(--chip) 3px 5px)"></i>pushes held</span>',
+      day.wakes && '<span style="color:var(--color-notice)">▼ wake</span>',
+      '<span><i style="background:var(--text);width:2px"></i>now</span>'].filter(Boolean).join('');
+    return `<div class="day">${pins}<span class="now" style="left:${day.now}" aria-hidden="true"></span><div class="bar">${segs}</div><div class="ticks" aria-hidden="true">${ticks}</div></div><div class="legend">${legend}</div>`;
+  }
+
+  function html(d, sel, flash) {
+    const { row, tile, nowRow } = HubUI;
+    const w = d.windows.find((x) => x.from === sel);
+    const chips = w.every.map((c) => `<button class="btn${c.on ? '' : ' quiet'}" name="value" value="${c.minutes}"${c.on ? ' aria-pressed="true"' : ''}>${esc(c.label)}</button>`).join('');
+    const wakeChips = d.wakes.map((t) => `<button class="btn quiet" name="value" value="${esc(t.value)}" aria-label="Remove the ${esc(t.label)} wake">${esc(t.label)} ✕</button>`).join('');
+    return `${HubUI.flash(flash)}<h2 class="label" style="margin-top:4px">Now</h2>
+<div class="group">${nowRow(d.now)}</div>
+<h2 class="label" id="day">Your day</h2>
+<div class="group"><div class="block">${dayBar(d.day, w.from)}</div></div>
+<h2 class="label" id="window">${esc(w.range)}</h2>
+<div class="group">
+${form('from', w.from, `<label class="body"><span class="text title">Starts</span><input type="time" name="value" value="${esc(w.from)}" required data-autosave></label>`, ' class="row field"')}
+${row({ title: 'Ends', trail: `<span class="val">${esc(w.ends)}</span>` })}
+${form('every', w.from, `<span class="title">Checks every</span><span class="chips">${chips}</span><span class="sub" style="margin-top:6px">${esc(w.checks)}</span>`, ' class="block"')}
+${form('', w.from, `<button class="btn quiet" name="op" value="split"${w.split ? '' : ' disabled'}>Split in two</button><button class="btn quiet danger" name="op" value="remove"${w.remove ? '' : ' disabled'}>Remove</button>`, ' class="block split"')}
+</div>
+<h2 class="label" id="quiet">Quiet times</h2>
+<div class="group">${form('hold', w.from, `${tile('moon', '#6366f1')}<label class="body"><span class="text"><span class="title">Hold pushes overnight</span></span><input type="checkbox" name="value" value="on" class="toggle" data-submit${d.hold.on ? ' checked' : ''}></label>`, ' class="row field"')}</div>
+<h2 class="label" id="wakes">Daily wakes</h2>
+<div class="group"><div class="block"><div class="chips" style="margin-top:0">${wakeChips ? form('wake-remove', w.from, wakeChips) : ''}${form('wake-add', w.from, '<input type="time" name="value" required aria-label="New wake time"><button class="btn quiet">+ Add</button>', ' class="field"')}</div></div></div>`;
+  }
+
+  globalThis.HubPolling = {
+    create: (root, siteRoot, ctx) => BoardView.page(root, siteRoot, (B) => {
+      const main = root;
+      let sel = ctx.view?.w || null;
+      let flash = null;
+      const shown = () => (last.windows.some((x) => x.from === sel) ? sel : last.select);
+      const paint = () => { if (last) main.innerHTML = html(last, shown(), flash); };
+      // The shown window lives in the URL, so a reload or a shared link shows it too.
+      const select = (w) => {
+        sel = w;
+        history.replaceState(history.state, '', AppRouter.urlOf({ kind: 'hub', hash: '#polling', w }));
+        paint();
+      };
+      B.selectWindow = select;
+      B.on(root, 'click', (e) => {
+        const seg = e.target.closest?.('a.seg[data-w]');
+        if (!seg || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+        e.preventDefault();
+        select(seg.dataset.w);
+      });
+      const forms = HubKit.forms(B, {
+        answer(out, action) {
+          if (action === ACTION) { last = out; flash = null; select(out.select); }
+          else { flash = { text: out.message, error: !out.ok }; load(); }
+          ctx.changed?.();
+          ctx.sidebarChanged?.();
+        },
+        fail(message) { flash = { text: message, error: true }; paint(); },
+      });
+      const load = HubKit.live(B, {
+        url: () => `/_hub/api/polling${sel ? `?w=${encodeURIComponent(sel)}` : ''}`,
+        paint(d) {
+          if (!d) { if (!last) main.innerHTML = '<p class="note">Offline. Is the host awake?</p>'; return; }
+          last = d;
+          paint();
+        },
+        busy: () => forms.busy() || Boolean(root.querySelector('input:focus')),
+      });
+      paint();
+    }),
+  };
+})();