aimeat 1.7.0 → 1.9.0

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

@@ -1,44 +1,36 @@
 /**
  * @file agents-tab.js
- * @description Profile tab for managing AI agents — device auth flow, agent prompt,
- *   platform instructions, scope management modal, and agent detail cards.
+ * @description Profile tab for managing AI agents -- Shared Agent Board,
+ *   expandable agent cards with Two-Zone Header + 8-tab interface,
+ *   device auth flow, scope management modal.
  * @version-history
- *   v1.0.0 — 2026-03-17 — Refactor: replace all inline styles with CSS utility classes
- *   v1.1.0 — 2026-03-18 — Rewrite agent prompt to use device-auth flow; remove connectivity key UI
- *   v1.2.0 — 2026-03-19 — Replace profile-initiated device auth with inline pending request approval
- *   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-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
+ *   v1.0.0 -- 2026-03-17 -- Refactor: replace all inline styles with CSS utility classes
+ *   v1.1.0 -- 2026-03-18 -- Rewrite agent prompt to use device-auth flow; remove connectivity key UI
+ *   v1.2.0 -- 2026-03-19 -- Replace profile-initiated device auth with inline pending request approval
+ *   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-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
+ *   v2.0.0 -- 2026-05-24 -- Plan 4: Shared Agent Board + expandable cards with Two-Zone Header + 8-tab bar
+ *   v2.2.0 -- 2026-05-24 -- Fix M2: compact Connect Agent, C1: load task stats for production cards
  */
 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, timeAgo, copyToClipboard } from '/js/utils.js';
