@lovek4d/kickflip 0.5.0 → 0.6.0

package/board/public/shell.js

@@ -6,8 +6,8 @@
 // view in place through router.js; a link to anything that isn't a page loads it. Leaving a view whose root holds
 // [data-dirty], an unsaved edit, asks first. The shell holds the hub's one stream, /_hub/stream
 // (hub/stream.mjs): `change {route}` signals the open board, and `sidebar` repaints the sidebar. A board the shell
-// leaves is unmounted; one left fresh whose stream sent no change since paints live when it comes back, and any other
-// paints dimmed from its last visit (docs/adr/2026-10-29-1639-the-board-opens-on-the-last-visit.md).
+// leaves is unmounted, and paints live from its saved copy when it comes back
+// (docs/adr/2026-11-05-1819-the-board-syncs-by-change-number.md).
 // A push tap reaches it from hub/sw.js as {open: url}, and a page framed inside it hands it a view's URL through
 // AppShell.open(url, {replace, frames}) → true when the shell shows it in place; frames false refuses a frame view.
 // AppShell.reload() reloads the app past the shell the service worker keeps.
@@ -44,6 +44,9 @@ window.AppShell = (function () {
   }
 
   async function start() {
+    // The shell sends every view to the top itself, so the browser's own scroll restore is off: after a reload iOS put the old
+    // offset back once the page had grown, and left that area unpainted until a scroll (docs/adr/2026-11-06-1100-the-shell-turns-off-scroll-restoration.md).
+    history.scrollRestoration = 'manual';
     // A frame that lands on a view's URL, such as a framed page's link back to its card, shows it in the shell around it.
     if (outer()?.open(location.href, { frames: false })) return;
     // The same URL and scope as hub-kit.js's push registration, so the one registration and its push subscription stay.
@@ -57,6 +60,20 @@ window.AppShell = (function () {
     // A stored sidebar's code says nothing about the shell that booted, so it adopts the next live hash.
     bootCode = data?.code || null;
     data ||= read(DATA_KEY);
+    // A board shared with someone else (docs/adr/2026-11-05-2215-a-board-is-shared-view-only-with-a-tailscale-login.md):
+    // the hub sends them data.shared, and style.css hides what writes under .shared-view. On a board they have Full on
+    // (data.shared.full; docs/adr/2026-11-05-1912-a-shared-person-is-view-or-full.md) the page is .shared-full too,
+    // which shows the composers and card buttons again; levelHere follows the route shown and each sidebar event.
+    const shared = data?.shared || null;
+    document.documentElement.classList.toggle('shared-view', Boolean(shared));
+    const sharedHere = (route) => ({ by: data?.shared?.by ?? null, full: Boolean(data?.shared?.full?.includes(route)) });
+    function levelHere() {
+      if (!shared || !current) return;
+      const here = sharedHere(current.route);
+      document.documentElement.classList.toggle('shared-full', here.full);
+      const strip = current.root.querySelector('.view-only-strip');
+      if (strip) strip.innerHTML = BoardView.sharedStrip(here);
+    }
     sidebar = Sidebar.mount({ data, poll: false, reload, open: (href) => { if (!open(href)) location.assign(href); } });
     const boards = () => new Set((data?.sites || []).filter((s) => s.board).map((s) => s.route));
     const titleOf = (route) => data?.sites?.find((s) => s.route === route)?.title || route;
@@ -68,13 +85,8 @@ window.AppShell = (function () {
       listeners.get(route).add(fn);
       return () => listeners.get(route)?.delete(fn);
     };
-    // route → {fresh, generatedAt} for each board left fresh with no change since. Trusted only while the stream is up:
-    // a dropped stream may have missed a change, so its return forgets them all.
-    const left = new Map();
-    let streamUp = false;
     let current = null;
     function changed(route) {
-      left.delete(route);
       for (const fn of listeners.get(route) || []) fn();
     }
 
@@ -90,8 +102,7 @@ window.AppShell = (function () {
       const cur = es = new EventSource('/_hub/stream');
       cur.addEventListener('open', () => {
         tries = 0;
-        streamUp = true;
-        if (opened) { left.clear(); if (current) changed(current.route); }
+        if (opened && current) changed(current.route);
         opened = true;
       });
       cur.addEventListener('change', (e) => {
@@ -103,10 +114,10 @@ window.AppShell = (function () {
         try { data = JSON.parse(e.data); } catch { return; }
         codeSeen(data.code);
         sidebar.setData(data);
+        levelHere();
         current?.v?.B?.renderStatus?.();
       });
       cur.addEventListener('error', () => {
-        streamUp = false;
         if (cur.readyState !== EventSource.CLOSED || es !== cur) return;
         retry = setTimeout(openStream, Math.min(30000, 1000 * 2 ** tries++));
       });
@@ -116,7 +127,9 @@ window.AppShell = (function () {
     // minute while present. While away the first one goes at once and the moon goes from this page at the same moment
     // (docs/adr/2026-11-04-0226-the-hub-checks-every-minute-while-youre-here-and-every-5-when-away.md).
     let beatAt = 0;
+    // A shared person's taps are never the owner's.
     const beat = () => {
+      if (shared) return;
       const away = Boolean(data?.away);
       if (!away && Date.now() - beatAt < 60_000) return;
       beatAt = Date.now();
@@ -125,6 +138,14 @@ window.AppShell = (function () {
     };
     for (const type of ['pointerdown', 'keydown', 'scroll']) addEventListener(type, beat, { capture: true, passive: true });
 
+    // docs/adr/2026-11-05-1834-while-typing-the-header-is-a-strip-and-the-send-bar-sits-on-the-keyboard.md
+    // While a text field has focus :root.typing is set and style.css disables the floating + (New task); nothing else
+    // on the page moves.
+    document.addEventListener('focusin', (ev) => {
+      document.documentElement.classList.toggle('typing', ev.target.matches?.('textarea, input[type="text"], input:not([type])') ?? false);
+    });
+    document.addEventListener('focusout', () => document.documentElement.classList.remove('typing'));
+
     // A view that changed what the sidebar's foot rows say, such as notifications, asks for a fresh copy
     // rather than waiting for the stream's next one.
     async function refreshSidebar() {
@@ -173,38 +194,28 @@ window.AppShell = (function () {
       const board = view.kind === 'board';
       const hub = route === undefined;
       const siteTitle = hub ? 'Hub' : titleOf(route);
-      if (current) {
-        const st = current.v.B.state;
-        const keep = streamUp && st?.view === 'fresh' && st.board ? { fresh: st.fresh, generatedAt: st.board.generatedAt } : null;
-        current.v.unmount();
-        if (keep) left.set(current.route, keep);
-      }
+      if (current) current.v.unmount();
       const page = board ? null : AppViews[view.kind];
       const root = document.createElement('div');
       root.className = board ? 'view-board' : page.className;
-      root.innerHTML = board ? BoardView.markup({ title: siteTitle }) : page.markup(view, { siteTitle });
+      root.innerHTML = board ? BoardView.markup({ title: siteTitle, shared: shared && sharedHere(route) }) : page.markup(view, { siteTitle });
       if (current) current.root.replaceWith(root); else scrim.after(root);
       const siteRoot = hub ? '/_hub' : '/' + encodeURIComponent(route);
       let v;
       if (board) {
-        const live = streamUp ? left.get(route) || null : null;
-        left.delete(route);
-        v = BoardView.create(root, siteRoot, { signal: signalFor(route), live, pause: () => data?.pause, away: () => data?.away });
+        v = BoardView.create(root, siteRoot, { signal: signalFor(route), pause: () => data?.sites?.find((s) => s.route === route)?.pause || data?.pause, away: () => data?.away });
       } else {
         v = page.create(root, siteRoot, { view, siteTitle, boards, open: openHere, toggleSidebar: sidebar.toggle, keydown: sidebar.keydown, pointerdown: sidebar.pointerdown,
           reload: () => go(AppRouter.viewOf(location.href, { boards: boards() }), location.href, 'reload'), closeSidebar: sidebar.close, up: () => router.up(),
           loaded: (url, title) => { if (current?.v === v) framed(url, title); }, sidebarChanged: refreshSidebar });
       }
       current = { view, route, root, v };
+      levelHere();
       document.title = board ? siteTitle : page.title(view, { siteTitle });
       if (boards().has(route)) { try { localStorage.setItem(LAST_KEY, route); } catch { /* no storage: `/` opens the start board */ } }
       sidebar.setHere(hub ? new URL(AppRouter.urlOf(view), location.href).pathname.slice(1) : route);
       scrollTo(0, 0);
-      // Every other page of a board has the board's + and its sheet too; the hub's own pages aren't a board's.
-      const plus = !board && boards().has(route);
-      if (plus) root.insertAdjacentHTML('beforeend', BoardNewTask.markup());
       v.mount();
-      if (plus) BoardNewTask.wire(v.B);
       if (modal) showSettings();
     }
 
@@ -230,8 +241,29 @@ window.AppShell = (function () {
     // go(view, href, how, from): router.js's, with how 'replace' for a framed page's hand-off and 'reload' for a view's
     // own refresh. → true, or a promise of whether the view switched once the owner answers about an unsaved edit.
     let router = null;
+    const wide = matchMedia('(min-width: 900px)');
+    // Board and Waiting on you are a board's two pages (docs/adr/2026-11-07-1300-board-and-open-questions-are-two-pages.md):
+    // from 900px the board shows Waiting on you in its pane, so every view of the questions page, a link, a push, a
+    // hand-off, a history entry or a cold load, shows the board at its own URL and opens the question's topic there (id,
+    // or null for none). A board just shown takes a moment to fill its pane, so the pane is asked again until it has.
+    function focusPane(id, tries = 50) {
+      if (current?.view.kind !== 'board' || current.v.B.focusQuestion?.(id) || tries <= 0) return;
+      setTimeout(() => focusPane(id, tries - 1), 100);
+    }
     function go(view, href, how, from) {
       if (!AppRouter.mounted(view)) return false;
+      if (view.kind === 'questions' && wide.matches) {
+        const board = { kind: 'board', route: view.route, hash: '' };
+        const boardHref = new URL(AppRouter.urlOf(board), location.href).href;
+        if (how === 'pop') history.replaceState(history.state, '', boardHref);
+        // On its own board it only opens the topic, so the URL, history and an open card stay as they are.
+        else if (current?.view.kind === 'board' && current.route === view.route && !settings) {
+          focusPane(view.id);
+          sidebar.close();
+          return true;
+        }
+        return Promise.resolve(go(board, boardHref, how, from)).then((shown) => { if (shown) focusPane(view.id); return shown; });
+      }
       if (view.kind === 'settings') {
         if (current?.view.kind === 'board' && current.route === view.route) {
           const here = AppRouter.viewOf(location.href, { boards: boards() });
@@ -283,7 +315,17 @@ window.AppShell = (function () {
     }
     if (!AppRouter.mounted(first)) { location.replace('/_hub/'); return; }
 
-    router = AppRouter.listen({ boards, go });
+    let pane = null;
+    if (first.kind === 'questions' && wide.matches) {
+      pane = { id: first.id };
+      first = { kind: 'board', route: first.route, hash: '' };
+      history.replaceState(history.state, '', AppRouter.urlOf(first));
+    }
+    router = AppRouter.listen({ boards, go, wide: () => wide.matches });
+    // Widening past 900px on Waiting on you swaps to the board with that topic open in the pane.
+    wide.addEventListener('change', () => {
+      if (wide.matches && current?.view.kind === 'questions') go(AppRouter.viewOf(location.href, { boards: boards() }), location.href, 'replace');
+    });
     opener = (url, { replace = false, frames = true } = {}) => {
       const view = AppRouter.viewOf(url, { boards: boards() });
       if (!AppRouter.mounted(view) || (!frames && view.kind === 'frame')) return false;
@@ -299,6 +341,7 @@ window.AppShell = (function () {
     navigator.serviceWorker?.startMessages?.();
 
     show(first);
+    if (pane) focusPane(pane.id);
     openStream();
     addEventListener('visibilitychange', () => { if (!document.hidden) openStream(); });
     addEventListener('pageshow', openStream);
@@ -307,7 +350,6 @@ window.AppShell = (function () {
     addEventListener('pagehide', (e) => {
       if (!e.persisted || !es) return;
       clearTimeout(retry);
-      streamUp = false;
       es.close();
     });
   }

package/board/public/sidebar.css

@@ -180,6 +180,7 @@ html.sb-update body.has-sidebar > .top .hub::after, html.sb-update body.has-side
 .sidebar .t-building { --tone: var(--color-notice); }
 .sidebar .t-ok { --tone: var(--color-success); }
 .sidebar .t-wait { --tone: var(--color-notice); }
+.sidebar .t-paused { --tone: var(--muted); }
 
 @media (min-width: 900px) {
   body.has-sidebar { padding-left: 272px; }

package/board/public/sidebar.js

@@ -1,5 +1,5 @@
 // The sidebar's behaviour on a page with <aside id="sidebar" class="sidebar"> and <div id="sidebarScrim"
-// class="sidebar-scrim">, after ui-phase-bars.js, ui-page-header.js and ui-sidebar.js (docs/adr/2026-10-29-1639-a-sidebar-of-every-board-replaces-the-hub-home.md).
+// class="sidebar-scrim">, after ui-progress-bar.js, ui-page-header.js and ui-sidebar.js (docs/adr/2026-10-29-1639-a-sidebar-of-every-board-replaces-the-hub-home.md).
 // Sidebar.mount({here, data}) paints `data` or the last copy this device stored; the app shell hands it each new copy
 // through setData from its one stream (shell.js). The page header's logo (a.hub) toggles the sidebar at every
 // width, with what waits on the other sites in its accessible label. Below 900px the sidebar is a drawer: the logo or a swipe in from the
@@ -17,8 +17,8 @@
 // logo does, checkDevice reading this device's push subscription again, and keydown and pointerdown taking a framed
 // page's events (view-frame.js), as the document's own
 // A starting board's row (docs/adr/2026-11-04-1914-a-new-board-shows-its-start-steps-and-clone-progress.md): its seconds
-// tick in place each second, and a repaint sets its running bar's pulse from the clock, so a new copy never restarts
-// it. When the board joins, its row fades in, and a repaint during the fade carries it on from where it was.
+// tick in place each second, and its running bar beats on every pulse's one clock (ui-progress-bar.js onePulse). When
+// the board joins, its row fades in, and a repaint during the fade carries it on from where it was.
 (function () {
   const DATA_KEY = 'hub:sidebar';
   // app.html reads it before the first paint, so a collapsed rail never shows for a moment.
@@ -27,8 +27,7 @@
   // A phone has no keys to press, so it never shows the shortcuts sheet.
   const DESKTOP = '(hover: hover) and (pointer: fine)';
   const TWICE_MS = 1000;
-  // style.css pulse-fill's period, and sidebar.css sb-join's length.
-  const PULSE_MS = 1400;
+  // sidebar.css sb-join's length.
   const JOIN_MS = 2500;
   // paint() sets the bar's duration from this and its delay from switching.started.
   const IDLE_MS = 3000;
@@ -58,6 +57,8 @@
     if (!data) { try { data = JSON.parse(read(DATA_KEY) || 'null'); } catch { data = null; } }
     let device = null;
     let update = null;
+    // The hub's version when this page booted; the row names the version only once it differs.
+    let bootVersion = data?.version ?? null;
     let updateHTML = '';
     const rail = matchMedia(RAIL);
     const html = document.documentElement;
@@ -70,7 +71,7 @@
       const logo = [...document.querySelectorAll('.top a.hub')].find(pageLogo);
       if (!logo) return;
       const n = othersWaiting(data, here);
-      logo.setAttribute('aria-label', `Boards${update ? ', new version ready' : data?.upgrade ? ', update available' : ''}${n ? `, ${n} waiting on other boards` : ''}`);
+      logo.setAttribute('aria-label', `Boards${update ? ', new version ready' : ''}${n ? `, ${n} waiting on other boards` : ''}`);
     }
     // switching: {opened, started, timer} while switch mode shows, opened when it opened the drawer, started on performance.now().
     let switching = null;
@@ -88,7 +89,6 @@
     }
     function paintStarts() {
       const now = Date.now();
-      for (const bar of aside.querySelectorAll('.sb-starting .phase-bars i.now')) bar.style.animationDelay = `-${now % PULSE_MS}ms`;
       for (const [route, at] of joined) {
         const row = now - at < JOIN_MS && aside.querySelector(`a.sb-row[href="/${encodeURIComponent(route)}/"]`);
         if (!row) { joined.delete(route); continue; }
@@ -101,7 +101,7 @@
     }
     // A repaint keeps the drawer's scroll, so a new copy doesn't move the list under a finger.
     function paint() {
-      html.classList.toggle('sb-update', Boolean(update || data?.upgrade));
+      html.classList.toggle('sb-update', Boolean(update));
       if (!data) return;
       const scroll = aside.querySelector('.sb-scroll');
       const top = painted ? scroll?.scrollTop : undefined;
@@ -113,11 +113,14 @@
         bar.style.animationDelay = `${switching.started - performance.now()}ms`;
         bar.style.animationDuration = `${IDLE_MS}ms`;
       }
+      // A shared person's sidebar has no update row (ui-sidebar.js).
       const fresh = aside.querySelector('.sb-update');
-      if (held) fresh.replaceWith(held);
-      const row = updateRow(update, data.upgrade);
-      if (!held || row !== updateHTML) (held || fresh).innerHTML = row;
-      updateHTML = row;
+      if (fresh) {
+        if (held) fresh.replaceWith(held);
+        const row = updateRow(update, data.version && data.version !== bootVersion ? data.version : null);
+        if (!held || row !== updateHTML) (held || fresh).innerHTML = row;
+        updateHTML = row;
+      }
       const list = aside.querySelector('.sb-scroll');
       if (list) list.scrollTop = top ?? list.scrollHeight;
       paintStarts();
@@ -128,6 +131,7 @@
       if (!next) return;
       const starting = new Set(startsRunning().map((s) => s.route));
       for (const s of next.sites || []) if (starting.has(s.route)) joined.set(s.route, Date.now());
+      bootVersion ??= next.version ?? null;
       data = next;
       write(DATA_KEY, JSON.stringify(data));
       paint();
@@ -192,28 +196,10 @@
         if (!refreshApp.disabled && update !== 'reloading') { setUpdate('reloading'); reload(); }
         return;
       }
-      const upgradeApp = e.target.closest?.('[data-app-upgrade]');
-      if (upgradeApp) { if (!upgradeApp.disabled) upgrade(upgradeApp); return; }
       if (e.target.closest?.('[data-new-board]')) { newBoard(); return; }
       const failed = e.target.closest?.('[data-failed-start]');
       if (failed) openFailed(failed.dataset.failedStart);
     });
-    // Upgrade asks the hub to run kickflip update (docs/adr/2026-11-03-1521-the-hub-offers-a-newer-kickflip-from-npm.md). The row
-    // waits (ui.js waitOn) until the hub answers with what it did, then while that update waits or runs (ui-sidebar.js
-    // updateRow), and a refusal shows as a failed update.
-    function upgrade(button) {
-      BoardUI.waitOn(button, (async () => {
-        let next;
-        try {
-          const response = await fetch('/_hub/upgrade', { method: 'POST', headers: { 'content-type': 'application/json' }, body: '{}' });
-          const body = await response.json().catch(() => ({}));
-          next = response.ok ? body.upgrade : { ...data.upgrade, state: 'failed', error: body.error || 'The hub didn’t answer.' };
-        } catch {
-          next = { ...data.upgrade, state: 'failed', error: 'The hub didn’t answer.' };
-        }
-        setData({ ...data, upgrade: next });
-      })());
-    }
     // A failed start's sheet (docs/adr/2026-11-02-2006-a-failed-start-retries-from-its-sheet.md). Dismiss deletes its Starting
     // record; Retry starts it again, and its row reads starting… until the hub's next copy says otherwise.
     function openFailed(route) {