aimeat 1.23.2 → 1.24.0

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

@@ -12,12 +12,20 @@
  *   v1.1.0 -- 2026-03-17 -- Replace inline styles with CSS classes
  *   v1.2.0 -- 2026-05-21 -- Add Federation Access section for auth consent management
  *   v1.3.0 -- 2026-05-21 -- Add Sharing Groups and Agent Defaults sections
+ *   v1.4.0 -- 2026-06-10 -- Security-page clarity round: federation allow-all warning is a
+ *     caption under the checkbox and the allowlist dims/disables while allow-all is on;
+ *     Public Key reads the real key from GET /v1/ghii/me (+ explanatory text when absent);
+ *     JWT row shows "Valid until HH:MM (h)" decoded from the token; copy buttons on
+ *     GHII/Node/MCP endpoint; empty token/group states are one-line rows; section headers
+ *     neutral (access-h3, emojis dropped) and Add Node / New Token / New Group de-accented;
+ *     Token Budget value is click-to-edit and the empty-rules state shows an example rule;
+ *     sharing-groups section accepts the Memory tab's deep link (aimeat.access.focus).
  */
 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 { t, getLocale } from '/js/i18n.js';
 import { escHtml, copyToClipboard } from '/js/utils.js';
 import { getNodeUrl } from '/js/services/auth.js';
 import { apiGet, apiPost, apiDelete } from '/js/api.js';
