@lovek4d/kickflip 0.1.0 → 0.3.1

package/board/public/dialogs.js

@@ -1,43 +1,48 @@
-// Native confirmations cannot label their actions on iOS; labelled confirmations use a modal sheet.
-// Load before any page script that asks (docs/adr/0023-a-card-can-be-held-and-every-card-button-confirms.md).
+// Every confirmation and notice is the browser's own window.confirm or window.alert; no page imitates a native dialog.
+// Load before any page script that asks (docs/adr/0146-confirmations-are-the-browsers-own.md).
 (function () {
-  // linear: Hub's /_hub/api/linear answer, or loadLinear() fetches it the first time Linear is the source. A New board's
-  // "New project…" reads as new_project, which the hub creates on Start; Board Settings creates it with createProject.
-  function ticketsControl(root, { value = { source: 'internal', prefix: 'INT' }, repo = () => '', title = () => '', linear = {}, loadLinear, isNew = false, change = () => {}, createProject } = {}) {
+  // linear: Hub's /_hub/api/linear answer, else loadLinear() fetches it once Linear is the source. Linear is picked only
+  // while Hub's key works; tapping it without one opens Hub's key modal over the page (linear-key.js,
+  // docs/adr/0117-a-board-picks-linear-only-while-hubs-key-works.md). A New board's "New project…" reads as
+  // new_project, which the hub creates on Start; Board Settings creates it with createProject. change(value, valid,
+  // {loaded, typing}) follows each change: loaded when only Linear's lists arrived, typing while a text field is being typed in.
+  // GitHub issues needs repo(), the board's GitHub owner/name: without one, as on a board whose repo is another git
+  // remote, it can't be picked and says why (docs/adr/0127-a-board-can-work-on-any-git-remote.md).
+  function ticketsControl(root, { value = { source: 'internal', prefix: 'INT' }, repo = () => '', title = () => '', linear = null, loadLinear, isNew = false, change = () => {}, createProject } = {}) {
     const { esc } = BoardUI;
     const draft = { prefix: 'INT', ...value };
-    let creating = false, createError = '', destroyed = false;
-    const fetchLinear = () => {
-      if (!loadLinear || draft.source !== 'linear') return;
-      const load = loadLinear;
-      loadLinear = null;
+    let creating = false, createError = '', destroyed = false, asking = false, noGithub = false;
+    const works = () => Boolean(linear?.set && !linear.refused);
+    async function load() {
       linear = { loading: true };
-      load().catch((e) => ({ set: true, error: e.message || 'Is the host awake?' })).then((next) => {
-        if (destroyed) return;
-        linear = next; pickDefaults(); render(); change(read(), valid(), { loaded: true });
-      });
-    };
-    const workspace = () => linear.url_key ?? linear.workspace ?? draft.workspace;
+      render();
+      linear = await loadLinear().catch((e) => ({ set: true, error: e.message || 'Is the host awake?' }));
+    }
+    const workspace = () => linear?.url_key ?? linear?.workspace ?? draft.workspace;
     const newName = () => (draft.newName ?? title()).trim();
-    const typed = () => !linear.set && !linear.loading;
-    const typedProject = () => (draft.project && draft.project !== '__new' ? draft.project : isNew ? title() : '').trim();
+    const ready = () => works() && !linear.error;
     const read = () => draft.source === 'internal' ? { source: 'internal', prefix: draft.prefix || 'INT' }
-      : draft.source === 'github' ? { source: 'github' }
-      : typed() ? { source: 'linear', workspace: draft.workspace || '', team: draft.team || '', project: typedProject() }
+      : draft.source === 'github' ? { source: 'github', ...(draft.account ? { account: draft.account } : {}) }
+      : !ready() ? { source: 'linear', workspace: draft.workspace, team: draft.team, project: draft.project }
       : draft.project === '__new' && isNew ? { source: 'linear', workspace: workspace(), team: draft.team, new_project: newName() }
       : { source: 'linear', workspace: workspace(), team: draft.team, project: draft.project };
     const valid = () => draft.source === 'internal' ? /^[A-Z]{2,6}$/.test(draft.prefix || 'INT')
       : draft.source === 'github' ? Boolean(repo())
-      : typed() ? /^[a-z\d][a-z\d-]*$/i.test(draft.workspace || '') && /^[A-Z][A-Z0-9]*$/.test(draft.team || '') && Boolean(typedProject())
-      : Boolean(linear.set && !linear.error && draft.team && draft.project && (draft.project !== '__new' || (isNew && newName())));
+      : Boolean(ready() && draft.team && draft.project && (draft.project !== '__new' || (isNew && newName())));
     const pickDefaults = () => {
-      if (draft.source !== 'linear' || !linear.set) return;
+      if (draft.source !== 'linear' || !ready()) return;
       if (!linear.teams?.some((t) => t.key === draft.team)) draft.team = linear.teams?.[0]?.key;
-      draft.project ||= isNew ? '__new' : linear.projects?.find((p) => p.team === draft.team)?.id;
+      if (draft.project === '__new' || linear.projects?.some((p) => p.id === draft.project && p.team === draft.team)) return;
+      draft.project = isNew ? '__new' : linear.projects?.find((p) => p.team === draft.team)?.id;
     };
+    // A board already on Linear whose Hub key is missing or refused keeps its source and shows why.
+    function needsKey() {
+      const why = linear.refused ? 'Linear refused Hub’s key' : 'Hub has no Linear key';
+      return `<p class="muted small" role="status">${why}, so this board can’t list Linear’s teams or create issues there.</p><p><button type="button" data-tk-key>Add Hub’s Linear key</button></p>`;
+    }
     function linearDetail() {
-      if (linear.loading) return '<p class="muted small" role="status">Loading Linear…</p>';
-      if (!linear.set) return `<div class="tk-grid"><label class="tk-field"><span>Workspace</span><input data-tk="workspaceText" value="${esc(draft.workspace || '')}" placeholder="your-workspace" autocapitalize="off" autocomplete="off" spellcheck="false"></label><label class="tk-field"><span>Team</span><input data-tk="teamText" value="${esc(draft.team || '')}" placeholder="ENG" autocapitalize="characters" autocomplete="off" spellcheck="false"></label></div><label class="tk-field"><span>Project</span><input data-tk="projectText" value="${esc(typedProject())}" placeholder="Project name" autocomplete="off"></label><p class="muted small">The board’s session creates and moves its issues through its Linear MCP, and creates the project if it’s new. <a href="/_hub/#linear">A Linear key on Hub</a> adds team and project lists and lets kickflip do it itself.</p>`;
+      if (!linear || linear.loading) return '<p class="muted small" role="status">Loading Linear…</p>';
+      if (!works()) return needsKey();
       if (linear.error) return `<p class="muted small" role="alert">Couldn’t list Linear’s teams: ${esc(linear.error)}</p>`;
       const project = linear.projects?.find((p) => p.id === draft.project);
       const team = esc(draft.team || '');
@@ -47,17 +52,41 @@
       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 ? ' disabled' : ''}>${creating ? 'Creating…' : 'Create'}</button>`}</div>` : ''}${createError ? `<p class="muted small" role="alert">${esc(createError)}</p>` : ''}${note}`;
     }
     function render() {
-      const segment = `<div class="tk-seg" role="group" aria-label="Ticket source">${[['linear', 'Linear'], ['github', 'GitHub issues'], ['internal', 'Internal']].map(([source, name]) => `<button type="button" data-tk-source="${source}" aria-pressed="${draft.source === source}">${name}</button>`).join('')}</div>`;
+      const off = !repo();
+      const segment = `<div class="tk-seg" role="group" aria-label="Ticket source">${[['linear', 'Linear'], ['github', 'GitHub issues'], ['internal', 'Internal']].map(([source, name]) => `<button type="button" data-tk-source="${source}" aria-pressed="${draft.source === source}"${source === 'github' && off ? ' aria-disabled="true"' : ''}>${name}</button>`).join('')}</div>`;
+      const why = `<p class="muted small" role="status">GitHub issues need a repo on GitHub, and ${isNew ? 'the repo chosen above' : 'this board’s repo'} isn’t on GitHub.</p>`;
       let detail;
-      if (draft.source === 'internal') detail = `<label class="tk-field"><span>Prefix</span><input data-tk="prefix" value="${esc(draft.prefix)}" placeholder="INT" maxlength="6" pattern="[A-Z]{2,6}" title="2–6 uppercase letters" autocapitalize="characters" autocomplete="off" spellcheck="false"></label><p class="muted small" data-tk-example>Cards number ${esc(draft.prefix || 'INT')}-1, ${esc(draft.prefix || 'INT')}-2… on this board. The badge opens the card.</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 new card opens an issue there; its badge reads #41.</span></span></div>`;
+      if (draft.source === 'github' && off) detail = why;
+      else if (draft.source === 'internal') detail = `<label class="tk-field"><span>Prefix</span><input data-tk="prefix" value="${esc(draft.prefix)}" placeholder="INT" maxlength="6" pattern="[A-Z]{2,6}" title="2–6 uppercase letters" autocapitalize="characters" autocomplete="off" spellcheck="false"></label><p class="muted small" data-tk-example>Cards number ${esc(draft.prefix || 'INT')}-1, ${esc(draft.prefix || 'INT')}-2… on this board. The badge opens the card.</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 new card opens an issue there${draft.account ? ` as gh account ${esc(draft.account)}` : ''}; its badge reads #41.</span></span></div>`;
       else detail = linearDetail();
-      root.innerHTML = `${segment}<div class="tk-detail">${detail}</div>`;
-      if (draft.source === 'linear' && linear.set && !linear.error && !linear.loading) {
+      root.innerHTML = `${segment}<div class="tk-detail">${noGithub && off && draft.source !== 'github' ? why : ''}${detail}</div>`;
+      if (draft.source === 'linear' && ready()) {
         root.querySelector('[data-tk="team"]').value = draft.team || '';
         root.querySelector('[data-tk="project"]').value = draft.project || '';
       }
     }
+    // Linear is checked again on each tap until Hub's key works, so a key added elsewhere counts.
+    async function pickLinear() {
+      if (asking || linear?.loading) return;
+      const before = draft.source;
+      draft.source = 'linear';
+      if (!ready()) await load();
+      if (destroyed) return;
+      if (!works()) {
+        draft.source = before;
+        render();
+        asking = true;
+        const added = await LinearKey.open();
+        asking = false;
+        if (destroyed || !added) return;
+        draft.source = 'linear';
+        await load();
+        if (destroyed) return;
+      }
+      pickDefaults();
+      render(); root.querySelector('[data-tk-source="linear"]').focus(); change(read(), valid());
+    }
     const click = async (e) => {
       if (e.target.closest('[data-tk-create]')) {
         const name = newName();
@@ -73,83 +102,36 @@
         render(); change(read(), valid());
         return;
       }
+      if (e.target.closest('[data-tk-key]')) { pickLinear(); return; }
       const button = e.target.closest('[data-tk-source]');
       if (!button) return;
+      noGithub = button.dataset.tkSource === 'github' && !repo();
+      if (noGithub) { render(); root.querySelector('[data-tk-source="github"]').focus(); return; }
+      if (button.dataset.tkSource === 'linear') { pickLinear(); return; }
       draft.source = button.dataset.tkSource;
-      fetchLinear();
-      pickDefaults();
       render(); root.querySelector(`[data-tk-source="${draft.source}"]`).focus(); change(read(), valid());
     };
     const input = (e) => {
       const field = e.target.dataset.tk;
-      if (!field) return;
-      if (field.endsWith('Text')) {
-        const name = field.slice(0, -4);
-        draft[name] = name === 'team' ? e.target.value.toUpperCase().trim() : e.target.value.trim();
-        if (name === 'team') e.target.value = draft.team;
-        change(read(), valid());
-        return;
-      }
+      if (!field || (e.type === 'input' && e.target.tagName === 'SELECT')) return;
       draft[field] = field === 'prefix' ? e.target.value.toUpperCase() : e.target.value;
       if (field === 'prefix') e.target.value = draft.prefix;
       if (field === 'team') draft.project = isNew ? '__new' : linear.projects?.find((p) => p.team === draft.team)?.id;
       if (field === 'team' || field === 'project') { createError = ''; render(); }
       if (field === 'prefix') root.querySelector('[data-tk-example]').textContent = `Cards number ${draft.prefix || 'INT'}-1, ${draft.prefix || 'INT'}-2… on this board. The badge opens the card.`;
-      change(read(), valid());
+      change(read(), valid(), { typing: e.type === 'input' });
     };
     root.addEventListener('click', click);
     root.addEventListener('input', input);
     root.addEventListener('change', input);
-    fetchLinear();
     render();
+    if (draft.source === 'linear' && !linear) load().then(() => { if (destroyed) return; pickDefaults(); render(); change(read(), valid(), { loaded: true }); });
     return { read, valid, render, nameChanged() {
         const field = root.querySelector('[data-tk="newName"]');
         if (field && draft.newName === undefined) field.value = title();
-        const typedField = root.querySelector('[data-tk="projectText"]');
-        if (typedField && !draft.project) typedField.value = title();
       },
       destroy() { destroyed = true; root.removeEventListener('click', click); root.removeEventListener('input', input); root.removeEventListener('change', input); } };
   }
-  let close = null;
-  function sheet(message, { ok, cancel = 'Cancel', signal }) {
-    close?.(false);
-    return new Promise((resolve) => {
-      const previous = document.activeElement;
-      const el = document.createElement('dialog');
-      el.setAttribute('class', 'confirm-sheet');
-      el.setAttribute('role', 'alertdialog');
-      el.setAttribute('aria-modal', 'true');
-      el.setAttribute('aria-labelledby', 'confirmSheetText');
-      el.innerHTML = '<div class="box"><p id="confirmSheetText"></p><button type="button" data-answer="ok"></button></div>'
-        + '<div class="box"><button type="button" class="cancel" data-answer="cancel"></button></div>';
-      el.querySelector('p').textContent = message;
-      el.querySelector('[data-answer="ok"]').textContent = ok;
-      el.querySelector('[data-answer="cancel"]').textContent = cancel;
-      let settled = false;
-      const abort = () => done(false);
-      function done(yes) {
-        if (settled) return;
-        settled = true;
-        close = null;
-        signal?.removeEventListener('abort', abort);
-        el.close();
-        el.remove();
-        if (previous?.isConnected) previous.focus({ preventScroll: true });
-        resolve(yes);
-      }
-      el.addEventListener('click', (e) => {
-        const b = e.target.closest('[data-answer]');
-        if (b || e.target === el) done(b?.dataset.answer === 'ok');
-      });
-      el.addEventListener('cancel', (e) => { e.preventDefault(); done(false); });
-      el.addEventListener('close', () => done(false));
-      signal?.addEventListener('abort', abort, { once: true });
-      document.body.appendChild(el);
-      el.showModal();
-      el.querySelector('.cancel').focus();
-      close = done;
-    });
-  }
   function fitSheet(sheet) {
     const vv = window.visualViewport;
     // iOS keeps fixed elements on the layout viewport; --kb is the part covered by its keyboard.
@@ -194,9 +176,9 @@
     el.setAttribute('class', 'sheet');
     el.setAttribute('aria-labelledby', 'newBoardTitle');
     const esc = (v) => String(v ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
-    const draft = { name: '', purpose: '', github: '', branch: '', tickets: { source: 'internal', prefix: 'INT' } };
+    const draft = { name: '', purpose: '', github: '', remote: '', branch: '', tickets: { source: 'internal', prefix: 'INT' } };
     let tickets;
-    let repos = [], pasted, selected, edited = false, sending = false, closed = false, generation = 0, lookupTimer, linear;
+    let repos = [], signedIn = false, pasted, selected, edited = false, sending = false, closed = false, generation = 0, lookupTimer, linear;
     const controller = new AbortController();
     el.innerHTML = `<form class="nb-form"><div class="sheet-head"><h2 id="newBoardTitle" tabindex="-1" autofocus>${current ? 'Change repo' : 'New board'}</h2><button type="button" data-cancel-new aria-label="Close sheet">✕</button></div><div data-repo-content></div><p class="nb-error" role="alert" hidden></p><div class="nb-actions sheet-actions"><button type="button" data-cancel-new>Cancel</button><button type="submit" class="primary" hidden disabled>${current ? 'Use repo' : 'Start'}</button></div></form>`;
     const content = el.querySelector('[data-repo-content]');
@@ -211,10 +193,19 @@
       return d;
     };
     const fail = (e) => { if (!closed) { error.textContent = e.message; error.hidden = false; } };
-    function sync() { start.disabled = sending || !draft.github || !draft.branch || (!current && (!draft.name.trim() || !tickets?.valid())); }
-    const row = (r, highlighted = false) => `<button type="button" class="nb-repo${highlighted ? ' nb-repo-highlight' : ''}" data-repo="${esc(r.github)}"><strong>${esc(r.github)}</strong>${r.listed === false ? '<span class="nb-repo-tag">Not in your list</span>' : ''}<span class="nb-help">${r.private ? 'Private' : 'Public'} · <time datetime="${esc(r.pushedAt)}">${r.pushedAt ? `Pushed ${esc(new Date(r.pushedAt).toLocaleString())}` : r.listed === false ? 'Last push unknown' : 'No pushes yet'}</time></span><span class="nb-help">${esc(r.description)}</span><span class="nb-local">${r.cloned ? `✓ In .repos${r.shared.length ? ` · shared with ${esc(r.shared.map((b) => b.title).join(', '))}` : ' · already cloned'}` : 'Not cloned in .repos'}</span></button>`;
+    // A repo already on the host joins from its folder instead (docs/adr/0143-kickflip-join-adds-the-current-repository-as-a-board.md).
+    const joinHint = current ? '' : '<p class="nb-help" data-join-hint>A repo already on the host running Kickflip? Run <code>kickflip join</code> in its folder.</p>';
+    function sync() { start.disabled = sending || !(draft.github || draft.remote) || !draft.branch || (!current && (!draft.name.trim() || !tickets?.valid())); }
+    // A repo row's id is its GitHub owner/name, or the git link of a repo on another host, which the row names by
+    // host/path and labels with its host where a GitHub row says Private or Public
+    // (docs/adr/0127-a-board-can-work-on-any-git-remote.md).
+    const idOf = (r) => r.github || r.remote;
+    const nameOf = (r) => r.github || r.name;
+    const access = (r) => (r.remote ? r.host : r.private ? 'Private' : 'Public');
+    const row = (r, highlighted = false) => `<button type="button" class="nb-repo${highlighted ? ' nb-repo-highlight' : ''}" data-repo="${esc(idOf(r))}"><strong>${esc(nameOf(r))}</strong>${r.listed === false ? '<span class="nb-repo-tag">Not in your list</span>' : ''}<span class="nb-help">${esc(access(r))} · <time datetime="${esc(r.pushedAt)}">${r.pushedAt ? `Pushed ${esc(new Date(r.pushedAt).toLocaleString())}` : r.listed === false ? 'Last push unknown' : 'No pushes yet'}</time></span><span class="nb-help">${esc(r.description)}</span><span class="nb-local">${r.cloned ? `✓ In .repos${r.shared.length ? ` · shared with ${esc(r.shared.map((b) => b.title).join(', '))}` : ' · already cloned'}` : 'Not cloned in .repos'}</span></button>`;
     const results = (html) => { el.querySelector('[data-repo-results]').innerHTML = html; };
     function rows(query = '') {
+      if (!signedIn) { results(''); return; }
       const list = repos.filter((r) => `${r.github} ${r.description}`.toLowerCase().includes(query.trim().toLowerCase()));
       results(`<p class="nb-help" role="status">${list.length} of ${repos.length} repos · Newest push first</p><div class="nb-repo-list">${list.map((r) => row(r)).join('')}</div>${list.length ? '' : '<p class="nb-help">No matching repos. Try an owner or repo name.</p>'}`);
     }
@@ -225,8 +216,20 @@
       const q = value.trim();
       const host = /^(?:[a-z][a-z\d+.-]*:\/\/(?:[^@/\s]+@)?|[^@/\s]+@)([^/:?#\s]+)/i.exec(q);
       const reason = (name, message) => results(`<div class="nb-box nb-box-no" role="alert"><span><strong>${esc(name)}</strong><span class="nb-why">${esc(message)}</span></span></div>`);
+      const checking = (name) => results(`<p class="nb-help" role="status">Checking the hub can reach it…</p><div class="nb-box"><span class="nb-spin" aria-hidden="true"></span><span><strong>${esc(name)}</strong><span class="nb-help">Checking…</span></span></div>`);
+      const check = (query, name) => async () => {
+        try {
+          const repo = await request(`/_hub/repo?${query}`);
+          if (closed || generation !== version) return;
+          pasted = repo;
+          results(`<p class="nb-help" role="status">From your link</p><div class="nb-repo-list">${row(repo)}</div>`);
+        } catch (e) { if (!closed && generation === version) reason(name, e.message); }
+      };
+      if (/^(?:file:|[/~]|\.\.?\/)/i.test(q)) { reason(q, 'Paste the repo’s remote link. Local folders don’t work here.'); return; }
       if (host && !/^(?:www\.)?github\.com$/i.test(host[1])) {
-        reason(q.replace(/^[a-z][a-z\d+.-]*:\/\//i, '').replace(/^[^@/\s]+@/, '').replace(/:/, '/').replace(/\.git$/i, ''), 'Only GitHub repos work here.');
+        const name = q.replace(/^[a-z][a-z\d+.-]*:\/\//i, '').replace(/^[^@/\s]+@/, '').replace(/:(?!\d+\/)/, '/').replace(/:\d+\//, '/').replace(/\.git\/?$/i, '');
+        checking(name);
+        check(`remote=${encodeURIComponent(q)}`, name)();
         return;
       }
       const link = /^(?:https?:\/\/(?:www\.)?github\.com\/|git@github\.com:|ssh:\/\/git@github\.com\/)([^/\s?#]+\/[^/\s?#]+)(?:\/[^\s]*)?(?:[?#][^\s]*)?$/i.exec(q);
@@ -237,17 +240,9 @@
       const github = link ? link[1].replace(/\.git$/i, '') : q;
       const listed = repos.find((r) => r.github.toLowerCase() === github.toLowerCase());
       if (listed) { results(`<p class="nb-help" role="status">Already in your list</p><div class="nb-repo-list">${row(listed, true)}</div>`); return; }
-      results(`<p class="nb-help" role="status">Checking the hub can reach it…</p><div class="nb-box"><span class="nb-spin" aria-hidden="true"></span><span><strong>${esc(github)}</strong><span class="nb-help">Checking…</span></span></div>`);
-      const check = async () => {
-        try {
-          const repo = await request(`/_hub/repo?github=${encodeURIComponent(github)}`);
-          if (closed || generation !== version) return;
-          pasted = repo;
-          results(`<p class="nb-help" role="status">From your link</p><div class="nb-repo-list">${row(repo)}</div>`);
-        } catch (e) { if (!closed && generation === version) reason(github, e.message); }
-      };
-      if (bare) lookupTimer = setTimeout(check, 500);
-      else check();
+      checking(github);
+      if (bare) lookupTimer = setTimeout(check(`github=${encodeURIComponent(github)}`, github), 500);
+      else check(`github=${encodeURIComponent(github)}`, github)();
     }
     async function picker(fresh = false) {
       tickets?.destroy();
@@ -261,42 +256,45 @@
       try {
         const d = await request(`/_hub/repos${fresh ? '?fresh=1' : ''}`);
         if (closed || generation !== version) return;
+        signedIn = d.signedIn;
         if (!d.signedIn) {
-          content.innerHTML = '<h3>GitHub isn’t connected</h3><p>gh isn’t signed in on the host running Kickflip. Sign in there to see your repos.</p><code>gh auth login</code><p><button type="button" data-check-auth>Check again</button></p>';
+          repos = [];
+          content.innerHTML = `<h3>GitHub isn’t connected</h3><p>gh isn’t signed in on the host running Kickflip. Sign in there to see your repos.</p><code>gh auth login</code><p><button type="button" data-check-auth>Check again</button></p><label class="nb-field"><span>Or paste a git link</span><input name="search" type="search" placeholder="https://host/path or user@host:path" autocomplete="off" autocapitalize="off" spellcheck="false"></label>${joinHint}<div data-repo-results></div>`;
           return;
         }
         repos = d.repos;
-        content.innerHTML = '<p class="nb-next">1 · Choose a repo</p><p>Choose the GitHub repo this board will work on.</p><label class="nb-field"><span>Search repos or paste a GitHub link</span><input name="search" type="search" placeholder="Search or paste owner/name…" autocomplete="off" autocapitalize="off" spellcheck="false"></label><div data-repo-results></div>';
+        content.innerHTML = `<p class="nb-next">1 · Choose a repo</p><p>Choose the repo this board will work on: one of your GitHub repos, or any git repo by its link.</p><label class="nb-field"><span>Search repos or paste a git link</span><input name="search" type="search" placeholder="Search or paste owner/name or a git link…" autocomplete="off" autocapitalize="off" spellcheck="false"></label>${joinHint}<div data-repo-results></div>`;
         rows();
       } catch (e) { fail(e); content.innerHTML = '<button type="button" data-check-auth>Try again</button>'; }
     }
-    async function pick(github) {
-      selected = repos.find((r) => r.github === github) || (pasted?.github === github ? pasted : null);
+    async function pick(id) {
+      selected = repos.find((r) => r.github === id) || (pasted && idOf(pasted) === id ? pasted : null);
       if (!selected) return;
       const version = ++generation;
       clearTimeout(lookupTimer);
-      draft.github = github;
+      draft.github = selected.github || '';
+      draft.remote = selected.remote || '';
       draft.branch = '';
-      if (!edited) draft.name = github.split('/')[1];
+      if (!edited) draft.name = nameOf(selected).split('/').at(-1);
       error.hidden = true;
       const shared = selected.shared.map((b) => b.title).join(', ');
-      content.innerHTML = `<button type="button" data-back-repos>‹ Back</button><p class="nb-next">${current ? 'Repo details' : '2 · Board details'}</p><div class="nb-selected"><strong>${esc(github)}</strong><span class="nb-help">${selected.private ? 'Private' : 'Public'}</span><p>${selected.cloned ? shared ? `Shared with ${esc(shared)}` : 'Already cloned in .repos' : 'Clones to'}<code class="nb-clone">${esc(selected.clone)}</code></p></div><label class="nb-field"><span>Default branch for this board</span><select name="branch" disabled><option value="">Loading branches…</option></select><span class="nb-help" data-branch-help></span></label><p class="nb-next">Each board’s builders work in separate worktrees off this clone. Sharing the clone doesn’t share their working files.</p>${current ? '<p class="nb-next">New builders and GitHub links will use the selected repo.</p>' : `<label class="nb-field"><span>Name</span><input name="name" type="text" value="${esc(draft.name)}" required maxlength="60" autocomplete="off"></label><label class="nb-field"><span>What it’s for</span><input name="purpose" type="text" value="${esc(draft.purpose)}" maxlength="240"><span class="nb-help">One line to get the board started. Optional.</span></label><p class="nb-next">The hub ${selected.cloned ? 'reuses the clone' : 'clones the repo'} and starts your board. You can keep using your other boards.</p>`}`;
+      content.innerHTML = `<button type="button" data-back-repos>‹ Back</button><p class="nb-next">${current ? 'Repo details' : '2 · Board details'}</p><div class="nb-selected"><strong>${esc(nameOf(selected))}</strong><span class="nb-help">${esc(access(selected))}</span><p>${selected.cloned ? shared ? `Shared with ${esc(shared)}` : 'Already cloned in .repos' : 'Clones to'}<code class="nb-clone">${esc(selected.clone)}</code></p></div><label class="nb-field"><span>Default branch for this board</span><select name="branch" disabled><option value="">Loading branches…</option></select><span class="nb-help" data-branch-help></span></label><p class="nb-next">Each board’s implementers work in separate worktrees off this clone. Sharing the clone doesn’t share their working files.</p>${current ? '<p class="nb-next">New implementers and GitHub links will use the selected repo.</p>' : `<label class="nb-field"><span>Name</span><input name="name" type="text" value="${esc(draft.name)}" required maxlength="60" autocomplete="off"></label><label class="nb-field"><span>What it’s for</span><input name="purpose" type="text" value="${esc(draft.purpose)}" maxlength="240"><span class="nb-help">One line to get the board started. Optional.</span></label><p class="nb-next">The hub ${selected.cloned ? 'reuses the clone' : 'clones the repo'} and starts your board. You can keep using your other boards.</p>`}`;
       if (!current) {
         content.querySelectorAll('.nb-next')[content.querySelectorAll('.nb-next').length - 1].insertAdjacentHTML('beforebegin', '<div class="nb-field tk-section" role="group" aria-labelledby="nbTicketsLabel"><span id="nbTicketsLabel">Tickets</span><span class="nb-help">Where this board’s cards get their tickets. You can change it in Board settings.</span><div data-board-tickets></div></div>');
-        tickets = ticketsControl(content.querySelector('[data-board-tickets]'), { value: draft.tickets, ...(linear ? { linear } : { loadLinear: async () => { linear = await request('/_hub/api/linear'); return linear; } }),
+        tickets = ticketsControl(content.querySelector('[data-board-tickets]'), { value: draft.tickets, linear, loadLinear: async () => (linear = await request('/_hub/api/linear')),
           repo: () => draft.github, title: () => draft.name.trim(), isNew: true, change(value) { draft.tickets = value; sync(); } });
       }
       start.hidden = false;
       sync();
       try {
-        const d = await request(`/_hub/branches?github=${encodeURIComponent(github)}`);
+        const d = await request(`/_hub/branches?${draft.remote ? 'remote' : 'github'}=${encodeURIComponent(id)}`);
         if (closed || generation !== version) return;
-        draft.branch = current?.github === github && d.branches.includes(current.branch) ? current.branch : d.defaultBranch;
+        draft.branch = (current?.github || current?.remote) === id && d.branches.includes(current.branch) ? current.branch : d.defaultBranch;
         if (!d.branches.includes(draft.branch)) draft.branch = d.branches[0] || '';
         field('branch').innerHTML = d.branches.map((b) => `<option value="${esc(b)}"${b === draft.branch ? ' selected' : ''}>${esc(b)}${b === d.defaultBranch ? ' (repo default)' : ''}</option>`).join('');
         field('branch').value = draft.branch;
         field('branch').disabled = false;
-        el.querySelector('[data-branch-help]').textContent = draft.branch ? `New builders branch from ${draft.branch}.` : 'This repo has no branches yet.';
+        el.querySelector('[data-branch-help]').textContent = draft.branch ? `New implementers branch from ${draft.branch}.` : 'This repo has no branches yet.';
         sync();
       } catch (e) { fail(e); }
     }
@@ -317,7 +315,7 @@
     form.addEventListener('change', (e) => {
       if (e.target.getAttribute('name') === 'branch') {
         draft.branch = e.target.value;
-        el.querySelector('[data-branch-help]').textContent = `New builders branch from ${draft.branch}.`;
+        el.querySelector('[data-branch-help]').textContent = `New implementers branch from ${draft.branch}.`;
         sync();
       }
     });
@@ -328,7 +326,8 @@
       sync();
       error.hidden = true;
       try {
-        await save(current ? { github: draft.github, branch: draft.branch } : { name: draft.name.trim(), purpose: draft.purpose.trim(), github: draft.github, branch: draft.branch, tickets: tickets.read() }, selected);
+        const repo = draft.remote ? { remote: draft.remote } : { github: draft.github };
+        await save(current ? { ...repo, branch: draft.branch } : { name: draft.name.trim(), purpose: draft.purpose.trim(), ...repo, branch: draft.branch, tickets: tickets.read() }, selected);
         sending = false;
         el.close();
       } catch (e) { sending = false; fail(e); sync(); }
@@ -353,8 +352,7 @@
     picker();
     return () => { sending = false; el.close(); };
   }
-  const confirm = (message, labels) => (labels?.signal?.aborted ? Promise.resolve(false)
-    : labels?.ok ? sheet(message, labels) : Promise.resolve(window.confirm(message)));
+  const confirm = (message, { signal } = {}) => Promise.resolve(!signal?.aborted && window.confirm(message));
   const notice = (message) => { window.alert(message); return Promise.resolve(); };
   globalThis.BoardDialogs = { confirm, notice, fitSheet, repoSheet, ticketsControl };
 })();

package/board/public/hub-kit.js

@@ -88,7 +88,8 @@
     return { busy: () => sending };
   }
 
-  // This device's push subscription, as HubUI.deviceRow shows it: Turn on subscribes, and Test sends a test push.
+  // This device's push subscription, as HubUI.deviceRow shows it: Turn on subscribes, Test sends a test push, and each
+  // showing of the row tells the hub of a subscription this device no longer has.
   // iOS allows web push only in a Home Screen app, and asks for permission only from a tap, so requestPermission runs
   // first in the tap. paint() redraws the row, never before device() returns; changed() follows a subscription this
   // device just made.
@@ -103,15 +104,31 @@
     const keyBytes = (k) => Uint8Array.from(atob(k.replace(/-/g, '+').replace(/_/g, '/')), (c) => c.charCodeAt(0));
     const post = (p, body) => fetch(p, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body || {}) }).then((r) => r.json());
     const show = (next, isOn = false) => { if (!B.alive()) return; state = next; on = isOn; paint(); };
+    // The endpoint this device last gave the hub, kept in this browser, so that once the subscription goes (the
+    // browser dropped or replaced it, or notifications were blocked) the page tells the hub to forget it
+    // (docs/adr/0149-the-hub-reads-healthy-degraded-or-a-site-down.md).
+    const KEPT = 'kickflip.push.endpoint';
+    const kept = () => { try { return localStorage.getItem(KEPT); } catch { return null; } };
+    const keep = (endpoint) => { try { if (endpoint) localStorage.setItem(KEPT, endpoint); else localStorage.removeItem(KEPT); } catch { /* storage blocked here */ } };
+    const settle = (endpoint = null) => {
+      const old = kept();
+      if (old && old !== endpoint) post('/_hub/push/unsubscribe', { endpoint: old }).catch(() => {});
+      keep(endpoint);
+    };
 
     async function render() {
       if (!('serviceWorker' in navigator) || !('PushManager' in globalThis)) {
         if (ios && !standalone) show({ title: 'Add to Home Screen', sub: 'Tap Share, then Add to Home Screen, and open Claude from your Home Screen to turn on notifications.' });
         return;
       }
-      if (Notification.permission === 'denied') { show({ title: 'Notifications are blocked', sub: `Allow them in ${ios ? 'Settings → Notifications → Claude.' : "this browser's site settings."}` }); return; }
+      if (Notification.permission === 'denied') {
+        settle();
+        show({ title: 'Notifications are blocked', sub: `Allow them in ${ios ? 'Settings → Notifications → Claude.' : "this browser's site settings."}` });
+        return;
+      }
       const reg = await navigator.serviceWorker.getRegistration('/');
       const sub = await reg?.pushManager.getSubscription();
+      settle(sub?.toJSON().endpoint);
       if (sub) {
         post('/_hub/push/subscribe', sub.toJSON()).catch(() => {});
         show({ title: 'This device', action: { label: 'Test', act: 'test', quiet: true } }, true);

package/board/public/hub.css

@@ -1,5 +1,6 @@
 /* The hub page and settings modals (view-hub.js, view-hub-settings.js, view-polling.js), whose root carries .hub-view, and the hub's
-   down page (hub/hub.mjs), whose <html> does; served as /_hub/app/hub.css and /_hub/hub.css. Every rule is under
+   down page (hub/hub.mjs), whose <html> does, and the board's Hold sheet picker (ui-cards.js holdPicker), which shares the
+   duration picker's rules; served as /_hub/app/hub.css and /_hub/hub.css. Every rule is under
    .hub-view, since style.css uses the same short class names. The app shell links it after style.css, so a rule here
    wins a tie, and the header is style.css's alone, as on every view; each style.css rule that would reach these rows
    is set back here. */
@@ -27,7 +28,7 @@
 .hub-view .title { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; overflow-wrap:normal; }
 .hub-view .sub { display:block; color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; overflow-wrap:normal; }
 .hub-view .sub.wrap { white-space:normal; }
-.hub-view .st { font-weight:600; } .hub-view .st.down { color:var(--color-danger); } .hub-view .st.wait { color:var(--color-notice); }
+.hub-view .st { font-weight:600; } .hub-view button.st { background:none; border:0; padding:0; font:inherit; font-weight:600; color:inherit; cursor:pointer; text-decoration:underline dotted; text-underline-offset:3px; } .hub-view .st.down { color:var(--color-danger); } .hub-view .st.wait { color:var(--color-notice); }
 @keyframes pulse { 50% { opacity:.35; } }
 .hub-view main .icon { flex:none; width:34px; height:34px; border-radius:9px; display:grid; place-items:center; color:var(--c); background:color-mix(in srgb, var(--c) 18%, transparent); font-weight:700; font-size:16px; line-height:1; }
 .hub-view main .icon.sm { width:29px; height:29px; border-radius:7px; }
@@ -37,7 +38,7 @@
 .hub-view .badge { flex:none; min-width:22px; height:22px; padding:0 7px; border-radius:11px; background:var(--color-danger); color:#fff; font-size:12px; font-weight:600; line-height:22px; text-align:center; font-variant-numeric:tabular-nums; }
 .hub-view .chev { flex:none; color:var(--muted); font-size:1.3rem; line-height:1; }
 .hub-view .val { flex:none; color:var(--muted); font-size:13px; }
-.hub-view .btn { flex:none; font:inherit; font-size:13px; color:#fff; background:var(--accent); border:1px solid var(--accent); border-radius:7px; padding:6px 10px; cursor:pointer; }
+.hub-view .btn { flex:none; font:inherit; font-size:13px; color:var(--on-accent); background:var(--accent); border:1px solid var(--accent); border-radius:7px; padding:6px 10px; cursor:pointer; }
 .hub-view .btn.quiet { color:var(--text); background:var(--panel); border-color:var(--line); }
 .hub-view .btn:disabled { opacity:.5; cursor:default; }
 .hub-view .btn.danger { color:var(--color-danger); }
@@ -50,12 +51,12 @@
 .hub-view .day { position:relative; padding:18px 0 20px; }
 .hub-view .day .bar { position:relative; height:40px; border-radius:8px; overflow:hidden; background:var(--chip); }
 .hub-view .day .seg { position:absolute; top:0; bottom:0; display:grid; place-items:center; overflow:hidden; border-right:2px solid var(--panel);
-  background:color-mix(in srgb, var(--accent) var(--k), var(--chip)); }
+  background:color-mix(in srgb, var(--muted) var(--k), var(--chip)); }
 .hub-view .day .seg.held { background-image:repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--text) 22%, transparent) 5px 8px); }
 .hub-view .day .seg.sel { box-shadow:inset 0 0 0 3px var(--text); z-index:2; }
 .hub-view .day .seg span { font-size:11px; font-weight:600; line-height:1.5; color:var(--text); background:color-mix(in srgb, var(--panel) 85%, transparent); border-radius:4px; padding:0 4px; }
 .hub-view .day .pin { position:absolute; top:2px; transform:translateX(-50%); color:var(--color-notice); font-size:11px; line-height:1; }
-.hub-view .day .now { position:absolute; top:14px; height:48px; width:2px; margin-left:-1px; background:var(--color-danger); z-index:3; pointer-events:none; }
+.hub-view .day .now { position:absolute; top:14px; height:48px; width:2px; margin-left:-1px; background:var(--text); z-index:3; pointer-events:none; }
 .hub-view .day .ticks { position:absolute; left:0; right:0; bottom:0; height:16px; font-size:10px; color:var(--muted); }
 .hub-view .day .ticks span { position:absolute; transform:translateX(-50%); }
 .hub-view .day .ticks span:first-child { transform:none; } .hub-view .day .ticks span:last-child { transform:translateX(-100%); }
@@ -80,16 +81,17 @@
 .hub-view .hold-banner > span { flex:1; min-width:0; }
 .hub-view .hold-banner form { flex:none; margin:0; }
 .hub-view .hold-banner .btn { min-height:32px; }
-.hub-view .snooze-head { display:flex; align-items:center; gap:10px; }
-.hub-view .snooze-chips { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; margin-top:10px; }
-.hub-view .snooze-choices { display:contents; }
-.hub-view .snooze-chips .btn { display:block; min-height:40px; padding:6px 4px; text-align:center; white-space:nowrap; }
-.hub-view .snooze-custom { position:relative; margin:0; }
-.hub-view .snooze-custom .btn { display:grid; place-items:center; height:100%; }
-.hub-view .snooze-custom input[type=datetime-local] { position:absolute; inset:0; width:100%; height:100%; min-height:0; padding:0; margin:0; border:0; background:transparent; color:transparent; opacity:.011; font-size:16px; cursor:pointer; }
-.hub-view .snooze-custom input::-webkit-calendar-picker-indicator { position:absolute; inset:0; width:auto; height:auto; opacity:0; cursor:pointer; }
-.hub-view .snooze-custom:focus-within { outline:2px solid var(--accent); outline-offset:2px; border-radius:7px; }
-.hub-view .snooze-on .title { font-weight:600; white-space:normal; }
+.hub-view .dur-head { display:flex; align-items:center; gap:10px; }
+.hub-view .dur-chips { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; margin-top:10px; }
+.hub-view .dur-choices { display:contents; }
+.hub-view .dur-chips .btn { display:block; min-height:40px; padding:6px 4px; text-align:center; white-space:nowrap; }
+.hub-view .dur-custom { position:relative; margin:0; }
+.hub-view .dur-custom .btn { display:grid; place-items:center; height:100%; }
+.hub-view .dur-custom input[type=datetime-local] { position:absolute; inset:0; width:100%; height:100%; min-height:0; padding:0; margin:0; border:0; background:transparent; color:transparent; opacity:.011; font-size:16px; cursor:pointer; }
+.hub-view .dur-custom input::-webkit-calendar-picker-indicator { position:absolute; inset:0; width:auto; height:auto; opacity:0; cursor:pointer; }
+.hub-view .dur-custom:focus-within { outline:2px solid var(--accent); outline-offset:2px; border-radius:7px; }
+.hub-view .dur-on .title { font-weight:600; white-space:normal; }
+.hub-view .awake-on { color:var(--color-notice); font-weight:600; }
 .hub-view code { font-family:var(--mono); font-size:.85em; white-space:nowrap; }
 .hub-view footer { color:var(--muted); font-size:12px; margin:1.8rem 2px 0; }
 .hub-view .host { font-family:var(--mono); font-size:11px; overflow-wrap:anywhere; }
@@ -110,13 +112,14 @@
 .hub-view .hub-setting { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; font: inherit; text-align: left; color: var(--text); cursor: pointer; border: 1px solid var(--line); border-radius: 12px; margin: 10px 0; background: var(--panel); }
 .hub-view .hub-setting .text { flex: 1; min-width: 0; }
 .hub-view .hub-setting .title { font-weight: 600; }
+.hub-view .hub-setting:disabled { cursor: default; opacity: .6; }
 .hub-view .hub-setting .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .hub-view .hub-modal .settings-body { padding-top: 2px; }
 .hub-view .hub-modal .setting-content > .label:first-child { margin-top: 14px; }
 .hub-view .hub-modal .setting-content > .group:first-child { margin-top: 16px; }
 .hub-view .hub-modal .rules-box { margin-top: 14px; }
 
-.hub-view .u-tone-ok { --u: var(--accent); }
+.hub-view .u-tone-ok { --u: var(--muted); }
 .hub-view .u-tone-high { --u: var(--color-notice); }
 .hub-view .u-tone-full { --u: var(--color-danger); }
 .hub-view .u-tone-stale, .hub-view .u-tone-none { --u: var(--muted); }
@@ -138,7 +141,6 @@
 .hub-view .segments.is-disabled button { cursor: not-allowed; }
 .hub-view .segments.is-disabled button[aria-pressed="true"] { border-color: var(--muted); background: var(--panel); color: var(--text); }
 .hub-view .u-share-desc { margin: 8px 2px 0; color: var(--muted); font-size: 13px; }
-.hub-view .u-share-note { margin: 4px 2px 0; color: var(--muted); font-size: 12px; }
 .hub-view .u-share-fix { margin: 6px 2px 0; }
 .hub-view .u-share-fix code { display: inline-block; padding: 3px 7px; border-radius: 6px; background: var(--chip); color: var(--text); font-size: 12.5px; user-select: all; }
 .hub-view .lk-form { display:flex; gap:8px; align-items:center; }
@@ -150,7 +152,6 @@
 .hub-view .hold-banner.ub-going { border-color: color-mix(in srgb, var(--color-danger) 45%, transparent); background: color-mix(in srgb, var(--color-danger) 10%, var(--panel)); }
 .hub-view .hold-banner.ub-going > svg { color: var(--color-danger); }
 
-.hub-view .u-buffer { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
 .hub-view .ub-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
 .hub-view .ub-label { min-width: 0; }
 .hub-view .ub-label .title { display: block; font-size: 14px; }
@@ -162,3 +163,8 @@
 .hub-view .ub-step output.off { border-color: var(--line); background: var(--panel); color: var(--muted); }
 .hub-view .ub-marked .u-bar { position: relative; }
 .hub-view .ub-marked .u-bar > .ub-mark { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; border-radius: 0; background: var(--text); opacity: .5; }
+
+.hub-view .rd-fix button.link { padding: 0; font-size: inherit; }
+.hub-view .site-row > .site-link { flex:1; min-width:0; display:flex; align-items:center; gap:10px; color:inherit; }
+.hub-view .restart-btn { min-width:76px; min-height:34px; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
+.hub-view .restart-btn .try-spin { width:9px; height:9px; }