aimeat 1.8.0 → 1.9.0

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`;
+}

package/dist/public/views/profile/agents/state-detector.js

@@ -0,0 +1,62 @@
+/**
+ * @file state-detector.js
+ * @description Determines agent state from onboarding record and agent data.
+ *   States: 'new' | 'onboarding' | 'problem' | 'idle' | 'production'
+ *   Also provides default tab selection and state color mapping.
+ * @version-history
+ *   v1.3.0 -- 2026-05-24 -- Remove unused getStateLabel() export (audit fix #7)
+ *   v1.2.1 -- 2026-05-24 -- Document idle state in design spec, align with audit findings
+ *   v1.2.0 -- 2026-05-24 -- Add idle state for inactive production agents
+ *   v1.1.0 -- 2026-05-24 -- Fix: onboarding color to yellow, add readiness drop detection for problem state
+ *   v1.0.0 -- 2026-05-24 -- Initial creation for Agent Detail Tab-View
+ */
+
+/**
+ * Detect agent state from onboarding record and agent data.
+ * Checked in priority order: new > onboarding > problem > idle > production.
+ */
+export function detectAgentState(agent, onboarding) {
+  if (!onboarding || onboarding.status === 'pending' || onboarding.status === 'not_started') return 'new';
+  if (onboarding.status === 'in_progress') return 'onboarding';
+
+  const webhookDown = (agent.webhookFailCount ?? 0) >= 5;
+  const noTelemetry = !agent.last_seen || isStale(agent.last_seen, 24 * 60);
+  const readinessDrop = onboarding.previousReadinessLevel && onboarding.readinessLevel
+    && readinessRank(onboarding.readinessLevel) < readinessRank(onboarding.previousReadinessLevel);
+  if (webhookDown || noTelemetry || readinessDrop) return 'problem';
+
+  if (!agent.last_seen || isStale(agent.last_seen, 60)) return 'idle';
+  return 'production';
+}
+
+export function getDefaultTab(state) {
+  switch (state) {
+    case 'new': return 'integration';
+    case 'onboarding': return 'integration';
+    case 'problem': return 'integration';
+    case 'idle': return 'tasks';
+    case 'production': return 'tasks';
+    default: return 'tasks';
+  }
+}
+
+export function getStateColor(state) {
+  switch (state) {
+    case 'new': return 'var(--warning)';
+    case 'onboarding': return 'var(--warning)';
+    case 'problem': return 'var(--danger)';
+    case 'idle': return 'var(--text-muted)';
+    case 'production': return 'var(--success)';
+    default: return 'var(--text-muted)';
+  }
+}
+
+const READINESS_RANKS = { none: 0, basic: 1, standard: 2, advanced: 3, full: 4 };
+function readinessRank(level) {
+  return READINESS_RANKS[level] ?? 0;
+}
+
+function isStale(isoDate, thresholdMinutes) {
+  const diff = Date.now() - new Date(isoDate).getTime();
+  return diff > thresholdMinutes * 60 * 1000;
+}