aimeat 1.16.2 → 1.18.0

package/dist/public/views/profile/agents-tasks-subtab.js

@@ -9,6 +9,19 @@
  *   - TaskItem -- task row with expand/collapse, todo list, start button
  *   - RequestChangesModal -- inline modal for owner to send a free-text change request
  * @version-history
+ *   v4.8.3 -- 2026-06-02 -- Render non-JSON memory values (e.g. an agent's
+ *     latest_output) as Markdown via the shared safe Markdown component, instead
+ *     of raw monospace text.
+ *   v4.8.2 -- 2026-06-01 -- Render JSON memory values as a structured key/value
+ *     tree (indented nested blocks, type-coloured values) instead of raw JSON text.
+ *   v4.8.1 -- 2026-06-01 -- Per-task memory entries are now collapsible; values
+ *     render as pretty-printed JSON when valid (raw otherwise). Add deliverableKey
+ *     as a third lookup source alongside the task:<id> tag and live-key prefix.
+ *   v4.8.0 -- 2026-06-01 -- Show a task's memory entries in the expanded view:
+ *     entries tagged task:<id> + the live-status key prefix, deduped by key.
+ *   v4.7.0 -- 2026-06-01 -- Triage: replace status pills with Recent/Keep/Archive
+ *     buckets (server-derived, with counts), on-demand search (🔍 toggle) + time
+ *     chips, and per-task Keep/Archive/Restore actions. Fetches by bucket/q/time.
  *   v4.6.0 -- 2026-06-01 -- Add "max concurrent tasks" runner config (number input,
  *     default 1) that PATCHes /v1/agents/:name/max-concurrent-tasks. Consumed by
  *     the agent's runner (e.g. a CrewAI daemon) via the integration kit.
@@ -49,12 +62,24 @@ const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { timeAgo } from '/js/utils.js';
 import { apiGet, apiPost } from '/js/api.js';
-import { listTasks, deleteTask, startTask, listEvents, requestChanges, createTask, rateTask } from '/js/services/agent-tasks.js';
+import { listTasks, deleteTask, startTask, listEvents, requestChanges, createTask, rateTask, setTaskTriage } from '/js/services/agent-tasks.js';
 import { setMaxConcurrentTasks } from '/js/services/agents.js';
 import { useConfirm, Modal } from '/components/Modal.js';
+import { Markdown } from '/components/Markdown.js';
 import RateModal from './agents/rate-modal.js';
 
-const TASK_FILTERS = ['all', 'active', 'queued', 'completed', 'failed'];
+// Tasks-tab triage buckets (server-derived) + on-demand search time chips.
+const BUCKETS = ['recent', 'keep', 'archive'];
+const TIME_CHIPS = ['all', 'today', '7d', '30d'];
+
+/** Map a time chip to an `updated_after` ISO bound (undefined = no bound). */
+function timeChipToAfter(chip) {
+  const now = new Date();
+  if (chip === 'today') { const d = new Date(now); d.setHours(0, 0, 0, 0); return d.toISOString(); }
+  if (chip === '7d') return new Date(now.getTime() - 7 * 86400000).toISOString();
+  if (chip === '30d') return new Date(now.getTime() - 30 * 86400000).toISOString();
+  return undefined;
+}
 
 // Per-browser "blur the title" preference. Used when screen-recording the tab
 // so sensitive task titles can be hidden without affecting other viewers or
@@ -212,6 +237,74 @@ function RequestChangesModal({ open, onClose, onSubmit, submitting }) {
   <//>`;
 }
 
