@lovek4d/kickflip 0.1.0 → 0.3.1

package/board/public/linear-key.js

@@ -0,0 +1,141 @@
+// Hub's Linear key slot. Hub settings › Linear mounts it, and the Tickets control (dialogs.js) opens it over Board
+// settings or New board when Linear is tapped without a working key
+// (docs/adr/0117-a-board-picks-linear-only-while-hubs-key-works.md). A key saves on paste, change or Enter through
+// POST /_hub/settings/linear, which checks it with Linear; linear is hub/views.mjs settingsView's `linear`.
+(function () {
+  const FAILED = 'Could not save. Is the host awake?';
+  const SPIN = '<span class="try-spin" aria-hidden="true"></span>';
+  const works = (linear) => Boolean(linear?.set && !linear.refused);
+
+  function slot(linear, { checking, flash }) {
+    const { esc, row, tile } = HubUI;
+    const sub = checking ? `<span class="lk-checking">${SPIN}Checking the key with Linear…</span>`
+      : `${linear.down ? `<span class="st down">${esc(linear.down)}</span> · ` : ''}${linear.keys
+        ? esc(linear.sub).replace(esc(linear.keys.label), `<a href="${esc(linear.keys.url)}" target="_blank" rel="noopener">${esc(linear.keys.label)}</a>`)
+        : esc(linear.sub)}`;
+    const remove = linear.set && !checking ? '<button type="button" class="btn quiet danger" data-linear-remove>Remove</button>' : '';
+    const placeholder = checking ? 'Checking…' : linear.set ? 'Paste a new key to replace it' : 'Paste a Linear API key';
+    return `${HubUI.flash(flash)}<div class="group">${row({ icon: tile('key', linear.refused ? 'var(--color-danger)' : 'var(--color-quiet)'), title: esc(linear.title), sub, wrap: !works(linear), trail: remove })}`
+      + `<form class="block lk-form"><input id="linearKey" name="key" type="password" required${checking ? ' disabled' : ''} placeholder="${placeholder}" aria-label="Linear API key" autocomplete="off" autocapitalize="off" spellcheck="false"></form></div>`
+      + '<p class="note">Stays on the host. Boards use it to list teams and projects, create issues and move the ones that are yours. A board can pick Linear for its tickets only while this key works.</p>';
+  }
+
+  // Draws the slot into root and saves from it. busy(true) starts each save and busy(false) ends it; saved(out) gets
+  // each answer, /_hub/api/settings's JSON, before the slot repaints; worked() follows a saved key Linear accepted.
+  // → {busy(), settled(): a promise that resolves once no save is out, linear(), set(linear) unless busy, destroy()}
+  function mount(root, { linear, saved = () => {}, worked = () => {}, busy = () => {} }) {
+    let current = linear, flash = null, checking = false, pending = null, destroyed = false;
+    const paint = () => {
+      const typed = root.querySelector('#linearKey')?.value || '';
+      root.innerHTML = slot(current, { checking, flash });
+      if (!checking) root.querySelector('#linearKey').value = typed;
+    };
+    function post(body) {
+      checking = body.has('key');
+      flash = null;
+      pending = (async () => {
+        try {
+          const r = await fetch('/_hub/settings/linear', { method: 'POST', headers: { accept: 'application/json', 'content-type': 'application/x-www-form-urlencoded' }, body });
+          const out = await r.json().catch(() => null);
+          if (destroyed) return;
+          if (r.ok && out) { current = out.linear; saved(out); } else flash = { text: out?.error || FAILED, error: true };
+        } catch { flash = { text: FAILED, error: true }; }
+        const key = checking;
+        checking = false;
+        pending = null;
+        if (destroyed) return;
+        busy(false);
+        paint();
+        if (key && works(current)) worked();
+      })();
+      busy(true);
+      paint();
+      return pending;
+    }
+    const save = (value) => { if (!pending && value.trim()) post(new URLSearchParams({ key: value.trim() })); };
+    const onPaste = (e) => {
+      const text = e.clipboardData?.getData('text');
+      if (!e.target.matches?.('#linearKey') || !text) return;
+      e.preventDefault();
+      e.target.value = text.trim();
+      save(e.target.value);
+    };
+    const onChange = (e) => { if (e.target.matches?.('#linearKey')) save(e.target.value); };
+    const onSubmit = (e) => {
+      if (!e.target.matches?.('.lk-form')) return;
+      e.preventDefault();
+      save(e.target.querySelector('#linearKey').value);
+    };
+    const onClick = async (e) => {
+      if (!e.target.closest?.('[data-linear-remove]') || pending) return;
+      if (await BoardDialogs.confirm('Boards on Linear can’t create issues or move tickets until you add a key again. Remove the Linear key?') && !destroyed) post(new URLSearchParams({ remove: '1' }));
+    };
+    const listeners = [['paste', onPaste], ['change', onChange], ['submit', onSubmit], ['click', onClick]];
+    for (const [type, fn] of listeners) root.addEventListener(type, fn);
+    paint();
+    return {
+      busy: () => Boolean(pending),
+      settled: () => pending || Promise.resolve(),
+      linear: () => current,
+      set(next) { if (!pending) { current = next; paint(); } },
+      destroy() { destroyed = true; for (const [type, fn] of listeners) root.removeEventListener(type, fn); },
+    };
+  }
+
+  // Done's spinner while a save is out (style.css .settings-footer [aria-busy]).
+  function doneBusy(buttons, busy) {
+    for (const b of buttons) {
+      if (busy) b.setAttribute('aria-busy', 'true'); else b.removeAttribute('aria-busy');
+      if (b.closest('.settings-footer')) b.innerHTML = `${busy ? SPIN : ''}Done`;
+    }
+  }
+
+  // The slot in a modal of its own over the page. It closes itself once a pasted key works; Done, ✕, Escape and the
+  // backdrop close it once no save is out. → a promise of whether the key works on closing
+  function open() {
+    const previous = document.activeElement;
+    const wrap = document.createElement('div');
+    // hub.css styles the slot under .hub-view main; style.css draws both as display: contents.
+    wrap.setAttribute('class', 'hub-view lk-over');
+    wrap.innerHTML = '<main><dialog class="settings-modal hub-modal" id="linearKeyModal" aria-labelledby="linearKeyTitle"><div class="settings-head"><div><h2 id="linearKeyTitle" tabindex="-1">Linear</h2><p class="muted small">Hub settings</p></div><button type="button" class="ghost" data-lk-done aria-label="Close Linear key">✕</button></div>'
+      + '<div class="set settings-body"><div class="setting-content"><p class="note">Loading…</p></div></div><div class="settings-footer"><button type="button" data-lk-done>Done</button></div></dialog></main>';
+    document.body.appendChild(wrap);
+    const dialog = wrap.querySelector('dialog');
+    const content = wrap.querySelector('.setting-content');
+    const unfit = BoardDialogs.fitSheet(dialog);
+    let key = null, closing = false, finished = false, resolve;
+    const result = new Promise((r) => { resolve = r; });
+    function finish() {
+      if (finished) return;
+      finished = true;
+      key?.destroy();
+      unfit();
+      dialog.close();
+      wrap.remove();
+      if (previous?.isConnected) previous.focus({ preventScroll: true });
+      resolve(works(key?.linear()));
+    }
+    function close() {
+      if (!key?.busy()) { finish(); return; }
+      if (closing) return;
+      closing = true;
+      key.settled().then(finish);
+    }
+    dialog.addEventListener('click', (e) => {
+      if (e.target.closest?.('[data-lk-done]')) { close(); return; }
+      if (e.target !== dialog) return;
+      const r = dialog.getBoundingClientRect();
+      if (e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom) close();
+    });
+    dialog.addEventListener('cancel', (e) => { e.preventDefault(); close(); });
+    dialog.showModal();
+    wrap.querySelector('#linearKeyTitle').focus({ preventScroll: true });
+    fetch('/_hub/api/settings', { cache: 'no-store', headers: { accept: 'application/json' } }).then((r) => (r.ok ? r.json() : Promise.reject())).then((out) => {
+      if (finished) return;
+      key = mount(content, { linear: out.linear, worked: finish, busy: (on) => doneBusy(wrap.querySelectorAll('[data-lk-done]'), on) });
+    }).catch(() => { if (!finished) content.innerHTML = '<p class="note">Offline. Is the host awake?</p>'; });
+    return result;
+  }
+
+  globalThis.LinearKey = { works, mount, open, doneBusy };
+})();

