aimeat 1.40.1 → 2.1.0

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

@@ -4,6 +4,11 @@
  *   during onboarding or production status (connection, platform, readiness,
  *   identity, delivery log) after completion.
  * @version-history
+ *   v1.8.0 -- 2026-07-17 -- Card scheme generalized: pf-agd-prod-grid renamed to the
+ *     shared pf-agd-card-grid; production sections carry pf-agd-card / --full.
+ *   v1.9.0 -- 2026-07-16 -- Mount folds webhook + delivery-log + onboarding-checklist into GET
+ *     /v1/agents/:name/integration/overview (getIntegrationOverview); skill-bundle version stays a
+ *     separate request; individual reads kept as fallback.
  *   v1.8.0 -- 2026-06-30 -- Onboarding checklist step labels use tOr() so a missing
  *     agentOnboarding.steps.* key falls back to the server-provided step.title (which carries
  *     the howTo-enriched onboarding payload) instead of rendering the raw i18n key.
@@ -14,6 +19,12 @@
  *     payloads -- dropped 3 copied-state useState hooks, 3 hand-rolled handlers, the
  *     copied-flag params threaded through both render functions, and the local
  *     copyToClipboard import.
+ *   v1.7.0 -- 2026-07-17 -- Production view: sections become cards in a responsive
+ *     two-column grid (pf-agd-prod-grid; Readiness + Delivery log full-width) and the
+ *     ambiguous second "Version" row is labelled "Bundle version" (new i18n key).
+ *   v1.6.0 -- 2026-07-17 -- Onboarding view: merge the checklist title + readiness score +
+ *     duplicate "Progress: N/M  X%" row into ONE canonical section header above the
+ *     progress bar (the zone-2 banner already repeats the same progress).
  *   v1.5.0 -- 2026-05-31 -- Live-update refresh no longer toggles the full-tab loading
  *     placeholder (added a showSpinner option). During Hello Integration the agent
  *     posts steps/telemetry rapidly, so the frequent SSE ticks were re-rendering the
