aimeat 1.7.0 → 1.9.0

package/dist/public/views/admin/prompts-tab.js

@@ -3,7 +3,6 @@ import { useState } from 'preact/hooks';
 import htm from 'htm';
 const html = htm.bind(h);
 import { t } from '/js/i18n.js';
-import { escHtml } from '/js/utils.js';
 import { dt, Badge, StatsGrid, Empty, ExpandableHelp, Spinner } from './shared.js';
 import {
   getSystemPrompts, getSystemPrompt, updateSystemPrompt,
@@ -141,8 +140,8 @@ export default function PromptsTab({ data, reload }) {
     return html`
       <div>
         <button class="adm-btn-action" onClick=${() => { setEditId(null); setEditData(null); }}>← ${t('dashboard.promptsTab')}</button>
-        <h3 style="margin:12px 0 4px">${escHtml(editData.name)}</h3>
-        <p class="adm-text-dim adm-text-base" style="margin:0 0 16px">${escHtml(editData.description)}</p>
+        <h3 style="margin:12px 0 4px">${editData.name}</h3>
+        <p class="adm-text-dim adm-text-base" style="margin:0 0 16px">${editData.description}</p>
 
         <!-- Active toggle -->
         <label class="adm-flex-center adm-mb-md" style="cursor:pointer">
@@ -172,8 +171,8 @@ export default function PromptsTab({ data, reload }) {
           <div style="margin:8px 0">
             <strong class="adm-text-base">${t('dashboard.promptsUsedIn')}:</strong>
             ${editData.usedIn.map(u => u.startsWith('/')
-              ? html` <a href="${u}" target="_blank" class="adm-prompt-used-tag" style="text-decoration:none;color:var(--accent,#06b6d4)">${escHtml(u)}</a>`
-              : html` <span class="adm-prompt-used-tag">${escHtml(u)}</span>`
+              ? html` <a href="${u}" target="_blank" class="adm-prompt-used-tag" style="text-decoration:none;color:var(--accent,#06b6d4)">${u}</a>`
+              : html` <span class="adm-prompt-used-tag">${u}</span>`
             )}
           </div>
         `}
@@ -202,7 +201,7 @@ export default function PromptsTab({ data, reload }) {
             : versions.map(v => html`
               <div class="adm-prompt-version-row">
                 <span style="font-weight:600">v${v.version}</span>
-                <span class="adm-text-dim" style="flex:1">${dt(v.changedAt)} · ${escHtml(v.changedBy)}${v.changeNote ? ` · ${escHtml(v.changeNote)}` : ''}</span>
+                <span class="adm-text-dim" style="flex:1">${dt(v.changedAt)} · ${v.changedBy}${v.changeNote ? ` · ${v.changeNote}` : ''}</span>
                 <button class="adm-btn-sm" onClick=${() => handleRestore(v.version)} disabled=${saving}>
                   ${t('dashboard.promptsRestore')}
                 </button>
@@ -263,14 +262,14 @@ export default function PromptsTab({ data, reload }) {
             <div class="adm-hrow" style="cursor:pointer" onClick=${() => openEdit(p.id)}>
               <div style="flex:1">
                 <div class="adm-flex-center" style="gap:6px">
-                  <strong>${escHtml(p.name)}</strong>
+                  <strong>${p.name}</strong>
                   <${Badge} type=${p.active ? 'healthy' : 'critical'} />
                 </div>
-                <div class="adm-text-sm adm-text-dim">${escHtml(p.description)}</div>
+                <div class="adm-text-sm adm-text-dim">${p.description}</div>
                 ${p.usedIn && p.usedIn.length > 0 && html`
                   <div>${p.usedIn.map(u => u.startsWith('/')
-                    ? html`<a href="${u}" target="_blank" class="adm-prompt-used-tag" style="text-decoration:none;color:var(--accent,#06b6d4)" onClick=${e => e.stopPropagation()}>${escHtml(u)}</a> `
-                    : html`<span class="adm-prompt-used-tag">${escHtml(u)}</span> `
+                    ? html`<a href="${u}" target="_blank" class="adm-prompt-used-tag" style="text-decoration:none;color:var(--accent,#06b6d4)" onClick=${e => e.stopPropagation()}>${u}</a> `
+                    : html`<span class="adm-prompt-used-tag">${u}</span> `
                   )}</div>
                 `}
               </div>

package/dist/public/views/admin.js

@@ -50,6 +50,7 @@ import GeneratorDebugTab from './admin/generator-debug-tab.js';
 import CapabilitiesAdminTab from './admin/capabilities-tab.js';
 import AgentTasksAdminTab from './admin/agent-tasks-tab.js';
 import SharingGroupsAdminTab from './admin/sharing-groups-tab.js';
+import AgentIntegrationAdminTab from './admin/agent-integration-tab.js';
 
 // ── Sidebar nav structure ──
 const NAV_GROUPS = [
@@ -68,6 +69,7 @@ const NAV_GROUPS = [
     { id: 'owners',  icon: '\u{1F464}', key: 'dashboard.owners',  component: OwnersTab,  count: 'owners' },
     { id: 'agents',  icon: '\u{1F916}', key: 'dashboard.agents',  component: AgentsTab,  count: 'agents' },
     { id: 'ghii',    icon: '\u{1F511}', key: 'dashboard.ghii',    component: GhiiTab,    count: 'ghii' },
+    { id: 'agent-integration', icon: '\u{1F50C}', key: 'admin.tabs.agentIntegration', component: AgentIntegrationAdminTab },
   ]},
   { key: 'dashboard.navData', items: [
     { id: 'actions',       icon: '\u26A1',     key: 'dashboard.actions',       component: ActionsTab,        count: 'actions' },

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

@@ -51,6 +51,8 @@ function SharingGroupsSection({ showToast }) {
   const [editingId, setEditingId] = useState(null);
   const [editName, setEditName] = useState('');
   const [editDesc, setEditDesc] = useState('');
+  const [editRead, setEditRead] = useState(true);
+  const [editWrite, setEditWrite] = useState(false);
   const [saving, setSaving] = useState(false);
 
   const loadGroups = useCallback(async () => {
@@ -119,6 +121,8 @@ function SharingGroupsSection({ showToast }) {
     setEditingId(group.id);
     setEditName(group.name);
     setEditDesc(group.description || '');
+    setEditRead(group.defaultPermissions?.read ?? true);
+    setEditWrite(group.defaultPermissions?.write ?? false);
   }, []);
 
   const handleUpdate = useCallback(async (id) => {
@@ -131,6 +135,7 @@ function SharingGroupsSection({ showToast }) {
       await groupsApi.updateGroup(id, {
         name: editName.trim(),
         description: editDesc.trim() || undefined,
+        default_permissions: { read: editRead, write: editWrite },
       });
       showToast(t('profile.access.sgUpdated') || 'Group updated');
       setEditingId(null);
@@ -297,6 +302,19 @@ function SharingGroupsSection({ showToast }) {
                 <textarea class="input-field input-sm" rows="2"
                   value=${editDesc} onInput=${e => setEditDesc(e.target.value)} />
               </div>
+              <div class="form-row">
+                <label>${t('profile.access.sgDefaultPerms') || 'Default permissions'}</label>
+                <div class="flex-row-wrap">
+                  <label class="flex-row">
+                    <input type="checkbox" checked=${editRead} onChange=${() => setEditRead(!editRead)} />
+                    ${t('profile.access.sgRead') || 'Read'}
+                  </label>
+                  <label class="flex-row">
+                    <input type="checkbox" checked=${editWrite} onChange=${() => setEditWrite(!editWrite)} />
+                    ${t('profile.access.sgWrite') || 'Write'}
+                  </label>
+                </div>
+              </div>
               <div class="form-actions">
                 <button class="btn-primary btn-sm" onClick=${() => handleUpdate(group.id)} disabled=${saving}>
                   ${saving ? '...' : (t('profile.access.sgSave') || 'Save')}

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

@@ -0,0 +1,396 @@
+/**
+ * @file agent-card.js
+ * @description Agent card component with collapsed/expanded states,
+ *   Two-Zone Header (identity + state-dependent status), and 8-tab bar.
+ * @version-history
+ *   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
+ *   v1.2.0 -- 2026-05-24 -- Add idle state handling, tokens today display, combined delivery label
+ */
+
+import { h } from 'preact';
+import { useState, useEffect, useCallback } from 'preact/hooks';
+import htm from 'htm';
+import { t } from '/js/i18n.js';
+import { timeAgo } from '/js/utils.js';
+import { detectAgentState, getDefaultTab, getStateColor } from './state-detector.js';
+import { testWebhook, updateWebhook } from '/js/services/agent-integration.js';
+import TabIntegration from './tab-integration.js';
+import TabTasks from './tab-tasks.js';
+import TabMessages from './tab-messages.js';
+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 TabServices from './tab-services.js';
+
+const html = htm.bind(h);
+
+const TABS = [
+  { id: 'integration', key: 'profile.agents.detail.tabs.integration' },
+  { id: 'tasks', key: 'profile.agents.detail.tabs.tasks' },
+  { id: 'messages', key: 'profile.agents.detail.tabs.messages' },
+  { id: 'data-access', key: 'profile.agents.detail.tabs.data_access' },
+  { 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: 'services', key: 'profile.agents.detail.tabs.services' },
+];
+
+export default function AgentCard({ agent, onboarding, expanded, onToggle, session, showToast, allAgents, onScopesClick, onDeleteClick, onFederateToggle }) {
+  const state = detectAgentState(agent, onboarding);
+  const [activeTab, setActiveTab] = useState(null);
+
+  useEffect(() => {
+    if (expanded && activeTab === null) {
+      setActiveTab(getDefaultTab(state));
+    }
+  }, [expanded]);
+
+  const handleCollapse = useCallback(() => {
+    onToggle(agent.name);
+    if (expanded) setActiveTab(null);
+  }, [expanded, agent.name, onToggle]);
+
+  if (!expanded) {
+    return html`
+      <div class="pf-agd-card">
+        <div class="pf-agd-collapsed ${state === 'problem' ? 'pf-agd-collapsed--problem' : ''}"
+             onClick=${() => onToggle(agent.name)}>
+          <span class="pf-agd-expand-icon">▶</span>
+          <span class="pf-agd-collapsed-icon">🤖</span>
+          <span class="pf-agd-collapsed-name">${agent.display_name || agent.name}</span>
+          <div class="pf-agd-collapsed-badges">
+            ${renderPlatformBadge(onboarding)}
+            ${renderReadinessBadge(state, onboarding)}
+            ${agent.federate && html`<span class="pf-agd-badge pf-agd-badge--federation">${t('profile.federated')}</span>`}
+          </div>
+          <span class="pf-agd-collapsed-stats">
+            ${renderDeliveryIndicator(agent)}
+            ${renderCollapsedStats(state, agent, onboarding)}
+          </span>
+        </div>
+      </div>
+    `;
+  }
+
+  return html`
+    <div class="pf-agd-card">
+      <div class="pf-agd-expanded">
+        <!-- Zone 1: Identity -->
+        <div class="pf-agd-zone1" onClick=${handleCollapse}>
+          <span class="pf-agd-expand-icon pf-agd-expand-icon--open">▼</span>
+          <div class="pf-agd-zone1-identity">
+            <span class="pf-agd-zone1-name">${agent.display_name || agent.name}</span>
+          </div>
+          <div class="pf-agd-zone1-badges">
+            ${renderPlatformBadge(onboarding)}
+            ${renderReadinessBadge(state, onboarding)}
+            ${agent.federate && html`<span class="pf-agd-badge pf-agd-badge--federation">${t('profile.federated')}</span>`}
+          </div>
+          <span class="pf-agd-zone1-right">
+            ${agent.last_seen ? `${t('profile.agents.detail.lastSeen')}: ${timeAgo(agent.last_seen)}` : ''}
+          </span>
+        </div>
+
+        <!-- Capabilities -->
+        ${(agent.technical_capabilities?.length > 0 || agent.domain_capabilities?.length > 0) && html`
+          <div class="pf-agd-capabilities">
+            ${(agent.technical_capabilities || []).map(c => html`
+              <span key=${c.name || c} class="pf-agd-cap-badge pf-agd-cap-badge--tech">${c.name || c}</span>
+            `)}
+            ${(agent.domain_capabilities || []).map(c => html`
+              <span key=${c} class="pf-agd-cap-badge pf-agd-cap-badge--domain">${c}</span>
+            `)}
+          </div>
+        `}
+
+        <!-- Zone 2: Status -->
+        ${renderZone2(state, agent, onboarding, setActiveTab, showToast)}
+
+        <!-- Tab Bar -->
+        <div class="pf-agd-tabs">
+          ${TABS.map(tab => {
+            const label = t(tab.key);
+            return html`
+              <button key=${tab.id}
+                      class="pf-agd-tab ${activeTab === tab.id ? 'pf-agd-tab--active' : ''}"
+                      onClick=${(e) => { e.stopPropagation(); setActiveTab(tab.id); }}>
+                ${label !== tab.key ? label : tab.id.charAt(0).toUpperCase() + tab.id.slice(1)}
+              </button>
+            `;
+          })}
+        </div>
+
+        <!-- Tab Content -->
+        <div class="pf-agd-tab-content" onClick=${(e) => e.stopPropagation()}>
+          ${renderTabContent(activeTab, agent, onboarding, session, showToast, allAgents)}
+        </div>
+
+        <!-- Card Footer: Scopes + Delete -->
+        <div class="pf-agd-card-footer">
+          <div class="pf-agd-card-actions">
+            ${onScopesClick && html`
+              <button class="btn-outline btn-sm" onClick=${(e) => { e.stopPropagation(); onScopesClick(agent); }}>
+                ${t('profile.agents.scopeUi.manage')}
+              </button>
+            `}
+            ${onFederateToggle && html`
+              <button class="btn-ghost btn-sm" onClick=${(e) => { e.stopPropagation(); onFederateToggle(agent); }}>
+                ${agent.federate ? t('profile.federated') : t('profile.notFederated')}
+              </button>
+            `}
+          </div>
+          ${onDeleteClick && html`
+            <button class="btn-danger btn-sm" onClick=${(e) => { e.stopPropagation(); onDeleteClick(agent.name); }}>
+              ${t('profile.agents.deleteAgent')}
+            </button>
+          `}
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+function renderDeliveryIndicator(agent) {
+  const hasWebhook = agent.webhookUrl || agent.webhook_url;
+  const hasMcp = agent.mcpEnabled || agent.mcp_enabled;
+  const failCount = agent.webhookFailCount ?? 0;
+  const icon = hasWebhook ? (failCount >= 5 ? '⚠' : '✓') : '';
+
+  let label;
+  if (hasMcp && hasWebhook) {
+    label = t('profile.agents.detail.deliveryMcpWh');
+  } else if (hasWebhook) {
+    label = t('profile.agents.detail.deliveryWh');
+  } else if (hasMcp) {
+    label = t('profile.agents.detail.deliveryMcp');
+  } else {
+    label = t('profile.agents.detail.deliveryPolling');
+  }
+
+  return html`<span class="pf-agd-delivery-indicator">${label}${icon ? ` ${icon}` : ''} </span>`;
+}
+
+function renderPlatformBadge(onboarding) {
+  const platform = onboarding?.platformName || onboarding?.detectedPlatform;
+  if (!platform) return null;
+  const version = onboarding?.platformVersion;
+  return html`<span class="pf-agd-badge pf-agd-badge--platform">${platform}${version ? ` v${version}` : ''}</span>`;
+}
+
+const READINESS_RANKS = { none: 0, basic: 1, standard: 2, advanced: 3, full: 4 };
+
+function renderReadinessBadge(state, onboarding) {
+  if (state === 'new') {
+    return html`<span class="pf-agd-badge pf-agd-badge--readiness-none">--</span>`;
+  }
+  if (state === 'onboarding') {
+    const passed = onboarding?.steps?.filter(s => s.status === 'passed').length ?? 0;
+    const total = onboarding?.steps?.length ?? 11;
+    return html`<span class="pf-agd-badge pf-agd-badge--readiness-onboarding">${t('profile.agents.detail.state.onboarding')}: ${passed}/${total}</span>`;
+  }
+  if (state === 'problem') {
+    const level = onboarding?.readinessLevel || 'none';
+    const score = onboarding?.readinessScore;
+    if (!score && score !== 0) return html`<span class="pf-agd-badge pf-agd-badge--readiness-none">--</span>`;
+    const label = t(`agentOnboarding.readiness.${level}`);
+    const degraded = onboarding?.previousReadinessLevel && (READINESS_RANKS[level] ?? 0) < (READINESS_RANKS[onboarding.previousReadinessLevel] ?? 0);
+    return html`<span class="pf-agd-badge pf-agd-badge--readiness-${level} ${degraded ? 'pf-agd-badge--degraded' : ''}">${degraded ? '↓ ' : ''}${label} (${score})</span>`;
+  }
+  // idle and production both show level + score
+  const level = onboarding?.readinessLevel || 'none';
+  const score = onboarding?.readinessScore;
+  if (!score && score !== 0) return html`<span class="pf-agd-badge pf-agd-badge--readiness-none">--</span>`;
+  const label = t(`agentOnboarding.readiness.${level}`);
+  return html`<span class="pf-agd-badge pf-agd-badge--readiness-${level}">${label} (${score})</span>`;
+}
+
+function renderCollapsedStats(state, agent, onboarding) {
+  switch (state) {
+    case 'new':
+      return html`${agent.last_seen ? `${t('profile.agents.detail.lastSeen')}: ${timeAgo(agent.last_seen)}` : ''} | ${t('profile.agents.detail.state.newSummary')}`;
+    case 'onboarding': {
+      const nextStep = onboarding?.steps?.find(s => s.status === 'pending');
+      return html`${agent.last_seen ? `${t('profile.agents.detail.lastSeen')}: ${timeAgo(agent.last_seen)}` : ''} ${nextStep ? `| ${t('profile.agents.detail.state.next')}: ${t('agentOnboarding.steps.' + nextStep.id) || nextStep.title || nextStep.id}` : ''}`;
+    }
+    case 'problem':
+      return html`${t('profile.agents.detail.state.problemSummary')} | ${agent.last_seen ? `${t('profile.agents.detail.lastSeen')}: ${timeAgo(agent.last_seen)}` : ''}`;
+    case 'idle':
+    case 'production':
+    default: {
+      const parts = [];
+      if (agent.last_seen) parts.push(`${t('profile.agents.detail.lastSeen')}: ${timeAgo(agent.last_seen)}`);
+      if (agent.taskStats) {
+        const { done, active: act } = agent.taskStats;
+        if (done || act) parts.push(`${t('profile.agents.detail.today')}: ${done || 0} ${t('profile.agents.detail.done')}${act ? `, ${act} ${t('profile.agents.detail.active')}` : ''}`);
+      }
+      if (agent.tokensUsedToday != null) parts.push(`${t('profile.agents.detail.tokensToday')}: ${agent.tokensUsedToday.toLocaleString()}`);
+      return html`${parts.join(' | ')}`;
+    }
+  }
+}
+
+function renderZone2(state, agent, onboarding, setActiveTab, showToast) {
+  switch (state) {
+    case 'new':
+      return html`
+        <div class="pf-agd-zone2 pf-agd-zone2--new">
+          <div class="pf-agd-zone2-title">${t('profile.agents.detail.zone2.newTitle')}</div>
+          <div class="pf-agd-zone2-desc">${t('profile.agents.detail.zone2.newDesc')}</div>
+          <div class="pf-agd-zone2-actions">
+            <button class="btn-primary btn-sm" onClick=${(e) => { e.stopPropagation(); setActiveTab('integration'); }}>
+              ${t('profile.agents.detail.zone2.goToIntegration')}
+            </button>
+          </div>
+        </div>
+      `;
+    case 'onboarding': {
+      const steps = onboarding?.steps || [];
+      const passed = steps.filter(s => s.status === 'passed').length;
+      const total = steps.length || 11;
+      const pct = Math.round((passed / total) * 100);
+      const nextStep = steps.find(s => s.status === 'pending');
+      return html`
+        <div class="pf-agd-zone2 pf-agd-zone2--onboarding">
+          <div class="pf-agd-zone2-title">
+            ${t('profile.agents.detail.zone2.onboardingTitle')}: ${passed} / ${total}
+            ${nextStep ? html`<span class="pf-agd-zone2-desc"> ${t('profile.agents.detail.state.next')}: ${t('agentOnboarding.steps.' + nextStep.id) || nextStep.title || nextStep.id}</span>` : ''}
+          </div>
+          <div class="pf-agd-progress-bar">
+            <div class="pf-agd-progress-fill" style="width: ${pct}%"></div>
+          </div>
+          <div class="pf-agd-step-pills">
+            ${steps.map(s => html`
+              <span key=${s.id} class="pf-agd-step-pill pf-agd-step-pill--${s.status}">
+                ${s.status === 'passed' ? '✓' : '○'} ${t('agentOnboarding.steps.' + s.id) || s.title || s.id}
+              </span>
+            `)}
+          </div>
+        </div>
+      `;
+    }
+    case 'problem':
+      return html`<${ProblemZone2} agent=${agent} setActiveTab=${setActiveTab} showToast=${showToast} />`;
+
+    case 'idle':
+    case 'production':
+    default: {
+      const tags = agent.tags ?? [];
+      const hasWebhook = agent.webhookUrl || agent.webhook_url;
+      const hasMcp = agent.mcpEnabled || agent.mcp_enabled;
+      let deliveryLabel;
+      if (hasMcp && hasWebhook) deliveryLabel = t('profile.agents.detail.deliveryMcpWh');
+      else if (hasWebhook) deliveryLabel = t('profile.agents.detail.deliveryWh');
+      else if (hasMcp) deliveryLabel = t('profile.agents.detail.deliveryMcp');
+      else deliveryLabel = t('profile.agents.detail.deliveryPolling');
+      const stats = agent.taskStats;
+      return html`
+        <div class="pf-agd-zone2 pf-agd-zone2--production">
+          <div class="pf-agd-zone2-stats">
+            <span>${deliveryLabel}</span>
+            ${agent.last_seen ? html`<span>${t('profile.agents.detail.lastSeen')}: ${timeAgo(agent.last_seen)}</span>` : ''}
+            ${stats && (stats.done || stats.active) ? html`<span>${t('profile.agents.detail.today')}: ${stats.done || 0} ${t('profile.agents.detail.done')}${stats.active ? `, ${stats.active} ${t('profile.agents.detail.active')}` : ''}</span>` : ''}
+            ${agent.tokensUsedToday != null ? html`<span>${t('profile.agents.detail.tokensToday')}: ${agent.tokensUsedToday.toLocaleString()}</span>` : ''}
+            ${tags.length > 0 ? html`<span>${t('profile.agents.detail.sharedTags')}: ${tags.map(tag => `[${tag}]`).join(' ')}</span>` : ''}
+          </div>
+        </div>
+      `;
+    }
+  }
+}
+
+function ProblemZone2({ agent, setActiveTab, showToast }) {
+  const [editingUrl, setEditingUrl] = useState(false);
+  const [urlValue, setUrlValue] = useState(agent.webhook_url || agent.webhookUrl || '');
+  const [testing, setTesting] = useState(false);
+
+  async function handleTestWebhook(e) {
+    e.stopPropagation();
+    setTesting(true);
+    try {
+      const resp = await testWebhook(agent.name);
+      if (resp?.ok !== false) {
+        showToast(t('profile.agents.detail.zone2.testWebhookSuccess'));
+      } else {
+        showToast(t('profile.agents.detail.zone2.testWebhookFailed'), true);
+      }
+    } catch {
+      showToast(t('profile.agents.detail.zone2.testWebhookFailed'), true);
+    }
+    setTesting(false);
+  }
+
+  async function handleSaveUrl(e) {
+    e.stopPropagation();
+    try {
+      const resp = await updateWebhook(agent.name, { url: urlValue });
+      if (resp?.ok !== false) {
+        showToast(t('profile.agents.detail.zone2.urlUpdated'));
+        setEditingUrl(false);
+      } else {
+        showToast(t('profile.agents.detail.zone2.urlUpdateFailed'), true);
+      }
+    } catch {
+      showToast(t('profile.agents.detail.zone2.urlUpdateFailed'), true);
+    }
+  }
+
+  function handleOverrideReadiness(e) {
+    e.stopPropagation();
+    setActiveTab('integration');
+  }
+
+  const failCount = agent.webhookFailCount ?? 0;
+
+  return html`
+    <div class="pf-agd-zone2 pf-agd-zone2--problem">
+      <div class="pf-agd-zone2-title">${t('profile.agents.detail.zone2.problemTitle')}</div>
+      <div class="pf-agd-zone2-desc">
+        ${failCount >= 5 ? t('profile.agents.detail.zone2.webhookFailed', { count: failCount }) : ''}
+        ${!agent.last_seen ? t('profile.agents.detail.zone2.noTelemetry') : ''}
+      </div>
+      <div class="pf-agd-zone2-actions">
+        <button class="btn-outline btn-sm" onClick=${handleTestWebhook} disabled=${testing}>
+          ${t('profile.agents.detail.zone2.testWebhook')}
+        </button>
+        <button class="btn-outline btn-sm" onClick=${(e) => { e.stopPropagation(); setEditingUrl(!editingUrl); }}>
+          ${t('profile.agents.detail.zone2.updateUrl')}
+        </button>
+        <button class="btn-outline btn-sm" onClick=${handleOverrideReadiness}>
+          ${t('profile.agents.detail.zone2.overrideReadiness')}
+        </button>
+      </div>
+      ${editingUrl && html`
+        <div class="pf-agd-zone2-url-form">
+          <input type="text" value=${urlValue}
+                 onInput=${(e) => setUrlValue(e.target.value)}
+                 onClick=${(e) => e.stopPropagation()}
+                 placeholder="https://..." />
+          <button class="btn-primary btn-sm" onClick=${handleSaveUrl}>
+            ${t('profile.agents.detail.zone2.save')}
+          </button>
+          <button class="btn-outline btn-sm" onClick=${(e) => { e.stopPropagation(); setEditingUrl(false); }}>
+            ${t('profile.agents.detail.zone2.cancel')}
+          </button>
+        </div>
+      `}
+    </div>
+  `;
+}
+
+function renderTabContent(activeTab, agent, onboarding, session, showToast, allAgents) {
+  const props = { agent, onboarding, session, showToast, agentName: agent.name, allAgents };
+  switch (activeTab) {
+    case 'integration': return html`<${TabIntegration} ...${props} />`;
+    case 'tasks': return html`<${TabTasks} ...${props} />`;
+    case 'messages': return html`<${TabMessages} ...${props} />`;
+    case 'data-access': return html`<${TabDataAccess} ...${props} />`;
+    case 'directives': return html`<${TabDirectives} ...${props} />`;
+    case 'agent-config': return html`<${TabAgentConfig} ...${props} />`;
+    case 'activity': return html`<${TabActivity} ...${props} />`;
+    case 'services': return html`<${TabServices} ...${props} />`;
+    default: return null;
+  }
+}

package/dist/public/views/profile/agents/shared-board.js

@@ -0,0 +1,97 @@
+/**
+ * @file shared-board.js
+ * @description Shared Agent Board component. Shows fleet-wide overview grid
+ *   above agent cards with mini-cards per agent and shared tag summary.
+ * @version-history
+ *   v1.1.0 -- 2026-05-24 -- Fix: board card name colored by state, fix locale prefix
+ *   v1.0.0 -- 2026-05-24 -- Initial creation for Agent Detail Tab-View
+ */
+
+import { h } from 'preact';
+import { useMemo } from 'preact/hooks';
+import htm from 'htm';
+import { t } from '/js/i18n.js';
+import { detectAgentState, getStateColor } from './state-detector.js';
+
+const html = htm.bind(h);
+
+export default function SharedBoard({ agents, onboardings, onAgentClick }) {
+  if (!agents || agents.length === 0) return null;
+
+  const agentStates = useMemo(() => {
+    return agents.map(agent => ({
+      agent,
+      state: detectAgentState(agent, onboardings?.[agent.name]),
+      onboarding: onboardings?.[agent.name],
+    }));
+  }, [agents, onboardings]);
+
+  const allTags = useMemo(() => {
+    const tagCounts = {};
+    for (const { agent } of agentStates) {
+      for (const tag of agent.tags ?? []) {
+        tagCounts[tag] = (tagCounts[tag] || 0) + 1;
+      }
+    }
+    return tagCounts;
+  }, [agentStates]);
+
+  return html`
+    <div class="pf-agd-board">
+      <div class="pf-agd-board-grid">
+        ${agentStates.map(({ agent, state, onboarding }) => html`
+          <div
+            key=${agent.name}
+            class="pf-agd-board-card"
+            style="border-left-color: ${getStateColor(state)}"
+            onClick=${() => onAgentClick?.(agent.name)}
+          >
+            <div class="pf-agd-board-card-name" style="color: ${getStateColor(state)}">${agent.display_name || agent.name}</div>
+            <div class="pf-agd-board-card-activity">
+              ${renderActivitySummary(state, agent, onboarding)}
+            </div>
+            <div class="pf-agd-board-card-tags">
+              ${(agent.tags ?? []).length > 0
+                ? (agent.tags ?? []).join(', ')
+                : '--'}
+            </div>
+          </div>
+        `)}
+      </div>
+      ${Object.keys(allTags).length > 0 && html`
+        <div class="pf-agd-board-tags">
+          ${t('profile.agents.detail.sharedTags')}: ${Object.entries(allTags).map(([tag, count]) =>
+            html`<span class="pf-agd-tag-pill" key=${tag}>[${tag}] (${count})</span> `
+          )}
+        </div>
+      `}
+    </div>
+  `;
+}
+
+function renderActivitySummary(state, agent, onboarding) {
+  switch (state) {
+    case 'new':
+      return t('profile.agents.detail.state.newSummary');
+    case 'onboarding': {
+      const passed = onboarding?.steps?.filter(s => s.status === 'passed').length ?? 0;
+      const total = onboarding?.steps?.length ?? 11;
+      return `${t('profile.agents.detail.state.onboarding')}: ${passed}/${total}`;
+    }
+    case 'problem':
+      return t('profile.agents.detail.state.problemSummary');
+    case 'production':
+    default:
+      return agent.last_seen
+        ? `${t('profile.agents.detail.lastSeen')}: ${formatTimeAgo(agent.last_seen)}`
+        : t('profile.agents.detail.state.idle');
+  }
+}
+
+function formatTimeAgo(isoDate) {
+  const diff = Math.floor((Date.now() - new Date(isoDate).getTime()) / 1000);
+  if (diff < 60) return `${diff}s`;
+  if (diff < 3600) return `${Math.floor(diff / 60)}m`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h`;
+  return `${Math.floor(diff / 86400)}d`;
+}