package/board/public/router.js

@@ -6,7 +6,8 @@
 //   board {route, hash}         /<route>/, hash such as #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}         /<route>/notes.html?item=<key>, and plan.html, which the board redirects there
+//   notes {route, item | wave}  /<route>/notes.html?item=<key> or ?wave=<lineup slug>, and plan.html, which the board
+//                               redirects there
 //   hub {hash, w}              /_hub/ with a settings modal named by hash; legacy /_hub/settings and
 //                               /_hub/settings/polling?w=<HH:MM> open the same modals (ADR 0075)
 //   frame {route, url}          any other page under a route, a folder or an .html file: other sites, prototypes and
@@ -45,7 +46,9 @@ globalThis.AppRouter = (function () {
       try { id = u.hash.length > 1 ? decodeURIComponent(u.hash.slice(1)) : null; } catch { id = u.hash.slice(1); }
       return { kind: 'questions', route, id };
     }
-    if (page === 'notes.html' || page === 'plan.html') return { kind: 'notes', route, item: u.searchParams.get('item') };
+    if (page === 'notes.html' || page === 'plan.html') {
+      return u.searchParams.has('wave') ? { kind: 'notes', route, wave: u.searchParams.get('wave') } : { kind: 'notes', route, item: u.searchParams.get('item') };
+    }
     return frame;
   }
 
