aimeat 1.16.2 → 1.18.0

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

@@ -10,6 +10,8 @@
  *   v1.3.0 -- 2026-05-21 -- Shorten agent prompt to delegate to tier1; add Download/Copy Instructions buttons
  *   v1.4.0 -- 2026-05-21 -- Add sub-tab navigation (Tasks, Directives) in expanded agent detail view
  *   v1.5.0 -- 2026-05-22 -- Add Capabilities sub-tab with technical/domain skill display
+ *   v1.6.0 -- 2026-06-02 -- Component unification (#2): scope modal uses the canonical
+ *     <Modal> component (className="scope-modal" preserves width; adds Escape/✕ close)
  *   v1.6.0 -- 2026-05-22 -- Add Activity sub-tab with stats, chart, scheduled jobs, event log
  *   v1.7.0 -- 2026-05-22 -- Add Services and Messages sub-tabs
  *   v2.1.0 -- 2026-05-24 -- Fix: scroll-to on board click, agent count badge in header
@@ -29,22 +31,28 @@
  *   v3.2.0 -- 2026-05-29 -- Tag filter bar + group-by toggle (none / tag / mode)
  *   v3.3.0 -- 2026-05-29 -- Add "Connect a task-runner" collapsible with CrewAI-shaped paste prompt
  *   v3.4.0 -- 2026-05-31 -- Drag-to-reorder agent bars (per-browser localStorage order, ungrouped/unfiltered list only) + pop-out button opening an agent in its own window (/v1/profile?solo=)
+ *   v3.5.0 -- 2026-06-02 -- Component unification: replace 4 bespoke copy-prompt buttons
+ *     (connect command, MCP onboarding, manual agent prompt, task-runner prompt) with the
+ *     canonical <CopyButton> (className="copy-prompt-btn" preserves appearance); removed the
+ *     now-dead copiedAction state + markCopied helper.
  */
 import { h } from 'preact';
 import { useState, useEffect, useRef } from 'preact/hooks';
 import htm from 'htm';
 const html = htm.bind(h);
 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';
 import { Spinner } from './shared.js';
 import { apiGet, apiPost, apiPatch } from '/js/api.js';
 import { listAgents, updateAgentScopes, deleteAgent } from '/js/services/agents.js';
 import { getNodeUrl } from '/js/services/auth.js';
-import { useConfirm } from '/components/Modal.js';
+import { Modal, useConfirm } from '/components/Modal.js';
 import SharedBoard from './agents/shared-board.js';
 import AgentCard from './agents/agent-card.js';
 import { getOnboarding } from '/js/services/agent-integration.js';
 import { listTasks } from '/js/services/agent-tasks.js';
+import { listMessages } from '/js/services/agent-messages.js';
 
 // === Scope Management Constants ===
 const SCOPE_DOMAINS = [
@@ -58,6 +66,12 @@ const SCOPE_DOMAINS = [
   { key: 'catalogue', permissions: ['read'] },
   { key: 'generator', permissions: ['read', 'write', 'execute'] },
   { key: 'task', permissions: ['read', 'write', 'manage'] },
+  // cortex:write — install/activate/deactivate/delete cortex libraries (browser-side UI)
+  // ext:write    — activate/deactivate/delete extensions, manage instances (server-side WASM)
+  // Note: extension INSTALL is requireAuth-only at the route (agents can push code that stays
+  // inert until ext:write activates it). Cortex INSTALL requires cortex:write.
+  { key: 'cortex',    permissions: ['write'] },
+  { key: 'ext',       permissions: ['write'] },
 ];
 
 const SCOPE_TEMPLATES = {
@@ -359,6 +373,47 @@ function saveAgentOrder(owner, names) {
   try { localStorage.setItem(ORDER_KEY_PREFIX + owner, JSON.stringify(names)); }
   catch { /* ignore quota/availability errors */ }
 }
+
+// ── Per-browser "last seen per tab" state (localStorage) ──
+// Drives the per-agent change badges: how many tasks / messages / memory
+// entries have updated since the owner last opened that tab. Per-browser, keyed
+// by owner — same rationale as the agent ordering above (no server round-trip;
+// "what's new since I looked HERE" is inherently a per-device affordance).
+// Shape: { [agentName]: { tasks: iso, messages: iso, memory: iso } }
+// The three keys map to the Tasks, Messages and Memory (data-access) tabs.
+const SEEN_KEY_PREFIX = 'aimeat-agent-seen:';
+function loadSeen(owner) {
+  if (!owner) return {};
+  try { return JSON.parse(localStorage.getItem(SEEN_KEY_PREFIX + owner) || '{}') || {}; }
+  catch { return {}; }
+}
+function saveSeen(owner, data) {
+  if (!owner) return;
+  try { localStorage.setItem(SEEN_KEY_PREFIX + owner, JSON.stringify(data)); }
+  catch { /* ignore quota/availability errors */ }
+}
+// Stamp the given agent+tab as seen-now and persist. Read-modify-write against
+// the freshest localStorage so a concurrent loadData() seed doesn't clobber it.
+function markTabSeen(owner, agentName, tab) {
+  if (!owner || !agentName || !tab) return;
+  const seen = loadSeen(owner);
+  (seen[agentName] ||= {})[tab] = new Date().toISOString();
+  saveSeen(owner, seen);
+}
+// Count items whose newest available timestamp (first present of `fields`) is
+// strictly newer than `since`. `since` falsy → 0 (the caller seeds a baseline
+// on first observation, so an agent's whole history is never dumped as "new").
+function countNewer(items, since, fields) {
+  if (!Array.isArray(items) || !since) return 0;
+  const sinceMs = new Date(since).getTime();
+  let n = 0;
+  for (const it of items) {
+    let ts = null;
+    for (const f of fields) { if (it && it[f]) { ts = it[f]; break; } }
+    if (ts && new Date(ts).getTime() > sinceMs) n++;
+  }
+  return n;
+}
 // Effective ordering: agents named in the saved order first (in that order),
 // then any agents not yet ordered (e.g. newly connected) in their API order.
 function effectiveOrderedNames(agents, order) {
@@ -382,7 +437,6 @@ export default function AgentsTab({ session, showToast, onStats }) {
   const { confirm, ConfirmUI } = useConfirm();
   const [agents, setAgents] = useState(null);
   const [onboardings, setOnboardings] = useState({});
-  const [copiedAction, setCopiedAction] = useState(null);
   const [platExpand, setPlatExpand] = useState(false);
   const [activePlat, setActivePlat] = useState('windows');
   const [scopesModal, setScopesModal] = useState(null);
@@ -395,6 +449,10 @@ export default function AgentsTab({ session, showToast, onStats }) {
   const [taskRunnerExpanded, setTaskRunnerExpanded] = useState(false);
   const [taskRunnerName, setTaskRunnerName] = useState('');
   const [taskStatsMap, setTaskStatsMap] = useState({});
+  // Per-agent unseen-change counts { name: { tasks, messages, memory } } driving
+  // the collapsed mini-badge + per-tab number badges. Computed in loadData()
+  // from the localStorage "last seen per tab" baseline (see loadSeen/countNewer).
+  const [changesMap, setChangesMap] = useState({});
   const [tagFilter, setTagFilter] = useState(new Set());
   const [groupBy, setGroupBy] = useState('none'); // 'none' | 'tag' | 'mode'
   // Per-browser drag-to-reorder of the agent bars (localStorage-backed).
@@ -430,9 +488,17 @@ export default function AgentsTab({ session, showToast, onStats }) {
     onDragEnd: () => { draggedName.current = null; setDraggingName(null); },
   };
 
-  const markCopied = (action) => {
-    setCopiedAction(action);
-    setTimeout(() => setCopiedAction(current => current === action ? null : current), 2000);
+  // Owner opened a tab on an agent → stamp it seen and clear that badge now.
+  // The next loadData() recomputes from the same baseline, keeping it at 0
+  // until a new change actually arrives.
+  const handleTabSeen = (agentName, tab) => {
+    if (!session) return;
+    markTabSeen(session.owner, agentName, tab);
+    setChangesMap(prev => {
+      const cur = prev[agentName];
+      if (!cur || !cur[tab]) return prev;
+      return { ...prev, [agentName]: { ...cur, [tab]: 0 } };
+    });
   };
 
   useEffect(() => {
@@ -468,19 +534,56 @@ export default function AgentsTab({ session, showToast, onStats }) {
       }));
       setOnboardings(obMap);
       const tsMap = {};
+      const seen = loadSeen(session.owner);
+      let seenSeeded = false;
+      const chMap = {};
       await Promise.all(list.map(async (a) => {
         try {
-          const [doneResp, activeResp] = await Promise.all([
+          const [doneResp, activeResp, msgResp, memResp] = await Promise.all([
             listTasks(a.name, { status: 'done', per_page: 100 }),
             listTasks(a.name, { status: 'active', per_page: 100 }),
+            listMessages(a.name, { perPage: 100 }).catch(() => null),
+            apiGet(`/v1/memory?prefix=&per_page=100&agent=${encodeURIComponent(a.gaii || a.name)}`).catch(() => null),
           ]);
           const today = new Date().toISOString().slice(0, 10);
-          const doneToday = (doneResp?.data?.tasks || []).filter(tk => tk.completedAt?.startsWith(today)).length;
-          const activeCount = (activeResp?.data?.tasks || []).length;
-          tsMap[a.name] = { done: doneToday, active: activeCount };
-        } catch { tsMap[a.name] = null; }
+          const doneTasks = doneResp?.data?.tasks || [];
+          const activeTasks = activeResp?.data?.tasks || [];
+          const doneToday = doneTasks.filter(tk => tk.completedAt?.startsWith(today)).length;
+          tsMap[a.name] = { done: doneToday, active: activeTasks.length };
+
+          // Per-tab unseen-change counts. First observation of a tab seeds its
+          // baseline to "now" (count 0) so an agent's whole history is never
+          // dumped as new; only changes after that point raise the badge.
+          const agentSeen = seen[a.name] || (seen[a.name] = {});
+          const nowIso = new Date().toISOString();
+          const ch = {};
+          for (const [tab, items, fields] of [
+            ['tasks', [...doneTasks, ...activeTasks], ['updatedAt', 'completedAt', 'createdAt']],
+            // Only count agent→owner messages as unread; the owner's own
+            // inbound messages are not "new" to them.
+            ['messages', (msgResp?.data?.messages || []).filter(m => m.direction !== 'inbound'), ['createdAt', 'created_at']],
+            ['memory', (memResp?.data?.items || memResp?.data || []), ['updated_at', 'updatedAt', 'created_at', 'createdAt']],
+          ]) {
+            if (agentSeen[tab] === undefined) { agentSeen[tab] = nowIso; seenSeeded = true; ch[tab] = 0; }
+            else ch[tab] = countNewer(items, agentSeen[tab], fields);
+          }
+          chMap[a.name] = ch;
+        } catch { tsMap[a.name] = null; chMap[a.name] = null; }
       }));
       setTaskStatsMap(tsMap);
+      // Persist any freshly-seeded baselines. Merge against the latest storage
+      // so a tab the user opened mid-fetch (markTabSeen) is not overwritten.
+      if (seenSeeded) {
+        const fresh = loadSeen(session.owner);
+        for (const name of Object.keys(seen)) {
+          const merged = fresh[name] || (fresh[name] = {});
+          for (const tab of Object.keys(seen[name])) {
+            if (merged[tab] === undefined) merged[tab] = seen[name][tab];
+          }
+        }
+        saveSeen(session.owner, fresh);
+      }
+      setChangesMap(chMap);
     } catch { setAgents([]); }
   }
 
@@ -643,11 +746,11 @@ export default function AgentsTab({ session, showToast, onStats }) {
 
         <p class="mb-half text-bold">${t('profile.agents.cliInstall')}</p>
         <div class="agent-prompt-box"><code>npx aimeat connect --url ${getNodeUrl()} --owner ${session.owner}</code></div>
-        <button class="copy-prompt-btn" onClick=${() => {
-          copyToClipboard(`npx aimeat connect --url ${getNodeUrl()} --owner ${session.owner}`).then(() => {
-            markCopied('connect-command');
-          });
-        }}>${copiedAction === 'connect-command' ? '\u2705 ' + t('profile.agents.copied') : t('profile.agents.copyCommand')}</button>
+        <${CopyButton}
+          text=${`npx aimeat connect --url ${getNodeUrl()} --owner ${session.owner}`}
+          className="copy-prompt-btn"
+          label=${t('profile.agents.copyCommand')}
+          copiedLabel=${'\u2705 ' + t('profile.agents.copied')} />
 
         <p class="mt-1 mb-half text-bold">${t('profile.agents.cliServe')}</p>
         <div class="agent-prompt-box"><code>npx aimeat connect serve</code></div>
@@ -657,11 +760,11 @@ export default function AgentsTab({ session, showToast, onStats }) {
         <p class="mt-1 mb-half text-bold">${t('profile.agents.agentInstructionTitle')}</p>
         <p class="text-caption mb-half">${t('profile.agents.agentInstructionDesc')}</p>
         <div class="agent-prompt-box">${buildMcpOnboardingPrompt()}</div>
-        <button class="copy-prompt-btn" onClick=${() => {
-          copyToClipboard(buildMcpOnboardingPrompt()).then(() => {
-            markCopied('agent-instruction');
-          });
-        }}>${copiedAction === 'agent-instruction' ? '\u2705 ' + t('profile.agents.copied') : t('profile.agents.copyAgentInstruction')}</button>
+        <${CopyButton}
+          text=${buildMcpOnboardingPrompt()}
+          className="copy-prompt-btn"
+          label=${t('profile.agents.copyAgentInstruction')}
+          copiedLabel=${'\u2705 ' + t('profile.agents.copied')} />
 
         <div class="pf-agent-divider mt-1">
           <button class="expand-btn" onClick=${() => setPlatExpand(!platExpand)}>
@@ -690,11 +793,11 @@ export default function AgentsTab({ session, showToast, onStats }) {
             <div class="mt-half">
               <p class="text-caption mb-half">${t('profile.agents.pasteDesc')}</p>
               <div class="agent-prompt-box">${buildAgentPrompt(session)}</div>
-              <button class="copy-prompt-btn" onClick=${() => {
-                copyToClipboard(buildAgentPrompt(session)).then(() => {
-                  markCopied('manual-agent-prompt');
-                });
-              }}>${copiedAction === 'manual-agent-prompt' ? '\u2705 ' + t('profile.agents.copied') : t('profile.agents.copyPrompt')}</button>
+              <${CopyButton}
+                text=${buildAgentPrompt(session)}
+                className="copy-prompt-btn"
+                label=${t('profile.agents.copyPrompt')}
+                copiedLabel=${'\u2705 ' + t('profile.agents.copied')} />
             </div>
           `}
         </div>
@@ -718,11 +821,11 @@ export default function AgentsTab({ session, showToast, onStats }) {
                        onInput=${(e) => setTaskRunnerName(e.target.value)} />
               </div>
               <div class="agent-prompt-box">${buildTaskRunnerPrompt(session, taskRunnerName)}</div>
-              <button class="copy-prompt-btn" onClick=${() => {
-                copyToClipboard(buildTaskRunnerPrompt(session, taskRunnerName)).then(() => {
-                  markCopied('task-runner-prompt');
-                });
-              }}>${copiedAction === 'task-runner-prompt' ? '\u2705 ' + t('profile.agents.copied') : t('profile.agents.taskRunner.copyButton')}</button>
+              <${CopyButton}
+                text=${buildTaskRunnerPrompt(session, taskRunnerName)}
+                className="copy-prompt-btn"
+                label=${t('profile.agents.taskRunner.copyButton')}
+                copiedLabel=${'\u2705 ' + t('profile.agents.copied')} />
             </div>
           `}
         </div>
@@ -750,6 +853,8 @@ export default function AgentsTab({ session, showToast, onStats }) {
           groupBy,
           onboardings,
           taskStatsMap,
+          changesMap,
+          onTabSeen: handleTabSeen,
           expandedAgent,
           toggleAgent,
           session,
@@ -825,7 +930,7 @@ function renderFilterBar(agents, tagFilter, setTagFilter, groupBy, setGroupBy) {
   `;
 }
 
-function renderAgentGroups({ agents, tagFilter, groupBy, onboardings, taskStatsMap, expandedAgent, toggleAgent, session, showToast, setScopesModal, handleDeleteAgent, toggleFederate, onPopOut, dnd, agentOrder }) {
+function renderAgentGroups({ agents, tagFilter, groupBy, onboardings, taskStatsMap, changesMap, onTabSeen, expandedAgent, toggleAgent, session, showToast, setScopesModal, handleDeleteAgent, toggleFederate, onPopOut, dnd, agentOrder }) {
   // Tag filter: agent must have ALL selected tags (intersection)
   const filtered = tagFilter.size === 0
     ? agents
@@ -848,6 +953,8 @@ function renderAgentGroups({ agents, tagFilter, groupBy, onboardings, taskStatsM
       session=${session}
       showToast=${showToast}
       allAgents=${agents}
+      changes=${changesMap?.[a.name] || null}
+      onTabSeen=${onTabSeen}
       onScopesClick=${(agent) => setScopesModal(agent)}
       onDeleteClick=${handleDeleteAgent}
       onFederateToggle=${toggleFederate}
@@ -1014,9 +1121,7 @@ function ScopesModal({ agent, session, onSave, onCancel }) {
   const isReadOnly = !(session.roles?.includes('owner') || session.roles?.includes('operator'));
 
   return html`
-    <div class="modal-overlay" onClick=${e => { if (e.target.className.includes('modal-overlay')) onCancel(); }}>
-      <div class="modal scope-modal">
-        <h3>${t('profile.agents.scopeUi.scopeProfile')}: ${escHtml(agent.display_name || agent.name)}</h3>
+    <${Modal} open=${true} onClose=${onCancel} className="scope-modal" title=${`${t('profile.agents.scopeUi.scopeProfile')}: ${agent.display_name || agent.name}`}>
         <div class="scope-agent-info">${escHtml(agent.gaii || '')}</div>
 
         ${isReadOnly ? html`
@@ -1083,6 +1188,5 @@ function ScopesModal({ agent, session, onSave, onCancel }) {
             <button class="btn-outline" onClick=${onCancel}>${t('profile.agents.scopeUi.cancel')}</button>
           </div>
         `}
-      </div>
-    </div>`;
+    <//>`;
 }