aimeat 1.16.2 → 1.18.0

package/dist/public/views/portal.js

@@ -1,13 +1,19 @@
 /**
- * Portal (Genesis 001) — View Module
- * Main landing page with 3D canvas, live feed, mega-prompts, and expandable world.
+ * @file portal.js
+ * @description Portal (Genesis 001) view module — main landing page with 3D
+ *   canvas, live feed, mega-prompts, and expandable world.
+ * @version-history
+ *   v1.1.0 — 2026-06-02 — Component unification (#11): live-feed header dot uses
+ *     canonical <StatusDot status="live" /> instead of bespoke .live-dot.
  */
 import { h } from 'preact';
 import { useState, useEffect, useRef, useCallback } 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 as BaseCopyButton } from '/components/CopyButton.js';
 import { useViewCSS } from '/components/useViewCSS.js';
+import { StatusDot } from '/components/StatusDot.js';
 
 const html = htm.bind(h);
 const NODE_URL = window.location.origin;
@@ -990,7 +996,7 @@ function OnelinersFeed({ locale }) {
   return html`
     <div class="content-group">
       <div class="oneliners-header">
-        <div class="live-dot"></div>
+        <${StatusDot} status="live" />
         <span class="oneliners-label">${t('portal.oneliners.title')}</span>
       </div>
       <section class="provocation">
@@ -1016,21 +1022,10 @@ function OnelinersFeed({ locale }) {
 /* ══════════════════════════════════════════════
    COPY BUTTON COMPONENT
    ══════════════════════════════════════════════ */
+// Thin wrapper over the canonical CopyButton (aliased to avoid the name clash) \u2014
+// keeps the .copy-btn styling + the "<copied> \u2714" confirmed label.
 function CopyButton({ text, label, copiedLabel }) {
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = useCallback(() => {
-    copyToClipboard(text).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    });
-  }, [text]);
-
-  return html`
-    <button class="copy-btn ${copied ? 'copied' : ''}" type="button" onClick=${handleCopy}>
-      ${copied ? (copiedLabel || t('portal.prompt.copied')) + ' \u2714' : label}
-    </button>
-  `;
+  return html`<${BaseCopyButton} text=${text} label=${label} copiedLabel=${(copiedLabel || t('portal.prompt.copied')) + ' \u2714'} className="copy-btn" />`;
 }
 
 /* ══════════════════════════════════════════════
@@ -1120,9 +1115,9 @@ function UserWorldAccordion({ navigate }) {
           </div>
           <div class="user-world-grid">
             ${statItems.map(([key, val]) => html`
-              <div class="user-stat" key=${key}>
-                <div class="user-stat-label">${t('portal.userWorld.stats.' + key)}</div>
-                <div class="user-stat-value">${val}</div>
+              <div class="stat-card" key=${key}>
+                <div class="stat-card-label">${t('portal.userWorld.stats.' + key)}</div>
+                <div class="stat-card-value">${val}</div>
               </div>
             `)}
           </div>

package/dist/public/views/portfolio.js

@@ -1,11 +1,19 @@
+/**
+ * @file portfolio.js
+ * @description Portfolio view — builder (select content, generate AI prompt,
+ *   upload HTML) and public viewer (sandboxed iframe render).
+ * @version-history
+ *   v1.1.0 — 2026-06-02 — Migrate bespoke prompt-copy button to canonical CopyButton component
+ */
 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, copyToClipboard, handleImgError } from '/js/utils.js';
+import { escHtml, handleImgError } from '/js/utils.js';
 import { apiGet, apiPut } from '/js/api.js';
 import TagCloud from '/js/components/tag-cloud.js';
+import { CopyButton } from '/components/CopyButton.js';
 
 const NODE_URL = typeof window !== 'undefined' ? window.location.origin : '';
 
@@ -238,7 +246,6 @@ function PortfolioBuilder({ session, navigate }) {
 
   // Prompt
   const [generatedPrompt, setGeneratedPrompt] = useState('');
-  const [promptCopied, setPromptCopied] = useState(false);
 
   // Upload
   const [uploading, setUploading] = useState(false);
@@ -313,13 +320,6 @@ function PortfolioBuilder({ session, navigate }) {
     });
   };
 
-  // Copy prompt
-  const handleCopyPrompt = async () => {
-    await copyToClipboard(generatedPrompt);
-    setPromptCopied(true);
-    setTimeout(() => setPromptCopied(false), 2000);
-  };
-
   // Download prompt as .txt
   const handleDownloadPrompt = () => {
     const blob = new Blob([generatedPrompt], { type: 'text/plain' });
@@ -614,9 +614,8 @@ function PortfolioBuilder({ session, navigate }) {
           ${generatedPrompt && html`
             <div class="portfolio-prompt-output">${generatedPrompt}</div>
             <div class="portfolio-prompt-actions">
-              <button class="btn btn-primary" onClick=${handleCopyPrompt}>
-                ${promptCopied ? t('portfolio.builder.promptCopied') : t('portfolio.builder.copyPrompt')}
-              </button>
+              <${CopyButton} text=${generatedPrompt} className="btn-primary"
+                label=${t('portfolio.builder.copyPrompt')} copiedLabel=${t('portfolio.builder.promptCopied')} />
               <button class="btn btn-ghost" onClick=${handleDownloadPrompt}>
                 ${t('portfolio.builder.downloadPrompt')}
               </button>

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

@@ -22,6 +22,7 @@ import { escHtml, copyToClipboard } from '/js/utils.js';
 import { getNodeUrl } from '/js/services/auth.js';
 import { apiGet, apiPost, apiDelete } from '/js/api.js';
 import { useConfirm } from '/components/Modal.js';
+import { CopyButton } from '/components/CopyButton.js';
 import * as groupsApi from '/js/services/sharing-groups.js';
 import { getOwnerDefaults, upsertOwnerDefaults } from '/js/services/agent-directives.js';
 
@@ -532,6 +533,247 @@ function AgentDefaultsSection({ showToast }) {
   `;
 }
 
+/* ═══════════════════════════════════════════════════════════════════
+   Agent Access Tokens Section
+   ═══════════════════════════════════════════════════════════════════ */
+
+// Mirrors the agent scope domains (agents-tab.js) — the same list agents are granted from.
+const PAT_SCOPE_DOMAINS = [
+  { key: 'memory', permissions: ['read', 'write', 'delete'] },
+  { key: 'work', permissions: ['request', 'read', 'accept', 'publish'] },
+  { key: 'social', permissions: ['read', 'write'] },
+  { key: 'wallet', permissions: ['read'] },
+  { key: 'consent', permissions: ['manage'] },
+  { key: 'catalogue', permissions: ['read'] },
+  { key: 'generator', permissions: ['read', 'write', 'execute'] },
+  { key: 'task', permissions: ['read', 'write', 'manage'] },
+  { key: 'cortex', permissions: ['write'] },
+  { key: 'ext', permissions: ['write'] },
+];
+
+function buildPatAgentPrompt(tokenData) {
+  const url = (typeof window !== 'undefined' ? window.location.origin : '');
+  const level = tokenData.grant_operator ? 'operator (full node control)'
+    : tokenData.grant_owner ? 'owner (acts as me)'
+    : `scoped agent (${(tokenData.scopes || []).join(', ') || 'no scopes'})`;
+  return `I'm giving you an AIMEAT access token so you can log in to my node (${url}) as ${level} and check that a web app works.
+
+Use it by adding this HTTP header to your requests (and, for browser testing, set it as an extra header in your browser automation so every request the page makes carries it):
+
+  Authorization: Bearer ${tokenData.token}
+
+The server recognizes the token and treats every request as if I'm logged in — no extra login step. Open the app, click through it, read/write via it, and confirm it behaves correctly. Tell me what you find.`;
+}
+
+function AccessTokensSection({ session, showToast }) {
+  const { confirm, ConfirmUI } = useConfirm();
+  const isOperator = (session.roles || []).includes('operator');
+
+  const [tokens, setTokens] = useState(null);
+  const [showCreate, setShowCreate] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [created, setCreated] = useState(null); // { token, prompt }
+
+  // Create form
+  const [label, setLabel] = useState('');
+  const [selScopes, setSelScopes] = useState({});
+  const [grantOwner, setGrantOwner] = useState(false);
+  const [grantOperator, setGrantOperator] = useState(false);
+  const [readOwnerData, setReadOwnerData] = useState(false);
+  const [expiry, setExpiry] = useState('');
+
+  const fullLevel = grantOwner || grantOperator;
+
+  const load = useCallback(async () => {
+    try { const r = await apiGet('/v1/access/tokens'); setTokens(r.data?.tokens || []); }
+    catch { setTokens([]); }
+  }, []);
+  useEffect(() => { load(); }, [load]);
+
+  const liveRef = useRef(load);
+  liveRef.current = load;
+  useEffect(() => {
+    const handler = () => liveRef.current();
+    window.addEventListener('aimeat-live-update', handler);
+    return () => window.removeEventListener('aimeat-live-update', handler);
+  }, []);
+
+  const resetForm = () => {
+    setShowCreate(false); setLabel(''); setSelScopes({});
+    setGrantOwner(false); setGrantOperator(false); setReadOwnerData(false); setExpiry('');
+  };
+
+  const toggleScope = (s) => setSelScopes(prev => ({ ...prev, [s]: !prev[s] }));
+
+  const handleCreate = useCallback(async () => {
+    if (!label.trim()) { showToast(t('profile.access.patLabelRequired') || 'Give the token a name'); return; }
+    const scopes = fullLevel ? [] : Object.keys(selScopes).filter(k => selScopes[k]);
+    if (!fullLevel && scopes.length === 0) {
+      showToast(t('profile.access.patScopeRequired') || 'Select at least one scope, or Full / Operator');
+      return;
+    }
+    setCreating(true);
+    try {
+      const body = {
+        label: label.trim(), scopes,
+        grant_owner: grantOwner, grant_operator: grantOperator, read_owner_data: readOwnerData,
+      };
+      if (expiry) body.expires_in = parseInt(expiry, 10);
+      const r = await apiPost('/v1/access/tokens', body);
+      const data = r.data;
+      setCreated({ token: data.token, prompt: buildPatAgentPrompt(data) });
+      resetForm();
+      load();
+    } catch (e) {
+      showToast(e.message || (t('profile.access.patCreateError') || 'Failed to create token'));
+    } finally { setCreating(false); }
+  }, [label, fullLevel, selScopes, grantOwner, grantOperator, readOwnerData, expiry, showToast, load]);
+
+  const handleRevoke = useCallback((id, lbl) => {
+    confirm(
+      (t('profile.access.patConfirmRevoke') || 'Revoke token "{name}"? Agents using it lose access immediately.').replace('{name}', lbl),
+      async () => {
+        try {
+          await apiDelete('/v1/access/tokens/' + id);
+          showToast(t('profile.access.patRevoked') || 'Token revoked');
+          load();
+        } catch (e) { showToast(e.message); }
+      },
+      { danger: true },
+    );
+  }, [confirm, showToast, load]);
+
+  const levelBadge = (tok) => {
+    if (tok.grant_operator) return html`<span class="badge badge-danger">${t('profile.access.patOperator') || 'Operator'}</span>`;
+    if (tok.grant_owner) return html`<span class="badge badge-warn">${t('profile.access.patFullOwner') || 'Full owner'}</span>`;
+    return html`<span class="badge badge-info">${(tok.scopes || []).length} ${t('profile.access.patScopes') || 'scopes'}</span>`;
+  };
+
+  return html`
+    <h3 class="card-h3 mt-section">\u{1F511} ${t('profile.access.patTitle') || 'Agent Access Tokens'}</h3>
+    <div class="section-desc">${t('profile.access.patDesc') || 'Create a revocable token an agent can use (as a Bearer header) to log in and test your apps. One token can be shared across all your agents.'}</div>
+
+    ${created && html`
+      <div class="card access-card-warn">
+        <div class="card-title">${t('profile.access.patCreatedTitle') || 'Token created — copy it now'}</div>
+        <div class="access-warn-text">⚠ ${t('profile.access.patShownOnce') || 'This token is shown only once. Store it now; you cannot see it again.'}</div>
+        <div class="mem-item">
+          <div class="access-mono access-pat-token">${escHtml(created.token)}</div>
+          <${CopyButton} text=${created.token} className="btn-sm"
+            onCopied=${() => showToast(t('profile.access.patCopied') || 'Token copied')} />
+        </div>
+        <div class="mem-item access-pat-prompt-row">
+          <span class="mem-key">${t('profile.access.patAgentPrompt') || 'Ready-made agent prompt'}</span>
+          <${CopyButton} text=${created.prompt} className="btn-sm"
+            onCopied=${() => showToast(t('profile.access.patPromptCopied') || 'Prompt copied')} />
+        </div>
+        <div class="form-actions">
+          <button class="btn-ghost btn-sm" onClick=${() => setCreated(null)}>${t('profile.access.patDone') || 'Done'}</button>
+        </div>
+      </div>
+    `}
+
+    ${tokens === null
+      ? html`<div class="empty">${t('profile.access.patLoading') || 'Loading...'}</div>`
+      : tokens.length === 0
+        ? html`<div class="empty">${t('profile.access.patEmpty') || 'No access tokens yet.'}</div>`
+        : tokens.map(tok => html`
+            <div class="card" key=${tok.id}>
+              <div class="flex-between">
+                <div class="card-title">${escHtml(tok.label)}</div>
+                ${levelBadge(tok)}
+              </div>
+              <div class="detail-grid">
+                <div class="detail-item"><span class="detail-label">${t('profile.access.patCreatedAt') || 'Created'}</span><span class="detail-value">${new Date(tok.created_at).toLocaleDateString()}</span></div>
+                <div class="detail-item"><span class="detail-label">${t('profile.access.patLastUsed') || 'Last used'}</span><span class="detail-value">${tok.last_used_at ? new Date(tok.last_used_at).toLocaleString() : (t('profile.access.patNever') || 'never')}</span></div>
+                <div class="detail-item"><span class="detail-label">${t('profile.access.patExpires') || 'Expires'}</span><span class="detail-value">${tok.expires_at ? new Date(tok.expires_at).toLocaleDateString() : (t('profile.access.patNoExpiry') || 'never')}</span></div>
+              </div>
+              ${!tok.grant_owner && !tok.grant_operator && (tok.scopes || []).length > 0 && html`
+                <div class="flex-row-wrap mt-half">
+                  ${tok.scopes.map(s => html`<span class="badge badge-muted" key=${s}>${s}</span>`)}
+                </div>
+              `}
+              <div class="card-actions">
+                <button class="btn-danger-solid btn-sm" onClick=${() => handleRevoke(tok.id, tok.label)}>${t('profile.access.patRevoke') || 'Revoke'}</button>
+              </div>
+            </div>
+          `)
+    }
+
+    ${!showCreate ? html`
+      <div class="mb-1"><button class="btn-primary" onClick=${() => setShowCreate(true)}>${t('profile.access.patCreate') || 'New Token'}</button></div>
+    ` : html`
+      <div class="create-form">
+        <h4 class="card-h3 mb-half">${t('profile.access.patCreateTitle') || 'Create Access Token'}</h4>
+        <div class="flex-col">
+          <div class="form-row">
+            <label>${t('profile.access.patLabel') || 'Name'}</label>
+            <input type="text" class="input-field input-sm"
+              placeholder=${t('profile.access.patLabelPlaceholder') || 'e.g. App tester'}
+              value=${label} onInput=${e => setLabel(e.target.value)} />
+          </div>
+
+          <div class="form-row">
+            <label>${t('profile.access.patLevel') || 'Permissions'}</label>
+            <label class="flex-row">
+              <input type="checkbox" checked=${grantOwner} disabled=${grantOperator}
+                onChange=${() => setGrantOwner(v => !v)} />
+              <strong>${t('profile.access.patFullOwner') || 'Full owner'}</strong> — ${t('profile.access.patFullOwnerHint') || 'acts as you; sees all apps & data'}
+            </label>
+            ${isOperator && html`
+              <label class="flex-row">
+                <input type="checkbox" checked=${grantOperator}
+                  onChange=${() => setGrantOperator(v => !v)} />
+                <strong>${t('profile.access.patOperator') || 'Operator'}</strong> — ${t('profile.access.patOperatorHint') || 'full node administration (master key)'}
+              </label>
+            `}
+            ${fullLevel && html`<span class="badge badge-warn">⚠ ${t('profile.access.patMasterKeyWarn') || 'Master key — guard it like a password'}</span>`}
+          </div>
+
+          ${!fullLevel && html`
+            <div class="form-row">
+              <label>${t('profile.access.patSelectScopes') || 'Scopes'}</label>
+              ${PAT_SCOPE_DOMAINS.map(dom => html`
+                <div class="flex-row-wrap access-pat-scope-row" key=${dom.key}>
+                  <span class="access-pat-scope-domain">${dom.key}</span>
+                  ${dom.permissions.map(p => {
+                    const s = `${dom.key}:${p}`;
+                    return html`<label class="flex-row" key=${s}>
+                      <input type="checkbox" checked=${!!selScopes[s]} onChange=${() => toggleScope(s)} /> ${p}
+                    </label>`;
+                  })}
+                </div>
+              `)}
+              <label class="flex-row mt-half">
+                <input type="checkbox" checked=${readOwnerData} onChange=${() => setReadOwnerData(v => !v)} />
+                ${t('profile.access.patReadOwnerData') || 'Also read my data (otherwise a clean sandbox)'}
+              </label>
+            </div>
+          `}
+
+          <div class="form-row">
+            <label>${t('profile.access.patExpiry') || 'Expiry'}</label>
+            <select class="input-field input-sm" value=${expiry} onChange=${e => setExpiry(e.target.value)}>
+              <option value="">${t('profile.access.patNoExpiry') || 'No expiry'}</option>
+              <option value="86400">${t('profile.access.patExpiry1d') || '24 hours'}</option>
+              <option value="604800">${t('profile.access.patExpiry7d') || '7 days'}</option>
+              <option value="2592000">${t('profile.access.patExpiry30d') || '30 days'}</option>
+            </select>
+          </div>
+
+          <div class="form-actions">
+            <button class="btn-primary btn-sm" onClick=${handleCreate} disabled=${creating}>
+              ${creating ? '...' : (t('profile.access.patCreateBtn') || 'Create Token')}
+            </button>
+            <button class="btn-ghost btn-sm" onClick=${resetForm}>${t('profile.access.patCancel') || 'Cancel'}</button>
+          </div>
+        </div>
+      </div>
+    `}
+    <${ConfirmUI} />
+  `;
+}
+
 /* ═══════════════════════════════════════════════════════════════════
    Main Access Tab
    ═══════════════════════════════════════════════════════════════════ */
@@ -627,7 +869,13 @@ export default function AccessTab({ session, showToast }) {
             onMouseEnter=${() => setKeyBlurred(false)} onMouseLeave=${() => setKeyBlurred(true)}>
             ${escHtml(ownerKey)}
           </div>
-          <span class="badge badge-warn">${t('profile.access.hoverReveal')}</span>
+          <div class="flex-row">
+            <span class="badge badge-warn">${t('profile.access.hoverReveal')}</span>
+            <span onClick=${(e) => e.stopPropagation()}>
+              <${CopyButton} text=${ownerKey} className="btn-sm"
+                onCopied=${() => showToast(t('profile.access.keyCopied'))} />
+            </span>
+          </div>
         </div>
         <div class="access-warn-text">⚠ ${t('profile.access.keepSafe')}</div>
       </div>
@@ -678,6 +926,7 @@ export default function AccessTab({ session, showToast }) {
       </div>
     </div>
 
+    <${AccessTokensSection} session=${session} showToast=${showToast} />
     <${SharingGroupsSection} showToast=${showToast} />
     <${AgentDefaultsSection} showToast=${showToast} />
   `;

package/dist/public/views/profile/agents/agent-card.js

@@ -3,6 +3,20 @@
  * @description Agent card component with collapsed/expanded states,
  *   Two-Zone Header (identity + state-dependent status), and tab bar.
  * @version-history
+ *   v1.12.0 -- 2026-06-02 -- Active tracked tab never shows its own badge and is
+ *     kept marked-seen as new items arrive (so a message landing while you're on
+ *     the Messages tab doesn't raise a (1) you're already looking at).
+ *   v1.11.0 -- 2026-06-02 -- Unseen-change badges: collapsed-card mini-badge
+ *     (total new across Tasks/Messages/Memory) + per-tab number badges on the
+ *     Tasks/Messages/Memory tab buttons; opening a tracked tab clears its badge
+ *     (via onTabSeen). Counts come from the `changes` prop (localStorage
+ *     last-seen baseline computed in agents-tab.js).
+ *   v1.10.0 -- 2026-06-01 -- Reorder TABS to owner-requested order: Integration,
+ *     Tasks, Messages, Data Access, Quality, Activity, then Directives /
+ *     Agent Config / Services (README stays prepended/first).
+ *   v1.9.0 -- 2026-06-01 -- Reorder TABS by owner usage frequency (Integration,
+ *     Tasks, Data Access, Quality, Activity, ... setup tabs last) so the
+ *     now-wrapping tab bar keeps the most-used tabs on the top row.
  *   v1.8.0 -- 2026-05-31 -- Add Quality tab (per-context reviews + performance + custom stats)
  *   v1.0.0 -- 2026-05-24 -- Initial creation for Agent Detail Tab-View
  *   v1.1.0 -- 2026-05-24 -- Fix C6: remove GAII from Zone 1, M1: add Next prefix, C1: production stats, C2: problem action buttons
@@ -37,6 +51,7 @@ import TabDataAccess from './tab-data-access.js';
 import TabDirectives from './tab-directives.js';
 import TabAgentConfig from './tab-agent-config.js';
 import TabActivity from './tab-activity.js';
+import TabSchedules from './tab-schedules.js';
 import TabQuality from './tab-quality.js';
 import TabServices from './tab-services.js';
 
@@ -44,15 +59,23 @@ const html = htm.bind(h);
 
 // README is opt-in and prepended only when the agent has published one, so it
 // is NOT in this base list. See readmeTab below.
+//
+// Explicit owner-requested order (not auto-grouping). The tab bar wraps to a
+// second row (flex-wrap, see .pf-agd-tabs CSS) instead of scrolling, so the
+// first-listed tabs naturally land on the top row. README is prepended
+// separately when present, so the effective order is:
+//   README · Integration · Tasks · Messages · Data Access · Quality · Activity
+//   · Directives · Agent Config · Services
 const TABS = [
   { id: 'integration', key: 'profile.agents.detail.tabs.integration' },
   { id: 'tasks', key: 'profile.agents.detail.tabs.tasks' },
   { id: 'messages', key: 'profile.agents.detail.tabs.messages' },
   { id: 'data-access', key: 'profile.agents.detail.tabs.data_access' },
+  { id: 'quality', key: 'profile.agents.detail.tabs.quality' },
+  { id: 'activity', key: 'profile.agents.detail.tabs.activity' },
+  { id: 'schedules', key: 'profile.agents.detail.tabs.schedules' },
   { id: 'directives', key: 'profile.agents.detail.tabs.directives' },
   { id: 'agent-config', key: 'profile.agents.detail.tabs.agent_config' },
-  { id: 'activity', key: 'profile.agents.detail.tabs.activity' },
-  { id: 'quality', key: 'profile.agents.detail.tabs.quality' },
   { id: 'services', key: 'profile.agents.detail.tabs.services' },
 ];
 
@@ -78,7 +101,17 @@ async function fetchReadme(agent) {
   }
 }
 
-export default function AgentCard({ agent, onboarding, expanded, onToggle, session, showToast, allAgents, onScopesClick, onDeleteClick, onFederateToggle, onPopOut, soloMode = false }) {
+// Maps a tab id to its change-count key in the `changes` prop. Only these three
+// tabs carry unseen-change badges (Tasks, Messages, Memory/data-access).
+const TAB_CHANGE_KEY = { tasks: 'tasks', messages: 'messages', 'data-access': 'memory' };
+
+// Total unseen changes across the three tracked tabs (collapsed mini-badge).
+function totalChanges(changes) {
+  if (!changes) return 0;
+  return (changes.tasks || 0) + (changes.messages || 0) + (changes.memory || 0);
+}
+
+export default function AgentCard({ agent, onboarding, expanded, onToggle, session, showToast, allAgents, changes, onTabSeen, onScopesClick, onDeleteClick, onFederateToggle, onPopOut, soloMode = false }) {
   const state = detectAgentState(agent, onboarding);
   const [activeTab, setActiveTab] = useState(null);
   // README markdown: undefined = not loaded, '' = none published, string = show tab.
@@ -108,6 +141,16 @@ export default function AgentCard({ agent, onboarding, expanded, onToggle, sessi
     setActiveTab(hasReadme ? 'readme' : getDefaultTab(state));
   }, [expanded, readme]);
 
+  // While the owner is actively viewing a tracked tab (Tasks/Messages/Memory),
+  // keep it marked-seen as new items arrive. Without this, a message landing
+  // while you're on the Messages tab would raise its (1) badge even though you
+  // are looking right at it. Non-active tabs still accumulate their badge.
+  useEffect(() => {
+    if (!expanded) return;
+    const key = TAB_CHANGE_KEY[activeTab];
+    if (key && onTabSeen && changes?.[key]) onTabSeen(agent.name, key);
+  }, [expanded, activeTab, changes, agent.name]);
+
   const handleCollapse = useCallback(() => {
     // In solo mode the card is the whole window — clicking the header must not
     // collapse it (there is nothing to collapse back into).
@@ -125,6 +168,7 @@ export default function AgentCard({ agent, onboarding, expanded, onToggle, sessi
             <span class="pf-agd-expand-icon">▶</span>
             <span class="pf-agd-collapsed-icon">🤖</span>
             <span class="pf-agd-collapsed-name">${agent.display_name || agent.name}</span>
+            ${renderChangeBadge(changes)}
             <div class="pf-agd-collapsed-badges">
               ${renderModeBadge(agent)}
               ${renderPlatformBadge(onboarding)}
@@ -189,11 +233,22 @@ export default function AgentCard({ agent, onboarding, expanded, onToggle, sessi
         <div class="pf-agd-tabs">
           ${tabs.map(tab => {
             const label = t(tab.key);
+            const changeKey = TAB_CHANGE_KEY[tab.id];
+            // The tab you're currently viewing never shows a badge — you're
+            // looking at it (and the effect above keeps it marked-seen).
+            const count = (changeKey && activeTab !== tab.id) ? (changes?.[changeKey] || 0) : 0;
             return html`
               <button key=${tab.id}
                       class="pf-agd-tab ${activeTab === tab.id ? 'pf-agd-tab--active' : ''}"
-                      onClick=${(e) => { e.stopPropagation(); userPickedTab.current = true; setActiveTab(tab.id); }}>
+                      onClick=${(e) => {
+                        e.stopPropagation();
+                        userPickedTab.current = true;
+                        setActiveTab(tab.id);
+                        // Opening a tracked tab clears its unseen badge.
+                        if (changeKey && onTabSeen) onTabSeen(agent.name, changeKey);
+                      }}>
                 ${label !== tab.key ? label : tab.id.charAt(0).toUpperCase() + tab.id.slice(1)}
+                ${count > 0 ? html`<span class="pf-agd-tab-badge">${count > 99 ? '99+' : count}</span>` : ''}
               </button>
             `;
           })}
@@ -239,6 +294,21 @@ function renderPopOut(onPopOut, agent) {
     onClick=${(e) => { e.stopPropagation(); onPopOut(agent); }}>⤢</button>`;
 }
 
+// Collapsed-card mini-badge: total unseen changes across Tasks/Messages/Memory,
+// so the owner can spot at a glance which agent has something new. Hidden when
+// nothing changed; naturally absent from the expanded view (which does not
+// render the collapsed bar). The title spells out the per-tab breakdown.
+function renderChangeBadge(changes) {
+  const total = totalChanges(changes);
+  if (total <= 0) return null;
+  const parts = [];
+  if (changes.tasks) parts.push(`${t('profile.agents.detail.tabs.tasks')}: ${changes.tasks}`);
+  if (changes.messages) parts.push(`${t('profile.agents.detail.tabs.messages')}: ${changes.messages}`);
+  if (changes.memory) parts.push(`${t('profile.agents.detail.tabs.data_access')}: ${changes.memory}`);
+  const title = `${t('profile.agents.detail.changes.title')} — ${parts.join(', ')}`;
+  return html`<span class="pf-agd-change-badge" title=${title}>${total > 99 ? '99+' : total}</span>`;
+}
+
 function renderDeliveryIndicator(agent) {
   const hasWebhook = agent.webhookUrl || agent.webhook_url;
   const hasMcp = agent.mcpEnabled || agent.mcp_enabled;
@@ -491,6 +561,7 @@ function renderTabContent(activeTab, agent, onboarding, session, showToast, allA
     case 'directives': return html`<${TabDirectives} ...${props} />`;
     case 'agent-config': return html`<${TabAgentConfig} ...${props} />`;
     case 'activity': return html`<${TabActivity} ...${props} />`;
+    case 'schedules': return html`<${TabSchedules} ...${props} />`;
     case 'quality': return html`<${TabQuality} ...${props} />`;
     case 'services': return html`<${TabServices} ...${props} />`;
     default: return null;

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

@@ -53,8 +53,8 @@ export default function TabActivity({ agent, agentName, session, showToast }) {
   const [logPage, setLogPage] = useState(1);
   const [hasMore, setHasMore] = useState(false);
 
-  async function loadData() {
-    setLoading(true);
+  async function loadData({ showSpinner = true } = {}) {
+    if (showSpinner) setLoading(true);
     try {
       const [actResp, logResp, dirResp, whResp, telResp] = await Promise.all([
         getActivity(agentName, 30).catch(() => null),
@@ -113,7 +113,9 @@ export default function TabActivity({ agent, agentName, session, showToast }) {
   const loadRef = useRef(loadData);
   loadRef.current = loadData;
   useEffect(() => {
-    const handler = () => loadRef.current();
+    // Live-update refetch must NOT show the spinner -- it fires often and would
+    // flash the whole tab blank. First mount still shows the spinner.
+    const handler = () => loadRef.current({ showSpinner: false });
     window.addEventListener('aimeat-live-update', handler);
     return () => window.removeEventListener('aimeat-live-update', handler);
   }, []);
@@ -139,18 +141,18 @@ export default function TabActivity({ agent, agentName, session, showToast }) {
     <div>
       <!-- Stats summary -->
       ${stats && html`
-        <div class="pf-agd-stats-grid">
-          <div class="pf-agd-stat-card">
-            <div class="pf-agd-stat-value">${stats.tasksCompleted ?? 0}</div>
-            <div class="pf-agd-stat-label">${t('profile.agents.activity.tasksCompleted')}</div>
+        <div class="stat-grid">
+          <div class="stat-card">
+            <div class="stat-card-value">${stats.tasksCompleted ?? 0}</div>
+            <div class="stat-card-label">${t('profile.agents.activity.tasksCompleted')}</div>
           </div>
-          <div class="pf-agd-stat-card">
-            <div class="pf-agd-stat-value">${stats.tokensUsed30d ?? 0}</div>
-            <div class="pf-agd-stat-label">${t('profile.agents.activity.tokensUsed')}</div>
+          <div class="stat-card">
+            <div class="stat-card-value">${stats.tokensUsed30d ?? 0}</div>
+            <div class="stat-card-label">${t('profile.agents.activity.tokensUsed')}</div>
           </div>
-          <div class="pf-agd-stat-card">
-            <div class="pf-agd-stat-value">${stats.successRate != null ? `${Math.round(stats.successRate)}%` : '-'}</div>
-            <div class="pf-agd-stat-label">${t('profile.agents.activity.successRate')}</div>
+          <div class="stat-card">
+            <div class="stat-card-value">${stats.successRate != null ? `${Math.round(stats.successRate)}%` : '-'}</div>
+            <div class="stat-card-label">${t('profile.agents.activity.successRate')}</div>
           </div>
         </div>
       `}