@@ -67,6 +75,17 @@ function SharingGroupsSection({ showToast }) {
 
   useEffect(() => { loadGroups(); }, [loadGroups]);
 
+  // Deep link from the Memory tab's "Create a group →": scroll here and open the form.
+  useEffect(() => {
+    try {
+      if (sessionStorage.getItem('aimeat.access.focus') === 'groups') {
+        sessionStorage.removeItem('aimeat.access.focus');
+        setShowCreate(true);
+        setTimeout(() => document.getElementById('access-sharing-groups')?.scrollIntoView({ behavior: 'smooth', block: 'start' }), 400);
+      }
+    } catch { /* noop */ }
+  }, []);
+
   // Live update listener
   const liveRef = useRef(loadGroups);
   liveRef.current = loadGroups;
@@ -332,23 +351,27 @@ function SharingGroupsSection({ showToast }) {
   };
 
   return html`
-    <h3 class="card-h3 mt-section">\u{1F465} ${t('profile.access.sgTitle') || 'Sharing Groups'}</h3>
+    <h3 class="card-h3 access-h3 mt-section" id="access-sharing-groups">${t('profile.access.sgTitle') || 'Sharing Groups'}</h3>
     <div class="section-desc">${t('profile.access.sgDesc') || 'Define groups of identities to share memory entries with. Assign a sharing group to memory keys to control who can read or write.'}</div>
 
     ${groups === null
       ? html`<div class="empty">${t('profile.access.sgLoading') || 'Loading...'}</div>`
       : groups.length === 0
-        ? html`<div class="empty">${t('profile.access.sgEmpty') || 'No sharing groups yet.'}</div>`
+        ? (!showCreate && html`
+            <div class="access-empty-row">
+              <span class="text-meta-sm">${t('profile.access.sgEmpty') || 'No sharing groups yet.'}</span>
+              <button class="btn-outline btn-sm" onClick=${() => setShowCreate(true)}>${t('profile.access.sgCreate') || 'New Group'}</button>
+            </div>`)
         : groups.map(renderGroupCard)
     }
 
-    ${!showCreate ? html`
+    ${!showCreate ? ((groups?.length || 0) > 0 && html`
       <div class="mb-1">
-        <button class="btn-primary" onClick=${() => setShowCreate(true)}>
+        <button class="btn-outline" onClick=${() => setShowCreate(true)}>
           ${t('profile.access.sgCreate') || 'New Group'}
         </button>
       </div>
-    ` : html`
+    `) : html`
       <div class="create-form">
         <h4 class="card-h3 mb-half">${t('profile.access.sgCreateTitle') || 'Create Sharing Group'}</h4>
         <div class="flex-col">
@@ -461,7 +484,7 @@ function AgentDefaultsSection({ showToast }) {
   const budget = defaults?.default_token_budget;
 
   return html`
-    <h3 class="card-h3 mt-section">\u{1F916} ${t('profile.access.adTitle') || 'Agent Defaults'}</h3>
+    <h3 class="card-h3 access-h3 mt-section">${t('profile.access.adTitle') || 'Agent Defaults'}</h3>
     <div class="section-desc">${t('profile.access.adDesc') || 'Owner-level defaults that apply to all your agents unless overridden by per-agent directives.'}</div>
 
     ${!editing ? html`
@@ -474,7 +497,7 @@ function AgentDefaultsSection({ showToast }) {
         </div>
 
         ${rules.length === 0
-          ? html`<div class="empty">${t('profile.access.adNoRules') || 'No default rules set.'}</div>`
+          ? html`<div class="text-meta-sm mb-half">${t('profile.access.adNoRules') || 'No default rules set.'} ${t('profile.access.adRuleExample') || 'Example: "Always answer in Finnish" or "Never spend morsels without asking".'}</div>`
           : rules.map((rule, i) => html`
               <div class="mem-item" key=${i}>
                 <span class="mem-key">${escHtml(rule)}</span>
@@ -484,7 +507,9 @@ function AgentDefaultsSection({ showToast }) {
 
         <div class="mem-item">
           <span class="mem-key">${t('profile.access.adTokenBudget') || 'Token Budget'}</span>
-          <span>${budget != null ? budget.toLocaleString() : (t('profile.access.adUnlimited') || 'Unlimited')}</span>
+          <button class="pj-linklike" title=${t('profile.access.adEdit') || 'Edit'} onClick=${startEdit}>
+            ${budget != null ? budget.toLocaleString() : (t('profile.access.adUnlimited') || 'Unlimited')} ✎
+          </button>
         </div>
       </div>
     ` : html`
@@ -650,7 +675,7 @@ function AccessTokensSection({ session, showToast }) {
   };
 
   return html`
-    <h3 class="card-h3 mt-section">\u{1F511} ${t('profile.access.patTitle') || 'Agent Access Tokens'}</h3>
+    <h3 class="card-h3 access-h3 mt-section">${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`
@@ -676,7 +701,11 @@ function AccessTokensSection({ session, showToast }) {
     ${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>`
+        ? (!showCreate && html`
+            <div class="access-empty-row">
+              <span class="text-meta-sm">${t('profile.access.patEmpty') || 'No access tokens yet.'}</span>
+              <button class="btn-outline btn-sm" onClick=${() => setShowCreate(true)}>${t('profile.access.patCreate') || 'New Token'}</button>
+            </div>`)
         : tokens.map(tok => html`
             <div class="card" key=${tok.id}>
               <div class="flex-between">
@@ -700,9 +729,9 @@ function AccessTokensSection({ session, showToast }) {
           `)
     }
 
-    ${!showCreate ? html`
-      <div class="mb-1"><button class="btn-primary" onClick=${() => setShowCreate(true)}>${t('profile.access.patCreate') || 'New Token'}</button></div>
-    ` : html`
+    ${!showCreate ? (tokens?.length > 0 && html`
+      <div class="mb-1"><button class="btn-outline" 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">
@@ -778,6 +807,16 @@ function AccessTokensSection({ session, showToast }) {
    Main Access Tab
    ═══════════════════════════════════════════════════════════════════ */
 
+/** Decode the JWT's exp claim → { until: Date, hoursLeft } or null. Display-only. */
+function jwtExpiry(jwt) {
+  try {
+    const payload = JSON.parse(atob(jwt.split('.')[1].replace(/-/g, '+').replace(/_/g, '/')));
+    if (!payload.exp) return null;
+    const until = new Date(payload.exp * 1000);
+    return { until, hoursLeft: Math.max(0, (until.getTime() - Date.now()) / 3600000) };
+  } catch { return null; }
+}
+
 export default function AccessTab({ session, showToast }) {
   const NODE_URL = getNodeUrl();
   const ownerKey = typeof localStorage !== 'undefined' ? localStorage.getItem('aimeat_owner_key') : null;
@@ -785,13 +824,16 @@ export default function AccessTab({ session, showToast }) {
   const [authConsents, setAuthConsents] = useState([]);
   const [newNodeId, setNewNodeId] = useState('');
   const [fedLoading, setFedLoading] = useState(false);
+  // undefined = loading, null = no keypair stored, string = the key
+  const [pubKey, setPubKey] = useState(undefined);
 
-  // Load auth consents on mount
+  // Load auth consents + own GHII profile (public key) on mount
   useEffect(() => {
     apiGet('/v1/consent').then(data => {
       const all = data.data?.consents || [];
       setAuthConsents(all.filter(c => c.scope === 'auth' && c.status === 'active'));
     }).catch(() => {});
+    apiGet('/v1/ghii/me').then(r => setPubKey(r?.data?.public_key ?? null)).catch(() => setPubKey(null));
   }, []);
 
   async function addAuthNode() {
@@ -845,24 +887,45 @@ export default function AccessTab({ session, showToast }) {
     }
   }
 
+  const exp = session.jwt ? jwtExpiry(session.jwt) : null;
+  const copyRow = (label, value) => html`
+    <div class="mem-item"><span class="mem-key">${label}</span>
+      <span class="access-copy-val">${escHtml(value || '-')}
+        ${value && html`<${CopyButton} text=${value} className="btn-ghost btn-sm" label="📋" onCopied=${() => showToast(t('profile.access.copied') || 'Copied')} />`}
+      </span>
+    </div>`;
+
   return html`
     <div class="section-title">${t('profile.access.title')}</div>
     <div class="section-desc">${t('profile.access.desc')}</div>
 
-    <h3 class="card-h3">\u{1F4BB} ${t('profile.access.session')}</h3>
+    <h3 class="card-h3 access-h3">${t('profile.access.session')}</h3>
     <div class="card">
       <div class="mem-item"><span class="mem-key">${t('profile.access.owner')}</span><span>${escHtml(session.owner || '-')}</span></div>
-      <div class="mem-item"><span class="mem-key">${t('profile.access.ghii')}</span><span>${escHtml(session.ghii || '-')}</span></div>
-      <div class="mem-item"><span class="mem-key">${t('profile.access.agentGaii')}</span><span>${escHtml(session.gaii || '-')}</span></div>
-      <div class="mem-item"><span class="mem-key">${t('profile.access.node')}</span><span>${escHtml(NODE_URL)}</span></div>
-      <div class="mem-item"><span class="mem-key">${t('profile.access.jwtValid')}</span><span>${session.valid ? html`<span class="badge badge-success">${t('profile.access.yes')}</span>` : html`<span class="badge badge-danger">${t('profile.access.expired')}</span>`}</span></div>
+      ${copyRow(t('profile.access.ghii'), session.ghii)}
+      ${session.gaii && copyRow(t('profile.access.agentGaii'), session.gaii)}
+      ${copyRow(t('profile.access.node'), NODE_URL)}
+      <div class="mem-item"><span class="mem-key">${t('profile.access.jwtValid')}</span><span>
+        ${session.valid
+          ? (exp
+              ? html`<span class="badge badge-success">${(t('profile.access.validUntil') || 'Valid until {time} ({h} h)').replace('{time}', exp.until.toLocaleTimeString(getLocale() === 'fi' ? 'fi-FI' : undefined, { hour: '2-digit', minute: '2-digit' })).replace('{h}', exp.hoursLeft < 1 ? '<1' : String(Math.round(exp.hoursLeft)))}</span>`
+              : html`<span class="badge badge-success">${t('profile.access.yes')}</span>`)
+          : html`<span class="badge badge-danger">${t('profile.access.expired')}</span>`}
+      </span></div>
     </div>
 
-    <h3 class="card-h3 mt-section">\u{1F510} ${t('profile.access.publicKey')}</h3>
-    <div class="card"><div class="access-mono">${escHtml(session.publicKey || 'N/A')}</div></div>
+    <h3 class="card-h3 access-h3 mt-section">${t('profile.access.publicKey')}</h3>
+    <div class="card">
+      ${pubKey === undefined
+        ? html`<div class="access-mono">…</div>`
+        : pubKey
+          ? html`<div class="flex-between"><div class="access-mono">${escHtml(pubKey)}</div>
+              <${CopyButton} text=${pubKey} className="btn-ghost btn-sm" label="📋" onCopied=${() => showToast(t('profile.access.copied') || 'Copied')} /></div>`
+          : html`<div class="text-meta-sm">${t('profile.access.noKeypair') || 'No keypair is stored for this account. Keys are generated at registration; older accounts may not have one.'}</div>`}
+    </div>
 
     ${ownerKey && html`
-      <h3 class="card-h3 mt-section">\u{1F5DD}️ ${t('profile.access.ownerKey')}</h3>
+      <h3 class="card-h3 access-h3 mt-section">${t('profile.access.ownerKey')}</h3>
       <div class="card access-card-warn" onClick=${() => copyToClipboard(ownerKey).then(() => showToast(t('profile.access.keyCopied')))}>
         <div class="flex-between">
           <div class="access-mono ${keyBlurred ? 'access-key-blur' : 'access-key-blur revealed'}"
@@ -881,50 +944,60 @@ export default function AccessTab({ session, showToast }) {
       </div>
     `}
 
-    <h3 class="card-h3 mt-section">\u{1F517} ${t('profile.access.mcpEndpoint')}</h3>
+    <h3 class="card-h3 access-h3 mt-section">${t('profile.access.mcpEndpoint')}</h3>
     <div class="card">
-      <div class="access-mcp-url">${escHtml(NODE_URL + '/v1/mcp')}</div>
+      <div class="flex-between">
+        <div class="access-mcp-url">${escHtml(NODE_URL + '/v1/mcp')}</div>
+        <${CopyButton} text=${NODE_URL + '/v1/mcp'} className="btn-ghost btn-sm" label="📋" onCopied=${() => showToast(t('profile.access.copied') || 'Copied')} />
+      </div>
       <div class="access-mcp-desc">${t('profile.access.mcpDesc')}</div>
     </div>
 
-    <h3 class="card-h3 mt-section">\u{1F310} ${t('profile.access.fedTitle')}</h3>
+    <h3 class="card-h3 access-h3 mt-section">${t('profile.access.fedTitle')}</h3>
     <div class="section-desc">${t('profile.access.fedDesc')}</div>
 
+    ${(() => {
+      const allowAll = authConsents.some(c => c.recipient === '*');
+      return html`
     <div class="card">
-      <div class="mem-item">
+      <div class="access-fed-allowall">
         <label class="flex-row">
-          <input type="checkbox"
-            checked=${authConsents.some(c => c.recipient === '*')}
-            onChange=${toggleAllowAll} />
+          <input type="checkbox" checked=${allowAll} onChange=${toggleAllowAll} />
           ${t('profile.access.fedAllowAll')}
         </label>
-        ${authConsents.some(c => c.recipient === '*') && html`
-          <span class="badge badge-warn">${t('profile.access.fedAllowAllWarn')}</span>
+        ${allowAll && html`
+          <div class="access-fed-warn-caption">⚠ ${t('profile.access.fedAllowAllCaption') || 'Any federation node can verify your identity. Uncheck to restrict to the list below.'}</div>
         `}
       </div>
 
-      ${authConsents.filter(c => c.recipient !== '*').length === 0 && !authConsents.some(c => c.recipient === '*') && html`
-        <p class="adm-text-dim">${t('profile.access.fedNoConsents')}</p>
-      `}
-      ${authConsents.filter(c => c.recipient !== '*').map(c => html`
-        <div class="mem-item">
-          <span class="mem-key">${escHtml(c.recipient.replace('node:', ''))}</span>
-          <span class="adm-text-dim" style="font-size:.85em">${c.granted_at ? new Date(c.granted_at).toLocaleDateString() : ''}</span>
-          <button class="btn-ghost btn-danger" onClick=${() => removeAuthConsent(c.id)}>
-            ${t('profile.access.fedRemove')}
+      <!-- The allowlist is meaningless while allow-all is on — dim it so it cannot
+           masquerade as the active control. -->
+      <div class=${allowAll ? 'access-fed-list access-fed-list--inactive' : 'access-fed-list'}>
+        ${authConsents.filter(c => c.recipient !== '*').length === 0 && !allowAll && html`
+          <p class="adm-text-dim">${t('profile.access.fedNoConsents')}</p>
+        `}
+        ${authConsents.filter(c => c.recipient !== '*').map(c => html`
+          <div class="mem-item">
+            <span class="mem-key">${escHtml(c.recipient.replace('node:', ''))}</span>
+            <span class="adm-text-dim" style="font-size:.85em">${c.granted_at ? new Date(c.granted_at).toLocaleDateString() : ''}</span>
+            <button class="btn-ghost btn-danger" disabled=${allowAll} onClick=${() => removeAuthConsent(c.id)}>
+              ${t('profile.access.fedRemove')}
+            </button>
+          </div>
+        `)}
+
+        <div class="mem-item access-fed-add">
+          <input type="text" class="input-field input-sm" placeholder=${t('profile.access.fedNodeId')}
+            disabled=${allowAll}
+            value=${newNodeId} onInput=${e => setNewNodeId(e.target.value)}
+            onKeyDown=${e => e.key === 'Enter' && addAuthNode()} />
+          <button class="btn-outline" onClick=${addAuthNode} disabled=${fedLoading || allowAll}>
+            ${t('profile.access.fedAddNode')}
           </button>
         </div>
-      `)}
-
-      <div class="mem-item access-fed-add">
-        <input type="text" class="input-field input-sm" placeholder=${t('profile.access.fedNodeId')}
-          value=${newNodeId} onInput=${e => setNewNodeId(e.target.value)}
-          onKeyDown=${e => e.key === 'Enter' && addAuthNode()} />
-        <button class="btn-primary" onClick=${addAuthNode} disabled=${fedLoading}>
-          ${t('profile.access.fedAddNode')}
-        </button>
       </div>
-    </div>
+    </div>`;
+    })()}
 
     <${AccessTokensSection} session=${session} showToast=${showToast} />
     <${SharingGroupsSection} showToast=${showToast} />

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

@@ -3,6 +3,12 @@
  * @description Agent card component with collapsed/expanded states,
  *   Two-Zone Header (identity + state-dependent status), and tab bar.
  * @version-history
+ *   v1.15.0 -- 2026-06-10 -- Glance round: collapsed bar drops the repeated mode/platform/
+ *     readiness badges (detail-only now); capabilities collapse to a "N tools · N skills"
+ *     summary (CapabilitiesSummary); tab badges only on Tasks/Messages, neutral gray with
+ *     red reserved for unseen failed tasks; footer Delete removed (Agent Config danger zone
+ *     owns it, onDeleteClick threaded there); federation button shows its state
+ *     ("Federation: on/off"); readiness badge gets an explanatory tooltip.
  *   v1.14.0 -- 2026-06-09 -- Tag strip in the expanded header is now editable
  *     (inline add via "+ tag" input + per-chip remove ×), writing through
  *     PATCH /v1/agents/:name/tags. Lets the owner manage the tags that drive the
@@ -111,14 +117,15 @@ async function fetchReadme(agent) {
   }
 }
 
-// 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' };
+// Maps a tab id to its change-count key in the `changes` prop. Badges live ONLY on
+// Tasks and Messages — they are the action-bearing tabs. (Memory churn is not a
+// to-do; its badge taught users to ignore badges.)
+const TAB_CHANGE_KEY = { tasks: 'tasks', messages: 'messages' };
 
-// Total unseen changes across the three tracked tabs (collapsed mini-badge).
+// Total unseen changes across the tracked tabs (collapsed mini-badge).
 function totalChanges(changes) {
   if (!changes) return 0;
-  return (changes.tasks || 0) + (changes.messages || 0) + (changes.memory || 0);
+  return (changes.tasks || 0) + (changes.messages || 0);
 }
 
 export default function AgentCard({ agent, onboarding, expanded, onToggle, session, showToast, allAgents, changes, onTabSeen, onScopesClick, onDeleteClick, onFederateToggle, onPopOut, soloMode = false, preSelectedTab = null, openTaskId = null, openTaskNonce = 0 }) {
@@ -195,10 +202,9 @@ export default function AgentCard({ agent, onboarding, expanded, onToggle, sessi
             <span class="pf-agd-collapsed-icon">🤖</span>
             <span class="pf-agd-collapsed-name">${agent.display_name || agent.name}</span>
             ${renderChangeBadge(changes)}
+            <!-- Mode/platform/readiness badges live in the expanded detail only — repeated
+                 identically on every row they were noise, not information. -->
             <div class="pf-agd-collapsed-badges">
-              ${renderModeBadge(agent)}
-              ${renderPlatformBadge(onboarding)}
-              ${renderReadinessBadge(state, onboarding)}
               ${agent.federate && html`<span class="pf-agd-badge pf-agd-badge--federation">${t('profile.federated')}</span>`}
             </div>
             ${renderPopOut(onPopOut, agent)}
@@ -237,20 +243,9 @@ export default function AgentCard({ agent, onboarding, expanded, onToggle, sessi
         <!-- Tags (editable) -->
         <${TagStrip} agent=${agent} showToast=${showToast} />
 
-        <!-- Capabilities -->
-        ${(agent.technical_capabilities?.length > 0 || agent.domain_capabilities?.length > 0 || agent.languages?.length > 0) && html`
-          <div class="pf-agd-capabilities">
-            ${(agent.technical_capabilities || []).map(c => html`
-              <span key=${c.name || c} class="pf-agd-cap-badge pf-agd-cap-badge--tech">${c.name || c}</span>
-            `)}
-            ${(agent.domain_capabilities || []).filter(c => !String(c).startsWith('Language: ')).map(c => html`
-              <span key=${c} class="pf-agd-cap-badge pf-agd-cap-badge--domain">${c}</span>
-            `)}
-            ${(agent.languages || []).map(l => html`
-              <span key=${'lang-' + l} class="pf-agd-cap-badge pf-agd-cap-badge--domain">${'Language: ' + l}</span>
-            `)}
-          </div>
-        `}
+        <!-- Capabilities — collapsed to a one-line summary ("14 tools · 5 skills"); the full
+             pill wall took a third of the screen before the tabs. Click to expand. -->
+        <${CapabilitiesSummary} agent=${agent} />
 
         <!-- Zone 2: Status -->
         ${renderZone2(state, agent, onboarding, setActiveTab, showToast)}
@@ -263,6 +258,8 @@ export default function AgentCard({ agent, onboarding, expanded, onToggle, sessi
             // 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;
+            // Neutral gray badge; red ONLY when there are unseen FAILED tasks.
+            const failed = tab.id === 'tasks' && (changes?.tasksFailed || 0) > 0;
             return html`
               <button key=${tab.id}
                       class="pf-agd-tab ${activeTab === tab.id ? 'pf-agd-tab--active' : ''}"
@@ -274,7 +271,7 @@ export default function AgentCard({ agent, onboarding, expanded, onToggle, sessi
                         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>` : ''}
+                ${count > 0 ? html`<span class="pf-agd-tab-badge ${failed ? 'pf-agd-tab-badge--failed' : ''}">${count > 99 ? '99+' : count}</span>` : ''}
               </button>
             `;
           })}
@@ -282,10 +279,11 @@ export default function AgentCard({ agent, onboarding, expanded, onToggle, sessi
 
         <!-- Tab Content -->
         <div class="pf-agd-tab-content" onClick=${(e) => e.stopPropagation()}>
-          ${renderTabContent(activeTab, agent, onboarding, session, showToast, allAgents, readme, openTaskId, openTaskNonce)}
+          ${renderTabContent(activeTab, agent, onboarding, session, showToast, allAgents, readme, openTaskId, openTaskNonce, onDeleteClick)}
         </div>
 
-        <!-- Card Footer: Scopes + Delete -->
+        <!-- Card Footer: Scopes + federation toggle. Delete lives in the Agent Config tab's
+             danger zone (typed-name confirm) — not on every tab's footer. -->
         <div class="pf-agd-card-footer">
           <div class="pf-agd-card-actions">
             ${renderPopOut(onPopOut, agent)}
@@ -295,22 +293,53 @@ export default function AgentCard({ agent, onboarding, expanded, onToggle, sessi
               </button>
             `}
             ${onFederateToggle && html`
-              <button class="btn-ghost btn-sm" onClick=${(e) => { e.stopPropagation(); onFederateToggle(agent); }}>
-                ${agent.federate ? t('profile.federated') : t('profile.notFederated')}
+              <button class="btn-ghost btn-sm"
+                title=${agent.federate ? (t('profile.agents.detail.federationOnHint') || 'Click to make local only') : (t('profile.agents.detail.federationOffHint') || 'Click to share via federation')}
+                onClick=${(e) => { e.stopPropagation(); onFederateToggle(agent); }}>
+                ${(t('profile.agents.detail.federationLabel') || 'Federation')}: ${agent.federate ? (t('profile.agents.detail.federationOn') || 'on') : (t('profile.agents.detail.federationOff') || 'off')}
               </button>
             `}
           </div>
-          ${onDeleteClick && html`
-            <button class="btn-danger btn-sm" onClick=${(e) => { e.stopPropagation(); onDeleteClick(agent.name); }}>
-              ${t('profile.agents.deleteAgent')}
-            </button>
-          `}
         </div>
       </div>
     </div>
   `;
 }
 
+// Capabilities summary — "14 tools · 5 skills · 2 languages" on one line, expanding to the
+// full pill list on click. Headers should identify, not enumerate.
+function CapabilitiesSummary({ agent }) {
+  const [open, setOpen] = useState(false);
+  const tools = agent.technical_capabilities || [];
+  const skills = (agent.domain_capabilities || []).filter(c => !String(c).startsWith('Language: '));
+  const langs = agent.languages || [];
+  if (tools.length === 0 && skills.length === 0 && langs.length === 0) return null;
+  const parts = [];
+  if (tools.length) parts.push(`${tools.length} ${t('profile.agents.detail.capTools') || 'tools'}`);
+  if (skills.length) parts.push(`${skills.length} ${t('profile.agents.detail.capSkills') || 'skills'}`);
+  if (langs.length) parts.push(`${langs.length} ${t('profile.agents.detail.capLangs') || 'languages'}`);
+  return html`
+    <div class="pf-agd-capwrap">
+      <button class="pf-agd-cap-summary" onClick=${(e) => { e.stopPropagation(); setOpen(o => !o); }}>
+        ${parts.join(' · ')} <span class="pf-chevron ${open ? 'pf-chevron-open' : ''}">▼</span>
+      </button>
+      ${open && html`
+        <div class="pf-agd-capabilities">
+          ${tools.map(c => html`
+            <span key=${c.name || c} class="pf-agd-cap-badge pf-agd-cap-badge--tech">${c.name || c}</span>
+          `)}
+          ${skills.map(c => html`
+            <span key=${c} class="pf-agd-cap-badge pf-agd-cap-badge--domain">${c}</span>
+          `)}
+          ${langs.map(l => html`
+            <span key=${'lang-' + l} class="pf-agd-cap-badge pf-agd-cap-badge--domain">${'Language: ' + l}</span>
+          `)}
+        </div>
+      `}
+    </div>
+  `;
+}
+
 // Pop-out button: opens this agent in its own window (one window per agent,
 // so re-clicking focuses the existing one). Only rendered when the parent
 // supplies onPopOut — the standalone solo view omits it.
@@ -330,9 +359,10 @@ function renderChangeBadge(changes) {
   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>`;
+  // Neutral gray; red is reserved for unseen FAILED tasks.
+  const failed = (changes.tasksFailed || 0) > 0;
+  return html`<span class="pf-agd-change-badge ${failed ? 'pf-agd-change-badge--failed' : ''}" title=${title}>${total > 99 ? '99+' : total}</span>`;
 }
 
 function renderDeliveryIndicator(agent) {
@@ -386,7 +416,8 @@ function renderReadinessBadge(state, onboarding) {
   const score = onboarding?.readinessScore;
   if (!score && score !== 0) return html`<span class="pf-agd-badge pf-agd-badge--readiness-none">--</span>`;
   const label = t(`agentOnboarding.readiness.${level}`);
-  return html`<span class="pf-agd-badge pf-agd-badge--readiness-${level}">${label} (${score})</span>`;
+  return html`<span class="pf-agd-badge pf-agd-badge--readiness-${level}"
+    title=${t('profile.agents.detail.readinessTooltip') || 'Readiness score 0–100 from onboarding checks. Levels: none → basic → standard → advanced → full.'}>${label} (${score})</span>`;
 }
 
 function renderCollapsedStats(state, agent, onboarding) {
@@ -629,7 +660,7 @@ function ProblemZone2({ agent, setActiveTab, showToast }) {
   `;
 }
 
-function renderTabContent(activeTab, agent, onboarding, session, showToast, allAgents, readme, openTaskId, openTaskNonce) {
+function renderTabContent(activeTab, agent, onboarding, session, showToast, allAgents, readme, openTaskId, openTaskNonce, onDeleteClick) {
   const props = { agent, onboarding, session, showToast, agentName: agent.name, allAgents };
   switch (activeTab) {
     case 'readme': return html`<${TabReadme} readme=${readme} />`;
@@ -638,7 +669,7 @@ function renderTabContent(activeTab, agent, onboarding, session, showToast, allA
     case 'messages': return html`<${TabMessages} ...${props} />`;
     case 'data-access': return html`<${TabDataAccess} ...${props} />`;
     case 'directives': return html`<${TabDirectives} ...${props} />`;
-    case 'agent-config': return html`<${TabAgentConfig} ...${props} />`;
+    case 'agent-config': return html`<${TabAgentConfig} ...${props} onDeleteClick=${onDeleteClick} />`;
     case 'activity': return html`<${TabActivity} ...${props} />`;
     case 'schedules': return html`<${TabSchedules} ...${props} />`;
     case 'quality': return html`<${TabQuality} ...${props} />`;