aimeat 1.16.2 → 1.18.0

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

@@ -1,7 +1,11 @@
 /**
- * Admin Dashboard — Services Tab
- * Manage installed service extensions and their instances.
- * Install bundled extensions with one-click.
+ * @file services-tab.js
+ * @description Admin Dashboard — Services Tab. Manage installed service
+ *   extensions and their instances, install bundled extensions one-click,
+ *   edit action scripts and instance translations.
+ * @version-history
+ *   v1.1.0 — 2026-06-02 — Admin design unification: raw script/JSON textareas
+ *     → adm-textarea adm-input-full (drop inline mono/resize/border styles).
  */
 import { h } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
@@ -17,6 +21,7 @@ import {
   getDiskScript, saveDiskScript, addDiskAction, reinstallExtension,
 } from '/js/services/admin.js';
 import { useConfirm } from '/components/Modal.js';
+import { CopyButton } from '/components/CopyButton.js';
 
 const inputStyle = 'adm-input';
 const labelStyle = 'adm-text-sm adm-text-dim';
@@ -212,22 +217,6 @@ function TranslationEditor({ extName, inst, onSave }) {
     setSaving(false);
   }
 
-  async function copyAiPrompt() {
-    const prompt = buildTranslationAiPrompt(extName, inst.id, allKeys.length > 0 ? allKeys : ['(no keys detected — add categories to config first)'], locale, translations);
-    try {
-      await navigator.clipboard.writeText(prompt);
-      setMsg({ ok: true, text: t('dashboard.servicesTlPromptCopied') });
-    } catch {
-      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.servicesTlPromptCopied') });
-    }
-  }
-
   const displayKeys = [...new Set([...allKeys, ...Object.keys(translations)])].sort();
 
   return html`
@@ -241,13 +230,15 @@ function TranslationEditor({ extName, inst, onSave }) {
         </select>
         <button class="adm-btn-sm" onClick=${() => { setJsonMode(!jsonMode); if (!jsonMode) setJsonText(JSON.stringify(translations, null, 2)); }}
           style="font-size:.75rem">${jsonMode ? t('dashboard.servicesTlFormMode') : 'JSON'}</button>
-        <button class="adm-btn-sm" onClick=${copyAiPrompt}
-          style="font-size:.75rem;color:#818cf8;border-color:rgba(79,70,229,0.3)">${t('dashboard.servicesTlAiPrompt')}</button>
+        <${CopyButton} className="adm-btn-sm"
+          text=${buildTranslationAiPrompt(extName, inst.id, allKeys.length > 0 ? allKeys : ['(no keys detected — add categories to config first)'], locale, translations)}
+          label=${t('dashboard.servicesTlAiPrompt')} copiedLabel=${t('dashboard.servicesTlAiPrompt')}
+          onCopied=${() => setMsg({ ok: true, text: t('dashboard.servicesTlPromptCopied') })} />
       </div>
 
       ${jsonMode ? html`
-        <textarea value=${jsonText} onInput=${e => setJsonText(e.target.value)}
-          style="width:100%;height:200px;font-family:monospace;font-size:12px;padding:8px;border:1px solid var(--glass-border);border-radius:4px;background:rgba(0,0,0,0.2);color:var(--text-bright);resize:vertical"
+        <textarea class="adm-textarea adm-input-full" value=${jsonText} onInput=${e => setJsonText(e.target.value)}
+          style="height:200px;font-size:12px"
           spellcheck="false" />
       ` : html`
         <div class="adm-flex-col" style="gap:4px;max-height:300px;overflow-y:auto">