+import { escHtml, copyToClipboard } from '/js/utils.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 AgentTasksSubtab from './agents-tasks-subtab.js';
-import AgentDirectivesSubtab from './agents-directives-subtab.js';
-import AgentCapabilitiesSubtab from './agents-capabilities-subtab.js';
-import AgentActivitySubtab from './agents-activity-subtab.js';
-import AgentServicesSubtab from './agents-services-subtab.js';
-import AgentMessagesSubtab from './agents-messages-subtab.js';
-
-// === Agent Detail Sub-tabs ===
-const AGENT_SUBTABS = [
-  { id: 'tasks', label: 'profile.agents.subtabs.tasks' },
-  { id: 'directives', label: 'profile.agents.subtabs.directives' },
-  { id: 'capabilities', label: 'profile.agents.subtabs.capabilities' },
-  { id: 'activity', label: 'profile.agents.subtabs.activity' },
-  { id: 'services', label: 'profile.agents.subtabs.services' },
-  { id: 'messages', label: 'profile.agents.subtabs.messages' },
-];
+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';
 
 // === Scope Management Constants ===
 const SCOPE_DOMAINS = [
@@ -95,15 +87,35 @@ function buildAgentPrompt(sess) {
 Owner: ${sess.owner}
 Node: ${url}
 
-1. Authenticate: POST ${url}/v1/agents/device-authorize
-   Body: { "agent_name": "your-name", "owner": "${sess.owner}" }
-   Tell me the verification URL so I can approve.
-
-2. After auth, download your full operating instructions:
-   GET ${url}/v1/prompts/tier1
-   This file contains your directives, task queue, capabilities
-   reporting, and everything you need to operate on this node.
-   Read it fully before doing anything else.`;
+Step 1: Authenticate
+  If you already have a saved AIMEAT token, verify it works with GET ${url}/v1/agents/me/inbox first. If it works, skip to Step 2.
+  Otherwise: POST ${url}/v1/agents/device-authorize
+  Body: { "agent_name": "your-name", "owner": "${sess.owner}" }
+  Show me the verification code, then IMMEDIATELY start polling in the same turn.
+  Poll command (run this in a loop every 5 seconds until it returns HTTP 200):
+    curl -s -X POST ${url}/v1/agents/device-token -H "Content-Type: application/json" -d '{"device_code":"YOUR_DEVICE_CODE","grant_type":"urn:ietf:params:oauth:grant-type:device_code"}'
+  When HTTP 200: the response JSON has access_token at the top level. Save it:
+    echo 'RESPONSE' | python3 -c "import sys,json; print(json.load(sys.stdin)['access_token'])" > ~/.aimeat_token.txt
+  I will approve while you poll. Keep polling until success. Only do ONE auth cycle.
+  IMPORTANT: Start polling right away. I do not need to tell you "approved".
+
+Step 2: Download your skill bundle (first thing after auth)
+  GET ${url}/v1/agents/your-name/skill-bundle
+  Header: Authorization: Bearer <your-token>
+  Save as ZIP, extract it, and read SKILL.md.
+  It contains your personalized directives, rules, and complete API reference.
+
+Step 3: Read your system prompt
+  GET ${url}/v1/prompts/tier1
+  Header: Authorization: Bearer <your-token>
+  This gives you your operating loop, task queue, inbox, and all endpoint URLs.
+
+Step 4: Start Hello Integration
+  GET ${url}/v1/agents/me/onboarding
+  Header: Authorization: Bearer <your-token>
+  Follow the onboarding steps to reach production readiness.
+
+Tip: Use /v1/agents/me/ as shortcut in all agent URLs -- it resolves to your name.`;
 }
 
 /* ── Platform instructions ── */
@@ -166,18 +178,18 @@ const PLATFORM_LABELS = { windows:'profile.platforms.windows', mac:'profile.plat
 export default function AgentsTab({ session, showToast, onStats }) {
   const { confirm, ConfirmUI } = useConfirm();
   const [agents, setAgents] = useState(null);
+  const [onboardings, setOnboardings] = useState({});
   const [promptCopied, setPromptCopied] = useState(false);
   const [platExpand, setPlatExpand] = useState(false);
   const [activePlat, setActivePlat] = useState('windows');
   const [scopesModal, setScopesModal] = useState(null);
   const [expandedAgent, setExpandedAgent] = useState(null);
-  const [activeSubtab, setActiveSubtab] = useState('tasks');
-  const [gaiiCopied, setGaiiCopied] = useState(null);
-  const [keyCopied, setKeyCopied] = useState(null);
   const [pendingRequests, setPendingRequests] = useState([]);
   const [approvingCode, setApprovingCode] = useState(null);
   const [approvePreset, setApprovePreset] = useState('standard');
   const [tier1Copied, setTier1Copied] = useState(false);
+  const [connectExpanded, setConnectExpanded] = useState(false);
+  const [taskStatsMap, setTaskStatsMap] = useState({});
 
   useEffect(() => {
     if (session) loadData();
@@ -203,47 +215,46 @@ export default function AgentsTab({ session, showToast, onStats }) {
       const list = await listAgents(session.owner);
       setAgents(list);
       onStats?.({ agents: list.length });
+      const obMap = {};
+      await Promise.all(list.map(async (a) => {
+        try {
+          const resp = await getOnboarding(a.name);
+          obMap[a.name] = resp?.data?.onboarding || null;
+        } catch { obMap[a.name] = null; }
+      }));
+      setOnboardings(obMap);
+      const tsMap = {};
+      await Promise.all(list.map(async (a) => {
+        try {
+          const [doneResp, activeResp] = await Promise.all([
+            listTasks(a.name, { status: 'done', per_page: 100 }),
+            listTasks(a.name, { status: 'active', per_page: 100 }),
+          ]);
+          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; }
+      }));
+      setTaskStatsMap(tsMap);
     } catch { setAgents([]); }
   }
 
-  // Live update listener
+  // Live update listener + fallback polling every 10s
   const loadRef = useRef(loadData);
   loadRef.current = loadData;
   useEffect(() => {
     const handler = () => loadRef.current();
     window.addEventListener('aimeat-live-update', handler);
-    return () => window.removeEventListener('aimeat-live-update', handler);
+    const poller = setInterval(() => loadRef.current(), 10000);
+    return () => {
+      window.removeEventListener('aimeat-live-update', handler);
+      clearInterval(poller);
+    };
   }, []);
 
   function toggleAgent(name) {
     setExpandedAgent(prev => prev === name ? null : name);
-    setActiveSubtab('tasks');
-  }
-
-  function truncateKey(key) {
-    if (!key) return '-';
-    if (key.length <= 20) return key;
-    return key.slice(0, 10) + '...' + key.slice(-10);
-  }
-
-  function handleCopyGaii(gaii) {
-    copyToClipboard(gaii).then(() => {
-      setGaiiCopied(gaii);
-      setTimeout(() => setGaiiCopied(null), 2000);
-    });
-  }
-
-  function handleCopyKey(key) {
-    copyToClipboard(key).then(() => {
-      setKeyCopied(key);
-      setTimeout(() => setKeyCopied(null), 2000);
-    });
-  }
-
-  function formatDate(iso) {
-    if (!iso) return '-';
-    try { return new Date(iso).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' }); }
-    catch { return '-'; }
   }
 
   async function handleSaveScopes(agentName, newScopes) {
@@ -272,6 +283,7 @@ export default function AgentsTab({ session, showToast, onStats }) {
       });
       if (resp?.ok !== false) {
         showToast(t('profile.agents.pendingRequests.approved'));
+        setPendingRequests(prev => prev.filter(r => r.user_code !== userCode));
         setApprovingCode(null);
         setApprovePreset('standard');
         loadData();
@@ -301,7 +313,11 @@ export default function AgentsTab({ session, showToast, onStats }) {
         owner_token: session.jwt,
       });
       showToast(t('profile.agents.pendingRequests.denied'));
-    } catch { /* ignore */ }
+      setPendingRequests(prev => prev.filter(r => r.user_code !== userCode));
+      loadData();
+    } catch (e) {
+      showToast(e.message || 'Deny failed', true);
+    }
   }
 
   async function downloadTier1() {
@@ -339,7 +355,12 @@ export default function AgentsTab({ session, showToast, onStats }) {
   if (!agents) return html`<${Spinner} text=${t('profile.agents.loadingAgents')} />`;
 
   return html`
-    <div class="section-title">${t('profile.agents.title')}</div>
+    <div class="pf-agd-header-row">
+      <div class="section-title">${t('profile.agents.title')}${agents.length > 0 ? html` <span class="pf-agd-count-badge">(${agents.length})</span>` : ''}</div>
+      <button class="${connectExpanded ? 'btn-outline' : 'btn-primary'} btn-sm" onClick=${() => setConnectExpanded(!connectExpanded)}>
+        ${connectExpanded ? t('profile.agents.detail.zone2.cancel') : `+ ${t('profile.agents.connect')}`}
+      </button>
+    </div>
     <div class="section-desc">${t('profile.agents.desc')}</div>
 
     ${pendingRequests.length > 0 && html`
@@ -385,7 +406,7 @@ export default function AgentsTab({ session, showToast, onStats }) {
                 <button class="btn-success" onClick=${() => setApprovingCode(req.user_code)}>
                   ${t('profile.agents.pendingRequests.approve')}
                 </button>
-                <button class="btn-danger" onClick=${() => handleDeny(req.user_code)}>
+                <button class="btn-danger-solid" onClick=${() => handleDeny(req.user_code)}>
                   ${t('profile.agents.pendingRequests.deny')}
                 </button>
               </div>
@@ -395,197 +416,80 @@ export default function AgentsTab({ session, showToast, onStats }) {
       </div>
     `}
 
-    <div class="agent-cta">
-      <h3>${t('profile.agents.connect')}</h3>
-      <p>${t('profile.agents.connectDesc')}</p>
-      <div class="agent-prompt-box">${buildAgentPrompt(session)}</div>
-      <button class="copy-prompt-btn" onClick=${() => {
-        copyToClipboard(buildAgentPrompt(session)).then(() => {
-          setPromptCopied(true);
-          setTimeout(() => setPromptCopied(false), 2000);
-        });
-      }}>${promptCopied ? '\u2705 ' + t('profile.agents.copied') : t('profile.agents.copyPrompt')}</button>
-      ${agents.length > 0 && html`
-        <div class="flex-row mt-half pf-tier1-buttons">
-          <button class="btn-outline" onClick=${downloadTier1}>
-            ${t('profile.agents.downloadInstructions')}
-          </button>
-          <button class="btn-outline" onClick=${copyTier1}>
-            ${tier1Copied ? '\u2705 ' + t('profile.agents.copied') : t('profile.agents.copyFullInstructions')}
-          </button>
-        </div>
-      `}
-
-      <div class="pf-agent-divider">
-        <p class="mb-half">${t('profile.agents.noAgent')}</p>
-        <button class="expand-btn" onClick=${() => setPlatExpand(!platExpand)}>
-          <span>${t('profile.agents.seeHow')}</span>
-          <span class="pf-chevron ${platExpand ? 'pf-chevron-open' : ''}">\u25BC</span>
-        </button>
-        ${platExpand && html`
-          <div class="platform-instructions expanded">
-            <div class="platform-tabs">
-              ${PLATFORM_KEYS.map(k => html`
-                <button class="platform-tab ${k === activePlat ? 'active' : ''}" onClick=${() => setActivePlat(k)}>${t(PLATFORM_LABELS[k])}</button>
-              `)}
-            </div>
-            ${/* SAFE: PLATFORMS is hardcoded developer constant, not user input */''}
-            <div class="platform-content" dangerouslySetInnerHTML=${{ __html: PLATFORMS[activePlat] }}></div>
+    ${connectExpanded && html`
+      <div class="pf-agd-connect-content">
+        <p>${t('profile.agents.connectDesc')}</p>
+        <div class="agent-prompt-box">${buildAgentPrompt(session)}</div>
+        <button class="copy-prompt-btn" onClick=${() => {
+          copyToClipboard(buildAgentPrompt(session)).then(() => {
+            setPromptCopied(true);
+            setTimeout(() => setPromptCopied(false), 2000);
+          });
+        }}>${promptCopied ? '\u2705 ' + t('profile.agents.copied') : t('profile.agents.copyPrompt')}</button>
+        ${agents.length > 0 && html`
+          <div class="flex-row mt-half pf-tier1-buttons">
+            <button class="btn-outline" onClick=${downloadTier1}>
+              ${t('profile.agents.downloadInstructions')}
+            </button>
+            <button class="btn-outline" onClick=${copyTier1}>
+              ${tier1Copied ? '\u2705 ' + t('profile.agents.copied') : t('profile.agents.copyFullInstructions')}
+            </button>
           </div>
         `}
-      </div>
-    </div>
-
-    ${agents.length === 0
-      ? html`<div class="empty">${t('profile.agents.empty')}</div>`
-      : agents.map(a => {
-        const isExpanded = expandedAgent === a.name;
-        return html`
-        <div class="card agent-card ${isExpanded ? 'agent-card-expanded' : ''}">
-          <div class="agent-card-header-clickable" onClick=${() => toggleAgent(a.name)}>
-            <div class="card-header mb-0">
-              <div class="flex-row">
-                <span class="agent-expand-icon ${isExpanded ? 'pf-rotate-90' : ''}">\u25B6</span>
-                <div class="card-title">${escHtml(a.display_name || a.name)}</div>
-              </div>
-              <span class="badge badge-info">${escHtml(a.name)}</span>
-              <span class="${a.federate ? 'badge badge-success' : 'badge badge-muted'}"
-                onClick=${(e) => { e.stopPropagation(); toggleFederate(a); }}
-                title=${t('profile.federateTooltip')}>
-                ${a.federate ? t('profile.federated') : t('profile.notFederated')}
-              </span>
-            </div>
-            <div class="card-subtitle mt-xs">
-              ${t('profile.agents.trust')}: ${a.trust_score ?? '-'} \u2502
-              ${t('profile.agents.balance')}: ${a.morsel_balance ?? '-'} \u2502
-              ${t('profile.agents.lastSeen')}: ${a.last_seen ? timeAgo(a.last_seen) : '-'}
-            </div>
-          </div>
-
-          ${isExpanded && html`
-            <div class="agent-details">
-              <div class="agent-detail-row">
-                <span class="agent-detail-label">GAII</span>
-                <span class="agent-detail-value flex-row">
-                  <span class="text-code pf-code-break">${escHtml(a.gaii || '-')}</span>
-                  ${a.gaii && html`
-                    <button class="btn-outline agent-copy-btn" onClick=${(e) => { e.stopPropagation(); handleCopyGaii(a.gaii); }}>
-                      ${gaiiCopied === a.gaii ? '\u2713 ' + t('profile.agents.copied') : t('profile.agents.copyGaii')}
-                    </button>
-                  `}
-                </span>
-              </div>
-
-              ${a.description ? html`
-                <div class="agent-detail-row">
-                  <span class="agent-detail-label">${t('profile.agents.description')}</span>
-                  <span class="agent-detail-value">${escHtml(a.description)}</span>
-                </div>
-              ` : ''}
-
-              <div class="agent-detail-row">
-                <span class="agent-detail-label">${t('profile.agents.roles')}</span>
-                <span class="agent-detail-value">
-                  ${(a.roles && a.roles.length > 0)
-                    ? a.roles.map(r => html`<span class="badge badge-muted pf-badge-gap">${escHtml(r)}</span>`)
-                    : html`<span class="badge badge-muted">agent</span>`
-                  }
-                </span>
-              </div>
-
-              <div class="agent-detail-row">
-                <span class="agent-detail-label">${t('profile.agents.trust')}</span>
-                <span class="agent-detail-value">${a.trust_score ?? '-'}</span>
-              </div>
-
-              <div class="agent-detail-row">
-                <span class="agent-detail-label">${t('profile.agents.balance')}</span>
-                <span class="agent-detail-value">${a.morsel_balance ?? '-'}</span>
-              </div>
-
-              <div class="agent-detail-row">
-                <span class="agent-detail-label">${t('profile.agents.lastSeen')}</span>
-                <span class="agent-detail-value">${a.last_seen ? timeAgo(a.last_seen) + ' (' + formatDate(a.last_seen) + ')' : '-'}</span>
-              </div>
-
-              <div class="agent-detail-row">
-                <span class="agent-detail-label">${t('profile.agents.created')}</span>
-                <span class="agent-detail-value">${a.created_at ? formatDate(a.created_at) : '-'}</span>
-              </div>
-
-              ${a.public_key ? html`
-                <div class="agent-detail-row">
-                  <span class="agent-detail-label">${t('profile.agents.publicKey')}</span>
-                  <span class="agent-detail-value flex-row">
-                    <code class="agent-pubkey">${escHtml(truncateKey(a.public_key))}</code>
-                    <button class="btn-outline agent-copy-btn" onClick=${(e) => { e.stopPropagation(); handleCopyKey(a.public_key); }}>
-                      ${keyCopied === a.public_key ? '\u2713 ' + t('profile.agents.copied') : t('profile.agents.copyGaii')}
-                    </button>
-                  </span>
-                </div>
-              ` : ''}
-
-              ${a.capabilities?.length > 0 && html`
-                <div class="agent-detail-row">
-                  <span class="agent-detail-label">${t('profile.agents.capabilities')}</span>
-                  <span class="agent-detail-value">
-                    <div class="caps">${a.capabilities.map(c => html`<span class="cap">${escHtml(c)}</span>`)}</div>
-                  </span>
-                </div>
-              `}
-
-              <div class="agd-subtab-bar">
-                ${AGENT_SUBTABS.map(tab => {
-                  const label = t(tab.label);
-                  return html`
-                    <button class="agd-subtab ${activeSubtab === tab.id ? 'agd-subtab-active' : ''}"
-                            onClick=${(e) => { e.stopPropagation(); setActiveSubtab(tab.id); }}>
-                      ${label !== tab.label ? label : tab.id.charAt(0).toUpperCase() + tab.id.slice(1)}
-                    </button>
-                  `;
-                })}
-              </div>
-
-              <div class="agd-subtab-content" onClick=${(e) => e.stopPropagation()}>
-                ${activeSubtab === 'tasks' && html`<${AgentTasksSubtab} agentName=${a.name} session=${session} showToast=${showToast} />`}
-                ${activeSubtab === 'directives' && html`<${AgentDirectivesSubtab} agentName=${a.name} session=${session} showToast=${showToast} />`}
-                ${activeSubtab === 'capabilities' && html`<${AgentCapabilitiesSubtab} agentName=${a.name} session=${session} showToast=${showToast} agent=${a} />`}
-                ${activeSubtab === 'activity' && html`<${AgentActivitySubtab} agentName=${a.name} session=${session} showToast=${showToast} />`}
-                ${activeSubtab === 'services' && html`<${AgentServicesSubtab} agentName=${a.name} session=${session} showToast=${showToast} />`}
-                ${activeSubtab === 'messages' && html`<${AgentMessagesSubtab} agentName=${a.name} session=${session} showToast=${showToast} />`}
-              </div>
 
-              <div class="agent-detail-row mt-1">
-                <button class="btn-danger btn-sm" onClick=${(e) => { e.stopPropagation(); handleDeleteAgent(a.name); }}>
-                  ${t('profile.agents.deleteAgent')}
-                </button>
+        <div class="pf-agent-divider">
+          <p class="mb-half">${t('profile.agents.noAgent')}</p>
+          <button class="expand-btn" onClick=${() => setPlatExpand(!platExpand)}>
+            <span>${t('profile.agents.seeHow')}</span>
+            <span class="pf-chevron ${platExpand ? 'pf-chevron-open' : ''}">\u25BC</span>
+          </button>
+          ${platExpand && html`
+            <div class="platform-instructions expanded">
+              <div class="platform-tabs">
+                ${PLATFORM_KEYS.map(k => html`
+                  <button class="platform-tab ${k === activePlat ? 'active' : ''}" onClick=${() => setActivePlat(k)}>${t(PLATFORM_LABELS[k])}</button>
+                `)}
               </div>
+              ${/* SAFE: PLATFORMS is hardcoded developer constant, not user input */''}
+              <div class="platform-content" dangerouslySetInnerHTML=${{ __html: PLATFORMS[activePlat] }}></div>
             </div>
           `}
-
-          ${!isExpanded && a.capabilities?.length > 0 && html`
-            <div class="caps mb-half">${a.capabilities.map(c => html`<span class="cap">${escHtml(c)}</span>`)}</div>
-          `}
-
-          ${(() => {
-            const scopes = a.default_scopes ?? ['*'];
-            const tpl = detectTemplate(scopes);
-            const count = scopes.includes('*') ? '\u221E' : scopes.length;
-            const isOwnerOrOp = session.roles?.includes('owner') || session.roles?.includes('operator');
-            return html`
-              <div class="scope-summary">
-                <span class="scope-badge">${templateLabel(tpl)}</span>
-                <span class="scope-count">${count} ${t('profile.agents.scopeUi.scopes')}</span>
-                ${isOwnerOrOp
-                  ? html`<button class="scope-manage-btn" onClick=${(e) => { e.stopPropagation(); setScopesModal(a); }}>
-                      ${t('profile.agents.scopeUi.manage')} \u25B8
-                    </button>`
-                  : html`<span class="scope-lock">\uD83D\uDD12</span>`
-                }
-              </div>`;
-          })()}
         </div>
-      `; })
+      </div>
+    `}
+
+    ${agents.length === 0
+      ? html`<div class="empty">${t('profile.agents.empty')}</div>`
+      : html`
+        <${SharedBoard}
+          agents=${agents}
+          onboardings=${onboardings}
+          onAgentClick=${(name) => {
+            setExpandedAgent(name);
+            requestAnimationFrame(() => {
+              const el = document.querySelector(`[data-agent-name="${name}"]`);
+              el?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            });
+          }}
+        />
+        ${agents.map(a => html`
+          <div data-agent-name=${a.name}>
+          <${AgentCard}
+            key=${a.name}
+            agent=${{ ...a, taskStats: taskStatsMap[a.name] || null }}
+            onboarding=${onboardings[a.name]}
+            expanded=${expandedAgent === a.name}
+            onToggle=${toggleAgent}
+            session=${session}
+            showToast=${showToast}
+            allAgents=${agents}
+            onScopesClick=${(agent) => setScopesModal(agent)}
+            onDeleteClick=${handleDeleteAgent}
+            onFederateToggle=${toggleFederate}
+          />
+          </div>
+        `)}
+      `
     }
 
     ${scopesModal && html`<${ScopesModal}