@@ -56,7 +59,7 @@ globalThis.AppRouter = (function () {
       case 'board': return r + (view.hash || '');
       case 'settings': return `${r}settings.html`;
       case 'questions': return `${r}questions.html${view.id ? `#${encodeURIComponent(view.id)}` : ''}`;
-      case 'notes': return `${r}notes.html${view.item ? `?item=${encodeURIComponent(view.item)}` : ''}`;
+      case 'notes': return `${r}notes.html${view.wave ? `?wave=${encodeURIComponent(view.wave)}` : view.item ? `?item=${encodeURIComponent(view.item)}` : ''}`;
       case 'hub': return `/_hub/${view.w ? `?w=${encodeURIComponent(view.w)}` : ''}${view.hash || ''}`;
       default: return view.url;
     }

package/board/public/rules-editor.js

@@ -39,7 +39,7 @@
 .rules-editor .rule-body { flex:1; min-width:0; }
 .rules-editor .rule-text { overflow-wrap:anywhere; }
 .rules-editor .rule-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; font-size:12px; color:var(--muted); }
-.rules-editor .rule-by { padding:0 6px; border-radius:6px; background:var(--chip); color:var(--color-info); }
+.rules-editor .rule-by { padding:0 6px; border-radius:6px; background:var(--chip); color:var(--muted); }
 .rules-editor .rule-actions { flex:none; display:flex; gap:4px; }
 .rules-editor textarea { box-sizing:border-box; width:100%; min-width:0; resize:vertical; font:inherit; font-size:16px; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:6px 8px; }
 .rules-editor .rule-add { display:flex; align-items:flex-end; gap:6px; margin-top:8px; }

package/board/public/shell.js

