@bitpub/cli 2.1.2 → 2.1.4

package/static/console.html

@@ -217,9 +217,27 @@ svg { flex-shrink: 0; }
 #main:hover::-webkit-scrollbar-thumb { background: var(--border); background-clip: content-box; }
 
 /* ── Sidebar / Tree ─────────────────────────────────── */
-.sidebar-header { padding: 12px 14px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); display: flex; align-items: center; justify-content: space-between; }
+.sidebar-header { padding: 12px 14px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
 .sidebar-header .clear-btn { font-size: 10.5px; color: var(--text-subtle); cursor: pointer; font-weight: 500; letter-spacing: 0; text-transform: none; }
 .sidebar-header .clear-btn:hover { color: var(--accent); }
+
+/* Sync button — icon-only, ghost style, lives in the sidebar header.
+   Spins while a /bridge/sync request is in flight; pulses green for a
+   moment after a successful sync so the user gets feedback even if no
+   new slices landed. */
+.sync-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border: 0; background: transparent; color: var(--text-subtle); cursor: pointer; border-radius: var(--radius-sm); font: inherit; font-size: 10.5px; font-weight: 500; text-transform: none; letter-spacing: 0; }
+.sync-btn:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); }
+.sync-btn:disabled { opacity: .6; cursor: default; }
+.sync-btn svg { width: 12px; height: 12px; transition: transform .2s ease-out; }
+.sync-btn.is-syncing svg { animation: bp-spin 1s linear infinite; }
+.sync-btn.is-done { color: #10b981; }
+@keyframes bp-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+.sync-status { padding: 4px 14px 8px; font-size: 11px; color: var(--text-subtle); line-height: 1.4; max-height: 120px; overflow-y: auto; }
+.sync-status.hidden { display: none; }
+.sync-status .row { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
+.sync-status .row .label { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.sync-status .row .count { color: var(--text-subtle); flex-shrink: 0; font-variant-numeric: tabular-nums; }
+.sync-status .row.error .count { color: var(--scope-group); }
 .tree-wrap { flex: 1; overflow-y: auto; padding: 0 6px 12px; }
 .tree-wrap::-webkit-scrollbar { width: 8px; }
 .tree-wrap::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
@@ -972,8 +990,15 @@ svg { flex-shrink: 0; }
     <aside id="sidebar">
       <div class="sidebar-header">
         <span>Namespaces</span>
-        <span id="clear-filter-btn" class="clear-btn hidden" onclick="clearFilter()">Clear</span>
+        <span style="display:inline-flex; align-items:center; gap:6px;">
+          <span id="clear-filter-btn" class="clear-btn hidden" onclick="clearFilter()">Clear</span>
+          <button id="sync-btn" class="sync-btn" type="button" onclick="runFullSync()" title="Sync all namespaces from the cloud into your local cache">
+            <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 3a5 5 0 0 1 4.546 2.914.5.5 0 0 0 .908-.418A6 6 0 1 0 2 8a.5.5 0 1 0 1 0 5 5 0 0 1 5-5Z"/><path d="M8 13a5 5 0 0 1-4.546-2.914.5.5 0 0 0-.908.418A6 6 0 1 0 14 8a.5.5 0 1 0-1 0 5 5 0 0 1-5 5Z"/><path d="M11.5 1.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1 0-1H11V2a.5.5 0 0 1 .5-.5ZM4.5 10.5a.5.5 0 0 1 .5.5v2.5h2.5a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5Z"/></svg>
+            <span class="sync-btn-label">Sync</span>
+          </button>
+        </span>
       </div>
+      <div id="sync-status" class="sync-status hidden"></div>
       <div id="tree" class="tree-wrap"></div>
     </aside>
     <main id="main"></main>
@@ -992,6 +1017,7 @@ const S = {
   stats: {},
   mode: 'remote',
   domain: '',
+  knownGroups: [],
   apiKey: sessionStorage.getItem('bitpub_key'),
   raw: false,
   searchQuery: '',
@@ -1180,7 +1206,8 @@ function ingestData(data) {
   S.slices = data.slices.map(parseSlice);
   S.mode = data.mode || 'remote';
   S.domain = data.domain || '';
-  S.tree = buildTree(S.slices);
+  S.knownGroups = Array.isArray(data.known_groups) ? data.known_groups : [];
+  S.tree = buildTree(S.slices, S.knownGroups);
   S.stats = computeStats(S.slices);
   S.lastUpdated = maxTs(S.slices);
 }
@@ -1229,7 +1256,8 @@ async function pollData() {
 
   S.slices = nextSlices;
   S.mode = data.mode || S.mode;
-  S.tree = buildTree(S.slices);
+  S.knownGroups = Array.isArray(data.known_groups) ? data.known_groups : S.knownGroups;
+  S.tree = buildTree(S.slices, S.knownGroups);
   S.stats = computeStats(S.slices);
   S.lastUpdated = maxTs(S.slices);
   S.newArrivals = arrivals;
@@ -1320,7 +1348,7 @@ function pathOf(hcu) {
   return (m && m[1]) ? m[1].replace(/^\//, '').split('/') : [];
 }
 
-function buildTree(slices) {
+function buildTree(slices, knownGroups) {
   const tree = {};
   for (const s of slices) {
     const { scope, type } = scopeOf(s.hcu);
@@ -1333,6 +1361,17 @@ function buildTree(slices) {
       if (i === segs.length - 1) node.slice = s;
     }
   }
+  // Seed empty top-level nodes for groups the user belongs to but
+  // hasn't put any slices in yet. The tree is otherwise slice-driven,
+  // so brand-new groups would be invisible in the sidebar until the
+  // first save — confusing right after `bitpub group create`.
+  if (Array.isArray(knownGroups)) {
+    for (const g of knownGroups) {
+      if (!g || !g.slug) continue;
+      const scope = `group:${g.slug}`;
+      if (!tree[scope]) tree[scope] = { type: 'group', children: {}, count: 0 };
+    }
+  }
   return tree;
 }
 
@@ -1456,6 +1495,136 @@ function clearFilter() {
   renderAll();
 }
 
+/* ── Sidebar Sync button ────────────────────────────────
+ *
+ * Streams /bridge/sync (SSE) and renders per-scope progress under the
+ * header. On `done`, force a fresh /api/data poll so the tree picks up
+ * any new arrivals immediately (without waiting for the 30s tick).
+ *
+ * The button is browser chrome — not an app function — so it talks
+ * directly to /bridge/sync rather than going through window.bitpub.run
+ * and the manifest dispatcher.
+ *
+ * Reentrancy: a second click while a sync is in flight is a no-op
+ * (we disable the button), so we don't need to track an EventSource
+ * handle for cancellation.
+ */
+async function runFullSync() {
+  const btn = $('sync-btn');
+  const status = $('sync-status');
+  if (!btn || btn.disabled) return;
+
+  btn.disabled = true;
+  btn.classList.add('is-syncing');
+  btn.classList.remove('is-done');
+  status.classList.remove('hidden');
+  status.innerHTML = '';
+
+  // Track rows so 'syncing' → 'done' overwrites in place rather than
+  // appending a second line per scope.
+  const rows = new Map();
+
+  function setRow(label, pattern, statusText, klass) {
+    let row = rows.get(label);
+    if (!row) {
+      row = document.createElement('div');
+      row.className = 'row';
+      const a = document.createElement('span'); a.className = 'label';
+      const b = document.createElement('span'); b.className = 'count';
+      row.append(a, b);
+      status.appendChild(row);
+      rows.set(label, row);
+    }
+    row.className = 'row' + (klass ? ' ' + klass : '');
+    row.title = pattern;
+    row.children[0].textContent = label;
+    row.children[1].textContent = statusText;
+  }
+
+  const base = location.pathname.endsWith('/') ? location.pathname : location.pathname + '/';
+  const es = new EventSource(base + 'bridge/sync');
+
+  function cleanup() {
+    es.close();
+    btn.disabled = false;
+    btn.classList.remove('is-syncing');
+  }
+
+  es.addEventListener('started', (e) => {
+    let payload = {};
+    try { payload = JSON.parse(e.data); } catch {}
+    for (const t of (payload.targets || [])) setRow(t.label, t.pattern, 'queued', '');
+  });
+
+  es.addEventListener('scope', (e) => {
+    let payload = {};
+    try { payload = JSON.parse(e.data); } catch {}
+    if (payload.status === 'syncing') {
+      setRow(payload.label, payload.pattern, 'syncing…', '');
+    } else if (payload.status === 'done') {
+      const cnt = (payload.count ?? 0) + ' slices';
+      const suffix = payload.hitLimit ? ' (capped)' : '';
+      setRow(payload.label, payload.pattern, cnt + suffix, '');
+    } else if (payload.status === 'error') {
+      setRow(payload.label, payload.pattern, 'error', 'error');
+      console.error('[sync]', payload.label, payload.message);
+    }
+  });
+
+  es.addEventListener('error', (e) => {
+    // Server-sent `event: error` (CLI-reported); EventSource also fires
+    // 'error' on connection drops with no payload. Treat both the same.
+    let payload = {};
+    if (e && e.data) { try { payload = JSON.parse(e.data); } catch {} }
+    if (payload.message) {
+      const row = document.createElement('div');
+      row.className = 'row error';
+      row.innerHTML = '<span class="label">sync failed</span><span class="count"></span>';
+      row.children[1].textContent = payload.message.slice(0, 60);
+      status.appendChild(row);
+    }
+    // Don't cleanup here — wait for `done`, or for the connection to
+    // close on its own. Real errors will be followed by `done`.
+  });
+
+  es.addEventListener('done', async (e) => {
+    let payload = {};
+    try { payload = JSON.parse(e.data); } catch {}
+    cleanup();
+    btn.classList.add('is-done');
+    setTimeout(() => btn.classList.remove('is-done'), 2000);
+
+    // Force-refresh the data so any newly-synced slices show up in
+    // the tree immediately instead of on the next 30s poll tick.
+    const data = await fetchData({ silent: true });
+    if (data) {
+      const arrivals = new Set();
+      const oldKey = new Set(S.slices.map(s => s.hcu + '|' + (s.last_synced || '')));
+      const nextSlices = data.slices.map(parseSlice);
+      for (const s of nextSlices) {
+        const k = s.hcu + '|' + (s.last_synced || '');
+        if (!oldKey.has(k)) arrivals.add(s.hcu);
+      }
+      S.slices = nextSlices;
+      S.knownGroups = Array.isArray(data.known_groups) ? data.known_groups : S.knownGroups;
+      S.tree = buildTree(S.slices, S.knownGroups);
+      S.stats = computeStats(S.slices);
+      S.lastUpdated = maxTs(S.slices);
+      S.newArrivals = arrivals;
+      renderAll();
+      setTimeout(() => { S.newArrivals = new Set(); }, 2500);
+    }
+
+    // Auto-hide the status panel after a beat if everything succeeded.
+    const anyErrors = Array.from(rows.values()).some(r => r.classList.contains('error'));
+    if (!anyErrors) {
+      setTimeout(() => {
+        if (!btn.classList.contains('is-syncing')) status.classList.add('hidden');
+      }, 4000);
+    }
+  });
+}
+
 /* ══════════════════════════════════════════════════════
    Top-level render
    ══════════════════════════════════════════════════════ */
@@ -2644,6 +2813,23 @@ const BRIDGE_SHIM_SOURCE = String.raw`
         private_prefix: d.private_prefix,
       });
       else ih.reject(new Error(d.error || 'identity lookup failed'));
+    } else if (d.type === 'bitpub.groups.result') {
+      var gh = readHandlers.get(d.requestId);
+      if (!gh) return;
+      readHandlers.delete(d.requestId);
+      if (d.ok) {
+        // Three response shapes share one event for symmetry with how
+        // the parent router replies. Callers just see their op's keys.
+        var payload = {};
+        if (typeof d.group     !== 'undefined') payload.group       = d.group;
+        if (typeof d.invite_url!== 'undefined') payload.invite_url  = d.invite_url;
+        if (typeof d.groups    !== 'undefined') payload.groups      = d.groups;
+        if (typeof d.rotated   !== 'undefined') payload.rotated     = d.rotated;
+        if (typeof d.needs_rotate !== 'undefined') payload.needs_rotate = d.needs_rotate;
+        gh.resolve(payload);
+      } else {
+        gh.reject(new Error(d.error || 'groups op failed'));
+      }
     }
   });
   window.bitpub = {
@@ -2725,6 +2911,69 @@ const BRIDGE_SHIM_SOURCE = String.raw`
           }, 5000);
         });
       }
+    },
+    groups: {
+      // Group management (browser chrome — backed by the local CLI's
+      // bridge endpoints, not the manifest/apps system). Available to
+      // any slice the parent has agreed to render; the user already
+      // trusts these endpoints by running 'bitpub browser'.
+      //
+      //   create(display)      -> Promise of { group, invite_url }
+      //   list()               -> Promise of { groups }
+      //   invite(slug, opts)   -> Promise of { invite_url, rotated, needs_rotate }
+      //                          opts.rotate=true rotates server-side
+      //                          (invalidates any link teammates hold).
+      create: function (display) {
+        return new Promise(function (resolve, reject) {
+          var requestId = ++nextId;
+          readHandlers.set(requestId, { resolve: resolve, reject: reject });
+          window.parent.postMessage({
+            __bitpub: true,
+            type: 'bitpub.groups.create',
+            requestId: requestId,
+            display: String(display || ''),
+          }, '*');
+          setTimeout(function () {
+            if (!readHandlers.has(requestId)) return;
+            readHandlers.delete(requestId);
+            reject(new Error('groups.create timed out'));
+          }, 30000);
+        });
+      },
+      list: function () {
+        return new Promise(function (resolve, reject) {
+          var requestId = ++nextId;
+          readHandlers.set(requestId, { resolve: resolve, reject: reject });
+          window.parent.postMessage({
+            __bitpub: true,
+            type: 'bitpub.groups.list',
+            requestId: requestId,
+          }, '*');
+          setTimeout(function () {
+            if (!readHandlers.has(requestId)) return;
+            readHandlers.delete(requestId);
+            reject(new Error('groups.list timed out'));
+          }, 5000);
+        });
+      },
+      invite: function (slug, opts) {
+        return new Promise(function (resolve, reject) {
+          var requestId = ++nextId;
+          readHandlers.set(requestId, { resolve: resolve, reject: reject });
+          window.parent.postMessage({
+            __bitpub: true,
+            type: 'bitpub.groups.invite',
+            requestId: requestId,
+            slug: String(slug || ''),
+            rotate: !!(opts && opts.rotate),
+          }, '*');
+          setTimeout(function () {
+            if (!readHandlers.has(requestId)) return;
+            readHandlers.delete(requestId);
+            reject(new Error('groups.invite timed out'));
+          }, 30000);
+        });
+      }
     }
   };
 })();
