aimeat 1.15.0 → 1.16.0

package/dist/locales/en.json

@@ -458,6 +458,10 @@
         "deliverable": "Deliverable",
         "viewDeliverable": "View",
         "deliverableGone": "The deliverable entry no longer exists.",
+        "cancel": "Cancel",
+        "cancelConfirm": "Cancel this task? Work that hasn't started will be skipped",
+        "cancelled": "Task cancelled",
+        "cancelError": "Failed to cancel task",
         "revision_requested": "Revision requested",
         "requestChanges": "Request changes",
         "requestChangesTitle": "Ask the agent to revise the plan",
@@ -469,6 +473,8 @@
         "requestChangesError": "Failed to send change request",
         "revisionWaiting": "Waiting for the agent to propose a revised plan.",
         "outdatedTodos": "Previously proposed (outdated)",
+        "blurTitle": "Hide title (blur for screen recording)",
+        "unblurTitle": "Show title",
         "builder": {
           "title": "New Task",
           "placeholder": "What should the agent do? Describe in plain language or technical detail.",
@@ -649,7 +655,39 @@
           "directives": "Directives",
           "agent_config": "Agent Config",
           "activity": "Activity",
-          "services": "Services"
+          "services": "Services",
+          "quality": "Quality"
+        },
+        "quality": {
+          "performanceTitle": "Performance",
+          "performanceDesc": "How much this agent has done and how fast — computed from its tasks.",
+          "reviewsTitle": "Reviews by context",
+          "reviewsDesc": "Per-context star ratings of the agent's deliverables. Factual contexts are source-grounded.",
+          "customTitle": "Custom metrics",
+          "customDesc": "Metrics the agent publishes about itself.",
+          "tasksTotal": "Tasks",
+          "tasksCompleted": "Completed",
+          "tasksFailed": "Failed",
+          "successRate": "Success rate",
+          "avgTime": "Avg make-time",
+          "events": "Events",
+          "overall": "Overall",
+          "ratings": "{count} ratings",
+          "lowConfidence": "Low confidence (small sample)",
+          "noReviews": "No reviews yet. Rate a completed task to start building quality stats.",
+          "noCustom": "No custom metrics published.",
+          "grounded": "{count} source-grounded",
+          "seconds": "s",
+          "contexts": {
+            "factual": "Factual",
+            "creative": "Creative",
+            "code": "Code",
+            "planning": "Planning",
+            "summarization": "Summarization",
+            "research": "Research",
+            "communication": "Communication",
+            "other": "Other"
+          }
         },
         "state": {
           "new": "New",

package/dist/locales/fi.json

@@ -458,6 +458,10 @@
         "deliverable": "Tuotos",
         "viewDeliverable": "Näytä",
         "deliverableGone": "Tuotosmerkintää ei ole enää olemassa.",
+        "cancel": "Peruuta",
+        "cancelConfirm": "Peruutetaanko tämä tehtävä? Aloittamaton työ ohitetaan",
+        "cancelled": "Tehtävä peruutettu",
+        "cancelError": "Tehtävän peruutus epäonnistui",
         "revision_requested": "Korjauspyyntö lähetetty",
         "requestChanges": "Pyydä muutoksia",
         "requestChangesTitle": "Pyydä agenttia muokkaamaan suunnitelmaa",
@@ -469,6 +473,8 @@
         "requestChangesError": "Muutospyynnön lähetys epäonnistui",
         "revisionWaiting": "Odotetaan agentin korjattua ehdotusta.",
         "outdatedTodos": "Aiemmin ehdotetut (vanhentuneet)",
+        "blurTitle": "Piilota otsikko (sumenna ruutunauhoitusta varten)",
+        "unblurTitle": "Näytä otsikko",
         "builder": {
           "title": "Uusi tehtävä",
           "placeholder": "Mitä agentin pitäisi tehdä? Kuvaile selkokielellä tai teknisesti.",
@@ -649,7 +655,39 @@
           "directives": "Ohjeistukset",
           "agent_config": "Agenttiasetukset",
           "activity": "Toiminta",
-          "services": "Palvelut"
+          "services": "Palvelut",
+          "quality": "Laatu"
+        },
+        "quality": {
+          "performanceTitle": "Suorituskyky",
+          "performanceDesc": "Kuinka paljon agentti on tehnyt ja kuinka nopeasti — laskettu sen tehtävistä.",
+          "reviewsTitle": "Arviot konteksteittain",
+          "reviewsDesc": "Agentin tuotosten tähtiarviot konteksteittain. Faktakontekstit ovat lähteisiin perustuvia.",
+          "customTitle": "Omat mittarit",
+          "customDesc": "Mittarit, joita agentti julkaisee itsestään.",
+          "tasksTotal": "Tehtäviä",
+          "tasksCompleted": "Valmiit",
+          "tasksFailed": "Epäonnistuneet",
+          "successRate": "Onnistumisaste",
+          "avgTime": "Keskim. tekoaika",
+          "events": "Tapahtumia",
+          "overall": "Kokonaisuus",
+          "ratings": "{count} arviota",
+          "lowConfidence": "Matala luottamus (pieni otos)",
+          "noReviews": "Ei vielä arvioita. Arvioi valmis tehtävä aloittaaksesi laatutilastojen kerryttämisen.",
+          "noCustom": "Ei julkaistuja omia mittareita.",
+          "grounded": "{count} lähteistettyä",
+          "seconds": "s",
+          "contexts": {
+            "factual": "Faktatieto",
+            "creative": "Luova",
+            "code": "Koodi",
+            "planning": "Suunnittelu",
+            "summarization": "Tiivistäminen",
+            "research": "Tutkimus",
+            "communication": "Viestintä",
+            "other": "Muu"
+          }
         },
         "state": {
           "new": "Uusi",

package/dist/public/css/views/agents-detail.css

@@ -23,8 +23,10 @@
  *   v2.8.0 -- 2026-05-31 -- Add pop-out button (pf-agd-popout-btn), drag-to-reorder rows (pf-agd-dnd-*), and solo pop-out window layout (pf-agd-solo*)
  *   v2.9.0 -- 2026-05-31 -- Collapsed bar two-row layout (pf-agd-collapsed-main + pf-agd-collapsed-meta divider) to stop status overflow; move drag grip into the left margin so the card border stays flush
  *   v2.10.0 -- 2026-05-31 -- Extend the drag-row drop target left over the grip gutter (padding-left + negative margin-left) so dropping on/near the handle registers; card border stays aligned
+ *   v2.11.0 -- 2026-05-31 -- Add Quality tab styles (per-context review rows, duration chips, custom-metric rows)
  *   v2.11.0 -- 2026-05-31 -- Widen the solo pop-out window (and pf-agd-solo max-width) so the agent card matches the list-view width and the full tab bar fits
  *   v2.12.0 -- 2026-05-31 -- Add completed-task deliverable styles (pf-agd-deliverable*) linking a task to its agent-memory output key
+ *   v2.13.0 -- 2026-05-31 -- Add per-task blur-title toggle styles (pf-agd-blur-toggle, pf-agd-task-title--blurred) for hiding sensitive titles in screen recordings
  */
 
 /* Header row: title left, connect button right */
@@ -2528,6 +2530,29 @@
   align-items: center;
   gap: 0.5rem;
 }
+
+/* Per-task "hide title" toggle (eye icon) -- used to blur sensitive titles for
+   screen recordings. Preference is browser-only (localStorage). */
+.pf .pf-agd-blur-toggle  {
+  flex-shrink: 0;
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font-size: 0.95rem;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.45;
+  transition: opacity 0.15s ease;
+}
+.pf .pf-agd-blur-toggle:hover  { opacity: 0.9; }
+.pf .pf-agd-blur-toggle--on  { opacity: 0.85; }
+
+.pf .pf-agd-task-title--blurred  {
+  filter: blur(5px);
+  user-select: none;
+  cursor: pointer;
+}
 .pf .agd-task-group-title ,
 .pf .pf-agd-task-group-title  {
   margin-top: 0.5rem;
@@ -2655,3 +2680,113 @@
   border-left: 2px solid var(--info, #3B82F6);
   padding-left: 0.5rem;
 }
+
+/* ── Quality tab ── */
+
+.pf .pf-agd-quality-desc {
+  font-size: 0.8rem;
+  color: var(--text-dim, #6B7280);
+  margin: 0.25rem 0 0.75rem;
+  line-height: 1.45;
+}
+
+.pf .pf-agd-quality .pf-agd-section-title {
+  margin-top: 1.25rem;
+}
+
+/* Duration-by-context chips under the performance cards */
+.pf .pf-agd-quality-durations {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  margin-bottom: 0.5rem;
+}
+.pf .pf-agd-quality-dur-chip {
+  font-size: 0.75rem;
+  color: var(--text-dim, #6B7280);
+  background: var(--bg-dim, #F3F4F6);
+  border: 1px solid var(--border, #E5E7EB);
+  border-radius: 6px;
+  padding: 0.15rem 0.5rem;
+}
+
+/* Per-context review rows */
+.pf .pf-agd-quality-reviews {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.pf .pf-agd-quality-review-row {
+  border: 1px solid var(--border, #E5E7EB);
+  border-radius: 8px;
+  padding: 0.6rem 0.75rem;
+  background: var(--card-bg, #FFFFFF);
+}
+.pf .pf-agd-quality-review-head {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+.pf .pf-agd-quality-ctx {
+  font-weight: 600;
+  color: var(--text, #1A1A2E);
+  min-width: 7rem;
+}
+.pf .pf-agd-quality-stars {
+  color: var(--accent, #E8564A);
+  letter-spacing: 1px;
+}
+.pf .pf-agd-quality-avg {
+  font-weight: 600;
+  color: var(--text, #1A1A2E);
+}
+.pf .pf-agd-quality-n {
+  font-size: 0.75rem;
+  color: var(--text-muted, #9CA3AF);
+}
+.pf .pf-agd-quality-lowconf {
+  font-size: 0.7rem;
+  color: var(--warning, #D97706);
+  border: 1px solid var(--warning, #D97706);
+  border-radius: 6px;
+  padding: 0.05rem 0.4rem;
+}
+.pf .pf-agd-quality-review-meta {
+  font-size: 0.72rem;
+  color: var(--text-muted, #9CA3AF);
+  margin-top: 0.3rem;
+}
+.pf .pf-agd-quality-overall {
+  margin-top: 0.4rem;
+  font-size: 0.85rem;
+  color: var(--text-dim, #6B7280);
+}
+.pf .pf-agd-quality-overall .pf-agd-quality-stars,
+.pf .pf-agd-quality-overall {
+  letter-spacing: 0.5px;
+}
+
+/* Custom metric rows */
+.pf .pf-agd-quality-custom {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+.pf .pf-agd-quality-custom-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  font-size: 0.8rem;
+  padding: 0.3rem 0;
+  border-bottom: 1px solid var(--border, #E5E7EB);
+}
+.pf .pf-agd-quality-custom-key {
+  color: var(--text-dim, #6B7280);
+  font-family: var(--font-mono, monospace);
+}
+.pf .pf-agd-quality-custom-val {
+  color: var(--text, #1A1A2E);
+  text-align: right;
+  word-break: break-word;
+}

package/dist/public/js/services/agent-tasks.js

@@ -6,6 +6,7 @@
  * @version-history
  *   v1.0.0 -- 2026-05-21 -- Initial creation for Agent Dashboard Phase 1
  *   v1.1.0 -- 2026-05-29 -- Add requestChanges() for the owner-asks-agent-to-revise-todos flow.
+ *   v1.2.0 -- 2026-05-31 -- Add rateTask() and getAgentStatistics() for the Quality tab.
  */
 import { apiGet, apiPost, apiDelete } from '/js/api.js';
 
@@ -49,3 +50,13 @@ export async function requestChanges(agentName, taskId, message) {
 export async function listEvents(agentName, taskId) {
   return apiGet(`/v1/agents/${encodeURIComponent(agentName)}/tasks/${encodeURIComponent(taskId)}/events`);
 }
+
+/** Review a completed task's deliverable. body: { stars, context, comment?, source_grounded?, unsupported?, evaluated_model? } */
+export async function rateTask(agentName, taskId, body) {
+  return apiPost(`/v1/agents/${encodeURIComponent(agentName)}/tasks/${encodeURIComponent(taskId)}/rate`, body);
+}
+
+/** Quality tab: recomputed performance + per-context review rollups + custom metrics. */
+export async function getAgentStatistics(agentName) {
+  return apiGet(`/v1/agents/${encodeURIComponent(agentName)}/statistics`);
+}

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

@@ -1,8 +1,9 @@
 /**
  * @file agent-card.js
  * @description Agent card component with collapsed/expanded states,
- *   Two-Zone Header (identity + state-dependent status), and 8-tab bar.
+ *   Two-Zone Header (identity + state-dependent status), and tab bar.
  * @version-history
+ *   v1.8.0 -- 2026-05-31 -- Add Quality tab (per-context reviews + performance + custom stats)
  *   v1.0.0 -- 2026-05-24 -- Initial creation for Agent Detail Tab-View
  *   v1.1.0 -- 2026-05-24 -- Fix C6: remove GAII from Zone 1, M1: add Next prefix, C1: production stats, C2: problem action buttons
  *   v1.3.0 -- 2026-05-24 -- Audit fix: use proper down arrow glyph for collapse icon
@@ -36,6 +37,7 @@ import TabDataAccess from './tab-data-access.js';
 import TabDirectives from './tab-directives.js';
 import TabAgentConfig from './tab-agent-config.js';
 import TabActivity from './tab-activity.js';
+import TabQuality from './tab-quality.js';
 import TabServices from './tab-services.js';
 
 const html = htm.bind(h);
@@ -50,6 +52,7 @@ const TABS = [
   { id: 'directives', key: 'profile.agents.detail.tabs.directives' },
   { id: 'agent-config', key: 'profile.agents.detail.tabs.agent_config' },
   { id: 'activity', key: 'profile.agents.detail.tabs.activity' },
+  { id: 'quality', key: 'profile.agents.detail.tabs.quality' },
   { id: 'services', key: 'profile.agents.detail.tabs.services' },
 ];
 
@@ -488,6 +491,7 @@ function renderTabContent(activeTab, agent, onboarding, session, showToast, allA
     case 'directives': return html`<${TabDirectives} ...${props} />`;
     case 'agent-config': return html`<${TabAgentConfig} ...${props} />`;
     case 'activity': return html`<${TabActivity} ...${props} />`;
+    case 'quality': return html`<${TabQuality} ...${props} />`;
     case 'services': return html`<${TabServices} ...${props} />`;
     default: return null;
   }

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

@@ -4,6 +4,10 @@
  *   during onboarding or production status (connection, platform, readiness,
  *   identity, delivery log) after completion.
  * @version-history
+ *   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
+ *     "Loading..." state on every tick -- the tab flashed like a full reload.
  *   v1.4.0 -- 2026-05-28 -- Treat webhook with empty url as polling: status dot, label, and
  *                            the webhook section all key off (webhook && webhook.url), not just
  *                            the webhook object existing. A record with url="" is still polling.
@@ -48,8 +52,8 @@ export default function TabIntegration({ agent, onboarding, session, showToast,
   const [updatingBundle, setUpdatingBundle] = useState(false);
   const [copiedPrompt, setCopiedPrompt] = useState(false);
 
-  async function loadData() {
-    setLoading(true);
+  async function loadData({ showSpinner = true } = {}) {
+    if (showSpinner) setLoading(true);
     try {
       const [whResp, sbResp, dlResp, obResp] = await Promise.all([
         getWebhookConfig(agentName).catch(() => null),
@@ -62,7 +66,7 @@ export default function TabIntegration({ agent, onboarding, session, showToast,
       setDeliveries(dlResp?.data?.deliveries || []);
       setPostChecklist(obResp?.data?.post_onboarding_checklist || null);
     } catch { /* silent */ }
-    setLoading(false);
+    if (showSpinner) setLoading(false);
   }
 
   useEffect(() => { loadData(); }, [agentName]);
@@ -70,7 +74,11 @@ export default function TabIntegration({ agent, onboarding, session, showToast,
   const loadRef = useRef(loadData);
   loadRef.current = loadData;
   useEffect(() => {
-    const handler = () => loadRef.current();
+    // Background refresh on every live-update WITHOUT toggling the full-tab
+    // "Loading..." placeholder. During Hello Integration the agent posts steps
+    // + telemetry rapidly, so this fires often; showing the spinner each time
+    // made the whole tab flash like a reload. Initial mount still shows it.
+    const handler = () => loadRef.current({ showSpinner: false });
     window.addEventListener('aimeat-live-update', handler);
     return () => window.removeEventListener('aimeat-live-update', handler);
   }, []);

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

@@ -0,0 +1,159 @@
+/**
+ * @file tab-quality.js
+ * @description Quality tab for the expanded agent view. Reads the recomputed
+ *   GET /v1/agents/:name/statistics rollups and renders three sections:
+ *   Performance (task counts, success rate, make-time, durations by context),
+ *   Reviews by context (per-context star ratings + sample size + low-confidence
+ *   flag), and Custom metrics (whatever the agent published under
+ *   agents.<name>.statistics.custom.*). Quality READS statistics + reviews — it
+ *   is the evaluative lens over the objective data.
+ * @structure default export TabQuality({ agentName })
+ * @usage rendered by agent-card.js renderTabContent() for the 'quality' tab
+ * @version-history
+ *   v1.0.0 -- 2026-05-31 -- Initial Quality tab (per-context reviews + performance + custom)
+ */
+
+import { h } from 'preact';
+import { useState, useEffect, useRef } from 'preact/hooks';
+import htm from 'htm';
+import { t } from '/js/i18n.js';
+import { getAgentStatistics } from '/js/services/agent-tasks.js';
+
+const html = htm.bind(h);
+
+/** Glyph row for an average star value (rounded to nearest whole star). */
+function starGlyphs(value) {
+  const full = Math.max(0, Math.min(5, Math.round(value)));
+  return '★★★★★'.slice(0, full) + '☆☆☆☆☆'.slice(0, 5 - full);
+}
+
+/** Localised context label, falling back to the raw enum value. */
+function ctxLabel(ctx) {
+  const key = `profile.agents.detail.quality.contexts.${ctx}`;
+  const label = t(key);
+  return label !== key ? label : ctx;
+}
+
+function fmtSeconds(secs) {
+  return `${Number(secs || 0).toLocaleString()}${t('profile.agents.detail.quality.seconds')}`;
+}
+
+export default function TabQuality({ agentName }) {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  async function loadData() {
+    setLoading(true);
+    try {
+      const resp = await getAgentStatistics(agentName);
+      setData(resp?.data || null);
+    } catch { setData(null); }
+    setLoading(false);
+  }
+
+  useEffect(() => { loadData(); }, [agentName]);
+
+  // Live updates: refresh when a rating lands or tasks change.
+  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);
+  }, []);
+
+  if (loading) {
+    return html`<div class="pf-agd-empty">${t('profile.loading')}</div>`;
+  }
+
+  const perf = data?.performance || {};
+  const reviews = data?.reviews || {};
+  const custom = data?.custom || [];
+  const byContext = reviews.byContext || {};
+  const contextKeys = Object.keys(byContext);
+  const durByContext = perf.duration?.byContext || {};
+  const durKeys = Object.keys(durByContext);
+
+  return html`
+    <div class="pf-agd-quality">
+      <!-- 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>
+        <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>
+        <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>
+        <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>
+        <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>
+      </div>
+      ${durKeys.length > 0 && html`
+        <div class="pf-agd-quality-durations">
+          ${durKeys.map(ctx => html`
+            <span key=${ctx} class="pf-agd-quality-dur-chip">
+              ${ctxLabel(ctx)}: ${fmtSeconds(durByContext[ctx].avgSeconds)} (${durByContext[ctx].count})
+            </span>
+          `)}
+        </div>
+      `}
+
+      <!-- Reviews by context -->
+      <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
+        ? html`<div class="pf-agd-empty">${t('profile.agents.detail.quality.noReviews')}</div>`
+        : html`
+          <div class="pf-agd-quality-reviews">
+            ${contextKeys.map(ctx => {
+              const s = byContext[ctx];
+              return html`
+                <div key=${ctx} class="pf-agd-quality-review-row">
+                  <div class="pf-agd-quality-review-head">
+                    <span class="pf-agd-quality-ctx">${ctxLabel(ctx)}</span>
+                    <span class="pf-agd-quality-stars">${starGlyphs(s.avgStars)}</span>
+                    <span class="pf-agd-quality-avg">${Number(s.avgStars).toFixed(1)}</span>
+                    <span class="pf-agd-quality-n">${t('profile.agents.detail.quality.ratings', { count: s.n })}</span>
+                    ${s.lowConfidence && html`<span class="pf-agd-quality-lowconf">${t('profile.agents.detail.quality.lowConfidence')}</span>`}
+                  </div>
+                  <div class="pf-agd-quality-review-meta">${t('profile.agents.detail.quality.grounded', { count: s.sourceGroundedN })}</div>
+                </div>
+              `;
+            })}
+            <div class="pf-agd-quality-overall">
+              ${t('profile.agents.detail.quality.overall')}: ${starGlyphs(reviews.overall?.avgStars || 0)} ${Number(reviews.overall?.avgStars || 0).toFixed(1)} (${t('profile.agents.detail.quality.ratings', { count: reviews.overall?.n || 0 })})
+            </div>
+          </div>
+        `}
+
+      <!-- Custom metrics -->
+      <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
+        ? html`<div class="pf-agd-empty">${t('profile.agents.detail.quality.noCustom')}</div>`
+        : html`
+          <div class="pf-agd-quality-custom">
+            ${custom.map(c => html`
+              <div key=${c.key} class="pf-agd-quality-custom-row">
+                <span class="pf-agd-quality-custom-key">${c.key}</span>
+                <span class="pf-agd-quality-custom-val">${typeof c.value === 'object' ? JSON.stringify(c.value) : String(c.value)}</span>
+              </div>
+            `)}
+          </div>
+        `}
+    </div>
+  `;
+}

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

@@ -9,6 +9,9 @@
  *   - TaskItem -- task row with expand/collapse, todo list, start button
  *   - RequestChangesModal -- inline modal for owner to send a free-text change request
  * @version-history
+ *   v4.3.0 -- 2026-05-31 -- Add per-task "blur title" toggle in the collapsed
+ *     task row (eye icon). Hides a task title behind a CSS blur for screen
+ *     recordings; preference persists per task ID in localStorage (browser-only).
  *   v3.2.0 -- 2026-05-24 -- Add interactive filter pills, scope/rules display, migrate to pf-agd- CSS prefix
  *   v3.1.0 -- 2026-05-24 -- Fix: use correct locale key for empty state
  *   v3.0.0 -- 2026-05-22 -- Replace TaskCreateForm with TaskCreationBuilder (design spec split-panel)
@@ -17,6 +20,9 @@
  *   v1.0.0 -- 2026-05-21 -- Initial creation for Agent Dashboard Phase 1
  *   v3.3.0 -- 2026-05-29 -- Add delete confirmation, "Request changes" modal for the revise-proposed-todos flow, outdated-todo history rendering, and revision_requested status.
  *   v3.3.1 -- 2026-05-30 -- Re-fetch the event log on every live-update tick while a task card is expanded. Without this, the parent refreshed the task object (todos + status) but the events list under it stayed frozen until the user closed and re-opened the card.
+ *   v4.2.0 -- 2026-05-31 -- Add owner "Cancel" on active/stalled tasks: writes an
+ *     agents.cancel.task.<id> marker (worker daemons self-skip before kickoff) +
+ *     natively pauses the active task for immediate effect.
  *   v4.1.0 -- 2026-05-31 -- Show a completed task's deliverable: link to the
  *     agent-memory key it was published to (task.deliverableKey), fetch + preview
  *     the value on demand, and show "no longer exists" if the entry is gone.
@@ -34,12 +40,35 @@ import htm from 'htm';
 const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { timeAgo } from '/js/utils.js';
-import { apiGet } from '/js/api.js';
+import { apiGet, apiPost } from '/js/api.js';
 import { listTasks, deleteTask, startTask, listEvents, requestChanges, createTask } from '/js/services/agent-tasks.js';
 import { useConfirm, Modal } from '/components/Modal.js';
 
 const TASK_FILTERS = ['all', 'active', 'queued', 'completed', 'failed'];
 
+// Per-browser "blur the title" preference. Used when screen-recording the tab
+// so sensitive task titles can be hidden without affecting other viewers or
+// the server. Stored as an array of task IDs in localStorage; survives reloads
+// but never leaves this browser.
+const BLUR_STORAGE_KEY = 'aimeat.blurredTaskTitles';
+
+function readBlurredSet() {
+  try {
+    const parsed = JSON.parse(localStorage.getItem(BLUR_STORAGE_KEY));
+    return new Set(Array.isArray(parsed) ? parsed : []);
+  } catch { return new Set(); }
+}
+
+function isTaskBlurred(taskId) {
+  return readBlurredSet().has(taskId);
+}
+
+function setTaskBlurred(taskId, blurred) {
+  const set = readBlurredSet();
+  if (blurred) set.add(taskId); else set.delete(taskId);
+  try { localStorage.setItem(BLUR_STORAGE_KEY, JSON.stringify([...set])); } catch { /* storage full/blocked -- preference just won't persist */ }
+}
+
 // Character limits -- keep in sync with AgentTaskCreateSchema in
 // src/models/agent-task-schemas.ts (title max 256, description max 10000).
 // The agent crew reads task.description as its prompt, so that is the field
@@ -183,8 +212,18 @@ function TaskItem({ task, agentName, showToast, onRefresh }) {
   const [showOutdated, setShowOutdated] = useState(false);
   // Deliverable preview: null = not requested, {loading}|{notFound}|{value}.
   const [deliverable, setDeliverable] = useState(null);
+  // Local-only "hide the title" toggle (for screen recordings). Persisted per
+  // task ID in localStorage; see helpers at top of file.
+  const [blurred, setBlurred] = useState(() => isTaskBlurred(task.id));
   const { confirm, ConfirmUI } = useConfirm();
 
+  function handleToggleBlur(e) {
+    e.stopPropagation();
+    const next = !blurred;
+    setBlurred(next);
+    setTaskBlurred(task.id, next);
+  }
+
   // Fetch the task's published deliverable from the agent's memory namespace.
   // Uses the owner list endpoint (?agent=<gaii>&prefix=<key>) which returns the
   // value inline; if the exact key is gone, show that it no longer exists.
@@ -265,6 +304,32 @@ function TaskItem({ task, agentName, showToast, onRefresh }) {
     );
   }
 
+  // Cooperative cancel for a running/queued subtask: write an
+  // `agents.cancel.task.<id>` marker (owner_scope-visible, so the worker daemon
+  // self-skips before its next kickoff) AND, for immediate effect, natively
+  // pause an active task. Covers the "coordinator over-delegated; stop the work
+  // nobody is waiting for" case.
+  function handleCancel(e) {
+    e.stopPropagation();
+    confirm(
+      t('profile.agents.tasks.cancelConfirm') + ': ' + (task.title || task.id) + '?',
+      async () => {
+        try {
+          await apiPost('/v1/memory', { key: 'agents.cancel.task.' + task.id, value: [task.id], visibility: 'owner' });
+          // Immediate native stop (owner-only): pause active tasks.
+          if (task.status === 'active') {
+            try { await apiPost(`/v1/agents/${encodeURIComponent(agentName)}/tasks/${encodeURIComponent(task.id)}/pause`, {}); } catch { /* marker still applies */ }
+          }
+          showToast(t('profile.agents.tasks.cancelled'));
+          onRefresh();
+        } catch (err) {
+          showToast(err.message || t('profile.agents.tasks.cancelError'), true);
+        }
+      },
+      { danger: true },
+    );
+  }
+
   function handleOpenRevision(e) {
     e.stopPropagation();
     setShowRevisionModal(true);
@@ -309,7 +374,13 @@ function TaskItem({ task, agentName, showToast, onRefresh }) {
     <div>
       <div class="pf-agd-task-item" onClick=${handleExpand}>
         <div class="pf-agd-task-title-row">
-          <span class="pf-agd-task-title">${task.title || task.id}</span>
+          <button
+            class=${`pf-agd-blur-toggle ${blurred ? 'pf-agd-blur-toggle--on' : ''}`}
+            onClick=${handleToggleBlur}
+            title=${blurred ? t('profile.agents.tasks.unblurTitle') : t('profile.agents.tasks.blurTitle')}
+            aria-pressed=${blurred}
+          >${blurred ? '🙈' : '👁'}</button>
+          <span class=${`pf-agd-task-title ${blurred ? 'pf-agd-task-title--blurred' : ''}`}>${task.title || task.id}</span>
           ${progress && html`<span class="pf-agd-todo-progress">${progress}</span>`}
         </div>
         <div class="pf-agd-task-meta">
@@ -454,6 +525,9 @@ function TaskItem({ task, agentName, showToast, onRefresh }) {
                 ${t('profile.agents.tasks.requestChanges')}
               </button>
             `}
+            ${(isActive || task.status === 'stalled') && html`
+              <button class="btn-danger btn-sm" onClick=${handleCancel}>${t('profile.agents.tasks.cancel')}</button>
+            `}
             ${(isQueued || task.status === 'draft' || isRevisionRequested) && html`
               <button class="btn-danger btn-sm" onClick=${handleDelete}>${t('profile.agents.tasks.delete')}</button>
             `}