aimeat 1.40.0 → 2.0.0

package/dist/public/sw.js

@@ -5,12 +5,16 @@
  *
  * @structure
  *   - install/activate: skipWaiting + clients.claim so click-routing fixes take effect immediately
- *   - push: parses the JSON payload into a notification (title/body/icon/badge/tag/data.url)
+ *   - push: parses the JSON payload into a notification (title/body/icon/badge/tag/data.url), and
+ *     renders up to two OS-level action buttons from payload.actions ([{action,title}])
  *   - notificationclick: focuses a matching same-path window (postMessage 'aimeat-notification-click')
- *     for in-place tab switching, else opens a new window that cold-loads via ?tab= / #hash
+ *     for in-place tab switching, else opens a new window that cold-loads via ?tab= / #hash. When an
+ *     action button was clicked, it also posts 'aimeat-notification-action' with the action id so the
+ *     focused SPA can run it with the owner's session (a lock screen can't hold the JWT).
  *
  * @version-history
  *   v1.0.0 — 2026-07-13 — Header added; file pre-dates header standard
+ *   v1.1.0 — 2026-07-18 — Render notification action buttons + route action clicks to the SPA.
  */
 
 // Take over immediately so click-routing fixes apply without waiting for every tab to close.
@@ -30,6 +34,11 @@ self.addEventListener('push', (event) => {
       data: data.data || data,
     };
     if (data.url) options.data.url = data.url;
+    // OS-level action buttons (most platforms show ≤2). The full action descriptors ride along in
+    // options.data.actions so a click can be routed back to the SPA to execute with the owner's JWT.
+    if (Array.isArray(data.actions) && data.actions.length) {
+      options.actions = data.actions.slice(0, 2).map((a) => ({ action: a.action, title: a.title }));
+    }
     event.waitUntil(self.registration.showNotification(title, options));
   } catch {
     const text = event.data.text();
@@ -39,17 +48,27 @@ self.addEventListener('push', (event) => {
 
 self.addEventListener('notificationclick', (event) => {
   event.notification.close();
-  const url = event.notification.data?.url || '/v1/profile';
+  const data = event.notification.data || {};
+  // Which action button (if any) was pressed → its full descriptor from the payload.
+  const descriptor = event.action && Array.isArray(data.actions)
+    ? data.actions.find((a) => a.id === event.action) : null;
+  const url = data.url || '/v1/profile';
   const target = new URL(url, self.location.origin);
+  const actionMsg = descriptor
+    ? { type: 'aimeat-notification-action', action: descriptor, notifId: data.notifId, url: target.pathname + target.search + target.hash }
+    : null;
   event.waitUntil(
     clients.matchAll({ type: 'window', includeUncontrolled: true }).then((windowClients) => {
       for (const client of windowClients) {
         let clientUrl;
         try { clientUrl = new URL(client.url); } catch { continue; }
         if (clientUrl.origin !== target.origin || clientUrl.pathname !== target.pathname) continue;
-        client.postMessage({ type: 'aimeat-notification-click', url: target.pathname + target.search + target.hash });
+        // A focused SPA runs the action with the owner's session; a plain click just switches view.
+        client.postMessage(actionMsg || { type: 'aimeat-notification-click', url: target.pathname + target.search + target.hash });
         return 'focus' in client ? client.focus() : undefined;
       }
+      // No matching window: cold-open the deep link. (Inline action execution needs the SPA loaded;
+      // the owner lands on the target view and can complete it there.)
       return clients.openWindow(target.href);
     })
   );

package/dist/public/views/_template.js

@@ -10,6 +10,11 @@
  * @usage cp public/views/_template.js public/views/myview.js, then follow the numbered steps below.
  *
  * @version-history
+ *   v1.1.0 — 2026-07-17 — Teach the canonical patterns instead of anti-patterns:
+ *     buttons use `.btn-primary`/`.btn-ghost` directly (there is NO `.btn` base class),
+ *     the header uses `.page-title`/`.section-title`+`.section-desc`, and the render
+ *     states delegate to the canonical <Spinner>/<EmptyState> components. Copying this
+ *     scaffold now seeds good habits, not `class="btn btn-*"` + raw <h1>.
  *   v1.0.0 — 2026-07-13 — Header added; file pre-dates header standard
  * ─────────────────────────────────────────────────────────────────────────────
  * Copy this file to create a new view:
@@ -32,6 +37,10 @@ import { t }                       from '/js/i18n.js';
 import { escHtml }                 from '/js/utils.js';
 import { apiPost }                 from '/js/api.js';
 import { useApiCall }              from '/js/hooks.js';
+// Canonical primitives — prefer these over hand-rolled spinners/empty divs/dots.
+// Import each component directly (every view does; each has its own importmap entry).
+import { Spinner }                 from '/components/Spinner.js';
+import { EmptyState }              from '/components/EmptyState.js';
 
 /**
  * MyView — replace with your view's name and description.
@@ -71,26 +80,30 @@ export default function MyView({ navigate }) {
     if (r.ok) reload();
   }
 
-  // ── Render states ──────────────────────────────────────────────────────────
-  if (loading) return html`<div class="view-loading">${t('loading')}</div>`;
+  // ── Render states (canonical: <Spinner> for loading, <Alert> markup for error) ─
+  if (loading) return html`<${Spinner} text=${t('loading')} />`;
   if (error)   return html`<div class="alert alert-error">${escHtml(error)}</div>`;
 
   // ── Main render ────────────────────────────────────────────────────────────
+  // Header pattern: `.page-title` at the top of a standalone view, or
+  // `.section-title` + `.section-desc` for each section inside a tab. Buttons use
+  // the canonical `.btn-*` classes directly — there is NO `.btn` base class.
   return html`
     <div class="myview-container">
-      <h1>${t('myview.title')}</h1>
+      <div class="page-title">${t('myview.title')}</div>
+      <div class="section-desc">${t('myview.desc')}</div>
 
-      ${data && html`
-        <p>${escHtml(data.someField)}</p>
-      `}
+      ${data
+        ? html`<p>${escHtml(data.someField)}</p>`
+        : html`<${EmptyState} text=${t('myview.empty')} />`}
 
       <form onSubmit=${handleSubmit}>
-        <button type="submit" class="btn btn-primary" disabled=${submitting}>
+        <button type="submit" class="btn-primary" disabled=${submitting}>
           ${submitting ? t('saving') : t('myview.submit')}
         </button>
       </form>
 
-      <button class="btn btn-ghost" onClick=${() => navigate('/v1/portal')}>
+      <button class="btn-ghost" onClick=${() => navigate('/v1/portal')}>
         ${t('nav.back')}
       </button>
     </div>

package/dist/public/views/admin/cortex-tab.js

@@ -98,7 +98,7 @@ export default function CortexTab() {
       ${toast && html`<${Toast} type=${toast.type} text=${toast.text} onDismiss=${clearToast} />`}
       <${ConfirmUI} />
       <button class="adm-btn-action" onClick=${() => setDetail(null)}>${t('dashboard.cortex.back')}</button>
-      <h3 class="adm-section-title" style="margin-top:1rem">${escHtml(ext.name)} <span class="adm-text-dim adm-text-sm">v${ext.version || '?'}</span></h3>
+      <h3 class="adm-sec-title" style="margin-top:1rem">${escHtml(ext.name)} <span class="adm-text-dim adm-text-sm">v${ext.version || '?'}</span></h3>
       <p class="adm-text-dim">${escHtml(ext.description || '')}</p>
       <div class="adm-meta-row">
         <span>${t('dashboard.cortex.author')}: ${escHtml(ext.author || '?')}</span>
@@ -107,7 +107,7 @@ export default function CortexTab() {
         <span><${Badge} type=${isActive ? 'success' : 'muted'} label=${isActive ? t('dashboard.cortex.active') : t('dashboard.cortex.inactive')} /></span>
       </div>
 
-      <h4 class="adm-section-title" style="margin-top:1.5rem">${t('dashboard.cortex.components')}</h4>
+      <h4 class="adm-sec-title" style="margin-top:1.5rem">${t('dashboard.cortex.components')}</h4>
       <div class="adm-card">
         ${comps.length === 0 ? html`<${Empty} text=${t('dashboard.cortex.noComponents')} />` : comps.map(c => html`
           <div class="adm-row">${COMP_ICONS[c.type] || '\u{1F4C4}'} ${c.type}: ${c.type === 'schema' ? c.key_pattern : (c.name || c.filename || '')}</div>

package/dist/public/views/admin/database-tab.js

@@ -0,0 +1,140 @@
+/**
+ * @file database-tab.js
+ * @description Admin dashboard Database tab — operator storage-growth telemetry. Shows the LIVE per-table
+ *   row counts (backend-specific server-side), the total + how it changed over the last hour / 24h / 7d
+ *   (derived from the hourly snapshots the storage-stats core job captures), and a per-table table with a
+ *   relative-size bar and a 24h growth delta. A "Capture now" button forces a snapshot. Re-fetches on the
+ *   aimeat-live-update event like the other server-data tabs.
+ * @structure
+ *   - snapshotAt(snaps, hoursAgo) -- newest snapshot at or before now-hoursAgo (baseline for a delta)
+ *   - Delta                       -- +N / -N with up/down colour
+ *   - DatabaseTab (default)       -- summary cards + capture button + per-table counts table
+ * @version-history
+ *   v1.1.0 -- 2026-07-16 -- Total-rows card sub-line shows the memory-table composition
+ *     (version-history + archived row counts) when the server reports them.
+ *   v1.0.0 -- 2026-07-16 -- Initial: live counts, hour/24h/7d totals, per-table 24h growth.
+ */
+import { h } from 'preact';
+import { useState, useEffect, useCallback } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { num, StatCard, Spinner, Empty, useToast, Toast } from './shared.js';
+import * as api from '/js/services/admin.js';
+
+/** The newest snapshot captured at or before (now - hoursAgo), or null if none that old. */
+function snapshotAt(snaps, hoursAgo) {
+  const cutoff = Date.now() - hoursAgo * 3600_000;
+  // snaps are newest-first; the first one older than the cutoff is the best baseline.
+  return snaps.find(s => new Date(s.capturedAt).getTime() <= cutoff) ?? null;
+}
+
+/** Signed delta with colour: positive = grew (up), negative = shrank (down), 0 = muted. */
+function Delta({ value }) {
+  if (value === null || value === undefined) return html`<span class="adm-delta-zero">—</span>`;
+  const cls = value > 0 ? 'adm-delta-up' : value < 0 ? 'adm-delta-down' : 'adm-delta-zero';
+  const sign = value > 0 ? '+' : '';
+  return html`<span class=${cls}>${sign}${num(value)}</span>`;
+}
+
+export default function DatabaseTab() {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [capturing, setCapturing] = useState(false);
+  const [toast, showErr, showOk, clearToast] = useToast();
+
+  const load = useCallback(async () => {
+    try {
+      const res = await api.getStorageStats(168);   // up to 7 days of hourly snapshots
+      setData(res.data);
+    } catch (e) { showErr(e.message); }
+    finally { setLoading(false); }
+  }, [showErr]);
+
+  useEffect(() => { load(); }, [load]);
+  useEffect(() => {
+    const handler = () => load();
+    window.addEventListener('aimeat-live-update', handler);
+    return () => window.removeEventListener('aimeat-live-update', handler);
+  }, [load]);
+
+  const capture = useCallback(async () => {
+    setCapturing(true);
+    try { await api.captureStorageSnapshot(); showOk(t('admin.database.captured')); await load(); }
+    catch (e) { showErr(e.message); }
+    finally { setCapturing(false); }
+  }, [load, showOk, showErr]);
+
+  if (loading && !data) return html`<${Spinner} text=${t('admin.database.loading')} />`;
+  if (!data) return html`<${Empty} text=${t('admin.database.empty')} />`;
+
+  const { current, snapshots } = data;
+  const counts = current.counts || {};
+  const base1h = snapshotAt(snapshots, 1);
+  const base24h = snapshotAt(snapshots, 24);
+  const base7d = snapshotAt(snapshots, 24 * 7) ?? snapshots[snapshots.length - 1] ?? null;
+  const totalDelta = base => (base ? current.totalRows - base.totalRows : null);
+
+  // Per-table rows, largest first, with a 24h delta and a relative-size bar.
+  const baseCounts = base24h?.counts || {};
+  const maxCount = Math.max(1, ...Object.values(counts));
+  const rows = Object.entries(counts)
+    .sort((a, b) => b[1] - a[1])
+    .map(([table, n]) => ({ table, n, delta: baseCounts[table] === undefined ? null : n - baseCounts[table], pct: Math.round((n / maxCount) * 100) }));
+
+  return html`<div class="adm">
+    ${toast && html`<${Toast} ...${toast} onDismiss=${clearToast} />`}
+    <div class="adm-section-head">
+      <div>
+        <div class="section-title">${t('admin.database.title')}</div>
+        <div class="section-desc">${t('admin.database.desc')}</div>
+      </div>
+      <button class="btn-outline" onClick=${capture} disabled=${capturing}>
+        ${capturing ? t('admin.database.capturing') : t('admin.database.captureNow')}
+      </button>
+    </div>
+
+    <div class="adm-grid adm-grid-4">
+      <${StatCard} label=${t('admin.database.totalRows')} value=${current.totalRows}
+        sub=${`${num(current.tableCount)} ${t('admin.database.tables')}`
+          + (current.memoryVersionRows !== undefined ? ` · ${num(current.memoryVersionRows)} ${t('admin.database.memoryVersionRows')}` : '')
+          + (current.memoryArchivedRows !== undefined ? ` · ${num(current.memoryArchivedRows)} ${t('admin.database.memoryArchivedRows')}` : '')} />
+      <div class="adm-card">
+        <h2>${t('admin.database.lastHour')}</h2>
+        <div class="adm-stat"><${Delta} value=${totalDelta(base1h)} /></div>
+        <div class="adm-stat-label">${base1h ? t('admin.database.rowsDelta') : t('admin.database.noBaseline')}</div>
+      </div>
+      <div class="adm-card">
+        <h2>${t('admin.database.last24h')}</h2>
+        <div class="adm-stat"><${Delta} value=${totalDelta(base24h)} /></div>
+        <div class="adm-stat-label">${base24h ? t('admin.database.rowsDelta') : t('admin.database.noBaseline')}</div>
+      </div>
+      <div class="adm-card">
+        <h2>${t('admin.database.last7d')}</h2>
+        <div class="adm-stat"><${Delta} value=${totalDelta(base7d)} /></div>
+        <div class="adm-stat-label">${num(snapshots.length)} ${t('admin.database.snapshots')}</div>
+      </div>
+    </div>
+
+    <div class="adm-card">
+      <table class="adm-db-table">
+        <thead>
+          <tr>
+            <th>${t('admin.database.table')}</th>
+            <th class="num">${t('admin.database.rows')}</th>
+            <th class="num">${t('admin.database.delta24h')}</th>
+            <th>${t('admin.database.relSize')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${rows.map(r => html`<tr key=${r.table}>
+            <td>${r.table}</td>
+            <td class="num">${num(r.n)}</td>
+            <td class="num"><${Delta} value=${r.delta} /></td>
+            <td><div class="adm-db-bar-track"><div class="adm-db-bar" style=${`width:${r.pct}%`}></div></div></td>
+          </tr>`)}
+        </tbody>
+      </table>
+    </div>
+  </div>`;
+}

package/dist/public/views/admin/feedback-tab.js

@@ -0,0 +1,162 @@
+/**
+ * @file feedback-tab.js
+ * @description Admin dashboard "Platform feedback" tab — the operator inbox for the Node Feedback
+ *   Channel: threads from users and agents (bugs, blockers, ideas, UX, questions) with status +
+ *   category filters, a thread view showing the sender↔operator reply chain, a reply box (an
+ *   operator reply auto-acks a new thread server-side), and a status-triage dropdown.
+ * @structure FeedbackTab (default) — fetches GET /v1/admin/feedback, re-fetches on live updates;
+ *   ThreadView — one selected thread with messages, reply box, status select.
+ * @usage Registered in admin.js NAV_GROUPS (Data group).
+ * @version-history
+ *   v1.0.0 — 2026-07-16 — Initial: Node Feedback Channel v1.
+ */
+import { h } from 'preact';
+import { useState, useEffect, useCallback } from 'preact/hooks';
+import htm from 'htm';
+import { onLiveUpdate } from '/lib/live-updates.js';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { useToast, Toast } from './shared.js';
+import * as api from '/js/services/admin.js';
+
+const STATUSES = ['new', 'ack', 'in_progress', 'resolved', 'wont_fix'];
+const CATEGORIES = ['bug', 'blocker', 'idea', 'ux', 'question', 'other'];
+const STATUS_TONE = { new: 'adm-warn', ack: '', in_progress: '', resolved: 'adm-good', wont_fix: 'adm-muted' };
+const CAT_TONE = { blocker: 'adm-bad', bug: 'adm-warn' };
+
+const stLabel = (s) => t(`admin.feedback.st.${s}`) || s;
+const catLabel = (c) => t(`admin.feedback.cat.${c}`) || c;
+
+function relTime(iso) {
+  try {
+    const s = Math.round((Date.now() - new Date(iso).getTime()) / 1000);
+    if (s < 60) return `${s}s`;
+    if (s < 3600) return `${Math.floor(s / 60)}m`;
+    if (s < 86400) return `${Math.floor(s / 3600)}h`;
+    return new Date(iso).toLocaleDateString();
+  } catch { return ''; }
+}
+
+function ThreadView({ thread, onBack, onChanged, showErr, showOk }) {
+  const [reply, setReply] = useState('');
+  const [busy, setBusy] = useState(false);
+
+  async function sendReply() {
+    if (!reply.trim() || busy) return;
+    setBusy(true);
+    try {
+      const r = await api.replyFeedback(thread.id, reply.trim());
+      if (r?.ok === false) throw new Error(r?.error?.message || 'Reply failed');
+      setReply('');
+      showOk(t('admin.feedback.replySent') || 'Reply sent');
+      onChanged();
+    } catch (e) { showErr(e?.message || 'Reply failed'); }
+    setBusy(false);
+  }
+
+  async function setStatus(status) {
+    try {
+      const r = await api.setFeedbackStatus(thread.id, status);
+      if (r?.ok === false) throw new Error(r?.error?.message || 'Update failed');
+      showOk(t('admin.feedback.statusSaved') || 'Status updated');
+      onChanged();
+    } catch (e) { showErr(e?.message || 'Update failed'); }
+  }
+
+  return html`
+    <div>
+      <button class="btn-ghost" onClick=${onBack}>← ${t('admin.feedback.back') || 'Back to inbox'}</button>
+      <div class="adm-fb-thread-head">
+        <span class="adm-badge ${CAT_TONE[thread.category] || ''}">${catLabel(thread.category)}</span>
+        <strong>${thread.title}</strong>
+        <select class="adm-fb-status" value=${thread.status} onChange=${(e) => setStatus(e.target.value)}>
+          ${STATUSES.map(s => html`<option value=${s} selected=${s === thread.status}>${stLabel(s)}</option>`)}
+        </select>
+      </div>
+      <div class="adm-muted mono">${thread.sender} · ${relTime(thread.createdAt)}</div>
+      <div class="adm-fb-msg adm-fb-msg-sender">${thread.body}</div>
+      ${thread.context && Object.keys(thread.context).length > 0 && html`
+        <div class="adm-fb-context mono">
+          ${t('admin.feedback.context') || 'Context'}: ${Object.entries(thread.context).map(([k, v]) => `${k}=${v}`).join(' · ')}
+        </div>`}
+      ${(thread.messages || []).map((m, i) => html`
+        <div key=${i} class="adm-fb-msg ${m.from === 'operator' ? 'adm-fb-msg-operator' : 'adm-fb-msg-sender'}">
+          <div class="adm-muted">${m.from === 'operator' ? (t('admin.feedback.operator') || 'Operator') : (t('admin.feedback.sender') || 'Sender')} · ${relTime(m.at)}</div>
+          ${m.body}
+        </div>`)}
+      <div class="adm-fb-replybox">
+        <textarea rows="3" placeholder=${t('admin.feedback.replyPlaceholder') || 'Write a reply to the sender…'}
+          value=${reply} onInput=${(e) => setReply(e.target.value)}></textarea>
+        <button class="btn-primary" disabled=${busy || !reply.trim()} onClick=${sendReply}>
+          ${t('admin.feedback.send') || 'Send reply'}
+        </button>
+      </div>
+    </div>`;
+}
+
+export default function FeedbackTab() {
+  const [threads, setThreads] = useState(null);
+  const [err, setErr] = useState(null);
+  const [status, setStatusFilter] = useState('');
+  const [category, setCategoryFilter] = useState('');
+  const [selectedId, setSelectedId] = useState(null);
+  const [toast, showErr, showOk, clearToast] = useToast();
+
+  const load = useCallback(async () => {
+    try {
+      const r = await api.getFeedback({ status, category });
+      setThreads(r?.data?.threads || []); setErr(null);
+    } catch (e) { setErr(e?.message || 'Failed to load'); }
+  }, [status, category]);
+
+  useEffect(() => { load(); }, [load]);
+  useEffect(() => onLiveUpdate(['feedback'], () => load()), [load]);
+
+  if (err) return html`<div class="adm-section"><div class="adm-error">${err}</div></div>`;
+  if (!threads) return html`<div class="adm-section">${t('common.loading') || 'Loading…'}</div>`;
+
+  const selected = selectedId ? threads.find(x => x.id === selectedId) : null;
+
+  return html`
+    <div class="adm-section">
+      <div class="section-title">${t('admin.feedback.title') || 'Platform feedback'}</div>
+      <div class="section-desc">${t('admin.feedback.desc') || 'Feedback threads from users and agents to the node operator.'}</div>
+      ${toast && html`<${Toast} ...${toast} onDismiss=${clearToast} />`}
+
+      ${selected
+        ? html`<${ThreadView} thread=${selected} onBack=${() => setSelectedId(null)} onChanged=${load} showErr=${showErr} showOk=${showOk} />`
+        : html`
+          <div class="adm-fb-filters">
+            <select value=${status} onChange=${(e) => setStatusFilter(e.target.value)}>
+              <option value="">${t('admin.feedback.allStatuses') || 'All statuses'}</option>
+              ${STATUSES.map(s => html`<option value=${s}>${stLabel(s)}</option>`)}
+            </select>
+            <select value=${category} onChange=${(e) => setCategoryFilter(e.target.value)}>
+              <option value="">${t('admin.feedback.allCategories') || 'All categories'}</option>
+              ${CATEGORIES.map(c => html`<option value=${c}>${catLabel(c)}</option>`)}
+            </select>
+          </div>
+          ${threads.length === 0
+            ? html`<div class="adm-muted">${t('admin.feedback.empty') || 'No feedback threads yet.'}</div>`
+            : html`<table class="data-table">
+                <thead><tr>
+                  <th>${t('admin.feedback.when') || 'When'}</th>
+                  <th>${t('admin.feedback.category') || 'Category'}</th>
+                  <th>${t('admin.feedback.titleCol') || 'Title'}</th>
+                  <th>${t('admin.feedback.from') || 'From'}</th>
+                  <th>${t('admin.feedback.statusCol') || 'Status'}</th>
+                  <th>${t('admin.feedback.messagesCol') || 'Messages'}</th>
+                </tr></thead>
+                <tbody>
+                  ${threads.map(x => html`<tr key=${x.id} class="adm-fb-row" onClick=${() => setSelectedId(x.id)}>
+                    <td>${relTime(x.createdAt)}</td>
+                    <td class=${CAT_TONE[x.category] || ''}>${catLabel(x.category)}</td>
+                    <td>${x.title}</td>
+                    <td class="mono">${x.sender}</td>
+                    <td class=${STATUS_TONE[x.status] || ''}>${stLabel(x.status)}</td>
+                    <td>${(x.messages || []).length}</td>
+                  </tr>`)}
+                </tbody>
+              </table>`}`}
+    </div>`;
+}

package/dist/public/views/admin/owners-tab.js

@@ -9,13 +9,15 @@
  *
  * @version-history
  *   v1.0.0 — 2026-07-13 — Header added; file pre-dates header standard
+ *   v1.1.0 — 2026-07-18 — Vaihe 2d: hand-rolled <table> → canonical admin <DataTable> (rows/headers
+ *     model); cell content preserved verbatim.
  */
 import { h } from 'preact';
 import htm from 'htm';
 const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { escHtml } from '/js/utils.js';
-import { dt, Empty, useToast, Toast } from './shared.js';
+import { dt, Empty, useToast, Toast, DataTable } from './shared.js';
 import { grantRole } from '/js/services/admin.js';
 import { useConfirm } from '/components/Modal.js';
 
@@ -34,34 +36,22 @@ export default function OwnersTab({ data, reload }) {
 
   return html`
     ${toast && html`<${Toast} ...${toast} onDismiss=${clearToast} />`}
-    <div class="adm-card">
-      <div class="scrollable">
-        <table>
-          <thead><tr>
-            <th>${t('dashboard.name')}</th>
-            <th>${t('dashboard.displayName')}</th>
-            <th>${t('dashboard.roles')}</th>
-            <th>${t('dashboard.agents')}</th>
-            <th>${t('dashboard.created')}</th>
-            <th></th>
-          </tr></thead>
-          <tbody>
-            ${owners.map(ow => {
-              const roles = ow.roles || [];
-              const isOp = roles.includes('operator');
-              return html`<tr>
-                <td><strong>${escHtml(ow.name)}</strong></td>
-                <td>${escHtml(ow.display_name || '\u2014')}</td>
-                <td>${roles.length ? roles.map(r => html`<span class="tag" style="font-size:.75rem">${r}</span> `) : html`<span style="color:var(--text-dim)">—</span>`}</td>
-                <td>${ow.agents ? ow.agents.length : 0}</td>
-                <td style="color:var(--text-dim)">${dt(ow.created_at)}</td>
-                <td>${!isOp && html`<button class="adm-btn-sm" onClick=${() => doGrant(ow.name)}>${t('dashboard.grantOperator')}</button>`}</td>
-              </tr>`;
-            })}
-          </tbody>
-        </table>
-      </div>
-    </div>
+    <${DataTable}
+      scroll=${true}
+      headers=${[t('dashboard.name'), t('dashboard.displayName'), t('dashboard.roles'), t('dashboard.agents'), t('dashboard.created'), '']}
+      rows=${owners.map(ow => {
+        const roles = ow.roles || [];
+        const isOp = roles.includes('operator');
+        return [
+          html`<strong>${escHtml(ow.name)}</strong>`,
+          escHtml(ow.display_name || '—'),
+          roles.length ? html`${roles.map(r => html`<span class="tag" style="font-size:.75rem">${r}</span> `)}` : html`<span style="color:var(--text-dim)">—</span>`,
+          ow.agents ? ow.agents.length : 0,
+          html`<span style="color:var(--text-dim)">${dt(ow.created_at)}</span>`,
+          !isOp && html`<button class="adm-btn-sm" onClick=${() => doGrant(ow.name)}>${t('dashboard.grantOperator')}</button>`,
+        ];
+      })}
+    />
     <${ConfirmUI} />
   `;
 }

package/dist/public/views/admin/push-tab.js

@@ -142,8 +142,8 @@ export default function PushTab({ data, reload }) {
     <${ExpandableHelp} title=${t('dashboard.pushHelpTitle')}>${t('dashboard.pushHelpDetail')}</${ExpandableHelp}>
 
     <div class="adm-flex-wrap adm-mb-lg" style="gap:12px;align-items:stretch">
-      <${StatCard} label=${t('dashboard.totalSubscriptions')} value=${push.total_subscriptions || subs.length} color="#06b6d4" />
-      <${StatCard} label=${t('dashboard.activeSubscriptions')} value=${subs.filter(s => s.active !== false).length} color="#22c55e" />
+      <${StatCard} label=${t('dashboard.totalSubscriptions')} value=${push.total_subscriptions || subs.length} tone="cyan" />
+      <${StatCard} label=${t('dashboard.activeSubscriptions')} value=${subs.filter(s => s.active !== false).length} tone="green" />
       <div style="margin-left:auto;display:flex;flex-direction:column;justify-content:center;gap:6px;align-items:flex-end">
         <div class="adm-flex">
           <button

package/dist/public/views/admin/services-tab.js

@@ -28,10 +28,10 @@ import { ActionScriptEditor } from './services-tab.action-editor.js';
 import { ScaffoldForm } from './services-tab.scaffold-form.js';
 import { AvailableExtCard } from './services-tab.available-card.js';
 
-// Extension name → user-facing SPA URL
-const EXT_SPA_URLS = {
-  'marketplace-behaviors': '/v1/marketplace',
-};
+// Extension name → user-facing SPA URL (the marketplace-behaviors → /v1/marketplace
+// entry was removed with the legacy marketplace SPA view; extensions are managed
+// from this panel now, so the map is currently empty).
+const EXT_SPA_URLS = {};
 
 // ── Inline instance panel for a single extension ──
 function ExtensionPanel({ ext, onUninstall }) {

package/dist/public/views/admin/shared.js

@@ -30,9 +30,15 @@ import { DataTable as GenericDataTable } from '/components/DataTable.js';
 import { num, dt, fmtUp, fmtBytes } from '/js/format.js';
 export { num, dt, fmtUp, fmtBytes };
 
-/** Render a badge */
-export function Badge({ type }) {
-  return html`<span class="adm-badge adm-badge-${type}">${type}</span>`;
+/**
+ * Render a badge. `type` picks the tone class (adm-badge-${type}); the visible
+ * text is `label` when given, else the type word itself (so `<Badge type="public" />`
+ * still reads "public"). Previously `label` was silently dropped — 13 call sites
+ * that pass a human label + a semantic tone (e.g. type="success" label="Active")
+ * showed the tone word instead of the label.
+ */
+export function Badge({ type, label }) {
+  return html`<span class="adm-badge adm-badge-${type}">${label != null ? label : type}</span>`;
 }
 
 /**

package/dist/public/views/admin/sharing-groups-tab.js

@@ -4,6 +4,8 @@
  *   Shows group name, owner, member count, entry count, and creation date.
  * @version-history
  *   v1.0.0 -- 2026-05-21 -- Initial creation for Agent Dashboard Phase 1
+ *   v1.1.0 -- 2026-07-18 -- Vaihe 2d: hand-rolled <table> → canonical admin <DataTable>
+ *     (rows/headers model); cell content preserved verbatim.
  */
 import { h } from 'preact';
 import { useState, useEffect, useCallback } from 'preact/hooks';
@@ -12,7 +14,7 @@ import { onLiveUpdate } from '/lib/live-updates.js';
 const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { escHtml } from '/js/utils.js';
-import { num, dt, Empty, StatsGrid } from './shared.js';
+import { num, dt, Empty, StatsGrid, DataTable } from './shared.js';
 import { apiGet } from '/js/api.js';
 
 export default function SharingGroupsTab() {
@@ -48,30 +50,16 @@ export default function SharingGroupsTab() {
       ${groups.length === 0 && !loading && html`<${Empty} text=${t('dashboard.sharingGroupsEmpty')} />`}
 
       ${groups.length > 0 && html`
-        <div class="adm-card">
-          <div class="scrollable">
-            <table>
-              <thead><tr>
-                <th>${t('dashboard.sharingGroupsName')}</th>
-                <th>${t('dashboard.sharingGroupsOwner')}</th>
-                <th>${t('dashboard.sharingGroupsMembers')}</th>
-                <th>${t('dashboard.sharingGroupsEntries')}</th>
-                <th>${t('dashboard.sharingGroupsCreated')}</th>
-              </tr></thead>
-              <tbody>
-                ${groups.map(g => html`
-                  <tr>
-                    <td>${escHtml(g.name)}</td>
-                    <td class="mono" style="font-size:.8rem">${escHtml(g.owner_gaii)}</td>
-                    <td>${num(g.member_count)}</td>
-                    <td>${num(g.entry_count)}</td>
-                    <td style="color:var(--text-dim)">${dt(g.created_at)}</td>
-                  </tr>
-                `)}
-              </tbody>
-            </table>
-          </div>
-        </div>
+        <${DataTable}
+          headers=${[t('dashboard.sharingGroupsName'), t('dashboard.sharingGroupsOwner'), t('dashboard.sharingGroupsMembers'), t('dashboard.sharingGroupsEntries'), t('dashboard.sharingGroupsCreated')]}
+          rows=${groups.map(g => [
+            escHtml(g.name),
+            html`<span class="mono" style="font-size:.8rem">${escHtml(g.owner_gaii)}</span>`,
+            num(g.member_count),
+            num(g.entry_count),
+            html`<span style="color:var(--text-dim)">${dt(g.created_at)}</span>`,
+          ])}
+        />
       `}
     </div>
   `;