@@ -328,8 +319,8 @@ function ActionScriptEditor({ extName, actions, onUpdated }) {
           <div class="adm-flex-between adm-mb-xs">
             <code style="font-size:.8rem;color:var(--text-dim)">${extName}/${selectedAction}</code>
           </div>
-          <textarea value=${script} onInput=${e => setScript(e.target.value)}
-            style="width:100%;height:320px;font-family:'Fira Code',monospace;font-size:12px;line-height:1.5;padding:10px;border:1px solid var(--glass-border);border-radius:4px;background:rgba(0,0,0,0.3);color:var(--text-bright);resize:vertical;tab-size:2"
+          <textarea class="adm-textarea adm-input-full" value=${script} onInput=${e => setScript(e.target.value)}
+            style="height:320px;font-size:12px"
             spellcheck="false"
             onKeyDown=${e => {
               if (e.key === 'Tab') {
@@ -791,8 +782,8 @@ function AvailableExtCard({ ext, isInstalled, isInstalling, onInstall, onReinsta
           ${selectedAction && !loading && html`
             <div>
               <code class="adm-text-sm adm-text-dim">${ext.name}/actions/${selectedAction}.js</code>
-              <textarea value=${script} onInput=${e => setScript(e.target.value)}
-                style="width:100%;height:320px;font-family:'Fira Code',monospace;font-size:12px;line-height:1.5;padding:10px;border:1px solid var(--glass-border);border-radius:4px;background:rgba(0,0,0,0.3);color:var(--text-bright);resize:vertical;tab-size:2;margin-top:4px"
+              <textarea class="adm-textarea adm-input-full" value=${script} onInput=${e => setScript(e.target.value)}
+                style="height:320px;font-size:12px;margin-top:4px"
                 spellcheck="false"
                 onKeyDown=${e => {
                   if (e.key === 'Tab') {

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

@@ -1,48 +1,52 @@
 /**
- * Admin Dashboard — Shared UI helpers
- * Reusable utilities used across admin tab components.
+ * @file shared.js
+ * @description Admin Dashboard shared UI helpers — the admin design system's own
+ *   primitives (Badge, StatCard, StatsGrid, Spinner, Empty, ErrorBox, DataTable,
+ *   ExpandableHelp, useToast/Toast, EconRow/HealthRow) + formatters. Admin is a
+ *   self-contained design system (adm-* scoped); these are intentionally separate
+ *   from the main /components primitives.
+ * @version-history
+ *   v1.2.0 — 2026-06-02 — Component unification (#13 tables): DataTable is now a
+ *     thin wrapper that renders `.adm-card` around the canonical
+ *     /components/DataTable.js (imported, not bare-re-exported). Admin keeps its
+ *     card wrapper and unchanged appearance; the table body is shared.
+ *   v1.1.0 — 2026-06-02 — i18n the Spinner/ErrorBox defaults (t('common.loading') /
+ *     t('common.error')) — were hardcoded English (Rule 4/7.8).
  */
 import { h } from 'preact';
 import { useState } from 'preact/hooks';
 import htm from 'htm';
 const html = htm.bind(h);
 import { escHtml } from '/js/utils.js';
-
-/** Format a number with locale */
-export function num(n) {
-  return typeof n === 'number' ? n.toLocaleString() : String(n ?? '\u2014');
-}
-
-/** Format a date string */
-export function dt(s) {
-  return s ? new Date(s).toLocaleString() : '\u2014';
-}
-
-/** Format uptime seconds to human-readable */
-export function fmtUp(s) {
-  const d = Math.floor(s / 86400);
-  const hr = Math.floor((s % 86400) / 3600);
-  const m = Math.floor((s % 3600) / 60);
-  return (d ? d + 'd ' : '') + (hr ? hr + 'h ' : '') + (m ? m + 'm' : '<1m');
-}
-
-/** Format bytes to human-readable */
-export function fmtBytes(b) {
-  if (b < 1024) return b + ' B';
-  if (b < 1048576) return (b / 1024).toFixed(1) + ' KB';
-  return (b / 1048576).toFixed(1) + ' MB';
-}
+import { t } from '/js/i18n.js';
+import { EmptyState } from '/components/EmptyState.js';
+// Import (not bare re-export) so we hold a local binding to wrap below — a
+// `export { DataTable } from ...` would NOT create a usable local reference.
+import { DataTable as GenericDataTable } from '/components/DataTable.js';
+
+// Display formatters now live in the shared /js/format.js. Import them into local
+// scope (StatCard etc. call num() directly) AND re-export so the existing admin
+// importers (`import { num, dt, fmtUp, fmtBytes } from './shared.js'`) keep working.
+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 stat card */
-export function StatCard({ label, value, sub, color }) {
+/**
+ * Render a stat card.
+ * @param {{ label: string, value: any, sub?: string, tone?: string, color?: string }} props
+ *   tone — theme-aware modifier class (indigo|mint|green|cyan|amber|purple|blue|red). Preferred.
+ *   color — legacy inline color (still honored if no tone); migrate callers to `tone`.
+ */
+export function StatCard({ label, value, sub, tone, color }) {
+  const toneClass = tone ? ` ${tone}` : '';
+  const style = !tone && color ? `color:${color}` : '';
   return html`<div class="adm-card">
     <h2>${label}</h2>
-    <div class="adm-stat" style="color:${color || 'var(--accent, #06b6d4)'}">${num(value)}</div>
+    <div class="adm-stat${toneClass}" style=${style}>${num(value)}</div>
     ${sub && html`<div class="adm-stat-label">${sub}</div>`}
   </div>`;
 }
@@ -50,7 +54,7 @@ export function StatCard({ label, value, sub, color }) {
 /** Render a stats grid (4-column) */
 export function StatsGrid({ items }) {
   return html`<div class="adm-grid adm-grid-4">
-    ${items.map(i => html`<${StatCard} label=${i.label} value=${i.value} sub=${i.sub} color=${i.color} />`)}
+    ${items.map(i => html`<${StatCard} label=${i.label} value=${i.value} sub=${i.sub} tone=${i.tone} color=${i.color} />`)}
   </div>`;
 }
 
@@ -72,17 +76,17 @@ export function HealthRow({ label, obj }) {
 
 /** Loading spinner */
 export function Spinner({ text }) {
-  return html`<div class="empty"><div class="spinner"></div> ${text || 'Loading...'}</div>`;
+  return html`<div class="empty"><div class="spinner"></div> ${text || t('common.loading')}</div>`;
 }
 
-/** Empty state */
+/** Empty state — delegates to the canonical /components/EmptyState.js. */
 export function Empty({ text }) {
-  return html`<div class="empty">${text}</div>`;
+  return html`<${EmptyState} text=${text} />`;
 }
 
 /** Error box */
 export function ErrorBox({ message }) {
-  return html`<div class="error-box"><strong>Error</strong><br/>${escHtml(message)}</div>`;
+  return html`<div class="error-box"><strong>${t('common.error')}</strong><br/>${escHtml(message)}</div>`;
 }
 
 /** Expandable/collapsible help section — reusable across all tabs and portal pages */
@@ -94,33 +98,19 @@ export function ExpandableHelp({ title, children }) {
 }
 
 /**
- * DataTable — renders rows with optional raw HTML cells.
+ * DataTable (admin) — thin wrapper around the canonical
+ * /components/DataTable.js that adds admin's `.adm-card` container. The 36
+ * admin importers keep the same `{ headers, rows, scroll }` signature and the
+ * same admin appearance (the `.adm table` / `.adm .scrollable` / `.adm .mono`
+ * scoped CSS still wins over the generic `.data-table` inside `.adm`).
  *
- * SECURITY: When a cell object has `_html: true`, `cell.text` is rendered
- * as raw HTML via dangerouslySetInnerHTML. Callers MUST ensure `cell.text`
- * is sanitized (use escHtml() for any user-generated content).
- * Only use `_html` for trusted, server-generated markup like badges.
+ * SECURITY: cell objects with `_html: true` render `cell.text` as raw HTML;
+ * callers MUST sanitize (escHtml()) any user-generated content. See the
+ * generic DataTable for the full cell protocol.
  */
 export function DataTable({ headers, rows, scroll }) {
-  const table = html`<table>
-    <thead><tr>${headers.map(h => html`<th>${h}</th>`)}</tr></thead>
-    <tbody>
-      ${rows.map(row => html`<tr>
-        ${row.map(cell => {
-          if (cell && typeof cell === 'object' && cell._html) {
-            return html`<td class=${cell.mono ? 'mono' : ''} title=${cell.title || ''}
-              dangerouslySetInnerHTML=${{ __html: cell.text }}></td>`;
-          }
-          if (cell && typeof cell === 'object' && cell.mono) {
-            return html`<td class="mono" title=${cell.title || ''}>${cell.text}</td>`;
-          }
-          return html`<td>${cell}</td>`;
-        })}
-      </tr>`)}
-    </tbody>
-  </table>`;
   return html`<div class="adm-card">
-    ${scroll ? html`<div class="scrollable">${table}</div>` : table}
+    <${GenericDataTable} headers=${headers} rows=${rows} scroll=${scroll} />
   </div>`;
 }
 

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

@@ -11,7 +11,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 } from './shared.js';
+import { num, dt, Empty, StatsGrid } from './shared.js';
 import { apiGet } from '/js/api.js';
 
 export default function SharingGroupsTab({ data, reload, session }) {
@@ -19,8 +19,8 @@ export default function SharingGroupsTab({ data, reload, session }) {
   const [total, setTotal] = useState(0);
   const [loading, setLoading] = useState(false);
 
-  const loadGroups = useCallback(async () => {
-    setLoading(true);
+  const loadGroups = useCallback(async ({ showSpinner = true } = {}) => {
+    if (showSpinner) setLoading(true);
     try {
       const r = await apiGet('/v1/admin/sharing-groups');
       if (r.data) {
@@ -37,7 +37,7 @@ export default function SharingGroupsTab({ data, reload, session }) {
 
   // Listen for live updates
   useEffect(() => {
-    const handler = () => { loadGroups(); };
+    const handler = () => { loadGroups({ showSpinner: false }); }; // silent: no flash
     window.addEventListener('aimeat-live-update', handler);
     return () => window.removeEventListener('aimeat-live-update', handler);
   }, [loadGroups]);
@@ -45,12 +45,7 @@ export default function SharingGroupsTab({ data, reload, session }) {
   return html`
     <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.sharingGroupsTotal')}</span>
-        </div>
-      </div>
+      <${StatsGrid} items=${[{ label: t('dashboard.sharingGroupsTotal'), value: total }]} />
 
       <!-- Table -->
       ${groups.length === 0 && !loading && html`<${Empty} text=${t('dashboard.sharingGroupsEmpty')} />`}

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

@@ -137,8 +137,8 @@ export default function StatsTab({ data }) {
   const [loading, setLoading] = useState(false);
   const chartRefs = useRef({});
 
-  const fetchStats = useCallback(async (p, cf, ct) => {
-    setLoading(true);
+  const fetchStats = useCallback(async (p, cf, ct, { showSpinner = true } = {}) => {
+    if (showSpinner) setLoading(true);
     try {
       const range = p === 'custom'
         ? (cf && ct ? { from: cf, to: ct } : null)
@@ -155,7 +155,7 @@ export default function StatsTab({ data }) {
 
   // Listen for live updates
   useEffect(() => {
-    const handler = () => { fetchStats(period, customFrom, customTo); };
+    const handler = () => { fetchStats(period, customFrom, customTo, { showSpinner: false }); }; // silent: no flash
     window.addEventListener('aimeat-live-update', handler);
     return () => window.removeEventListener('aimeat-live-update', handler);
   }, [period, customFrom, customTo]);

package/dist/public/views/guides.js

@@ -1,12 +1,16 @@
 /**
- * Guides — View Module
- * Interactive guide index + detail views with copy-to-clipboard for AI chat.
+ * @file guides.js
+ * @description Guides — interactive guide index + detail views with
+ *   copy-to-clipboard (markdown) for pasting a whole guide into an AI chat.
+ * @version-history
+ *   v1.1.0 — 2026-06-02 — Migrate bespoke copy button to canonical CopyButton component
  */
 import { h } from 'preact';
 import { useState, useEffect, useCallback, useRef } from 'preact/hooks';
 import htm from 'htm';
 import { t } from '/js/i18n.js';
-import { escHtml, copyToClipboard } from '/js/utils.js';
+import { escHtml } from '/js/utils.js';
+import { CopyButton } from '/components/CopyButton.js';
 
 const html = htm.bind(h);
 const NODE_URL = window.location.origin;
@@ -294,7 +298,6 @@ function GuideIndex({ locale, onSelectGuide, navigate }) {
 }
 
 function GuideDetail({ slug, locale, onBack }) {
-  const [copied, setCopied] = useState(false);
   const labels = LABELS[locale] || LABELS.en;
   const guide = GUIDES[slug];
   if (!guide) return html`<div class="gd-container"><p>Guide not found.</p></div>`;
@@ -312,12 +315,6 @@ function GuideDetail({ slug, locale, onBack }) {
     return md;
   }, [data]);
 
-  const handleCopy = useCallback(() => {
-    copyToClipboard(buildMarkdown());
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  }, [buildMarkdown]);
-
   useEffect(() => {
     document.title = data.title + ' | AIME AT';
     window.scrollTo(0, 0);
@@ -334,9 +331,8 @@ function GuideDetail({ slug, locale, onBack }) {
 
       <div class="gd-copy-section">
         <div class="gd-copy-instruction">${labels.copyInstruction}</div>
-        <button class="gd-copy-btn ${copied ? 'copied' : ''}" onClick=${handleCopy}>
-          ${copied ? '\u2714 ' + labels.copiedLabel : '\uD83D\uDCCB ' + labels.copyBtnLabel}
-        </button>
+        <${CopyButton} text=${buildMarkdown()} className="gd-copy-btn"
+          label=${'\uD83D\uDCCB ' + labels.copyBtnLabel} copiedLabel=${'\u2714 ' + labels.copiedLabel} />
       </div>
 
       <div class="gd-tech-warning">${labels.techWarning}</div>

package/dist/public/views/help.js

@@ -7,12 +7,14 @@
  * @usage import HelpView from '/views/help.js'
  * @version-history
  *   v1.0.0 — 2026-03-23 — Initial implementation
+ *   v1.1.0 — 2026-06-02 — Migrate bespoke copy button to canonical CopyButton component
  */
 import { h } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
 import htm from 'htm';
 import { t } from '/js/i18n.js';
 import { useViewCSS } from '/components/useViewCSS.js';
+import { CopyButton } from '/components/CopyButton.js';
 
 const html = htm.bind(h);
 
@@ -22,7 +24,6 @@ export default function HelpView() {
   const [prompt, setPrompt] = useState('');
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
-  const [copied, setCopied] = useState(false);
 
   useEffect(() => {
     fetch('/v1/help/prompt')
@@ -34,26 +35,6 @@ export default function HelpView() {
       .catch(() => { setError(true); setLoading(false); });
   }, []);
 
-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(prompt);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch {
-      // Fallback for older browsers
-      const ta = document.createElement('textarea');
-      ta.value = prompt;
-      ta.style.position = 'fixed';
-      ta.style.left = '-9999px';
-      document.body.appendChild(ta);
-      ta.select();
-      document.execCommand('copy');
-      document.body.removeChild(ta);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    }
-  };
-
   return html`
     <div class="hlp-container">
       <div class="hlp-card">
@@ -69,9 +50,7 @@ export default function HelpView() {
         </div>
 
         ${!loading && !error && html`
-          <button class="${copied ? 'hlp-copy-btn hlp-copied' : 'hlp-copy-btn'}" onClick=${handleCopy}>
-            ${copied ? t('help.copied') : t('help.copyBtn')}
-          </button>
+          <${CopyButton} text=${prompt} label=${t('help.copyBtn')} copiedLabel=${t('help.copied')} className="hlp-copy-btn" />
         `}
       </div>
     </div>