@@ -3019,6 +3268,89 @@ async function handleBridgeNamespaceListMessage(source, msg) {
   }
 }
 
+async function handleBridgeGroupsMessage(source, msg) {
+  // Three ops share one reply event for symmetry with the iframe-side
+  // dispatcher. Each op posts whatever subset of keys the caller asked
+  // for; the shim unpacks them.
+  const { requestId, type } = msg;
+  if (typeof requestId !== 'number') return;
+  const reply = (extra) => {
+    try {
+      source.postMessage({
+        __bitpub: true,
+        type: 'bitpub.groups.result',
+        requestId,
+        ...extra,
+      }, '*');
+    } catch (_) { /* iframe gone */ }
+  };
+
+  try {
+    if (type === 'bitpub.groups.create') {
+      const r = await fetch('/bridge/group/create', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ display: msg.display || '' }),
+      });
+      const body = await r.json();
+      if (!r.ok || !body.ok) {
+        reply({ ok: false, error: (body && body.error) || `http ${r.status}` });
+        return;
+      }
+      // The new group will appear in the local config; refresh the
+      // sidebar tree so it shows up alongside any existing namespaces.
+      // We refetch /api/data immediately (rather than waiting for the
+      // 30s poll) and re-run buildTree so the empty group node lands
+      // in the sidebar.
+      (async () => {
+        try {
+          const fresh = await fetchData({ silent: true });
+          if (!fresh) return;
+          S.slices = fresh.slices.map(parseSlice);
+          S.knownGroups = Array.isArray(fresh.known_groups) ? fresh.known_groups : S.knownGroups;
+          S.tree = buildTree(S.slices, S.knownGroups);
+          S.stats = computeStats(S.slices);
+          renderAll();
+        } catch (_) { /* poll will catch up */ }
+      })();
+      reply({ ok: true, group: body.group, invite_url: body.invite_url });
+      return;
+    }
+    if (type === 'bitpub.groups.list') {
+      const r = await fetch('/bridge/group/list');
+      const body = await r.json();
+      if (!r.ok || !body.ok) {
+        reply({ ok: false, error: (body && body.error) || `http ${r.status}` });
+        return;
+      }
+      reply({ ok: true, groups: body.groups || [] });
+      return;
+    }
+    if (type === 'bitpub.groups.invite') {
+      const r = await fetch('/bridge/group/invite', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ slug: msg.slug || '', rotate: !!msg.rotate }),
+      });
+      const body = await r.json();
+      if (!r.ok || !body.ok) {
+        reply({ ok: false, error: (body && body.error) || `http ${r.status}` });
+        return;
+      }
+      reply({
+        ok: true,
+        invite_url: body.invite_url || null,
+        rotated: !!body.rotated,
+        needs_rotate: !!body.needs_rotate,
+      });
+      return;
+    }
+    reply({ ok: false, error: `unknown groups op: ${type}` });
+  } catch (err) {
+    reply({ ok: false, error: (err && err.message) || 'fetch failed' });
+  }
+}
+
 async function handleBridgeIdentityMessage(source, msg) {
   const { requestId } = msg;
   if (typeof requestId !== 'number') return;
@@ -3058,6 +3390,9 @@ window.addEventListener('message', (e) => {
   if (d.type === 'bitpub.run') handleBridgeRunMessage(e.source, d);
   else if (d.type === 'bitpub.namespace.list') handleBridgeNamespaceListMessage(e.source, d);
   else if (d.type === 'bitpub.identity.me') handleBridgeIdentityMessage(e.source, d);
+  else if (d.type === 'bitpub.groups.create' ||
+           d.type === 'bitpub.groups.list'   ||
+           d.type === 'bitpub.groups.invite') handleBridgeGroupsMessage(e.source, d);
   else if (d.type === 'bitpub.navigate' || d.type === 'navigate') handleBridgeNavigateMessage(e.source, d);
 });