@@ -37,7 +48,7 @@ import { timeAgo } from '/js/utils.js';
 import { CopyButton } from '/components/CopyButton.js';
 import { detectAgentState } from './state-detector.js';
 import {
-  getOnboarding, startOnboarding,
+  getOnboarding, startOnboarding, getIntegrationOverview,
   getWebhookConfig, testWebhook, updateWebhook,
   getSkillBundleVersion, getSkillBundleUrl, updateSkillBundle,
   getDeliveryLog
@@ -64,16 +75,28 @@ export default function TabIntegration({ agent, onboarding, showToast, agentName
   const loadData = useCallback(async ({ showSpinner = true } = {}) => {
     if (showSpinner) setLoading(true);
     try {
-      const [whResp, sbResp, dlResp, obResp] = await Promise.all([
-        getWebhookConfig(agentName).catch(() => null),
+      // Mount fold: ONE composite (webhook + delivery log + onboarding checklist) plus the skill-bundle
+      // version, which stays separate (bundle-generation pipeline, not a read). On composite failure, fall
+      // back to the individual reads. Each composite sub-object mirrors the matching endpoint's `.data`.
+      const [ov, sbResp] = await Promise.all([
+        getIntegrationOverview(agentName),
         getSkillBundleVersion(agentName).catch(() => null),
-        getDeliveryLog(agentName, 10).catch(() => null),
-        getOnboarding(agentName).catch(() => null),
       ]);
-      setWebhook(whResp?.data || null);
       setBundleVersion(sbResp?.data || null);
-      setDeliveries(dlResp?.data?.deliveries || []);
-      setPostChecklist(obResp?.data?.post_onboarding_checklist || null);
+      if (ov) {
+        setWebhook(ov.webhook || null);
+        setDeliveries(ov.deliveries?.deliveries || []);
+        setPostChecklist(ov.onboarding?.post_onboarding_checklist || null);
+      } else {
+        const [whResp, dlResp, obResp] = await Promise.all([
+          getWebhookConfig(agentName).catch(() => null),
+          getDeliveryLog(agentName, 10).catch(() => null),
+          getOnboarding(agentName).catch(() => null),
+        ]);
+        setWebhook(whResp?.data || null);
+        setDeliveries(dlResp?.data?.deliveries || []);
+        setPostChecklist(obResp?.data?.post_onboarding_checklist || null);
+      }
     } catch { /* silent */ }
     if (showSpinner) setLoading(false);
   }, [agentName]);
@@ -225,17 +248,17 @@ function renderOnboardingView(onboarding, agentName, handleRerun, rerunning, cur
   return html`
     <div>
       <div class="pf-agd-section">
-        <div class="pf-agd-section-label">
-          ${t('profile.agents.detail.integration.checklistTitle')}
-          ${' -- '}${t('profile.agents.detail.integration.readinessScore')}: ${pct > 0 ? `${pct} / 100` : '--'}
+        <div class="pf-agd-section-header">
+          <span class="pf-agd-section-label">
+            ${t('profile.agents.detail.integration.checklistTitle')}: ${passed}/${total}
+          </span>
+          <span class="pf-agd-section-label">
+            ${t('profile.agents.detail.integration.readinessScore')}: ${pct > 0 ? `${pct} / 100` : '--'}
+          </span>
         </div>
         <div class="pf-agd-progress-bar">
           <div class="pf-agd-progress-fill" style="width: ${pct}%"></div>
         </div>
-        <div class="pf-agd-section-header pf-agd-progress-header">
-          <span>${t('profile.agents.detail.integration.progress')}: ${passed}/${total}</span>
-          <span>${pct}%</span>
-        </div>
       </div>
 
       <div class="pf-agd-checklist">
@@ -300,9 +323,9 @@ function renderProductionView(agent, onboarding, webhook, bundleVersion, display
     : t('profile.agents.detail.integration.manual');
 
   return html`
-    <div>
+    <div class="pf-agd-card-grid">
       <!-- CONNECTION -->
-      <div class="pf-agd-section">
+      <div class="pf-agd-section pf-agd-card">
         <div class="pf-agd-section-label">${t('profile.agents.detail.connection')}</div>
         <div class="pf-agd-info-row">
           <span class="pf-agd-info-label">${t('profile.agents.detail.integration.deliveryMethod')}</span>
@@ -386,7 +409,7 @@ function renderProductionView(agent, onboarding, webhook, bundleVersion, display
       </div>
 
       <!-- PLATFORM & SKILL -->
-      <div class="pf-agd-section">
+      <div class="pf-agd-section pf-agd-card">
         <div class="pf-agd-section-label">${t('profile.agents.detail.platform')} & ${t('profile.agents.detail.skillBundle')}</div>
         <div class="pf-agd-info-row">
           <span class="pf-agd-info-label">${t('profile.agents.detail.platform')}</span>
@@ -402,7 +425,7 @@ function renderProductionView(agent, onboarding, webhook, bundleVersion, display
         </div>
         ${bundleVersion ? html`
           <div class="pf-agd-info-row">
-            <span class="pf-agd-info-label">${t('profile.agents.skillBundle.versionLabel')}</span>
+            <span class="pf-agd-info-label">${t('profile.agents.skillBundle.bundleVersionLabel')}</span>
             <span class="pf-agd-info-value">${bundleVersion.version || '--'}</span>
           </div>
         ` : ''}
@@ -420,7 +443,7 @@ function renderProductionView(agent, onboarding, webhook, bundleVersion, display
       </div>
 
       <!-- READINESS -->
-      <div class="pf-agd-section">
+      <div class="pf-agd-section pf-agd-card pf-agd-card--full">
         <div class="pf-agd-section-label">${t('profile.agents.detail.readiness')}</div>
         <div class="pf-agd-step-pills">
           ${steps.map(s => html`
@@ -460,7 +483,7 @@ function renderProductionView(agent, onboarding, webhook, bundleVersion, display
 
       <!-- POST-ONBOARDING SETUP -->
       ${postChecklist && html`
-        <div class="pf-agd-section">
+        <div class="pf-agd-section pf-agd-card">
           <div class="pf-agd-section-label">${t('profile.agents.detail.integration.postOnboardingSetup')}</div>
           <div class="pf-agd-info-row">
             <span class="pf-agd-info-label">${t('profile.agents.detail.integration.commandsRegistered')}</span>
@@ -496,7 +519,7 @@ function renderProductionView(agent, onboarding, webhook, bundleVersion, display
       `}
 
       <!-- IDENTITY -->
-      <div class="pf-agd-section">
+      <div class="pf-agd-section pf-agd-card">
         <div class="pf-agd-section-label">${t('profile.agents.detail.identity')}</div>
         <div class="pf-agd-info-row">
           <span class="pf-agd-info-label">GAII</span>
@@ -523,7 +546,7 @@ function renderProductionView(agent, onboarding, webhook, bundleVersion, display
       </div>
 
       <!-- DELIVERY LOG -->
-      <div class="pf-agd-section">
+      <div class="pf-agd-section pf-agd-card pf-agd-card--full">
         <div class="pf-agd-section-label">${t('profile.agents.detail.deliveryLog')}</div>
         ${displayDeliveries.length > 0 ? html`
           <table class="pf-agd-delivery-log">

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

@@ -3,6 +3,9 @@
  * @description Messages tab with command palette, "/" autocomplete, and chat area.
  *   Wraps the existing messages subtab and adds command discovery.
  * @version-history
+ *   v1.7.0 -- 2026-07-16 -- Mount folds commands + threads + messages into GET /v1/agents/:name/messages/overview
+ *     (getMessagesOverview); the [activeThread] effect skips its first run so the composite is the only
+ *     initial load; individual reads kept as fallback.
  *   v1.6.0 -- 2026-06-10 -- Empty command palette is one quiet line ("Agent commands — none
  *     registered"), not an expandable empty box.
  *   v1.5.0 -- 2026-06-06 -- Thread buttons: fix field-name mismatch (use threadId/lastMessage from the
@@ -27,7 +30,7 @@ import htm from 'htm';
 import { onLiveUpdate } from '/lib/live-updates.js';
 import { t } from '/js/i18n.js';
 import { timeAgo } from '/js/utils.js';
-import { sendMessage, listMessages, listThreads } from '/js/services/agent-messages.js';
+import { sendMessage, listMessages, listThreads, getMessagesOverview } from '/js/services/agent-messages.js';
 import { getAgentCommands } from '/js/services/agent-integration.js';
 import { Markdown } from '/components/Markdown.js';
 
@@ -113,6 +116,15 @@ export default function TabMessages({ agent, agentName, showToast }) {
   const [pendingPrompt, setPendingPrompt] = useState(null); // { promptId, threadId } | null
   const historyRef = useRef(null);
   const inputRef = useRef(null);
+  // The [activeThread] effect below also fires on mount; skip its first run so the mount composite is the
+  // only thing that loads messages initially (it would otherwise double-load the page-1 history).
+  const threadMounted = useRef(false);
+
+  function applyCommands(value) {
+    if (Array.isArray(value)) setCommands(value);
+    else if (typeof value === 'string') { try { setCommands(JSON.parse(value)); } catch { setCommands([]); } }
+    else setCommands([]);
+  }
 
   async function loadCommands() {
     try {
@@ -145,14 +157,33 @@ export default function TabMessages({ agent, agentName, showToast }) {
   }
 
   useEffect(() => {
-    loadCommands();
-    loadThreads();
-    loadMessages();
+    // Mount fold: ONE composite (commands + enriched threads + page-1 messages). On failure, fall back to
+    // the individual reads. Reset the thread-mounted guard so the [activeThread] effect skips its first run
+    // for this agent (the composite already seeded the messages).
+    threadMounted.current = false;
+    (async () => {
+      const ov = await getMessagesOverview(agentName);
+      if (ov) {
+        applyCommands(ov.commands);
+        setThreads(ov.threads || []);
+        setMessages(ov.messages?.messages || []);
+        setLoading(false);
+        return;
+      }
+      loadCommands();
+      loadThreads();
+      loadMessages();
+    })();
     // eslint-disable-next-line react-hooks/exhaustive-deps -- Full initial load on mount and when the agent changes; the loaders also close over activeThread, but re-keying on it would double-fetch (activeThread is handled by the effect below).
   }, [agentName]);
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps -- Reload messages when the active thread changes; loadMessages also depends on agentName, which the mount effect above already handles.
-  useEffect(() => { loadMessages(); }, [activeThread]);
+  useEffect(() => {
+    // Reload messages when the active thread CHANGES; the first run (mount) is skipped because the mount
+    // composite already loaded the page-1 history.
+    if (!threadMounted.current) { threadMounted.current = true; return; }
+    loadMessages();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeThread]);
 
   // eslint-disable-next-line react-hooks/exhaustive-deps -- Re-subscribe when the agent or active thread changes; the callback reads the current loaders via closure (fresh for these deps).
   useEffect(() => onLiveUpdate(['agent-messages'], () => { loadMessages(); loadThreads(); loadCommands(); }), [agentName, activeThread]);

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

@@ -10,6 +10,10 @@
  * @structure default export TabQuality({ agentName })
  * @usage rendered by agent-card.js renderTabContent() for the 'quality' tab
  * @version-history
+ *   v1.5.0 -- 2026-07-17 -- Card layout: performance full-width, reviews|rate side by
+ *     side, custom metrics full-width (shared pf-agd-card-grid scheme).
+ *   v1.4.0 -- 2026-07-16 -- Mount folds statistics + done-tasks into GET /v1/agents/:name/quality/overview
+ *     (getQualityOverview); individual statistics + done-tasks reads kept as fallback.
  *   v1.3.0 -- 2026-06-10 -- Deliverable rows show date+time (identical titles must be
  *     tellable apart) and unrated rows rate via INLINE stars (click submits immediately);
  *     the modal remains for re-rates (context/comment).
@@ -27,7 +31,7 @@ import { useState, useEffect, useRef, useCallback } from 'preact/hooks';
 import htm from 'htm';
 import { onLiveUpdate } from '/lib/live-updates.js';
 import { t } from '/js/i18n.js';
-import { getAgentStatistics, listTasks, rateTask } from '/js/services/agent-tasks.js';
+import { getAgentStatistics, getQualityOverview, listTasks, rateTask } from '/js/services/agent-tasks.js';
 import RateModal from './rate-modal.js';
 
 const html = htm.bind(h);
@@ -85,12 +89,20 @@ export default function TabQuality({ agentName, showToast }) {
     // live-update refetches -- swaps in fresh data in place without flashing an
     // empty tab. A transient error keeps the last good data rather than clearing.
     try {
-      const [statsResp, tasksResp] = await Promise.all([
-        getAgentStatistics(agentName),
-        listTasks(agentName, { status: 'done', per_page: 100 }).catch(() => null),
-      ]);
-      if (statsResp?.data) setData(statsResp.data);
-      setDoneTasks(tasksResp?.data?.tasks || []);
+      // Mount fold: ONE composite (recomputed statistics + done tasks). On failure, fall back to the
+      // individual two-request fan-out.
+      const ov = await getQualityOverview(agentName);
+      if (ov) {
+        if (ov.statistics) setData(ov.statistics);
+        setDoneTasks(ov.done_tasks || []);
+      } else {
+        const [statsResp, tasksResp] = await Promise.all([
+          getAgentStatistics(agentName),
+          listTasks(agentName, { status: 'done', per_page: 100 }).catch(() => null),
+        ]);
+        if (statsResp?.data) setData(statsResp.data);
+        setDoneTasks(tasksResp?.data?.tasks || []);
+      }
     } catch { /* keep showing the last good data on a transient error */ }
     setLoading(false);
   }, [agentName]);
@@ -143,8 +155,9 @@ export default function TabQuality({ agentName, showToast }) {
   const durKeys = Object.keys(durByContext);
 
   return html`
-    <div class="pf-agd-quality">
+    <div class="pf-agd-quality pf-agd-card-grid">
       <!-- Performance -->
+      <div class="pf-agd-card pf-agd-card--full">
       <div class="pf-agd-section-title">${t('profile.agents.detail.quality.performanceTitle')}</div>
       <div class="pf-agd-quality-desc">${t('profile.agents.detail.quality.performanceDesc')}</div>
       <div class="stat-grid">
@@ -179,7 +192,10 @@ export default function TabQuality({ agentName, showToast }) {
         </div>
       `}
 
+      </div>
+
       <!-- Reviews by context -->
+      <div class="pf-agd-card">
       <div class="pf-agd-section-title">${t('profile.agents.detail.quality.reviewsTitle')}</div>
       <div class="pf-agd-quality-desc">${t('profile.agents.detail.quality.reviewsDesc')}</div>
       ${contextKeys.length === 0
@@ -207,7 +223,10 @@ export default function TabQuality({ agentName, showToast }) {
           </div>
         `}
 
+      </div>
+
       <!-- Rate deliverables (completed tasks the owner can rate) -->
+      <div class="pf-agd-card">
       <div class="pf-agd-section-title">${t('profile.agents.detail.quality.pendingTitle')}</div>
       <div class="pf-agd-quality-desc">${t('profile.agents.detail.quality.pendingDesc')}</div>
       ${doneTasks.length === 0
@@ -228,7 +247,10 @@ export default function TabQuality({ agentName, showToast }) {
           </div>
         `}
 
+      </div>
+
       <!-- Custom metrics -->
+      <div class="pf-agd-card pf-agd-card--full">
       <div class="pf-agd-section-title">${t('profile.agents.detail.quality.customTitle')}</div>
       <div class="pf-agd-quality-desc">${t('profile.agents.detail.quality.customDesc')}</div>
       ${custom.length === 0
@@ -244,6 +266,8 @@ export default function TabQuality({ agentName, showToast }) {
           </div>
         `}
 
+      </div>
+
       <${RateModal}
         open=${!!rateTarget}
         onClose=${() => setRateTarget(null)}

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

@@ -5,6 +5,10 @@
  *   internal (the agent's self-reported mirror, read-only). Lets the owner create
  *   a new schedule targeting this agent (reusing the master view's CreateForm).
  * @version-history
+ *   v1.2.0 -- 2026-07-17 -- Dispatched / agent-internal groups become pf-agd-cards.
+ *   v1.1.0 -- 2026-07-17 -- Style unification: canonical agent-detail section headers
+ *     (pf-agd-section-header/-title) instead of scheduler-view headings, pf-agd-empty
+ *     empty states, and the Tasks-tab "+ New" outline button pattern.
  *   v1.0.0 -- 2026-06-03 -- Initial agent Schedules sub-tab
  */
 import { h } from 'preact';
@@ -45,28 +49,29 @@ export default function TabSchedules({ agentName, allAgents = [], showToast }) {
 
   return html`
     <div class="sch-tab">
-      <div class="sch-head">
-        <div class="section-desc">${t('profile.scheduler.agentDesc')}</div>
-        <button class="btn-primary" onClick=${() => setShowForm(v => !v)}>
-          ${showForm ? t('profile.scheduler.close') : t('profile.scheduler.newSchedule')}
+      <div class="pf-agd-section-header">
+        <span class="pf-agd-section-title">${t('profile.agents.detail.tabs.schedules')}${managed.length + internal.length > 0 ? ` (${managed.length + internal.length})` : ''}</span>
+        <button class="btn-outline btn-sm" onClick=${() => setShowForm(v => !v)}>
+          ${showForm ? '-' : '+'} ${t('profile.scheduler.newSchedule')}
         </button>
       </div>
+      <div class="section-desc">${t('profile.scheduler.agentDesc')}</div>
 
       ${showForm && html`<${CreateForm} agents=${allAgents} lockedAgent=${agentName} showToast=${showToast}
         onCreated=${() => { setShowForm(false); loadData(); }} />`}
 
-      <div class="sch-section">
-        <h3 class="sch-section-title">${t('profile.scheduler.dispatchedTitle')}</h3>
+      <div class="sch-section pf-agd-card">
+        <div class="pf-agd-section-title">${t('profile.scheduler.dispatchedTitle')}</div>
         ${managed.length === 0
-          ? html`<div class="sch-empty">${t('profile.scheduler.noDispatched')}</div>`
+          ? html`<div class="pf-agd-empty">${t('profile.scheduler.noDispatched')}</div>`
           : html`<div class="sch-card-list">${managed.map(j => html`<${ScheduleItem} key=${j.id} schedule=${j} onChanged=${loadData} showToast=${showToast} />`)}</div>`}
       </div>
 
-      <div class="sch-section">
-        <h3 class="sch-section-title">${t('profile.scheduler.internalTitle')}</h3>
+      <div class="sch-section pf-agd-card">
+        <div class="pf-agd-section-title">${t('profile.scheduler.internalTitle')}</div>
         <div class="sch-muted sch-internal-note">${t('profile.scheduler.internalNote')}</div>
         ${internal.length === 0
-          ? html`<div class="sch-empty">${t('profile.scheduler.noInternal')}</div>`
+          ? html`<div class="pf-agd-empty">${t('profile.scheduler.noInternal')}</div>`
           : html`<table class="sch-table"><tbody>
             ${internal.map((e, i) => html`<tr key=${e.id || i}>
               <td>${e.name}${e.purpose && html`<div class="sch-muted">${e.purpose}</div>`}</td>

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

@@ -11,13 +11,15 @@
  * @version-history
  *   v1.0.0 -- 2026-07-11 -- Initial: first consumer of the ledger, closes the "recorded
  *     but nowhere to see it" gap for agent LLM usage.
+ *   v1.1.0 -- 2026-07-16 -- Mount folds the two ledger reads into GET /v1/ledger/usage/overview
+ *     (getLedgerUsageOverview); individual usage + runs reads kept as fallback.
  */
 import { h } from 'preact';
 import { useState, useEffect, useRef } from 'preact/hooks';
 import htm from 'htm';
 import { onLiveUpdate } from '/lib/live-updates.js';
 import { t } from '/js/i18n.js';
-import { getLedgerUsage, getLedgerRuns } from '/js/services/ledger.js';
+import { getLedgerUsage, getLedgerRuns, getLedgerUsageOverview } from '/js/services/ledger.js';
 
 const html = htm.bind(h);
 
@@ -44,13 +46,22 @@ export default function TabUsage({ agent, agentName }) {
   async function loadData({ showSpinner = true } = {}) {
     if (showSpinner) setLoading(true);
     try {
-      const [modelResp, runsResp] = await Promise.all([
-        getLedgerUsage(gaii, { groupBy: 'model' }).catch(() => null),
-        getLedgerRuns(gaii, { limit: 50 }).catch(() => null),
-      ]);
-      setTotals(modelResp?.data?.totals || null);
-      setByModel(modelResp?.data?.groups || []);
-      setRuns(runsResp?.data?.runs || []);
+      // Mount fold: ONE composite (model-grouped aggregates + totals + per-run rollups). On failure, fall
+      // back to the individual two-request fan-out.
+      const ov = await getLedgerUsageOverview(gaii, { runsLimit: 50 });
+      if (ov) {
+        setTotals(ov.totals || null);
+        setByModel(ov.groups || []);
+        setRuns(ov.runs || []);
+      } else {
+        const [modelResp, runsResp] = await Promise.all([
+          getLedgerUsage(gaii, { groupBy: 'model' }).catch(() => null),
+          getLedgerRuns(gaii, { limit: 50 }).catch(() => null),
+        ]);
+        setTotals(modelResp?.data?.totals || null);
+        setByModel(modelResp?.data?.groups || []);
+        setRuns(runsResp?.data?.runs || []);
+      }
     } catch {
       setTotals(null);
       setByModel([]);

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

@@ -30,7 +30,7 @@ function TechnicalSkills({ capabilities }) {
 
   return html`
     <div class="agd-directive-section">
-      <h4>${tFallback('profile.agents.capabilities.technical', 'Technical Skills')}</h4>
+      <div class="card-h3">${tFallback('profile.agents.capabilities.technical', 'Technical Skills')}</div>
       <div class="agd-cap-list">
         ${capabilities.map(cap => html`
           <span class="agd-cap-badge">
@@ -58,7 +58,7 @@ function DomainKnowledge({ domains, languages: separateLanguages }) {
 
   return html`
     <div class="agd-directive-section">
-      <h4>${tFallback('profile.agents.capabilities.domain', 'Domain Knowledge')}</h4>
+      <div class="card-h3">${tFallback('profile.agents.capabilities.domain', 'Domain Knowledge')}</div>
       ${otherDomains.length > 0 && html`
         <div class="agd-cap-list">
           ${otherDomains.map(d => html`
@@ -88,7 +88,7 @@ function ActionQueueSupport({ scopes }) {
 
   return html`
     <div class="agd-directive-section">
-      <h4>${tFallback('profile.agents.capabilities.actionQueue', 'Action Queue Support')}</h4>
+      <div class="card-h3">${tFallback('profile.agents.capabilities.actionQueue', 'Action Queue Support')}</div>
       <div class="agd-cap-queue-list">
         ${canAccept && html`
           <div class="agd-cap-queue-item">

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

@@ -4,6 +4,8 @@
  *   expandable agent cards with Two-Zone Header + 8-tab interface,
  *   device auth flow, scope management modal.
  * @version-history
+ *   v3.3.0 -- 2026-07-14 -- Task-runner section: add a "View the crewaimeat fleet on GitHub"
+ *     link (github.com/miikkij/crewaimeat) with the GitHub Octocat mark.
  *   v3.2.0 -- 2026-07-13 -- Split (max-file-lines): moved scope constants/labels, connect
  *     prompts + platform instructions, per-browser tab helpers, the filter bar / active-tasks
  *     panel / grouped renderer, and the scope modal into ./agents/ sibling modules
@@ -79,6 +81,9 @@ import { loadAgentOrder, saveAgentOrder, UNGROUPED_ID, loadCollapsedGroups, save
 import { renderFilterBar, ActiveTasksPanel, renderAgentGroups } from './agents/groups-render.js';
 import ScopesModal from './agents/scopes-modal.js';
 
+// The familiar GitHub "Octocat" mark. fill=currentColor so it inherits the link's themed color.
+const GhMark = html`<svg class="gh-mark" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>`;
+
 export default function AgentsTab({ session, showToast, onStats }) {
   const { confirm, ConfirmUI } = useConfirm();
   const [agents, setAgents] = useState(null);
@@ -450,7 +455,7 @@ export default function AgentsTab({ session, showToast, onStats }) {
 
     ${pendingRequests.length > 0 && html`
       <div class="agent-cta mb-1">
-        <h3>${t('profile.agents.pendingRequests.title')}</h3>
+        <div class="section-title">${t('profile.agents.pendingRequests.title')}</div>
         <p>${t('profile.agents.pendingRequests.desc')}</p>
         ${pendingRequests.map(req => html`
           <div class="card mt-1 p-1" key=${req.user_code}>
@@ -574,6 +579,11 @@ export default function AgentsTab({ session, showToast, onStats }) {
             <div class="mt-half">
               <p class="text-caption mb-half">${t('profile.agents.taskRunner.whatIs')}</p>
               <p class="text-caption mb-half">${t('profile.agents.taskRunner.whenToUse')}</p>
+              <p class="mb-half">
+                <a class="pf-gh-link" href="https://github.com/miikkij/crewaimeat" target="_blank" rel="noopener">
+                  ${GhMark}${t('profile.agents.taskRunner.repoLink')}
+                </a>
+              </p>
               <p class="text-caption mb-half"><strong>${t('profile.agents.taskRunner.exampleLabel')}</strong> ${t('profile.agents.taskRunner.exampleDesc')}</p>
               <div class="mb-half mt-1">
                 <label class="text-caption mb-half" for="pf-task-runner-name">${t('profile.agents.taskRunner.nameLabel')}</label>