@@ -205,7 +205,7 @@ window.AppShell = (function () {
     const openHere = (href) => { if (!opener(href)) location.assign(href); };
 
     // The board and Waiting on you follow their own hash, so a link that only moves it keeps the view.
-    const sameView = (a, b) => a.kind === b.kind && a.route === b.route && (a.kind !== 'notes' || a.item === b.item) && (a.kind !== 'frame' || a.url === b.url);
+    const sameView = (a, b) => a.kind === b.kind && a.route === b.route && (a.kind !== 'notes' || (a.item === b.item && a.wave === b.wave)) && (a.kind !== 'frame' || a.url === b.url);
     const dirty = () => Boolean(current?.root.querySelector('[data-dirty]'));
     addEventListener('beforeunload', (e) => { if (dirty()) { e.preventDefault(); e.returnValue = ''; } });
 

package/board/public/sidebar.css

@@ -30,11 +30,11 @@
 .sidebar .sb-row:active { background: var(--chip); }
 @media (hover: hover) { .sidebar .sb-row:hover { background: color-mix(in srgb, var(--chip) 70%, transparent); text-decoration: none; } }
 .sidebar .sb-row.on { background: var(--accent-soft); }
-.sidebar .sb-turnon { margin: 6px 0 0; background: color-mix(in srgb, var(--color-danger) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--color-danger) 30%, var(--line)); }
+.sidebar .sb-turnon { margin: 6px 0 0; background: color-mix(in srgb, var(--accent) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); }
 .sidebar .sb-update-row { width: 100%; min-height: 48px; margin: 0 0 6px; padding: 6px 8px; border-radius: 10px; text-align: left; font: inherit; color: var(--text);
   background: color-mix(in srgb, var(--accent) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); cursor: pointer; }
 .sidebar .sb-update-row:disabled { opacity: 1; cursor: default; }
-.sidebar .sb-go { flex: none; padding: 5px 10px; border-radius: 7px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; }
+.sidebar .sb-go { flex: none; padding: 5px 10px; border-radius: 7px; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 600; }
 .sidebar .sb-update-row:disabled .sb-go { background: transparent; color: var(--muted); padding-right: 0; font-weight: 400; }
 html.sb-update body.has-sidebar > .top .hub, html.sb-update body.has-sidebar > :not(.sidebar) > .top .hub { position: relative; }
 html.sb-update body.has-sidebar > .top .hub::after, html.sb-update body.has-sidebar > :not(.sidebar) > .top .hub::after {
@@ -48,7 +48,24 @@ html.sb-update body.has-sidebar > .top .hub::after, html.sb-update body.has-side
 .sidebar .sb-new { width: 100%; text-align: left; border: 0; background: transparent; font: inherit; }
 .sidebar .sb-starting { color: var(--muted); }
 .sidebar .sb-starting:hover, .sidebar .sb-starting:active { background: transparent; }
-.sidebar .sb-dismiss { flex: none; min-height: 44px; font-size: 12px; }
+.sidebar .sb-failed { width: 100%; text-align: left; border: 0; background: transparent; font: inherit; color: var(--text); }
+.sidebar .sb-failed .sb-title { color: var(--color-danger); }
+.sidebar .sb-failed:active { background: var(--chip); }
+@media (hover: hover) { .sidebar .sb-failed:hover { background: color-mix(in srgb, var(--chip) 70%, transparent); } }
+
+#failedStartSheet .sheet-head h2 { font-size: 17px; overflow-wrap: anywhere; }
+#failedStartSheet .fs-error { margin: 4px 0 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--color-danger) 40%, var(--line)); border-radius: 10px;
+  color: var(--color-danger); font-size: 13px; overflow-wrap: anywhere; }
+#failedStartSheet .fs-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0 0 14px; font-size: 13px; }
+#failedStartSheet .fs-facts dt { color: var(--muted); }
+#failedStartSheet .fs-facts dd { margin: 0; overflow-wrap: anywhere; }
+#failedStartSheet .fs-refused { margin: 0 0 8px; color: var(--color-danger); font-size: 13px; }
+#failedStartSheet .fs-refused[hidden] { display: none; }
+#failedStartSheet .fs-actions { display: flex; gap: 8px; justify-content: flex-end; }
+#failedStartSheet .fs-actions button { min-height: 44px; padding: 6px 16px; }
+@media (min-width: 900px) {
+  #failedStartSheet { inset: 0; margin: auto; height: fit-content; max-height: calc(100dvh - 48px); }
+}
 .sidebar .sb-row .icon.sb-plus { color: var(--muted); background: var(--chip); }
 
 #newBoardSheet .nb-form { min-width: 0; }
@@ -66,15 +83,15 @@ html.sb-update body.has-sidebar > .top .hub::after, html.sb-update body.has-side
 #newBoardSheet .nb-repo:hover, #newBoardSheet .nb-repo:focus-visible { border-color: var(--accent); }
 #newBoardSheet .nb-repo strong { overflow-wrap: anywhere; }
 #newBoardSheet .nb-repo.nb-repo-highlight { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
-#newBoardSheet .nb-repo-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 600; vertical-align: 1px; white-space: nowrap; }
+#newBoardSheet .nb-repo-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; background: var(--chip); color: var(--muted); font-size: 11px; font-weight: 600; vertical-align: 1px; white-space: nowrap; }
 #newBoardSheet .nb-box { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
 #newBoardSheet .nb-box > span { min-width: 0; }
 #newBoardSheet .nb-box strong { display: block; overflow-wrap: anywhere; }
 #newBoardSheet .nb-box-no { border-color: color-mix(in srgb, var(--color-danger) 40%, var(--line)); }
 #newBoardSheet .nb-why { display: block; margin-top: 4px; color: var(--color-danger); font-size: 13px; }
-#newBoardSheet .nb-spin { flex: none; width: 16px; height: 16px; margin-top: 2px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: nb-spin .8s linear infinite; }
+#newBoardSheet .nb-spin { flex: none; width: 16px; height: 16px; margin-top: 2px; border: 2px solid var(--line); border-top-color: var(--color-notice); border-radius: 50%; animation: nb-spin .8s linear infinite; }
 @keyframes nb-spin { to { transform: rotate(360deg); } }
-#newBoardSheet .nb-local { display: block; margin-top: 8px; font-size: 12px; color: var(--accent); }
+#newBoardSheet .nb-local { display: block; margin-top: 8px; font-size: 12px; color: var(--muted); }
 #newBoardSheet .nb-selected { padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
 #newBoardSheet .nb-clone { display: block; margin-top: 6px; overflow-wrap: anywhere; font-size: 12px; }
 #newBoardSheet [hidden] { display: none; }
@@ -110,11 +127,11 @@ html.sb-update body.has-sidebar > .top .hub::after, html.sb-update body.has-side
 @starting-style { .sidebar.ks-on .ks-label-hint { opacity: 0; } }
 /* The label is the bar's containing block: left 0 is the BOARDS text's edge, and right -8px crosses the label's 8px
    side margin (.sb-label) to the rows' right edge. The bar sits in the label's 4px bottom margin. */
-.sidebar .ks-bar { position: absolute; left: 0; right: -8px; top: 100%; height: 2px; margin-top: 1px; background: var(--color-notice);
-  transform-origin: 0 50%; animation: ks-drain 3s linear forwards; }
+.sidebar .ks-bar { position: absolute; left: 0; right: -8px; top: 100%; height: 2px; margin-top: 1px; background: var(--accent);
+  transform-origin: 0 50%; animation: ks-drain linear forwards; }
 @keyframes ks-drain { to { transform: scaleX(0); } }
 .sidebar .ks-u { transition: color 200ms linear; }
-.sidebar.ks-on .ks-u { color: var(--color-notice); transition: color 150ms linear; }
+.sidebar.ks-on .ks-u { color: var(--accent); transition: color 150ms linear; }
 @starting-style { .sidebar.ks-on .ks-u { color: inherit; } }
 @media (prefers-reduced-motion: reduce) {
   .sidebar .ks-bar { animation: none; }
@@ -126,6 +143,8 @@ html.sb-update body.has-sidebar > .top .hub::after, html.sb-update body.has-side
 
 /* A site's status (hub/home.mjs statusLine): the lane chips wrap on their own line, and the status word goes below them. */
 .sidebar .sb-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
+.sidebar .sb-ctx { font-size: 12px; color: var(--muted); }
+.sidebar .sb-ctx.stale { opacity: .6; }
 .sidebar .lcs { order: -1; flex: 1 1 100%; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; }
 .sidebar .lc { flex: none; font-size: 11px; font-weight: 600; border-radius: 6px; padding: 0 6px; line-height: 18px; color: var(--tone); background: color-mix(in srgb, var(--tone) 14%, transparent); }
 .sidebar .lc-review { --tone: var(--accent); } .sidebar .lc-progress { --tone: var(--color-notice); } .sidebar .lc-todo { --tone: var(--muted); }
@@ -134,7 +153,8 @@ html.sb-update body.has-sidebar > .top .hub::after, html.sb-update body.has-side
 @media (prefers-reduced-motion: no-preference) { .sidebar .dot.pulse { animation: sb-pulse 1.4s ease-in-out infinite; } }
 .sidebar .word { flex: none; font-weight: 600; color: var(--tone); }
 .sidebar .t-down, .sidebar .t-needs { --tone: var(--color-danger); }
-.sidebar .t-starting, .sidebar .t-asleep { --tone: var(--muted); }
+.sidebar .t-starting { --tone: var(--color-notice); }
+.sidebar .t-stopped, .sidebar .t-asleep { --tone: var(--muted); }
 .sidebar .t-working { --tone: var(--color-notice); }
 .sidebar .t-building { --tone: var(--color-notice); }
 .sidebar .t-ok { --tone: var(--color-success); }
@@ -162,7 +182,7 @@ html.sb-update body.has-sidebar > .top .hub::after, html.sb-update body.has-side
   .sidebar .sb-scroll { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 6px; }
 }
 
-.sidebar .u-tone-ok { --u: var(--accent); }
+.sidebar .u-tone-ok { --u: var(--muted); }
 .sidebar .u-tone-high { --u: var(--color-notice); }
 .sidebar .u-tone-full { --u: var(--color-danger); }
 .sidebar .u-tone-stale, .sidebar .u-tone-none { --u: var(--muted); }

package/board/public/sidebar.js

@@ -24,7 +24,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;
-  // sidebar.css .ks-bar drains over the same time.
+  // paint() sets the bar's duration from this and its delay from switching.started.
   const IDLE_MS = 3000;
   const FIELD = 'input, textarea, select, [contenteditable]:not([contenteditable="false"])';
   const MODIFIERS = new Set(['Shift', 'Meta', 'Control', 'Alt', 'AltGraph', 'CapsLock', 'Fn']);
@@ -46,7 +46,7 @@
     const aside = document.getElementById('sidebar');
     const scrim = document.getElementById('sidebarScrim');
     // ui.js replaces the BoardUI global when it loads after this, so the renderers are held here.
-    const { sidebar, updateRow, othersWaiting, switchKeys, shortcuts } = globalThis.BoardUI || {};
+    const { sidebar, failedStart, updateRow, othersWaiting, switchKeys, shortcuts } = globalThis.BoardUI || {};
     const none = { setHere() {}, setData() {}, setUpdate() {}, checkDevice() {}, close() {}, toggle() {}, keydown() {}, pointerdown() {} };
     if (!aside || !sidebar) return none;
     if (!data) { try { data = JSON.parse(read(DATA_KEY) || 'null'); } catch { data = null; } }
@@ -64,22 +64,28 @@
       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' : ''}${n ? `, ${n} waiting on other boards` : ''}`);
+      logo.setAttribute('aria-label', `Boards${update ? ', new version ready' : data?.upgrade ? ', update available' : ''}${n ? `, ${n} waiting on other boards` : ''}`);
     }