+// Parse a memory value into structured JSON when possible. Returns { json } for
+// objects (or strings that parse as JSON), or { raw } for plain text/markdown.
+function parseMemoryValue(value) {
+  if (value === null || value === undefined) return { raw: '' };
+  if (typeof value === 'object') return { json: value };
+  if (typeof value === 'string') {
+    const trimmed = value.trim();
+    if (trimmed && (trimmed[0] === '{' || trimmed[0] === '[')) {
+      try { return { json: JSON.parse(trimmed) }; }
+      catch { /* not JSON after all -- show raw */ }
+    }
+    return { raw: value };
+  }
+  return { raw: String(value) };
+}
+
+// Recursive structured JSON renderer: objects/arrays become indented key/value
+// rows, primitives get type-coloured values. Far easier to scan than raw JSON.
+function JsonNode({ value }) {
+  if (value === null) return html`<span class="pf-agd-json-null">null</span>`;
+  const t = typeof value;
+  if (t === 'string') return html`<span class="pf-agd-json-str">${value}</span>`;
+  if (t === 'number') return html`<span class="pf-agd-json-num">${value}</span>`;
+  if (t === 'boolean') return html`<span class="pf-agd-json-bool">${value ? 'true' : 'false'}</span>`;
+  const entries = Array.isArray(value) ? value.map((v, i) => [String(i), v]) : Object.entries(value || {});
+  if (entries.length === 0) return html`<span class="pf-agd-json-empty">${Array.isArray(value) ? '[ ]' : '{ }'}</span>`;
+  return html`
+    <div class="pf-agd-json-block">
+      ${entries.map(([k, v]) => {
+        const nested = v !== null && typeof v === 'object';
+        return html`
+          <div class=${`pf-agd-json-row ${nested ? 'pf-agd-json-row--nested' : ''}`} key=${k}>
+            <span class="pf-agd-json-key">${k}</span>
+            <${JsonNode} value=${v} />
+          </div>
+        `;
+      })}
+    </div>
+  `;
+}
+
+// One collapsible memory entry. Header (key + JSON badge) toggles the body, which
+// renders a structured JSON view when the value is JSON, raw text otherwise.
+function TaskMemoryEntry({ entry }) {
+  const [open, setOpen] = useState(false);
+  const { json, raw } = parseMemoryValue(entry.value);
+  const isJson = json !== undefined;
+  return html`
+    <div class="pf-agd-task-memory-entry">
+      <button class="pf-agd-task-memory-head" onClick=${(e) => { e.stopPropagation(); setOpen(o => !o); }} aria-expanded=${open}>
+        <span class="pf-agd-task-memory-caret">${open ? '▼' : '▶'}</span>
+        <code class="pf-agd-task-memory-key">${entry.key}</code>
+        ${isJson && html`<span class="pf-agd-task-memory-badge">JSON</span>`}
+      </button>
+      ${open && html`
+        <div class="pf-agd-task-memory-body">
+          ${isJson
+            ? html`<${JsonNode} value=${json} />`
+            // Non-JSON values (e.g. an agent's latest_output) are usually
+            // markdown — render them formatted via the shared safe Markdown
+            // component instead of raw text.
+            : html`<div class="pf-agd-task-memory-md"><${Markdown} text=${raw} /></div>`}
+        </div>
+      `}
+    </div>
+  `;
+}
+
 function TaskItem({ task, agentName, showToast, onRefresh }) {
   const [expanded, setExpanded] = useState(false);
   const [events, setEvents] = useState(null);
@@ -224,6 +317,8 @@ function TaskItem({ task, agentName, showToast, onRefresh }) {
   const [showOutdated, setShowOutdated] = useState(false);
   // Deliverable preview: null = not requested, {loading}|{notFound}|{value}.
   const [deliverable, setDeliverable] = useState(null);
+  // This task's memory entries: null = not requested, {loading}|{items}.
+  const [taskMemory, setTaskMemory] = useState(null);
   // Local-only "hide the title" toggle (for screen recordings). Persisted per
   // task ID in localStorage; see helpers at top of file.
   const [blurred, setBlurred] = useState(() => isTaskBlurred(task.id));
@@ -256,6 +351,43 @@ function TaskItem({ task, agentName, showToast, onRefresh }) {
     }
   }
 
+  // Fetch the memory entries that belong to this task. The canonical handle is
+  // the `task:<full-id>` tag (the runner tags every write: deliverable, live,
+  // delegated deliverable + evalctx) -- the deliverable key embeds a SHORT id so
+  // it can't be matched by key substring, which is exactly why the tag exists.
+  // Two extra fallbacks make it robust for tasks written before the tag landed:
+  // the live-status key prefix (full id) and the task's own recorded
+  // deliverableKey. Rolling/public stats (statistics.custom.*) are NOT per-task
+  // tagged, so they never appear here. Deduped by key.
+  async function fetchTaskMemory() {
+    const gaii = task.agentGaii;
+    if (!gaii) { setTaskMemory({ items: [] }); return; }
+    setTaskMemory({ loading: true });
+    try {
+      const tag = `task:${task.id}`;
+      const livePrefix = `agents.${agentName}.tasks.${task.id}.`;
+      const fetches = [
+        apiGet(`/v1/memory?agent=${encodeURIComponent(gaii)}&tags=${encodeURIComponent(tag)}&per_page=50`).catch(() => null),
+        apiGet(`/v1/memory?agent=${encodeURIComponent(gaii)}&prefix=${encodeURIComponent(livePrefix)}&per_page=20`).catch(() => null),
+      ];
+      if (task.deliverableKey) {
+        fetches.push(apiGet(`/v1/memory?agent=${encodeURIComponent(gaii)}&prefix=${encodeURIComponent(task.deliverableKey)}&per_page=5`).catch(() => null));
+      }
+      const results = await Promise.all(fetches);
+      const items = [];
+      const seen = new Set();
+      for (const resp of results) {
+        const list = resp?.data?.items || resp?.data || [];
+        for (const it of (Array.isArray(list) ? list : [])) {
+          if (it.key && !seen.has(it.key)) { seen.add(it.key); items.push(it); }
+        }
+      }
+      setTaskMemory({ items });
+    } catch {
+      setTaskMemory({ items: [] });
+    }
+  }
+
   async function fetchEvents({ silent = false } = {}) {
     if (!silent) setLoadingEvents(true);
     try {
@@ -352,6 +484,19 @@ function TaskItem({ task, agentName, showToast, onRefresh }) {
     setShowRateModal(true);
   }
 
+  async function handleTriage(e, triage) {
+    e.stopPropagation();
+    try {
+      await setTaskTriage(agentName, task.id, triage);
+      showToast(t(triage === 'kept' ? 'profile.agents.tasks.triage.kept'
+        : triage === 'archived' ? 'profile.agents.tasks.triage.archived'
+        : 'profile.agents.tasks.triage.restored'));
+      onRefresh();
+    } catch (err) {
+      showToast(err.message || t('profile.agents.tasks.triage.error'), true);
+    }
+  }
+
   async function handleSubmitRate(body) {
     setSendingRate(true);
     try {
@@ -441,6 +586,21 @@ function TaskItem({ task, agentName, showToast, onRefresh }) {
             `}
           `}
 
+          <div class="pf-agd-task-memory">
+            <button class="btn-ghost btn-sm" onClick=${(e) => { e.stopPropagation(); fetchTaskMemory(); }}>
+              ${t('profile.agents.tasks.memory.show')}
+            </button>
+            ${taskMemory && (taskMemory.loading
+              ? html`<div class="pf-agd-empty">${t('profile.loading')}</div>`
+              : taskMemory.items.length === 0
+                ? html`<div class="pf-agd-empty">${t('profile.agents.tasks.memory.none')}</div>`
+                : html`
+                  <div class="pf-agd-task-memory-list">
+                    ${taskMemory.items.map(it => html`<${TaskMemoryEntry} key=${it.key} entry=${it} />`)}
+                  </div>
+                `)}
+          </div>
+
           ${isDone && html`
             <div class="pf-agd-rate-row">
               ${rating
@@ -578,6 +738,16 @@ function TaskItem({ task, agentName, showToast, onRefresh }) {
             ${(isQueued || task.status === 'draft' || isRevisionRequested) && html`
               <button class="btn-danger btn-sm" onClick=${handleDelete}>${t('profile.agents.tasks.delete')}</button>
             `}
+            <span class="pf-agd-task-actions-spacer"></span>
+            ${task.triage !== 'kept' && html`
+              <button class="btn-ghost btn-sm" onClick=${(e) => handleTriage(e, 'kept')} title=${t('profile.agents.tasks.triage.keepHint')}>★ ${t('profile.agents.tasks.triage.keep')}</button>
+            `}
+            ${task.triage !== 'archived' && html`
+              <button class="btn-ghost btn-sm" onClick=${(e) => handleTriage(e, 'archived')} title=${t('profile.agents.tasks.triage.archiveHint')}>${t('profile.agents.tasks.triage.archive')}</button>
+            `}
+            ${task.triage && html`
+              <button class="btn-ghost btn-sm" onClick=${(e) => handleTriage(e, null)}>${t('profile.agents.tasks.triage.restore')}</button>
+            `}
           </div>
           <${ConfirmUI} />
           <${RequestChangesModal}
@@ -601,9 +771,13 @@ function TaskItem({ task, agentName, showToast, onRefresh }) {
 
 export default function AgentTasksSubtab({ agent, agentName, showToast }) {
   const [tasks, setTasks] = useState(null);
+  const [counts, setCounts] = useState({ recent: 0, keep: 0, archive: 0 });
+  const [bucket, setBucket] = useState('recent');
   const [showCreate, setShowCreate] = useState(false);
   const [error, setError] = useState(null);
-  const [filter, setFilter] = useState('all');
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [q, setQ] = useState('');
+  const [timeChip, setTimeChip] = useState('all');
   // Runner concurrency config (default 1 = serial). Saved to the agent via PATCH.
   const [maxConcurrent, setMaxConcurrent] = useState(agent?.max_concurrent_tasks ?? 1);
   const [savingConcurrency, setSavingConcurrency] = useState(false);
@@ -625,8 +799,14 @@ export default function AgentTasksSubtab({ agent, agentName, showToast }) {
 
   async function loadTasks() {
     try {
-      const resp = await listTasks(agentName);
+      const resp = await listTasks(agentName, {
+        bucket,
+        q: q.trim() || undefined,
+        updated_after: timeChipToAfter(timeChip),
+        per_page: 100,
+      });
       setTasks(resp?.data?.tasks || []);
+      setCounts(resp?.data?.counts || { recent: 0, keep: 0, archive: 0 });
       setError(null);
     } catch (err) {
       setError(err.message);
@@ -634,7 +814,11 @@ export default function AgentTasksSubtab({ agent, agentName, showToast }) {
     }
   }
 
-  useEffect(() => { loadTasks(); }, [agentName]);
+  // Refetch on agent/bucket/time change immediately; debounce text search.
+  useEffect(() => {
+    const id = setTimeout(() => loadTasks(), q ? 300 : 0);
+    return () => clearTimeout(id);
+  }, [agentName, bucket, timeChip, q]);
 
   const loadRef = useRef(loadTasks);
   loadRef.current = loadTasks;
@@ -653,24 +837,13 @@ export default function AgentTasksSubtab({ agent, agentName, showToast }) {
     return html`<div class="pf-agd-empty">${t('profile.loading')}</div>`;
   }
 
-  const filtered = filter === 'all' ? tasks : tasks.filter(task => {
-    switch (filter) {
-      case 'active': return task.status === 'active';
-      // 'revision_requested' lives under the queued filter -- the task is
-      // waiting for the agent to re-propose, which is conceptually the same
-      // "awaiting action before run" bucket the owner already monitors here.
-      case 'queued': return task.status === 'queued' || task.status === 'draft' || task.status === 'revision_requested';
-      case 'completed': return task.status === 'done';
-      case 'failed': return task.status === 'failed' || task.status === 'stalled';
-      default: return true;
-    }
-  });
+  const totalTasks = counts.recent + counts.keep + counts.archive;
 
   return html`
     <div>
       <div class="pf-agd-section-header">
         <span class="pf-agd-section-title">
-          ${t('profile.agents.tasks.title')}${tasks.length > 0 ? ` (${tasks.length})` : ''}
+          ${t('profile.agents.tasks.title')}${totalTasks > 0 ? ` (${totalTasks})` : ''}
         </span>
         <button class="btn-outline btn-sm" onClick=${() => setShowCreate(!showCreate)}>
           ${showCreate ? '-' : '+'} ${t('profile.agents.tasks.newTask')}
@@ -700,20 +873,42 @@ export default function AgentTasksSubtab({ agent, agentName, showToast }) {
 
       ${error && html`<div class="pf-agd-empty">${error}</div>`}
 
-      <div class="pf-agd-filter-bar">
-        ${TASK_FILTERS.map(f => html`
-          <button key=${f}
-                  class="pf-agd-filter-pill ${filter === f ? 'pf-agd-filter-pill--active' : ''}"
-                  onClick=${() => setFilter(f)}>
-            ${t(`profile.agents.detail.tasks.filter.${f}`)}
+      <div class="pf-agd-bucket-bar">
+        ${BUCKETS.map(b => html`
+          <button key=${b}
+                  class="pf-agd-bucket ${bucket === b ? 'pf-agd-bucket--active' : ''}"
+                  onClick=${() => setBucket(b)}>
+            ${t(`profile.agents.tasks.bucket.${b}`)} <span class="pf-agd-bucket-count">${counts[b] ?? 0}</span>
           </button>
         `)}
+        <span class="pf-agd-bucket-spacer"></span>
+        <button class="pf-agd-search-toggle ${searchOpen ? 'pf-agd-search-toggle--on' : ''}"
+                onClick=${() => setSearchOpen(o => !o)}
+                title=${t('profile.agents.tasks.search.toggle')}
+                aria-pressed=${searchOpen}>🔍</button>
       </div>
 
-      ${filtered.length > 0 ? filtered.map(task => html`
+      ${searchOpen && html`
+        <div class="pf-agd-search-bar">
+          <input class="pf-agd-search-input" type="search"
+                 placeholder=${t('profile.agents.tasks.search.placeholder')}
+                 value=${q} onInput=${e => setQ(e.target.value)} />
+          <div class="pf-agd-time-chips">
+            ${TIME_CHIPS.map(c => html`
+              <button key=${c}
+                      class="pf-agd-time-chip ${timeChip === c ? 'pf-agd-time-chip--on' : ''}"
+                      onClick=${() => setTimeChip(c)}>
+                ${t(`profile.agents.tasks.search.time.${c}`)}
+              </button>
+            `)}
+          </div>
+        </div>
+      `}
+
+      ${tasks.length > 0 ? tasks.map(task => html`
         <${TaskItem} key=${task.id} task=${task} agentName=${agentName} showToast=${showToast} onRefresh=${loadTasks} />
       `) : html`
-        <div class="pf-agd-empty">${t('profile.agents.detail.empty.tasks')}</div>
+        <div class="pf-agd-empty">${q ? t('profile.agents.tasks.search.noResults') : t(`profile.agents.tasks.bucket.empty.${bucket}`)}</div>
       `}
     </div>
   `;

package/dist/public/views/profile/calibrator-batch.js

@@ -33,6 +33,8 @@ function computeWeightedScore(dims) {
 import htm from 'htm';
 const html = htm.bind(h);
 import { t } from '/js/i18n.js';
+import { CopyButton } from '/components/CopyButton.js';
+import { copyToClipboard } from '/js/utils.js';
 import { getBatch, updateBatch, createVersion } from '/js/services/calibrator.js';
 
 
@@ -527,7 +529,7 @@ Now return the full modified instruction prompt with the fixes incorporated. Rem
     }).filter(Boolean);
 
     const text = `Here is a prompt that needs improvement:\n\n---\n${currentVersion.prompt}\n---\n\nApply these proposed fixes:\n${selectedProposals.map((p, i) => `${i + 1}. ${p}`).join('\n')}\n\nReturn ONLY the modified prompt text.`;
-    navigator.clipboard.writeText(text).then(() => showToast?.('Copied'));
+    copyToClipboard(text).then(() => showToast?.('Copied'));
   }
 
   // ── Paste handlers ──
@@ -599,10 +601,6 @@ Now return the full modified instruction prompt with the fixes incorporated. Rem
       .then(u => { setDetail(u || { ...detail, status: 'synthesized', step4_synthesis: synth }); onUpdate?.(); });
   }
 
-  function copyToClipboard(text, label) {
-    navigator.clipboard.writeText(text).then(() => showToast?.(label + ' copied'));
-  }
-
   // ── Render: Step 1 (Generation) ──
 
   function renderStep1() {
@@ -631,9 +629,7 @@ Now return the full modified instruction prompt with the fixes incorporated. Rem
               ` : ''}
               <div class="fnd-cal-run-actions">
                 ${m.step1_generation?.output ? html`
-                  <button class="btn-ghost btn-sm" onClick=${() => copyToClipboard(m.step1_generation.output, 'Output')}>
-                    ${t('profile.calibrator.copy')}
-                  </button>
+                  <${CopyButton} text=${m.step1_generation.output} label=${t('profile.calibrator.copy')} className="btn-sm" onCopied=${() => showToast?.('Output copied')} />
                 ` : ''}
                 <${PasteBack} label=${t('profile.calibrator.pasteOutput')} onSave=${text => handlePasteStep1(i, text)} />
               </div>
@@ -700,9 +696,7 @@ Now return the full modified instruction prompt with the fixes incorporated. Rem
                 ${a?.rawResponse ? html`<${CollapsiblePre} label=${t('profile.calibrator.viewRawResponse')} text=${a.rawResponse} />` : ''}
                 <div class="fnd-cal-run-actions">
                   ${a?.analysis ? html`
-                    <button class="btn-ghost btn-sm" onClick=${() => copyToClipboard(typeof a.analysis === 'string' ? a.analysis : JSON.stringify(a.analysis, null, 2), 'Analysis')}>
-                      ${t('profile.calibrator.copy')}
-                    </button>
+                    <${CopyButton} text=${typeof a.analysis === 'string' ? a.analysis : JSON.stringify(a.analysis, null, 2)} label=${t('profile.calibrator.copy')} className="btn-sm" onCopied=${() => showToast?.('Analysis copied')} />
                   ` : ''}
                   <${PasteBack} label=${t('profile.calibrator.pasteAnalysis')} onSave=${text => handlePasteStep2(modelIndex, text)} />
                 </div>

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

@@ -18,6 +18,7 @@ import htm from 'htm';
 const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { apiGet, apiDelete } from '/js/api.js';
+import { CopyButton } from '/components/CopyButton.js';
 import LlmConfigEditor from '/views/profile/calibrator-llm-editor.js';
 import CalibrationChart from '/views/profile/calibrator-chart.js';
 import BatchCard from '/views/profile/calibrator-batch.js';
@@ -308,10 +309,6 @@ function ProjectDetailView({ projectId, onBack, showToast }) {
     }
   }
 
-  function copyToClipboard(text, label) {
-    navigator.clipboard.writeText(text).then(() => showToast?.(label + ' copied'));
-  }
-
   async function handleArchive() {
     await handleUpdateProject({ status: 'archived' });
     onBack();
@@ -388,14 +385,14 @@ function ProjectDetailView({ projectId, onBack, showToast }) {
               <div class="fnd-cal-editor-label">${t('profile.calibrator.prompt')} (v${selectedVersion || 0})</div>
               <textarea value=${prompt} onInput=${e => setPrompt(e.target.value)} disabled=${isReadOnly} />
               <div class="fnd-cal-editor-actions">
-                <button class="btn-ghost btn-sm" onClick=${() => copyToClipboard(prompt, 'Prompt')}>${t('profile.calibrator.copy')}</button>
+                <${CopyButton} text=${prompt} label=${t('profile.calibrator.copy')} className="btn-sm" onCopied=${() => showToast?.('Prompt copied')} />
               </div>
             </div>
             <div class="fnd-cal-editor-panel">
               <div class="fnd-cal-editor-label">${t('profile.calibrator.targetOutput')}</div>
               <textarea value=${targetOutput} onInput=${e => setTargetOutput(e.target.value)} disabled=${isReadOnly} />
               <div class="fnd-cal-editor-actions">
-                <button class="btn-ghost btn-sm" onClick=${() => copyToClipboard(targetOutput, 'Target')}>${t('profile.calibrator.copy')}</button>
+                <${CopyButton} text=${targetOutput} label=${t('profile.calibrator.copy')} className="btn-sm" onCopied=${() => showToast?.('Target copied')} />
               </div>
             </div>
           </div>
@@ -440,9 +437,7 @@ function ProjectDetailView({ projectId, onBack, showToast }) {
                     <button class="btn-ghost btn-sm" onClick=${() => handleResetTemplate(tc.field)}>
                       ${t('profile.calibrator.resetTemplate')}
                     </button>
-                    <button class="btn-ghost btn-sm" onClick=${() => copyToClipboard(templates[tc.field], 'Template')}>
-                      ${t('profile.calibrator.copy')}
-                    </button>
+                    <${CopyButton} text=${templates[tc.field]} label=${t('profile.calibrator.copy')} className="btn-sm" onCopied=${() => showToast?.('Template copied')} />
                   </div>
                 </div>
               </details>

package/dist/public/views/profile/chat-sessions-tab.js

@@ -6,14 +6,18 @@
  * @version-history
  *   v1.0.0 — 2026-03-16 — Initial chat sessions tab
  *   v1.1.0 — 2026-03-17 — Replace inline styles with CSS classes; fix fallback strings
+ *   v1.2.0 — 2026-06-02 — Component unification (#1): "Copy GAII" uses canonical
+ *     <CopyButton> (toast preserved); prompt-copy routed through shared copyToClipboard
+ *     (insecure-context fallback) instead of raw navigator.clipboard.
  */
 import { h } from 'preact';
 import { useState, useEffect, useCallback, useRef } from 'preact/hooks';
 import htm from 'htm';
 const html = htm.bind(h);
 import { t } from '/js/i18n.js';
-import { escHtml, timeAgo } from '/js/utils.js';
+import { escHtml, timeAgo, copyToClipboard } from '/js/utils.js';
 import { Spinner } from './shared.js';
+import { CopyButton } from '/components/CopyButton.js';
 import { useConfirm } from '/components/Modal.js';
 import { listAgents, deleteAgent } from '/js/services/agents.js';
 import { apiGet } from '/js/api.js';
@@ -75,7 +79,7 @@ export default function ChatSessionsTab({ session, showToast, onStats }) {
       const resp = await apiGet(endpoint);
       const text = resp?.data?.prompt;
       if (text) {
-        await navigator.clipboard.writeText(text);
+        await copyToClipboard(text);
         showToast(t('profile.chatSessions.promptCopied'));
       } else {
         showToast(t('profile.chatSessions.promptError'));
@@ -165,9 +169,9 @@ export default function ChatSessionsTab({ session, showToast, onStats }) {
                   </div>
 
                   <div class="card-actions flex-actions">
-                    <button class="btn-outline btn-sm" onClick=${(e) => { e.stopPropagation(); navigator.clipboard.writeText(s.gaii || s.name); showToast('GAII copied'); }}>
-                      Copy GAII
-                    </button>
+                    <span onClick=${(e) => e.stopPropagation()}>
+                      <${CopyButton} text=${s.gaii || s.name} label=${t('profile.agents.copyGaii')} className="btn-outline btn-sm" onCopied=${() => showToast('GAII copied')} />
+                    </span>
                     <button class="btn-danger-solid btn-sm" onClick=${(e) => { e.stopPropagation(); handleDelete(s); }}
                       disabled=${deleting === s.name}>
                       ${deleting === s.name ? '...' : t('profile.chatSessions.remove')}

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

@@ -130,7 +130,7 @@ export default function EmailTab({ session, showToast }) {
           <p class="email-sent-text">${t('profile.email.codeSent')}</p>
           <div class="email-form-group">
             <label class="email-form-label">${t('profile.email.enterCode')}</label>
-            <input class="pf-input input-verification-code" type="text" maxlength="6" placeholder="123456"
+            <input class="input-field input-verification-code" type="text" maxlength="6" placeholder="123456"
               value=${code} onInput=${e => setCode(e.target.value)} />
           </div>
           <button class="btn-primary" onClick=${handleVerifyCode} disabled=${verifying}>
@@ -147,7 +147,7 @@ export default function EmailTab({ session, showToast }) {
           ` : null}
           <div class="email-form-group">
             <label class="email-form-label">${t('profile.email.enterEmail')}</label>
-            <input class="pf-input" type="email" placeholder="you@example.com"
+            <input class="input-field" type="email" placeholder="you@example.com"
               value=${email} onInput=${e => setEmail(e.target.value)} />
           </div>
           <button class="btn-primary" onClick=${handleSendCode} disabled=${sending}>