aimeat 1.16.2 → 1.18.0

package/dist/public/views/profile/packages-tab.js

@@ -41,8 +41,8 @@ export default function PackagesTab({ session, showToast, navigate, locale }) {
   const [search, setSearch] = useState('');
   const [category, setCategory] = useState('');
 
-  const loadData = useCallback(async () => {
-    setLoading(true);
+  const loadData = useCallback(async ({ showSpinner = true } = {}) => {
+    if (showSpinner) setLoading(true);
     try {
       const [instRes, pkgRes, tplRes] = await Promise.all([
         pkgService.listInstances({ status: 'installed' }),
@@ -65,7 +65,7 @@ export default function PackagesTab({ session, showToast, navigate, locale }) {
 
   // Live updates
   useEffect(() => {
-    const handler = () => { loadData(); };
+    const handler = () => { loadData({ showSpinner: false }); }; // silent: don't flash blank
     window.addEventListener('aimeat-live-update', handler);
     return () => window.removeEventListener('aimeat-live-update', handler);
   }, [loadData]);
@@ -268,8 +268,8 @@ export default function PackagesTab({ session, showToast, navigate, locale }) {
                   </div>
                   <div class="pkg-card-footer">
                     <div class="pkg-card-actions">
-                      <button onClick=${() => handleCheckUpdate(inst.id)}>${t('packages.checkUpdate') || 'Check Update'}</button>
-                      <button class="danger" onClick=${() => handleRemove(inst.id)}>${t('packages.remove') || 'Remove'}</button>
+                      <button class="btn-outline btn-sm" onClick=${() => handleCheckUpdate(inst.id)}>${t('packages.checkUpdate') || 'Check Update'}</button>
+                      <button class="btn-danger btn-sm" onClick=${() => handleRemove(inst.id)}>${t('packages.remove') || 'Remove'}</button>
                     </div>
                   </div>
                 </div>
@@ -325,19 +325,19 @@ export default function PackagesTab({ session, showToast, navigate, locale }) {
                   `}
                   <div class="pkg-card-footer">
                     <div class="pkg-card-actions">
-                      <button class="primary" onClick=${() => handleInstall(pkg.packageGroupId)}>
+                      <button class="btn-primary btn-sm" onClick=${() => handleInstall(pkg.packageGroupId)}>
                         ${t('packages.install') || 'Install'}
                       </button>
-                      <button onClick=${() => handleDownloadZip(pkg.packageGroupId, pkg.name)}>
+                      <button class="btn-outline btn-sm" onClick=${() => handleDownloadZip(pkg.packageGroupId, pkg.name)}>
                         ${t('packages.downloadZip') || 'Download ZIP'}
                       </button>
-                      <button onClick=${() => handleOpenInGenerator(pkg.packageGroupId, pkg.author)}>
+                      <button class="btn-outline btn-sm" onClick=${() => handleOpenInGenerator(pkg.packageGroupId, pkg.author)}>
                         ${pkg.author === session?.owner
                           ? (t('packages.editInGenerator') || 'Edit in Generator')
                           : (t('packages.openInGenerator') || 'Open in Generator')}
                       </button>
                       ${pkg.status === 'published' && !pkg.templateStatus && pkg.author === session?.owner && html`
-                        <button class="btn-outline" onClick=${() => handleProposeAsTemplate(pkg.packageGroupId)}>
+                        <button class="btn-outline btn-sm" onClick=${() => handleProposeAsTemplate(pkg.packageGroupId)}>
                           ${t('packages.proposeAsTemplate') || 'Propose as Template'}
                         </button>
                       `}
@@ -371,13 +371,13 @@ export default function PackagesTab({ session, showToast, navigate, locale }) {
                   </div>
                   <div class="pkg-card-footer">
                     <div class="pkg-card-actions">
-                      <button class="primary" onClick=${() => handleInstall(tpl.packageGroupId)}>
+                      <button class="btn-primary btn-sm" onClick=${() => handleInstall(tpl.packageGroupId)}>
                         ${t('packages.install') || 'Install'}
                       </button>
-                      <button onClick=${() => handleDownloadZip(tpl.packageGroupId, tpl.title)}>
+                      <button class="btn-outline btn-sm" onClick=${() => handleDownloadZip(tpl.packageGroupId, tpl.title)}>
                         ${t('packages.downloadZip') || 'Download ZIP'}
                       </button>
-                      <button onClick=${() => handleOpenInGenerator(tpl.packageGroupId, tpl.packageAuthor)}>
+                      <button class="btn-outline btn-sm" onClick=${() => handleOpenInGenerator(tpl.packageGroupId, tpl.packageAuthor)}>
                         ${tpl.packageAuthor === session?.owner
                           ? (t('packages.editInGenerator') || 'Edit in Generator')
                           : (t('packages.openInGenerator') || 'Open in Generator')}
@@ -416,10 +416,10 @@ export default function PackagesTab({ session, showToast, navigate, locale }) {
                   <div class="pkg-card-footer">
                     <div class="pkg-card-actions">
                       ${rt.packageGroupId ? html`
-                        <button class="primary" onClick=${() => handleInstall(rt.packageGroupId)}>
+                        <button class="btn-primary btn-sm" onClick=${() => handleInstall(rt.packageGroupId)}>
                           ${t('packages.federation.installFromRemote') || 'Install'}
                         </button>
-                        <button onClick=${() => handleDownloadZip(rt.packageGroupId, rt.title || rt.name)}>
+                        <button class="btn-outline btn-sm" onClick=${() => handleDownloadZip(rt.packageGroupId, rt.title || rt.name)}>
                           ${t('packages.downloadZip') || 'Download ZIP'}
                         </button>
                       ` : null}

package/dist/public/views/profile/scheduler-tab.js

@@ -0,0 +1,340 @@
+/**
+ * @file scheduler-tab.js
+ * @description Profile › Scheduler — the master view of every recurring schedule
+ *   the owner has running: AIMEAT-managed (ai / agent_task / extension), the
+ *   owner's extension cron jobs, and each agent's self-reported internal
+ *   scheduler. The server owns the clock; the owner can create, pause/resume,
+ *   run-now, and cancel managed schedules (including any an agent created).
+ * @structure
+ *   - SchedulerTab (default) — loads /v1/schedules, renders grouped sections + create form
+ * @usage Registered in profile.js TABS as { id:'scheduler', component: SchedulerTab }.
+ * @version-history
+ *   v1.0.0 -- 2026-06-03 -- Initial master scheduler view
+ */
+import { h } from 'preact';
+import { useState, useEffect, useRef, useCallback } from 'preact/hooks';
+import htm from 'htm';
+import { t } from '/js/i18n.js';
+import { timeAgo } from '/js/utils.js';
+import { listAgents } from '/js/services/agents.js';
+import {
+  listAllSchedules, createSchedule, setScheduleEnabled,
+  triggerSchedule, deleteSchedule,
+} from '/js/services/schedules.js';
+
+const html = htm.bind(h);
+
+const CRON_PRESETS = [
+  { key: 'morning', cron: '0 7 * * *' },
+  { key: 'evening', cron: '0 19 * * *' },
+  { key: 'hourly', cron: '0 * * * *' },
+  { key: 'custom', cron: '' },
+];
+
+const KIND_BADGE = {
+  ai: { cls: 'sch-badge--ai', key: 'profile.scheduler.kind.ai' },
+  agent_task: { cls: 'sch-badge--agent', key: 'profile.scheduler.kind.agent_task' },
+  extension: { cls: 'sch-badge--ext', key: 'profile.scheduler.kind.extension' },
+  core: { cls: 'sch-badge--core', key: 'profile.scheduler.kind.core' },
+};
+
+function kindBadge(kind) {
+  const b = KIND_BADGE[kind] || KIND_BADGE.core;
+  return html`<span class="sch-badge ${b.cls}">${t(b.key)}</span>`;
+}
+
+function resultBadge(result) {
+  if (!result) return html`<span class="sch-muted">—</span>`;
+  const cls = result === 'error' ? 'sch-badge--err' : 'sch-badge--ok';
+  return html`<span class="sch-badge ${cls}">${result}</span>`;
+}
+
+export default function SchedulerTab({ showToast }) {
+  const [data, setData] = useState({ managed: [], extensions: [], agentInternal: [] });
+  const [agents, setAgents] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [showForm, setShowForm] = useState(false);
+
+  const loadData = useCallback(async () => {
+    try {
+      const [schedRes, agentsRes] = await Promise.all([listAllSchedules(), listAgents().catch(() => null)]);
+      setData(schedRes?.data || { managed: [], extensions: [], agentInternal: [] });
+      setAgents(agentsRes?.data?.agents || []);
+      setError(null);
+    } catch (e) {
+      setError(e.message || 'Failed to load schedules');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const loadRef = useRef(loadData);
+  loadRef.current = loadData;
+  useEffect(() => {
+    loadData();
+    const handler = () => loadRef.current();
+    window.addEventListener('aimeat-live-update', handler);
+    const poller = setInterval(() => loadRef.current(), 15000);
+    return () => { window.removeEventListener('aimeat-live-update', handler); clearInterval(poller); };
+  }, [loadData]);
+
+  const onToggle = async (job) => {
+    try { await setScheduleEnabled(job.id, !job.enabled); await loadData(); }
+    catch (e) { showToast?.(e.message, true); }
+  };
+  const onTrigger = async (job) => {
+    try { await triggerSchedule(job.id); showToast?.(t('profile.scheduler.triggered')); await loadData(); }
+    catch (e) { showToast?.(e.message, true); }
+  };
+  const onCancel = async (job) => {
+    if (!window.confirm(t('profile.scheduler.confirmCancel'))) return;
+    try { await deleteSchedule(job.id); showToast?.(t('profile.scheduler.cancelled')); await loadData(); }
+    catch (e) { showToast?.(e.message, true); }
+  };
+
+  const renderManagedRow = (job) => html`
+    <tr key=${job.id}>
+      <td>
+        <div class="sch-name">${job.displayName || job.name}</div>
+        ${job.purpose && html`<div class="sch-muted sch-purpose">${job.purpose}</div>`}
+        ${job.createdByAgent && html`<span class="sch-tag">${t('profile.scheduler.byAgent')}</span>`}
+      </td>
+      <td>${kindBadge(job.type)}</td>
+      <td><code class="sch-cron">${job.cron}</code>${job.timezone && html`<div class="sch-muted">${job.timezone}</div>`}</td>
+      <td>${job.agentName || html`<span class="sch-muted">—</span>`}</td>
+      <td>${job.lastRunAt ? timeAgo(job.lastRunAt) : html`<span class="sch-muted">${t('profile.scheduler.never')}</span>`} ${resultBadge(job.lastRunResult)}</td>
+      <td>${job.nextRunAt ? timeAgo(job.nextRunAt) : html`<span class="sch-muted">—</span>`}</td>
+      <td>${job.runCount ?? 0}</td>
+      <td class="sch-actions">
+        <button class="btn-ghost sch-btn" onClick=${() => onToggle(job)} title=${job.enabled ? t('profile.scheduler.pause') : t('profile.scheduler.resume')}>
+          ${job.enabled ? t('profile.scheduler.pause') : t('profile.scheduler.resume')}
+        </button>
+        <button class="btn-ghost sch-btn" onClick=${() => onTrigger(job)}>${t('profile.scheduler.runNow')}</button>
+        <button class="btn-danger sch-btn" onClick=${() => onCancel(job)}>${t('profile.scheduler.cancel')}</button>
+      </td>
+    </tr>`;
+
+  if (loading) return html`<div class="sch-loading">${t('profile.scheduler.loading')}</div>`;
+
+  return html`
+    <div class="sch-tab">
+      <div class="sch-head">
+        <div>
+          <div class="section-title">${t('profile.scheduler.title')}</div>
+          <div class="section-desc">${t('profile.scheduler.desc')}</div>
+        </div>
+        <button class="btn-primary" onClick=${() => setShowForm(v => !v)}>
+          ${showForm ? t('profile.scheduler.close') : t('profile.scheduler.newSchedule')}
+        </button>
+      </div>
+
+      ${error && html`<div class="sch-error">${error}</div>`}
+
+      ${showForm && html`<${CreateForm} agents=${agents} showToast=${showToast}
+        onCreated=${() => { setShowForm(false); loadData(); }} />`}
+
+      <!-- AIMEAT-managed -->
+      <div class="sch-section">
+        <h3 class="sch-section-title">${t('profile.scheduler.managedTitle')}</h3>
+        ${data.managed.length === 0
+          ? html`<div class="sch-empty">${t('profile.scheduler.noManaged')}</div>`
+          : html`<table class="sch-table"><thead><tr>
+              <th>${t('profile.scheduler.col.name')}</th>
+              <th>${t('profile.scheduler.col.kind')}</th>
+              <th>${t('profile.scheduler.col.cron')}</th>
+              <th>${t('profile.scheduler.col.agent')}</th>
+              <th>${t('profile.scheduler.col.lastRun')}</th>
+              <th>${t('profile.scheduler.col.nextRun')}</th>
+              <th>${t('profile.scheduler.col.runs')}</th>
+              <th></th>
+            </tr></thead><tbody>${data.managed.map(renderManagedRow)}</tbody></table>`}
+      </div>
+
+      <!-- Owner extension cron -->
+      ${data.extensions.length > 0 && html`<div class="sch-section">
+        <h3 class="sch-section-title">${t('profile.scheduler.extTitle')}</h3>
+        <table class="sch-table"><thead><tr>
+          <th>${t('profile.scheduler.col.name')}</th>
+          <th>${t('profile.scheduler.col.extension')}</th>
+          <th>${t('profile.scheduler.col.cron')}</th>
+          <th>${t('profile.scheduler.col.lastRun')}</th>
+          <th>${t('profile.scheduler.col.nextRun')}</th>
+        </tr></thead><tbody>
+          ${data.extensions.map(j => html`<tr key=${j.id}>
+            <td>${j.displayName || j.name}</td>
+            <td><code class="sch-cron">${j.extensionName}${j.actionId ? '/' + j.actionId : ''}</code></td>
+            <td><code class="sch-cron">${j.cron}</code></td>
+            <td>${j.lastRunAt ? timeAgo(j.lastRunAt) : '—'} ${resultBadge(j.lastRunResult)}</td>
+            <td>${j.nextRunAt ? timeAgo(j.nextRunAt) : '—'}</td>
+          </tr>`)}
+        </tbody></table>
+      </div>`}
+
+      <!-- Agent internal (read-only mirror) -->
+      ${data.agentInternal.length > 0 && html`<div class="sch-section">
+        <h3 class="sch-section-title">${t('profile.scheduler.internalTitle')}</h3>
+        <div class="sch-muted sch-internal-note">${t('profile.scheduler.internalNote')}</div>
+        ${data.agentInternal.map(grp => html`<div class="sch-internal-group" key=${grp.gaii}>
+          <div class="sch-internal-agent">${grp.agentName}</div>
+          <table class="sch-table"><tbody>
+            ${grp.entries.map((e, i) => html`<tr key=${e.id || i}>
+              <td>${e.name}${e.purpose && html`<div class="sch-muted">${e.purpose}</div>`}</td>
+              <td><code class="sch-cron">${e.cron || e.schedule || '—'}</code>${e.timezone && html`<div class="sch-muted">${e.timezone}</div>`}</td>
+              <td>${e.status || 'active'}</td>
+            </tr>`)}
+          </tbody></table>
+        </div>`)}
+      </div>`}
+    </div>`;
+}
+
+// ── Create form (exported so the agent Schedules sub-tab can reuse it) ──────
+export function CreateForm({ agents = [], showToast, onCreated, lockedAgent }) {
+  const [kind, setKind] = useState(lockedAgent ? 'agent_task' : 'ai');
+  const [preset, setPreset] = useState('morning');
+  const [form, setForm] = useState({
+    display_name: '', cron: '0 7 * * *', timezone: '', purpose: '',
+    agent_name: lockedAgent || '', prompt: '', input_keys: '', output_key: '',
+    task_title: '', task_description: '', extension_name: '', action_id: '',
+  });
+  const [maxRuns, setMaxRuns] = useState({ enabled: false, limit: 7 });
+  const [dailyLimit, setDailyLimit] = useState({ enabled: false, limit: 1 });
+  const [saving, setSaving] = useState(false);
+
+  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
+  const onPreset = (p) => { setPreset(p); const found = CRON_PRESETS.find(c => c.key === p); if (found && found.cron) set('cron', found.cron); };
+
+  const buildConstraints = () => {
+    const c = [];
+    if (maxRuns.enabled) c.push({ type: 'max_runs', enabled: true, params: { limit: Number(maxRuns.limit) } });
+    if (dailyLimit.enabled) c.push({ type: 'daily_limit', enabled: true, params: { limit: Number(dailyLimit.limit) } });
+    return c;
+  };
+
+  const submit = async () => {
+    if (!form.display_name.trim()) { showToast?.(t('profile.scheduler.err.name'), true); return; }
+    if (!form.cron.trim()) { showToast?.(t('profile.scheduler.err.cron'), true); return; }
+    const body = {
+      kind, cron: form.cron.trim(), display_name: form.display_name.trim(),
+      timezone: form.timezone.trim() || undefined, purpose: form.purpose.trim() || undefined,
+      constraints: buildConstraints(),
+    };
+    if (kind === 'ai') {
+      if (!form.prompt.trim()) { showToast?.(t('profile.scheduler.err.prompt'), true); return; }
+      body.prompt = form.prompt.trim();
+      body.input_keys = form.input_keys.split(',').map(s => s.trim()).filter(Boolean);
+      if (form.output_key.trim()) body.output_key = form.output_key.trim();
+      if (form.agent_name) body.agent_name = form.agent_name;
+    } else if (kind === 'agent_task') {
+      if (!form.agent_name) { showToast?.(t('profile.scheduler.err.agent'), true); return; }
+      if (!form.task_title.trim()) { showToast?.(t('profile.scheduler.err.taskTitle'), true); return; }
+      body.agent_name = form.agent_name;
+      body.task_template = { title: form.task_title.trim(), description: form.task_description.trim() };
+    } else if (kind === 'extension') {
+      if (!form.extension_name.trim() || !form.action_id.trim()) { showToast?.(t('profile.scheduler.err.ext'), true); return; }
+      body.extension_name = form.extension_name.trim();
+      body.action_id = form.action_id.trim();
+      if (form.agent_name) body.agent_name = form.agent_name;
+    }
+    setSaving(true);
+    try {
+      await createSchedule(body);
+      showToast?.(t('profile.scheduler.created'));
+      onCreated?.();
+    } catch (e) { showToast?.(e.message, true); }
+    finally { setSaving(false); }
+  };
+
+  return html`
+    <div class="sch-form">
+      <div class="sch-form-row">
+        <label>${t('profile.scheduler.field.kind')}</label>
+        <select value=${kind} onChange=${e => setKind(e.target.value)}>
+          <option value="ai">${t('profile.scheduler.kind.ai')} — ${t('profile.scheduler.kindHint.ai')}</option>
+          <option value="agent_task">${t('profile.scheduler.kind.agent_task')} — ${t('profile.scheduler.kindHint.agent_task')}</option>
+          <option value="extension">${t('profile.scheduler.kind.extension')} — ${t('profile.scheduler.kindHint.extension')}</option>
+        </select>
+      </div>
+
+      <div class="sch-form-row">
+        <label>${t('profile.scheduler.field.displayName')}</label>
+        <input type="text" value=${form.display_name} onInput=${e => set('display_name', e.target.value)}
+          placeholder=${t('profile.scheduler.ph.displayName')} />
+      </div>
+
+      <div class="sch-form-row">
+        <label>${t('profile.scheduler.field.schedule')}</label>
+        <div class="sch-presets">
+          ${CRON_PRESETS.map(p => html`<button type="button"
+            class="sch-preset ${preset === p.key ? 'sch-preset--on' : ''}"
+            onClick=${() => onPreset(p.key)}>${t('profile.scheduler.preset.' + p.key)}</button>`)}
+        </div>
+        <input type="text" class="sch-cron-input" value=${form.cron} onInput=${e => set('cron', e.target.value)}
+          placeholder="0 7 * * *" />
+        <input type="text" value=${form.timezone} onInput=${e => set('timezone', e.target.value)}
+          placeholder=${t('profile.scheduler.ph.timezone')} />
+      </div>
+
+      ${kind === 'ai' && html`<div class="sch-kind-fields">
+        <div class="sch-form-row"><label>${t('profile.scheduler.field.inputKeys')}</label>
+          <input type="text" value=${form.input_keys} onInput=${e => set('input_keys', e.target.value)}
+            placeholder=${t('profile.scheduler.ph.inputKeys')} /></div>
+        <div class="sch-form-row"><label>${t('profile.scheduler.field.prompt')}</label>
+          <textarea rows="3" value=${form.prompt} onInput=${e => set('prompt', e.target.value)}
+            placeholder=${t('profile.scheduler.ph.prompt')}></textarea></div>
+        <div class="sch-form-row"><label>${t('profile.scheduler.field.outputKey')}</label>
+          <input type="text" value=${form.output_key} onInput=${e => set('output_key', e.target.value)}
+            placeholder=${t('profile.scheduler.ph.outputKey')} /></div>
+      </div>`}
+
+      ${kind === 'agent_task' && html`<div class="sch-kind-fields">
+        <div class="sch-form-row"><label>${t('profile.scheduler.field.agent')}</label>
+          ${lockedAgent
+            ? html`<input type="text" value=${lockedAgent} disabled />`
+            : html`<select value=${form.agent_name} onChange=${e => set('agent_name', e.target.value)}>
+                <option value="">${t('profile.scheduler.ph.agent')}</option>
+                ${agents.map(a => html`<option value=${a.name}>${a.name}</option>`)}
+              </select>`}</div>
+        <div class="sch-form-row"><label>${t('profile.scheduler.field.taskTitle')}</label>
+          <input type="text" value=${form.task_title} onInput=${e => set('task_title', e.target.value)} /></div>
+        <div class="sch-form-row"><label>${t('profile.scheduler.field.taskDescription')}</label>
+          <textarea rows="3" value=${form.task_description} onInput=${e => set('task_description', e.target.value)}></textarea></div>
+      </div>`}
+
+      ${kind === 'extension' && html`<div class="sch-kind-fields">
+        <div class="sch-form-row"><label>${t('profile.scheduler.field.extensionName')}</label>
+          <input type="text" value=${form.extension_name} onInput=${e => set('extension_name', e.target.value)} /></div>
+        <div class="sch-form-row"><label>${t('profile.scheduler.field.actionId')}</label>
+          <input type="text" value=${form.action_id} onInput=${e => set('action_id', e.target.value)} /></div>
+      </div>`}
+
+      <div class="sch-form-row">
+        <label>${t('profile.scheduler.field.purpose')}</label>
+        <input type="text" value=${form.purpose} onInput=${e => set('purpose', e.target.value)}
+          placeholder=${t('profile.scheduler.ph.purpose')} />
+      </div>
+
+      <div class="sch-constraints">
+        <div class="sch-constraints-title">${t('profile.scheduler.constraints')}</div>
+        <label class="sch-check">
+          <input type="checkbox" checked=${maxRuns.enabled} onChange=${e => setMaxRuns(s => ({ ...s, enabled: e.target.checked }))} />
+          ${t('profile.scheduler.maxRuns')}
+          <input type="number" min="1" value=${maxRuns.limit} disabled=${!maxRuns.enabled}
+            onInput=${e => setMaxRuns(s => ({ ...s, limit: e.target.value }))} class="sch-num" />
+        </label>
+        <label class="sch-check">
+          <input type="checkbox" checked=${dailyLimit.enabled} onChange=${e => setDailyLimit(s => ({ ...s, enabled: e.target.checked }))} />
+          ${t('profile.scheduler.dailyLimit')}
+          <input type="number" min="0" step="0.1" value=${dailyLimit.limit} disabled=${!dailyLimit.enabled}
+            onInput=${e => setDailyLimit(s => ({ ...s, limit: e.target.value }))} class="sch-num" />
+        </label>
+      </div>
+
+      <div class="sch-form-actions">
+        <button class="btn-primary" disabled=${saving} onClick=${submit}>
+          ${saving ? t('profile.scheduler.saving') : t('profile.scheduler.create')}
+        </button>
+      </div>
+    </div>`;
+}

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

@@ -87,7 +87,7 @@ function ServiceDetail({ svc }) {
     return () => { cancelled = true; };
   }, [svcId]);
 
-  if (loading) return html`<div class="svc-detail" onClick=${e => e.stopPropagation()}><${Spinner} text="Loading details..." /></div>`;
+  if (loading) return html`<div class="svc-detail" onClick=${e => e.stopPropagation()}><${Spinner} text=${t('common.loading')} /></div>`;
   if (error_) return html`<div class="svc-detail" onClick=${e => e.stopPropagation()}><div class="svc-detail-error">${error_}</div></div>`;
 
   // Merge local svc data with fetched detail (detail may have more fields)

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

@@ -5,15 +5,23 @@
  * @version-history
  *   v1.0.0 — 2026-03-07 — Initial shared helpers (Spinner, recipientBadge, isExpiringSoon)
  *   v1.1.0 — 2026-03-17 — Add VisibilityPill, ToggleSwitch, GlassCard components; refactor recipientBadge to CSS classes
+ *   v1.2.0 — 2026-06-02 — Component unification (§2): Spinner now delegates to the
+ *     canonical /components/Spinner.js (single source of the .spinner markup).
+ *   v1.3.0 — 2026-06-02 — Component unification (#22): GlassCard now delegates to the
+ *     canonical /components/Card.js via variant="glass" (.card-glass); call sites unchanged.
  */
 import { h } from 'preact';
 import htm from 'htm';
 const html = htm.bind(h);
 import { t } from '/js/i18n.js';
+import { Spinner as BaseSpinner } from '/components/Spinner.js';
+import { Card } from '/components/Card.js';
 
-/** Loading spinner. */
+/** Loading spinner — delegates to the canonical /components/Spinner.js (single
+ *  source of the .spinner markup); keeps the profile default loading label so the
+ *  23 profile call sites that rely on it are unchanged. */
 export function Spinner({ text }) {
-  return html`<span class="spinner"></span><span class="loading-text">${text || t('profile.loading')}</span>`;
+  return html`<${BaseSpinner} text=${text || t('profile.loading')} />`;
 }
 
 /** Render a colored recipient-type badge. */
@@ -43,16 +51,12 @@ export function VisibilityPill({ visibility, onClick }) {
   </button>`;
 }
 
-/** Shared toggle switch (notifications-tab, email-tab). */
-export function ToggleSwitch({ checked, onChange, label }) {
-  return html`<label class="pf-toggle">
-    <input type="checkbox" checked=${checked} onChange=${onChange} class="pf-toggle-input" />
-    <span class="pf-toggle-slider"></span>
-    ${label && html`<span class="pf-toggle-label">${label}</span>`}
-  </label>`;
-}
+/** Shared toggle switch — relocated to the canonical /components/ToggleSwitch.js (#14);
+ *  re-exported here so notifications-tab/email-tab imports are unchanged. */
+export { ToggleSwitch } from '/components/ToggleSwitch.js';
 
-/** Glass-style card container (email-tab, notifications-tab). */
+/** Glass-style card container (email-tab, notifications-tab) — delegates to the
+ *  canonical /components/Card.js (variant="glass" → .card-glass); call sites unchanged. */
 export function GlassCard({ children }) {
-  return html`<div class="pf-glass-card">${children}</div>`;
+  return html`<${Card} variant="glass" hoverable=${false}>${children}<//>`;
 }

package/dist/public/views/profile/wallet-tab.js

@@ -6,6 +6,8 @@
  *   v1.0.0 — 2026-03-16 — Initial wallet tab
  *   v1.1.0 — 2026-03-17 — Replace inline styles with CSS classes
  *   v1.2.0 — 2026-05-22 — Show info message for federated users instead of infinite spinner
+ *   v1.3.0 — 2026-06-02 — Component unification (#1): copy buttons use canonical
+ *     <CopyButton>; delete local copyToClipboard helper + dead copied-state/handlers.
  */
 import { h } from 'preact';
 import { useState, useEffect, useCallback, useRef } from 'preact/hooks';
@@ -14,18 +16,9 @@ const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { escHtml, timeAgo } from '/js/utils.js';
 import { Spinner } from './shared.js';
+import { CopyButton } from '/components/CopyButton.js';
 import { getWallet, getTransactions, requestMorsels } from '/js/services/wallet.js';
 
-/**
- * Copy text to clipboard, return true on success.
- */
-async function copyToClipboard(text) {
-  try {
-    await navigator.clipboard.writeText(text);
-    return true;
-  } catch { return false; }
-}
-
 /**
  * Map backend transaction type to a display label.
  */
@@ -43,8 +36,6 @@ export default function WalletTab({ session, showToast, onStats }) {
   const [walletData, setWalletData] = useState(null);
   const [walletTx, setWalletTx] = useState(null);
   const [expandedTx, setExpandedTx] = useState(null);
-  const [copiedId, setCopiedId] = useState(null);
-  const [balanceCopied, setBalanceCopied] = useState(false);
 
   // Request form state
   const [reqAmount, setReqAmount] = useState('');
@@ -81,33 +72,6 @@ export default function WalletTab({ session, showToast, onStats }) {
     setExpandedTx(prev => prev === id ? null : id);
   }, []);
 
-  async function handleCopyBalance() {
-    const w = walletData;
-    const text = `Balance: ${w.balance ?? 0} | Available: ${(w.balance ?? 0) - (w.in_escrow ?? w.escrow ?? 0)} | Escrow: ${w.in_escrow ?? w.escrow ?? 0}`;
-    const ok = await copyToClipboard(text);
-    if (ok) {
-      setBalanceCopied(true);
-      setTimeout(() => setBalanceCopied(false), 2000);
-    }
-  }
-
-  async function handleCopyTx(tx, e) {
-    e.stopPropagation();
-    const lines = [
-      `ID: ${tx.id || '-'}`,
-      `Type: ${tx.type || '-'}`,
-      `Amount: ${tx.amount}`,
-      tx.counterparty_gaii ? `Counterparty: ${tx.counterparty_gaii}` : null,
-      tx.tracking_code ? `Tracking: ${tx.tracking_code}` : null,
-      tx.timestamp ? `Time: ${tx.timestamp}` : null,
-    ].filter(Boolean).join('\n');
-    const ok = await copyToClipboard(lines);
-    if (ok) {
-      setCopiedId(tx.id);
-      setTimeout(() => setCopiedId(null), 2000);
-    }
-  }
-
   async function handleRequestMorsels(e) {
     e.preventDefault();
     const amount = parseInt(reqAmount, 10);
@@ -176,19 +140,21 @@ export default function WalletTab({ session, showToast, onStats }) {
 
     <!-- Copy balance button -->
     <div class="mb-1">
-      <button class="btn-outline btn-sm" onClick=${handleCopyBalance}>
-        ${balanceCopied ? t('profile.wallet.copied') : t('profile.wallet.copyBalance')}
-      </button>
+      <${CopyButton}
+        text=${`Balance: ${w.balance ?? 0} | Available: ${(w.balance ?? 0) - escrow} | Escrow: ${escrow}`}
+        label=${t('profile.wallet.copyBalance')}
+        copiedLabel=${t('profile.wallet.copied')}
+        className="btn-outline btn-sm" />
     </div>
 
     <!-- Lifetime stats -->
     ${(lifetime.earned != null || lifetime.spent != null) && html`
       <div class="section-title">${t('profile.wallet.lifetime')}</div>
       <div class="wallet-lifetime">
-        <div class="wl-stat"><div class="wl-val wl-val-success">${lifetime.earned ?? 0}</div><div class="wl-label">${t('profile.wallet.lifetimeEarned')}</div></div>
-        <div class="wl-stat"><div class="wl-val wl-val-danger">${lifetime.spent ?? 0}</div><div class="wl-label">${t('profile.wallet.lifetimeSpent')}</div></div>
-        <div class="wl-stat"><div class="wl-val">${lifetime.received_allowance ?? 0}</div><div class="wl-label">${t('profile.wallet.lifetimeAllowance')}</div></div>
-        <div class="wl-stat"><div class="wl-val">${lifetime.welcome_bonus ?? 0}</div><div class="wl-label">${t('profile.wallet.lifetimeWelcome')}</div></div>
+        <div class="stat-card"><div class="stat-card-value mono success">${lifetime.earned ?? 0}</div><div class="stat-card-label">${t('profile.wallet.lifetimeEarned')}</div></div>
+        <div class="stat-card"><div class="stat-card-value mono danger">${lifetime.spent ?? 0}</div><div class="stat-card-label">${t('profile.wallet.lifetimeSpent')}</div></div>
+        <div class="stat-card"><div class="stat-card-value mono">${lifetime.received_allowance ?? 0}</div><div class="stat-card-label">${t('profile.wallet.lifetimeAllowance')}</div></div>
+        <div class="stat-card"><div class="stat-card-value mono">${lifetime.welcome_bonus ?? 0}</div><div class="stat-card-label">${t('profile.wallet.lifetimeWelcome')}</div></div>
       </div>
     `}
 
@@ -230,7 +196,14 @@ export default function WalletTab({ session, showToast, onStats }) {
             const isCredit = tx.amount > 0;
             const typeLabel = txTypeLabel(tx);
             const isExpanded = expandedTx === tx.id;
-            const isCopied = copiedId === tx.id;
+            const txCopyText = [
+              `ID: ${tx.id || '-'}`,
+              `Type: ${tx.type || '-'}`,
+              `Amount: ${tx.amount}`,
+              tx.counterparty_gaii ? `Counterparty: ${tx.counterparty_gaii}` : null,
+              tx.tracking_code ? `Tracking: ${tx.tracking_code}` : null,
+              tx.timestamp ? `Time: ${tx.timestamp}` : null,
+            ].filter(Boolean).join('\n');
             return html`
               <div class="tx-item-wrap">
                 <div class="tx-item" onClick=${() => toggleTx(tx.id)}>
@@ -273,9 +246,13 @@ export default function WalletTab({ session, showToast, onStats }) {
                       <span class="tx-detail-value work-grid-span">${t('profile.wallet.noDetails')}</span>
                     `}
                     <div class="work-grid-span">
-                      <button class="btn-outline btn-sm" onClick=${(e) => handleCopyTx(tx, e)}>
-                        ${isCopied ? t('profile.wallet.copied') : t('profile.wallet.copyTx')}
-                      </button>
+                      <span onClick=${(e) => e.stopPropagation()}>
+                        <${CopyButton}
+                          text=${txCopyText}
+                          label=${t('profile.wallet.copyTx')}
+                          copiedLabel=${t('profile.wallet.copied')}
+                          className="btn-outline btn-sm" />
+                      </span>
                     </div>
                   </div>
                 `}