-    // switching: {timer, opened} while switch mode shows, opened when it opened the drawer.
+    // switching: {opened, started, timer} while switch mode shows, opened when it opened the drawer, started on performance.now().
     let switching = null;
     let painted = false;
     // 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));
       if (!data) return;
       const scroll = aside.querySelector('.sb-scroll');
       const top = painted ? scroll?.scrollTop : undefined;
       // Screen readers announce a role="status" node only when its own content changes, so the node outlives the repaint.
       const held = aside.querySelector('.sb-update');
       aside.innerHTML = sidebar(data, { here, device, switching: Boolean(switching) });
+      if (switching) {
+        const bar = aside.querySelector('.ks-bar');
+        bar.style.animationDelay = `${switching.started - performance.now()}ms`;
+        bar.style.animationDuration = `${IDLE_MS}ms`;
+      }
       const fresh = aside.querySelector('.sb-update');
       if (held) fresh.replaceWith(held);
-      const row = updateRow(update);
+      const row = updateRow(update, data.upgrade);
       if (!held || row !== updateHTML) (held || fresh).innerHTML = row;
       updateHTML = row;
       const list = aside.querySelector('.sb-scroll');
@@ -95,7 +101,6 @@
     }
     function setUpdate(state) {
       update = state;
-      html.classList.toggle('sb-update', Boolean(update));
       paint();
     }
 
