aimeat 1.16.2 → 1.18.0

package/dist/public/views/admin/agent-integration-tab.js

@@ -7,6 +7,9 @@
  *   v1.0.0 -- 2026-05-24 -- Initial creation for Governance Phase C
  *   v1.1.0 -- 2026-05-24 -- Fix M8 M9 F19 F20 F21 audit findings
  *   v1.2.0 -- 2026-05-24 -- Move readiness into onboarding, add bundle templates, add notify button
+ *   v1.3.0 -- 2026-06-02 -- Admin design unification: main btn-* classes → adm-btn /
+ *     adm-btn-action; the bespoke adm-agi-stat-card stat rows → canonical <StatsGrid>
+ *     (tones success→green, accent→indigo). adm-agi-mono-sm retained (table cells).
  */
 import { h } from 'preact';
 import { useState, useEffect, useCallback } from 'preact/hooks';
@@ -14,7 +17,7 @@ import htm from 'htm';
 const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { useViewCSS } from '/components/useViewCSS.js';
-import { num, dt, Empty } from './shared.js';
+import { num, dt, Empty, StatsGrid } from './shared.js';
 import * as api from '/js/services/admin-agent-integration.js';
 
 
@@ -113,7 +116,7 @@ function renderPlatformRegistry(platforms, totalAgents, session, loadData) {
       }
       ${showForm
         ? html`<${AddPlatformForm} session=${session} onDone=${() => { setShowForm(false); loadData(); }} onCancel=${() => setShowForm(false)} />`
-        : html`<button class="btn-outline adm-agi-add-btn" onClick=${() => setShowForm(true)}>
+        : html`<button class="adm-btn-action adm-agi-add-btn" onClick=${() => setShowForm(true)}>
             ${t('admin.agentIntegration.addPlatform')}
           </button>`
       }
@@ -163,10 +166,10 @@ function AddPlatformForm({ session, onDone, onCancel }) {
         <input class="adm-agi-add-form-input" value=${pattern} onInput=${e => setPattern(e.target.value)} placeholder=${t('admin.agentIntegration.placeholders.regex')} />
       </div>
       <div class="adm-agi-add-form-actions">
-        <button class="btn-primary" onClick=${handleSubmit} disabled=${submitting || !name.trim() || !id.trim()}>
+        <button class="adm-btn" onClick=${handleSubmit} disabled=${submitting || !name.trim() || !id.trim()}>
           ${submitting ? t('common.loading') : t('common.add')}
         </button>
-        <button class="btn-ghost" onClick=${onCancel}>${t('common.cancel')}</button>
+        <button class="adm-btn-action" onClick=${onCancel}>${t('common.cancel')}</button>
       </div>
     </div>
   `;
@@ -183,20 +186,11 @@ function renderOnboardingOverview(onboarding, readiness, session, loadData) {
   return html`
     <div class="adm-agi-section">
       <div class="adm-agi-section-title">${t('admin.agentIntegration.onboardingOverview')}</div>
-      <div class="adm-agi-stats">
-        <div class="adm-agi-stat-card">
-          <div class="adm-agi-stat-value adm-agi-stat-value--success">${num(onboarding.completed)}</div>
-          <div class="adm-agi-stat-label">${t('admin.agentIntegration.completed')}</div>
-        </div>
-        <div class="adm-agi-stat-card">
-          <div class="adm-agi-stat-value adm-agi-stat-value--accent">${num(onboarding.in_progress)}</div>
-          <div class="adm-agi-stat-label">${t('admin.agentIntegration.inProgress')}</div>
-        </div>
-        <div class="adm-agi-stat-card">
-          <div class="adm-agi-stat-value">${num(notStarted)}</div>
-          <div class="adm-agi-stat-label">${t('admin.agentIntegration.notStarted')}</div>
-        </div>
-      </div>
+      <${StatsGrid} items=${[
+        { label: t('admin.agentIntegration.completed'), value: onboarding.completed, tone: 'green' },
+        { label: t('admin.agentIntegration.inProgress'), value: onboarding.in_progress, tone: 'indigo' },
+        { label: t('admin.agentIntegration.notStarted'), value: notStarted },
+      ]} />
       ${stuck.length > 0 ? html`
         <div class="adm-agi-stuck-title">${t('admin.agentIntegration.stuckAgents')}</div>
         <div class="adm-agi-stuck">
@@ -246,10 +240,10 @@ function StuckAgentRow({ agent, session, onAction }) {
         <div class="adm-agi-stuck-suggestion">${suggestion}</div>
       </div>
       <div class="adm-agi-stuck-actions">
-        <button class="btn-outline adm-agi-stuck-btn" onClick=${handleRemind} disabled=${acting}>
+        <button class="adm-btn-action adm-agi-stuck-btn" onClick=${handleRemind} disabled=${acting}>
           ${t('admin.agentIntegration.sendReminder')}
         </button>
-        <button class="btn-ghost adm-agi-stuck-btn" onClick=${handleSkip} disabled=${acting}>
+        <button class="adm-btn-action adm-agi-stuck-btn" onClick=${handleSkip} disabled=${acting}>
           ${t('admin.agentIntegration.skipStep')}
         </button>
       </div>
@@ -337,7 +331,7 @@ function renderSkillBundles(bundles, onRegenerate, regenerating, session) {
                     : html`<span class="adm-agi-zero">0</span>`
                   }</td>
                   <td>${info.outdated > 0 ? html`
-                    <button class="btn-outline adm-agi-notify-btn" onClick=${() => handleNotify(platform)}>
+                    <button class="adm-btn-action adm-agi-notify-btn" onClick=${() => handleNotify(platform)}>
                       ${t('admin.agentIntegration.notifyOutdated')}
                     </button>
                   ` : ''}</td>
@@ -347,7 +341,7 @@ function renderSkillBundles(bundles, onRegenerate, regenerating, session) {
           </table>
         `
       }
-      <button class="btn-outline adm-agi-regen-btn" onClick=${onRegenerate} disabled=${regenerating}>
+      <button class="adm-btn-action adm-agi-regen-btn" onClick=${onRegenerate} disabled=${regenerating}>
         ${regenerating ? t('common.loading') : t('admin.agentIntegration.regenerateAll')}
       </button>
     </div>
@@ -363,25 +357,16 @@ function renderBundleTemplates() {
   return html`
     <div class="adm-agi-section">
       <div class="adm-agi-section-title">${t('admin.agentIntegration.bundleTemplates')}</div>
-      <div class="adm-agi-stats">
-        <div class="adm-agi-stat-card">
-          <div class="adm-agi-stat-value">0</div>
-          <div class="adm-agi-stat-label">${t('admin.agentIntegration.customReferences')}</div>
-        </div>
-        <div class="adm-agi-stat-card">
-          <div class="adm-agi-stat-value">0</div>
-          <div class="adm-agi-stat-label">${t('admin.agentIntegration.customScripts')}</div>
-        </div>
-        <div class="adm-agi-stat-card">
-          <div class="adm-agi-stat-value adm-agi-mono-sm">--</div>
-          <div class="adm-agi-stat-label">${t('admin.agentIntegration.lastGenerated')}</div>
-        </div>
-      </div>
+      <${StatsGrid} items=${[
+        { label: t('admin.agentIntegration.customReferences'), value: 0 },
+        { label: t('admin.agentIntegration.customScripts'), value: 0 },
+        { label: t('admin.agentIntegration.lastGenerated'), value: '--' },
+      ]} />
       <div class="adm-agi-btn-row">
-        <button class="btn-outline" onClick=${handleComingSoon}>
+        <button class="adm-btn-action" onClick=${handleComingSoon}>
           ${t('admin.agentIntegration.customizeBundle')}
         </button>
-        <button class="btn-outline" onClick=${handleComingSoon}>
+        <button class="adm-btn-action" onClick=${handleComingSoon}>
           ${t('admin.agentIntegration.previewBundle')}
         </button>
       </div>

package/dist/public/views/admin/agent-tasks-tab.js

@@ -3,6 +3,9 @@
  * @description Admin dashboard tab for browsing all agent tasks across all owners.
  *   Provides status filtering, pagination, and TODO progress display.
  * @version-history
+ *   v1.1.0 -- 2026-06-02 -- Component unification (#16): replace inline hex status
+ *     colors with tokenized .tag--status-* classes (admin.css) so status tags flip
+ *     correctly in dark mode.
  *   v1.0.0 -- 2026-05-21 -- Initial creation for Agent Dashboard Phase 1
  */
 import { h } from 'preact';
@@ -11,7 +14,7 @@ import htm from 'htm';
 const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { escHtml } from '/js/utils.js';
-import { num, dt, Empty, Badge } from './shared.js';
+import { dt, Empty, Badge, StatsGrid } from './shared.js';
 import { apiGet } from '/js/api.js';
 
 const PAGE_SIZE = 20;
@@ -25,8 +28,8 @@ export default function AgentTasksTab({ data, reload, session }) {
   const [loading, setLoading] = useState(false);
   const [statusFilter, setStatusFilter] = useState('');
 
-  const loadTasks = useCallback(async (p = 1) => {
-    setLoading(true);
+  const loadTasks = useCallback(async (p = 1, { showSpinner = true } = {}) => {
+    if (showSpinner) setLoading(true);
     try {
       const params = new URLSearchParams();
       params.set('page', String(p));
@@ -48,7 +51,7 @@ export default function AgentTasksTab({ data, reload, session }) {
 
   // Listen for live updates
   useEffect(() => {
-    const handler = () => { loadTasks(page); };
+    const handler = () => { loadTasks(page, { showSpinner: false }); }; // silent: no flash
     window.addEventListener('aimeat-live-update', handler);
     return () => window.removeEventListener('aimeat-live-update', handler);
   }, [loadTasks, page]);
@@ -57,16 +60,11 @@ export default function AgentTasksTab({ data, reload, session }) {
     setStatusFilter(e.target.value);
   }
 
-  function statusColor(status) {
-    switch (status) {
-      case 'active':  return 'var(--accent, #06b6d4)';
-      case 'done':    return '#22c55e';
-      case 'failed':  return '#ef4444';
-      case 'stalled': return '#eab308';
-      case 'queued':  return '#a855f7';
-      case 'draft':   return 'var(--text-dim)';
-      default:        return 'var(--text-dim)';
-    }
+  // Map a task status to a tokenized status-tag class (colors live in admin.css,
+  // tag--status-* — replaces the former inline hex colors so chips flip in dark mode).
+  function statusTagClass(status) {
+    const known = ['active', 'done', 'failed', 'stalled', 'queued', 'draft'];
+    return known.includes(status) ? `tag tag--status-${status}` : 'tag tag--status-draft';
   }
 
   const totalPages = Math.ceil(total / PAGE_SIZE);
@@ -87,12 +85,7 @@ export default function AgentTasksTab({ data, reload, session }) {
       </div>
 
       <!-- Stats summary -->
-      <div class="adm-mem-stats">
-        <div class="adm-mem-stat">
-          <span class="adm-mem-stat-value">${num(total)}</span>
-          <span class="adm-mem-stat-label">${t('dashboard.agentTasksTotal')}</span>
-        </div>
-      </div>
+      <${StatsGrid} items=${[{ label: t('dashboard.agentTasksTotal'), value: total }]} />
 
       <!-- Table -->
       ${tasks.length === 0 && !loading && html`<${Empty} text=${t('dashboard.agentTasksEmpty')} />`}
@@ -115,7 +108,7 @@ export default function AgentTasksTab({ data, reload, session }) {
                     <td class="mono" style="font-size:.8rem">${escHtml(task.agent_gaii)}</td>
                     <td>${escHtml(task.title)}</td>
                     <td>
-                      <span class="tag" style="color:${statusColor(task.status)};border-color:${statusColor(task.status)}">
+                      <span class=${statusTagClass(task.status)}>
                         ${task.status}
                       </span>
                     </td>

package/dist/public/views/admin/chat-instances-tab.js

@@ -176,7 +176,7 @@ export default function ChatInstancesTab({ data, reload }) {
 
     <!-- AI Chat Instances -->
     <${StatsGrid} items=${[
-      { label: t('dashboard.totalSessions'), value: sessions.length, color: '#06b6d4' },
+      { label: t('dashboard.totalSessions'), value: sessions.length, tone: 'cyan' },
     ]} />
 
     ${!sessions.length

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

@@ -10,6 +10,9 @@
  *   v1.2.0 -- 2026-05-31 -- Fix: inputs were bound to the saved value, not the
  *     pending edit, so toggling a checkbox / typing snapped straight back on
  *     re-render (looked un-editable). All inputs now reflect pending[path].
+ *   v1.3.0 -- 2026-06-02 -- Admin design unification: inline error <div>
+ *     replaced with shared <ErrorBox>; success message moved to the
+ *     adm-config-result-ok class (no inline color/background styles).
  */
 import { h } from 'preact';
 import { useState } from 'preact/hooks';
@@ -17,7 +20,7 @@ import htm from 'htm';
 const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { escHtml } from '/js/utils.js';
-import { Badge, Empty, ExpandableHelp } from './shared.js';
+import { Badge, Empty, ExpandableHelp, ErrorBox } from './shared.js';
 import { saveConfig, deleteConfig } from '/js/services/admin.js';
 
 // Map config source to Badge type for visual distinction
@@ -113,7 +116,9 @@ export default function ConfigTab({ data, reload }) {
       </div>
     `}
 
-    ${result && html`<div class="adm-mb-md adm-text-base" style="padding:8px 12px;border-radius:6px;background:${result.ok ? '#16a34a22' : '#dc262622'};color:${result.ok ? '#22c55e' : '#ef4444'}">${escHtml(result.msg)}</div>`}
+    ${result && (result.ok
+      ? html`<div class="adm-config-result-ok adm-mb-md adm-text-base">${escHtml(result.msg)}</div>`
+      : html`<div class="adm-mb-md"><${ErrorBox} message=${result.msg} /></div>`)}
 
     <!-- Pending changes banner -->
     ${editable && pendingKeys.length > 0 && html`

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

@@ -5,6 +5,11 @@
  *   and shows component breakdowns.
  * @version-history
  *   v1.0.0 — 2026-03-17 — Initial admin cortex management tab
+ *   v1.1.0 — 2026-06-02 — Admin design unification: fix the broken useToast wiring
+ *     (object-destructured the array-returning hook, and passed wrong props to
+ *     <Toast> — toasts never rendered); now uses the canonical [msg,showErr,showOk,
+ *     clear] API with a showToast adapter + correct <Toast type text onDismiss>.
+ *     Main btn-* classes → adm-btn / adm-btn-action / adm-btn adm-btn-danger-solid.
  */
 import { h } from 'preact';
 import { useState, useEffect, useCallback } from 'preact/hooks';
@@ -19,24 +24,25 @@ import * as cortexService from '/js/services/cortex.js';
 const COMP_ICONS = { schema: '\u{1F4D0}', prompt: '\u{1F4AC}', action: '\u26A1', 'board-template': '\u{1F4CC}', ontology: '\u{1F9EC}', 'seed-data': '\u{1F331}', lib: '\u{1F4E6}' };
 
 export default function CortexTab({ data, reload, session }) {
-  const { toast, showToast } = useToast();
+  const [toast, showErr, showOk, clearToast] = useToast();
+  const showToast = (text, isError) => isError ? showErr(text) : showOk(text);
   const { confirm, ConfirmUI } = useConfirm();
   const [extensions, setExtensions] = useState([]);
   const [loading, setLoading] = useState(true);
   const [detail, setDetail] = useState(null);
 
-  const loadData = useCallback(async () => {
-    setLoading(true);
+  const loadData = useCallback(async ({ showSpinner = true } = {}) => {
+    if (showSpinner) setLoading(true);
     try {
       const resp = await cortexService.listExtensions();
       setExtensions(resp?.extensions || []);
-    } catch { setExtensions([]); }
+    } catch { if (showSpinner) setExtensions([]); }
     setLoading(false);
   }, []);
 
   useEffect(() => { loadData(); }, [loadData]);
   useEffect(() => {
-    const handler = () => { loadData(); };
+    const handler = () => { loadData({ showSpinner: false }); }; // silent: no flash
     window.addEventListener('aimeat-live-update', handler);
     return () => window.removeEventListener('aimeat-live-update', handler);
   }, [loadData]);
@@ -92,9 +98,9 @@ export default function CortexTab({ data, reload, session }) {
     const isActive = ext.status === 'active';
     const vis = ext.visibility || 'private';
     return html`<div>
-      <${Toast} toast=${toast} />
+      ${toast && html`<${Toast} type=${toast.type} text=${toast.text} onDismiss=${clearToast} />`}
       <${ConfirmUI} />
-      <button class="btn-outline" onClick=${() => setDetail(null)}>${t('dashboard.cortex.back')}</button>
+      <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>
       <p class="adm-text-dim">${escHtml(ext.description || '')}</p>
       <div class="adm-meta-row">
@@ -113,18 +119,18 @@ export default function CortexTab({ data, reload, session }) {
 
       <div class="adm-actions-row" style="margin-top:1.5rem">
         ${isActive
-          ? html`<button class="btn-outline" onClick=${() => handleDeactivate(ext.name)}>${t('dashboard.cortex.deactivate')}</button>`
-          : html`<button class="btn-primary" onClick=${() => handleActivate(ext.name)}>${t('dashboard.cortex.activate')}</button>`}
-        <button class="btn-outline" onClick=${() => handleVisibility(ext.name, vis)}>
+          ? html`<button class="adm-btn-action" onClick=${() => handleDeactivate(ext.name)}>${t('dashboard.cortex.deactivate')}</button>`
+          : html`<button class="adm-btn" onClick=${() => handleActivate(ext.name)}>${t('dashboard.cortex.activate')}</button>`}
+        <button class="adm-btn-action" onClick=${() => handleVisibility(ext.name, vis)}>
           ${vis === 'public' ? t('dashboard.cortex.makePrivate') : t('dashboard.cortex.makePublic')}
         </button>
-        <button class="btn-danger-solid" onClick=${() => handleUninstall(ext.name)}>${t('dashboard.cortex.uninstall')}</button>
+        <button class="adm-btn adm-btn-danger-solid" onClick=${() => handleUninstall(ext.name)}>${t('dashboard.cortex.uninstall')}</button>
       </div>
     </div>`;
   }
 
   return html`<div>
-    <${Toast} toast=${toast} />
+    ${toast && html`<${Toast} type=${toast.type} text=${toast.text} onDismiss=${clearToast} />`}
     <${ConfirmUI} />
     <${StatsGrid} items=${[
       { label: t('dashboard.cortex.total'), value: extensions.length },
@@ -158,8 +164,8 @@ export default function CortexTab({ data, reload, session }) {
                 <td class="adm-text-dim">${types.join(', ')}</td>
                 <td>
                   ${isActive
-                    ? html`<button class="btn-outline btn-sm" onClick=${() => handleDeactivate(ext.name)}>${t('dashboard.cortex.deactivate')}</button>`
-                    : html`<button class="btn-primary btn-sm" onClick=${() => handleActivate(ext.name)}>${t('dashboard.cortex.activate')}</button>`}
+                    ? html`<button class="adm-btn-action" onClick=${() => handleDeactivate(ext.name)}>${t('dashboard.cortex.deactivate')}</button>`
+                    : html`<button class="adm-btn" onClick=${() => handleActivate(ext.name)}>${t('dashboard.cortex.activate')}</button>`}
                 </td>
               </tr>`;
             })}

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

@@ -1,11 +1,23 @@
+/**
+ * @file csm-tab.js
+ * @description Admin dashboard CSM (Community Service Manifest) tab — list,
+ *   detail, create and delete of registered CSM templates, plus an AI builder
+ *   prompt view.
+ * @structure default export CsmTab({ data, reload }); list/detail/create/prompt views.
+ * @usage Mounted by the admin dashboard tab router.
+ * @version-history
+ *   v1.1.0 — 2026-06-02 — Admin design unification: inline danger styles → adm-btn-danger
+ *     (2 delete buttons), raw textarea → adm-textarea adm-input-full, error div → <ErrorBox>.
+ */
 import { h } from 'preact';
 import { useState } from 'preact/hooks';
 import htm from 'htm';
 const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { escHtml } from '/js/utils.js';
-import { dt, Empty, ExpandableHelp, useToast, Toast } from './shared.js';
+import { dt, Empty, ExpandableHelp, ErrorBox, useToast, Toast } from './shared.js';
 import { useConfirm } from '/components/Modal.js';
+import { CopyButton } from '/components/CopyButton.js';
 import { getCsmDetail, deleteCsm, createCsm, getCsmFileTemplates, getCsmFileTemplate, getCsmBuilderPrompt } from '/js/services/admin.js';
 
 export default function CsmTab({ data, reload }) {
@@ -17,7 +29,6 @@ export default function CsmTab({ data, reload }) {
   const [loading, setLoading] = useState(false);
   const [err, setErr] = useState('');
   const [prompt, setPrompt] = useState('');
-  const [copied, setCopied] = useState(false);
   const [toast, showErr, showOk, clearToast] = useToast();
   const { confirm, ConfirmUI } = useConfirm();
 
@@ -89,15 +100,7 @@ export default function CsmTab({ data, reload }) {
     setLoading(false);
   }
 
-  async function copyPrompt() {
-    try {
-      await navigator.clipboard.writeText(prompt);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch { /* fallback — select text */ }
-  }
-
-  function backToList() { setView('list'); setDetail(null); setErr(''); setCopied(false); }
+  function backToList() { setView('list'); setDetail(null); setErr(''); }
 
   // ── Detail view ──
   if (view === 'detail' && detail) {
@@ -110,7 +113,7 @@ export default function CsmTab({ data, reload }) {
         <div class="adm-card adm-mt-md">
           <div class="adm-flex-between">
             <h4 style="margin:0">${escHtml(detail.name)}</h4>
-            <button class="adm-btn-sm" style="color:#ef4444;border-color:#ef4444" onClick=${() => doDelete(detail.name)}>
+            <button class="adm-btn-sm adm-btn-danger" onClick=${() => doDelete(detail.name)}>
               ${t('dashboard.delete')}
             </button>
           </div>
@@ -149,9 +152,10 @@ export default function CsmTab({ data, reload }) {
 
           <div style="position:relative">
             <pre style="background:var(--bg-deep,#0f172a);padding:16px;border-radius:8px;overflow:auto;font-size:.8rem;max-height:500px;white-space:pre-wrap;line-height:1.5;border:1px solid var(--glass-border,#334155)">${prompt}</pre>
-            <button class="adm-btn" style="position:absolute;top:8px;right:8px" onClick=${copyPrompt}>
-              ${copied ? t('dashboard.copied') : t('dashboard.copy')}
-            </button>
+            <span style="position:absolute;top:8px;right:8px">
+              <${CopyButton} text=${prompt} className="adm-btn"
+                label=${t('dashboard.copy')} copiedLabel=${t('dashboard.copied')} />
+            </span>
           </div>
 
           <div class="adm-mt-lg">
@@ -190,13 +194,13 @@ export default function CsmTab({ data, reload }) {
           <label class="adm-text-base adm-text-dim" style="display:block;margin-bottom:4px">${t('dashboard.csmDefinition')}</label>
           <textarea
             rows="16"
-            style="width:100%;font-family:monospace;font-size:.8rem;resize:vertical"
+            class="adm-textarea adm-input-full"
             placeholder=${t('dashboard.csmYamlPlaceholder')}
             value=${yaml}
             onInput=${e => setYaml(e.target.value)}
           />
 
-          ${err && html`<div class="error-box adm-mt-sm">${err}</div>`}
+          ${err && html`<div class="adm-mt-sm"><${ErrorBox} message=${err} /></div>`}
 
           <div class="adm-flex adm-mt-md">
             <button class="adm-btn" onClick=${doCreate} disabled=${loading || !yaml.trim()}>
@@ -246,7 +250,7 @@ export default function CsmTab({ data, reload }) {
                   <td style="white-space:nowrap">
                     <button class="adm-btn-sm" onClick=${() => showDetail(c.name)}>${t('dashboard.details')}</button>
                     ${' '}
-                    <button class="adm-btn-sm" style="color:#ef4444;border-color:#ef4444" onClick=${() => doDelete(c.name)}>
+                    <button class="adm-btn-sm adm-btn-danger" onClick=${() => doDelete(c.name)}>
                       ${t('dashboard.delete')}
                     </button>
                   </td>

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

@@ -28,9 +28,9 @@ export default function DirectoryTab({ data }) {
     <${ExpandableHelp} title=${t('dashboard.directoryHelpTitle')}>${t('dashboard.directoryHelpDetail')}</${ExpandableHelp}>
 
     <${StatsGrid} items=${[
-      { label: t('dashboard.totalEntries'), value: dir?.total || 0, color: '#06b6d4' },
-      { label: t('dashboard.cities'), value: dir?.cities || 0, color: '#22c55e' },
-      { label: t('dashboard.categories'), value: dir?.categories || 0, color: '#f59e0b' },
+      { label: t('dashboard.totalEntries'), value: dir?.total || 0, tone: 'cyan' },
+      { label: t('dashboard.cities'), value: dir?.cities || 0, tone: 'green' },
+      { label: t('dashboard.categories'), value: dir?.categories || 0, tone: 'amber' },
     ]} />
 
     <div class="adm-card" style="margin-top:12px">

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

@@ -1,3 +1,13 @@
+/**
+ * @file email-tab.js
+ * @description Admin dashboard Email tab — SMTP config view, test-send, group
+ *   broadcast, and per-locale email template editor with AI-prompt generation.
+ * @structure EmailTab (default), TemplateEditor, buildAiPrompt
+ * @usage Mounted by the admin dashboard tab router.
+ * @version-history
+ *   v1.1.0 — 2026-06-02 — Admin design unification: raw textareas → adm-textarea
+ *     adm-input-full; inline button color styles → adm-btn-success/adm-btn-danger.
+ */
 import { h } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
 import htm from 'htm';
@@ -5,6 +15,7 @@ const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { EconRow, Empty, ExpandableHelp } from './shared.js';
 import { useConfirm } from '/components/Modal.js';
+import { CopyButton } from '/components/CopyButton.js';
 import { sendTestEmail, getEmailTemplates, sendGroupEmail, saveEmailTemplate, resetEmailTemplate, seedEmailTemplates, resetAllEmailTemplates, saveConfig } from '/js/services/admin.js';
 
 const TEMPLATE_IDS = ['notification', 'verification', 'magic_link', 'match_suggestion'];
@@ -107,23 +118,6 @@ function TemplateEditor({ tpl, locale, onSave, onReset }) {
     }, { danger: true });
   }
 
-  async function copyAiPrompt() {
-    const prompt = buildAiPrompt(tpl, locale);
-    try {
-      await navigator.clipboard.writeText(prompt);
-      setMsg({ ok: true, text: t('dashboard.emailTplAiPromptCopied') });
-    } catch {
-      // Fallback: select textarea
-      const ta = document.createElement('textarea');
-      ta.value = prompt;
-      document.body.appendChild(ta);
-      ta.select();
-      document.execCommand('copy');
-      document.body.removeChild(ta);
-      setMsg({ ok: true, text: t('dashboard.emailTplAiPromptCopied') });
-    }
-  }
-
   const hasChanges = editHtml !== (tpl.preview || '') || editText !== (tpl.text || '');
 
   const tabStyle = (active) => `
@@ -167,17 +161,19 @@ function TemplateEditor({ tpl, locale, onSave, onReset }) {
       `}
       ${view === 'html' && html`
         <textarea
+          class="adm-textarea adm-input-full"
           value=${editHtml}
           onInput=${e => setEditHtml(e.target.value)}
-          style="width:100%;height:420px;font-family:monospace;font-size:12px;padding:10px;border:1px solid var(--glass-border);border-top:none;border-radius:0 0 6px 6px;background:rgba(0,0,0,0.2);color:var(--text-bright);resize:vertical;line-height:1.5;tab-size:2"
+          style="height:420px;font-size:12px;border-top:none;border-radius:0 0 6px 6px"
           spellcheck="false"
         />
       `}
       ${view === 'text' && html`
         <textarea
+          class="adm-textarea adm-input-full"
           value=${editText}
           onInput=${e => setEditText(e.target.value)}
-          style="width:100%;height:300px;font-family:monospace;font-size:13px;padding:10px;border:1px solid var(--glass-border);border-top:none;border-radius:0 0 6px 6px;background:rgba(0,0,0,0.2);color:var(--text-bright);resize:vertical;line-height:1.5"
+          style="height:300px;font-size:13px;border-top:none;border-radius:0 0 6px 6px"
           spellcheck="false"
         />
       `}
@@ -186,11 +182,11 @@ function TemplateEditor({ tpl, locale, onSave, onReset }) {
       <div class="adm-flex-center" style="flex-wrap:wrap;margin-top:10px">
         <button class="adm-btn-action adm-text-sm" onClick=${doSave} disabled=${saving || !hasChanges}>
           ${saving ? '...' : t('dashboard.emailTplSave')}</button>
-        <button class="adm-btn-action adm-text-sm" onClick=${copyAiPrompt}
-          style="background:rgba(79,70,229,0.1);border-color:rgba(79,70,229,0.3);color:#818cf8">${t('dashboard.emailTplAiPrompt')}</button>
+        <${CopyButton} text=${buildAiPrompt(tpl, locale)} className="adm-btn-action adm-text-sm"
+          label=${t('dashboard.emailTplAiPrompt')} copiedLabel=${t('dashboard.emailTplAiPrompt')}
+          onCopied=${() => setMsg({ ok: true, text: t('dashboard.emailTplAiPromptCopied') })} />
         ${tpl.isCustom && html`
-          <button class="adm-btn-action adm-text-sm" onClick=${doReset} disabled=${saving}
-            style="color:#ef4444;border-color:rgba(239,68,68,0.3)">${t('dashboard.emailTplReset')}</button>
+          <button class="adm-btn-action adm-btn-danger adm-text-sm" onClick=${doReset} disabled=${saving}>${t('dashboard.emailTplReset')}</button>
         `}
         ${msg && html`<span class="adm-text-sm" style="color:${msg.ok ? '#22c55e' : '#ef4444'}">${msg.text}</span>`}
       </div>
@@ -385,11 +381,10 @@ export default function EmailTab({ data, reload, locale }) {
       <input type="text" class="adm-input adm-input-full adm-mb-sm" value=${grpSubject}
         onInput=${e => setGrpSubject(e.target.value)}
         placeholder=${t('dashboard.emailGroupSubject')} />
-      <textarea class="adm-input adm-input-full" value=${grpBody}
+      <textarea class="adm-textarea adm-input-full" value=${grpBody}
         onInput=${e => setGrpBody(e.target.value)}
         placeholder=${t('dashboard.emailGroupBody')}
-        rows="4"
-        style="resize:vertical;font-family:inherit" />
+        rows="4" />
       <div class="adm-mt-sm">
         <button class="adm-btn" onClick=${doGroupSend} disabled=${grpSending || !grpSubject || !grpBody}>
           ${grpSending ? '...' : t('dashboard.emailGroupSend')}
@@ -414,12 +409,12 @@ export default function EmailTab({ data, reload, locale }) {
       <!-- Seed / Reset All buttons -->
       <div class="adm-flex-center" style="flex-wrap:wrap;margin-bottom:14px;padding:10px 12px;border-radius:6px;background:rgba(255,255,255,0.02);border:1px solid var(--glass-border)">
         ${!seeded && html`
-          <button class="adm-btn-action adm-text-sm" style="background:rgba(34,197,94,0.1);border-color:rgba(34,197,94,0.3);color:#22c55e"
+          <button class="adm-btn-action adm-btn-success adm-text-sm"
             onClick=${doSeedDefaults}>${t('dashboard.emailTplSeedDefaults')}</button>
           <span style="font-size:.78rem" class="adm-text-dim">${t('dashboard.emailTplSeedExplain')}</span>
         `}
         ${seeded && html`
-          <button class="adm-btn-action adm-text-sm" style="color:#ef4444;border-color:rgba(239,68,68,0.3)"
+          <button class="adm-btn-action adm-btn-danger adm-text-sm"
             onClick=${doResetAll}>${t('dashboard.emailTplResetAll')}</button>
           <button class="adm-btn-action adm-text-sm"
             onClick=${doSeedDefaults}>${t('dashboard.emailTplReseed')}</button>

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

@@ -1,3 +1,13 @@
+/**
+ * @file federation-tab.js
+ * @description Admin dashboard Federation tab — peer management, peering
+ *   requests, network directory, auth policy, and federation bus overview.
+ * @structure FederationTab (default)
+ * @usage Mounted by the admin dashboard tab router.
+ * @version-history
+ *   v1.1.0 — 2026-06-02 — Admin design unification: inline button color style
+ *     on the approve action → adm-btn-success.
+ */
 import { h } from 'preact';
 import { useState, useEffect, useCallback, useRef } from 'preact/hooks';
 import htm from 'htm';
@@ -245,10 +255,10 @@ export default function FederationTab({ data, reload }) {
 
     <!-- ═══ Stats Overview ═══ -->
     <${StatsGrid} items=${[
-      { label: t('dashboard.fedActivePeers'), value: activePeers.length, color: '#22c55e' },
-      { label: t('dashboard.fedDegradedPeers'), value: degradedPeers.length, color: '#f59e0b' },
-      { label: t('dashboard.fedOfflinePeers'), value: offlinePeers.length, color: '#ef4444' },
-      { label: t('dashboard.fedPendingRequests'), value: pendingRequests.length, color: '#06b6d4' },
+      { label: t('dashboard.fedActivePeers'), value: activePeers.length, tone: 'green' },
+      { label: t('dashboard.fedDegradedPeers'), value: degradedPeers.length, tone: 'amber' },
+      { label: t('dashboard.fedOfflinePeers'), value: offlinePeers.length, tone: 'red' },
+      { label: t('dashboard.fedPendingRequests'), value: pendingRequests.length, tone: 'cyan' },
     ]} />
 
     <!-- ═══ Federation Auth Policy ═══ -->
@@ -331,7 +341,7 @@ export default function FederationTab({ data, reload }) {
               <td style="max-width:200px;overflow:hidden;text-overflow:ellipsis">${escHtml(r.message || '\u2014')}</td>
               <td class="adm-text-dim">${dt(r.created_at)}</td>
               <td style="display:flex;gap:4px">
-                <button class="adm-btn-sm" style="color:#22c55e" onClick=${() => doApprove(r.id)}>\u2714 ${t('dashboard.approve')}</button>
+                <button class="adm-btn-sm adm-btn-success" onClick=${() => doApprove(r.id)}>\u2714 ${t('dashboard.approve')}</button>
                 <button class="adm-btn-sm adm-text-error" onClick=${() => doReject(r.id)}>\u2718 ${t('dashboard.fedReject')}</button>
               </td>
             </tr>`)}