aimeat 1.16.2 → 1.18.0

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

@@ -6,16 +6,67 @@
  * @version-history
  *   v1.0.0 -- 2026-05-24 -- Initial creation for Agent Detail Tab-View
  *   v1.1.0 -- 2026-05-24 -- Add edit/copy/download buttons (F8), edit mode (F9), upload (F10), file metadata (F11)
+ *   v1.2.0 -- 2026-06-02 -- Component unification: route handleCopy through the shared
+ *     copyToClipboard (/js/utils.js) instead of raw navigator.clipboard.writeText, so the
+ *     insecure-context fallback applies; toast preserved (TIER 3, stays a handler)
  */
 
 import { h } from 'preact';
 import { useState, useEffect, useRef } from 'preact/hooks';
 import htm from 'htm';
 import { t } from '/js/i18n.js';
-import { apiGet, apiPut } from '/js/api.js';
+import { copyToClipboard } from '/js/utils.js';
+import { apiGet, apiPut, apiPatch } from '/js/api.js';
 
 const html = htm.bind(h);
 
+/** Opt-in budget guards applied as defaults to schedules created for this agent. */
+function ScheduleBudgetSection({ agent, agentName, showToast }) {
+  const defaults = Array.isArray(agent?.schedule_constraint_defaults) ? agent.schedule_constraint_defaults : [];
+  const findC = (type) => defaults.find(c => c.type === type);
+  const [maxRuns, setMaxRuns] = useState({ enabled: !!findC('max_runs')?.enabled, limit: findC('max_runs')?.params?.limit ?? 7 });
+  const [dailyLimit, setDailyLimit] = useState({ enabled: !!findC('daily_limit')?.enabled, limit: agent?.daily_spend_limit ?? findC('daily_limit')?.params?.limit ?? 1 });
+  const [saving, setSaving] = useState(false);
+
+  const save = async () => {
+    const constraints = [];
+    if (maxRuns.enabled) constraints.push({ type: 'max_runs', enabled: true, params: { limit: Number(maxRuns.limit) } });
+    if (dailyLimit.enabled) constraints.push({ type: 'daily_limit', enabled: true, params: { limit: Number(dailyLimit.limit) } });
+    setSaving(true);
+    try {
+      await apiPatch(`/v1/agents/${encodeURIComponent(agentName)}/schedule-constraints`, {
+        constraints,
+        daily_spend_limit: dailyLimit.enabled ? Number(dailyLimit.limit) : null,
+      });
+      showToast?.(t('profile.scheduler.budgetSaved'));
+    } catch (e) { showToast?.(e.message, true); }
+    finally { setSaving(false); }
+  };
+
+  return html`
+    <div class="sch-form sch-budget-section">
+      <div class="section-title">${t('profile.scheduler.budgetTitle')}</div>
+      <div class="section-desc">${t('profile.scheduler.budgetDesc')}</div>
+      <div class="sch-constraints">
+        <label class="sch-check">
+          <input type="checkbox" checked=${maxRuns.enabled} onChange=${e => setMaxRuns(s => ({ ...s, enabled: e.target.checked }))} />
+          ${t('profile.scheduler.maxRuns')}
+          <input type="number" min="1" value=${maxRuns.limit} disabled=${!maxRuns.enabled}
+            onInput=${e => setMaxRuns(s => ({ ...s, limit: e.target.value }))} class="sch-num" />
+        </label>
+        <label class="sch-check">
+          <input type="checkbox" checked=${dailyLimit.enabled} onChange=${e => setDailyLimit(s => ({ ...s, enabled: e.target.checked }))} />
+          ${t('profile.scheduler.dailyLimit')}
+          <input type="number" min="0" step="0.1" value=${dailyLimit.limit} disabled=${!dailyLimit.enabled}
+            onInput=${e => setDailyLimit(s => ({ ...s, limit: e.target.value }))} class="sch-num" />
+        </label>
+      </div>
+      <div class="sch-form-actions">
+        <button class="btn-primary btn-sm" disabled=${saving} onClick=${save}>${saving ? t('profile.scheduler.saving') : t('profile.scheduler.budgetSave')}</button>
+      </div>
+    </div>`;
+}
+
 export default function TabAgentConfig({ agent, agentName, session, showToast }) {
   const [files, setFiles] = useState([]);
   const [selectedFile, setSelectedFile] = useState(null);
@@ -25,8 +76,8 @@ export default function TabAgentConfig({ agent, agentName, session, showToast })
   const [editContent, setEditContent] = useState('');
   const fileInputRef = useRef(null);
 
-  async function loadFiles() {
-    setLoading(true);
+  async function loadFiles({ showSpinner = true } = {}) {
+    if (showSpinner) setLoading(true);
     try {
       const gaii = agent?.gaii || agentName;
       const resp = await apiGet(`/v1/memory?prefix=agents.config.&agent=${encodeURIComponent(gaii)}`);
@@ -46,7 +97,7 @@ export default function TabAgentConfig({ agent, agentName, session, showToast })
         setPreview(configFiles[0].content);
       }
     } catch {
-      setFiles([]);
+      if (showSpinner) setFiles([]); // keep old files on a transient live-update refetch
     }
     setLoading(false);
   }
@@ -56,7 +107,8 @@ export default function TabAgentConfig({ agent, agentName, session, showToast })
   const loadRef = useRef(loadFiles);
   loadRef.current = loadFiles;
   useEffect(() => {
-    const handler = () => loadRef.current();
+    // Silent on live-update so the tab doesn't flash blank; first mount shows the spinner.
+    const handler = () => loadRef.current({ showSpinner: false });
     window.addEventListener('aimeat-live-update', handler);
     return () => window.removeEventListener('aimeat-live-update', handler);
   }, []);
@@ -90,7 +142,7 @@ export default function TabAgentConfig({ agent, agentName, session, showToast })
   }
 
   function handleCopy() {
-    navigator.clipboard.writeText(preview).then(() => {
+    copyToClipboard(preview).then(() => {
       showToast(t('profile.agents.detail.agent_config.copy'));
     });
   }
@@ -139,6 +191,7 @@ export default function TabAgentConfig({ agent, agentName, session, showToast })
   if (files.length === 0) {
     return html`
       <div>
+        <${ScheduleBudgetSection} agent=${agent} agentName=${agentName} showToast=${showToast} />
         <div class="pf-agd-config-upload">
           <button class="btn-outline btn-sm" onClick=${handleUploadClick}>+ ${t('profile.agents.detail.agent_config.upload')}</button>
           <input ref=${fileInputRef} type="file" accept=".md,.yaml,.yml,.json" class="pf-agd-hidden-input" onChange=${handleFileUpload} />
@@ -150,6 +203,7 @@ export default function TabAgentConfig({ agent, agentName, session, showToast })
 
   return html`
     <div>
+      <${ScheduleBudgetSection} agent=${agent} agentName=${agentName} showToast=${showToast} />
       <div class="pf-agd-config-upload">
         <button class="btn-outline btn-sm" onClick=${handleUploadClick}>+ ${t('profile.agents.detail.agent_config.upload')}</button>
         <input ref=${fileInputRef} type="file" accept=".md,.yaml,.yml,.json" class="pf-agd-hidden-input" onChange=${handleFileUpload} />

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.6.0 -- 2026-06-02 -- Component unification (#1): the 3 copy buttons (agent prompt,
+ *     install command, curl) now use the canonical <CopyButton> with precomputed text
+ *     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.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
@@ -22,7 +27,8 @@ import { h } from 'preact';
 import { useState, useEffect, useRef } from 'preact/hooks';
 import htm from 'htm';
 import { t } from '/js/i18n.js';
-import { timeAgo, copyToClipboard } from '/js/utils.js';
+import { timeAgo } from '/js/utils.js';
+import { CopyButton } from '/components/CopyButton.js';
 import { detectAgentState } from './state-detector.js';
 import {
   getOnboarding, startOnboarding,
@@ -42,15 +48,12 @@ export default function TabIntegration({ agent, onboarding, session, showToast,
   const [loading, setLoading] = useState(true);
   const [testing, setTesting] = useState(false);
   const [rerunning, setRerunning] = useState(false);
-  const [copiedCmd, setCopiedCmd] = useState(false);
-  const [copiedInstall, setCopiedInstall] = useState(false);
   const [showAllDeliveries, setShowAllDeliveries] = useState(false);
   const [allDeliveries, setAllDeliveries] = useState(null);
   const [editingWebhook, setEditingWebhook] = useState(false);
   const [webhookDraft, setWebhookDraft] = useState('');
   const [savingWebhook, setSavingWebhook] = useState(false);
   const [updatingBundle, setUpdatingBundle] = useState(false);
-  const [copiedPrompt, setCopiedPrompt] = useState(false);
 
   async function loadData({ showSpinner = true } = {}) {
     if (showSpinner) setLoading(true);
@@ -113,44 +116,23 @@ export default function TabIntegration({ agent, onboarding, session, showToast,
     setRerunning(false);
   }
 
-  function handleCopyInstall(e) {
-    e.stopPropagation();
-    const url = getSkillBundleUrl(agentName);
-    copyToClipboard(`curl -o skill-bundle.zip ${location.origin}${url}`).then(() => {
-      setCopiedCmd(true);
-      setTimeout(() => setCopiedCmd(false), 2000);
-    });
-  }
-
-  function handleCopyInstallCommand(e) {
-    e.stopPropagation();
-    const platform = onboarding?.platformName || onboarding?.detectedPlatform || '';
-    const url = `${location.origin}${getSkillBundleUrl(agentName)}`;
-    let cmd;
-    if (platform.toLowerCase().includes('hermes') || platform.toLowerCase().includes('openclaw')) {
-      cmd = `hermes skills install ${url}`;
-    } else {
-      cmd = `curl -o skill-bundle.zip ${url} && unzip skill-bundle.zip`;
-    }
-    copyToClipboard(cmd).then(() => {
-      setCopiedInstall(true);
-      setTimeout(() => setCopiedInstall(false), 2000);
-    });
-  }
-
-  function handleCopyAgentPrompt(e) {
-    e.stopPropagation();
-    const url = `${location.origin}${getSkillBundleUrl(agentName)}`;
-    const prompt = `Download and install your skill bundle from AIMEAT.
+  // Copy-button payloads (the canonical <CopyButton> owns the copy + copied-state).
+  const skillBundleUrl = `${location.origin}${getSkillBundleUrl(agentName)}`;
+  const curlText = `curl -o skill-bundle.zip ${skillBundleUrl}`;
+  const installPlatform = onboarding?.platformName || onboarding?.detectedPlatform || '';
+  const installCmdText = (installPlatform.toLowerCase().includes('hermes') || installPlatform.toLowerCase().includes('openclaw'))
+    ? `hermes skills install ${skillBundleUrl}`
+    : `curl -o skill-bundle.zip ${skillBundleUrl} && unzip skill-bundle.zip`;
+  const agentPromptText = `Download and install your skill bundle from AIMEAT.
 
-Your skill bundle URL: ${url}
+Your skill bundle URL: ${skillBundleUrl}
 
 Steps:
 1. Authenticate with your agent token: POST ${location.origin}/v1/auth/token
    Sign the challenge with your private key to get a JWT.
 
 2. Download the skill bundle ZIP:
-   GET ${url}
+   GET ${skillBundleUrl}
    Header: Authorization: Bearer <your-jwt>
    Save the response as a ZIP file.
 
@@ -162,12 +144,7 @@ Steps:
 4. Read SKILL.md first -- it has your personalized directives, rules, and all the API endpoints you need.
 
 If you already have a JWT token, you can do this in one step:
-curl -H "Authorization: Bearer <jwt>" -o skill-bundle.zip "${url}" && unzip skill-bundle.zip && cat */SKILL.md`;
-    copyToClipboard(prompt).then(() => {
-      setCopiedPrompt(true);
-      setTimeout(() => setCopiedPrompt(false), 3000);
-    });
-  }
+curl -H "Authorization: Bearer <jwt>" -o skill-bundle.zip "${skillBundleUrl}" && unzip skill-bundle.zip && cat */SKILL.md`;
 
   function handleEditWebhook(e) {
     e.stopPropagation();
@@ -212,7 +189,7 @@ curl -H "Authorization: Bearer <jwt>" -o skill-bundle.zip "${url}" && unzip skil
   const isOnboarding = state === 'new' || state === 'onboarding';
 
   if (isOnboarding) {
-    return renderOnboardingView(onboarding, agentName, handleRerun, rerunning, handleCopyInstall, copiedCmd, handleCopyInstallCommand, copiedInstall, handleCopyAgentPrompt, copiedPrompt);
+    return renderOnboardingView(onboarding, agentName, handleRerun, rerunning, curlText, installCmdText, agentPromptText);
   }
 
   async function handleShowAll() {
@@ -226,10 +203,10 @@ curl -H "Authorization: Bearer <jwt>" -o skill-bundle.zip "${url}" && unzip skil
 
   const displayDeliveries = showAllDeliveries && allDeliveries ? allDeliveries : deliveries;
 
-  return renderProductionView(agent, onboarding, webhook, bundleVersion, displayDeliveries, handleTestWebhook, testing, handleRerun, rerunning, handleCopyInstall, copiedCmd, handleShowAll, showAllDeliveries, editingWebhook, webhookDraft, setWebhookDraft, handleEditWebhook, handleSaveWebhook, handleCancelWebhook, savingWebhook, handleUpdateBundle, updatingBundle, handleCopyInstallCommand, copiedInstall, handleCopyAgentPrompt, copiedPrompt, postChecklist);
+  return renderProductionView(agent, onboarding, webhook, bundleVersion, displayDeliveries, handleTestWebhook, testing, handleRerun, rerunning, curlText, handleShowAll, showAllDeliveries, editingWebhook, webhookDraft, setWebhookDraft, handleEditWebhook, handleSaveWebhook, handleCancelWebhook, savingWebhook, handleUpdateBundle, updatingBundle, agentPromptText, postChecklist);
 }
 
-function renderOnboardingView(onboarding, agentName, handleRerun, rerunning, handleCopyInstall, copiedCmd, handleCopyInstallCommand, copiedInstall, handleCopyAgentPrompt, copiedPrompt) {
+function renderOnboardingView(onboarding, agentName, handleRerun, rerunning, curlText, installCmdText, agentPromptText) {
   const steps = onboarding?.steps || [];
   const passed = steps.filter(s => s.status === 'passed').length;
   const total = steps.length || 11;
@@ -269,15 +246,15 @@ function renderOnboardingView(onboarding, agentName, handleRerun, rerunning, han
       <div class="pf-agd-section">
         <div class="pf-agd-section-label">${t('profile.agents.skillBundle.title')}</div>
         <div class="pf-agd-form-actions">
-          <button class="btn-primary btn-sm" onClick=${handleCopyAgentPrompt}>
-            ${copiedPrompt ? '✓ ' + t('profile.agents.detail.integration.promptCopied') : t('profile.agents.detail.integration.copyAgentPrompt')}
-          </button>
-          <button class="btn-outline btn-sm" onClick=${handleCopyInstallCommand}>
-            ${copiedInstall ? '✓ ' + t('profile.agents.detail.integration.installCommandCopied') : t('profile.agents.detail.integration.copyInstallCommand')}
-          </button>
-          <button class="btn-outline btn-sm" onClick=${handleCopyInstall}>
-            ${copiedCmd ? '✓ ' + t('profile.agents.copied') : t('profile.agents.skillBundle.copyCurl')}
-          </button>
+          <${CopyButton} text=${agentPromptText} className="btn-primary btn-sm"
+            label=${t('profile.agents.detail.integration.copyAgentPrompt')}
+            copiedLabel=${'✓ ' + t('profile.agents.detail.integration.promptCopied')} />
+          <${CopyButton} text=${installCmdText} className="btn-outline btn-sm"
+            label=${t('profile.agents.detail.integration.copyInstallCommand')}
+            copiedLabel=${'✓ ' + t('profile.agents.detail.integration.installCommandCopied')} />
+          <${CopyButton} text=${curlText} className="btn-outline btn-sm"
+            label=${t('profile.agents.skillBundle.copyCurl')}
+            copiedLabel=${'✓ ' + t('profile.agents.copied')} />
           <a class="btn-outline btn-sm" href=${getSkillBundleUrl(agentName)} download>
             ${t('profile.agents.skillBundle.downloadZip')}
           </a>
@@ -293,7 +270,7 @@ function renderOnboardingView(onboarding, agentName, handleRerun, rerunning, han
   `;
 }
 
-function renderProductionView(agent, onboarding, webhook, bundleVersion, displayDeliveries, handleTestWebhook, testing, handleRerun, rerunning, handleCopyInstall, copiedCmd, handleShowAll, showAllDeliveries, editingWebhook, webhookDraft, setWebhookDraft, handleEditWebhook, handleSaveWebhook, handleCancelWebhook, savingWebhook, handleUpdateBundle, updatingBundle, handleCopyInstallCommand, copiedInstall, handleCopyAgentPrompt, copiedPrompt, postChecklist) {
+function renderProductionView(agent, onboarding, webhook, bundleVersion, displayDeliveries, handleTestWebhook, testing, handleRerun, rerunning, curlText, handleShowAll, showAllDeliveries, editingWebhook, webhookDraft, setWebhookDraft, handleEditWebhook, handleSaveWebhook, handleCancelWebhook, savingWebhook, handleUpdateBundle, updatingBundle, agentPromptText, postChecklist) {
   const steps = onboarding?.steps || [];
   const agentName = agent.name;
 
@@ -397,12 +374,12 @@ function renderProductionView(agent, onboarding, webhook, bundleVersion, display
           </div>
         ` : ''}
         <div class="pf-agd-form-actions">
-          <button class="btn-primary btn-sm" onClick=${handleCopyAgentPrompt}>
-            ${copiedPrompt ? '✓ ' + t('profile.agents.detail.integration.promptCopied') : t('profile.agents.detail.integration.copyAgentPrompt')}
-          </button>
-          <button class="btn-outline btn-sm" onClick=${handleCopyInstall}>
-            ${copiedCmd ? '✓ ' + t('profile.agents.copied') : t('profile.agents.skillBundle.reinstall')}
-          </button>
+          <${CopyButton} text=${agentPromptText} className="btn-primary btn-sm"
+            label=${t('profile.agents.detail.integration.copyAgentPrompt')}
+            copiedLabel=${'✓ ' + t('profile.agents.detail.integration.promptCopied')} />
+          <${CopyButton} text=${curlText} className="btn-outline btn-sm"
+            label=${t('profile.agents.skillBundle.reinstall')}
+            copiedLabel=${'✓ ' + t('profile.agents.copied')} />
           <button class="btn-outline btn-sm" onClick=${handleUpdateBundle} disabled=${updatingBundle}>
             ${updatingBundle ? '...' : t('profile.agents.detail.integration.update')}
           </button>

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.4.0 -- 2026-06-02 -- Render agent (outbound) message bodies as Markdown via the
+ *     shared safe vnode Markdown component, so LLM replies (bold, lists, code,
+ *     tables) display formatted. Owner inbound messages stay literal text.
  *   v1.3.0 -- 2026-05-30 -- Render agent single-select option-prompts (metadata.prompt) as
  *     clickable chips + an implicit "Other"; clicking sends a correlated prompt_answer. A
  *     prompt locks (read-only, chosen chip highlighted) once a newer message exists.
@@ -18,6 +21,7 @@ import { t } from '/js/i18n.js';
 import { timeAgo } from '/js/utils.js';
 import { sendMessage, listMessages, listThreads } from '/js/services/agent-messages.js';
 import { getAgentCommands } from '/js/services/agent-integration.js';
+import { Markdown } from '/components/Markdown.js';
 
 const html = htm.bind(h);
 
@@ -222,7 +226,12 @@ export default function TabMessages({ agent, agentName, session, showToast }) {
       <div key=${msg.id || msg.createdAt}>
         <div class="pf-agd-msg-bubble ${msg.direction === 'inbound' ? 'pf-agd-msg-inbound' : 'pf-agd-msg-outbound'} ${isCommand ? 'pf-agd-msg-command' : ''} ${isReply ? 'pf-agd-msg-reply' : ''}">
           ${isCommand && html`<span class="pf-agd-command-badge">${t('profile.agents.detail.messages.command')}</span>`}
-          ${msg.content}
+          ${msg.direction === 'outbound'
+            // Agent replies are markdown (LLM output). Render them safely via the
+            // shared vnode Markdown component. Owner-typed inbound messages stay
+            // literal — the input is a plain text field, not markdown.
+            ? html`<${Markdown} text=${msg.content || ''} />`
+            : msg.content}
         </div>
         <div class="pf-agd-msg-meta ${msg.direction === 'inbound' ? 'pf-agd-msg-meta-right' : ''}">
           ${msg.createdAt ? html`<span class="pf-agd-msg-time">${new Date(msg.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span> ${timeAgo(msg.createdAt)}` : ''}

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

@@ -10,6 +10,9 @@
  * @structure default export TabQuality({ agentName })
  * @usage rendered by agent-card.js renderTabContent() for the 'quality' tab
  * @version-history
+ *   v1.2.0 -- 2026-06-01 -- Stop the empty flash on refresh: only show the loading
+ *     state on first load; live-update refetches swap data in place (and keep the
+ *     last good data on a transient error) instead of blanking the tab.
  *   v1.1.0 -- 2026-05-31 -- Add "Rate deliverables" list: completed tasks the owner
  *     can rate inline via the shared RateModal (unrated first); refreshes the
  *     rollups on submit.
@@ -50,15 +53,18 @@ export default function TabQuality({ agentName, showToast }) {
   const [sendingRate, setSendingRate] = useState(false);
 
   async function loadData() {
-    setLoading(true);
+    // NB: do NOT blank `data`/`loading` here. The initial render shows the
+    // loading state (loading starts true); every later call -- including
+    // 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),
       ]);
-      setData(statsResp?.data || null);
+      if (statsResp?.data) setData(statsResp.data);
       setDoneTasks(tasksResp?.data?.tasks || []);
-    } catch { setData(null); }
+    } catch { /* keep showing the last good data on a transient error */ }
     setLoading(false);
   }
 
@@ -104,26 +110,26 @@ export default function TabQuality({ agentName, showToast }) {
       <!-- Performance -->
       <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="pf-agd-stats-grid">
-        <div class="pf-agd-stat-card">
-          <div class="pf-agd-stat-value">${perf.tasks?.total ?? 0}</div>
-          <div class="pf-agd-stat-label">${t('profile.agents.detail.quality.tasksTotal')}</div>
+      <div class="stat-grid">
+        <div class="stat-card">
+          <div class="stat-card-value">${perf.tasks?.total ?? 0}</div>
+          <div class="stat-card-label">${t('profile.agents.detail.quality.tasksTotal')}</div>
         </div>
-        <div class="pf-agd-stat-card">
-          <div class="pf-agd-stat-value">${perf.tasks?.completed ?? 0}</div>
-          <div class="pf-agd-stat-label">${t('profile.agents.detail.quality.tasksCompleted')}</div>
+        <div class="stat-card">
+          <div class="stat-card-value">${perf.tasks?.completed ?? 0}</div>
+          <div class="stat-card-label">${t('profile.agents.detail.quality.tasksCompleted')}</div>
         </div>
-        <div class="pf-agd-stat-card">
-          <div class="pf-agd-stat-value">${perf.tasks?.successRate != null ? `${Math.round(perf.tasks.successRate * 100)}%` : '-'}</div>
-          <div class="pf-agd-stat-label">${t('profile.agents.detail.quality.successRate')}</div>
+        <div class="stat-card">
+          <div class="stat-card-value">${perf.tasks?.successRate != null ? `${Math.round(perf.tasks.successRate * 100)}%` : '-'}</div>
+          <div class="stat-card-label">${t('profile.agents.detail.quality.successRate')}</div>
         </div>
-        <div class="pf-agd-stat-card">
-          <div class="pf-agd-stat-value">${fmtSeconds(perf.duration?.avgCompletionSeconds)}</div>
-          <div class="pf-agd-stat-label">${t('profile.agents.detail.quality.avgTime')}</div>
+        <div class="stat-card">
+          <div class="stat-card-value">${fmtSeconds(perf.duration?.avgCompletionSeconds)}</div>
+          <div class="stat-card-label">${t('profile.agents.detail.quality.avgTime')}</div>
         </div>
-        <div class="pf-agd-stat-card">
-          <div class="pf-agd-stat-value">${perf.events?.total ?? 0}</div>
-          <div class="pf-agd-stat-label">${t('profile.agents.detail.quality.events')}</div>
+        <div class="stat-card">
+          <div class="stat-card-value">${perf.events?.total ?? 0}</div>
+          <div class="stat-card-label">${t('profile.agents.detail.quality.events')}</div>
         </div>
       </div>
       ${durKeys.length > 0 && html`

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

@@ -0,0 +1,110 @@
+/**
+ * @file tab-schedules.js
+ * @description Agent detail › Schedules sub-tab. Shows this agent's schedules in
+ *   two groups: AIMEAT-dispatched (server-managed; full controls) and Agent
+ *   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.0.0 -- 2026-06-03 -- Initial agent Schedules sub-tab
+ */
+import { h } from 'preact';
+import { useState, useEffect, useRef, useCallback } from 'preact/hooks';
+import htm from 'htm';
+import { t } from '/js/i18n.js';
+import { timeAgo } from '/js/utils.js';
+import { listAgentSchedules, setScheduleEnabled, triggerSchedule, deleteSchedule } from '/js/services/schedules.js';
+import { CreateForm } from '../scheduler-tab.js';
+
+const html = htm.bind(h);
+
+const KIND_LABEL = { ai: 'profile.scheduler.kind.ai', agent_task: 'profile.scheduler.kind.agent_task', extension: 'profile.scheduler.kind.extension', core: 'profile.scheduler.kind.core' };
+
+export default function TabSchedules({ agentName, allAgents = [], showToast }) {
+  const [managed, setManaged] = useState([]);
+  const [internal, setInternal] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [showForm, setShowForm] = useState(false);
+
+  const loadData = useCallback(async () => {
+    try {
+      const res = await listAgentSchedules(agentName);
+      setManaged(res?.data?.managed || []);
+      setInternal(res?.data?.agentInternal || []);
+    } catch (e) {
+      showToast?.(e.message, true);
+    } finally { setLoading(false); }
+  }, [agentName, showToast]);
+
+  const loadRef = useRef(loadData);
+  loadRef.current = loadData;
+  useEffect(() => {
+    loadData();
+    const handler = () => loadRef.current();
+    window.addEventListener('aimeat-live-update', handler);
+    const poller = setInterval(() => loadRef.current(), 15000);
+    return () => { window.removeEventListener('aimeat-live-update', handler); clearInterval(poller); };
+  }, [loadData]);
+
+  const onToggle = async (j) => { try { await setScheduleEnabled(j.id, !j.enabled); await loadData(); } catch (e) { showToast?.(e.message, true); } };
+  const onTrigger = async (j) => { try { await triggerSchedule(j.id); showToast?.(t('profile.scheduler.triggered')); await loadData(); } catch (e) { showToast?.(e.message, true); } };
+  const onCancel = async (j) => {
+    if (!window.confirm(t('profile.scheduler.confirmCancel'))) return;
+    try { await deleteSchedule(j.id); showToast?.(t('profile.scheduler.cancelled')); await loadData(); } catch (e) { showToast?.(e.message, true); }
+  };
+
+  if (loading) return html`<div class="sch-loading">${t('profile.scheduler.loading')}</div>`;
+
+  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')}
+        </button>
+      </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>
+        ${managed.length === 0
+          ? html`<div class="sch-empty">${t('profile.scheduler.noDispatched')}</div>`
+          : html`<table class="sch-table"><thead><tr>
+              <th>${t('profile.scheduler.col.name')}</th>
+              <th>${t('profile.scheduler.col.kind')}</th>
+              <th>${t('profile.scheduler.col.cron')}</th>
+              <th>${t('profile.scheduler.col.lastRun')}</th>
+              <th>${t('profile.scheduler.col.nextRun')}</th>
+              <th></th>
+            </tr></thead><tbody>
+            ${managed.map(j => html`<tr key=${j.id}>
+              <td><div class="sch-name">${j.displayName || j.name}</div>${j.createdByAgent && html`<span class="sch-tag">${t('profile.scheduler.byAgent')}</span>`}</td>
+              <td><span class="sch-badge sch-badge--${j.type === 'ai' ? 'ai' : j.type === 'extension' ? 'ext' : 'agent'}">${t(KIND_LABEL[j.type] || KIND_LABEL.core)}</span></td>
+              <td><code class="sch-cron">${j.cron}</code>${j.timezone && html`<div class="sch-muted">${j.timezone}</div>`}</td>
+              <td>${j.lastRunAt ? timeAgo(j.lastRunAt) : html`<span class="sch-muted">${t('profile.scheduler.never')}</span>`} ${j.lastRunResult ? html`<span class="sch-badge ${j.lastRunResult === 'error' ? 'sch-badge--err' : 'sch-badge--ok'}">${j.lastRunResult}</span>` : ''}</td>
+              <td>${j.nextRunAt ? timeAgo(j.nextRunAt) : html`<span class="sch-muted">—</span>`}</td>
+              <td class="sch-actions">
+                <button class="btn-ghost sch-btn" onClick=${() => onToggle(j)}>${j.enabled ? t('profile.scheduler.pause') : t('profile.scheduler.resume')}</button>
+                <button class="btn-ghost sch-btn" onClick=${() => onTrigger(j)}>${t('profile.scheduler.runNow')}</button>
+                <button class="btn-danger sch-btn" onClick=${() => onCancel(j)}>${t('profile.scheduler.cancel')}</button>
+              </td>
+            </tr>`)}
+          </tbody></table>`}
+      </div>
+
+      <div class="sch-section">
+        <h3 class="sch-section-title">${t('profile.scheduler.internalTitle')}</h3>
+        <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`<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>
+              <td><code class="sch-cron">${e.cron || e.schedule || '—'}</code>${e.timezone && html`<div class="sch-muted">${e.timezone}</div>`}</td>
+              <td>${e.status || 'active'}</td>
+            </tr>`)}
+          </tbody></table>`}
+      </div>
+    </div>`;
+}

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

@@ -35,11 +35,11 @@ function StatsCards({ stats }) {
   ];
 
   return html`
-    <div class="agd-stats-grid">
+    <div class="stat-grid">
       ${cards.map(c => html`
-        <div class="agd-stat-card" key=${c.key}>
-          <div class="agd-stat-value">${c.value}</div>
-          <div class="agd-stat-label">${t(`profile.agents.activity.${c.key}`)}</div>
+        <div class="stat-card" key=${c.key}>
+          <div class="stat-card-value">${c.value}</div>
+          <div class="stat-card-label">${t(`profile.agents.activity.${c.key}`)}</div>
         </div>
       `)}
     </div>

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

@@ -55,13 +55,13 @@ export default function AgentServicesSubtab({ agentName, session, showToast }) {
   const [services, setServices] = useState([]);
   const [loading, setLoading] = useState(true);
 
-  async function loadServices() {
-    setLoading(true);
+  async function loadServices({ showSpinner = true } = {}) {
+    if (showSpinner) setLoading(true);
     try {
       const res = await getAgentServices(agentName);
       setServices(res.actions || []);
     } catch (err) {
-      showToast(err.message || t('profile.agents.services.loadError'), true);
+      if (showSpinner) showToast(err.message || t('profile.agents.services.loadError'), true);
     }
     setLoading(false);
   }
@@ -88,7 +88,8 @@ export default function AgentServicesSubtab({ agentName, session, showToast }) {
   useEffect(() => { loadServices(); }, [agentName]);
 
   useEffect(() => {
-    const handler = () => { loadServices(); };
+    // Silent refetch on live-update so the tab doesn't flash blank.
+    const handler = () => { loadServices({ showSpinner: false }); };
     window.addEventListener('aimeat-live-update', handler);
     return () => window.removeEventListener('aimeat-live-update', handler);
   }, [agentName]);