@@ -148,22 +153,89 @@
         onClose: () => aside.querySelector('[data-new-board]')?.focus({ preventScroll: true }),
       });
     }
-    aside.addEventListener('click', async (e) => {
+    aside.addEventListener('click', (e) => {
       const refreshApp = e.target.closest?.('[data-app-reload]');
       if (refreshApp) {
         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 dismiss = e.target.closest?.('[data-dismiss-board]');
-      if (!dismiss || dismiss.disabled) return;
-      dismiss.disabled = true;
-      try {
-        const response = await fetch(`/_hub/new-board/${encodeURIComponent(dismiss.dataset.dismissBoard)}`, { method: 'DELETE' });
-        if (!response.ok) throw new Error(await response.text());
-        await refresh();
-      } catch (e) { dismiss.disabled = false; globalThis.BoardDialogs?.notice(e.message); }
+      const failed = e.target.closest?.('[data-failed-start]');
+      if (failed) openFailed(failed.dataset.failedStart);
     });
+    // Upgrade asks the hub to run kickflip update (docs/adr/0161-the-hub-offers-a-newer-kickflip-from-npm.md). The row
+    // keeps its words until the hub answers with what it did, and a refusal shows as a failed update.
+    let upgrading = false;
+    async function upgrade(button) {
+      if (upgrading) return;
+      upgrading = true;
+      button.disabled = true;
+      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.' };
+      } finally { upgrading = false; }
+      setData({ ...data, upgrade: next });
+    }
+    // A failed start's sheet (docs/adr/0130-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) {
+      const s = (data?.starting || []).find((x) => x.route === route && x.failed);
+      if (!s || document.getElementById('failedStartSheet')) return;
+      const previous = document.activeElement;
+      const el = document.createElement('dialog');
+      el.setAttribute('id', 'failedStartSheet');
+      el.setAttribute('class', 'sheet');
+      el.setAttribute('aria-labelledby', 'failedStartTitle');
+      el.innerHTML = failedStart(s, { home: data.home });
+      let sending = false;
+      const done = () => { if (!sending) el.close(); };
+      async function act(request, after) {
+        sending = true;
+        el.querySelectorAll('.fs-actions button').forEach((b) => { b.disabled = true; });
+        const refused = el.querySelector('.fs-refused');
+        refused.hidden = true;
+        try {
+          const response = await fetch(`/_hub/new-board/${encodeURIComponent(route)}${request.path || ''}`, request.options);
+          if (!response.ok) throw new Error(await response.text());
+          after();
+          sending = false;
+          el.close();
+          refresh().catch(() => {});
+        } catch (e) {
+          sending = false;
+          el.querySelectorAll('.fs-actions button').forEach((b) => { b.disabled = false; });
+          refused.textContent = e.message;
+          refused.hidden = false;
+        }
+      }
+      el.addEventListener('click', (e) => {
+        if (sending) return;
+        if (e.target === el || e.target.closest('[data-failed-close]')) { done(); return; }
+        if (e.target.closest('[data-failed-dismiss]')) {
+          act({ options: { method: 'DELETE' } }, () => setData({ ...data, starting: data.starting.filter((x) => x.route !== route) }));
+        } else if (e.target.closest('[data-failed-retry]')) {
+          act({ path: '/retry', options: { method: 'POST', headers: { 'content-type': 'application/json' }, body: '{}' } }, () => {
+            const { error, ...rest } = s;
+            const again = { ...rest, phase: 'starting', askedAt: new Date().toISOString(), failed: false };
+            setData({ ...data, starting: data.starting.map((x) => (x.route === route ? again : x)) });
+          });
+        }
+      });
+      el.addEventListener('cancel', (e) => { e.preventDefault(); done(); });
+      el.addEventListener('close', () => {
+        el.remove();
+        if (previous?.isConnected) previous.focus({ preventScroll: true });
+      });
+      document.body.appendChild(el);
+      el.showModal();
+      (el.querySelector('[data-failed-retry]') || el.querySelector('[data-failed-dismiss]')).focus({ preventScroll: true });
+    }
     document.addEventListener('click', (e) => {
       if (e.metaKey || e.ctrlKey || e.shiftKey) return;
       if (e.target.closest?.('[data-sidebar-close]')) { e.preventDefault(); if (rail.matches) collapse(true); else close(); return; }
@@ -177,7 +249,7 @@
     let lastS = -Infinity;
     function startSwitch() {
       lastS = -Infinity;
-      switching = { opened: !rail.matches && !isOpen(), timer: setTimeout(() => endSwitch(), IDLE_MS) };
+      switching = { opened: !rail.matches && !isOpen(), started: performance.now(), timer: setTimeout(() => endSwitch(), IDLE_MS) };
       if (switching.opened) open();
       aside.classList.add('ks-on');
       paint();